Multi-entry esbuild

commands/reshowcase

@@ -33,13 +33,48 @@ const getRequiredPathValue = (name) => {
 
 const task = process.argv[2];
 
-if (task !== "build" && task !== "start") {
+if (task !== "build" && task !== "start" && task !== "generate-demo") {
   console.error(
     "You need to pass 'start' or 'build' command and path to the entry point.\nFor example: reshowcase start --entry=./example/Demo.bs.js"
   );
   process.exit(1);
 }
 
+if (task == "generate-demo") {
+  const prefix = "--examples-path=";
+  const examplesPathValue = process.argv.find((item) => item.startsWith(prefix))?.replace(prefix, "");
+  const examplesPath = toAbsolutePath(examplesPathValue);
+
+  function readJSFilesRecursively(dir, code = "", level) {
+    const files = fs.readdirSync(dir);
+
+    return files.map(file => {
+      const filePath = path.join(dir, file);
+      const fileName = path.basename(filePath);
+      const stat = fs.statSync(filePath);
+
+      if (stat.isDirectory() && !fileName.startsWith(".")) {
+        const categoryString = `addCategory("${fileName}", ({addDemo, addCategory: _}) => {
+          ${readJSFilesRecursively(filePath, code, level + 1)}
+        })`;
+        return level === 0 ? `demo(({addDemo: _, addCategory}) => ${categoryString} );` : categoryString;
+      } else if (filePath.endsWith('.re')) {
+        return `addDemo("${fileName.replace(/\.re$/, "")}", _ => React.null);`
+      }
+    }).join("\n")
+  };
+
+  const code = readJSFilesRecursively(examplesPath, "", 0)
+
+
+  console.log(`// generated from ${examplesPath}
+open Reshowcase.Entry;
+${code}
+start();`)
+
+  process.exit(0);
+}
+
 // Servers can handle paths to HTML files differently.
 // Allow using full path to HTML template in "src" attribute of iframe in case of possible issues.
 const useFullframeUrl = (() => {
@@ -107,10 +142,32 @@ const watchPlugin = {
 };
 
 // entryPoint passed to htmlPlugin must be relative to the current working directory
-const entryPathRelativeToCwd = path.relative(process.cwd(), entryPath);
+const demoEntry = path.relative(process.cwd(), "/Users/rusty/code/tools/reshowcase/_build/default/example/example/example/Demo__.js");
+
+function readJSFilesRecursively(dir, fileList = []) {
+    const files = fs.readdirSync(dir);
+
+    files.forEach(file => {
+        const filePath = path.join(dir, file);
+        const fileName = path.basename(filePath);
+        const stat = fs.statSync(filePath);
+
+        if (stat.isDirectory() && !fileName.startsWith(".")) {
+            readJSFilesRecursively(filePath, fileList);
+        } else if (filePath.endsWith('.js') && path.normalize(demoEntry) != path.normalize(filePath)) {
+            fileList.push(filePath);
+        }
+    });
+
+    return fileList;
+};
+
+const startingDir = path.dirname(demoEntry);
+
+const storiesEntries = readJSFilesRecursively(startingDir);
 
 const defaultConfig = {
-  entryPoints: [entryPath],
+  entryPoints: [demoEntry, ...storiesEntries],
   entryNames: "[name]-[hash]",
   assetNames: "[name]-[hash]",
   chunkNames: "[name]-[hash]",
@@ -148,25 +205,35 @@ const defaultConfig = {
       files: [
         {
           filename: "index.html",
-          entryPoints: [entryPathRelativeToCwd],
+          entryPoints: [demoEntry],
           htmlTemplate: path.join(__dirname, "./ui-template.html"),
           scriptLoading: "module",
         },
-        {
-          filename: "./demo/index.html",
-          entryPoints: [entryPathRelativeToCwd],
-          htmlTemplate: process.argv.find((item) =>
-            item.startsWith("--template=")
-          )
-            ? path.join(
-                process.cwd(),
-                process.argv
-                  .find((item) => item.startsWith("--template="))
-                  .replace(/--template=/, "")
-              )
-            : path.join(__dirname, "./demo-template.html"),
-          scriptLoading: "module",
-        },
+        ...(storiesEntries.map(storyEntry => {
+          const relativePath = path.relative(path.dirname(demoEntry), storyEntry).replace(/\.js$/, "");
+          console.log(relativePath);
+          return {
+            filename: `${relativePath}/index.html`,
+            entryPoints: [storyEntry],
+            htmlTemplate: path.join(__dirname, "./ui-template.html"),
+            scriptLoading: "module",
+          }
+      }))
+        // {
+        //   filename: "./demo/index.html",
+        //   entryPoints: [entryPathRelativeToCwd],
+        //   htmlTemplate: process.argv.find((item) =>
+        //     item.startsWith("--template=")
+        //   )
+        //     ? path.join(
+        //         process.cwd(),
+        //         process.argv
+        //           .find((item) => item.startsWith("--template="))
+        //           .replace(/--template=/, "")
+        //       )
+        //     : path.join(__dirname, "./demo-template.html"),
+        //   scriptLoading: "module",
+        // },
       ],
     }),
     ...(isBuild ? [] : [watchPlugin]),

example/Buttons/Huge.re

@@ -0,0 +1,29 @@
+module Component = {
+  [@react.component]
+  let make = () => {
+    <button
+      style={ReactDOM.Style.make(
+        ~color="#000",
+        ~border="none",
+        ~padding="20px",
+        ~borderRadius="10px",
+        ~fontFamily="inherit",
+        ~fontSize="inherit",
+        (),
+      )}>
+      "Hello"->React.string
+    </button>;
+  };
+};
+
+switch (ReactDOM.querySelector("body")) {
+| Some(node) =>
+  let root = ReactDOM.Client.createRoot(node);
+  ReactDOM.Client.render(root, <Component />);
+| None =>
+  Js.Console.error(
+    "RR.renderToElementWithId : no element of id '"
+    ++ "body"
+    ++ "' found in the HTML.",
+  )
+};

example/Buttons/Normal.re

@@ -0,0 +1,29 @@
+module Component = {
+  [@react.component]
+  let make = () => {
+    <button
+      style={ReactDOM.Style.make(
+        ~color="#000",
+        ~border="none",
+        ~padding="10px",
+        ~borderRadius="10px",
+        ~fontFamily="inherit",
+        ~fontSize="inherit",
+        (),
+      )}>
+      "Hello"->React.string
+    </button>;
+  };
+};
+
+switch (ReactDOM.querySelector("body")) {
+| Some(node) =>
+  let root = ReactDOM.Client.createRoot(node);
+  ReactDOM.Client.render(root, <Component />);
+| None =>
+  Js.Console.error(
+    "RR.renderToElementWithId : no element of id '"
+    ++ "body"
+    ++ "' found in the HTML.",
+  )
+};