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

package/dist/vue-template.js

@@ -0,0 +1,476 @@
+const VOID_ELEMENTS = new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]), NATIVE_ELEMENTS = new Set([
+  "a",
+  "abbr",
+  "address",
+  "area",
+  "article",
+  "aside",
+  "audio",
+  "b",
+  "base",
+  "bdi",
+  "bdo",
+  "blockquote",
+  "body",
+  "br",
+  "button",
+  "canvas",
+  "caption",
+  "cite",
+  "code",
+  "col",
+  "colgroup",
+  "data",
+  "datalist",
+  "dd",
+  "del",
+  "details",
+  "dfn",
+  "dialog",
+  "div",
+  "dl",
+  "dt",
+  "em",
+  "embed",
+  "fieldset",
+  "figcaption",
+  "figure",
+  "footer",
+  "form",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "head",
+  "header",
+  "hgroup",
+  "hr",
+  "html",
+  "i",
+  "iframe",
+  "img",
+  "input",
+  "ins",
+  "kbd",
+  "label",
+  "legend",
+  "li",
+  "link",
+  "main",
+  "map",
+  "mark",
+  "menu",
+  "meta",
+  "meter",
+  "nav",
+  "noscript",
+  "object",
+  "ol",
+  "optgroup",
+  "option",
+  "output",
+  "p",
+  "param",
+  "picture",
+  "pre",
+  "progress",
+  "q",
+  "rp",
+  "rt",
+  "ruby",
+  "s",
+  "samp",
+  "script",
+  "search",
+  "section",
+  "select",
+  "slot",
+  "small",
+  "source",
+  "span",
+  "strong",
+  "style",
+  "sub",
+  "summary",
+  "sup",
+  "table",
+  "tbody",
+  "td",
+  "template",
+  "textarea",
+  "tfoot",
+  "th",
+  "thead",
+  "time",
+  "title",
+  "tr",
+  "track",
+  "u",
+  "ul",
+  "var",
+  "video",
+  "wbr"
+]);
+function findNextOpenTag(html, startFrom) {
+  const tagRegex = /<([a-zA-Z][a-zA-Z0-9-]*)((?:\s+(?:[^>"']|"[^"]*"|'[^']*')*)?)(\s*\/?)>/g;
+  tagRegex.lastIndex = startFrom;
+  const match = tagRegex.exec(html);
+  if (!match)
+    return null;
+  const selfClosing = /\/\s*>$/.test(match[0]) || match[1] === match[1].toLowerCase() && VOID_ELEMENTS.has(match[1]), attrs = selfClosing ? match[2].replace(/\/\s*$/, "") : match[2];
+  return {
+    full: match[0],
+    tag: match[1],
+    attrs,
+    selfClosing,
+    start: match.index,
+    end: match.index + match[0].length
+  };
+}
+function findClosingTag(html, tagName, afterOpenTag) {
+  let depth = 1, pos = afterOpenTag;
+  const openPattern = new RegExp(`<${tagName}(?:\\s(?:[^>"']|"[^"]*"|'[^']*')*)?>`, "gi"), closePattern = new RegExp(`</${tagName}\\s*>`, "gi");
+  while (depth > 0 && pos < html.length) {
+    openPattern.lastIndex = pos;
+    closePattern.lastIndex = pos;
+    const nextOpen = openPattern.exec(html), nextClose = closePattern.exec(html);
+    if (!nextClose)
+      return -1;
+    if (nextOpen && nextOpen.index < nextClose.index) {
+      depth++;
+      pos = nextOpen.index + nextOpen[0].length;
+    } else {
+      depth--;
+      if (depth === 0)
+        return nextClose.index + nextClose[0].length;
+      pos = nextClose.index + nextClose[0].length;
+    }
+  }
+  return -1;
+}
+function getElementRange(html, parsed) {
+  if (parsed.selfClosing)
+    return {
+      outerStart: parsed.start,
+      outerEnd: parsed.end,
+      innerHTML: ""
+    };
+  const closeEnd = findClosingTag(html, parsed.tag, parsed.end);
+  if (closeEnd === -1)
+    return {
+      outerStart: parsed.start,
+      outerEnd: parsed.end,
+      innerHTML: ""
+    };
+  return {
+    outerStart: parsed.start,
+    outerEnd: closeEnd,
+    innerHTML: html.slice(parsed.end, closeEnd - `</${parsed.tag}>`.length)
+  };
+}
+function hasVueDirective(attrs, directive) {
+  return new RegExp(`(?:^|\\s)${directive.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(?:=|\\s|$|>|/)`).test(attrs) || attrs.includes(` ${directive}=`) || attrs.includes(` ${directive} `) || attrs.trimEnd().endsWith(` ${directive}`);
+}
+function extractDirectiveValue(attrs, directive) {
+  const escapedDirective = directive.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), match = attrs.match(new RegExp(`${escapedDirective}="([^"]*)"`, "s")) || attrs.match(new RegExp(`${escapedDirective}='([^']*)'`, "s"));
+  return match ? match[1] : null;
+}
+function removeDirective(attrs, directive) {
+  const escapedDirective = directive.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return attrs.replace(new RegExp(`\\s*${escapedDirective}="[^"]*"`, "g"), "").replace(new RegExp(`\\s*${escapedDirective}='[^']*'`, "g"), "").replace(new RegExp(`\\s*${escapedDirective}(?=\\s|$|>|/)`, "g"), "");
+}
+function replaceTagAttrs(html, parsed, newAttrs) {
+  const selfClose = parsed.selfClosing ? " /" : "", newTag = `<${parsed.tag}${newAttrs}${selfClose}>`;
+  return html.slice(0, parsed.start) + newTag + html.slice(parsed.end);
+}
+export function hasVueTemplateSyntax(template) {
+  return /\bv-(?:if|else-if|else|for|show|model|html|text|pre|once|cloak|memo|bind|on|slot)\b/.test(template);
+}
+function transformVFor(html) {
+  let result = html, searchFrom = 0;
+  while (searchFrom < result.length) {
+    const tag = findNextOpenTag(result, searchFrom);
+    if (!tag)
+      break;
+    const vForValue = extractDirectiveValue(tag.attrs, "v-for");
+    if (vForValue === null) {
+      searchFrom = tag.end;
+      continue;
+    }
+    const forMatch = vForValue.match(/^\s*\(?([^)]+)\)?\s+(?:in|of)\s+(.+)\s*$/);
+    if (!forMatch) {
+      searchFrom = tag.end;
+      continue;
+    }
+    const iterVars = forMatch[1].trim(), collection = forMatch[2].trim();
+    let foreachExpr;
+    if (iterVars.includes(",")) {
+      const parts = iterVars.split(",").map((s) => s.trim()), item = parts[0], index = parts[1];
+      foreachExpr = `${collection} as ${index} => ${item}`;
+    } else
+      foreachExpr = `${collection} as ${iterVars}`;
+    const newAttrs = removeDirective(tag.attrs, "v-for"), cleanAttrs = removeDirective(newAttrs, ":key").replace(/\s*v-bind:key="[^"]*"/g, ""), range = getElementRange(result, tag), element = result.slice(range.outerStart, range.outerEnd), tagWithNewAttrs = replaceTagAttrs(element, {
+      ...tag,
+      start: 0,
+      end: tag.end - tag.start
+    }, cleanAttrs), foreachPrefix = `@foreach(${foreachExpr})
+`, replacement = `${foreachPrefix}${tagWithNewAttrs}
+@endforeach`;
+    result = result.slice(0, range.outerStart) + replacement + result.slice(range.outerEnd);
+    searchFrom = range.outerStart + foreachPrefix.length;
+  }
+  return result;
+}
+function transformVIfChain(html) {
+  let result = html, searchFrom = 0;
+  while (searchFrom < result.length) {
+    const tag = findNextOpenTag(result, searchFrom);
+    if (!tag)
+      break;
+    const vIfValue = extractDirectiveValue(tag.attrs, "v-if");
+    if (vIfValue === null) {
+      searchFrom = tag.end;
+      continue;
+    }
+    const chain = [], ifRange = getElementRange(result, tag), ifAttrs = removeDirective(tag.attrs, "v-if"), ifElement = replaceTagAttrs(result.slice(ifRange.outerStart, ifRange.outerEnd), {
+      ...tag,
+      start: 0,
+      end: tag.end - tag.start
+    }, ifAttrs);
+    chain.push({
+      type: "if",
+      expr: vIfValue,
+      outerStart: ifRange.outerStart,
+      outerEnd: ifRange.outerEnd,
+      element: ifElement,
+      parsedTag: tag
+    });
+    let nextSearchPos = ifRange.outerEnd, chainContinues = !0;
+    while (chainContinues) {
+      const afterWhitespace = result.slice(nextSearchPos).match(/^\s*/), wsLength = afterWhitespace ? afterWhitespace[0].length : 0, nextTag = findNextOpenTag(result, nextSearchPos + wsLength);
+      if (!nextTag) {
+        chainContinues = !1;
+        break;
+      }
+      const elseIfValue = extractDirectiveValue(nextTag.attrs, "v-else-if"), hasElse = hasVueDirective(nextTag.attrs, "v-else");
+      if (elseIfValue !== null) {
+        const elseIfRange = getElementRange(result, nextTag), elseIfAttrs = removeDirective(nextTag.attrs, "v-else-if"), elseIfElement = replaceTagAttrs(result.slice(elseIfRange.outerStart, elseIfRange.outerEnd), {
+          ...nextTag,
+          start: 0,
+          end: nextTag.end - nextTag.start
+        }, elseIfAttrs);
+        chain.push({
+          type: "else-if",
+          expr: elseIfValue,
+          outerStart: nextSearchPos,
+          outerEnd: elseIfRange.outerEnd,
+          element: elseIfElement,
+          parsedTag: nextTag
+        });
+        nextSearchPos = elseIfRange.outerEnd;
+      } else if (hasElse) {
+        const elseRange = getElementRange(result, nextTag), elseAttrs = removeDirective(nextTag.attrs, "v-else"), elseElement = replaceTagAttrs(result.slice(elseRange.outerStart, elseRange.outerEnd), {
+          ...nextTag,
+          start: 0,
+          end: nextTag.end - nextTag.start
+        }, elseAttrs);
+        chain.push({
+          type: "else",
+          outerStart: nextSearchPos,
+          outerEnd: elseRange.outerEnd,
+          element: elseElement,
+          parsedTag: nextTag
+        });
+        chainContinues = !1;
+      } else
+        chainContinues = !1;
+    }
+    const parts = [];
+    for (const item of chain)
+      if (item.type === "if")
+        parts.push(`@if(${item.expr})
+${item.element}`);
+      else if (item.type === "else-if")
+        parts.push(`@elseif(${item.expr})
+${item.element}`);
+      else
+        parts.push(`@else
+${item.element}`);
+    parts.push("@endif");
+    const replacement = parts.join(`
+`), chainStart = chain[0].outerStart, chainEnd = chain[chain.length - 1].outerEnd;
+    result = result.slice(0, chainStart) + replacement + result.slice(chainEnd);
+    searchFrom = chainStart + replacement.length;
+  }
+  return result;
+}
+function transformVShow(html) {
+  return html.replace(/\bv-show="([^"]*)"/g, '@show="$1"');
+}
+function transformVModel(html) {
+  let result = html, searchFrom = 0;
+  while (searchFrom < result.length) {
+    const tag = findNextOpenTag(result, searchFrom);
+    if (!tag)
+      break;
+    let currentAttrs = tag.attrs, hadNamedVModel = !1;
+    const namedVModelRegex = /v-model:([a-zA-Z_][a-zA-Z0-9_]*)(?:\.([a-zA-Z.]+))?\s*=\s*"([^"]*)"/;
+    let namedMatch = currentAttrs.match(namedVModelRegex);
+    while (namedMatch) {
+      hadNamedVModel = !0;
+      const propName = namedMatch[1], _modifiers = namedMatch[2], expr = namedMatch[3];
+      currentAttrs = currentAttrs.replace(namedMatch[0], "");
+      currentAttrs += ` :${propName}="${expr}" @update:${propName}="${expr} = $event"`;
+      namedMatch = currentAttrs.match(namedVModelRegex);
+    }
+    if (hadNamedVModel) {
+      const range = getElementRange(result, tag), element = result.slice(range.outerStart, range.outerEnd), newElement = replaceTagAttrs(element, {
+        ...tag,
+        start: 0,
+        end: tag.end - tag.start
+      }, currentAttrs);
+      result = result.slice(0, range.outerStart) + newElement + result.slice(range.outerEnd);
+      searchFrom = range.outerStart + newElement.length;
+      continue;
+    }
+    const modelValue = extractDirectiveValue(tag.attrs, "v-model");
+    if (modelValue === null) {
+      searchFrom = tag.end;
+      continue;
+    }
+    if (NATIVE_ELEMENTS.has(tag.tag)) {
+      const newAttrs = tag.attrs.replace(/\s*v-model="[^"]*"/g, "") + ` @model="${modelValue}"`, range = getElementRange(result, tag), element = result.slice(range.outerStart, range.outerEnd), newElement = replaceTagAttrs(element, {
+        ...tag,
+        start: 0,
+        end: tag.end - tag.start
+      }, newAttrs);
+      result = result.slice(0, range.outerStart) + newElement + result.slice(range.outerEnd);
+      searchFrom = range.outerStart + newElement.length;
+    } else {
+      let newAttrs = tag.attrs.replace(/\s*v-model="[^"]*"/g, "");
+      newAttrs += ` :modelValue="${modelValue}" @update:modelValue="${modelValue} = $event"`;
+      const range = getElementRange(result, tag), element = result.slice(range.outerStart, range.outerEnd), newElement = replaceTagAttrs(element, {
+        ...tag,
+        start: 0,
+        end: tag.end - tag.start
+      }, newAttrs);
+      result = result.slice(0, range.outerStart) + newElement + result.slice(range.outerEnd);
+      searchFrom = range.outerStart + newElement.length;
+    }
+  }
+  return result;
+}
+function transformVBind(html) {
+  return html.replace(/\bv-bind:([a-zA-Z_][a-zA-Z0-9_-]*)\s*=\s*"([^"]*)"/g, '@bind:$1="$2"');
+}
+function transformVOn(html) {
+  return html.replace(/\bv-on:([a-zA-Z_][a-zA-Z0-9_.-]*)\s*=\s*"([^"]*)"/g, '@$1="$2"');
+}
+function transformVHtml(html) {
+  let result = html, searchFrom = 0;
+  while (searchFrom < result.length) {
+    const tag = findNextOpenTag(result, searchFrom);
+    if (!tag)
+      break;
+    const vHtmlValue = extractDirectiveValue(tag.attrs, "v-html");
+    if (vHtmlValue === null) {
+      searchFrom = tag.end;
+      continue;
+    }
+    if (tag.selfClosing) {
+      searchFrom = tag.end;
+      continue;
+    }
+    const range = getElementRange(result, tag), newAttrs = removeDirective(tag.attrs, "v-html"), selfClose = tag.selfClosing ? " /" : "", newElement = `<${tag.tag}${newAttrs}${selfClose}>{!! ${vHtmlValue} !!}</${tag.tag}>`;
+    result = result.slice(0, range.outerStart) + newElement + result.slice(range.outerEnd);
+    searchFrom = range.outerStart + newElement.length;
+  }
+  return result;
+}
+function transformVText(html) {
+  let result = html, searchFrom = 0;
+  while (searchFrom < result.length) {
+    const tag = findNextOpenTag(result, searchFrom);
+    if (!tag)
+      break;
+    const vTextValue = extractDirectiveValue(tag.attrs, "v-text");
+    if (vTextValue === null) {
+      searchFrom = tag.end;
+      continue;
+    }
+    if (tag.selfClosing) {
+      searchFrom = tag.end;
+      continue;
+    }
+    const range = getElementRange(result, tag), newAttrs = removeDirective(tag.attrs, "v-text"), selfClose = tag.selfClosing ? " /" : "", newElement = `<${tag.tag}${newAttrs}${selfClose}>{{ ${vTextValue} }}</${tag.tag}>`;
+    result = result.slice(0, range.outerStart) + newElement + result.slice(range.outerEnd);
+    searchFrom = range.outerStart + newElement.length;
+  }
+  return result;
+}
+function transformVPre(html) {
+  return html.replace(/(<[a-zA-Z][a-zA-Z0-9-]*)(\s[^>]*?)\s+v-pre([^>]*>)/g, "$1$2 data-stx-skip$3").replace(/(<[a-zA-Z][a-zA-Z0-9-]*)\s+v-pre(\s[^>]*>|>)/g, "$1 data-stx-skip$2");
+}
+function transformVOnce(html) {
+  let result = html, searchFrom = 0;
+  while (searchFrom < result.length) {
+    const tag = findNextOpenTag(result, searchFrom);
+    if (!tag)
+      break;
+    if (!hasVueDirective(tag.attrs, "v-once")) {
+      searchFrom = tag.end;
+      continue;
+    }
+    const newAttrs = removeDirective(tag.attrs, "v-once"), range = getElementRange(result, tag), element = result.slice(range.outerStart, range.outerEnd), replacement = `@once
+${replaceTagAttrs(element, {
+      ...tag,
+      start: 0,
+      end: tag.end - tag.start
+    }, newAttrs)}
+@endonce`;
+    result = result.slice(0, range.outerStart) + replacement + result.slice(range.outerEnd);
+    searchFrom = range.outerStart + replacement.length;
+  }
+  return result;
+}
+function transformVMemo(html) {
+  return html.replace(/\bv-memo="([^"]*)"/g, 'data-stx-memo="$1"');
+}
+function transformVSlot(html) {
+  return html.replace(/\bv-slot:([a-zA-Z_][a-zA-Z0-9_-]*)\s*=\s*"([^"]*)"/g, '#$1="$2"').replace(/\bv-slot:([a-zA-Z_][a-zA-Z0-9_-]*)(?=[\s>])/g, "#$1").replace(/\bv-slot\s*=\s*"([^"]*)"/g, '#default="$1"');
+}
+export function processVueTemplate(template) {
+  if (!hasVueTemplateSyntax(template))
+    return template;
+  let result = template;
+  result = transformVFor(result);
+  result = transformVIfChain(result);
+  result = transformVOnce(result);
+  result = transformVBind(result);
+  result = transformVOn(result);
+  result = transformVModel(result);
+  result = transformVShow(result);
+  result = transformVSlot(result);
+  result = transformVHtml(result);
+  result = transformVText(result);
+  result = transformVPre(result);
+  result = transformVMemo(result);
+  return result;
+}

