From f4823a6576be1a90b2b118d10349fda20cfddcfc Mon Sep 17 00:00:00 2001 From: Seth Trowbridge Date: Fri, 2 Aug 2024 14:45:14 -0400 Subject: [PATCH] in browser demo --- deno.json | 4 +++- deno.lock | 21 +++++++++++++++++++++ dump.html | 11 +++++++++++ gale.tsx | 4 ++-- styler.tsx | 28 +++++++++++++++++++++++++--- type-experiments-01.ts | 19 +++++++++++++++++++ type-experiments-02.ts | 22 ++++++++++++++++++++++ type-experiments-03.ts | 27 +++++++++++++++++++++++++++ type-experiments-04.ts | 30 ++++++++++++++++++++++++++++++ 9 files changed, 160 insertions(+), 6 deletions(-) create mode 100644 deno.lock create mode 100644 dump.html create mode 100644 type-experiments-01.ts create mode 100644 type-experiments-02.ts create mode 100644 type-experiments-03.ts create mode 100644 type-experiments-04.ts diff --git a/deno.json b/deno.json index d3075e6..93ab167 100644 --- a/deno.json +++ b/deno.json @@ -1,11 +1,13 @@ { "imports": { "react": "https://esm.sh/preact@10.18.1/compat", - "react/": "https://esm.sh/preact@10.18.1/compat/" + "react/": "https://esm.sh/preact@10.18.1/compat/", + "preact-render-to-string": "https://esm.sh/preact-render-to-string@6.5.7?deps=preact@10.18.1" }, "tasks": {"go": "deno run -A styler.tsx"}, "compilerOptions": { "jsx": "react-jsx", + "jsxImportSource": "react", "lib": ["deno.window","dom","dom.asynciterable"] } } \ No newline at end of file diff --git a/deno.lock b/deno.lock new file mode 100644 index 0000000..989d9df --- /dev/null +++ b/deno.lock @@ -0,0 +1,21 @@ +{ + "version": "3", + "redirects": { + "https://esm.sh/v128/@types/react@~18.3/index.d.ts": "https://esm.sh/v128/@types/react@18.2.38/index.d.ts", + "https://esm.sh/v135/@types/react-dom@~18.3/server~.d.ts": "https://esm.sh/v135/@types/react-dom@18.3.0/server~.d.ts" + }, + "remote": { + "https://esm.sh/preact-render-to-string@6.5.7?deps=preact@10.18.1": "1d9e844b000fd2bf592142f98e6a6c9c3c10953ac90bef90a67ded5e28667279", + "https://esm.sh/preact@10.18.1/compat/jsx-runtime": "d9addc942dc9b5eb507c622e7ad93d5594093f5d31e461d4125f7a1ab475f932", + "https://esm.sh/react-dom@18.3.1/server": "90e374c5323303d5315c780b19e5d6297ec5a569f9cee1df28ee1030dd23af9c", + "https://esm.sh/react@18.3.1": "52480d4c00855e4f76843caa4f2818eb001671523740cbf064cbd108721c29c8", + "https://esm.sh/stable/preact@10.18.1/denonext/compat.js": "cb1028add6b66ecea904a750ad9887f21c5a42c17303c4c317710866c290efa7", + "https://esm.sh/stable/preact@10.18.1/denonext/compat/jsx-runtime.js": "16e3c12a4942f4f3027f6f3c5a0686ef00a80d70a4fb08097b702f4ddd5d488f", + "https://esm.sh/stable/preact@10.18.1/denonext/hooks.js": "cb7e8c9973e6a224348eaa51fba21e13f239839e403f751b29894a258a6d16d0", + "https://esm.sh/stable/preact@10.18.1/denonext/jsx-runtime.js": "be3f1ff4c3c03b08ed19d69428e35bf3d90360a8e081a2e60075ddfd38fd86df", + "https://esm.sh/stable/preact@10.18.1/denonext/preact.mjs": "b2ad171554b90f2be0f30b1318f63d0df90420b2bdb727fddd97193daa177f84", + "https://esm.sh/stable/react@18.3.1/denonext/react.mjs": "fc048ffc55366baf7669519127d186761db72046e2bebf35fe8d0de3964defa3", + "https://esm.sh/v135/preact-render-to-string@6.5.7/X-ZC9wcmVhY3RAMTAuMTguMQ/denonext/preact-render-to-string.mjs": "80d81cb9eeee0b973a136113bd8ff22288b5d40d3dae15f91838dbc72356e095", + "https://esm.sh/v135/react-dom@18.3.1/denonext/server.js": "b4db56f16b45002b5e9b127a9938ab45b12f39825161dffe875920510c524878" + } +} diff --git a/dump.html b/dump.html new file mode 100644 index 0000000..6b9c8fa --- /dev/null +++ b/dump.html @@ -0,0 +1,11 @@ + + + + + + +
hello!
+ + \ No newline at end of file diff --git a/gale.tsx b/gale.tsx index e58c3c8..00db41a 100644 --- a/gale.tsx +++ b/gale.tsx @@ -1,6 +1,6 @@ const typeface = { - sans: "sans serif", + sans: "sans-serif", serif: "Times New Roman" }; const sizes = { @@ -88,7 +88,7 @@ export function config(obj:T) const rules = []; for(const [key, value] of styles.entries()) { - rules.push(key+value); + rules.push("."+key+value); } return rules.join("\n"); }, diff --git a/styler.tsx b/styler.tsx index 4528a8d..aefeadb 100644 --- a/styler.tsx +++ b/styler.tsx @@ -1,8 +1,30 @@ import Gale from "./gale-custom.tsx"; +import Render from "preact-render-to-string"; -const classes = Gale.Q.lg( Gale.Face.sans, Gale.Q.md(Gale.Pad.large), Gale.Pad.small ); -console.log(classes); +const html = Render(
+ hello! +
) -console.log(Gale.Sheet()); +const css = Gale.Sheet(); +Deno.writeTextFile( +"dump.html", +` + + + + + + ${html} + +` +) + +/* idea: +Gale.Table( + [, "md" ], { + Face:["serif", "sans" ], + Pad:["small", "large"] +}) +*/ \ No newline at end of file diff --git a/type-experiments-01.ts b/type-experiments-01.ts new file mode 100644 index 0000000..27bdf82 --- /dev/null +++ b/type-experiments-01.ts @@ -0,0 +1,19 @@ +////////////////////// +type OriginalType = { + key1: { sub1: string; sub2: string }; + key2: { subA: string; subB: string }; + }; + + type ValidKeys = keyof OriginalType; + type ValidSubKeys = keyof OriginalType[K]; + + type EnforcedRecord = { + [K in ValidKeys]: ValidSubKeys[]; + }; + + // Example usage: + const example: EnforcedRecord = { + key1: ['sub1', 'sub2'], + key2: ['subA', 'subB', "sub1"], // last is invalid + }; + diff --git a/type-experiments-02.ts b/type-experiments-02.ts new file mode 100644 index 0000000..02b0b29 --- /dev/null +++ b/type-experiments-02.ts @@ -0,0 +1,22 @@ +type OriginalType = { + key1: { sub1: string; sub2: string }; + key2: { subA: string; subB: string }; +}; + +type ValidKeys = keyof OriginalType; +type ValidSubKeys = keyof OriginalType[K]; + +type FixedLengthArray = [T, ...T[]] & { length: L }; + +type EnforcedRecord = { + [K in ValidKeys]: FixedLengthArray, L>; +}; + + +// Example usage: +const example: EnforcedRecord<2> = { + key1: ['sub1', 'sub2'], // Valid + key2: ['subA', 'subB'], // Valid + // key1: ['sub1'], // Invalid, TypeScript will give an error + // key2: ['subA', 'subB', 'subC'], // Invalid, TypeScript will give an error +}; \ No newline at end of file diff --git a/type-experiments-03.ts b/type-experiments-03.ts new file mode 100644 index 0000000..4f2e037 --- /dev/null +++ b/type-experiments-03.ts @@ -0,0 +1,27 @@ +type OriginalType = { + key1: { sub1: string; sub2: string }; + key2: { subA: string; subB: string }; +}; + +type ValidKeys = keyof OriginalType; +type ValidSubKeys = keyof OriginalType[K]; + +type FixedLengthArray = [T, ...T[]] & { length: L }; + +type EnforcedRecord = { + [K in ValidKeys]: FixedLengthArray, L>; +}; + +const createTable = ( + cols: T, + rows: EnforcedRecord +) => { + return { cols, rows }; +}; + +// Example usage: +const cols = ["a", "b", "c"] as const; +const table = createTable(cols, { + key1: ['sub1', 'sub2', 'sub1', 'sub1'], // invalid because too long + key2: ['subA', 'subB', 'sub1'], // invalid because bad key +}); diff --git a/type-experiments-04.ts b/type-experiments-04.ts new file mode 100644 index 0000000..3fb5f16 --- /dev/null +++ b/type-experiments-04.ts @@ -0,0 +1,30 @@ +type OriginalType = { + key1: { sub1: string; sub2: string }; + key2: { subA: string; subB: string }; +}; + +type ValidKeys = keyof OriginalType; +type ValidSubKeys = keyof OriginalType[K]; + +type FixedLengthArray = T[] & { length: L }; + +type EnforcedRecord = { + [K in ValidKeys]: FixedLengthArray, L>; +}; + +type FixedArr = Arr & { length: Length }; +function Func(arr1:FixedArr) +{ + return arr1.length; +} + + +const test = Func<3>(["a", "b", "c"]) + +// Example usage: +const example: EnforcedRecord<2> = { + key1: ['sub1', 'sub2', 'sub1'], // Valid + key2: ['subA', 'subB'], // Valid + // key1: ['sub1'], // Invalid, TypeScript will give an error + // key2: ['subA', 'subB', 'subC'], // Invalid, TypeScript will give an error +}; \ No newline at end of file