feat: replace ts-node by tsx

bin/build.ts

@@ -1,41 +1,22 @@
 import { cpSync } from 'node:fs';
 import { resolve } from 'node:path';
 import { build as buildVite } from 'vite';
-import { createServer as createViteServer } from 'vite';
+
+import { ASSETS_DIR, OUT_DIR, OUT_PUBLIC_DIR } from '@/app-paths';
+import { writeJsonDataFiles } from '@/helpers/contentHelper';
 
 const BASE_URL = process.env.BASE_URL || '/';
 const MODE = process.env.NODE_ENV || 'production';
-const ROOT_DIR = process.cwd();
-const ASSETS_DIR = resolve(ROOT_DIR, '_assets');
-const OUT_DIR = resolve(ROOT_DIR, 'dist');
-const OUT_PUBLIC_DIR = resolve(OUT_DIR, 'public');
 
 const args = process.argv.slice(2).reduce<Record<string, string | number | boolean>>((currentArgs, currentArg) => {
   const [key, value] = currentArg.replace('--', '').split('=');
   currentArgs[key] = value;
   return currentArgs;
 }, {});
 
-const writeJsonDataFilesAndFeedFile = async (): Promise<void> => {
-  const vite = await createViteServer({
-    server: { middlewareMode: true },
-    base: BASE_URL,
-    appType: 'custom',
-  });
-
-  try {
-    const { writeJsonDataFiles } = await vite.ssrLoadModule('/src/helpers/contentHelper.ts');
-    writeJsonDataFiles();
-  } catch (e) {
-    console.error(e);
-  } finally {
-    vite.close();
-  }
-};
-
 const build = async (): Promise<void> => {
   cpSync(ASSETS_DIR, resolve(OUT_PUBLIC_DIR, 'imgs'), { recursive: true });
-  await writeJsonDataFilesAndFeedFile();
+  await writeJsonDataFiles();
 
   if (args.ssr) {
     await buildVite({

bin/dev.ts

@@ -9,7 +9,7 @@ const dev = async (): Promise<void> => {
     },
   });
 
-  await vite.ssrLoadModule('/src/server.ts');
+  await vite.ssrLoadModule('/src/server');
 };
 
 dev();

bin/indexationAlgolia.ts

@@ -1,24 +1,7 @@
-import { createServer as createViteServer } from 'vite';
+import { indexationAlglolia } from '@/helpers/indexationAlgoliaHelper';
 
-const indexationAlglolia = async (): Promise<void> => {
-  const vite = await createViteServer({
-    server: { middlewareMode: true },
-    appType: 'custom',
-  });
-
-  try {
-    const { indexationAlglolia } = await vite.ssrLoadModule('/src/helpers/indexationAlgoliaHelper.ts');
-
-    await indexationAlglolia({
-      appId: process.env.ALGOLIA_APP_ID as string,
-      apiIndexingKey: process.env.ALGOLIA_API_INDEXING_KEY as string,
-      index: process.env.ALGOLIA_INDEX as string,
-    });
-  } catch (e) {
-    console.log(e);
-  } finally {
-    vite.close();
-  }
-};
-
-indexationAlglolia();
+indexationAlglolia({
+  appId: process.env.ALGOLIA_APP_ID as string,
+  apiIndexingKey: process.env.ALGOLIA_API_INDEXING_KEY as string,
+  index: process.env.ALGOLIA_INDEX as string,
+});

bin/validateMarkdown.ts

@@ -1,24 +1,14 @@
-import { createServer as createViteServer } from 'vite';
+import { MarkdownInvalidError, validateMarkdown } from '@/helpers/markdownHelper';
 
-import { MarkdownInvalidError } from '../src/helpers/markdownHelper';
 import { getArgs } from './binHelper';
 
 (async (): Promise<void> => {
   const args = getArgs<{ ci: boolean }>();
 
-  const vite = await createViteServer({
-    server: { middlewareMode: true },
-    appType: 'custom',
-  });
-
   try {
-    const { validateMarkdown } = await vite.ssrLoadModule('/src/helpers/markdownHelper.ts');
     validateMarkdown();
-    vite.close();
-  } catch (e) {
-    vite.close();
-
-    const markdownInvalidError = e as MarkdownInvalidError;
+  } catch (error) {
+    const markdownInvalidError = error as MarkdownInvalidError;
     if (args.ci) {
       console.log(`::set-output name=filePath::${markdownInvalidError.markdownFilePathRelative}`);
       console.log(`::set-output name=reason::${markdownInvalidError.reason}`);

package.json

@@ -4,12 +4,11 @@
   "type": "module",
   "scripts": {
     "postinstall": "husky install",
-    "ts-node": "ts-node -r dotenv/config",
-    "validate-markdown": "yarn ts-node bin/validateMarkdown",
-    "indexation:algolia": "yarn ts-node bin/indexationAlgolia",
-    "build": "yarn ts-node bin/build",
-    "prerender": "yarn build && yarn ts-node bin/prerender",
-    "start:dev": "yarn ts-node bin/dev",
+    "validate-markdown": "tsx bin/validateMarkdown",
+    "indexation:algolia": "tsx bin/indexationAlgolia",
+    "build": "tsx bin/build",
+    "prerender": "yarn build && tsx bin/prerender",
+    "start:dev": "tsx bin/dev",
     "start:prod": "NODE_ENV=production node dist/server",
     "start:static": "npx serv --path dist/public",
     "lint:es": "eslint --ext .ts,.tsx src bin",
@@ -107,13 +106,13 @@
     "storybook": "^7.1.0",
     "stylelint": "^15.2.0",
     "stylelint-config-standard-scss": "^7.0.1",
-    "ts-node": "^10.9.1",
     "typescript": "^4.7.4",
     "unified": "^10.1.2",
     "vite": "^4.4.5",
     "vite-tsconfig-paths": "^4.2.0",
     "vitest": "^0.33.0",
     "zod": "^3.21.4",
-    "zod-validation-error": "^1.3.1"
+    "zod-validation-error": "^1.3.1",
+    "tsx": "^3.12.7"
   }
 }

src/app-paths.ts

@@ -9,3 +9,5 @@ export const MARKDOWN_FILE_PATHS = globSync([`${POSTS_DIR}/**/*.md`, `${AUTHORS_
 export const PUBLIC_DIR = resolve(ROOT_DIR, 'public');
 export const IMGS_DIR = resolve(PUBLIC_DIR, 'imgs');
 export const DATA_DIR = resolve(PUBLIC_DIR, 'data');
+export const OUT_DIR = resolve(ROOT_DIR, 'dist');
+export const OUT_PUBLIC_DIR = resolve(OUT_DIR, 'public');

src/constants.ts

@@ -1,8 +1,8 @@
 import { getEnv } from '@/helpers/getEnvHelper';
 
-export const IS_SSR = import.meta.env.SSR;
-export const IS_PRERENDER = import.meta.env.MODE === 'prerender';
-export const BASE_URL = getEnv<string>('BASE_URL') || '/';
+export const IS_SSR = import.meta.env?.SSR ?? false;
+export const IS_PRERENDER = import.meta.env?.MODE === 'prerender' ?? false;
+export const BASE_URL = getEnv<string>('BASE_URL');
 export const AUTHORIZED_LANGUAGES = ['fr', 'en'] as const;
 export const DEFAULT_LANGUAGE = 'fr';
 export const NUMBER_OF_ITEMS_PER_PAGE = 6;

src/containers/LayoutTemplateContainer/useLayoutTemplateContainer.tsx

@@ -1,4 +1,4 @@
-import { useHead, useLink, useMeta, useScript } from 'hoofd';
+import { useLink, useMeta, useScript } from 'hoofd';
 import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { matchPath, useLocation } from 'react-router-dom';
@@ -18,23 +18,9 @@ export const useLayoutTemplateContainer = (): Omit<LayoutTemplateProps, 'childre
   const footer = useFooterContainer();
   const isHomePage = Boolean(matchPath(PATHS.ROOT, location.pathname));
 
-  useHead({
-    metas: [
-      {
-        name: 'google-site-verification',
-        content: GOOGLE_SITE_VERIFICATION,
-      },
-      {
-        name: 'apple-mobile-web-app-title',
-        content: 'Blog Eleven Labs',
-      },
-      {
-        name: 'theme-color',
-        content: themeColor,
-      },
-    ],
-    language: i18n.language,
-  });
+  useMeta({ name: 'google-site-verification', content: GOOGLE_SITE_VERIFICATION });
+  useMeta({ name: 'apple-mobile-web-app-title', content: 'Blog Eleven Labs' });
+  useMeta({ name: 'theme-color', content: themeColor });
   useMeta({ property: 'og:locale', content: i18n.language });
   useMeta({ property: 'og:site_name', content: 'Blog Eleven Labs' });
   useMeta({ property: 'og:url', content: location.pathname + location.search });

src/containers/PostPageContainer/usePostPageContainer.tsx

@@ -17,10 +17,7 @@ export const usePostPageContainer = (): PostPageProps | undefined => {
   const { t, i18n } = useTranslation();
   const { getDateToString } = useDateToString();
   const post = useLoaderData() as ReturnType<typeof getDataFromPostPage>;
-  useSeoPost({
-    title: post.title,
-    post,
-  });
+  useSeoPost(post);
   const newsletterBlock = useNewsletterBlock();
 
   useEffect(() => {

src/entry-server.tsx

@@ -42,6 +42,7 @@ export const render = async (options: RenderOptions): Promise<string> => {
   );
 
   const staticPayload = dispatcher.toStatic();
+
   const html = ReactDOMServer.renderToString(
     <React.StrictMode>
       <HtmlTemplate

src/helpers/getEnvHelper.ts

@@ -1,3 +1,3 @@
 export const getEnv = function <T = string>(key: string): T {
-  return import.meta.env[key] ?? undefined;
+  return import.meta?.env ? import.meta.env[key] : undefined;
 };

src/hooks/useSeoPost.ts

@@ -6,14 +6,9 @@ import { type getDataFromPostPage } from '@/helpers/contentHelper';
 import { generatePath } from '@/helpers/routerHelper';
 import { useTitle } from '@/hooks/useTitle';
 
-export type UseSeoOptions = {
-  title: string;
-  post: ReturnType<typeof getDataFromPostPage>;
-};
-
-export const useSeoPost = ({ title, post }: UseSeoOptions): void => {
+export const useSeoPost = (post: ReturnType<typeof getDataFromPostPage>): void => {
   const { i18n } = useTranslation();
-  useTitle(title);
+  useTitle(post.title);
   useMeta({ name: 'author', content: post.authors.map((author) => author.name).join(', ') });
   useMeta({ name: 'description', content: post.excerpt });
   useMeta({ property: 'og:type', content: 'article' });

tsconfig.json

@@ -27,9 +27,5 @@
     "types": ["vitest/globals", "@types/gtag.js"]
   },
   "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }],
-  "ts-node": {
-    "esm": true,
-    "experimentalSpecifierResolution": "node"
-  }
+  "references": [{ "path": "./tsconfig.node.json" }]
 }

tsconfig.node.json

@@ -10,5 +10,5 @@
     "resolveJsonModule": true,
     "downlevelIteration": true
   },
-  "include": ["vite.config.ts",  "plugins"]
+  "include": ["vite.config.ts"]
 }

vite.config.ts

@@ -1,10 +1,8 @@
-import replace from '@rollup/plugin-replace';
 import react from '@vitejs/plugin-react';
 import { visualizer } from 'rollup-plugin-visualizer';
 import { defineConfig } from 'vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
-// https://vitejs.dev/config/
 export default defineConfig(({ mode, ssrBuild }) => ({
   plugins: [
     react(),