Multi entry

Makefile

@@ -70,3 +70,11 @@ build-example-ok:
 .PHONY: build-example
 build-example: ## Builds the example
 	$(DUNE) build @build-example
+
+run-build:
+	rm -rf build
+	MODE=build commands/reshowcase2 ./_build/default/newexample/newexample/newexample/NewDemo.js
+
+run-watch:
+	rm -rf build
+	MODE=watch commands/reshowcase2 ./_build/default/newexample/newexample/newexample/NewDemo.js

commands/node-loader.js

@@ -0,0 +1,27 @@
+import { fileURLToPath } from "url";
+import { basename } from "path";
+
+function getFilenameWithoutExtension(filePath) {
+  return basename(filePath, ".js"); // or use extname to auto-detect
+}
+
+export async function load(url, context, nextLoad) {
+  if (url.includes("_Doc")) {
+    const filePath = fileURLToPath(url);
+
+    const filename = getFilenameWithoutExtension(filePath);
+
+    const stubModule = `
+      export const modulePath = "${filePath}";
+      export const demoName = "${filename}";
+    `;
+
+    return {
+      format: "module",
+      source: stubModule,
+      shortCircuit: true,
+    };
+  }
+
+  return nextLoad(url, context);
+}

commands/polyfill.js

@@ -0,0 +1,4 @@
+// polyfill.js
+if (typeof window === "undefined") {
+  global.window = {};
+}

commands/reshowcase2

@@ -0,0 +1,5 @@
+#!/bin/bash
+# node_custom_bin
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+exec node --require "$SCRIPT_DIR/polyfill.js" "$@"

dune

