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",
};
let sheet = {insertRule(_:string){}} as CSSStyleSheet;
let SheetDOM = {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;
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)
{
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 check = styles.get(selector);
const check = SheetMap.get(selector);
if(!check)
{
const body = `{ ${propertyName}:${propertyValue}; }`;
const rules = activeQuery.val ? `{ @media(${activeQuery.val})${body}}` : body
styles.set(selector, rules);
sheet.insertRule(selector + " " + rules);
SheetMap.set(selector, rules);
SheetDOM.insertRule(selector + " " + rules);
}
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};
const activeQueryStack:ActiveQuery[] = [];
type QueryInvoker = (...args:string[])=>string
let activeQuery:ActiveQuery;
const activeQueryStack:ActiveQuery[] = [];
function Query(amount:string, key?:string):QueryInvoker
{
activeQuery = {key:key||amount, val:amount};
@ -86,7 +88,7 @@ export function config<T>(obj:T)
Sheet()
{
const rules = [];
for(const [key, value] of styles.entries())
for(const [key, value] of SheetMap.entries())
{
rules.push("."+key+value);
}

42
styler.tsx
View File

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