@specverse/engines 4.1.5 → 4.1.7

package/dist/libs/instance-factories/applications/templates/react/relationship-field-generator.js

@@ -0,0 +1,143 @@
+async function generate(context) {
+  return `/**
+ * RelationshipField - Handles belongsTo, hasMany, hasOne relationships
+ *
+ * Renders appropriate UI based on relationship type:
+ * - belongsTo: Dropdown select with target entities
+ * - hasMany: Count display (in view mode)
+ * - hasOne: Entity display (in view mode)
+ */
+
+import { useEntitiesQuery } from '../../hooks/useApi';
+import type { RelationshipDefinition } from '../../types/api';
+
+interface RelationshipFieldProps {
+  /**
+   * The attribute name (e.g., 'author')
+   */
+  name: string;
+
+  /**
+   * Relationship definition from schema
+   */
+  relationship: RelationshipDefinition;
+
+  /**
+   * Current value (entity ID for belongsTo, array for hasMany)
+   */
+  value: string | string[] | null;
+
+  /**
+   * Change handler
+   */
+  onChange: (value: string | string[] | null) => void;
+
+  /**
+   * Whether field is required
+   */
+  required?: boolean;
+
+  /**
+   * Whether in read-only mode
+   */
+  readOnly?: boolean;
+}
+
+/**
+ * Get display name for an entity (prefers name, then title, then id)
+ */
+function getEntityDisplayName(entity: any): string {
+  return entity.data?.name || entity.data?.title || entity.id;
+}
+
+export function RelationshipField({
+  name,
+  relationship,
+  value,
+  onChange,
+  required = false,
+  readOnly = false,
+}: RelationshipFieldProps) {
+  const relType = relationship.type;
+  const targetModel = relationship.model || relationship.targetModel || null;
+  const controllerName = targetModel ? \`\${targetModel}Controller\` : null;
+
+  // Fetch target entities
+  const { data: targetEntities = [], isLoading } = useEntitiesQuery(controllerName, targetModel);
+
+  // Handle belongsTo relationships
+  if (relType === 'belongsTo') {
+    return (
+      <div className="space-y-1">
+        <label htmlFor={name} className="block text-sm font-medium text-gray-300">
+          {name.charAt(0).toUpperCase() + name.slice(1)}
+          {required && <span className="text-red-400 ml-1">*</span>}
+        </label>
+        <select
+          id={name}
+          value={value as string || ''}
+          onChange={(e) => onChange(e.target.value || null)}
+          disabled={readOnly || isLoading}
+          required={required}
+          className="w-full px-3 py-2 bg-slate-700 border border-slate-600 text-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
+        >
+          <option value="">-- Select {targetModel} --</option>
+          {targetEntities.map((entity) => (
+            <option key={entity.id} value={entity.id}>
+              {getEntityDisplayName(entity)}
+            </option>
+          ))}
+        </select>
+        {isLoading && (
+          <p className="text-sm text-gray-400">Loading {targetModel} options...</p>
+        )}
+      </div>
+    );
+  }
+
+  // Handle hasMany relationships (read-only display)
+  if (relType === 'hasMany') {
+    const count = Array.isArray(value) ? value.length : 0;
+    return (
+      <div className="space-y-1">
+        <label className="block text-sm font-medium text-gray-300">
+          {name.charAt(0).toUpperCase() + name.slice(1)}
+        </label>
+        <div className="px-3 py-2 bg-slate-800 border border-slate-700 rounded-md text-gray-300">
+          {count} {targetModel}(s)
+        </div>
+      </div>
+    );
+  }
+
+  // Handle hasOne relationships (read-only display)
+  if (relType === 'hasOne') {
+    return (
+      <div className="space-y-1">
+        <label className="block text-sm font-medium text-gray-300">
+          {name.charAt(0).toUpperCase() + name.slice(1)}
+        </label>
+        <div className="px-3 py-2 bg-slate-800 border border-slate-700 rounded-md text-gray-300">
+          {value ? \`\${targetModel} #\${value}\` : 'None'}
+        </div>
+      </div>
+    );
+  }
+
+  // Fallback for unknown relationship types
+  return (
+    <div className="space-y-1">
+      <label className="block text-sm font-medium text-gray-300">
+        {name.charAt(0).toUpperCase() + name.slice(1)}
+      </label>
+      <div className="px-3 py-2 bg-slate-800 border border-slate-700 rounded-md text-gray-400 italic">
+        Unsupported relationship type: {relType}
+      </div>
+    </div>
+  );
+}
+`;
+}
+export {
+  generate
+};

package/dist/libs/instance-factories/applications/templates/react/runtime-app-tsx-generator.js

