@xnoxs/flux-lang 3.1.1

package/src/self/jsx.js

@@ -0,0 +1,396 @@
+// Flux JSX Runtime
+"use strict";
+
+function _fluxH(tag,props,...children){
+  if(tag===""){const f=document.createDocumentFragment();children.flat(Infinity).forEach(c=>{if(c==null)return;f.appendChild(c instanceof Node?c:document.createTextNode(String(c)));});return f;}
+  const el=document.createElement(tag);
+  if(props){for(const[k,v]of Object.entries(props)){if(k==="class"||k==="className"){el.className=v;}else if(k==="style"&&typeof v==="object"){Object.assign(el.style,v);}else if(k.startsWith("on")&&typeof v==="function"){el.addEventListener(k.slice(2).toLowerCase(),v);}else if(typeof v==="boolean"){if(v)el.setAttribute(k,"");}else{el.setAttribute(k,String(v));}}}
+  children.flat(Infinity).forEach(c=>{if(c==null)return;el.appendChild(c instanceof Node?c:document.createTextNode(String(c)));});
+  return el;
+}
+function _fluxCSS(css){const s=document.createElement("style");s.textContent=css;document.head.appendChild(s);return css;}
+// ── Flux stdlib ──
+
+function map(arr, fn) { return arr.map(fn); }
+
+function forEach(arr, fn) { arr.forEach(fn); return arr; }
+
+function join(arr, sep) { return arr.join(sep != null ? sep : ','); }
+
+function flat(arr, depth) { return arr.flat(depth != null ? depth : 1); }
+
+function includes(arr, val) { return arr.includes(val); }
+// ── end stdlib ──
+
+
+const JSX_STYLE_VALUE_PROPS = { bg: (v) => ("background:" + v), fg: (v) => ("color:" + v), color: (v) => ("color:" + v), p: (v) => ("padding:" + v), px: (v) => ((("paddingLeft:" + v) + ",paddingRight:") + v), py: (v) => ((("paddingTop:" + v) + ",paddingBottom:") + v), pt: (v) => ("paddingTop:" + v), pb: (v) => ("paddingBottom:" + v), pl: (v) => ("paddingLeft:" + v), pr: (v) => ("paddingRight:" + v), m: (v) => ("margin:" + v), mx: (v) => ((("marginLeft:" + v) + ",marginRight:") + v), my: (v) => ((("marginTop:" + v) + ",marginBottom:") + v), mt: (v) => ("marginTop:" + v), mb: (v) => ("marginBottom:" + v), ml: (v) => ("marginLeft:" + v), mr: (v) => ("marginRight:" + v), radius: (v) => ("borderRadius:" + v), w: (v) => ("width:" + v), h: (v) => ("height:" + v), "min-w": (v) => ("minWidth:" + v), "max-w": (v) => ("maxWidth:" + v), "min-h": (v) => ("minHeight:" + v), "max-h": (v) => ("maxHeight:" + v), gap: (v) => ("gap:" + v), "col-gap": (v) => ("columnGap:" + v), "row-gap": (v) => ("rowGap:" + v), text: (v) => ("fontSize:" + v), font: (v) => ("fontFamily:" + v), weight: (v) => ("fontWeight:" + v), tracking: (v) => ("letterSpacing:" + v), leading: (v) => ("lineHeight:" + v), shadow: (v) => ("boxShadow:" + v), opacity: (v) => ("opacity:" + v), border: (v) => ("border:" + v), outline: (v) => ("outline:" + v), transition: (v) => ("transition:" + v), cursor: (v) => ("cursor:" + v), overflow: (v) => ("overflow:" + v), z: (v) => ("zIndex:" + v), transform: (v) => ("transform:" + v), direction: (v) => ("flexDirection:" + v), align: (v) => ("alignItems:" + v), justify: (v) => ("justifyContent:" + v), "align-self": (v) => ("alignSelf:" + v), "place-items": (v) => ("placeItems:" + v), grow: (v) => ("flexGrow:" + v), shrink: (v) => ("flexShrink:" + v), basis: (v) => ("flexBasis:" + v), cols: (v) => ("gridTemplateColumns:" + v), rows: (v) => ("gridTemplateRows:" + v), inset: (v) => ("inset:" + v), top: (v) => ("top:" + v), right: (v) => ("right:" + v), bottom: (v) => ("bottom:" + v), left: (v) => ("left:" + v), "object-fit": (v) => ("objectFit:" + v), "line-height": (v) => ("lineHeight:" + v), "text-align": (v) => ("textAlign:" + v), decoration: (v) => ("textDecoration:" + v), clip: (v) => ("clipPath:" + v), filter: (v) => ("filter:" + v), backdrop: (v) => ("backdropFilter:" + v), animation: (v) => ("animation:" + v) };
+const JSX_STYLE_BOOL_PROPS = { flex: "display:\"flex\"", grid: "display:\"grid\"", block: "display:\"block\"", "inline-flex": "display:\"inline-flex\"", "inline-block": "display:\"inline-block\"", bold: "fontWeight:700", italic: "fontStyle:\"italic\"", underline: "textDecoration:\"underline\"", pointer: "cursor:\"pointer\"", hidden: "display:\"none\"", relative: "position:\"relative\"", absolute: "position:\"absolute\"", fixed: "position:\"fixed\"", sticky: "position:\"sticky\"", "flex-col": "flexDirection:\"column\"", "flex-row": "flexDirection:\"row\"", "flex-wrap": "flexWrap:\"wrap\"", "flex-1": "flex:1", "w-full": "width:\"100%\"", "h-full": "height:\"100%\"", center: "textAlign:\"center\"", truncate: "overflow:\"hidden\",textOverflow:\"ellipsis\",whiteSpace:\"nowrap\"", "select-none": "userSelect:\"none\"", "no-wrap": "whiteSpace:\"nowrap\"", "no-list": "listStyle:\"none\"", "no-outline": "outline:\"none\"", "no-border": "border:\"none\"", "box-border": "boxSizing:\"border-box\"" };
+const FLUX_H_BROWSER = "function _fluxH(tag,props,...children){\n  if(tag===\"\"){const f=document.createDocumentFragment();children.flat(Infinity).forEach(c=>{if(c==null)return;f.appendChild(c instanceof Node?c:document.createTextNode(String(c)));});return f;}\n  const el=document.createElement(tag);\n  if(props){for(const[k,v]of Object.entries(props)){if(k===\"class\"||k===\"className\"){el.className=v;}else if(k===\"style\"&&typeof v===\"object\"){Object.assign(el.style,v);}else if(k.startsWith(\"on\")&&typeof v===\"function\"){el.addEventListener(k.slice(2).toLowerCase(),v);}else if(typeof v===\"boolean\"){if(v)el.setAttribute(k,\"\");}else{el.setAttribute(k,String(v));}}}\n  children.flat(Infinity).forEach(c=>{if(c==null)return;el.appendChild(c instanceof Node?c:document.createTextNode(String(c)));});\n  return el;\n}";
+module.exports.FLUX_H_BROWSER = FLUX_H_BROWSER;
+const FLUX_H_SERVER = (((((((((((("function _fluxH(tag,props,...children){\n  const VOID=new Set([\"area\",\"base\",\"br\",\"col\",\"embed\",\"hr\",\"img\",\"input\",\"link\",\"meta\",\"param\",\"source\",\"track\",\"wbr\"]);\n  if(tag===\"\")return children.flat(Infinity).map(c=>c==null?\"\":String(c)).join(\"\");\n  let attrs=\"\";\n  if(props){for(const[k,v]of Object.entries(props)){if(k===\"class\"||k===\"className\")attrs+=" + "` class=\"${v}\"`") + ";else if(k===\"style\"&&typeof v===\"object\")attrs+=") + "` style=\"${Object.entries(v).map(([p,val])=>p.replace(/[A-Z]/g,m=>\"-\"+m.toLowerCase())+\":\"+val).join(\";\")}\"`") + ";else if(typeof v!==\"function\"&&typeof v!==\"boolean\")attrs+=") + "` ${k}=\"${String(v).replace(/\"/g,\"&quot;\")}\"`") + ";else if(v===true)attrs+=") + "` ${k}`") + ";}}\n  const inner=children.flat(Infinity).map(c=>c==null?\"\":String(c)).join(\"\");\n  if(VOID.has(tag))return") + "`<${tag}${attrs}>`") + ";\n  return") + "`<${tag}${attrs}>${inner}</${tag}>`") + ";\n}");
+module.exports.FLUX_H_SERVER = FLUX_H_SERVER;
+const FLUX_CSS_BROWSER = "function _fluxCSS(css){const s=document.createElement(\"style\");s.textContent=css;document.head.appendChild(s);return css;}";
+module.exports.FLUX_CSS_BROWSER = FLUX_CSS_BROWSER;
+const FLUX_CSS_SERVER = "function _fluxCSS(css){return css;}";
+module.exports.FLUX_CSS_SERVER = FLUX_CSS_SERVER;
+class JsxPreprocessor {
+  constructor(src, pos, out, hasJsx) {
+    this.src = src;
+    this.pos = pos;
+    this.out = out;
+    this.hasJsx = hasJsx;
+  }
+
+  transform() {
+    while ((this.pos < this.src.length)) {
+      this.scanTop();
+    }
+    this.hasJsx = (this.out != this.src);
+    return this.out;
+  }
+
+  scanTop() {
+    const c = this.src[this.pos];
+    if (((c == "/") && (this.src[(this.pos + 1)] == "/"))) {
+      const end_ = this.src.indexOf("\n", this.pos);
+      if ((end_ == -1)) {
+        this.out = (this.out + this.src.slice(this.pos));
+        this.pos = this.src.length;
+      }
+      else {
+        this.out = (this.out + this.src.slice(this.pos, (end_ + 1)));
+        this.pos = (end_ + 1);
+      }
+      return;
+    }
+    if (((c == "/") && (this.src[(this.pos + 1)] == "*"))) {
+      const end_ = this.src.indexOf("*/", (this.pos + 2));
+      if ((end_ == -1)) {
+        this.out = (this.out + this.src.slice(this.pos));
+        this.pos = this.src.length;
+      }
+      else {
+        this.out = (this.out + this.src.slice(this.pos, (end_ + 2)));
+        this.pos = (end_ + 2);
+      }
+      return;
+    }
+    if ((c == "\"")) {
+      this.passString("\"");
+      return;
+    }
+    if ((c == "'")) {
+      this.passString("'");
+      return;
+    }
+    if ((c == "`")) {
+      this.passTemplateLit();
+      return;
+    }
+    if (((c == "<") && this.isJsxStart())) {
+      const jsxCode = this.parseJsxElement();
+      this.out = (this.out + jsxCode);
+      return;
+    }
+    this.out = (this.out + c);
+    this.pos = (this.pos + 1);
+  }
+
+  isJsxStart() {
+    const next = (this.src[(this.pos + 1)] ?? "");
+    if ((((next != ">") && !((next >= "a") && (next <= "z"))) && !((next >= "A") && (next <= "Z")))) {
+      return false;
+    }
+    let i = (this.pos - 1);
+    while (((i >= 0) && ((this.src[i] == " ") || (this.src[i] == "\t")))) {
+      i = (i - 1);
+    }
+    if ((i < 0)) {
+      return true;
+    }
+    const prev = this.src[i];
+    if ("=([{,:>\n?".includes(prev)) {
+      return true;
+    }
+    if (/[a-z]/.test(prev)) {
+      let j = i;
+      while (((j >= 0) && /[a-z]/.test(this.src[j]))) {
+        j = (j - 1);
+      }
+      const word = this.src.slice((j + 1), (i + 1));
+      const exprKw = new Set(["return", "not", "and", "or", "val", "var", "await", "yield", "else", "in", "throw"]);
+      if (exprKw.has(word)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  passString(quote) {
+    this.out = (this.out + quote);
+    this.pos = (this.pos + 1);
+    while ((this.pos < this.src.length)) {
+      const c = this.src[this.pos];
+      if ((c == "\\")) {
+        this.out = ((this.out + c) + (this.src[(this.pos + 1)] ?? ""));
+        this.pos = (this.pos + 2);
+        continue;
+      }
+      if ((c == quote)) {
+        this.out = (this.out + c);
+        this.pos = (this.pos + 1);
+        return;
+      }
+      this.out = (this.out + c);
+      this.pos = (this.pos + 1);
+    }
+  }
+
+  passTemplateLit() {
+    this.out = (this.out + "`");
+    this.pos = (this.pos + 1);
+    while ((this.pos < this.src.length)) {
+      const c = this.src[this.pos];
+      if ((c == "\\")) {
+        this.out = ((this.out + c) + (this.src[(this.pos + 1)] ?? ""));
+        this.pos = (this.pos + 2);
+        continue;
+      }
+      if ((c == "`")) {
+        this.out = (this.out + c);
+        this.pos = (this.pos + 1);
+        return;
+      }
+      this.out = (this.out + c);
+      this.pos = (this.pos + 1);
+    }
+  }
+
+  parseJsxElement() {
+    this.pos = (this.pos + 1);
+    if ((this.src[this.pos] == ">")) {
+      this.pos = (this.pos + 1);
+      const children = this.parseJsxChildren("");
+      this.expectClose("");
+      const childStr = ((children.length > 0) ? ("," + children.join(",")) : "");
+      return (("_fluxH(\"\",null" + childStr) + ")");
+    }
+    const tag = this.readTagName();
+    const attrs = this.parseJsxAttrs();
+    if (((this.src[this.pos] == "/") && (this.src[(this.pos + 1)] == ">"))) {
+      this.pos = (this.pos + 2);
+      return (((("_fluxH(\"" + tag) + "\",") + attrs) + ")");
+    }
+    if ((this.src[this.pos] == ">")) {
+      this.pos = (this.pos + 1);
+      const children = this.parseJsxChildren(tag);
+      this.expectClose(tag);
+      const childStr = ((children.length > 0) ? ("," + children.join(",")) : "");
+      return ((((("_fluxH(\"" + tag) + "\",") + attrs) + childStr) + ")");
+    }
+    return ("<" + tag);
+  }
+
+  readTagName() {
+    let name = "";
+    while ((this.pos < this.src.length)) {
+      const c = this.src[this.pos];
+      if (/[a-zA-Z0-9\-_\.]/.test(c)) {
+        name = (name + c);
+        this.pos = (this.pos + 1);
+      }
+      else {
+        break;
+      }
+    }
+    return name;
+  }
+
+  parseJsxAttrs() {
+    this.skipWs();
+    const pairs = [];
+    const styleParts = [];
+    let explicitStyle = null;
+    while ((this.pos < this.src.length)) {
+      const c = this.src[this.pos];
+      if (((c == ">") || ((c == "/") && (this.src[(this.pos + 1)] == ">")))) {
+        break;
+      }
+      this.skipWs();
+      if (!/[a-zA-Z_\-]/.test((this.src[this.pos] ?? ""))) {
+        break;
+      }
+      let attrName = "";
+      while (((this.pos < this.src.length) && /[a-zA-Z0-9\-_:]/.test(this.src[this.pos]))) {
+        attrName = (attrName + this.src[this.pos]);
+        this.pos = (this.pos + 1);
+      }
+      this.skipWs();
+      if ((this.src[this.pos] != "=")) {
+        const boolStyle = JSX_STYLE_BOOL_PROPS[attrName];
+        if ((boolStyle != undefined)) {
+          styleParts.push(boolStyle);
+        }
+        else {
+          pairs.push((("\"" + attrName) + "\":true"));
+        }
+        continue;
+      }
+      this.pos = (this.pos + 1);
+      this.skipWs();
+      const ch = this.src[this.pos];
+      let rawVal = "";
+      let exprVal_ = "";
+      if (((ch == "\"") || (ch == "'"))) {
+        const q = ch;
+        this.pos = (this.pos + 1);
+        let v = "";
+        while (((this.pos < this.src.length) && (this.src[this.pos] != q))) {
+          if ((this.src[this.pos] == "\\")) {
+            v = ((v + this.src[this.pos]) + this.src[(this.pos + 1)]);
+            this.pos = (this.pos + 2);
+          }
+          else {
+            v = (v + this.src[this.pos]);
+            this.pos = (this.pos + 1);
+          }
+        }
+        this.pos = (this.pos + 1);
+        rawVal = v;
+      }
+      else if ((ch == "{")) {
+        exprVal_ = this.readBraced();
+      }
+      else {
+        const boolStyle = JSX_STYLE_BOOL_PROPS[attrName];
+        if ((boolStyle != undefined)) {
+          styleParts.push(boolStyle);
+        }
+        else {
+          pairs.push((("\"" + attrName) + "\":true"));
+        }
+        this.skipWs();
+        continue;
+      }
+      if (((rawVal != null) && JSX_STYLE_VALUE_PROPS[attrName])) {
+        const expanded = JSX_STYLE_VALUE_PROPS[attrName](JSON.stringify(rawVal));
+        styleParts.push(expanded);
+      }
+      else if (((exprVal_ != null) && (attrName == "style"))) {
+        explicitStyle = exprVal_;
+      }
+      else {
+        if ((rawVal != null)) {
+          pairs.push(((("\"" + attrName) + "\":") + JSON.stringify(rawVal)));
+        }
+        else {
+          pairs.push(((("\"" + attrName) + "\":") + exprVal_));
+        }
+      }
+      this.skipWs();
+    }
+    if (((styleParts.length > 0) || (explicitStyle != null))) {
+      const utilObj = ((styleParts.length > 0) ? (("{" + styleParts.join(",")) + "}") : null);
+      if (((explicitStyle != null) && (utilObj != null))) {
+        pairs.push((((("\"style\":Object.assign(" + explicitStyle) + ",") + utilObj) + ")"));
+      }
+      else if ((explicitStyle != null)) {
+        pairs.push(("\"style\":" + explicitStyle));
+      }
+      else {
+        pairs.push((("\"style\":{" + styleParts.join(",")) + "}"));
+      }
+    }
+    return ((pairs.length > 0) ? (("{" + pairs.join(",")) + "}") : "null");
+  }
+
+  readBraced() {
+    this.pos = (this.pos + 1);
+    let depth = 1;
+    let content = "";
+    while (((this.pos < this.src.length) && (depth > 0))) {
+      const c = this.src[this.pos];
+      if ((c == "{")) {
+        depth = (depth + 1);
+      }
+      if ((c == "}")) {
+        depth = (depth - 1);
+        if ((depth == 0)) {
+          this.pos = (this.pos + 1);
+          break;
+        }
+      }
+      content = (content + c);
+      this.pos = (this.pos + 1);
+    }
+    return content.trim();
+  }
+
+  parseJsxChildren(tag) {
+    const children = [];
+    while ((this.pos < this.src.length)) {
+      if (((this.src[this.pos] == "<") && (this.src[(this.pos + 1)] == "/"))) {
+        break;
+      }
+      if ((this.src[this.pos] == "<")) {
+        const next = (this.src[(this.pos + 1)] ?? "");
+        if (((((next >= "a") && (next <= "z")) || ((next >= "A") && (next <= "Z"))) || (next == ">"))) {
+          children.push(this.parseJsxElement());
+          continue;
+        }
+      }
+      if ((this.src[this.pos] == "{")) {
+        const expr = this.readBraced();
+        if (expr.trim()) {
+          children.push(expr);
+        }
+        continue;
+      }
+      let text = "";
+      while ((this.pos < this.src.length)) {
+        const c = this.src[this.pos];
+        if (((c == "<") || (c == "{"))) {
+          break;
+        }
+        text = (text + c);
+        this.pos = (this.pos + 1);
+      }
+      const trimmed = text.replace(/\s+/g, " ").trim();
+      if (trimmed) {
+        children.push(JSON.stringify(trimmed));
+      }
+    }
+    return children;
+  }
+
+  expectClose(tag) {
+    if (((this.src[this.pos] == "<") && (this.src[(this.pos + 1)] == "/"))) {
+      this.pos = (this.pos + 2);
+      while (((this.pos < this.src.length) && (this.src[this.pos] != ">"))) {
+        this.pos = (this.pos + 1);
+      }
+      if ((this.src[this.pos] == ">")) {
+        this.pos = (this.pos + 1);
+      }
+    }
+  }
+
+  skipWs() {
+    while (((this.pos < this.src.length) && ((this.src[this.pos] == " ") || (this.src[this.pos] == "\t")))) {
+      this.pos = (this.pos + 1);
+    }
+  }
+
+}
+
+module.exports.JsxPreprocessor = JsxPreprocessor;
+function transformJsx(src, opts) {
+  const target = ((opts ?? {  }).target ?? "browser");
+  const proc = new JsxPreprocessor(src, 0, "", false);
+  const source = proc.transform();
+  const hasJsx = ((proc.hasJsx || src.includes("_fluxH")) || src.includes("_fluxCSS"));
+  const hHelper = ((target == "browser") ? FLUX_H_BROWSER : FLUX_H_SERVER);
+  const cssHelper = ((target == "browser") ? FLUX_CSS_BROWSER : FLUX_CSS_SERVER);
+  return { source, hasJsx, runtimeHelpers: (hHelper + cssHelper) };
+}
+module.exports.transformJsx = transformJsx;