kuba/strona-czynna
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add support for JDD components

Browse Source
This commit is contained in:
Kuba Orlik 2024-02-08 16:19:54 +01:00
parent 8f04523a7a
commit f3da755843
9 changed files with 176 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
package-lock.json generated
View File

@ -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",

6
package.json
View File

@ -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": {

2
src/back/index.ts
View File

@ -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 () => {

16
src/back/jdd-components/components.ts Normal file
View File

@ -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);

33
src/back/jdd-components/nice-box/nice-box.jdd.tsx Normal file
View File

@ -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<typeof component_arguments> {
getArguments() {
return component_arguments;
}
toHTML(
{
title,
content,
}: ExtractStructuredComponentArgumentsValues<typeof component_arguments>,
{ render_markdown }: JDDContext
): FlatTemplatable {
return (
<div class="nice-box">
<h2>{title}</h2>
<div>{render_markdown(content)}</div>
</div>
);
}
}

89
src/back/routes/components.sreact.tsx Normal file
View File

@ -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<string, string>) => {
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<string, unknown>;
};
export default new (class ComponentsPage extends StatefulPage<State, typeof actions> {
actions = actions;
getInitialState() {
return { component: "", args: {} };
}
wrapInLayout(ctx: BaseContext, content: Templatable): Templatable {
return html(ctx, "Components", content);
}
render(ctx: BaseContext, state: State, inputs: Record<string, string>) {
const all_components = registry.getAll();
const component =
registry.get(state.component) || Object.values(all_components)[0];
return (
<div>
<div>{JSON.stringify(state)}</div>
<select name="$.component" onchange="this.closest('form').submit()">
{Object.entries(all_components).map(([name]) => (
<option value={name} selected={name == state.component}>
{name}
</option>
))}
</select>
<fieldset>
<legend>Parameters</legend>
{Object.entries(component.getArguments()).map(([arg_name, arg]) => (
<div>
<label>
{arg_name}
{arg.getTypeName() == "markdown" ? (
<textarea name={`$.args[${arg_name}]`}>
{state.args[arg_name] as string}
</textarea>
) : (
<input
type="text"
name={`$.args[${arg_name}]`}
value={state.args[arg_name] as string}
/>
)}
</label>
</div>
))}
<input type="submit" value="Preview" />
</fieldset>
<fieldset>
<legend>Preview</legend>
{render(
registry,
[{ component_name: state.component, args: state.args }],
simpleJDDContext
)}
</fieldset>
</div>
);
}
})();

2
src/back/routes/routes.ts
View File

@ -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);

1
src/back/routes/urls.ts
View File

@ -1,3 +1,4 @@
export const ComponentsURL = "/components/";
export const HelloURL = "/hello/";
export const LogoutURL = "/logout/";
export const SignInURL = "/signIn/";

1
src/includes.scss
View File

@ -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";