@ohos-ports/stacksjs-stx 0.2.287-beta.0

package/dist/precompiler.d.ts

@@ -0,0 +1,43 @@
+import type { SourceMapV3 } from './source-maps';
+// Export singleton instance
+export declare const compiler: TemplateCompiler;
+/**
+ * Compilation options
+ */
+export declare interface CompileOptions {
+  filename?: string
+  mode?: CompileMode
+  optimize?: boolean
+  sourceMaps?: boolean
+  module?: 'esm' | 'cjs' | 'iife'
+  functionName?: string
+  includeRuntime?: boolean
+  dev?: boolean
+  inlineDirectives?: string[]
+}
+/**
+ * Compilation result
+ */
+export declare interface CompileResult {
+  code: string
+  map?: SourceMapV3
+  analysis: {
+    usedVariables: Set<string>
+    usedDirectives: Set<string>
+    usedComponents: Set<string>
+    isDynamic: boolean
+    hasSlots: boolean
+  }
+}
+/**
+ * Compilation mode
+ */
+export type CompileMode = 'ssr' | 'client' | 'universal';
+/**
+ * Template pre-compiler
+ */
+export declare class TemplateCompiler {
+  constructor();
+  compile(template: string, options?: CompileOptions): CompileResult;
+  compileFile(filePath: string, options?: CompileOptions): Promise<CompileResult>;
+}

package/dist/precompiler.js

