@specverse/engines 4.1.5 → 4.1.6

package/dist/libs/instance-factories/views/templates/shared/syntax-mapper.js

@@ -0,0 +1,321 @@
+const STATE_PATTERNS = {
+  /**
+   * Declare a state variable
+   * Variables: name, Name (capitalized), type (optional), initial
+   */
+  stateDeclaration: {
+    react: "const [${name}, set${Name}] = useState<${type}>(${initial});",
+    vue: "const ${name} = ref<${type}>(${initial});",
+    svelte: "let ${name}: ${type} = ${initial};",
+    angular: "${name}: ${type} = ${initial};",
+    runtime: "const [${name}, set${Name}] = useState<${type}>(${initial});"
+  },
+  /**
+   * Update a state variable
+   * Variables: name, Name (capitalized), value
+   */
+  stateUpdate: {
+    react: "set${Name}(${value});",
+    vue: "${name}.value = ${value};",
+    svelte: "${name} = ${value};",
+    angular: "this.${name} = ${value};",
+    runtime: "set${Name}(${value});"
+  },
+  /**
+   * Access a state variable value
+   * Variables: name
+   */
+  stateGetter: {
+    react: "${name}",
+    vue: "${name}.value",
+    svelte: "${name}",
+    angular: "this.${name}",
+    runtime: "${name}"
+  }
+};
+const RENDER_PATTERNS = {
+  /**
+   * Render array of items with loop
+   * Variables: array, item, key, Component
+   */
+  loopRender: {
+    react: "{${array}.map((${item}) => <${Component} key={${item}.${key}} ${item}={${item}} />)}",
+    vue: '<${Component} v-for="${item} in ${array}" :key="${item}.${key}" :${item}="${item}" />',
+    svelte: "{#each ${array} as ${item} (${item}.${key})}<${Component} ${item}={${item}} />{/each}",
+    angular: '<${component} *ngFor="let ${item} of ${array}; trackBy: track${Item}" [${item}]="${item}"></${component}>',
+    runtime: "{${array}.map((${item}) => createElement(${Component}, { key: ${item}.${key}, ${item} }))}"
+  },
+  /**
+   * Conditional rendering
+   * Variables: condition, Component, props (optional)
+   */
+  conditionalRender: {
+    react: "{${condition} && <${Component} ${props} />}",
+    vue: '<${Component} v-if="${condition}" ${props} />',
+    svelte: "{#if ${condition}}<${Component} ${props} />{/if}",
+    angular: '<${component} *ngIf="${condition}" ${props}></${component}>',
+    runtime: "{${condition} && createElement(${Component}, ${props})}"
+  },
+  /**
+   * Render a component with props
+   * Variables: Component, props
+   */
+  componentRender: {
+    react: "<${Component} ${props} />",
+    vue: "<${Component} ${props} />",
+    svelte: "<${Component} ${props} />",
+    angular: "<${component} ${props}></${component}>",
+    runtime: "createElement(${Component}, ${props})"
+  }
+};
+const EVENT_PATTERNS = {
+  /**
+   * Declare event handler function
+   * Variables: name, Name (capitalized), params, body
+   */
+  eventHandler: {
+    react: "const handle${Name} = (${params}) => {\n  ${body}\n};",
+    vue: "const handle${Name} = (${params}) => {\n  ${body}\n};",
+    svelte: "function handle${Name}(${params}) {\n  ${body}\n}",
+    angular: "handle${Name}(${params}): void {\n  ${body}\n}",
+    runtime: "const handle${Name} = (${params}) => {\n  ${body}\n};"
+  },
+  /**
+   * Bind event to handler
+   * Variables: event, handler
+   */
+  eventBinding: {
+    react: "${event}={${handler}}",
+    vue: '@${event}="${handler}"',
+    svelte: "on:${event}={${handler}}",
+    angular: '(${event})="${handler}($event)"',
+    runtime: "${event}: ${handler}"
+  }
+};
+const LIFECYCLE_PATTERNS = {
+  /**
+   * Component mount lifecycle
+   * Variables: body
+   */
+  onMount: {
+    react: "useEffect(() => {\n  ${body}\n}, []);",
+    vue: "onMounted(() => {\n  ${body}\n});",
+    svelte: "onMount(() => {\n  ${body}\n});",
+    angular: "ngOnInit(): void {\n  ${body}\n}",
+    runtime: "useEffect(() => {\n  ${body}\n}, []);"
+  },
+  /**
+   * Component unmount lifecycle
+   * Variables: body
+   */
+  onUnmount: {
+    react: "useEffect(() => {\n  return () => {\n    ${body}\n  };\n}, []);",
+    vue: "onUnmounted(() => {\n  ${body}\n});",
+    svelte: "onDestroy(() => {\n  ${body}\n});",
+    angular: "ngOnDestroy(): void {\n  ${body}\n}",
+    runtime: "useEffect(() => {\n  return () => {\n    ${body}\n  };\n}, []);"
+  },
+  /**
+   * Value change/update lifecycle
+   * Variables: dependencies, body
+   */
+  onUpdate: {
+    react: "useEffect(() => {\n  ${body}\n}, [${dependencies}]);",
+    vue: "watch([${dependencies}], () => {\n  ${body}\n});",
+    svelte: "$: if (${dependencies}) {\n  ${body}\n}",
+    angular: "ngOnChanges(changes: SimpleChanges): void {\n  ${body}\n}",
+    runtime: "useEffect(() => {\n  ${body}\n}, [${dependencies}]);"
+  }
+};
+const PROP_PATTERNS = {
+  /**
+   * Declare component props/properties
+   * Variables: name, type, required (boolean)
+   */
+  propDeclaration: {
+    react: '${name}${required ? "" : "?"}: ${type}',
+    vue: "${name}: { type: ${type}, required: ${required} }",
+    svelte: 'export let ${name}: ${type}${required ? "" : " | undefined"};',
+    angular: '@Input() ${name}${required ? "!" : "?"}: ${type};',
+    runtime: '${name}${required ? "" : "?"}: ${type}'
+  },
+  /**
+   * Access props inside component
+   * Variables: name
+   */
+  propAccess: {
+    react: "${name}",
+    vue: "props.${name}",
+    svelte: "${name}",
+    angular: "this.${name}",
+    runtime: "${name}"
+  },
+  /**
+   * Bind prop value to component
+   * Variables: name, value
+   */
+  propBinding: {
+    react: "${name}={${value}}",
+    vue: ':${name}="${value}"',
+    svelte: "${name}={${value}}",
+    angular: '[${name}]="${value}"',
+    runtime: "${name}: ${value}"
+  }
+};
+const IMPORT_PATTERNS = {
+  /**
+   * Import a component
+   * Variables: Component, path
+   */
+  componentImport: {
+    react: "import ${Component} from '${path}';",
+    vue: "import ${Component} from '${path}';",
+    svelte: "import ${Component} from '${path}';",
+    angular: "import { ${Component} } from '${path}';",
+    runtime: "import ${Component} from '${path}';"
+  },
+  /**
+   * Import hooks/composables
+   * Variables: hooks (comma-separated), source
+   */
+  hookImport: {
+    react: "import { ${hooks} } from '${source}';",
+    vue: "import { ${hooks} } from '${source}';",
+    svelte: "import { ${hooks} } from '${source}';",
+    angular: "import { ${hooks} } from '${source}';",
+    runtime: "import { ${hooks} } from '${source}';"
+  },
+  /**
+   * Import from library
+   * Variables: exports, library
+   */
+  libraryImport: {
+    react: "import { ${exports} } from '${library}';",
+    vue: "import { ${exports} } from '${library}';",
+    svelte: "import { ${exports} } from '${library}';",
+    angular: "import { ${exports} } from '${library}';",
+    runtime: "import { ${exports} } from '${library}';"
+  }
+};
+const SYNTAX_PATTERNS = {
+  // State
+  stateDeclaration: STATE_PATTERNS.stateDeclaration,
+  stateUpdate: STATE_PATTERNS.stateUpdate,
+  stateGetter: STATE_PATTERNS.stateGetter,
+  // Rendering
+  loopRender: RENDER_PATTERNS.loopRender,
+  conditionalRender: RENDER_PATTERNS.conditionalRender,
+  componentRender: RENDER_PATTERNS.componentRender,
+  // Events
+  eventHandler: EVENT_PATTERNS.eventHandler,
+  eventBinding: EVENT_PATTERNS.eventBinding,
+  // Lifecycle
+  onMount: LIFECYCLE_PATTERNS.onMount,
+  onUnmount: LIFECYCLE_PATTERNS.onUnmount,
+  onUpdate: LIFECYCLE_PATTERNS.onUpdate,
+  // Props
+  propDeclaration: PROP_PATTERNS.propDeclaration,
+  propAccess: PROP_PATTERNS.propAccess,
+  propBinding: PROP_PATTERNS.propBinding,
+  // Imports
+  componentImport: IMPORT_PATTERNS.componentImport,
+  hookImport: IMPORT_PATTERNS.hookImport,
+  libraryImport: IMPORT_PATTERNS.libraryImport
+};
+function replaceTemplateVariables(template, variables) {
+  let result = template;
+  for (const [key, value] of Object.entries(variables)) {
+    const capitalizedKey = key.charAt(0).toUpperCase() + key.slice(1);
+    const capitalizedPattern = new RegExp(`\\$\\{${capitalizedKey}\\}`, "g");
+    result = result.replace(capitalizedPattern, String(value).charAt(0).toUpperCase() + String(value).slice(1));
+    const normalPattern = new RegExp(`\\$\\{${key}\\}`, "g");
+    result = result.replace(normalPattern, String(value));
+  }
+  result = result.replace(/\$\{(\w+)\s*\?\s*"([^"]*)"\s*:\s*"([^"]*)"\}/g, (match, varName, trueVal, falseVal) => {
+    const varValue = variables[varName];
+    return varValue ? trueVal : falseVal;
+  });
+  return result;
+}
+function getSyntaxPattern(pattern, framework, variables) {
+  const syntaxPattern = SYNTAX_PATTERNS[pattern];
+  if (!syntaxPattern) {
+    throw new Error(`Unknown syntax pattern: ${pattern}`);
+  }
+  const template = syntaxPattern[framework];
+  if (!template) {
+    throw new Error(`Framework ${framework} not supported for pattern ${pattern}`);
+  }
+  return replaceTemplateVariables(template, variables);
+}
+function getAllFrameworkSyntax(pattern, variables) {
+  const frameworks = ["react", "vue", "svelte", "angular", "runtime"];
+  const result = {};
+  for (const framework of frameworks) {
+    result[framework] = getSyntaxPattern(pattern, framework, variables);
+  }
+  return result;
+}
+function hasPattern(pattern, framework) {
+  const syntaxPattern = SYNTAX_PATTERNS[pattern];
+  return Boolean(syntaxPattern && syntaxPattern[framework] !== void 0);
+}
+function getAllPatternKeys() {
+  return Object.keys(SYNTAX_PATTERNS);
+}
+function getPatternsByCategory(category) {
+  const categoryMap = {
+    state: ["stateDeclaration", "stateUpdate", "stateGetter"],
+    render: ["loopRender", "conditionalRender", "componentRender"],
+    event: ["eventHandler", "eventBinding"],
+    lifecycle: ["onMount", "onUnmount", "onUpdate"],
+    prop: ["propDeclaration", "propAccess", "propBinding"],
+    import: ["componentImport", "hookImport", "libraryImport"]
+  };
+  return categoryMap[category] || [];
+}
+function generateStateCode(framework, stateName, stateType, initialValue) {
+  const declaration = getSyntaxPattern("stateDeclaration", framework, {
+    name: stateName,
+    Name: stateName.charAt(0).toUpperCase() + stateName.slice(1),
+    type: stateType,
+    initial: initialValue
+  });
+  const update = (value) => getSyntaxPattern("stateUpdate", framework, {
+    name: stateName,
+    Name: stateName.charAt(0).toUpperCase() + stateName.slice(1),
+    value
+  });
+  const get = getSyntaxPattern("stateGetter", framework, { name: stateName });
+  return { declaration, update, get };
+}
+function generateEventCode(framework, eventName, handlerName, params, body) {
+  const handler = getSyntaxPattern("eventHandler", framework, {
+    name: handlerName,
+    Name: handlerName.charAt(0).toUpperCase() + handlerName.slice(1),
+    params,
+    body
+  });
+  const binding = getSyntaxPattern("eventBinding", framework, {
+    event: eventName,
+    handler: `handle${handlerName.charAt(0).toUpperCase() + handlerName.slice(1)}`
+  });
+  return { handler, binding };
+}
+export {
+  EVENT_PATTERNS,
+  IMPORT_PATTERNS,
+  LIFECYCLE_PATTERNS,
+  PROP_PATTERNS,
+  RENDER_PATTERNS,
+  STATE_PATTERNS,
+  SYNTAX_PATTERNS,
+  generateEventCode,
+  generateStateCode,
+  getAllFrameworkSyntax,
+  getAllPatternKeys,
+  getPatternsByCategory,
+  getSyntaxPattern,
+  hasPattern,
+  replaceTemplateVariables
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@specverse/engines",
-  "version": "4.1.5",
+  "version": "4.1.6",
   "description": "SpecVerse toolchain — parser, inference, realize, generators, AI, registry",
   "type": "module",
   "main": "dist/index.js",
@@ -38,7 +38,7 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && node scripts/compile-libs.mjs",
     "clean": "rm -rf dist"
   },
   "dependencies": {
@@ -53,6 +53,7 @@
   },
   "devDependencies": {
     "@types/node": "^25.5.0",
+    "esbuild": "^0.25.0",
     "typescript": "^5.4.0"
   },
   "files": [