@specverse/engine-realize 3.5.3

package/libs/instance-factories/tools/templates/vscode/vscode-extension-generator.ts

@@ -0,0 +1,214 @@
+/**
+ * VSCode Extension Generator
+ *
+ * Generates a complete VSCode extension package from the SpecVerse spec.
+ * - package.json with commands derived from CLI spec + entity types
+ * - Ships static assets (tmLanguage, themes, schemas, extension.ts)
+ *
+ * The spec's ToolsSupport component describes WHAT the extension provides.
+ * This generator decides HOW to package it.
+ */
+
+import type { TemplateContext } from '@specverse/engine-realize';
+import { readFileSync, existsSync, readdirSync, statSync, mkdirSync, writeFileSync, copyFileSync } from 'fs';
+import { join, dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
+
+const __generatorDir = dirname(fileURLToPath(import.meta.url));
+
+export default function generateVSCodeExtension(context: TemplateContext): string {
+  const { spec, outputDir } = context;
+
+  const extensionDir = join(outputDir || '.', 'tools', 'vscode-extension');
+  if (!existsSync(extensionDir)) mkdirSync(extensionDir, { recursive: true });
+
+  // 1. Extract CLI commands — from spec if available, otherwise use standard SpecVerse commands
+  let cliCommands = extractCLICommands(spec);
+  if (cliCommands.length === 0) {
+    cliCommands = getStandardCommands();
+  }
+
+  // 2. Extract entity types for syntax highlighting keywords
+  const entityTypes = extractEntityTypes(spec);
+
+  // 3. Generate package.json
+  const packageJson = generatePackageJson(cliCommands, entityTypes);
+  writeFileSync(join(extensionDir, 'package.json'), JSON.stringify(packageJson, null, 2) + '\n');
+
+  // 4. Copy static assets
+  const staticDir = join(__generatorDir, 'static');
+  if (existsSync(staticDir)) {
+    copyRecursive(staticDir, extensionDir);
+  }
+
+  // 5. Create src directory and copy extension.ts
+  const srcDir = join(extensionDir, 'src');
+  if (!existsSync(srcDir)) mkdirSync(srcDir, { recursive: true });
+  const extTs = join(staticDir, 'extension.ts');
+  if (existsSync(extTs)) {
+    copyFileSync(extTs, join(srcDir, 'extension.ts'));
+  }
+
+  // 6. Generate build script
+  const buildScript = `const esbuild = require('esbuild');
+esbuild.build({
+  entryPoints: ['src/extension.ts'],
+  bundle: true,
+  outfile: 'dist/extension.js',
+  external: ['vscode'],
+  format: 'cjs',
+  platform: 'node',
+}).catch(() => process.exit(1));
+`;
+  const scriptsDir = join(extensionDir, 'scripts');
+  if (!existsSync(scriptsDir)) mkdirSync(scriptsDir, { recursive: true });
+  writeFileSync(join(scriptsDir, 'build.js'), buildScript);
+
+  return `VSCode extension generated in: ${extensionDir}\n  ${cliCommands.length} commands, ${entityTypes.length} entity keywords`;
+}
+
+function extractCLICommands(spec: any): Array<{ command: string; title: string; category: string }> {
+  const commands: Array<{ command: string; title: string; category: string }> = [];
+
+  // Walk components looking for CLI commands section
+  // Handles both object form (raw spec: components.CLI.commands) and array form (inferred)
+  const components = spec?.components || {};
+  const componentList = Array.isArray(components) ? components : Object.entries(components).map(([name, data]) => ({ name, ...(data as any) }));
+
+  for (const comp of componentList) {
+    const cliCommands = (comp as any)?.commands;
+    if (!cliCommands) continue;
+
+    for (const [rootName, rootDef] of Object.entries(cliCommands as Record<string, any>)) {
+      const subcommands = (rootDef as any)?.subcommands || {};
+      for (const [subName, subDef] of Object.entries(subcommands as Record<string, any>)) {
+        const sub = subDef as any;
+        const nestedSubs = sub?.subcommands;
+        if (nestedSubs) {
+          for (const [nestedName, nestedDef] of Object.entries(nestedSubs as Record<string, any>)) {
+            commands.push({
+              command: `specverse.${subName}.${nestedName}`,
+              title: `${capitalize(subName)} ${capitalize(nestedName)}: ${(nestedDef as any).description || ''}`,
+              category: 'SpecVerse',
+            });
+          }
+        } else {
+          commands.push({
+            command: `specverse.${subName}`,
+            title: `${capitalize(subName)}: ${sub.description || ''}`,
+            category: 'SpecVerse',
+          });
+        }
+      }
+    }
+  }
+
+  return commands;
+}
+
+function extractEntityTypes(spec: any): string[] {
+  const types = new Set<string>();
+  const components = spec?.components || [];
+  for (const component of Array.isArray(components) ? components : Object.values(components)) {
+    const comp = component as any;
+    const models = comp?.models;
+    if (models) {
+      if (Array.isArray(models)) {
+        models.forEach((m: any) => types.add(m.name));
+      } else {
+        Object.keys(models).forEach(name => types.add(name));
+      }
+    }
+  }
+  return [...types];
+}
+
+function generatePackageJson(
+  commands: Array<{ command: string; title: string; category: string }>,
+  _entityTypes: string[]
+) {
+  return {
+    name: 'specverse',
+    displayName: 'SpecVerse',
+    description: 'SpecVerse specification language support — syntax highlighting, validation, IntelliSense',
+    version: context.spec?.version || '1.0.0',
+    publisher: 'specverse',
+    engines: { vscode: '^1.80.0' },
+    categories: ['Programming Languages', 'Linters', 'Snippets'],
+    activationEvents: ['onLanguage:specverse'],
+    main: './dist/extension.js',
+    contributes: {
+      languages: [{
+        id: 'specverse',
+        aliases: ['SpecVerse', 'specly'],
+        extensions: ['.specly', '.specverse'],
+        configuration: './language-configuration.json',
+      }],
+      grammars: [{
+        language: 'specverse',
+        scopeName: 'source.specverse',
+        path: './syntaxes/specverse.tmLanguage.json',
+      }],
+      jsonValidation: [{
+        fileMatch: ['*.specly', '*.specverse'],
+        url: './schemas/specverse-v3-schema.json',
+      }],
+      themes: [
+        { label: 'SpecVerse Dark', uiTheme: 'vs-dark', path: './themes/specverse-complete-theme.json' },
+        { label: 'SpecVerse Basic', uiTheme: 'vs-dark', path: './themes/specverse-basic-theme.json' },
+      ],
+      commands: commands.map(c => ({
+        command: c.command,
+        title: c.title,
+        category: c.category,
+      })),
+    },
+    scripts: {
+      'vscode:prepublish': 'npm run build',
+      build: 'node scripts/build.js',
+      package: 'npx @vscode/vsce package',
+    },
+    devDependencies: {
+      '@types/vscode': '^1.80.0',
+      '@vscode/vsce': '^3.0.0',
+      esbuild: '^0.19.0',
+    },
+  };
+}
+
+function copyRecursive(src: string, dest: string) {
+  for (const entry of readdirSync(src)) {
+    if (entry === 'extension.ts') continue; // Handled separately into src/
+    const srcPath = join(src, entry);
+    const destPath = join(dest, entry);
+    if (statSync(srcPath).isDirectory()) {
+      if (!existsSync(destPath)) mkdirSync(destPath, { recursive: true });
+      copyRecursive(srcPath, destPath);
+    } else {
+      copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+function getStandardCommands(): Array<{ command: string; title: string; category: string }> {
+  return [
+    { command: 'specverse.validate', title: 'Validate specification', category: 'SpecVerse' },
+    { command: 'specverse.infer', title: 'Infer full architecture', category: 'SpecVerse' },
+    { command: 'specverse.realize', title: 'Generate code from specification', category: 'SpecVerse' },
+    { command: 'specverse.init', title: 'Initialize new project', category: 'SpecVerse' },
+    { command: 'specverse.gen.diagrams', title: 'Generate Mermaid diagrams', category: 'SpecVerse' },
+    { command: 'specverse.gen.docs', title: 'Generate documentation', category: 'SpecVerse' },
+    { command: 'specverse.gen.uml', title: 'Generate UML diagrams', category: 'SpecVerse' },
+    { command: 'specverse.dev.format', title: 'Format .specly file', category: 'SpecVerse' },
+    { command: 'specverse.dev.watch', title: 'Watch and validate on change', category: 'SpecVerse' },
+    { command: 'specverse.dev.quick', title: 'Quick validation', category: 'SpecVerse' },
+    { command: 'specverse.cache', title: 'Manage import cache', category: 'SpecVerse' },
+    { command: 'specverse.ai.docs', title: 'Generate AI implementation prompt', category: 'SpecVerse' },
+    { command: 'specverse.ai.suggest', title: 'Get spec improvement suggestions', category: 'SpecVerse' },
+    { command: 'specverse.ai.template', title: 'Load AI prompt template', category: 'SpecVerse' },
+  ];
+}
+
+function capitalize(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}

package/libs/instance-factories/validation/templates/zod/validation-generator.ts

@@ -0,0 +1,46 @@
+/**
+ * Zod Validation Generator Wrapper
+ *
+ * Wraps the existing generate-validation.js script for use with the
+ * implementation types system.
+ *
+ * NOTE: This is a wrapper around scripts/generate-validation.js
+ * TODO: Convert generate-validation.js to native TypeScript template generator
+ *       See zod-validation.yaml for conversion notes.
+ */
+
+import type { TemplateContext } from '@specverse/engine-realize';
+import { generateValidation } from '../../../../../scripts/generate-validation.js';
+
+/**
+ * Generate validation schemas by delegating to the existing generator
+ */
+export default function generateValidationSchemas(context: TemplateContext): string {
+  const { spec, implType, outputDir } = context;
+
+  if (!spec) {
+    throw new Error('Specification is required in template context');
+  }
+
+  // Extract configuration from implementation type
+  const config = implType.configuration || {};
+
+  const options = {
+    framework: config.framework || 'zod',
+    generateJsonSchema: config.generateJsonSchema !== false,
+    stripUnknown: config.stripUnknown !== false,
+    abortEarly: config.abortEarly || false
+  };
+
+  // Call the existing generator
+  const result = generateValidation(spec, outputDir || './validation', options);
+
+  // Return summary information
+  return JSON.stringify({
+    message: 'Validation schemas generated successfully',
+    modelCount: result.modelCount,
+    schemaCount: result.schemaCount,
+    outputDir: result.outputDir,
+    files: result.files
+  }, null, 2);
+}

package/libs/instance-factories/validation/zod.yaml

@@ -0,0 +1,56 @@
+name: ZodValidation
+version: "1.0.0"
+category: service
+description: "Zod schema generator for runtime validation with type inference"
+
+metadata:
+  author: "SpecVerse Team"
+  license: "MIT"
+  tags: [zod, validation, typescript, schema]
+
+compatibility:
+  specverse: "^3.3.0"
+  node: ">=18.0.0"
+
+capabilities:
+  provides:
+    - "validation.runtime"
+    - "validation.zod"
+    - "validation.jsonschema"
+  requires: []  # Fixed: removed incorrect api.rest dependency
+
+technology:
+  runtime: "node"
+  language: "typescript"
+  framework: "zod"
+  validation: "zod"
+
+dependencies:
+  runtime:
+    - name: "zod"
+      version: "^3.22.0"
+  dev:
+    - name: "@types/node"
+      version: "^20.8.0"
+    - name: "typescript"
+      version: "^5.2.0"
+
+codeTemplates:
+  validation:
+    engine: typescript
+    generator: "libs/instance-factories/validation/templates/zod/validation-generator.ts"
+    outputPattern: "src/validation/{model}.validation.ts"
+
+configuration:
+  framework: "zod"
+  generateJsonSchema: true
+  stripUnknown: true
+  abortEarly: false
+
+# NOTE: This implementation type wraps the existing generate-validation.js script
+# TODO: Future enhancement - Convert generate-validation.js to native TypeScript template generator
+#       The current script generates Zod schemas, JSON schemas, and validation functions.
+#       Converting to native templates would require breaking it into multiple template files:
+#       - zod-schema-generator.ts (Zod schema definitions)
+#       - json-schema-generator.ts (JSON Schema for Fastify)
+#       - validation-function-generator.ts (validation helper functions)

package/libs/instance-factories/views/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * View Instance Factories - Public API
+ *
+ * Exports all view generation and rendering components
+ */
+export * from './templates/shared/base-generator.js';
+export * from './templates/shared/property-mapper.js';
+export * from './templates/shared/syntax-mapper.js';
+export * from './templates/shared/component-metadata.js';
+export * from './templates/shared/adapter-types.js';
+export * from './templates/react/react-component-generator.js';
+export * from './templates/runtime/runtime-view-renderer.js';
+//# sourceMappingURL=index.d.ts.map

package/libs/instance-factories/views/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,cAAc,sCAAsC,CAAC;AACrD,cAAc,uCAAuC,CAAC;AACtD,cAAc,qCAAqC,CAAC;AACpD,cAAc,0CAA0C,CAAC;AACzD,cAAc,qCAAqC,CAAC;AAGpD,cAAc,gDAAgD,CAAC;AAG/D,cAAc,8CAA8C,CAAC"}

package/libs/instance-factories/views/index.js

@@ -0,0 +1,18 @@
+/**
+ * View Instance Factories - Public API
+ *
+ * Exports all view generation and rendering components
+ */
+// Shared components
+export * from './templates/shared/base-generator.js';
+export * from './templates/shared/property-mapper.js';
+export * from './templates/shared/syntax-mapper.js';
+export * from './templates/shared/component-metadata.js';
+export * from './templates/shared/adapter-types.js';
+// React generator
+export * from './templates/react/react-component-generator.js';
+// Runtime renderer
+export * from './templates/runtime/runtime-view-renderer.js';
+// Adapters registry (when we add adapters)
+// export * from './adapters/index.js';
+//# sourceMappingURL=index.js.map

package/libs/instance-factories/views/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,oBAAoB;AACpB,cAAc,sCAAsC,CAAC;AACrD,cAAc,uCAAuC,CAAC;AACtD,cAAc,qCAAqC,CAAC;AACpD,cAAc,0CAA0C,CAAC;AACzD,cAAc,qCAAqC,CAAC;AAEpD,kBAAkB;AAClB,cAAc,gDAAgD,CAAC;AAE/D,mBAAmB;AACnB,cAAc,8CAA8C,CAAC;AAE7D,2CAA2C;AAC3C,uCAAuC"}

package/libs/instance-factories/views/index.ts

@@ -0,0 +1,45 @@
+/**
+ * View Instance Factories - Public API
+ *
+ * Exports all view generation and rendering components
+ */
+
+// Shared components
+export {
+  BaseComponentGenerator,
+  ViewSpec,
+  StateDefinition,
+  EventDefinition,
+  UIComponent,
+  RenderContext,
+  GeneratorConfig,
+  extractComponentTypes,
+  countComponents,
+  validateNestingDepth
+} from './templates/shared/base-generator.js';
+
+export * from './templates/shared/property-mapper.js';
+export * from './templates/shared/syntax-mapper.js';
+export * from './templates/shared/component-metadata.js';
+export {
+  ATOMIC_COMPONENTS_REGISTRY,
+  AtomicComponentDefinition
+} from './templates/shared/atomic-components-registry.js';
+export {
+  ComponentAdapter,
+  ComponentLibraryAdapter,
+  ComponentMapping,
+  renderProps,
+  indent,
+  wrapWithChildren
+} from './templates/shared/adapter-types.js';
+
+// React generator
+export * from './templates/react/react-component-generator.js';
+
+// Runtime renderer - exported from @specverse/lang/views/runtime instead
+// (not compiled with libs because it has React dependencies)
+// export * from './templates/runtime/runtime-view-renderer.js';
+
+// Adapters registry (when we add adapters)
+// export * from './adapters/index.js';

package/libs/instance-factories/views/react-components.yaml

@@ -0,0 +1,129 @@
+name: ReactComponents
+version: "1.0.0"
+category: view
+description: "React components for UI layer with TypeScript and modern hooks"
+
+metadata:
+  author: "SpecVerse Team"
+  license: "MIT"
+  tags: [react, components, ui, view, typescript, hooks]
+
+compatibility:
+  specverse: "^3.3.0"
+  node: ">=18.0.0"
+
+capabilities:
+  provides:
+    - "ui.components"
+    - "ui.views"
+    - "ui.forms"
+  requires:
+    - "api.rest"  # Needs API endpoints for data fetching
+
+technology:
+  runtime: "browser"
+  language: "typescript"
+  framework: "react"
+  version: "^18.2.0"
+
+dependencies:
+  runtime:
+    - name: "react"
+      version: "^18.2.0"
+    - name: "react-dom"
+      version: "^18.2.0"
+    - name: "react-router-dom"
+      version: "^6.18.0"
+    - name: "@tanstack/react-query"
+      version: "^5.0.0"
+    - name: "react-hook-form"
+      version: "^7.48.0"
+    - name: "zod"
+      version: "^3.22.0"
+    - name: "@hookform/resolvers"
+      version: "^3.3.0"
+
+  dev:
+    - name: "@types/react"
+      version: "^18.2.0"
+    - name: "@types/react-dom"
+      version: "^18.2.0"
+    - name: "typescript"
+      version: "^5.2.0"
+    - name: "vite"
+      version: "^5.0.0"
+    - name: "@vitejs/plugin-react"
+      version: "^4.2.0"
+
+codeTemplates:
+  # Component templates
+  components:
+    engine: typescript
+    generator: "libs/instance-factories/views/templates/react/components-generator.ts"
+    outputPattern: "{frontendDir}/src/components/{view.name}.tsx"
+
+  forms:
+    engine: typescript
+    generator: "libs/instance-factories/views/templates/react/forms-generator.ts"
+    outputPattern: "{frontendDir}/src/components/forms/{model}Form.tsx"
+
+  hooks:
+    engine: typescript
+    generator: "libs/instance-factories/views/templates/react/hooks-generator.ts"
+    outputPattern: "{frontendDir}/src/hooks/use{model}.ts"
+
+  types:
+    engine: typescript
+    generator: "libs/instance-factories/views/templates/react/types-generator.ts"
+    outputPattern: "{frontendDir}/src/types/{model}.ts"
+
+  # Infrastructure templates (NEW)
+  indexHtml:
+    engine: typescript
+    generator: "libs/instance-factories/views/templates/react/index-html-generator.ts"
+    outputPattern: "{frontendDir}/index.html"
+
+  app:
+    engine: typescript
+    generator: "libs/instance-factories/views/templates/react/app-generator.ts"
+    outputPattern: "{frontendDir}/src/App.tsx"
+
+  mainTsx:
+    engine: typescript
+    generator: "libs/instance-factories/views/templates/react/main-tsx-generator.ts"
+    outputPattern: "{frontendDir}/src/main.tsx"
+
+  viteConfig:
+    engine: typescript
+    generator: "libs/instance-factories/views/templates/react/vite-config-generator.ts"
+    outputPattern: "{frontendDir}/vite.config.ts"
+
+  router:
+    engine: typescript
+    generator: "libs/instance-factories/views/templates/react/router-generator.ts"
+    outputPattern: "{frontendDir}/src/router.tsx"
+
+  indexCss:
+    engine: typescript
+    generator: "libs/instance-factories/views/templates/react/index-css-generator.ts"
+    outputPattern: "{frontendDir}/src/index.css"
+
+configuration:
+  outputStructure: "monorepo"
+  frontendDir: "frontend"
+
+  styling:
+    framework: "tailwindcss"
+    classNaming: "bem"
+
+  state:
+    management: "react-query"
+    caching: true
+
+  forms:
+    validation: "zod"
+    errorHandling: "inline"
+
+  routing:
+    library: "react-router"
+    version: "^6.18.0"