@@ -1,4 +1,4 @@
-(dirs commands example src tests)
+(dirs commands example newexample src tests)
 
 (install
  (section bin)
@@ -7,6 +7,9 @@
   commands/demo-template.html
   commands/favicon.png
   commands/reshowcase
+  commands/reshowcase2
+  commands/node-loader.js
+  commands/polyfill.js
   commands/ui-template.html))
 
 (rule

dune-project

@@ -28,6 +28,8 @@
   ocaml
   (melange
    (>= 5.0.1))
+  (melange-json
+   (>= 2.0.0))
   (reason
    (>= 3.11.0))
   (reason-react

example/Demo.re

@@ -113,7 +113,15 @@ demo(({addDemo: _, addCategory}) =>
     addCategory("Headings", ({addDemo, addCategory: _}) => {
       addDemo("H1", ({string, int, _}) => {
         let size =
-          int("Font size", {min: 0, max: 100, initial: 30, step: 1});
+          int(
+            "Font size",
+            {
+              min: 0,
+              max: 100,
+              initial: 30,
+              step: 1,
+            },
+          );
 
         <h1 className={Css.h1Size(size)}>
           {string("Text", "hello")->React.string}

newexample/ButtonHuge_Doc.re

@@ -0,0 +1,62 @@
+let modulePath = Reshowcase.Utils.getFilepath();
+let demoName = "Huge";
+
+let spaceConcat = (x1, x2) =>
+  switch (x1, x2) {
+  | ("", x)
+  | (x, "") => x
+  | (x1, x2) => x1 ++ " " ++ x2
+  };
+
+let (+++) = spaceConcat;
+
+module Cn = {
+  let ifTrue = (cn, x) => x ? cn : "";
+};
+
+module Css = {
+  let button = [%cx
+    {|
+    color: #fff;
+    border: none;
+    padding: 10px;
+    border-radius: 10px;
+    font-family: inherit;
+    font-size: inherit;
+  |}
+  ];
+
+  let buttonHuge = [%cx {|
+    padding: 20px;
+    font-size: 30px;
+  |}];
+
+  let buttonDisabled = [%cx {|
+    cursor: default;
+    opacity: 0.5;
+  |}];
+
+  let buttonColor = color => {
+    let color = `hex(color);
+    [%cx {|
+      background-color: $(color);
+    |}];
+  };
+};
+
+[@react.component]
+let make = () => {
+  let disabled = false;
+  let color = "0091FF";
+
+  <button
+    disabled
+    className={
+      Css.button
+      +++ Css.buttonHuge
+      +++ Css.buttonDisabled->Cn.ifTrue(disabled)
+      +++ Css.buttonColor(color)
+    }>
+    {React.string("Hello")}
+  </button>;
+};

newexample/ButtonNormal_Doc.re

@@ -0,0 +1,56 @@
+let modulePath = Reshowcase.Utils.getFilepath();
+let demoName = "Normal";
+
+let spaceConcat = (x1, x2) =>
+  switch (x1, x2) {
+  | ("", x)
+  | (x, "") => x
+  | (x1, x2) => x1 ++ " " ++ x2
+  };
+
+let (+++) = spaceConcat;
+
+module Cn = {
+  let ifTrue = (cn, x) => x ? cn : "";
+};
+
+module Css = {
+  let button = [%cx
+    {|
+    color: #fff;
+    border: none;
+    padding: 10px;
+    border-radius: 10px;
+    font-family: inherit;
+    font-size: inherit;
+  |}
+  ];
+
+  let buttonDisabled = [%cx {|
+    cursor: default;
+    opacity: 0.5;
+  |}];
+
+  let buttonColor = color => {
+    let color = `hex(color);
+    [%cx {|
+      background-color: $(color);
+    |}];
+  };
+};
+
+[@react.component]
+let make = () => {
+  let disabled = false;
+  let color = "0091FF";
+
+  <button
+    disabled
+    className={
+      Css.button
+      +++ Css.buttonDisabled->Cn.ifTrue(disabled)
+      +++ Css.buttonColor(color)
+    }>
+    {React.string("hello")}
+  </button>;
+};

newexample/CodeExample_Doc.re

@@ -0,0 +1,46 @@
+let modulePath = Reshowcase.Utils.getFilepath();
+let demoName = "Code example";
+
+module Css = {
+  let code = [%cx
+    {|
+    white-space: pre;
+    padding: 0;
+    background-color: #f5f6f6;
+  |}
+  ];
+};
+
+[@react.component]
+let make = () => {
+  <code className=Css.code>
+    {js|open Reshowcase.Entry;
+
+demo(({addDemo: _, addCategory}) =>
+  addCategory("Typography", ({addDemo: _, addCategory}) => {
+    addCategory("Headings", ({addDemo, addCategory: _}) => {
+      addDemo("H1", ({string, int, _}) => {
+        let size =
+          int("Font size", {min: 0, max: 100, initial: 30, step: 1});
+
+        <h1 className={Css.h1Size(size)}>
+          {string("Text", "hello")->React.string}
+        </h1>;
+      });
+      addDemo("H2", ({string, _}) =>
+        <h2> {string("Text", "hello")->React.string} </h2>
+      );
+    });
+    addCategory("Text", ({addDemo, addCategory: _}) => {
+      addDemo("Paragraph", ({string, _}) =>
+        <p> {string("Text", "hello")->React.string} </p>
+      );
+      addDemo("Italic", ({string, _}) =>
+        <i> {string("Text", "hello")->React.string} </i>
+      );
+    });
+  })
+);|js}
+    ->React.string
+  </code>;
+};

newexample/H1_Doc.re

@@ -0,0 +1,18 @@
+let modulePath = Reshowcase.Utils.getFilepath();
+let demoName = "H1";
+
+module Css = {
+  let h1Size = size => {
+    let fontSize = `px(size);
+    [%cx {|
+      font-size: $(fontSize);
+    |}];
+  };
+};
+
+[@react.component]
+let make = () => {
+  let size = 30;
+
+  <h1 className={Css.h1Size(size)}> {React.string("hello")} </h1>;
+};

newexample/H2_Doc.re

@@ -0,0 +1,7 @@
+let modulePath = Reshowcase.Utils.getFilepath();
+let demoName = "H2";
+
+[@react.component]
+let make = () => {
+  <h2> {React.string("hello")} </h2>;
+};

newexample/Italic_Doc.re

@@ -0,0 +1,7 @@
+let modulePath = Reshowcase.Utils.getFilepath();
+let demoName = "Italic";
+
+[@react.component]
+let make = () => {
+  <i> {React.string("hello")} </i>;
+};

newexample/NewDemo.re

@@ -0,0 +1,73 @@
+let items: array(Reshowcase.NewEntity.item) = [|
+  Category({
+    name: "Buttons",
+    items: [|
+      Demo({
+        name: ButtonNormal_Doc.demoName,
+        modulePath: ButtonNormal_Doc.modulePath,
+      }),
+      Demo({
+        name: ButtonHuge_Doc.demoName,
+        modulePath: ButtonHuge_Doc.modulePath,
+      }),
+    |],
+  }),
+  Category({
+    name: "Headings",
+    items: [|
+      Demo({
+        name: H1_Doc.demoName,
+        modulePath: H1_Doc.modulePath,
+      }),
+      Demo({
+        name: H2_Doc.demoName,
+        modulePath: H2_Doc.modulePath,
+      }),
+    |],
+  }),
+  Category({
+    name: "Text",
+    items: [|
+      Demo({
+        name: Paragraph_Doc.demoName,
+        modulePath: Paragraph_Doc.modulePath,
+      }),
+      Demo({
+        name: Italic_Doc.demoName,
+        modulePath: Italic_Doc.modulePath,
+      }),
+      Category({
+        name: "Nested Text",
+        items: [|
+          Demo({
+            name: Italic_Doc.demoName,
+            modulePath: Italic_Doc.modulePath,
+          }),
+        |],
+      }),
+    |],
+  }),
+  Demo({
+    name: CodeExample_Doc.demoName,
+    modulePath: CodeExample_Doc.modulePath,
+  }),
+  Category({
+    name: "Test search",
+    items: [|
+      Demo({
+        name: OneTwoThreeFour_Doc.demoName,
+        modulePath: OneTwoThreeFour_Doc.modulePath,
+      }),
+      Demo({
+        name: OneTwoThreeFive_Doc.demoName,
+        modulePath: OneTwoThreeFive_Doc.modulePath,
+      }),
+      Demo({
+        name: OneTwoFourSeven_Doc.demoName,
+        modulePath: OneTwoFourSeven_Doc.modulePath,
+      }),
+    |],
+  }),
+|];
+
+let () = Reshowcase.NewEntry.start(~items, ~outputDir="./build", ());

newexample/OneTwoFourSeven_Doc.re

@@ -0,0 +1,5 @@
+let modulePath = Reshowcase.Utils.getFilepath();
+let demoName = "OneTwoFourSeven";
+
+[@react.component]
+let make = () => React.null;

newexample/OneTwoThreeFive_Doc.re

@@ -0,0 +1,5 @@
+let modulePath = Reshowcase.Utils.getFilepath();
+let demoName = "OneTwoThreeFive";
+
+[@react.component]
+let make = () => React.null;

newexample/OneTwoThreeFour_Doc.re

@@ -0,0 +1,5 @@
+let modulePath = Reshowcase.Utils.getFilepath();
+let demoName = "OneTwoThreeFour";
+
+[@react.component]
+let make = () => React.null;

newexample/Paragraph_Doc.re

@@ -0,0 +1,7 @@
+let modulePath = Reshowcase.Utils.getFilepath();
+let demoName = "Paragraph";
+
+[@react.component]
+let make = () => {
+  <p> {React.string("hello")} </p>;
+};