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

Compare commits

base: SethTrowbridge:other
Branches Tags
SethTrowbridge:master
SethTrowbridge:other
..
compare: SethTrowbridge:master
Branches Tags
SethTrowbridge:other
SethTrowbridge:master

No commits in common. "other" and "master" have entirely different histories.
other ... master

11 changed files with 13 additions and 188 deletions
Show Stats Expand all files Collapse all files

4
deno.json
View File

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

21
deno.lock
View File

@ -1,21 +0,0 @@
{
"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
View File

@ -1,11 +0,0 @@
<!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} from "./gale.tsx";
import {config, Complex} from "./gale.tsx";
export default config({other:"lol"});

16
gale.tsx
View File

@ -1,6 +1,6 @@
const typeface = {
sans: "sans-serif",
sans: "sans serif",
serif: "Times New Roman"
};
const sizes = {
@ -17,14 +17,6 @@ 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>();
function Mapper<T extends Record<string, string>>(className:string, propertyName:string, lut:T)
{
@ -35,9 +27,7 @@ function Mapper<T extends Record<string, string>>(className:string, propertyName
if(!check)
{
const body = `{ ${propertyName}:${propertyValue}; }`;
const rules = activeQuery.val ? `{ @media(${activeQuery.val})${body}}` : body
styles.set(selector, rules);
sheet.insertRule(selector + " " + rules);
styles.set(selector, activeQuery.val ? `{ @media(${activeQuery.val})${body}}` : body);
}
return selector;
}
@ -88,7 +78,7 @@ export function config<T>(obj:T)
const rules = [];
for(const [key, value] of styles.entries())
{
rules.push("."+key+value);
rules.push(key+value);
}
return rules.join("\n");
},

21
index.html
View File

@ -1,16 +1,5 @@
<!DOCTYPE html>
<html>
<head></head>
<body>
<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>
<style>
.py-01{padding:30px 0 30px 0;}
.px-01{padding:0 20px 0 20px;}
</style>
<p class="px-01 py-01">test</p>

28
styler.tsx
View File

@ -1,30 +1,8 @@
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 );
const html = Render(<div className={Gale.Q.lg( Gale.Face.sans, Gale.Q.md(Gale.Pad.large), Gale.Pad.small )}>
hello!
</div>)
console.log(classes);
const css = Gale.Sheet();
console.log(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
View File

@ -1,19 +0,0 @@
//////////////////////
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
View File

@ -1,22 +0,0 @@
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
View File

@ -1,27 +0,0 @@
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
View File

@ -1,30 +0,0 @@
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
};