From 0d412b624df00bf034f9bdf628ff5fb3f8362bbb Mon Sep 17 00:00:00 2001 From: Araozu Date: Sat, 6 May 2023 22:30:00 -0500 Subject: [PATCH] Stable Solid Hydration --- .gitignore | 3 ++ esbuild-client.js | 27 +++++++++++++++ package.json | 3 ++ pnpm-lock.yaml | 59 +++++++++++++++++++++++++++++++-- rollup.config.js | 28 ++++++++++++++++ src/certs/certs.template.ts | 10 ++++-- src/views/Certs.tsx | 12 +++++-- src/views/components/Search.tsx | 4 +++ src/views/hydration.ts | 6 ++++ 9 files changed, 146 insertions(+), 6 deletions(-) create mode 100644 esbuild-client.js create mode 100644 rollup.config.js create mode 100644 src/views/hydration.ts diff --git a/.gitignore b/.gitignore index cf8ef6b..173b685 100644 --- a/.gitignore +++ b/.gitignore @@ -38,3 +38,6 @@ lerna-debug.log* # Tailwind output static/styles.css + +# Auto generated Solid hydration script +static/hydration.js diff --git a/esbuild-client.js b/esbuild-client.js new file mode 100644 index 0000000..93c6ee9 --- /dev/null +++ b/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..."); +})(); diff --git a/package.json b/package.json index df47764..bb6674c 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0e84f00..625aaa2 100644 --- a/pnpm-lock.yaml +++ b/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'} diff --git a/rollup.config.js b/rollup.config.js new file mode 100644 index 0000000..e1ecf7c --- /dev/null +++ b/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(), + ] + } +]; diff --git a/src/certs/certs.template.ts b/src/certs/certs.template.ts index f5200c0..00d0c40 100644 --- a/src/certs/certs.template.ts +++ b/src/certs/certs.template.ts @@ -2,15 +2,21 @@ import { generateHydrationScript } from "solid-js/web"; export function template(ssr: string): string { return ` + - Solid SSR :D + Registrar certificados - EEGSAC ${generateHydrationScript()} - ${ssr} + +
+ ${ssr} +
+ + `; diff --git a/src/views/Certs.tsx b/src/views/Certs.tsx index 8bc00ea..28e403f 100644 --- a/src/views/Certs.tsx +++ b/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(null); + const [count, setCount] = createSignal(0); + + createEffect(() => { + const c = count(); + console.log(`IM TRACKING COUNT! ${c}`); + }); return (
@@ -14,6 +19,9 @@ export function Certs() { > Registrar certificado +

{count()}

+ +
diff --git a/src/views/components/Search.tsx b/src/views/components/Search.tsx index 436c90b..6509b75 100644 --- a/src/views/components/Search.tsx +++ b/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 (

1. Buscar persona

diff --git a/src/views/hydration.ts b/src/views/hydration.ts new file mode 100644 index 0000000..9e7b2d5 --- /dev/null +++ b/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);