@@ -0,0 +1,670 @@
+import {
+  isCommentNode,
+  isComponentNode,
+  isDirectiveNode,
+  isElementNode,
+  isExpressionNode,
+  isScriptNode,
+  isStyleNode,
+  isTextNode,
+  TemplateParser,
+  walkAST
+} from "./ast.js";
+import { SourceMapGenerator } from "./source-maps.js";
+
+export class TemplateCompiler {
+  parser;
+  constructor() {
+    this.parser = new TemplateParser;
+  }
+  compile(template, options = {}) {
+    const {
+      filename = "template.stx",
+      mode = "ssr",
+      optimize = !0,
+      sourceMaps = !0,
+      module = "esm",
+      functionName = "render",
+      dev = !1
+    } = options, ast = this.parser.parse(template, filename), ctx = this.createContext({
+      sourceFile: filename,
+      mode,
+      optimize,
+      dev,
+      sourceMaps
+    }), functionCode = this.generateRenderFunction(ast, ctx), result = {
+      code: this.wrapModule(functionCode, functionName, module, ctx),
+      analysis: {
+        usedVariables: ctx.usedVariables,
+        usedDirectives: ctx.usedDirectives,
+        usedComponents: ctx.usedComponents,
+        isDynamic: ctx.usedVariables.size > 0 || ctx.usedDirectives.size > 0,
+        hasSlots: ctx.hasSlots
+      }
+    };
+    if (sourceMaps && ctx.sourceMapGenerator)
+      result.map = ctx.sourceMapGenerator.toJSON();
+    return result;
+  }
+  async compileFile(filePath, options = {}) {
+    const template = await (await import("node:fs/promises")).readFile(filePath, "utf-8");
+    return this.compile(template, { ...options, filename: filePath });
+  }
+  createContext(options) {
+    return {
+      code: "",
+      indentLevel: 0,
+      sourceMapGenerator: options.sourceMaps ? new SourceMapGenerator("output.js", "") : void 0,
+      currentLine: 1,
+      currentColumn: 0,
+      sourceFile: options.sourceFile,
+      mode: options.mode,
+      optimize: options.optimize,
+      dev: options.dev,
+      usedVariables: new Set,
+      usedDirectives: new Set,
+      usedComponents: new Set,
+      hasSlots: !1,
+      varCounter: 0
+    };
+  }
+  generateRenderFunction(ast, ctx) {
+    this.analyzeAST(ast, ctx);
+    const bodyCode = this.generateNode(ast, ctx);
+    let fn = "";
+    fn += `function render(__ctx) {
+`;
+    fn += `  const __html = [];
+`;
+    fn += `  const __escape = (s) => String(s).replace(/[&<>"']/g, c => ({"&":"&amp;","<":"&lt;",">":"&gt;","\\"":"&quot;","'":"&#x27;"})[c]);
+`;
+    fn += `  const __push = (s) => __html.push(s);
+`;
+    if (ctx.usedVariables.size > 0) {
+      const vars = Array.from(ctx.usedVariables).join(", ");
+      fn += `  const { ${vars} } = __ctx;
+`;
+    }
+    fn += `
+`;
+    fn += bodyCode;
+    fn += `
+`;
+    fn += `  return __html.join('');
+`;
+    fn += "}";
+    return fn;
+  }
+  analyzeAST(ast, ctx) {
+    walkAST(ast, {
+      enter(node) {
+        if (isExpressionNode(node))
+          extractVariables(node.expression).forEach((v) => ctx.usedVariables.add(v));
+        else if (isDirectiveNode(node)) {
+          ctx.usedDirectives.add(node.name);
+          if (node.name === "slot")
+            ctx.hasSlots = !0;
+          if (node.params)
+            extractVariables(node.params).forEach((v) => ctx.usedVariables.add(v));
+        } else if (isComponentNode(node))
+          ctx.usedComponents.add(node.name);
+      }
+    });
+  }
+  generateNode(node, ctx) {
+    if (isTextNode(node))
+      return this.generateText(node.value, ctx);
+    else if (isExpressionNode(node))
+      return this.generateExpression(node, ctx);
+    else if (isDirectiveNode(node))
+      return this.generateDirective(node, ctx);
+    else if (isElementNode(node))
+      return this.generateElement(node, ctx);
+    else if (isComponentNode(node))
+      return this.generateComponent(node, ctx);
+    else if (isCommentNode(node)) {
+      if (ctx.dev && node.style === "html")
+        return this.generateText(`<!-- ${node.value} -->`, ctx);
+      return "";
+    } else if (isScriptNode(node))
+      return "";
+    else if (isStyleNode(node))
+      return this.generateStyle(node, ctx);
+    else if (node.type === "Document")
+      return node.children.map((child) => this.generateNode(child, ctx)).join("");
+    return "";
+  }
+  generateText(text, _ctx) {
+    if (!text)
+      return "";
+    return `  __push(${JSON.stringify(text)});
+`;
+  }
+  generateExpression(node, _ctx) {
+    const expr = node.expression.trim();
+    if (node.escaped)
+      return `  __push(__escape(${expr}));
+`;
+    else
+      return `  __push(${expr});
+`;
+  }
+  generateDirective(node, ctx) {
+    const { name, params, body } = node;
+    switch (name) {
+      case "if":
+        return this.generateIf(params, body, ctx);
+      case "unless":
+        return this.generateUnless(params, body, ctx);
+      case "foreach":
+        return this.generateForeach(params, body, ctx);
+      case "for":
+        return this.generateFor(params, body, ctx);
+      case "while":
+        return this.generateWhile(params, body, ctx);
+      case "isset":
+        return this.generateIsset(params, body, ctx);
+      case "empty":
+        return this.generateEmpty(params, body, ctx);
+      case "auth":
+        return this.generateAuth(body, ctx);
+      case "guest":
+        return this.generateGuest(body, ctx);
+      case "env":
+        return this.generateEnv(params, body, ctx);
+      case "switch":
+        return this.generateSwitch(params, body, ctx);
+      case "slot":
+        return this.generateSlot(params, body, ctx);
+      case "section":
+        return this.generateSection(params, body, ctx);
+      case "push":
+        return this.generatePush(params, body, ctx);
+      case "once":
+        return this.generateOnce(body, ctx);
+      case "js":
+      case "ts":
+        return this.generateScript(body, ctx);
+      default:
+        if (ctx.dev)
+          return `  __push('@${name}${params ? `(${params})` : ""}');
+`;
+        return "";
+    }
+  }
+  generateIf(condition, body, ctx) {
+    if (!condition || !body)
+      return "";
+    let code = `  if (${condition}) {
+`;
+    ctx.indentLevel++;
+    const parts = this.splitConditionalBody(body);
+    code += parts.ifBody.map((child) => this.generateNode(child, ctx)).join("");
+    for (const elseif of parts.elseifs) {
+      code += `  }
+else if (${elseif.condition}) {
+`;
+      code += elseif.body.map((child) => this.generateNode(child, ctx)).join("");
+    }
+    if (parts.elseBody.length > 0) {
+      code += `  }
+else {
+`;
+      code += parts.elseBody.map((child) => this.generateNode(child, ctx)).join("");
+    }
+    ctx.indentLevel--;
+    code += `  }
+`;
+    return code;
+  }
+  generateUnless(condition, body, ctx) {
+    if (!condition || !body)
+      return "";
+    let code = `  if (!(${condition})) {
+`;
+    code += body.map((child) => this.generateNode(child, ctx)).join("");
+    code += `  }
+`;
+    return code;
+  }
+  generateForeach(params, body, ctx) {
+    if (!params || !body)
+      return "";
+    const asMatch = params.match(/^\s*(\S+)\s+as\s+(\S+)(?:\s*=>\s*(\S+))?\s*$/), inMatch = params.match(/^\s*\(?([\w$]+)(?:,\s*([\w$]+))?\)?\s+in\s+(\S+)\s*$/);
+    let items, item, index = null;
+    if (asMatch) {
+      items = asMatch[1];
+      item = asMatch[3] || asMatch[2];
+      index = asMatch[3] ? asMatch[2] : null;
+    } else if (inMatch) {
+      items = inMatch[3];
+      item = inMatch[1];
+      index = inMatch[2] || null;
+    } else
+      return "";
+    ctx.usedVariables.add(items.split(".")[0]);
+    const loopVar = `__loop${ctx.varCounter++}`;
+    let code = `  const ${loopVar} = ${items} || [];
+`;
+    code += `  for (let __i = 0; __i < ${loopVar}.length; __i++) {
+`;
+    code += `    const ${item} = ${loopVar}[__i];
+`;
+    if (index)
+      code += `    const ${index} = __i;
+`;
+    code += body.map((child) => this.generateNode(child, ctx)).join("");
+    code += `  }
+`;
+    return code;
+  }
+  generateFor(params, body, ctx) {
+    if (!params || !body)
+      return "";
+    let code = `  for (${params}) {
+`;
+    code += body.map((child) => this.generateNode(child, ctx)).join("");
+    code += `  }
+`;
+    return code;
+  }
+  generateWhile(condition, body, ctx) {
+    if (!condition || !body)
+      return "";
+    let code = `  while (${condition}) {
+`;
+    code += body.map((child) => this.generateNode(child, ctx)).join("");
+    code += `  }
+`;
+    return code;
+  }
+  generateIsset(params, body, ctx) {
+    if (!params || !body)
+      return "";
+    let code = `  if (${params} !== undefined && ${params} !== null) {
+`;
+    code += body.map((child) => this.generateNode(child, ctx)).join("");
+    code += `  }
+`;
+    return code;
+  }
+  generateEmpty(params, body, ctx) {
+    if (!params || !body)
+      return "";
+    let code = `  if (!${params} || (Array.isArray(${params}) && ${params}.length === 0)) {
+`;
+    code += body.map((child) => this.generateNode(child, ctx)).join("");
+    code += `  }
+`;
+    return code;
+  }
+  generateAuth(body, ctx) {
+    if (!body)
+      return "";
+    ctx.usedVariables.add("$auth");
+    let code = `  if (__ctx.$auth?.user) {
+`;
+    code += body.map((child) => this.generateNode(child, ctx)).join("");
+    code += `  }
+`;
+    return code;
+  }
+  generateGuest(body, ctx) {
+    if (!body)
+      return "";
+    ctx.usedVariables.add("$auth");
+    let code = `  if (!__ctx.$auth?.user) {
+`;
+    code += body.map((child) => this.generateNode(child, ctx)).join("");
+    code += `  }
+`;
+    return code;
+  }
+  generateEnv(params, body, ctx) {
+    if (!params || !body)
+      return "";
+    ctx.usedVariables.add("$env");
+    let code = `  if (__ctx.$env === ${params}) {
+`;
+    code += body.map((child) => this.generateNode(child, ctx)).join("");
+    code += `  }
+`;
+    return code;
+  }
+  generateSwitch(params, body, ctx) {
+    if (!params || !body)
+      return "";
+    let code = `  switch (${params}) {
+`;
+    code += body.map((child) => this.generateNode(child, ctx)).join("");
+    code += `  }
+`;
+    return code;
+  }
+  generateSlot(params, body, ctx) {
+    const slotName = params?.replace(/['"]/g, "") || "default";
+    ctx.hasSlots = !0;
+    let code = `  if (__ctx.$slots?.['${slotName}']) {
+`;
+    code += `    __push(__ctx.$slots['${slotName}']());
+`;
+    code += "  }";
+    if (body && body.length > 0) {
+      code += ` else {
+`;
+      code += body.map((child) => this.generateNode(child, ctx)).join("");
+      code += "  }";
+    }
+    code += `
+`;
+    return code;
+  }
+  generateSection(params, body, ctx) {
+    if (!params || !body)
+      return "";
+    const sectionName = params.replace(/['"]/g, ""), sectionVar = `__section_${sectionName.replace(/\W/g, "_")}`;
+    let code = `  const ${sectionVar} = () => {
+`;
+    code += `    const __sectionHtml = [];
+`;
+    code += `    const __sectionPush = (s) => __sectionHtml.push(s);
+`;
+    code += body.map((child) => {
+      return this.generateNode(child, ctx).replace(/__push/g, "__sectionPush");
+    }).join("");
+    code += `    return __sectionHtml.join('');
+`;
+    code += `  };
+`;
+    code += `  __ctx.$sections = __ctx.$sections || {};
+`;
+    code += `  __ctx.$sections['${sectionName}'] = ${sectionVar};
+`;
+    return code;
+  }
+  generatePush(params, body, ctx) {
+    if (!params || !body)
+      return "";
+    const stackName = params.replace(/['"]/g, "");
+    let code = `  __ctx.$stacks = __ctx.$stacks || {};
+`;
+    code += `  __ctx.$stacks['${stackName}'] = __ctx.$stacks['${stackName}'] || [];
+`;
+    code += `  __ctx.$stacks['${stackName}'].push(() => {
+`;
+    code += `    const __stackHtml = [];
+`;
+    code += `    const __stackPush = (s) => __stackHtml.push(s);
+`;
+    code += body.map((child) => {
+      return this.generateNode(child, ctx).replace(/__push/g, "__stackPush");
+    }).join("");
+    code += `    return __stackHtml.join('');
+`;
+    code += `  });
+`;
+    return code;
+  }
+  generateOnce(body, ctx) {
+    if (!body)
+      return "";
+    const onceId = `__once_${ctx.varCounter++}`;
+    let code = `  if (!__ctx.$once?.has('${onceId}')) {
+`;
+    code += `    __ctx.$once = __ctx.$once || new Set();
+`;
+    code += `    __ctx.$once.add('${onceId}');
+`;
+    code += body.map((child) => this.generateNode(child, ctx)).join("");
+    code += `  }
+`;
+    return code;
+  }
+  generateScript(body, _ctx) {
+    if (!body)
+      return "";
+    return "";
+  }
+  generateStyle(node, _ctx) {
+    if (!node.content)
+      return "";
+    const content = node.content.trim();
+    if (node.scoped)
+      return `  __push('<style data-scoped>${content}</style>');
+`;
+    return `  __push('<style>${content}</style>');
+`;
+  }
+  generateElement(node, ctx) {
+    let code = "";
+    code += `  __push('<${node.tag}');
+`;
+    for (const attr of node.attributes)
+      code += this.generateAttribute(attr, ctx);
+    if (node.void)
+      code += `  __push('>');
+`;
+    else if (node.selfClosing && node.children.length === 0)
+      code += `  __push(' />');
+`;
+    else {
+      code += `  __push('>');
+`;
+      for (const child of node.children)
+        code += this.generateNode(child, ctx);
+      code += `  __push('</${node.tag}>');
+`;
+    }
+    return code;
+  }
+  generateAttribute(attr, ctx) {
+    const { name, value } = attr;
+    if (value === null)
+      return `  __push(' ${name}');
+`;
+    else if (typeof value === "string")
+      if (value.includes("{{") || value.includes("{!!")) {
+        const parts = this.parseAttributeValue(value, ctx);
+        return `  __push(' ${name}="' + ${parts} + '"');
+`;
+      } else
+        return `  __push(' ${name}="${value}"');
+`;
+    else if (isExpressionNode(value)) {
+      const expr = value.expression.trim();
+      if (value.escaped)
+        return `  __push(' ${name}="' + __escape(${expr}) + '"');
+`;
+      else
+        return `  __push(' ${name}="' + ${expr} + '"');
+`;
+    }
+    return "";
+  }
+  parseAttributeValue(value, ctx) {
+    const parts = [];
+    let lastIndex = 0;
+    const regex = /\{\{(.+?)\}\}|\{!!(.+?)!!\}/g;
+    let match = regex.exec(value);
+    while (match !== null) {
+      if (match.index > lastIndex)
+        parts.push(JSON.stringify(value.slice(lastIndex, match.index)));
+      if (match[1]) {
+        const expr = match[1].trim();
+        ctx.usedVariables.add(expr.split(/[.[(]/)[0]);
+        parts.push(`__escape(${expr})`);
+      } else if (match[2]) {
+        const expr = match[2].trim();
+        ctx.usedVariables.add(expr.split(/[.[(]/)[0]);
+        parts.push(`String(${expr})`);
+      }
+      lastIndex = match.index + match[0].length;
+      match = regex.exec(value);
+    }
+    if (lastIndex < value.length)
+      parts.push(JSON.stringify(value.slice(lastIndex)));
+    return parts.join(" + ");
+  }
+  generateComponent(node, ctx) {
+    const { name, attributes, children } = node;
+    ctx.usedComponents.add(name);
+    let propsCode = "{";
+    const propParts = [];
+    for (const attr of attributes)
+      if (attr.value === null)
+        propParts.push(`${attr.name}: true`);
+      else if (typeof attr.value === "string")
+        if (attr.name.startsWith(":")) {
+          const propName = attr.name.slice(1);
+          propParts.push(`${propName}: ${attr.value}`);
+        } else
+          propParts.push(`${attr.name}: ${JSON.stringify(attr.value)}`);
+      else if (isExpressionNode(attr.value))
+        propParts.push(`${attr.name}: ${attr.value.expression}`);
+    propsCode += propParts.join(", ");
+    propsCode += "}";
+    let slotsCode = "{}";
+    if (children.length > 0)
+      slotsCode = `{ default: () => { const __slotHtml = []; const __push = (s) => __slotHtml.push(s); ${children.map((child) => this.generateNode(child, ctx)).join("").replace(/^\s+/gm, "")} return __slotHtml.join(''); } }`;
+    return `  __push(await __ctx.$components['${name}'](${propsCode}, ${slotsCode}));
+`;
+  }
+  splitConditionalBody(body) {
+    const result = {
+      ifBody: [],
+      elseifs: [],
+      elseBody: []
+    };
+    let current = "if", currentElseif = null;
+    for (const node of body) {
+      if (isDirectiveNode(node)) {
+        if (node.name === "elseif") {
+          if (currentElseif)
+            result.elseifs.push(currentElseif);
+          currentElseif = { condition: node.params || "true", body: [] };
+          current = "elseif";
+          continue;
+        } else if (node.name === "else") {
+          if (currentElseif) {
+            result.elseifs.push(currentElseif);
+            currentElseif = null;
+          }
+          current = "else";
+          continue;
+        }
+      }
+      switch (current) {
+        case "if":
+          result.ifBody.push(node);
+          break;
+        case "elseif":
+          if (currentElseif)
+            currentElseif.body.push(node);
+          break;
+        case "else":
+          result.elseBody.push(node);
+          break;
+      }
+    }
+    if (currentElseif)
+      result.elseifs.push(currentElseif);
+    return result;
+  }
+  wrapModule(functionCode, functionName, format, _ctx) {
+    switch (format) {
+      case "esm":
+        return `${functionCode}
+
+export { render };
+export default render;
+`;
+      case "cjs":
+        return `${functionCode}
+
+module.exports = render;
+module.exports.render = render;
+`;
+      case "iife":
+        return `var ${functionName} = (function() {
+${functionCode}
+
+return render;
+})();
+`;
+      default:
+        return functionCode;
+    }
+  }
+}
+function extractVariables(expression) {
+  const variables = [], matches = expression.match(/\b[a-z_$]\w*\b/gi) || [], keywords = new Set([
+    "true",
+    "false",
+    "null",
+    "undefined",
+    "NaN",
+    "Infinity",
+    "if",
+    "else",
+    "for",
+    "while",
+    "do",
+    "switch",
+    "case",
+    "break",
+    "continue",
+    "return",
+    "function",
+    "const",
+    "let",
+    "var",
+    "class",
+    "new",
+    "this",
+    "typeof",
+    "instanceof",
+    "in",
+    "of",
+    "delete",
+    "void",
+    "try",
+    "catch",
+    "finally",
+    "throw",
+    "async",
+    "await",
+    "yield",
+    "import",
+    "export",
+    "default",
+    "from",
+    "as",
+    "Math",
+    "Date",
+    "Array",
+    "Object",
+    "String",
+    "Number",
+    "Boolean",
+    "RegExp",
+    "JSON",
+    "console",
+    "window",
+    "document",
+    "global",
+    "process"
+  ]);
+  for (const match of matches)
+    if (!keywords.has(match) && !variables.includes(match))
+      variables.push(match);
+  return variables;
+}
+function _addMapping(ctx, generated, original) {
+  if (ctx.sourceMapGenerator)
+    ctx.sourceMapGenerator.addMapping({
+      generated,
+      original,
+      source: ctx.sourceFile
+    });
+}
+export const compiler = new TemplateCompiler;