Stable Solid Hydration

.gitignore

@@ -38,3 +38,6 @@ lerna-debug.log*
 
 # Tailwind output
 static/styles.css
+
+# Auto generated Solid hydration script
+static/hydration.js

esbuild-client.js

@@ -0,0 +1,27 @@
+const { context } = require("esbuild");
+const { solidPlugin } = require("esbuild-plugin-solid");
+
+(async () => {
+    const ctx = await context({
+        platform: "browser",
+        entryPoints: [
+            "src/views/hydration.ts",
+        ],
+        bundle: true,
+        minify: false,
+        logLevel: "info",
+        plugins: [
+            solidPlugin({
+                solid: {
+                    generate: "dom",
+                    hydratable: true,
+                },
+            })
+        ],
+        outdir: "static",
+        format: "cjs",
+    });
+
+    await ctx.watch();
+    console.log("Watching hydration script...");
+})();

package.json

@@ -18,6 +18,7 @@
     "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
     "test:e2e": "jest --config ./test/jest-e2e.json",
     "ssr:watch": "node esbuild.js",
+    "ssr:hydration":  "node esbuild-client.js",
     "tailwind": "tailwindcss -i static/tailwind.css -o ./static/styles.css --watch"
   },
   "dependencies": {
@@ -51,7 +52,9 @@
     "glob": "^10.2.2",
     "jest": "29.5.0",
     "postcss": "^8.4.23",
+    "rollup": "^3.21.5",
     "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-esbuild": "^5.0.0",
     "rollup-route-manifest": "^1.0.0",
     "source-map-support": "^0.5.20",
     "supertest": "^6.1.3",

pnpm-lock.yaml

@@ -26,7 +26,9 @@ specifiers:
   mysql2: ^3.2.4
   postcss: ^8.4.23
   reflect-metadata: ^0.1.13
+  rollup: ^3.21.5
   rollup-plugin-copy: ^3.4.0
+  rollup-plugin-esbuild: ^5.0.0
   rollup-route-manifest: ^1.0.0
   rxjs: ^7.2.0
   solid-js: ^1.7.4
@@ -71,8 +73,10 @@ devDependencies:
   glob: 10.2.2
   jest: 29.5.0_rrli7kzx2akox3oq6aahu3rvje
   postcss: 8.4.23
+  rollup: 3.21.5
   rollup-plugin-copy: 3.4.0
-  rollup-route-manifest: 1.0.0
+  rollup-plugin-esbuild: 5.0.0_idevdayej7reui75xkytpzqqby
+  rollup-route-manifest: 1.0.0_rollup@3.21.5
   source-map-support: 0.5.21
   supertest: 6.3.3
   tailwindcss: 3.3.2_ts-node@10.9.1
@@ -1508,6 +1512,21 @@ packages:
     dev: true
     optional: true
 
+  /@rollup/pluginutils/5.0.2_rollup@3.21.5:
+    resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@types/estree': 1.0.1
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+      rollup: 3.21.5
+    dev: true
+
   /@sinclair/typebox/0.25.24:
     resolution: {integrity: sha512-XJfwUVUKDHF5ugKwIcxEgc9k8b7HbznCp6eUfWgu710hMPNIO4aw4/zB5RogDQz8nd6gyCDpU9O/m6qYEWY6yQ==}
     dev: true
@@ -3042,6 +3061,10 @@ packages:
     engines: {node: '>=4.0'}
     dev: true
 
+  /estree-walker/2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+    dev: true
+
   /esutils/2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
@@ -4300,6 +4323,11 @@ packages:
     hasBin: true
     dev: true
 
+  /joycon/3.1.1:
+    resolution: {integrity: sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==}
+    engines: {node: '>=10'}
+    dev: true
+
   /js-sdsl/4.4.0:
     resolution: {integrity: sha512-FfVSdx6pJ41Oa+CF7RDaFmTnCaFhua+SNYQX74riGOpl96x+2jQCqEfQ2bnXu/5DPCqlRuiqyvTJM0Qjz26IVg==}
     dev: true
@@ -5321,15 +5349,42 @@ packages:
       is-plain-object: 3.0.1
     dev: true
 
-  /rollup-route-manifest/1.0.0:
+  /rollup-plugin-esbuild/5.0.0_idevdayej7reui75xkytpzqqby:
+    resolution: {integrity: sha512-1cRIOHAPh8WQgdQQyyvFdeOdxuiyk+zB5zJ5+YOwrZP4cJ0MT3Fs48pQxrZeyZHcn+klFherytILVfE4aYrneg==}
+    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
+    peerDependencies:
+      esbuild: '>=0.10.1'
+      rollup: ^1.20.0 || ^2.0.0 || ^3.0.0
+    dependencies:
+      '@rollup/pluginutils': 5.0.2_rollup@3.21.5
+      debug: 4.3.4
+      es-module-lexer: 1.2.1
+      esbuild: 0.17.18
+      joycon: 3.1.1
+      jsonc-parser: 3.2.0
+      rollup: 3.21.5
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /rollup-route-manifest/1.0.0_rollup@3.21.5:
     resolution: {integrity: sha512-3CmcMmCLAzJDUXiO3z6386/Pt8/k9xTZv8gIHyXI8hYGoAInnYdOsFXiGGzQRMy6TXR1jUZme2qbdwjH2nFMjg==}
     engines: {node: '>=8'}
     peerDependencies:
       rollup: '>=2.0.0'
     dependencies:
+      rollup: 3.21.5
       route-sort: 1.0.0
     dev: true
 
+  /rollup/3.21.5:
+    resolution: {integrity: sha512-a4NTKS4u9PusbUJcfF4IMxuqjFzjm6ifj76P54a7cKnvVzJaG12BLVR+hgU2YDGHzyMMQNxLAZWuALsn8q2oQg==}
+    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
+    hasBin: true
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
   /route-sort/1.0.0:
     resolution: {integrity: sha512-SFgmvjoIhp5S4iBEDW3XnbT+7PRuZ55oRuNjY+CDB1SGZkyCG9bqQ3/dhaZTctTBYMAvDxd2Uy9dStuaUfgJqQ==}
     engines: {node: '>= 6'}

rollup.config.js

@@ -0,0 +1,28 @@
+const nodeResolve = require("@rollup/plugin-node-resolve");
+const common = require("@rollup/plugin-commonjs");
+const babel = require("@rollup/plugin-babel");
+const copy = require("rollup-plugin-copy");
+const { join } = require("path");
+const esbuild = require('rollup-plugin-esbuild')
+
+module.exports = [
+    {
+        input: "hydration/entry.js",
+        output: [
+            {
+                dir: "hydration",
+                format: "esm"
+            }
+        ],
+        preserveEntrySignatures: false,
+        plugins: [
+            esbuild.default(),
+            nodeResolve({ exportConditions: ["solid"] }),
+            babel({
+                babelHelpers: "bundled",
+                presets: [["solid", { generate: "dom", hydratable: true }]]
+            }),
+            common(),
+        ]
+    }
+];

src/certs/certs.template.ts

@@ -2,15 +2,21 @@ import { generateHydrationScript } from "solid-js/web";
 
 export function template(ssr: string): string {
     return `
+  <!DOCTYPE html>
   <html lang="es">
     <head>
-      <title>Solid SSR :D</title>
+      <title>Registrar certificados - EEGSAC</title>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <link rel="stylesheet" href="/static/styles.css" />
       ${generateHydrationScript()}
     </head>
-    <body>${ssr}</body>
+    <body>
+      <div id="root">
+        ${ssr}
+      </div>
+    </body>
+    <script src="/static/hydration.js"></script>
   </html>
 `;
 

src/views/Certs.tsx

@@ -1,11 +1,16 @@
-import { createSignal } from "solid-js";
+import { createEffect, createSignal } from "solid-js";
 import { Search } from "./components/Search";
 import { Person } from "./types/Person";
 import { Registers } from "./components/Registers";
 
-
 export function Certs() {
     const [person, setPerson] = createSignal<Person | null>(null);
+    const [count, setCount] = createSignal(0);
+
+    createEffect(() => {
+        const c = count();
+        console.log(`IM TRACKING COUNT! ${c}`);
+    });
 
     return (
         <div>
@@ -14,6 +19,9 @@ export function Certs() {
             >
                 Registrar certificado
             </h1>
+            <p>{count()}</p>
+            <button onclick={() => setCount((x) => x + 1)}>UP</button>
+            <hr/>
             <Search setPerson={setPerson}/>
             <Registers person={person()} />
         </div>

src/views/components/Search.tsx

@@ -15,6 +15,8 @@ export function Search(props: {setPerson: (p: Person | null) => void}) {
     const [loading, setLoading] = createSignal(false);
     const [error, setError] = createSignal("");
 
+    console.log("This is a log in the function");
+
     /*
       Sends the DNI to RUST to search in the DB
     */
@@ -38,6 +40,8 @@ export function Search(props: {setPerson: (p: Person | null) => void}) {
          */
     };
 
+    console.log(searchDNI);
+
     return (
         <div class="p-4">
             <h2 class="my-2 font-bold text-xl">1. Buscar persona</h2>

src/views/hydration.ts

@@ -0,0 +1,6 @@
+import {hydrate} from "solid-js/web";
+import {Certs} from "./Certs";
+
+const root = document.getElementById("root")!;
+
+hydrate(Certs, root);