@specverse/engines 4.1.30 → 4.2.0

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

@@ -1,321 +0,0 @@
-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
-};