@@ -0,0 +1,101 @@
+function generateRuntimeAppTsx(context) {
+  const { spec } = context;
+  const appName = spec?.metadata?.name || spec?.name || "SpecVerse App";
+  return `import { useState, useEffect, useMemo } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import yaml from 'js-yaml';
+import { RuntimeViewProvider } from '@specverse/runtime/views/react';
+import { DevShell } from '@specverse/runtime/views/react';
+import {
+  useEntitiesQuery,
+  useModelSchemaQuery,
+  useExecuteOperationMutation,
+  useTransitionStateMutation,
+} from './hooks/useApi';
+import devSpecRaw from './dev.specly?raw';
+
+// Parse YAML spec
+function parseSpec(raw: string): Record<string, unknown> {
+  try {
+    const parsed = yaml.load(raw);
+    if (parsed && typeof parsed === 'object') {
+      const obj = parsed as Record<string, unknown>;
+      if (obj.components && typeof obj.components === 'object') {
+        const componentName = Object.keys(obj.components)[0];
+        if (componentName) {
+          return { ...(obj.components as any)[componentName], componentName, _raw: obj };
+        }
+      }
+      return obj;
+    }
+    return {};
+  } catch {
+    return {};
+  }
+}
+
+const devSpec = parseSpec(devSpecRaw);
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: { staleTime: 5 * 60 * 1000, retry: 1 },
+  },
+});
+
+function AppContent() {
+  // Fetch app spec from backend API (avoids bundling spec file path issues)
+  const [appSpec, setAppSpec] = useState<Record<string, unknown>>({});
+  useEffect(() => {
+    fetch('/api/spec')
+      .then(r => r.json())
+      .then(data => {
+        if (data && typeof data === 'object') {
+          // Flatten components wrapper if present
+          if (data.components) {
+            const name = Object.keys(data.components)[0];
+            if (name) {
+              setAppSpec({ ...data.components[name], componentName: name });
+              return;
+            }
+          }
+          setAppSpec(data);
+        }
+      })
+      .catch(() => {});
+  }, []);
+
+  const runtimeValue = useMemo(() => ({
+    useEntitiesQuery,
+    useModelSchemaQuery,
+    useExecuteOperationMutation,
+    useTransitionStateMutation,
+    entities: {},
+    modelSchemas: {},
+    views: [],
+    spec: appSpec,
+    apiBaseUrl: '/api',
+  }), [appSpec]);
+
+  return (
+    <RuntimeViewProvider value={runtimeValue}>
+      <DevShell
+        devSpec={devSpec}
+        appSpec={appSpec}
+        title="${appName}"
+      />
+    </RuntimeViewProvider>
+  );
+}
+
+export default function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AppContent />
+    </QueryClientProvider>
+  );
+}
+`;
+}
+export {
+  generateRuntimeAppTsx as default
+};

package/dist/libs/instance-factories/applications/templates/react/runtime-package-json-generator.js

@@ -0,0 +1,50 @@
+function generateRuntimePackageJson(context) {
+  const { spec } = context;
+  const appName = spec.metadata?.component?.toLowerCase() || "frontend";
+  const version = spec.metadata?.version || "1.0.0";
+  const description = spec.metadata?.description || "Frontend application";
+  const pkg = {
+    name: `${appName}-frontend`,
+    version,
+    description,
+    private: true,
+    type: "module",
+    scripts: {
+      dev: "vite",
+      build: "tsc && vite build",
+      preview: "vite preview",
+      test: "echo 'No tests configured for frontend'",
+      lint: "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+    },
+    dependencies: {
+      "react": "^18.2.0",
+      "react-dom": "^18.2.0",
+      "@tanstack/react-query": "^5.0.0",
+      "@specverse/runtime": "^4.1.0",
+      "js-yaml": "^4.1.0",
+      "react-hook-form": "^7.48.0",
+      "zod": "^3.22.0",
+      "@hookform/resolvers": "^3.3.0"
+    },
+    devDependencies: {
+      "@types/react": "^18.2.0",
+      "@types/react-dom": "^18.2.0",
+      "@types/js-yaml": "^4.0.9",
+      "@vitejs/plugin-react": "^4.2.0",
+      "autoprefixer": "^10.4.20",
+      "postcss": "^8.4.47",
+      "tailwindcss": "^3.4.13",
+      "typescript": "^5.2.0",
+      "vite": "^5.0.0",
+      "eslint": "^8.53.0",
+      "@typescript-eslint/eslint-plugin": "^6.10.0",
+      "@typescript-eslint/parser": "^6.10.0",
+      "eslint-plugin-react-hooks": "^4.6.0",
+      "eslint-plugin-react-refresh": "^0.4.4"
+    }
+  };
+  return JSON.stringify(pkg, null, 2);
+}
+export {
+  generateRuntimePackageJson as default
+};