SethTrowbridge/gale
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: SethTrowbridge:27780931d520fcdb94de9918a3539438f2b7ab17
Branches Tags
SethTrowbridge:master
SethTrowbridge:other
..
compare: SethTrowbridge:f4823a6576be1a90b2b118d10349fda20cfddcfc
Branches Tags
SethTrowbridge:other
SethTrowbridge:master

2 Commits
27780931d5 ... f4823a6576

Author SHA1 Message Date
Seth Trowbridge
f4823a6576 in browser demo 2024-08-02 14:45:14 -04:00
Seth Trowbridge
625d532acc idk 2024-08-01 08:23:47 -04:00
11 changed files with 188 additions and 13 deletions
Show Stats Expand all files Collapse all files

4
deno.json
View File

@ -1,11 +1,13 @@
{ {
"imports": { "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/" "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"}, "tasks": {"go": "deno run -A styler.tsx"},
"compilerOptions": { "compilerOptions": {
"jsx": "react-jsx", "jsx": "react-jsx",
"jsxImportSource": "react",
"lib": ["deno.window","dom","dom.asynciterable"] "lib": ["deno.window","dom","dom.asynciterable"]
} }
} }

21
deno.lock Normal file
View File

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

11
dump.html Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-s" />
<style>.Face-sans_lg{ @media(min-width:1024px){ font-family:sans-serif; }}
.Pad-large_md{ @media(min-width:767px){ padding:3rem; }}
.Pad-small_lg{ @media(min-width:1024px){ padding:1rem; }}</style>
</head>
<body>
<div class="Face-sans_lg Pad-large_md Pad-small_lg">hello!</div>
</body>
</html>

2
gale-custom.tsx
View File

@ -1,3 +1,3 @@
import {config, Complex} from "./gale.tsx"; import {config} from "./gale.tsx";
export default config({other:"lol"}); export default config({other:"lol"});

16
gale.tsx
View File

@ -1,6 +1,6 @@
const typeface = { const typeface = {
sans: "sans serif", sans: "sans-serif",
serif: "Times New Roman" serif: "Times New Roman"
}; };
const sizes = { const sizes = {
@ -17,6 +17,14 @@ const responsive = {
}; };
let sheet = {insertRule(_:string){}} as CSSStyleSheet;
if(globalThis?.document)
{
const sheetElement = document.createElement("style");
document.head.setAttribute("data-gale", "true");
document.head.appendChild(sheetElement);
sheet = sheetElement.sheet as CSSStyleSheet;
}
const styles = new Map<string, string>(); const styles = new Map<string, string>();
function Mapper<T extends Record<string, string>>(className:string, propertyName:string, lut:T) function Mapper<T extends Record<string, string>>(className:string, propertyName:string, lut:T)
{ {
@ -27,7 +35,9 @@ function Mapper<T extends Record<string, string>>(className:string, propertyName
if(!check) if(!check)
{ {
const body = `{ ${propertyName}:${propertyValue}; }`; const body = `{ ${propertyName}:${propertyValue}; }`;
styles.set(selector, activeQuery.val ? `{ @media(${activeQuery.val})${body}}` : body); const rules = activeQuery.val ? `{ @media(${activeQuery.val})${body}}` : body
styles.set(selector, rules);
sheet.insertRule(selector + " " + rules);
} }
return selector; return selector;
} }
@ -78,7 +88,7 @@ export function config<T>(obj:T)
const rules = []; const rules = [];
for(const [key, value] of styles.entries()) for(const [key, value] of styles.entries())
{ {
rules.push(key+value); rules.push("."+key+value);
} }
return rules.join("\n"); return rules.join("\n");
}, },

21
index.html
View File

@ -1,5 +1,16 @@
<style> <!DOCTYPE html>
.py-01{padding:30px 0 30px 0;} <html>
.px-01{padding:0 20px 0 20px;} <head></head>
</style> <body>
<p class="px-01 py-01">test</p> <div id="app"> </div>
<script type="module">
import Gale from "./gale-custom.tsx";
document.querySelector("#app").innerHTML = `
<div class="${Gale.Q.lg( Gale.Face.sans, Gale.Q.md(Gale.Pad.large), Gale.Pad.small )}">
hey
</div>
`
</script>
</body>
</html>

28
styler.tsx
View File

@ -1,8 +1,30 @@
import Gale from "./gale-custom.tsx"; 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(<div className={Gale.Q.lg( Gale.Face.sans, Gale.Q.md(Gale.Pad.large), Gale.Pad.small )}>
hello!
</div>)
console.log(Gale.Sheet()) const css = Gale.Sheet();
Deno.writeTextFile(
"dump.html",
`<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-s" />
<style>${css}</style>
</head>
<body>
${html}
</body>
</html>`
)
/* idea:
Gale.Table(
[, "md" ], {
Face:["serif", "sans" ],
Pad:["small", "large"]
})
*/

19
type-experiments-01.ts Normal file
View File

@ -0,0 +1,19 @@
//////////////////////
type OriginalType = {
key1: { sub1: string; sub2: string };
key2: { subA: string; subB: string };
};
type ValidKeys = keyof OriginalType;
type ValidSubKeys<K extends ValidKeys> = keyof OriginalType[K];
type EnforcedRecord = {
[K in ValidKeys]: ValidSubKeys<K>[];
};
// Example usage:
const example: EnforcedRecord = {
key1: ['sub1', 'sub2'],
key2: ['subA', 'subB', "sub1"], // last is invalid
};

22
type-experiments-02.ts Normal file
View File

@ -0,0 +1,22 @@
type OriginalType = {
key1: { sub1: string; sub2: string };
key2: { subA: string; subB: string };
};
type ValidKeys = keyof OriginalType;
type ValidSubKeys<K extends ValidKeys> = keyof OriginalType[K];
type FixedLengthArray<T, L extends number> = [T, ...T[]] & { length: L };
type EnforcedRecord<L extends number> = {
[K in ValidKeys]: FixedLengthArray<ValidSubKeys<K>, 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
};

27
type-experiments-03.ts Normal file
View File

@ -0,0 +1,27 @@
type OriginalType = {
key1: { sub1: string; sub2: string };
key2: { subA: string; subB: string };
};
type ValidKeys = keyof OriginalType;
type ValidSubKeys<K extends ValidKeys> = keyof OriginalType[K];
type FixedLengthArray<T, L extends number> = [T, ...T[]] & { length: L };
type EnforcedRecord<L extends number> = {
[K in ValidKeys]: FixedLengthArray<ValidSubKeys<K>, L>;
};
const createTable = <T extends { length: number }>(
cols: T,
rows: EnforcedRecord<T['length']>
) => {
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
});

30
type-experiments-04.ts Normal file
View File

@ -0,0 +1,30 @@
type OriginalType = {
key1: { sub1: string; sub2: string };
key2: { subA: string; subB: string };
};
type ValidKeys = keyof OriginalType;
type ValidSubKeys<K extends ValidKeys> = keyof OriginalType[K];
type FixedLengthArray<T, L extends number> = T[] & { length: L };
type EnforcedRecord<L extends number> = {
[K in ValidKeys]: FixedLengthArray<ValidSubKeys<K>, L>;
};
type FixedArr<Arr, Length extends number> = Arr & { length: Length };
function Func<L extends number>(arr1:FixedArr<string[], L>)
{
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
};