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

package/dist/visual-editor.js

@@ -0,0 +1,735 @@
+const DIRECTIVE_CATEGORIES = {
+  if: "control-flow",
+  else: "control-flow",
+  elseif: "control-flow",
+  unless: "control-flow",
+  switch: "control-flow",
+  case: "control-flow",
+  default: "control-flow",
+  for: "loop",
+  foreach: "loop",
+  forelse: "loop",
+  while: "loop",
+  empty: "loop",
+  break: "loop",
+  continue: "loop",
+  extends: "layout",
+  section: "layout",
+  yield: "layout",
+  parent: "layout",
+  include: "layout",
+  includeIf: "layout",
+  includeWhen: "layout",
+  includeFirst: "layout",
+  once: "layout",
+  push: "layout",
+  prepend: "layout",
+  stack: "layout",
+  component: "component",
+  slot: "component",
+  props: "component",
+  webcomponent: "component",
+  auth: "auth",
+  guest: "auth",
+  can: "auth",
+  cannot: "auth",
+  role: "auth",
+  hasRole: "auth",
+  hasAnyRole: "auth",
+  csrf: "form",
+  method: "form",
+  error: "form",
+  old: "form",
+  input: "form",
+  textarea: "form",
+  select: "form",
+  checkbox: "form",
+  radio: "form",
+  meta: "seo",
+  title: "seo",
+  seo: "seo",
+  jsonld: "seo",
+  canonical: "seo",
+  translate: "i18n",
+  lang: "i18n",
+  choice: "i18n"
+}, DIRECTIVE_ICONS = {
+  "control-flow": "symbol-branch",
+  loop: "symbol-loop",
+  layout: "symbol-structure",
+  component: "symbol-class",
+  auth: "shield",
+  form: "symbol-field",
+  seo: "search",
+  i18n: "globe",
+  custom: "symbol-misc"
+};
+export function getTemplateOutline(template) {
+  const root = {
+    type: "document",
+    name: "document",
+    label: "Document",
+    range: { start: 0, end: template.length, line: 1, column: 1 },
+    children: []
+  }, stack = [root];
+  let pos = 0, line = 1, column = 1;
+  const updatePosition = (char) => {
+    if (char === `
+`) {
+      line++;
+      column = 1;
+    } else
+      column++;
+    pos++;
+  }, getPosition = () => ({ start: pos, end: pos, line, column });
+  while (pos < template.length) {
+    const remaining = template.slice(pos), directiveMatch = remaining.match(/^@(\w+)(?:\s*\(([^)]*)\))?/);
+    if (directiveMatch) {
+      const [full, name, params] = directiveMatch, category = DIRECTIVE_CATEGORIES[name] || "custom";
+      if (name.startsWith("end")) {
+        const baseName = name.slice(3), parent = stack[stack.length - 1];
+        if (parent.name === baseName && stack.length > 1) {
+          parent.range.end = pos + full.length;
+          stack.pop();
+        }
+      } else {
+        const isClosable = hasEndTag(name), node = {
+          type: "directive",
+          name,
+          label: `@${name}${params ? `(${truncate(params, 30)})` : ""}`,
+          range: getPosition(),
+          children: [],
+          directiveCategory: category,
+          isClosable,
+          icon: DIRECTIVE_ICONS[category],
+          description: params
+        };
+        stack[stack.length - 1].children.push(node);
+        if (isClosable)
+          stack.push(node);
+      }
+      for (const char of full)
+        updatePosition(char);
+      continue;
+    }
+    const componentMatch = remaining.match(/^<([A-Z][A-Za-z0-9]+)([^>]*)>/);
+    if (componentMatch) {
+      const [full, name, attrs] = componentMatch, node = {
+        type: "component",
+        name,
+        label: `<${name}>`,
+        range: getPosition(),
+        children: [],
+        attributes: parseSimpleAttributes(attrs),
+        icon: "symbol-class",
+        isClosable: !full.endsWith("/>")
+      };
+      stack[stack.length - 1].children.push(node);
+      if (node.isClosable)
+        stack.push(node);
+      for (const char of full)
+        updatePosition(char);
+      continue;
+    }
+    const componentCloseMatch = remaining.match(/^<\/([A-Z][A-Za-z0-9]+)>/);
+    if (componentCloseMatch) {
+      const [full, name] = componentCloseMatch, parent = stack[stack.length - 1];
+      if (parent.name === name && parent.type === "component" && stack.length > 1) {
+        parent.range.end = pos + full.length;
+        stack.pop();
+      }
+      for (const char of full)
+        updatePosition(char);
+      continue;
+    }
+    const elementMatch = remaining.match(/^<([a-z][a-z0-9-]*)([^>]*)>/i);
+    if (elementMatch) {
+      const [full, tag, attrs] = elementMatch, isSelfClosing = full.endsWith("/>") || isVoidElement(tag), node = {
+        type: "element",
+        name: tag,
+        label: `<${tag}>`,
+        range: getPosition(),
+        children: [],
+        attributes: parseSimpleAttributes(attrs),
+        isClosable: !isSelfClosing
+      };
+      stack[stack.length - 1].children.push(node);
+      if (node.isClosable)
+        stack.push(node);
+      for (const char of full)
+        updatePosition(char);
+      continue;
+    }
+    const elementCloseMatch = remaining.match(/^<\/([a-z][a-z0-9-]*)>/i);
+    if (elementCloseMatch) {
+      const [full, tag] = elementCloseMatch, parent = stack[stack.length - 1];
+      if (parent.name === tag && parent.type === "element" && stack.length > 1) {
+        parent.range.end = pos + full.length;
+        stack.pop();
+      }
+      for (const char of full)
+        updatePosition(char);
+      continue;
+    }
+    const exprMatch = remaining.match(/^\{\{([^}]+)\}\}/);
+    if (exprMatch) {
+      const [full, expr] = exprMatch, node = {
+        type: "expression",
+        name: "expression",
+        label: `{{ ${truncate(expr.trim(), 30)} }}`,
+        range: getPosition(),
+        children: [],
+        icon: "symbol-variable"
+      };
+      stack[stack.length - 1].children.push(node);
+      for (const char of full)
+        updatePosition(char);
+      continue;
+    }
+    const scriptMatch = remaining.match(/^<script([^>]*)>/);
+    if (scriptMatch) {
+      const [full] = scriptMatch, node = {
+        type: "script",
+        name: "script",
+        label: "<script>",
+        range: getPosition(),
+        children: [],
+        icon: "symbol-event",
+        isClosable: !0
+      };
+      stack[stack.length - 1].children.push(node);
+      stack.push(node);
+      for (const char of full)
+        updatePosition(char);
+      continue;
+    }
+    if (remaining.startsWith("</script>")) {
+      const full = "</script>", parent = stack[stack.length - 1];
+      if (parent.type === "script" && stack.length > 1) {
+        parent.range.end = pos + full.length;
+        stack.pop();
+      }
+      for (const char of full)
+        updatePosition(char);
+      continue;
+    }
+    const styleMatch = remaining.match(/^<style([^>]*)>/);
+    if (styleMatch) {
+      const [full] = styleMatch, node = {
+        type: "style",
+        name: "style",
+        label: "<style>",
+        range: getPosition(),
+        children: [],
+        icon: "symbol-color",
+        isClosable: !0
+      };
+      stack[stack.length - 1].children.push(node);
+      stack.push(node);
+      for (const char of full)
+        updatePosition(char);
+      continue;
+    }
+    if (remaining.startsWith("</style>")) {
+      const full = "</style>", parent = stack[stack.length - 1];
+      if (parent.type === "style" && stack.length > 1) {
+        parent.range.end = pos + full.length;
+        stack.pop();
+      }
+      for (const char of full)
+        updatePosition(char);
+      continue;
+    }
+    const commentMatch = remaining.match(/^\{\{--([^}]*?)--\}\}/);
+    if (commentMatch) {
+      const [full, content] = commentMatch, node = {
+        type: "comment",
+        name: "comment",
+        label: `{{-- ${truncate(content.trim(), 30)} --}}`,
+        range: getPosition(),
+        children: [],
+        icon: "comment"
+      };
+      stack[stack.length - 1].children.push(node);
+      for (const char of full)
+        updatePosition(char);
+      continue;
+    }
+    updatePosition(template[pos]);
+  }
+  return root;
+}
+export function analyzeVisualEditorTemplate(template) {
+  return analyzeTemplateContentImpl(template);
+}
+export function analyzeTemplateContent(template) {
+  return analyzeTemplateContentImpl(template);
+}
+function analyzeTemplateContentImpl(template) {
+  const variables = [], components = [], directives = [], slots = [], sections = [], scripts = [], styles = [];
+  let layout;
+  const exprRegex = /\{\{\s*([^}]+?)\s*\}\}/g, exprMatches = template.matchAll(exprRegex);
+  for (const match of exprMatches) {
+    const varMatch = match[1].match(/^([a-z_$][\w$]*)/i);
+    if (varMatch) {
+      const lineNum = getLineNumber(template, match.index);
+      variables.push({
+        name: varMatch[1],
+        line: lineNum,
+        column: getColumnNumber(template, match.index),
+        context: "expression"
+      });
+    }
+  }
+  const directiveRegex = /@(\w+)(?:\s*\(([^)]*)\))?/g, directiveMatches = template.matchAll(directiveRegex);
+  for (const match of directiveMatches) {
+    const name = match[1], params = match[2], lineNum = getLineNumber(template, match.index);
+    if (name === "extends" && params)
+      layout = {
+        extends: params.replace(/['"]/g, ""),
+        line: lineNum,
+        sections: []
+      };
+    else if (name === "section" && params) {
+      const sectionName = params.replace(/['"]/g, "").split(",")[0].trim();
+      sections.push({
+        name: sectionName,
+        line: lineNum,
+        content: ""
+      });
+      if (layout)
+        layout.sections.push(sectionName);
+    } else if (name === "slot")
+      slots.push({
+        name: params ? params.replace(/['"]/g, "") : "default",
+        line: lineNum,
+        isNamed: !!params
+      });
+    else if (name === "component" && params) {
+      const componentName = params.replace(/['"]/g, "").split(",")[0].trim();
+      components.push({
+        name: componentName,
+        line: lineNum,
+        props: {},
+        hasSlot: !1
+      });
+    }
+    directives.push({
+      name,
+      category: DIRECTIVE_CATEGORIES[name] || "custom",
+      line: lineNum,
+      params,
+      hasEndTag: hasEndTag(name)
+    });
+  }
+  const componentRegex = /<([A-Z][A-Za-z0-9]+)([^>]*)>/g, componentMatches = template.matchAll(componentRegex);
+  for (const match of componentMatches) {
+    const name = match[1], attrsStr = match[2], lineNum = getLineNumber(template, match.index), closeTagPos = template.indexOf(`</${name}>`, match.index), hasSlot = closeTagPos !== -1 && template.slice(match.index + match[0].length, closeTagPos).trim().length > 0;
+    components.push({
+      name,
+      line: lineNum,
+      props: parseSimpleAttributes(attrsStr),
+      hasSlot
+    });
+  }
+  const scriptRegex = /<script([^>]*)>([\s\S]*?)<\/script>/g, scriptMatches = template.matchAll(scriptRegex);
+  for (const match of scriptMatches) {
+    const attrs = match[1], content = match[2], lineNum = getLineNumber(template, match.index), isTS = attrs.includes('lang="ts"') || attrs.includes("lang='ts'"), exports = [], exportRegex = /export\s+(?:const|let|var|function|class)\s+(\w+)/g, exportMatches = content.matchAll(exportRegex);
+    for (const exportMatch of exportMatches)
+      exports.push(exportMatch[1]);
+    scripts.push({
+      type: isTS ? "typescript" : "javascript",
+      line: lineNum,
+      content,
+      exports
+    });
+  }
+  const styleRegex = /<style([^>]*)>([\s\S]*?)<\/style>/g, styleMatches = template.matchAll(styleRegex);
+  for (const match of styleMatches) {
+    const attrs = match[1], content = match[2], lineNum = getLineNumber(template, match.index);
+    let type = "css";
+    if (attrs.includes('lang="scss"') || attrs.includes("lang='scss'"))
+      type = "scss";
+    if (attrs.includes('lang="less"') || attrs.includes("lang='less'"))
+      type = "less";
+    styles.push({
+      type,
+      line: lineNum,
+      content,
+      scoped: attrs.includes("scoped")
+    });
+  }
+  const metrics = calculateMetrics(template, directives, components, variables);
+  return {
+    variables,
+    components,
+    directives,
+    slots,
+    sections,
+    scripts,
+    styles,
+    layout,
+    metrics
+  };
+}
+function calculateMetrics(template, directives, components, variables) {
+  const lines = template.split(`
+`).length, characters = template.length;
+  let maxDepth = 0, currentDepth = 0;
+  for (const dir of directives)
+    if (dir.hasEndTag && !dir.name.startsWith("end")) {
+      currentDepth++;
+      maxDepth = Math.max(maxDepth, currentDepth);
+    } else if (dir.name.startsWith("end"))
+      currentDepth--;
+  const complexity = 1 + directives.filter((d) => d.category === "control-flow" || d.category === "loop").length;
+  return {
+    lines,
+    characters,
+    maxNestingDepth: maxDepth,
+    directiveCount: directives.length,
+    componentCount: components.length,
+    expressionCount: variables.length,
+    complexity
+  };
+}
+export async function generatePreview(template, options = {}) {
+  const {
+    context = {},
+    includeStyles = !0,
+    includeScripts = !1,
+    wrapInDocument = !0,
+    baseUrl = "",
+    customCss = ""
+  } = options;
+  let preview = template;
+  preview = preview.replace(/\{\{\s*([^}]+?)\s*\}\}/g, (_, expr) => {
+    const varName = expr.trim().split(".")[0].split("[")[0];
+    if (varName in context) {
+      const value = context[varName];
+      return typeof value === "object" ? JSON.stringify(value) : String(value);
+    }
+    return `<span class="stx-preview-placeholder">${expr}</span>`;
+  });
+  preview = preview.replace(/@(\w+)(?:\s*\([^)]*\))?/g, (match, name) => {
+    if (name.startsWith("end"))
+      return "";
+    return `<span class="stx-preview-directive" data-directive="${name}">${match}</span>`;
+  });
+  if (!includeScripts)
+    preview = preview.replace(/<script[\s\S]*?<\/script>/gi, "");
+  let styles = "";
+  if (includeStyles) {
+    const styleMatches = preview.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/gi);
+    for (const match of styleMatches)
+      styles += match[1];
+    preview = preview.replace(/<style[\s\S]*?<\/style>/gi, "");
+  }
+  if (wrapInDocument)
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>STX Preview</title>
+  ${baseUrl ? `<base href="${baseUrl}">` : ""}
+  <style>
+    .stx-preview-placeholder {
+      background: #fff3cd;
+      padding: 2px 4px;
+      border-radius: 2px;
+      font-family: monospace;
+      font-size: 0.9em;
+    }
+    .stx-preview-directive {
+      background: #d1ecf1;
+      padding: 2px 4px;
+      border-radius: 2px;
+      font-family: monospace;
+      font-size: 0.9em;
+    }
+    ${customCss}
+    ${styles}
+  </style>
+</head>
+<body>
+  ${preview}
+</body>
+</html>`;
+  return preview;
+}
+export function getDefaultPalette() {
+  return [
+    {
+      name: "extends",
+      displayName: "Use Layout",
+      category: "Layout",
+      description: "Use a layout template",
+      icon: "symbol-structure",
+      snippet: `@layout('$1')
+
+@section('content')
+  $0
+@endsection`
+    },
+    {
+      name: "section",
+      displayName: "Section",
+      category: "Layout",
+      description: "Define a section within a layout",
+      icon: "symbol-structure",
+      snippet: `@section('$1')
+  $0
+@endsection`
+    },
+    {
+      name: "include",
+      displayName: "Include Partial",
+      category: "Layout",
+      description: "Include another template",
+      icon: "file-add",
+      snippet: "@include('$1')"
+    },
+    {
+      name: "if",
+      displayName: "If Block",
+      category: "Control Flow",
+      description: "Conditional rendering",
+      icon: "symbol-branch",
+      snippet: `@if($1)
+  $0
+@endif`
+    },
+    {
+      name: "if-else",
+      displayName: "If-Else Block",
+      category: "Control Flow",
+      description: "Conditional with else branch",
+      icon: "symbol-branch",
+      snippet: `@if($1)
+  $2
+@else
+  $0
+@endif`
+    },
+    {
+      name: "switch",
+      displayName: "Switch Block",
+      category: "Control Flow",
+      description: "Switch statement for multiple conditions",
+      icon: "symbol-branch",
+      snippet: `@switch($1)
+  @case($2)
+    $3
+    @break
+  @default
+    $0
+@endswitch`
+    },
+    {
+      name: "foreach",
+      displayName: "For Each Loop",
+      category: "Loops",
+      description: "Iterate over a collection",
+      icon: "symbol-loop",
+      snippet: `@foreach($1 as $2)
+  $0
+@endforeach`
+    },
+    {
+      name: "forelse",
+      displayName: "For Else Loop",
+      category: "Loops",
+      description: "Loop with empty state",
+      icon: "symbol-loop",
+      snippet: `@forelse($1 as $2)
+  $3
+@empty
+  $0
+@endforelse`
+    },
+    {
+      name: "for",
+      displayName: "For Loop",
+      category: "Loops",
+      description: "Traditional for loop",
+      icon: "symbol-loop",
+      snippet: `@for($1 = 0; $1 < $2; $1++)
+  $0
+@endfor`
+    },
+    {
+      name: "component",
+      displayName: "Component",
+      category: "Components",
+      description: "Include a reusable component",
+      icon: "symbol-class",
+      snippet: `@component('$1')
+  $0
+@endcomponent`
+    },
+    {
+      name: "slot",
+      displayName: "Slot",
+      category: "Components",
+      description: "Define slot content placeholder",
+      icon: "symbol-class",
+      snippet: `@slot('$1')
+  $0
+@endslot`
+    },
+    {
+      name: "csrf",
+      displayName: "CSRF Token",
+      category: "Forms",
+      description: "Insert CSRF protection token",
+      icon: "shield",
+      snippet: "@csrf"
+    },
+    {
+      name: "error",
+      displayName: "Error Display",
+      category: "Forms",
+      description: "Display validation error",
+      icon: "error",
+      snippet: `@error('$1')
+  <span class="error">{{ \\$message }}</span>
+@enderror`
+    },
+    {
+      name: "auth",
+      displayName: "Auth Check",
+      category: "Auth",
+      description: "Show content for authenticated users",
+      icon: "shield",
+      snippet: `@auth
+  $0
+@endauth`
+    },
+    {
+      name: "guest",
+      displayName: "Guest Check",
+      category: "Auth",
+      description: "Show content for guests",
+      icon: "shield",
+      snippet: `@guest
+  $0
+@endguest`
+    },
+    {
+      name: "meta",
+      displayName: "Meta Tag",
+      category: "SEO",
+      description: "Insert meta tag",
+      icon: "search",
+      snippet: "@meta('$1', '$2')"
+    },
+    {
+      name: "title",
+      displayName: "Page Title",
+      category: "SEO",
+      description: "Set page title",
+      icon: "search",
+      snippet: "@title('$1')"
+    },
+    {
+      name: "translate",
+      displayName: "Translation",
+      category: "i18n",
+      description: "Translate a string",
+      icon: "globe",
+      snippet: "@translate('$1')"
+    }
+  ];
+}
+export function insertPaletteItem(item, position, indentation = "") {
+  const content = item.snippet.split(`
+`).map((line, i) => i === 0 ? line : indentation + line).join(`
+`), cursorMatch = content.match(/\$\d/);
+  let cursorOffset = content.length;
+  if (cursorMatch)
+    cursorOffset = content.indexOf(cursorMatch[0]);
+  const newContent = content.replace(/\$\d/g, ""), beforeCursor = newContent.slice(0, cursorOffset), cursorLine = beforeCursor.split(`
+`).length - 1, lastLineStart = beforeCursor.lastIndexOf(`
+`) + 1, cursorColumn = cursorOffset - lastLineStart;
+  return {
+    content: newContent,
+    cursorPosition: {
+      line: position.line + cursorLine,
+      column: cursorLine === 0 ? position.column + cursorColumn : cursorColumn,
+      offset: position.offset + cursorOffset
+    }
+  };
+}
+function hasEndTag(directiveName) {
+  return [
+    "if",
+    "unless",
+    "switch",
+    "for",
+    "foreach",
+    "forelse",
+    "while",
+    "section",
+    "component",
+    "slot",
+    "push",
+    "prepend",
+    "auth",
+    "guest",
+    "can",
+    "cannot",
+    "role",
+    "hasRole",
+    "hasAnyRole",
+    "error",
+    "isset",
+    "empty",
+    "ts",
+    "js",
+    "css",
+    "markdown",
+    "verbatim",
+    "once"
+  ].includes(directiveName);
+}
+function isVoidElement(tag) {
+  return [
+    "area",
+    "base",
+    "br",
+    "col",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "link",
+    "meta",
+    "param",
+    "source",
+    "track",
+    "wbr"
+  ].includes(tag.toLowerCase());
+}
+function parseSimpleAttributes(attrsStr) {
+  const attrs = {}, regex = /([^\s=]+)(?:=["']([^"']*)["'])?/g, matches = attrsStr.matchAll(regex);
+  for (const match of matches) {
+    const [, name, value] = match;
+    attrs[name] = value ?? !0;
+  }
+  return attrs;
+}
+function truncate(str, maxLength) {
+  if (str.length <= maxLength)
+    return str;
+  return `${str.slice(0, maxLength - 3)}...`;
+}
+function getLineNumber(template, offset) {
+  return template.slice(0, offset).split(`
+`).length;
+}
+function getColumnNumber(template, offset) {
+  const lastNewline = template.lastIndexOf(`
+`, offset - 1);
+  return offset - lastNewline;
+}