From f3da755843e646094e034cdf61274b92b685b716 Mon Sep 17 00:00:00 2001 From: Kuba Orlik Date: Thu, 8 Feb 2024 16:19:54 +0100 Subject: [PATCH] Add support for JDD components --- package-lock.json | 44 ++++++--- package.json | 6 +- src/back/index.ts | 2 - src/back/jdd-components/components.ts | 16 ++++ .../jdd-components/nice-box/nice-box.jdd.tsx | 33 +++++++ src/back/routes/components.sreact.tsx | 89 +++++++++++++++++++ src/back/routes/routes.ts | 2 + src/back/routes/urls.ts | 1 + src/includes.scss | 1 + 9 files changed, 176 insertions(+), 18 deletions(-) create mode 100644 src/back/jdd-components/components.ts create mode 100644 src/back/jdd-components/nice-box/nice-box.jdd.tsx create mode 100644 src/back/routes/components.sreact.tsx diff --git a/package-lock.json b/package-lock.json index dc06051..f137edf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,8 +14,8 @@ "@hotwired/turbo": "^7.1.0", "@koa/router": "^12.0.1", "@playwright/test": "^1.36.1", - "@sealcode/jdd": "^0.1.0", - "@sealcode/sealgen": "^0.11.0", + "@sealcode/jdd": "^0.2.4", + "@sealcode/sealgen": "^0.11.1", "@sealcode/ts-predicates": "^0.4.3", "@types/kill-port": "^2.0.0", "get-port": "^7.0.0", @@ -24,7 +24,7 @@ "nodemon": "^3.0.1", "sealious": "^0.17.48", "stimulus": "^2.0.0", - "tempstream": "^0.3.0", + "tempstream": "^0.3.2", "vitest": "^1.1.0" }, "devDependencies": { @@ -1275,13 +1275,13 @@ } }, "node_modules/@sealcode/jdd": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/@sealcode/jdd/-/jdd-0.1.0.tgz", - "integrity": "sha512-en/W1QcAkZRDZVBef+1OOS0pJVvNp9gJs5hkNbP1XqRAIRasbVSXyes8GzUvcU8hj6t2SwTFbfl/vt+Rb8vLAg==", + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/@sealcode/jdd/-/jdd-0.2.4.tgz", + "integrity": "sha512-Lf/UIgY0N8zNHHDonvF4WQufITjWhih9+FAbb+NO21pbygrZyIaXfKPW0Vp+Eh9blTZY6QEG40H7zouuVF55ew==", "dependencies": { "@sealcode/ts-predicates": "^0.5.3", "marked": "^12.0.0", - "tempstream": "^0.3.0" + "tempstream": "^0.3.2" } }, "node_modules/@sealcode/jdd/node_modules/@sealcode/ts-predicates": { @@ -1301,20 +1301,22 @@ } }, "node_modules/@sealcode/sealgen": { - "version": "0.11.0", - "resolved": "https://registry.npmjs.org/@sealcode/sealgen/-/sealgen-0.11.0.tgz", - "integrity": "sha512-Nl2/PccEqRNh7hnA0O7B3qeUfMvB7ttQyTj/WGbEqR/6Ry2oL+AANDtRnbEwe3FcTNPtz9k28FoLK2vBQFuo9A==", + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/@sealcode/sealgen/-/sealgen-0.11.1.tgz", + "integrity": "sha512-RH4TUwwHNgz4NE0vVDsXQ45xcPo/NqhmmcFaZhv8od0uXRfzvf5WrugHtrWdEEif4naYXSmJ8te7yaoa9Y5ubg==", "dependencies": { "@koa/router": "^12.0.1", "@sealcode/ts-predicates": "^0.4.3", "deepmerge": "^4.3.1", "esbuild": "^0.15.5", "esbuild-sass-plugin": "^2.3.1", + "js-convert-case": "^4.2.0", "koa": "^2.13.0", "locreq": "^2.0.2", "merge": "^2.1.1", "prettier": "^2.7.1", "prompts": "^2.4.2", + "recursive-readdir": "^2.2.3", "tempstream": "^0.3.0", "tiny-glob": "^0.2.9", "yargs": "^17.6.2" @@ -6135,6 +6137,11 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/js-convert-case": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/js-convert-case/-/js-convert-case-4.2.0.tgz", + "integrity": "sha512-i4mHCxiBNj6ajjMnZnC70qAOMA8gb+YgYipy2VR7a+Q5EBgEQ2/SgSAUBdNEyObk++B4AIUiFWeDEX2ggOd8cQ==" + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -8742,6 +8749,17 @@ "node": ">= 0.10" } }, + "node_modules/recursive-readdir": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz", + "integrity": "sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==", + "dependencies": { + "minimatch": "^3.0.5" + }, + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/regenerator-runtime": { "version": "0.14.1", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", @@ -10081,9 +10099,9 @@ } }, "node_modules/tempstream": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/tempstream/-/tempstream-0.3.0.tgz", - "integrity": "sha512-GJgzlDLIRqYhzoobx+rTEhBQ6btaE4bTOVrshsC+I+5EO5qs9Ov3KUNR+1X811fi1CqlTHg4Ldrbua1wLHzFXA==" + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/tempstream/-/tempstream-0.3.2.tgz", + "integrity": "sha512-ltfyywWGyhwhc+SdM76SK5lz/eV70rw6THPOhD5Hm/IBCWxJP241HPK2huS3tFm/8uw3AhTlkg5SMY2/9ll05Q==" }, "node_modules/terser": { "version": "5.26.0", diff --git a/package.json b/package.json index 45894c2..5bc182f 100644 --- a/package.json +++ b/package.json @@ -35,8 +35,8 @@ "@hotwired/turbo": "^7.1.0", "@koa/router": "^12.0.1", "@playwright/test": "^1.36.1", - "@sealcode/jdd": "^0.1.0", - "@sealcode/sealgen": "^0.11.0", + "@sealcode/jdd": "^0.2.4", + "@sealcode/sealgen": "^0.11.1", "@sealcode/ts-predicates": "^0.4.3", "@types/kill-port": "^2.0.0", "get-port": "^7.0.0", @@ -45,7 +45,7 @@ "nodemon": "^3.0.1", "sealious": "^0.17.48", "stimulus": "^2.0.0", - "tempstream": "^0.3.0", + "tempstream": "^0.3.2", "vitest": "^1.1.0" }, "devDependencies": { diff --git a/src/back/index.ts b/src/back/index.ts index b7e2a2f..9099446 100644 --- a/src/back/index.ts +++ b/src/back/index.ts @@ -8,8 +8,6 @@ const locreq = _locreq(module_dirname(import.meta.url)); const app = new TheApp(); -console.log({ SEALIOUS_SANITY }); - kill(app.config["www-server"].port) .then(() => app.start()) .then(async () => { diff --git a/src/back/jdd-components/components.ts b/src/back/jdd-components/components.ts new file mode 100644 index 0000000..c45b954 --- /dev/null +++ b/src/back/jdd-components/components.ts @@ -0,0 +1,16 @@ +// DO NOT EDIT! This file is generated automaticaly with 'npm run generate-components' +import { Registry } from "@sealcode/jdd"; + +export const registry = new Registry(); + +import { BeigeBox } from "./beige-box/beige-box.jdd.js"; +registry.add("beige-box", BeigeBox); + +import { NiceBox } from "./nice-box/nice-box.jdd.js"; +registry.add("nice-box", NiceBox); + +import { NicerBox } from "./nicer-box/nicer-box.jdd.js"; +registry.add("nicer-box", NicerBox); + +import { SomeExampleForYouAll } from "./some-example-for-you-all/some-example-for-you-all.jdd.js"; +registry.add("some-example-for-you-all", SomeExampleForYouAll); diff --git a/src/back/jdd-components/nice-box/nice-box.jdd.tsx b/src/back/jdd-components/nice-box/nice-box.jdd.tsx new file mode 100644 index 0000000..236fb37 --- /dev/null +++ b/src/back/jdd-components/nice-box/nice-box.jdd.tsx @@ -0,0 +1,33 @@ +import { FlatTemplatable, TempstreamJSX } from "tempstream"; +import { + Component, + ComponentArguments, + ExtractStructuredComponentArgumentsValues, + JDDContext, +} from "@sealcode/jdd"; + +const component_arguments = { + title: new ComponentArguments.ShortText(), + content: new ComponentArguments.Markdown(), +} as const; + +export class NiceBox extends Component { + getArguments() { + return component_arguments; + } + + toHTML( + { + title, + content, + }: ExtractStructuredComponentArgumentsValues, + { render_markdown }: JDDContext + ): FlatTemplatable { + return ( +
+

{title}

+
{render_markdown(content)}
+
+ ); + } +} diff --git a/src/back/routes/components.sreact.tsx b/src/back/routes/components.sreact.tsx new file mode 100644 index 0000000..51af4da --- /dev/null +++ b/src/back/routes/components.sreact.tsx @@ -0,0 +1,89 @@ +import { TempstreamJSX, Templatable } from "tempstream"; +import { BaseContext } from "koa"; +import { StatefulPage } from "@sealcode/sealgen"; +import html from "../html.js"; +import { registry } from "../jdd-components/components.js"; +import { render, simpleJDDContext } from "@sealcode/jdd"; + +export const actionName = "Components"; + +const actions = { + add: (state: State, inputs: Record) => { + console.log({ inputs }); + return { + ...state, + elements: [...state.elements, inputs.element_to_add || "new element"], + }; + }, + remove: (state: State, _: unknown, index_to_remove: number) => { + return { + ...state, + elements: state.elements.filter((_, index) => index != index_to_remove), + }; + }, +} as const; + +type State = { + component: string; + args: Record; +}; + +export default new (class ComponentsPage extends StatefulPage { + actions = actions; + + getInitialState() { + return { component: "", args: {} }; + } + + wrapInLayout(ctx: BaseContext, content: Templatable): Templatable { + return html(ctx, "Components", content); + } + + render(ctx: BaseContext, state: State, inputs: Record) { + const all_components = registry.getAll(); + const component = + registry.get(state.component) || Object.values(all_components)[0]; + return ( +
+
{JSON.stringify(state)}
+ +
+ Parameters + {Object.entries(component.getArguments()).map(([arg_name, arg]) => ( +
+ +
+ ))} + +
+
+ Preview + {render( + registry, + [{ component_name: state.component, args: state.args }], + simpleJDDContext + )} +
+
+ ); + } +})(); diff --git a/src/back/routes/routes.ts b/src/back/routes/routes.ts index 84f4575..3da0ddf 100644 --- a/src/back/routes/routes.ts +++ b/src/back/routes/routes.ts @@ -4,6 +4,7 @@ import Router from "@koa/router"; import { mount } from "@sealcode/sealgen"; import * as URLs from "./urls.js"; +import { default as Components } from "./components.sreact.js"; import { default as Hello } from "./hello.page.js"; import { default as Logout } from "./logout.redirect.js"; import { default as SignIn } from "./signIn.form.js"; @@ -11,6 +12,7 @@ import { default as SignUp } from "./signUp.form.js"; import { default as Todo } from "./todo.form.js"; export default function mountAutoRoutes(router: Router) { + mount(router, URLs.ComponentsURL, Components); mount(router, URLs.HelloURL, Hello); mount(router, URLs.LogoutURL, Logout); mount(router, URLs.SignInURL, SignIn); diff --git a/src/back/routes/urls.ts b/src/back/routes/urls.ts index 23fcd92..72d8c70 100644 --- a/src/back/routes/urls.ts +++ b/src/back/routes/urls.ts @@ -1,3 +1,4 @@ +export const ComponentsURL = "/components/"; export const HelloURL = "/hello/"; export const LogoutURL = "/logout/"; export const SignInURL = "/signIn/"; diff --git a/src/includes.scss b/src/includes.scss index 42ff604..e25b10e 100644 --- a/src/includes.scss +++ b/src/includes.scss @@ -1,5 +1,6 @@ // DO NOT EDIT! This file is generated automaticaly with npx sealgen generate-scss-includes @import "../node_modules/@sealcode/sealgen/src/forms/forms.scss"; +@import "back/jdd-components/some-example-for-you-all/some-example-for-you-all.scss"; @import "back/routes/common/ui/input.scss"; @import "tables.scss";