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

deep-proxy #1

Merged
SethTrowbridge merged 16 commits from deep-proxy into master 2025-02-22 17:28:43 -05:00
Conversation 0 Commits 16 Files Changed 16 +38 -26
2 changed files with 38 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a54a067695 - Show all commits

22
gale.tsx
View File

@ -16,28 +16,29 @@ const responsive = {
lg: "min-width:1024px", lg: "min-width:1024px",
}; };
let SheetDOM = {insertRule(_:string){}} as CSSStyleSheet;
let sheet = {insertRule(_:string){}} as CSSStyleSheet;
if(globalThis?.document) if(globalThis?.document)
{ {
const sheetElement = document.createElement("style"); const sheetElement = document.createElement("style");
document.head.setAttribute("data-gale", "true"); document.head.setAttribute("data-gale", "true");
document.head.appendChild(sheetElement); document.head.appendChild(sheetElement);
sheet = sheetElement.sheet as CSSStyleSheet; SheetDOM = sheetElement.sheet as CSSStyleSheet;
} }
const styles = new Map<string, string>(); const SheetMap = 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)
{ {
const build =(propertyValue:string, customPropertyName?:string):string=> const build =(propertyValue:string, customPropertyName?:string):string=>
{ {
const selector = `${className}-${(customPropertyName||propertyValue as string).replace(/[^a-zA-Z0-9]/g, "")}${activeQuery.val?"_"+activeQuery.key:""}`; const selector = `${className}-${(customPropertyName||propertyValue as string).replace(/[^a-zA-Z0-9]/g, "")}${activeQuery.val?"_"+activeQuery.key:""}`;
const check = styles.get(selector); const check = SheetMap.get(selector);
if(!check) if(!check)
{ {
const body = `{ ${propertyName}:${propertyValue}; }`; const body = `{ ${propertyName}:${propertyValue}; }`;
const rules = activeQuery.val ? `{ @media(${activeQuery.val})${body}}` : body const rules = activeQuery.val ? `{ @media(${activeQuery.val})${body}}` : body
styles.set(selector, rules); SheetMap.set(selector, rules);
sheet.insertRule(selector + " " + rules); SheetDOM.insertRule(selector + " " + rules);
} }
return selector; return selector;
} }
@ -64,10 +65,11 @@ function MapperQuery<T extends Record<string, string>>(lut:T)
} }
let activeQuery:ActiveQuery;
type ActiveQuery = {key:string|false, val:string|false}; type ActiveQuery = {key:string|false, val:string|false};
const activeQueryStack:ActiveQuery[] = [];
type QueryInvoker = (...args:string[])=>string type QueryInvoker = (...args:string[])=>string
let activeQuery:ActiveQuery;
const activeQueryStack:ActiveQuery[] = [];
function Query(amount:string, key?:string):QueryInvoker function Query(amount:string, key?:string):QueryInvoker
{ {
activeQuery = {key:key||amount, val:amount}; activeQuery = {key:key||amount, val:amount};
@ -86,7 +88,7 @@ export function config<T>(obj:T)
Sheet() Sheet()
{ {
const rules = []; const rules = [];
for(const [key, value] of styles.entries()) for(const [key, value] of SheetMap.entries())
{ {
rules.push("."+key+value); rules.push("."+key+value);
} }

42
styler.tsx
View File

@ -1,30 +1,40 @@
import Gale from "./gale-custom.tsx"; import Gale from "./gale-custom.tsx";
import Render from "preact-render-to-string"; import Render from "preact-render-to-string";
const jsx = <div className={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!
hello! </div>
</div>)
const css = Gale.Sheet();
Deno.writeTextFile( Deno.writeTextFile(
"dump.html", "dump.html",
`<!DOCTYPE html> `<!DOCTYPE html>
<head> <head>
<meta name="viewport" content="width=device-width, initial-s" /> <meta name="viewport" content="width=device-width, initial-size=1" />
<style>${css}</style> <style>${Gale.Sheet()}</style>
</head> </head>
<body> <body>
${html} ${Render(jsx)}
</body> </body>
</html>` </html>`
) )
/* idea: // idea for table:
Gale.Table( // Gale.Table(
[, "md" ], { // [, "md" ], {
Face:["serif", "sans" ], // Face:["serif", "sans" ],
Pad:["small", "large"] // Pad:["small", "large"]
}) // })
*/
// idea for object
//Gale({
// lg:{
// Face:"sans",
// Pad:"small"
// },
// md:{
// Pad:"large"
// }
//})
// idea for function
//Gale.Gen(g=>[g.md(), g.Face.Sans])