package/dist/web-components/css-scoping.d.ts

@@ -0,0 +1,64 @@
+/**
+ * CSS Scoping for Web Components
+ *
+ * Provides utilities for scoping CSS styles to specific components
+ * to prevent style leakage in Shadow DOM and for component isolation.
+ */
+/**
+ * Options for CSS scoping
+ */
+export interface CssScopingOptions {
+    /** Prefix to add to selectors */
+    prefix?: string;
+    /** Whether to preserve :host selectors */
+    preserveHost?: boolean;
+    /** Whether to scope keyframe names */
+    scopeKeyframes?: boolean;
+    /** Whether to scope CSS custom properties */
+    scopeCustomProperties?: boolean;
+}
+/**
+ * Generate a unique component ID based on hash
+ */
+export declare function generateComponentId(componentName: string, salt?: string): string;
+/**
+ * Scope CSS to a specific component
+ *
+ * @param css - Raw CSS string
+ * @param componentId - Unique component identifier
+ * @param options - Scoping options
+ * @returns Scoped CSS string
+ *
+ * @example
+ * ```typescript
+ * const scoped = scopeCss('.button { color: red; }', 'stx-abc123')
+ * // Returns: '.stx-abc123 .button { color: red; }'
+ * ```
+ */
+export declare function scopeCss(css: string, componentId: string, options?: CssScopingOptions): string;
+/**
+ * Extract CSS from a template
+ *
+ * @param template - The template string
+ * @returns Object with CSS content and template without style tags
+ */
+export declare function extractStyleFromTemplate(template: string): {
+    css: string;
+    templateWithoutStyle: string;
+};
+/**
+ * Inject scoped CSS into a template
+ *
+ * @param template - The template string
+ * @param scopedCss - The scoped CSS to inject
+ * @param position - Where to inject: 'head', 'body-start', 'body-end'
+ * @returns Template with injected CSS
+ */
+export declare function injectScopedCss(template: string, scopedCss: string, position?: 'head' | 'body-start' | 'body-end'): string;
+/**
+ * Generate CSS for Shadow DOM encapsulation
+ *
+ * @param css - Raw CSS
+ * @returns CSS suitable for Shadow DOM
+ */
+export declare function generateShadowDomCss(css: string): string;