@bouygues-telecom/staticjs 0.1.2 → 0.1.4

package/config/config/vite.plugin.js

@@ -0,0 +1,80 @@
+import fs from "fs";
+import crypto from "node:crypto";
+import path from "path";
+const getDefaultExportFunctionName = (code) => {
+    const defaultExportRegex = /export\s+default\s+function\s+(\w+)/;
+    const match = code.match(defaultExportRegex);
+    if (match && match[1])
+        return match[1];
+    const defaultVarExportRegex = /export\s+default\s+(\w+)/;
+    const varMatch = code.match(defaultVarExportRegex);
+    if (varMatch && varMatch[1])
+        return varMatch[1];
+    return null;
+};
+export const addHydrationCodePlugin = (entries) => {
+    return {
+        name: "add-hydration-code",
+        transform(code, id) {
+            if (!Object.values(entries).includes(id))
+                return null;
+            const componentName = getDefaultExportFunctionName(code);
+            if (!componentName) {
+                console.warn(`No default export found in ${id}`);
+                return null;
+            }
+            const importReactDOM = `import ReactDOM from 'react-dom/client';`;
+            const importApp = `import { App } from "@/app";`;
+            const rootId = crypto
+                .createHash("sha256")
+                .update(`app-${id}`)
+                .digest("hex")
+                .slice(0, 10);
+            const initialDatasId = crypto
+                .createHash("sha256")
+                .update(`initial-data-${id}`)
+                .digest("hex")
+                .slice(0, 10);
+            const additionalCode = `
+        export const rootId = 'app-${rootId}';
+        export const initialDatasId = 'initial-data-${initialDatasId}';
+
+        if (typeof document !== 'undefined') {
+          document.addEventListener('DOMContentLoaded', () => {
+            const initialDataScript = document.getElementById(initialDatasId);
+            const initialData = initialDataScript ? JSON.parse(initialDataScript.textContent || '{}') : {title: ''};
+            ReactDOM.hydrateRoot(document.getElementById(rootId), App({Component:${componentName}, props: {data: initialData}}));
+          });
+        }
+      `;
+            const transformedCode = importReactDOM + "\n" + importApp + "\n" + code + "\n" + additionalCode;
+            return {
+                code: transformedCode,
+                map: null,
+            };
+        },
+    };
+};
+export const noJsPlugin = (entries) => {
+    return {
+        name: "no-js-plugin",
+        buildStart() {
+            const excludedFiles = [];
+            Object.entries(entries).forEach(([name, path]) => {
+                const content = fs.readFileSync(path, "utf8");
+                const firstLine = content.split("\n")[0];
+                if (firstLine.includes("no scripts")) {
+                    delete entries[name];
+                    excludedFiles.push(name);
+                    console.log(`Excluding ${name} from build due to "no scripts" directive.`);
+                }
+            });
+            const cacheDir = path.resolve(process.cwd(), "cache");
+            const excludedFilePath = path.resolve(cacheDir, "excludedFiles.json");
+            if (!fs.existsSync(cacheDir)) {
+                fs.mkdirSync(cacheDir, { recursive: true });
+            }
+            fs.writeFileSync(excludedFilePath, JSON.stringify(excludedFiles, null, 2), "utf8");
+        },
+    };
+};

package/config/{vite.plugin.js → vite.plugin.ts}

@@ -2,7 +2,7 @@ import fs from "fs";
 import crypto from "node:crypto";
 import path from "path";
 
