@opentiny/genui-sdk-vue 1.3.0 → 1.3.1-alpha.2

package/dist/vue-code-generator-CwPQ3GDh.js

@@ -0,0 +1,573 @@
+import { parse as R, compileScript as M, compileTemplate as w, compileStyle as V } from "@vue/compiler-sfc";
+import { generateCodeFrame as B } from "@vue/shared";
+const P = {
+  start: "#QUOTES_START#",
+  end: "#QUOTES_END#"
+}, [y, b, v, T, E] = [
+  "JSExpression",
+  "JSFunction",
+  "i18n",
+  "JSResource",
+  "JSSlot"
+], x = /\B([A-Z])/g, F = /^on([A-Z]\w*)/, D = /^on(Update:\w+)/, { start: L, end: J } = P, _ = (m = "") => m ? m.charAt(0).toUpperCase() + m.slice(1) : "", I = (m) => m.replace(x, "-$1").toLowerCase(), C = (m) => {
+  const e = m.replace(F, "$1");
+  return D.test(m) ? e.charAt(0).toLowerCase() + e.slice(1) : I(e);
+}, j = (m) => m.replace(
+  new RegExp(`"${L}(.*?)${J}"`, "g"),
+  (e, t) => t.replace(/\\"/g, '"').replace(/\\r\\n|\\r|\\n/g, "")
+), A = (m) => m.replace(/"/g, """), U = () => Math.random().toString(36).slice(2, 10), z = (m, e) => {
+  const { errors: t, descriptor: n } = R(e, {
+    filename: m,
+    sourceMap: !1
+  });
+  if (t.length)
+    return t.map((l) => O(e, l));
+  const s = U();
+  let o;
+  try {
+    o = M(n, { id: s }).bindings;
+  } catch (l) {
+    const u = N(l), S = u && typeof u == "object" && "loc" in u ? u.loc : void 0;
+    if (S && !S.start && S.line != null) {
+      const h = u.message.match(/.*/)[0], { line: d, column: $ } = S;
+      return [O(e, { message: h, loc: { start: { line: d, column: $ } } })];
+    }
+    return [{ message: u.message }];
+  }
+  const { styles: c, template: a, slotted: r } = n, i = c.some((l) => l.scoped);
+  if (a) {
+    const l = w({
+      source: a.content,
+      filename: m,
+      id: s,
+      scoped: i,
+      slotted: r,
+      compilerOptions: { bindingMetadata: o }
+    });
+    if (l.errors.length)
+      return l.errors.map(N).map((u) => O(e, u));
+  }
+  return c.map(({ content: l }) => V({ source: l, filename: m, id: s, scoped: i })).filter(({ errors: l }) => l.length).map(({ errors: l }) => l).flat();
+}, N = (m) => typeof m == "string" ? { message: m } : m, O = (m, e) => {
+  let { loc: t, message: n } = e;
+  if (t != null && t.start) {
+    const { line: s, column: o } = t.start, a = m.split(/\r?\n/)[s - 1];
+    if (typeof a != "string")
+      return { message: n };
+    const r = 50, i = Math.max(0, o - r), p = a.slice(i, o + r);
+    n = `${n} 
+ ${B(p, o - i)}`;
+  }
+  return { message: n };
+}, W = {
+  semi: !1,
+  singleQuote: !0,
+  printWidth: 120,
+  trailingComma: "none",
+  endOfLine: "auto",
+  tabWidth: 2,
+  parser: "vue",
+  htmlWhitespaceSensitivity: "ignore"
+};
+class k {
+  constructor(e = {}) {
+    this.generatorOptions = e, this.prettierOpts = {
+      ...W,
+      ...e.prettierOpts ?? {}
+    }, this.enableCompileValidation = e.enableCompileValidation !== !1;
+  }
+  replaceThis(e, t = !1) {
+    const n = t ? "$1" : "$1.value";
+    return e.replace(/this\.refs\.(\w+)/g, n).replace(/this\.(props\.)?/g, "");
+  }
+  buildScriptSetupStateAccessors(e) {
+    return e.description.stateAccessors.map(({ name: t, getterExpr: n, setterExpr: s }) => s ? `const ${t} = computed({ get: ${n}, set: ${s} })` : `const ${t} = computed(${n})`).join(`
+
+`);
+  }
+  buildScriptSetupImports(e) {
+    const { componentSet: t } = e.description, n = e.schema.refs, s = !!n && typeof n == "object" && Object.keys(n).length > 0, c = [`import { ${[
+      "reactive",
+      ...e.description.needsComputed ? ["computed"] : [],
+      ...s ? ["ref"] : []
+    ].join(", ")} } from "vue"`], a = [...t], r = e.componentsMap.filter((p) => a.includes(p.componentName)), i = {};
+    return r.forEach((p) => {
+      const { package: f } = p;
+      i[f] || (i[f] = []), i[f].push(p);
+    }), Object.entries(i).forEach(([p, f]) => {
+      const l = f.map((u) => {
+        const { componentName: S, exportName: h } = u;
+        return h && h !== S ? `${h} as ${S}` : `${S}`;
+      });
+      c.push(`import { ${l.join(",")} } from '${p}'`);
+    }), c.join(`
+`);
+  }
+  buildScriptSetupRefs(e) {
+    const t = e.schema.refs;
+    if (!t || typeof t != "object")
+      return "";
+    const n = Object.entries(t);
+    return n.length ? n.map(([s, o]) => {
+      const c = o === void 0 ? "null" : j(JSON.stringify(o));
+      return `const ${s} = ref(${c})`;
+    }).join(`
+`) : "";
+  }
+  buildScriptSetupDefineProps(e) {
+    const { schema: t } = e.schema;
+    if (!t)
+      return "";
+    const { properties: n = [] } = t, s = [];
+    return n.forEach(({ content: o = [] }) => {
+      o.forEach(({ property: c, type: a, defaultValue: r }) => {
+        const i = _(a);
+        let p = r;
+        i === "String" ? p = JSON.stringify(r) : ["Array", "Object"].includes(i) ? p = `() => (${JSON.stringify(r)})` : i === "Function" && (p = (r == null ? void 0 : r.value) ?? "undefined"), s.push(`${c}: { type: ${i}, default: ${p} }`);
+      });
+    }), s.length ? `const props = defineProps({${s.join(`,
+`)}})` : "";
+  }
+  buildScriptSetupDefineEmits(e) {
+    const { schema: t } = e.schema;
+    if (!t)
+      return "";
+    const { events: n = {} } = t, s = Object.keys(n).map(C);
+    return s.length ? `const emit = defineEmits(${JSON.stringify(s)})` : "";
+  }
+  buildScriptSetupIconStatement(e) {
+    const { componentNames: t, exportNames: n } = e.description.iconComponents;
+    return t.length ? `const [${t.join(",")}] = [${n.map((s) => `${s}()`).join(",")}]` : "";
+  }
+  buildScriptSetupReactiveState(e) {
+    const { state: t = {} } = e.schema;
+    return `const state = reactive(${j(JSON.stringify(t, null, 2))})`;
+  }
+  buildScriptSetupMethods(e) {
+    const { methods: t = {} } = e.schema;
+    return Object.entries(t).map(([s, o]) => {
+      const c = this.getFunctionInfo(o.value);
+      if (!c)
+        return `const ${s} = ${this.replaceThis(o.value)}`;
+      const a = c.type ? `${c.type} ` : "", r = this.replaceThis(c.body);
+      return `${a}function ${s}(${c.params.join(", ")}) {${r}}`;
+    }).join(`
+
+`);
+  }
+  buildScriptSetupCallAction(e) {
+    return e.description.needsCallAction ? 'function callAction(name, params) {\n  console.warn(`[GenUI] callAction("${name}") is available at runtime via customActions; implement it for exported code.`, params)\n}' : "";
+  }
+  buildScriptSetupBody(e, t) {
+    const n = [], s = /* @__PURE__ */ new Map();
+    for (const o of t)
+      s.has(o.group) || (s.set(o.group, []), n.push(o.group)), s.get(o.group).push(o.build(e));
+    return n.map((o) => s.get(o).filter(Boolean).join(`
+`)).filter(Boolean).join(`
+
+`);
+  }
+  buildSfcTemplateSection(e) {
+    return `<template>
+  ${e}
+</template>`;
+  }
+  buildSfcScriptSetupSection(e, t = !1) {
+    return `<script setup${t ? ' lang="jsx"' : ""}>
+${e}
+<\/script>`;
+  }
+  buildSfcStyleSection(e) {
+    return `<style scoped>
+  ${e}
+</style>`;
+  }
+  getScriptSetupSections() {
+    return [
+      {
+        id: "imports",
+        group: "imports",
+        build: (e) => this.buildScriptSetupImports(e)
+      },
+      {
+        id: "defineProps",
+        group: "macro",
+        build: (e) => this.buildScriptSetupDefineProps(e)
+      },
+      {
+        id: "defineEmits",
+        group: "macro",
+        build: (e) => this.buildScriptSetupDefineEmits(e)
+      },
+      {
+        id: "icons",
+        group: "icons",
+        build: (e) => this.buildScriptSetupIconStatement(e)
+      },
+      {
+        id: "refs",
+        group: "refs",
+        build: (e) => this.buildScriptSetupRefs(e)
+      },
+      {
+        id: "reactive",
+        group: "state",
+        build: (e) => this.buildScriptSetupReactiveState(e)
+      },
+      {
+        id: "stateAccessors",
+        group: "state",
+        build: (e) => this.buildScriptSetupStateAccessors(e)
+      },
+      {
+        id: "callAction",
+        group: "actions",
+        build: (e) => this.buildScriptSetupCallAction(e)
+      },
+      {
+        id: "methods",
+        group: "methods",
+        build: (e) => this.buildScriptSetupMethods(e)
+      }
+    ];
+  }
+  createCodegenMeta() {
+    return {
+      componentSet: /* @__PURE__ */ new Set(),
+      iconComponents: { componentNames: [], exportNames: [] },
+      internalTypes: /* @__PURE__ */ new Set(),
+      stateAccessors: [],
+      needsJsx: !1,
+      needsComputed: !1,
+      needsCallAction: !1
+    };
+  }
+  resolveRefAttr(e, t) {
+    if (!e)
+      return null;
+    const n = e.trim(), s = n.match(/^(?:this\.)?refs\.(\w+)$/);
+    if (s)
+      return t ? `ref={${s[1]}}` : `ref="${s[1]}"`;
+    const o = n.match(/^(?:this\.)?refs\.(\w+)(\[[\s\S]+\])$/);
+    if (o) {
+      const [, c, a] = o, r = !t, i = r ? c : `${c}.value`, p = this.replaceThis(a, r), f = `(instance) => (${i}${p} = instance)`;
+      return t ? `ref={${f}}` : `:ref="${A(f)}"`;
+    }
+    return null;
+  }
+  resolvePropValueType(e) {
+    const t = [y, b, v, T, E];
+    if (e && typeof e == "object" && "type" in e) {
+      const n = e.type;
+      if (typeof n == "string" && t.includes(n))
+        return n;
+    }
+    return "literal";
+  }
+  buildJSFunctionExpression(e, t = !1) {
+    const n = this.getFunctionInfo(e);
+    return n ? `${n.type ? `${n.type} ` : ""}(${n.params.join(",")}) => { ${this.replaceThis(n.body, t)} }` : this.replaceThis(e, t);
+  }
+  hoistPropToState(e, t, n, s, o = !1) {
+    const c = this.avoidDuplicateString(Object.keys(s), e);
+    s[c] = t, n.push(o ? `${e}={state.${c}}` : `:${e}="state.${c}"`);
+  }
+  isOnEventKey(e) {
+    return /^on([A-Z]\w*)/.test(e);
+  }
+  handleSlotBinding(e) {
+    const { name: t, params: n } = e ?? {};
+    let s = `#${t || e}`;
+    return Array.isArray(n) ? s = `#${t}="{ ${n.join(",")} }"` : typeof n == "string" && (s = `#${t}="${n}"`), s;
+  }
+  handleEventBinding(e, t, n = !1) {
+    var r, i;
+    const s = n ? e : C(e), o = !n, c = (p) => `@${s}="${A(p)}"`;
+    if ((t == null ? void 0 : t.type) === b) {
+      const p = this.buildJSFunctionExpression(t.value ?? "", o);
+      if ((r = t.params) != null && r.length) {
+        const f = `(...eventArgs) => (${p})(...eventArgs, ${t.params.join(",")})`;
+        return n ? `${s}={${f}}` : c(f);
+      }
+      return n ? `${s}={${p}}` : c(p);
+    }
+    if ((t == null ? void 0 : t.type) !== y)
+      return "";
+    const a = this.replaceThis(t.value ?? "", o);
+    if ((i = t.params) != null && i.length) {
+      const p = `(...eventArgs) => ${a}(eventArgs, ${t.params.join(",")})`;
+      return n ? `${s}={${p}}` : c(p);
+    }
+    return n ? `${s}={${a}}` : c(a);
+  }
+  avoidDuplicateString(e, t) {
+    let n = t, s = 1;
+    for (; e.includes(n); )
+      n = `${t}${s}`, s++;
+    return n;
+  }
+  handleLiteralBinding(e, t, n, s, o, c = !1) {
+    if (typeof t == "string") {
+      n.push(`${e}="${t.replace(/"/g, "&quot;")}"`);
+      return;
+    }
+    if (t && typeof t == "object") {
+      const a = s.internalTypes, r = new Set(a);
+      if (s.internalTypes = r, this.traverseState(t, s), r.has("JSFunction") || r.has("JSResource") || r.has("JSSlot")) {
+        s.internalTypes = a, this.hoistPropToState(e, t, n, o, c);
+        return;
+      }
+      s.internalTypes = a;
+      const p = j(JSON.stringify(t)).replace(/props\./g, "");
+      if (c) {
+        n.push(`${e}={${p}}`);
+        return;
+      }
+      const f = p.replace(/'/g, "&#39;");
+      n.push(`:${e}='${f}'`);
+      return;
+    }
+    n.push(c ? `${e}={${t}}` : `:${e}="${t}"`);
+  }
+  handleBinding(e, t, n, s, o = !1) {
+    Object.entries(e).forEach(([c, a]) => {
+      var f;
+      let r = c === "className" ? "class" : c;
+      if (r === "slot") {
+        t.push(this.handleSlotBinding(a));
+        return;
+      }
+      const i = a, p = this.resolvePropValueType(a);
+      if (r === "ref" && p === y) {
+        const l = this.resolveRefAttr(i.value, o);
+        if (l) {
+          t.push(l);
+          return;
+        }
+      }
+      if (this.isOnEventKey(r)) {
+        const l = this.handleEventBinding(r, i, o);
+        l && t.push(l);
+        return;
+      }
+      if (p === "literal") {
+        this.handleLiteralBinding(r, a, t, n, s, o);
+        return;
+      }
+      if (p === b || p === E) {
+        this.hoistPropToState(r, a, t, s, o);
+        return;
+      }
+      if (p === y) {
+        const l = this.replaceThis(i.value ?? "", !o);
+        if (i.model) {
+          const u = (f = i.model) != null && f.prop ? `:${i.model.prop}` : "";
+          t.push(o ? `v-model${u}={${l}}` : `v-model${u}="${l}"`);
+          return;
+        }
+        t.push(o ? `${r}={${l}}` : `:${r}="${l}"`);
+      }
+    });
+  }
+  recurseChildren(e, t, n, s) {
+    if (Array.isArray(e)) {
+      s.push(
+        e.map((o) => this.generateTemplate(o, t, n, !1)).join("")
+      );
+      return;
+    }
+    s.push(e || "");
+  }
+  isEmptySlotNode(e, t) {
+    return e === "template" && !(t != null && t.length) && !(t != null && t.type);
+  }
+  generateTemplate(e, t, n, s = !0) {
+    const o = [], { componentName: c, loop: a, loopArgs: r = ["item"], condition: i, props: p = {}, children: f } = e;
+    if (this.isEmptySlotNode(c, f))
+      return "";
+    const l = s ? "div" : I(c || "div");
+    !s && c && n.componentSet.add(c), o.push(`
+<${l} `);
+    const u = [];
+    if (a) {
+      const h = a.type ? this.replaceThis(a.value ?? "", !0) : JSON.stringify(a).replace(/"/g, "&quot;");
+      u.push(`v-for="(${r.join(",")}) in ${h}"`);
+    }
+    if (typeof i == "object" || typeof i == "boolean") {
+      const h = typeof i == "object" && i !== null, d = i, $ = h && d.type ? this.replaceThis(d.value ?? "", !0) : i, g = h && d.kind || "if";
+      u.push(g === "else" ? "v-else" : `v-${g}="${$}"`);
+    }
+    return this.handleBinding(p, u, n, t), o.push(u.join(" ")), ["img", "input", "br", "hr", "link"].includes(l) ? o.push(" />") : (o.push(">"), this.recurseChildren(f, t, n, o), o.push(`</${l}>`)), o.join("");
+  }
+  generateSlotTemplate(e, t, n = {}) {
+    const s = [], { componentName: o, component: c, props: a = {}, children: r, condition: i } = e, p = o || c || "div";
+    t.componentSet.add(p);
+    const f = [];
+    if (i) {
+      const u = i != null && i.type ? this.replaceThis(i.value) : i;
+      s.push(`{ ${u} && `);
+    }
+    return s.push(`<${p} `), this.handleBinding(a, f, t, n, !0), s.push(f.join(" ")), ["img", "input", "br", "hr", "link"].includes(p) ? s.push(" />") : (s.push(">"), Array.isArray(r) ? s.push(r.map((u) => this.generateSlotTemplate(u, t, n)).join("")) : (r == null ? void 0 : r.type) === "JSExpression" ? s.push(`{ ${this.replaceThis(r.value)} }`) : (r == null ? void 0 : r.type) === "i18n" ? s.push(`{t('${r.key}')}`) : s.push(r || ""), s.push(`</${p}>`)), i && s.push(" }"), s.join("");
+  }
+  getFunctionInfo(e) {
+    const n = /(async)?.*?(\w+) *\(([\s\S]*?)\) *\{([\s\S]*)\}/.exec(e);
+    return n ? {
+      type: n[1] || "",
+      params: n[3].split(",").map((s) => s.trim()).filter(Boolean),
+      body: n[4]
+    } : null;
+  }
+  transformStateType(e, t, n, s) {
+    var u, S;
+    const o = e[t];
+    if (o != null && o.accessor) {
+      const h = ((u = o.accessor.getter) == null ? void 0 : u.value) ?? "function() {}", d = (S = o.accessor.setter) == null ? void 0 : S.value, $ = this.getFunctionInfo(h), g = d ? this.getFunctionInfo(d) : null;
+      n.stateAccessors.push({
+        name: t,
+        getterExpr: $ ? `() => { ${this.replaceThis($.body)} }` : `() => (${this.replaceThis(h)})()`,
+        setterExpr: g ? `(${g.params.join(",")}) => { ${this.replaceThis(g.body)} }` : void 0
+      }), n.needsComputed = !0, o.defaultValue !== void 0 ? e[t] = o.defaultValue : delete e[t];
+      return;
+    }
+    const c = [y, b, v, T, E], { type: a } = e[t] || {};
+    if (!c.includes(a))
+      return;
+    n.internalTypes.add(a);
+    const { start: r, end: i } = P;
+    if (a === y) {
+      const { value: h = "", computed: d = !1 } = e[t] || {};
+      d && (n.needsComputed = !0), e[t] = d ? `${r}computed(${this.replaceThis(h)})${i}` : `${r}${this.replaceThis(h)}${i}`;
+      return;
+    }
+    if (a === b) {
+      const { value: h = "" } = e[t] || {}, d = this.getFunctionInfo(h);
+      if (!d) {
+        e[t] = `${r}${typeof h == "string" ? this.replaceThis(h) : ""}${i}`;
+        return;
+      }
+      const $ = `${d.type} (${d.params.join(",")}) => { ${this.replaceThis(d.body)} }`;
+      e[t] = `${r}${$}${i}`;
+      return;
+    }
+    if (a === v) {
+      const { key: h = "" } = e[t] || {};
+      e[t] = `${r}t("${h}")${i}`;
+      return;
+    }
+    if (a === T) {
+      const { value: h = "" } = e[t] || {};
+      e[t] = `${r}${this.replaceThis(h)}${i}`;
+      return;
+    }
+    const { value: p = [], params: f = ["row"] } = e[t] || {};
+    n.needsJsx = !0;
+    const l = p.map((h) => this.generateSlotTemplate(h, n, s)).join("");
+    e[t] = `${r}({ ${f.join(",")} }) => ${l || "null"}${i}`;
+  }
+  traverseState(e, t, n = e) {
+    if (!(typeof e != "object" || e === null)) {
+      if (Array.isArray(e)) {
+        e.forEach((s) => this.traverseState(s, t, n));
+        return;
+      }
+      Object.keys(e).forEach((s) => {
+        Object.prototype.hasOwnProperty.call(e, s) && (this.transformStateType(e, s, t, n), this.traverseState(e[s], t, n));
+      });
+    }
+  }
+  buildVueSfcSource({
+    schema: e,
+    componentsMap: t
+  }) {
+    const n = this.createCodegenMeta();
+    n.needsCallAction = /\bthis\.callAction\b/.test(JSON.stringify(e));
+    const s = e.state ?? (e.state = {}), o = this.generateTemplate(e, s, n);
+    this.traverseState(s, n);
+    const c = { schema: e, componentsMap: t, description: n }, a = this.buildScriptSetupBody(c, this.getScriptSetupSections());
+    return [
+      this.buildSfcTemplateSection(o),
+      this.buildSfcScriptSetupSection(a, n.needsJsx),
+      this.buildSfcStyleSection(e.css || "")
+    ].filter(Boolean).join(`
+
+`);
+  }
+  normalizeIncomingSchema(e) {
+    if (e == null)
+      return { componentName: "Page", children: [] };
+    if (typeof e == "string") {
+      const t = e.trim();
+      if (!t)
+        return { componentName: "Page", children: [] };
+      try {
+        return JSON.parse(t);
+      } catch {
+        return { componentName: "Page", children: [] };
+      }
+    }
+    return e;
+  }
+  async generatePageCode({
+    pageInfo: e,
+    componentsMap: t,
+    formatWithPrettier: n = !1
+  }) {
+    const { schema: s, name: o = "SchemaCard" } = e, c = JSON.parse(JSON.stringify(this.normalizeIncomingSchema(s))), a = this.buildVueSfcSource({ schema: c, name: o, componentsMap: t }), r = `${o}.vue`, i = this.enableCompileValidation ? z(r, a) : [], u = { ...{
+      panelName: r,
+      panelValue: a,
+      panelType: "vue",
+      prettierOpts: { ...this.prettierOpts },
+      type: "page"
+    }, errors: i };
+    return n && (u.panelValue = await this.formatWithPrettier(u.panelValue, u.prettierOpts)), u;
+  }
+  normalizeComponentsMap(e) {
+    const t = (e ?? []).filter(({ componentName: s, package: o }) => s && o), n = /* @__PURE__ */ new Map();
+    return t.forEach(
+      (s) => !n.has(s.componentName) && n.set(s.componentName, s)
+    ), [...n.values()];
+  }
+  async formatWithPrettier(e, t) {
+    try {
+      const [
+        { format: n },
+        { default: s },
+        { default: o },
+        { default: c },
+        { default: a },
+        { default: r }
+      ] = await Promise.all([
+        import("prettier/standalone"),
+        import("prettier/plugins/html"),
+        import("prettier/plugins/babel"),
+        import("prettier/plugins/estree"),
+        import("prettier/plugins/postcss"),
+        import("prettier/plugins/typescript")
+      ]);
+      return await n(e, {
+        ...t,
+        plugins: [s, o, c, a, r]
+      });
+    } catch {
+      return e;
+    }
+  }
+  async generate({
+    pageInfo: e,
+    componentsMap: t = [],
+    formatWithPrettier: n = !1
+  }) {
+    const s = this.normalizeComponentsMap(t);
+    return this.generatePageCode({
+      pageInfo: e,
+      componentsMap: s,
+      formatWithPrettier: n
+    });
+  }
+}
+const K = (m) => new k().generate(m);
+export {
+  k as V,
+  K as g
+};
+//# sourceMappingURL=vue-code-generator-CwPQ3GDh.js.map