@xnoxs/flux-lang 3.1.1

package/src/self/jsx.flux

@@ -0,0 +1,430 @@
+// ============================================================
+//  Flux Self-Hosted JSX Preprocessor
+//  src/self/jsx.flux — written in Flux, compiled by stage-0
+//
+//  Transforms <jsx> syntax into _fluxH() calls before lexing.
+//  <div class="x">text</div>  →  _fluxH("div",{"class":"x"},"text")
+//  <br />                     →  _fluxH("br",null)
+//  <>...</>                   →  _fluxH("",null,...)
+// ============================================================
+
+val 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,
+}
+
+val 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"',
+}
+
+export val 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;
+}`
+
+export val 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}>`' + `;
+}`
+
+export val FLUX_CSS_BROWSER = `
+function _fluxCSS(css){const s=document.createElement("style");s.textContent=css;document.head.appendChild(s);return css;}`
+
+export val FLUX_CSS_SERVER = `
+function _fluxCSS(css){return css;}`
+
+export class JsxPreprocessor:
+  src: any
+  pos: int
+  out: any
+  hasJsx: bool
+
+  fn transform():
+    while self.pos < self.src.length:
+      self.scanTop()
+    self.hasJsx = self.out != self.src
+    return self.out
+
+  fn scanTop():
+    val c = self.src[self.pos]
+
+    // Line comment
+    if c == "/" and self.src[self.pos + 1] == "/":
+      val end_ = self.src.indexOf("\n", self.pos)
+      if end_ == -1:
+        self.out = self.out + self.src.slice(self.pos)
+        self.pos = self.src.length
+      else:
+        self.out = self.out + self.src.slice(self.pos, end_ + 1)
+        self.pos = end_ + 1
+      return
+
+    // Block comment
+    if c == "/" and self.src[self.pos + 1] == "*":
+      val end_ = self.src.indexOf("*/", self.pos + 2)
+      if end_ == -1:
+        self.out = self.out + self.src.slice(self.pos)
+        self.pos = self.src.length
+      else:
+        self.out = self.out + self.src.slice(self.pos, end_ + 2)
+        self.pos = end_ + 2
+      return
+
+    if c == '"':
+      self.passString('"')
+      return
+    if c == "'":
+      self.passString("'")
+      return
+    if c == "`":
+      self.passTemplateLit()
+      return
+
+    // Potential JSX open
+    if c == "<" and self.isJsxStart():
+      val jsxCode = self.parseJsxElement()
+      self.out = self.out + jsxCode
+      return
+
+    self.out = self.out + c
+    self.pos = self.pos + 1
+
+  fn isJsxStart():
+    val next = self.src[self.pos + 1] ?? ""
+    if next != ">" and not (next >= "a" and next <= "z") and not (next >= "A" and next <= "Z"):
+      return false
+    var i = self.pos - 1
+    while i >= 0 and (self.src[i] == " " or self.src[i] == "\t"):
+      i = i - 1
+    if i < 0: return true
+    val prev = self.src[i]
+    if '=([{,:>\n?'.includes(prev): return true
+    if /[a-z]/.test(prev):
+      var j = i
+      while j >= 0 and /[a-z]/.test(self.src[j]):
+        j = j - 1
+      val word = self.src.slice(j + 1, i + 1)
+      val exprKw = new Set(["return", "not", "and", "or", "val", "var", "await", "yield", "else", "in", "throw"])
+      if exprKw.has(word): return true
+    return false
+
+  fn passString(quote):
+    self.out = self.out + quote
+    self.pos = self.pos + 1
+    while self.pos < self.src.length:
+      val c = self.src[self.pos]
+      if c == "\\":
+        self.out = self.out + c + (self.src[self.pos + 1] ?? "")
+        self.pos = self.pos + 2
+        continue
+      if c == quote:
+        self.out = self.out + c
+        self.pos = self.pos + 1
+        return
+      self.out = self.out + c
+      self.pos = self.pos + 1
+
+  fn passTemplateLit():
+    self.out = self.out + "`"
+    self.pos = self.pos + 1
+    while self.pos < self.src.length:
+      val c = self.src[self.pos]
+      if c == "\\":
+        self.out = self.out + c + (self.src[self.pos + 1] ?? "")
+        self.pos = self.pos + 2
+        continue
+      if c == "`":
+        self.out = self.out + c
+        self.pos = self.pos + 1
+        return
+      self.out = self.out + c
+      self.pos = self.pos + 1
+
+  fn parseJsxElement():
+    self.pos = self.pos + 1  // consume '<'
+
+    // Fragment: <>...</>
+    if self.src[self.pos] == ">":
+      self.pos = self.pos + 1
+      val children = self.parseJsxChildren("")
+      self.expectClose("")
+      val childStr = children.length > 0 ? "," + children.join(",") : ""
+      return '_fluxH("",null' + childStr + ")"
+
+    val tag = self.readTagName()
+    val attrs = self.parseJsxAttrs()
+
+    // Self-closing
+    if self.src[self.pos] == "/" and self.src[self.pos + 1] == ">":
+      self.pos = self.pos + 2
+      return '_fluxH("' + tag + '",' + attrs + ")"
+
+    // Opening >
+    if self.src[self.pos] == ">":
+      self.pos = self.pos + 1
+      val children = self.parseJsxChildren(tag)
+      self.expectClose(tag)
+      val childStr = children.length > 0 ? "," + children.join(",") : ""
+      return '_fluxH("' + tag + '",' + attrs + childStr + ")"
+
+    return "<" + tag
+
+  fn readTagName():
+    var name = ""
+    while self.pos < self.src.length:
+      val c = self.src[self.pos]
+      if /[a-zA-Z0-9\-_\.]/.test(c):
+        name = name + c
+        self.pos = self.pos + 1
+      else:
+        break
+    return name
+
+  fn parseJsxAttrs():
+    self.skipWs()
+    val pairs      = []
+    val styleParts = []
+    var explicitStyle = null
+
+    while self.pos < self.src.length:
+      val c = self.src[self.pos]
+      if c == ">" or (c == "/" and self.src[self.pos + 1] == ">"): break
+      self.skipWs()
+      if not /[a-zA-Z_\-]/.test(self.src[self.pos] ?? ""): break
+
+      var attrName = ""
+      while self.pos < self.src.length and /[a-zA-Z0-9\-_:]/.test(self.src[self.pos]):
+        attrName = attrName + self.src[self.pos]
+        self.pos = self.pos + 1
+      self.skipWs()
+
+      // Boolean attribute
+      if self.src[self.pos] != "=":
+        val boolStyle = JSX_STYLE_BOOL_PROPS[attrName]
+        if boolStyle != undefined:
+          styleParts.push(boolStyle)
+        else:
+          pairs.push('"' + attrName + '":true')
+        continue
+
+      self.pos = self.pos + 1  // consume '='
+      self.skipWs()
+
+      val ch = self.src[self.pos]
+      var rawVal   = ""
+      var exprVal_ = ""
+
+      if ch == '"' or ch == "'":
+        val q = ch
+        self.pos = self.pos + 1
+        var v = ""
+        while self.pos < self.src.length and self.src[self.pos] != q:
+          if self.src[self.pos] == "\\":
+            v = v + self.src[self.pos] + self.src[self.pos + 1]
+            self.pos = self.pos + 2
+          else:
+            v = v + self.src[self.pos]
+            self.pos = self.pos + 1
+        self.pos = self.pos + 1  // close quote
+        rawVal = v
+      else if ch == '{':
+        exprVal_ = self.readBraced()
+      else:
+        val boolStyle = JSX_STYLE_BOOL_PROPS[attrName]
+        if boolStyle != undefined:
+          styleParts.push(boolStyle)
+        else:
+          pairs.push('"' + attrName + '":true')
+        self.skipWs()
+        continue
+
+      if rawVal != null and JSX_STYLE_VALUE_PROPS[attrName]:
+        val expanded = JSX_STYLE_VALUE_PROPS[attrName](JSON.stringify(rawVal))
+        styleParts.push(expanded)
+      else if exprVal_ != null and attrName == "style":
+        explicitStyle = exprVal_
+      else:
+        if rawVal != null:
+          pairs.push('"' + attrName + '":' + JSON.stringify(rawVal))
+        else:
+          pairs.push('"' + attrName + '":' + exprVal_)
+
+      self.skipWs()
+
+    // Build style entry
+    if styleParts.length > 0 or explicitStyle != null:
+      val utilObj = styleParts.length > 0 ? '{' + styleParts.join(',') + '}' : null
+      if explicitStyle != null and 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'
+
+  fn readBraced():
+    self.pos = self.pos + 1  // consume '{'
+    var depth = 1
+    var content = ""
+    while self.pos < self.src.length and depth > 0:
+      val c = self.src[self.pos]
+      if c == '{': depth = depth + 1
+      if c == '}':
+        depth = depth - 1
+        if depth == 0:
+          self.pos = self.pos + 1
+          break
+      content = content + c
+      self.pos = self.pos + 1
+    return content.trim()
+
+  fn parseJsxChildren(tag):
+    val children = []
+    while self.pos < self.src.length:
+      // End tag
+      if self.src[self.pos] == "<" and self.src[self.pos + 1] == "/": break
+
+      // Nested element
+      if self.src[self.pos] == "<":
+        val next = self.src[self.pos + 1] ?? ""
+        if (next >= "a" and next <= "z") or (next >= "A" and next <= "Z") or next == ">":
+          children.push(self.parseJsxElement())
+          continue
+
+      // Expression {expr}
+      if self.src[self.pos] == '{':
+        val expr = self.readBraced()
+        if expr.trim(): children.push(expr)
+        continue
+
+      // Text node
+      var text = ""
+      while self.pos < self.src.length:
+        val c = self.src[self.pos]
+        if c == "<" or c == '{': break
+        text = text + c
+        self.pos = self.pos + 1
+      val trimmed = text.replace(/\s+/g, " ").trim()
+      if trimmed: children.push(JSON.stringify(trimmed))
+
+    return children
+
+  fn expectClose(tag):
+    if self.src[self.pos] == "<" and self.src[self.pos + 1] == "/":
+      self.pos = self.pos + 2
+      while self.pos < self.src.length and self.src[self.pos] != ">":
+        self.pos = self.pos + 1
+      if self.src[self.pos] == ">": self.pos = self.pos + 1
+
+  fn skipWs():
+    while self.pos < self.src.length and (self.src[self.pos] == " " or self.src[self.pos] == "\t"):
+      self.pos = self.pos + 1
+
+export fn transformJsx(src, opts):
+  val target = (opts ?? {}).target ?? "browser"
+  val proc   = new JsxPreprocessor(src, 0, "", false)
+  val source = proc.transform()
+  val hasJsx = proc.hasJsx or src.includes("_fluxH") or src.includes("_fluxCSS")
+  val hHelper   = target == "browser" ? FLUX_H_BROWSER   : FLUX_H_SERVER
+  val cssHelper = target == "browser" ? FLUX_CSS_BROWSER : FLUX_CSS_SERVER
+  return { source, hasJsx, runtimeHelpers: hHelper + cssHelper }