@proteus-vue/compiler 0.3.0-beta.0

package/dist/style-safety/index.js

@@ -0,0 +1,276 @@
+// src/style-safety/index.ts
+import { STYLE_PROP_LEVELS } from "@proteus-vue/contracts/style";
+
+// src/style-safety/reachability.ts
+var DYNAMIC_UNKNOWN = "unknown";
+var LITERAL_RE = /^-?(?:\d+(?:\.\d+)?|\.\d+)$/;
+var IDENT_RE = /^[A-Za-z_$][\w$]*$/;
+function findTopLevel(input, seps) {
+  let depth = 0;
+  let quote = "";
+  for (let i = 0; i < input.length; i++) {
+    const ch = input[i];
+    if (quote) {
+      if (ch === quote && input[i - 1] !== "\\") quote = "";
+      continue;
+    }
+    if (ch === "'" || ch === '"' || ch === "`") {
+      quote = ch;
+      continue;
+    }
+    if (ch === "(" || ch === "[" || ch === "{") depth++;
+    else if (ch === ")" || ch === "]" || ch === "}") depth = Math.max(0, depth - 1);
+    if (depth === 0 && seps.indexOf(ch) >= 0) return i;
+  }
+  return -1;
+}
+function parseLiteral(s) {
+  if (LITERAL_RE.test(s)) return Number(s);
+  if (s === "true") return true;
+  if (s === "false") return false;
+  if (s === "null") return null;
+  if (s.startsWith("'") && s.endsWith("'") && s.length >= 2 || s.startsWith('"') && s.endsWith('"') && s.length >= 2) {
+    return s.slice(1, -1);
+  }
+  return void 0;
+}
+function dynamic(source) {
+  return { values: [], isFullyStatic: false, dynamicSources: [source] };
+}
+function deriveReachableValues(expr, constants = {}) {
+  const t = expr.trim();
+  if (!t) return dynamic(DYNAMIC_UNKNOWN);
+  const lit = parseLiteral(t);
+  if (lit !== void 0) return { values: [lit], isFullyStatic: true, dynamicSources: [] };
+  if (IDENT_RE.test(t)) {
+    const v = constants[t];
+    if (v !== void 0) return { values: [v], isFullyStatic: true, dynamicSources: [] };
+    return dynamic(t);
+  }
+  const qIdx = findTopLevel(t, ["?"]);
+  if (qIdx >= 0) {
+    const rest = t.slice(qIdx + 1);
+    const colonIdx = findTopLevel(rest, [":"]);
+    if (colonIdx >= 0) {
+      const a = deriveReachableValues(rest.slice(0, colonIdx), constants);
+      const b = deriveReachableValues(rest.slice(colonIdx + 1), constants);
+      return {
+        values: a.values.concat(b.values),
+        isFullyStatic: a.isFullyStatic && b.isFullyStatic,
+        dynamicSources: a.dynamicSources.concat(b.dynamicSources)
+      };
+    }
+  }
+  for (const op of ["+", "-", "*", "/"]) {
+    const idx = findTopLevel(t, [op]);
+    if (idx <= 0 || idx >= t.length - 1) continue;
+    const left = deriveReachableValues(t.slice(0, idx), constants);
+    const right = deriveReachableValues(t.slice(idx + 1), constants);
+    if (left.isFullyStatic && right.isFullyStatic && left.values.length === 1 && right.values.length === 1) {
+      const l = left.values[0];
+      const r = right.values[0];
+      if (typeof l === "number" && typeof r === "number") {
+        const folded = op === "+" ? l + r : op === "-" ? l - r : op === "*" ? l * r : l / r;
+        if (Number.isFinite(folded)) return { values: [folded], isFullyStatic: true, dynamicSources: [] };
+      }
+    }
+    return dynamic("binary");
+  }
+  return dynamic(t);
+}
+
+// src/style-safety/constants.ts
+function evalLiteral(expr) {
+  try {
+    return Function(`"use strict"; return (${expr})`)();
+  } catch {
+    return void 0;
+  }
+}
+var TOP_LEVEL_CONST_RE = /^(?:export\s+)?const\s+([A-Za-z_$][\w$]*)\s*=\s*(.+)$/gm;
+function isLineStart(source, index) {
+  const lineStart = source.lastIndexOf("\n", index) + 1;
+  return source.slice(lineStart, index).trim() === "";
+}
+var RUNTIME_VALUE_RE = /^(ref|reactive|computed|inject|defineProps|defineEmits|withDefaults|watch|onMounted|use[A-Z]|import|require)\s*\(/;
+function extractScriptConstants(scriptSource) {
+  const constants = {};
+  let m;
+  while ((m = TOP_LEVEL_CONST_RE.exec(scriptSource)) !== null) {
+    if (!isLineStart(scriptSource, m.index)) continue;
+    const expr = m[2].trim();
+    if (RUNTIME_VALUE_RE.test(expr)) continue;
+    const value = evalLiteral(expr);
+    if (value !== void 0 && typeof value !== "function") constants[m[1]] = value;
+  }
+  return constants;
+}
+
+// src/style-safety/index.ts
+var STYLE_BINDING_RE = /(?::|v-bind:)(style)\s*=\s*(["'])([\s\S]*?)\2/g;
+function splitTopLevel(input) {
+  const out = [];
+  let depth = 0;
+  let quote = "";
+  let cur = "";
+  for (let i = 0; i < input.length; i++) {
+    const ch = input[i];
+    if (quote) {
+      cur += ch;
+      if (ch === quote && input[i - 1] !== "\\") quote = "";
+      continue;
+    }
+    if (ch === "'" || ch === '"' || ch === "`") {
+      quote = ch;
+      cur += ch;
+      continue;
+    }
+    if (ch === "(" || ch === "[" || ch === "{") depth++;
+    else if (ch === ")" || ch === "]" || ch === "}") depth = Math.max(0, depth - 1);
+    if (ch === "," && depth === 0) {
+      out.push(cur);
+      cur = "";
+      continue;
+    }
+    cur += ch;
+  }
+  if (cur.trim()) out.push(cur);
+  return out;
+}
+function findTopLevelColon(s) {
+  let depth = 0;
+  let quote = "";
+  for (let i = 0; i < s.length; i++) {
+    const ch = s[i];
+    if (quote) {
+      if (ch === quote && s[i - 1] !== "\\") quote = "";
+      continue;
+    }
+    if (ch === "'" || ch === '"' || ch === "`") {
+      quote = ch;
+      continue;
+    }
+    if (ch === "(" || ch === "[" || ch === "{") depth++;
+    else if (ch === ")" || ch === "]" || ch === "}") depth = Math.max(0, depth - 1);
+    if (ch === ":" && depth === 0) return i;
+  }
+  return -1;
+}
+function tryStaticValue(expr) {
+  const t = expr.trim();
+  if (t.startsWith("'") && t.endsWith("'") && t.length >= 2 || t.startsWith('"') && t.endsWith('"') && t.length >= 2) {
+    return t.slice(1, -1);
+  }
+  if (/^-?\d+(?:\.\d+)?$/.test(t)) return Number(t);
+  if (t === "true") return true;
+  if (t === "false") return false;
+  if (t === "null") return null;
+  return void 0;
+}
+function parseStyleObject(expr) {
+  const trimmed = expr.trim();
+  if (!trimmed.startsWith("{") || !trimmed.endsWith("}")) return null;
+  const inner = trimmed.slice(1, -1);
+  const props = [];
+  for (const item of splitTopLevel(inner)) {
+    const seg = item.trim();
+    if (!seg) continue;
+    const colon = findTopLevelColon(seg);
+    if (colon < 0) continue;
+    let key = seg.slice(0, colon).trim();
+    if (key.startsWith("[")) continue;
+    const keyStr = /^(['"])(.*)\1$/.exec(key);
+    key = keyStr ? keyStr[2] : key;
+    if (!key.startsWith("--")) {
+      key = key.replace(/-([a-z])/g, (_m, c) => c.toUpperCase());
+    }
+    const valueExpr = seg.slice(colon + 1).trim();
+    props.push({ key, valueExpr, staticValue: tryStaticValue(valueExpr) });
+  }
+  return props;
+}
+function analyzeStyleBindings(templateSource, constants = {}) {
+  const violations = [];
+  let staticChecked = 0;
+  let dynamic2 = 0;
+  let m;
+  STYLE_BINDING_RE.lastIndex = 0;
+  while ((m = STYLE_BINDING_RE.exec(templateSource)) !== null) {
+    const expr = m[3];
+    const line = templateSource.slice(0, m.index).split("\n").length;
+    const props = parseStyleObject(expr);
+    if (props === null) {
+      dynamic2++;
+      violations.push({ code: "STS006", prop: ":style", value: expr, line, message: ":style \u542B\u52A8\u6001\u6E90\uFF08\u8FD0\u884C\u65F6 validateStyle \u6821\u9A8C\u515C\u5E95\uFF09" });
+      continue;
+    }
+    for (const { key, valueExpr, staticValue } of props) {
+      if (key.startsWith("--")) {
+        if (staticValue !== void 0) staticChecked++;
+        else dynamic2++;
+        continue;
+      }
+      const level = STYLE_PROP_LEVELS[key];
+      if (level === void 0) {
+        dynamic2++;
+        violations.push({ code: "STS001", prop: key, value: valueExpr, line, message: `${key} \u4E0D\u5728\u767D\u540D\u5355\uFF08\u2192 \u6539\u7528 p-* \u8BED\u4E49\u7EC4\u4EF6\u6216\u767D\u540D\u5355\u5C5E\u6027\uFF09` });
+        continue;
+      }
+      if (level === "FORBIDDEN") {
+        staticChecked++;
+        violations.push({ code: "STS004", prop: key, value: valueExpr, line, message: `${key} \u7981\u7528\uFF08\u2192 <p-flex> / <p-stack>\uFF09` });
+        continue;
+      }
+      if (level === "SEMANTIC_ONLY") {
+        staticChecked++;
+        violations.push({ code: "STS003", prop: key, value: valueExpr, line, message: `${key} \u5FC5\u987B\u7528\u8BED\u4E49\u7EC4\u4EF6\uFF08\u2192 <p-glass> / <p-filter>\uFF09` });
+        continue;
+      }
+      if (staticValue !== void 0) {
+        staticChecked++;
+        if (!isStaticValueValid(level, staticValue)) {
+          violations.push({ code: "STS002", prop: key, value: valueExpr, line, message: `${key} \u9759\u6001\u503C\u7C7B\u578B\u975E\u6CD5: ${String(staticValue)}` });
+        }
+      } else {
+        const { isFullyStatic } = deriveReachableValues(valueExpr, constants);
+        if (isFullyStatic) staticChecked++;
+        else dynamic2++;
+      }
+    }
+  }
+  const total = staticChecked + dynamic2;
+  return { violations, stats: { staticChecked, dynamic: dynamic2, coverage: total > 0 ? staticChecked / total : 1 } };
+}
+function isStaticValueValid(level, value) {
+  switch (level) {
+    case "Length": {
+      if (typeof value === "number") return Number.isFinite(value);
+      if (typeof value === "string") return /^-?(?:\d+(?:\.\d+)?|\.\d+)(?:px|rpx|rem|%)?$/.test(value.trim());
+      return false;
+    }
+    case "Opacity":
+      return typeof value === "number" && value >= 0 && value <= 1;
+    case "Integer":
+      return typeof value === "number" && Number.isInteger(value);
+    case "Color":
+      return typeof value === "string" && (/^#[0-9a-fA-F]{3,8}$/.test(value) || /^rgba?\(/i.test(value) || value === "transparent" || value === "inherit");
+    case "FlexNumber":
+      return typeof value === "number" && Number.isFinite(value) || value === "auto";
+    case "FlexAlign":
+      return ["flex-start", "flex-end", "center", "stretch", "baseline", "auto"].indexOf(String(value)) >= 0;
+    case "FlexJustify":
+      return ["flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly"].indexOf(String(value)) >= 0;
+    case "Transform":
+      return typeof value === "string" && /^(translate|scale|rotate|skew)/i.test(value);
+    case "TransformOrigin":
+      return typeof value === "string";
+    default:
+      return true;
+  }
+}
+export {
+  analyzeStyleBindings,
+  deriveReachableValues,
+  extractScriptConstants,
+  tryStaticValue
+};

package/dist/style-safety/reachability.d.ts

@@ -0,0 +1,8 @@
+export interface ReachableSet {
+    values: unknown[];
+    isFullyStatic: boolean;
+    dynamicSources: string[];
+}
+export declare const DYNAMIC_UNKNOWN = "unknown";
+/** 可达值集推导（05 §2）——expr 为 :style 值表达式字符串 */
+export declare function deriveReachableValues(expr: string, constants?: Record<string, unknown>): ReachableSet;

package/dist/style.d.ts

@@ -0,0 +1,3 @@
+import type { StyleTransformOptions } from './types';
+/** style 源码 → WXSS（纯函数，独立可测） */
+export declare function transformStyleToWxss(source: string, opts?: StyleTransformOptions): string;

package/dist/style.js

@@ -0,0 +1,96 @@
+import { resolveOverrides } from './overrides';
+// 选择器中的标签名 → 小程序标签（.links a → .links view、h1 → text）
+// 命中条件：标签名必须位于选择器起始或组合器之后（空格 / > + ~ , ( 之后），
+// 前面不能是字母/数字/连字符/类名/ID（.a、#input、tag-a、data-input 均不误伤）
+// 正则按生效映射生成（config customTags / mapping 覆盖后新标签也能重写）
+function makeTagSelectorRe(tagMap, semanticClass) {
+    const names = [...Object.keys(tagMap), ...Object.keys(semanticClass)].sort((a, b) => b.length - a.length);
+    return new RegExp(`(?<![\\w-.#:\\[*])(?:${names.join('|')})(?=[\\s.#:\\[>+,~)(\\u0000]|$)`, 'g');
+}
+/** 重写单个选择器：先屏蔽属性选择器 [..]（引号内容可能含标签字样），重写标签后再还原 */
+// 占位符 \u0000 需在 lookahead 集合中（属性选择器也是标签名的合法后继）
+function rewriteTagSelectors(selector, res, tagRe) {
+    const attrs = [];
+    const masked = selector.replace(/\[[^\]]*\]/g, (m) => {
+        attrs.push(m);
+        return `\u0000${attrs.length - 1}\u0000`;
+    });
+    const rewritten = masked.replace(tagRe, (tag) => {
+        // 语义标签（h1-h6/p/a）→ 基础类选择器：模板已附加 proteus-* 类，可精确区分；
+        // 若映射为标签会撞选择器（.card h3 与 .card p 都变 .card text，后写覆盖先写 → h3 被染灰）
+        const semantic = res.semanticClass[tag];
+        if (semantic)
+            return `.${semantic}`;
+        return res.tagMap[tag] ?? tag;
+    });
+    return rewritten.replace(/\u0000(\d+)\u0000/g, (_m, i) => attrs[Number(i)]);
+}
+/** 仅重写每条规则的选择器部分（声明块与 @media/@keyframes 骨架原样保留） */
+function rewriteSelectorTags(css, res, tagRe) {
+    return css.replace(/([^{}]+)\{/g, (_m, sel) => `${rewriteTagSelectors(sel, res, tagRe)}{`);
+}
+// Web UA 语义基础样式（对齐 HTML 标准附录 D 默认样式表，rpx 直接书写不过 px2rpx）：
+// h1-h6/p/a 在 Web 有浏览器默认样式，映射为 text/view 后无默认样式，注入基础类还原语义；
+// margin 用 em（相对自身字号）且只设底部单边——Web 相邻段落 margin 折叠取 max，
+// 而 Skyline 自研引擎不折叠，单边 bottom 在两端主流组合（段落连续 / 标题后接段落）下
+// 视觉间距一致（如 p→p 均为 1em、h1→p 均为 0.67emₕ₁）；用户样式特异性更高可覆盖
+const BASE_SEMANTIC_WXSS = [
+    '.proteus-h1 { display: block; font-size: 64rpx; font-weight: 700; margin: 0 0 0.67em; }',
+    '.proteus-h2 { display: block; font-size: 48rpx; font-weight: 700; margin: 0 0 0.83em; }',
+    '.proteus-h3 { display: block; font-size: 36rpx; font-weight: 700; margin: 0 0 1em; }',
+    '.proteus-h4 { display: block; font-size: 32rpx; font-weight: 700; margin: 0 0 1.33em; }',
+    '.proteus-h5 { display: block; font-size: 28rpx; font-weight: 700; margin: 0 0 1.67em; }',
+    '.proteus-h6 { display: block; font-size: 24rpx; font-weight: 700; margin: 0 0 2.33em; }',
+    '.proteus-p { display: block; margin: 0 0 1em; }',
+    '.proteus-a { color: #1a7af8; text-decoration: underline; }',
+].join('\n');
+/** 统计选择器重写前源 CSS 中的标签选择器处数（语义标签与普通标签分开计数） */
+function countSelectorRewrites(css, res) {
+    const semanticKeys = Object.keys(res.semanticClass);
+    const tagKeys = Object.keys(res.tagMap).filter((k) => !semanticKeys.includes(k));
+    const lookahead = '[\\s.#:\\[>+,~)(\\u0000]|$';
+    const semanticRe = new RegExp(`(?<![\\w-.\\#:\\[*])(?:${semanticKeys.join('|')})(?=${lookahead})`, 'g');
+    const tagRePlain = new RegExp(`(?<![\\w-.\\#:\\[*])(?:${tagKeys.join('|')})(?=${lookahead})`, 'g');
+    return { tag: (css.match(tagRePlain) ?? []).length, semantic: (css.match(semanticRe) ?? []).length };
+}
+/** style 源码 → WXSS（纯函数，独立可测） */
+export function transformStyleToWxss(source, opts = { px2rpx: true, rpxRatio: 2 }) {
+    const trace = opts.trace;
+    // ★底线循环 ①③：生效映射 + 禁用集（config rules 即时生效）
+    const res = resolveOverrides(opts.rules);
+    const tagRe = makeTagSelectorRe(res.tagMap, res.semanticClass);
+    const injectBase = !res.disabled.has('style/semantic-base-wxss');
+    let css = injectBase ? `${BASE_SEMANTIC_WXSS}\n${source}` : source;
+    if (injectBase)
+        trace?.add('style/semantic-base-wxss', { before: 'h1-h6/p/a 无 UA 样式', after: '.proteus-h1~h6/.proteus-p/.proteus-a 基础 WXSS（注入在用户样式之前）' });
+    // 1. 标签选择器映射（与模板标签映射一一对应，避免元素已映射而样式匹配不到）
+    const doSelectorRewrite = !res.disabled.has('style/selector-tag') && !res.disabled.has('style/selector-semantic');
+    const counts = doSelectorRewrite ? countSelectorRewrites(css, res) : { tag: 0, semantic: 0 };
+    if (doSelectorRewrite)
+        css = rewriteSelectorTags(css, res, tagRe);
+    if (counts.tag > 0)
+        trace?.add('style/selector-tag', { before: `选择器含 HTML 标签（${counts.tag} 处）`, after: '映射为小程序标签（div → view）' });
+    if (counts.semantic > 0)
+        trace?.add('style/selector-semantic', { before: `h1-h6/p/a 选择器（${counts.semantic} 处）`, after: '.proteus-* 类选择器（避免同特异性覆盖）' });
+    // 2. px → rpx
+    const doPx2rpx = opts.px2rpx && !res.disabled.has('style/px-to-rpx');
+    const pxCount = (css.match(/(\d+(?:\.\d+)?)px\b/g) ?? []).length;
+    if (doPx2rpx) {
+        css = css.replace(/(\d+(?:\.\d+)?)px\b/g, (_m, n) => `${Number(n) * opts.rpxRatio}rpx`);
+        if (pxCount > 0)
+            trace?.add('style/px-to-rpx', { before: `${pxCount} 处 px`, after: `${pxCount} 处 rpx（rpxRatio=${opts.rpxRatio}）` });
+    }
+    // 3. Skyline 不支持的属性编译期警告
+    const unsupported = [];
+    if (!res.disabled.has('style/skyline-unsupported')) {
+        if (/float\s*:/.test(css))
+            unsupported.push('float');
+        if (/position\s*:\s*fixed\b/.test(css))
+            unsupported.push('position: fixed');
+    }
+    for (const u of unsupported) {
+        console.warn(`[mp-transform] WXSS 检测到 Skyline 不支持的属性：${u}（编译期警告）`);
+        trace?.add('style/skyline-unsupported', { before: u, after: '编译期警告（不阻断构建）' });
+    }
+    return css;
+}

package/dist/tags.d.ts

@@ -0,0 +1,3 @@
+export declare const TAG_MAP: Record<string, string>;
+export declare const EVENT_MAP: Record<string, string>;
+export declare const SEMANTIC_CLASS: Record<string, string>;

package/dist/tags.js

@@ -0,0 +1,49 @@
+// src/compiler/tags.ts
+// 标签 / 事件映射表 —— 模板转换（template.ts）与样式选择器重写（style.ts）共用
+// 业务代码写标准 HTML 标签，编译器统一映射到小程序标签（§0.3 原则 1）
+export const TAG_MAP = {
+    div: 'view',
+    span: 'text',
+    p: 'text',
+    h1: 'text',
+    h2: 'text',
+    h3: 'text',
+    h4: 'text',
+    h5: 'text',
+    h6: 'text',
+    img: 'image',
+    a: 'view',
+    button: 'button',
+    input: 'input',
+    textarea: 'textarea',
+    video: 'video',
+    canvas: 'canvas',
+    'scroll-view': 'scroll-view',
+    slot: 'slot',
+};
+export const EVENT_MAP = {
+    click: 'tap',
+    input: 'input',
+    change: 'change',
+    submit: 'submit',
+    focus: 'focus',
+    blur: 'blur',
+    touchstart: 'touchstart',
+    touchmove: 'touchmove',
+    touchend: 'touchend',
+    longpress: 'longpress',
+    confirm: 'confirm',
+};
+// 语义标签 → 基础样式类名
+// Web 端 h1-h6/p/a 有浏览器 UA 默认样式（大标题/加粗/链接色），小程序 text/view 没有默认样式；
+// 映射时给语义标签附加 proteus-* 类，样式侧注入基础 WXSS 还原 Web 语义（用户样式特异性更高可覆盖）
+export const SEMANTIC_CLASS = {
+    h1: 'proteus-h1',
+    h2: 'proteus-h2',
+    h3: 'proteus-h3',
+    h4: 'proteus-h4',
+    h5: 'proteus-h5',
+    h6: 'proteus-h6',
+    p: 'proteus-p',
+    a: 'proteus-a',
+};

package/dist/template.d.ts

@@ -0,0 +1,3 @@
+import type { TemplateTransformOptions, TemplateTransformResult } from './types';
+/** template 源码 → WXML（纯函数，独立可测） */
+export declare function transformTemplateToWxml(source: string, opts?: TemplateTransformOptions): TemplateTransformResult;