-const getDefaultExportFunctionName = (code) => {
+const getDefaultExportFunctionName = (code: string) => {
   const defaultExportRegex = /export\s+default\s+function\s+(\w+)/;
   const match = code.match(defaultExportRegex);
   if (match && match[1]) return match[1];
@@ -12,10 +12,10 @@ const getDefaultExportFunctionName = (code) => {
   return null;
 };
 
-export const addHydrationCodePlugin = (entries) => {
+export const addHydrationCodePlugin = (entries: { [key: string]: string }) => {
   return {
     name: "add-hydration-code",
-    transform(code, id) {
+    transform(code: string, id: string) {
       if (!Object.values(entries).includes(id)) return null;
       const componentName = getDefaultExportFunctionName(code);
 
@@ -63,11 +63,11 @@ export const addHydrationCodePlugin = (entries) => {
   };
 };
 
-export const noJsPlugin = (entries) => {
+export const noJsPlugin = (entries: { [key: string]: string }) => {
   return {
     name: "no-js-plugin",
     buildStart() {
-      const excludedFiles = [];
+      const excludedFiles: string[] = [];
 
       Object.entries(entries).forEach(([name, path]) => {
         const content = fs.readFileSync(path, "utf8");
@@ -76,7 +76,9 @@ export const noJsPlugin = (entries) => {
         if (firstLine.includes("no scripts")) {
           delete entries[name];
           excludedFiles.push(name);
-          console.log(`Excluding ${name} from build due to "no scripts" directive.`);
+          console.log(
+            `Excluding ${name} from build due to "no scripts" directive.`
+          );
         }
       });
 

package/helpers/{cachePages.js → cachePages.ts}

@@ -11,8 +11,8 @@ let entries;
 
 if (args.length > 0) {
   entries = args
-    .filter((arg) => arg.endsWith(".tsx"))
-    .reduce((obj, tsxFile) => {
+    .filter((arg: string) => arg.endsWith(".tsx"))
+    .reduce((obj: { [key: string]: string }, tsxFile) => {
       console.log(`Processing arg: ${tsxFile}`);
       const relativePathWithoutExtension = tsxFile.replace(/\.tsx$/, "");
       const fullPath = path.resolve(pagesDir, tsxFile);

package/helpers/{createPage.js → createPage.ts}

@@ -5,6 +5,16 @@ import ReactDOMServer from "react-dom/server";
 
 const outputDir = path.resolve(process.cwd(), "dist");
 
+interface IcreatePage {
+  data:any,
+  AppComponent: React.FC<{ Component: React.FC; props: {} }>,
+  PageComponent: () => React.JSX.Element,
+  initialDatasId: string,
+  rootId:string,
+  pageName:string,
+  JSfileName:string | false,
+}
+
 export const createPage = ({
   data,
   AppComponent,
@@ -13,7 +23,7 @@ export const createPage = ({
   rootId,
   pageName,
   JSfileName,
-}) => {
+}: IcreatePage) => {
   const template = `
 <div id=app-{{rootId}}>{{html}}
 ${data ? `<script id=initial-data-{{initialDatasId}} type="application/json">${JSON.stringify(data)}</script>` : ""}

package/helpers/helpers/cachePages.js

@@ -0,0 +1,26 @@
+import fs from "fs";
+import path from "path";
+import { readPages } from "./readPages.js";
+const pagesDir = path.resolve(process.cwd(), "src/pages");
+const args = process.argv.slice(2);
+const cacheDir = path.resolve(process.cwd(), "cache");
+const cacheFilePath = path.resolve(cacheDir, "pagesCache.json");
+let entries;
+if (args.length > 0) {
+    entries = args
+        .filter((arg) => arg.endsWith(".tsx"))
+        .reduce((obj, tsxFile) => {
+        console.log(`Processing arg: ${tsxFile}`);
+        const relativePathWithoutExtension = tsxFile.replace(/\.tsx$/, "");
+        const fullPath = path.resolve(pagesDir, tsxFile);
+        obj[relativePathWithoutExtension] = fullPath;
+        return obj;
+    }, {});
+}
+else {
+    entries = readPages(pagesDir);
+}
+if (!fs.existsSync(cacheDir))
+    fs.mkdirSync(cacheDir, { recursive: true });
+fs.writeFileSync(cacheFilePath, JSON.stringify(entries, null, 2), "utf8");
+console.log("Pages cached successfully.");

package/helpers/helpers/createPage.js

@@ -0,0 +1,23 @@
+import fs from "fs";
+import path from "path";
+import React from "react";
+import ReactDOMServer from "react-dom/server";
+const outputDir = path.resolve(process.cwd(), "dist");
+export const createPage = ({ data, AppComponent, PageComponent, initialDatasId, rootId, pageName, JSfileName, }) => {
+    const template = `
+<div id=app-{{rootId}}>{{html}}
+${data ? `<script id=initial-data-{{initialDatasId}} type="application/json">${JSON.stringify(data)}</script>` : ""}
+${JSfileName ? `<script type="module" src="{{scriptPath}}"></script>` : ""}
+</div>
+`;
+    const component = React.createElement(AppComponent, {
+        Component: PageComponent,
+        props: { data },
+    });
+    const htmlContent = template
+        .replace("{{initialDatasId}}", initialDatasId)
+        .replace("{{rootId}}", rootId)
+        .replace("{{html}}", ReactDOMServer.renderToString(component))
+        .replace("{{scriptPath}}", `${JSfileName}.js`);
+    fs.writeFileSync(path.join(outputDir, `${pageName}.html`), htmlContent);
+};

package/helpers/helpers/readPages.js

@@ -0,0 +1,19 @@
+import fs from "fs";
+import path from "path";
+export function readPages(dir, baseDir = dir) {
+    let result = {};
+    const files = fs.readdirSync(dir);
+    for (const file of files) {
+        const fullPath = path.join(dir, file);
+        const stat = fs.statSync(fullPath);
+        if (stat.isDirectory()) {
+            const nested = readPages(fullPath, baseDir);
+            result = { ...result, ...nested };
+        }
+        else if (file.endsWith(".tsx")) {
+            const relPath = path.relative(baseDir, fullPath).replace(/\.tsx$/, "");
+            result[relPath] = fullPath;
+        }
+    }
+    return result;
+}

package/helpers/{readPages.js → readPages.ts}

@@ -1,8 +1,8 @@
 import fs from "fs";
 import path from "path";
 
-export function readPages(dir, baseDir = dir) {
-  let result = {};
+export function readPages(dir: string, baseDir = dir) {
+  let result: { [key: string]: string } = {};
   const files = fs.readdirSync(dir);
 
   for (const file of files) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bouygues-telecom/staticjs",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "type": "module",
   "files": [
     "config",
@@ -14,10 +14,12 @@
     "bt-staticjs": "./scripts/cli.js"
   },
   "scripts": {
-    "build": "cd templates/react && rimraf dist && rimraf cache && node ../../helpers/cachePages.js && vite build --config ../../vite.config.js && tsx ../../scripts/build-html.js",
+    "prebuild": "tsc -p ./tsconfig.json && mv dist/config config && mv dist/helpers helpers && mv dist/scripts scripts",
+    "build": "cd templates/react && rimraf dist && rimraf cache && node ../../dist/helpers/cachePages.js && vite build --config ../../vite.config.js && tsx ../../dist/scripts/build-html.js",
     "start": "cd templates/react && npm start"
   },
   "dependencies": {
+    "@types/node": "^20",
     "cli-spinner": "^0.2.10",
     "commander": "^14.0.0",
     "giget": "^2.0.0",
@@ -25,12 +27,17 @@
     "path": "^0.12.7",
     "readline": "^1.3.0",
     "rimraf": "^6.0.1",
-    "tsx": "^4.19.4"
+    "tsx": "^4.19.4",
+    "typescript": "^5"
   },
   "volta": {
     "node": "24.1.0"
   },
   "workspaces": [
     "templates/react"
-  ]
+  ],
+  "devDependencies": {
+    "@types/cli-spinner": "^0.2.3",
+    "@types/express": "^5.0.3"
+  }
 }

package/scripts/{build-html.js → build-html.ts}

@@ -7,7 +7,7 @@ import { createPage } from "../helpers/createPage.js";
 
 const rootDir = path.resolve(process.cwd(), "./src");
 
-async function loadJson(filePath) {
+async function loadJson(filePath: string) {
   const data = await fs.readFile(filePath, "utf-8");
   return JSON.parse(data);
 }
@@ -20,7 +20,7 @@ async function main() {
     path.join(path.resolve(process.cwd()), "./cache/pagesCache.json")
   );
 
-  const processPage = async (page) => {
+  const processPage = async (page: { path: string; pageName: string }) => {
     try {
       let data;
       const absolutePath = page.path;
@@ -54,22 +54,25 @@ async function main() {
 
       if (getStaticProps && getStaticPaths) {
         const { paths } = await getStaticPaths();
-        return paths.forEach(async (param) => {
-          const slug = param.params[fileName.replace(/[\[\]]/g, "")];
-          const { props } = await getStaticProps(param);
-          const pageName = page.pageName.replace(/\[.*?\]/, slug);
-          const JSfileName = injectJS && fileName.replace(/\[(.*?)\]/g, "_$1_");
-
-          createPage({
-            data: props.data,
-            AppComponent,
-            PageComponent,
-            initialDatasId,
-            rootId,
-            pageName,
-            JSfileName,
-          });
-        });
+        return paths.forEach(
+          async (param: { params: { [x: string]: string } }) => {
+            const slug = param.params[fileName.replace(/[\[\]]/g, "")];
+            const { props } = await getStaticProps(param);
+            const pageName = page.pageName.replace(/\[.*?\]/, slug);
+            const JSfileName =
+              injectJS && fileName.replace(/\[(.*?)\]/g, "_$1_");
+
+            createPage({
+              data: props.data,
+              AppComponent,
+              PageComponent,
+              initialDatasId,
+              rootId,
+              pageName,
+              JSfileName: JSfileName,
+            });
+          }
+        );
       }
 
       if (getStaticProps) {
@@ -94,8 +97,8 @@ async function main() {
   };
 
   const pages = Object.entries(files).map(([pageName, path]) => ({
-    pageName,
-    path,
+    pageName: pageName as string,
+    path: path as string,
   }));
 
   pages.forEach(processPage);

package/scripts/{create-static-app.js → create-static-app.ts}

@@ -10,7 +10,7 @@ const rl = readline.createInterface({
   output: process.stdout,
 });
 
-async function createReactPowerStatic(projectName) {
+async function createReactPowerStatic(projectName: string) {
   const dest = path.join(process.cwd(), projectName);
   const spinner = new Spinner("Creating react project... %s");
   spinner.setSpinnerString("|/-\\");

package/scripts/{revalidate.js → revalidate.ts}

@@ -1,11 +1,12 @@
 import { exec } from "child_process";
+import { Request, Response } from "express";
 import { dirname } from "node:path";
 import { fileURLToPath } from "node:url";
 import path from "path";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
-export const revalidate = (req, res) => {
+export const revalidate = (req: Request, res: Response) => {
   try {
     const paths = req?.body?.paths || [];
     const pathsArg = paths.length > 0 ? paths.join(" ") : "";

package/scripts/scripts/build-html.js

@@ -0,0 +1,82 @@
+process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
+import fs from "fs/promises";
+import crypto from "node:crypto";
+import path from "path";
+import { createPage } from "../helpers/createPage.js";
+const rootDir = path.resolve(process.cwd(), "./src");
+async function loadJson(filePath) {
+    const data = await fs.readFile(filePath, "utf-8");
+    return JSON.parse(data);
+}
+async function main() {
+    const excludedJSFiles = await loadJson(path.join(path.resolve(process.cwd()), "./cache/excludedFiles.json"));
+    const files = await loadJson(path.join(path.resolve(process.cwd()), "./cache/pagesCache.json"));
+    const processPage = async (page) => {
+        try {
+            let data;
+            const absolutePath = page.path;
+            const pageModule = await import(absolutePath);
+            const appModule = await import(`${rootDir}/app.tsx`);
+            const fileName = path.basename(page.path, path.extname(page.path));
+            const AppComponent = appModule.App;
+            const PageComponent = pageModule.default;
+            const getStaticProps = pageModule?.getStaticProps;
+            const getStaticPaths = pageModule?.getStaticPaths;
+            const injectJS = !excludedJSFiles.includes(page.pageName);
+            const rootId = crypto
+                .createHash("sha256")
+                .update(`app-${absolutePath}`)
+                .digest("hex")
+                .slice(0, 10);
+            const initialDatasId = crypto
+                .createHash("sha256")
+                .update(`initial-data-${absolutePath}`)
+                .digest("hex")
+                .slice(0, 10);
+            if (!PageComponent) {
+                throw new Error(`Failed to import PageComponent from ${page.pageName}.tsx`);
+            }
+            if (getStaticProps && getStaticPaths) {
+                const { paths } = await getStaticPaths();
+                return paths.forEach(async (param) => {
+                    const slug = param.params[fileName.replace(/[\[\]]/g, "")];
+                    const { props } = await getStaticProps(param);
+                    const pageName = page.pageName.replace(/\[.*?\]/, slug);
+                    const JSfileName = injectJS && fileName.replace(/\[(.*?)\]/g, "_$1_");
+                    createPage({
+                        data: props.data,
+                        AppComponent,
+                        PageComponent,
+                        initialDatasId,
+                        rootId,
+                        pageName,
+                        JSfileName: JSfileName,
+                    });
+                });
+            }
+            if (getStaticProps) {
+                const { props } = await getStaticProps();
+                data = props.data;
+            }
+            createPage({
+                data,
+                AppComponent,
+                PageComponent,
+                initialDatasId,
+                rootId,
+                pageName: page.pageName,
+                JSfileName: injectJS && fileName,
+            });
+            console.log(`Successfully wrote: dist/${page.pageName}.html`);
+        }
+        catch (error) {
+            console.error(`Error processing ${page.pageName}:`, error);
+        }
+    };
+    const pages = Object.entries(files).map(([pageName, path]) => ({
+        pageName: pageName,
+        path: path,
+    }));
+    pages.forEach(processPage);
+}
+main();

package/scripts/scripts/cli.js

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+import { program } from "commander";
+import { execSync } from "node:child_process";
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import path from "path";
+const __dirname = dirname(fileURLToPath(import.meta.url));
+program
+    .command("build")
+    .description("Build with static.js configuration")
+    .action(() => {
+    try {
+        const cachePagesPath = path.resolve(__dirname, "../helpers/cachePages.js");
+        const htmlConfig = path.resolve(__dirname, "./build-html.js");
+        const dest = process.cwd();
+        console.log("Executing static.js config...");
+        execSync("rimraf dist", {
+            cwd: dest,
+            stdio: "inherit",
+        });
+        execSync(`rimraf cache && node ${cachePagesPath}`, {
+            cwd: dest,
+            stdio: "inherit",
+        });
+        execSync(`vite build && tsx ${htmlConfig}`, {
+            cwd: dest,
+            stdio: "inherit",
+        });
+        console.log("Build completed successfully");
+    }
+    catch (error) {
+        console.error("Build failed:", error);
+        process.exit(1);
+    }
+});
+program.parse(process.argv);

package/scripts/scripts/create-static-app.js

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+import { Spinner } from "cli-spinner";
+import { downloadTemplate } from "giget";
+import path from "path";
+import readline from "readline";
+const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+});
+async function createReactPowerStatic(projectName) {
+    const dest = path.join(process.cwd(), projectName);
+    const spinner = new Spinner("Creating react project... %s");
+    spinner.setSpinnerString("|/-\\");
+    spinner.start();
+    try {
+        await downloadTemplate(`github:BouyguesTelecom/static.js/templates/react`, {
+            force: true,
+            provider: "github",
+            cwd: dest,
+            dir: `.`,
+        });
+        spinner.stop(true);
+        console.log("React project created successfully in " + dest);
+    }
+    catch (error) {
+        spinner.stop(true);
+        console.error("Error can't create react project:", error);
+        process.exit(1);
+    }
+    finally {
+        rl.close();
+    }
+}
+rl.question("Enter the name for your new project: ", (projectName) => {
+    createReactPowerStatic(projectName);
+});

package/scripts/scripts/revalidate.js

@@ -0,0 +1,31 @@
+import { exec } from "child_process";
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import path from "path";
+const __dirname = dirname(fileURLToPath(import.meta.url));
+export const revalidate = (req, res) => {
+    try {
+        const paths = req?.body?.paths || [];
+        const pathsArg = paths.length > 0 ? paths.join(" ") : "";
+        const cachePages = path.resolve(__dirname, "../helpers/cachePages.js");
+        const buildHtmlConfig = path.resolve(__dirname, "./build-html.js");
+        const buildCommand = `NODE_TLS_REJECT_UNAUTHORIZED=0 node ${cachePages} ${pathsArg && `${pathsArg}`} && npx tsx ${buildHtmlConfig}`;
+        exec(buildCommand, (error, stdout, stderr) => {
+            if (error) {
+                console.error(`Exec error: ${error}`);
+                return;
+            }
+            if (!error) {
+                console.log(`stdout: ${stdout}`);
+                console.error(`stderr: ${stderr}`);
+            }
+        });
+        return res
+            .status(200)
+            .send(`Revalidation triggered, paths: ${paths.length > 0 ? paths.join(", ") : "all pages"} built!`);
+    }
+    catch (error) {
+        console.error("Revalidation error:", error);
+        res.status(500).send("Error during revalidation.");
+    }
+};