@xnoxs/flux-lang 3.1.1

package/src/jsx.js

@@ -0,0 +1,480 @@
+'use strict';
+
+// ── Flux JSX Preprocessor ─────────────────────────────────────────────────────
+// Transforms JSX syntax in Flux source to _fluxH() calls before lexing.
+// <div class="x">text {expr}</div>  →  _fluxH("div",{"class":"x"},"text ",expr)
+// <br />                            →  _fluxH("br",null)
+// <>...</>                          →  _fluxH("",null,...)
+
+// ── JSX utility style props → inline style object ────────────────────────────
+// These prop names on JSX elements get compiled into the style={} attribute.
+// Value props:  bg="color"  p="20px"  radius="8px"  w="100%"  text="1rem" …
+// Bool props:   flex  grid  bold  italic  pointer  hidden  relative  absolute …
+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"',
+};
+
+// Set of all known style util prop names (for quick lookup)
+const ALL_STYLE_PROPS = new Set([
+  ...Object.keys(JSX_STYLE_VALUE_PROPS),
+  ...Object.keys(JSX_STYLE_BOOL_PROPS),
+]);
+
+class JsxPreprocessor {
+  constructor(src) {
+    this.src = src;
+    this.pos = 0;
+    this.out = '';
+  }
+
+  // ── Entry ─────────────────────────────────────────────────────
+  transform() {
+    while (this.pos < this.src.length) {
+      this.scanTop();
+    }
+    this.hasJsx = this.out !== this.src;
+    return this.out;
+  }
+
+  // ── Top-level scan: skip strings/comments, detect JSX ─────────
+  scanTop() {
+    const c = this.src[this.pos];
+
+    // Line comment
+    if (c === '/' && this.src[this.pos + 1] === '/') {
+      const end = this.src.indexOf('\n', this.pos);
+      if (end === -1) { this.out += this.src.slice(this.pos); this.pos = this.src.length; }
+      else { this.out += this.src.slice(this.pos, end + 1); this.pos = end + 1; }
+      return;
+    }
+
+    // Block comment
+    if (c === '/' && this.src[this.pos + 1] === '*') {
+      const end = this.src.indexOf('*/', this.pos + 2);
+      if (end === -1) { this.out += this.src.slice(this.pos); this.pos = this.src.length; }
+      else { this.out += this.src.slice(this.pos, end + 2); this.pos = end + 2; }
+      return;
+    }
+
+    // Double-quoted string (with possible interpolation)
+    if (c === '"') { this.passString('"'); return; }
+    if (c === "'") { this.passString("'"); return; }
+    if (c === '`') { this.passTemplateLit(); return; }
+
+    // Potential JSX open
+    if (c === '<' && this.isJsxStart()) {
+      const jsxCode = this.parseJsxElement();
+      this.out += jsxCode;
+      return;
+    }
+
+    this.out += c;
+    this.pos++;
+  }
+
+  // ── Heuristic: is '<' here in expression-start position? ──────
+  // Previous non-whitespace char must be = ( [ { , : > \n or end of keyword
+  isJsxStart() {
+    // Next char must be a letter (tag name) or > (fragment)
+    const next = this.src[this.pos + 1] || '';
+    if (!(next === '>' || (next >= 'a' && next <= 'z') || (next >= 'A' && next <= 'Z'))) return false;
+
+    // Scan back past spaces/tabs (not newlines — they're significant)
+    let i = this.pos - 1;
+    while (i >= 0 && (this.src[i] === ' ' || this.src[i] === '\t')) i--;
+    if (i < 0) return true;
+
+    const prev = this.src[i];
+
+    // Obvious expression-start punctuation (? for ternary: cond ? <jsx> : ...)
+    if ('=([{,:>\n?'.includes(prev)) return true;
+
+    // Check if the previous token is a keyword that precedes an expression:
+    // return, not, and, or, val, var, in, await, yield, else
+    if (/[a-z]/.test(prev)) {
+      let j = i;
+      while (j >= 0 && /[a-z]/.test(this.src[j])) j--;
+      const word = this.src.slice(j + 1, i + 1);
+      const exprKeywords = new Set(['return','not','and','or','val','var','await','yield','else','in','throw']);
+      if (exprKeywords.has(word)) return true;
+    }
+
+    return false;
+  }
+
+  // ── Pass-through string literal ────────────────────────────────
+  passString(quote) {
+    this.out += quote;
+    this.pos++;
+    while (this.pos < this.src.length) {
+      const c = this.src[this.pos];
+      if (c === '\\') { this.out += c + (this.src[this.pos + 1] || ''); this.pos += 2; continue; }
+      if (c === quote) { this.out += c; this.pos++; return; }
+      this.out += c; this.pos++;
+    }
+  }
+
+  // ── Pass-through template literal ─────────────────────────────
+  passTemplateLit() {
+    this.out += '`'; this.pos++;
+    while (this.pos < this.src.length) {
+      const c = this.src[this.pos];
+      if (c === '\\') { this.out += c + (this.src[this.pos + 1] || ''); this.pos += 2; continue; }
+      if (c === '`') { this.out += c; this.pos++; return; }
+      this.out += c; this.pos++;
+    }
+  }
+
+  // ── Parse a full JSX element, return Flux/JS source string ────
+  parseJsxElement() {
+    this.pos++; // consume '<'
+
+    // Fragment: <>...</>
+    if (this.src[this.pos] === '>') {
+      this.pos++;
+      const children = this.parseJsxChildren('');
+      this.expectClose('');
+      const childStr = children.length ? ',' + children.join(',') : '';
+      return `_fluxH("",null${childStr})`;
+    }
+
+    const tag = this.readTagName();
+    const attrs = this.parseJsxAttrs();
+
+    // Self-closing
+    if (this.src[this.pos] === '/' && this.src[this.pos + 1] === '>') {
+      this.pos += 2;
+      return `_fluxH("${tag}",${attrs})`;
+    }
+
+    // Opening close >
+    if (this.src[this.pos] === '>') {
+      this.pos++;
+      const children = this.parseJsxChildren(tag);
+      this.expectClose(tag);
+      const childStr = children.length ? ',' + children.join(',') : '';
+      return `_fluxH("${tag}",${attrs}${childStr})`;
+    }
+
+    // Fallback — not valid JSX, pass through
+    return `<${tag}`;
+  }
+
+  // ── Read tag/component name ────────────────────────────────────
+  readTagName() {
+    let name = '';
+    while (this.pos < this.src.length) {
+      const c = this.src[this.pos];
+      if (/[a-zA-Z0-9\-_\.]/.test(c)) { name += c; this.pos++; }
+      else break;
+    }
+    return name;
+  }
+
+  // ── Parse attributes → JS object literal string ───────────────
+  // Also handles utility style props: bg="…" p="…" flex bold …
+  parseJsxAttrs() {
+    this.skipWs();
+    const pairs      = [];   // regular attr pairs: "name":value
+    const styleParts = [];   // accumulated style object key:value pairs
+    let   explicitStyle = null; // content of explicit style={…} if present
+
+    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;
+
+      // Read attr name (allow - in names for data-*, aria-*, and util props like min-w)
+      let attrName = '';
+      while (this.pos < this.src.length && /[a-zA-Z0-9\-_:]/.test(this.src[this.pos])) {
+        attrName += this.src[this.pos++];
+      }
+      this.skipWs();
+
+      // ── No value: boolean attr OR boolean style util ──────────
+      if (this.src[this.pos] !== '=') {
+        if (JSX_STYLE_BOOL_PROPS[attrName] !== undefined) {
+          // Boolean style util prop
+          styleParts.push(JSX_STYLE_BOOL_PROPS[attrName]);
+        } else {
+          pairs.push(`"${attrName}":true`);
+        }
+        continue;
+      }
+
+      this.pos++; // consume '='
+      this.skipWs();
+
+      const ch = this.src[this.pos];
+      let   rawVal = null; // string value (unquoted)
+      let   exprVal = null; // expression value (JS expr string)
+
+      if (ch === '"' || ch === "'") {
+        const q = ch; this.pos++;
+        let val = '';
+        while (this.pos < this.src.length && this.src[this.pos] !== q) {
+          if (this.src[this.pos] === '\\') { val += this.src[this.pos] + this.src[this.pos + 1]; this.pos += 2; }
+          else { val += this.src[this.pos++]; }
+        }
+        this.pos++; // close quote
+        rawVal = val;
+      } else if (ch === '{') {
+        exprVal = this.readBraced();
+      } else {
+        // fallback boolean
+        if (JSX_STYLE_BOOL_PROPS[attrName] !== undefined) {
+          styleParts.push(JSX_STYLE_BOOL_PROPS[attrName]);
+        } else {
+          pairs.push(`"${attrName}":true`);
+        }
+        this.skipWs();
+        continue;
+      }
+
+      // ── Route to style util or regular attr ───────────────────
+      if (rawVal !== null && JSX_STYLE_VALUE_PROPS[attrName]) {
+        // Utility value prop: bg="…" p="…" radius="…" …
+        const expanded = JSX_STYLE_VALUE_PROPS[attrName](JSON.stringify(rawVal));
+        styleParts.push(expanded);
+      } else if (exprVal !== null && attrName === 'style') {
+        // Explicit style={…} — capture for later merging
+        explicitStyle = exprVal;
+      } else {
+        // Regular attr
+        if (rawVal !== null) {
+          pairs.push(`"${attrName}":${JSON.stringify(rawVal)}`);
+        } else {
+          pairs.push(`"${attrName}":${exprVal}`);
+        }
+      }
+
+      this.skipWs();
+    }
+
+    // ── Build style entry (merge explicit + utility) ──────────
+    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 ? `{${pairs.join(',')}}` : 'null';
+  }
+
+  // ── Read {…} balanced braces, return inner content ────────────
+  readBraced() {
+    this.pos++; // consume '{'
+    let depth = 1, content = '';
+    while (this.pos < this.src.length && depth > 0) {
+      const c = this.src[this.pos];
+      if (c === '{') depth++;
+      if (c === '}') { depth--; if (depth === 0) { this.pos++; break; } }
+      content += c; this.pos++;
+    }
+    return content.trim();
+  }
+
+  // ── Parse JSX children until </tag> ───────────────────────────
+  parseJsxChildren(tag) {
+    const children = [];
+
+    while (this.pos < this.src.length) {
+      // End tag
+      if (this.src[this.pos] === '<' && this.src[this.pos + 1] === '/') break;
+
+      // Nested element
+      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;
+        }
+      }
+
+      // Expression interpolation {expr}
+      if (this.src[this.pos] === '{') {
+        const expr = this.readBraced();
+        if (expr.trim()) children.push(expr);
+        continue;
+      }
+
+      // Text node
+      let text = '';
+      while (this.pos < this.src.length) {
+        const c = this.src[this.pos];
+        if (c === '<' || c === '{') break;
+        text += c; this.pos++;
+      }
+      const trimmed = text.replace(/\s+/g, ' ').trim();
+      if (trimmed) children.push(JSON.stringify(trimmed));
+    }
+
+    return children;
+  }
+
+  // ── Expect and consume </tag> ──────────────────────────────────
+  expectClose(tag) {
+    // Consume </tagName>
+    if (this.src[this.pos] === '<' && this.src[this.pos + 1] === '/') {
+      this.pos += 2;
+      // Skip tag name
+      while (this.pos < this.src.length && this.src[this.pos] !== '>') this.pos++;
+      if (this.src[this.pos] === '>') this.pos++;
+    }
+  }
+
+  // ── Skip whitespace (not newlines) ────────────────────────────
+  skipWs() {
+    while (this.pos < this.src.length && (this.src[this.pos] === ' ' || this.src[this.pos] === '\t')) this.pos++;
+  }
+}
+
+// ── _fluxH runtime helper (browser) ──────────────────────────────────────────
+const FLUX_H_BROWSER = `
+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;
+}`;
+
+// ── _fluxH runtime helper (server/Node.js) ───────────────────────────────────
+const FLUX_H_SERVER = `
+function _fluxH(tag,props,...children){
+  const VOID=new Set(["area","base","br","col","embed","hr","img","input","link","meta","param","source","track","wbr"]);
+  if(tag==="")return children.flat(Infinity).map(c=>c==null?"":String(c)).join("");
+  let attrs="";
+  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}\`;}}
+  const inner=children.flat(Infinity).map(c=>c==null?"":String(c)).join("");
+  if(VOID.has(tag))return\`<\${tag}\${attrs}>\`;
+  return\`<\${tag}\${attrs}>\${inner}</\${tag}>\`;
+}`;
+
+// ── _fluxCSS helper (inject <style> tag in browser) ──────────────────────────
+const FLUX_CSS_BROWSER = `
+function _fluxCSS(css){const s=document.createElement("style");s.textContent=css;document.head.appendChild(s);return css;}`;
+
+const FLUX_CSS_SERVER = `
+function _fluxCSS(css){return css;}`;
+
+/**
+ * Transform Flux source with JSX syntax into plain Flux source.
+ * @param {string} src  - raw Flux source (may contain JSX)
+ * @param {object} opts - { target: 'browser' | 'server' }
+ * @returns {{ source: string, hasJsx: boolean, runtimeHelpers: string }}
+ */
+function transformJsx(src, opts = {}) {
+  const target  = opts.target || 'browser';
+  const proc    = new JsxPreprocessor(src);
+  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, JsxPreprocessor, FLUX_H_BROWSER, FLUX_H_SERVER, FLUX_CSS_BROWSER, FLUX_CSS_SERVER };