@sprlab/wccompiler 0.10.7 → 0.10.9

package/bin/wcc.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-import { readdirSync, writeFileSync, mkdirSync, existsSync, watch, copyFileSync } from 'node:fs';
+import { readdirSync, writeFileSync, mkdirSync, existsSync, watch, copyFileSync, readFileSync } from 'node:fs';
 import { resolve, relative, extname, basename, dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { loadConfig } from '../lib/config.js';
@@ -61,9 +61,120 @@ async function build(config, cwd) {
   const runtimeDest = join(outputDir, 'wcc-runtime.js');
   copyFileSync(runtimeSrc, runtimeDest);
 
+  // Generate framework stubs (React + Vue) from compiled component metadata
+  generateFrameworkStubs(outputDir);
+
   return errors;
 }
 
+/**
+ * Generates framework stub files (React + Vue) from compiled component metadata.
+ * Reads static __meta from each compiled .js file and produces:
+ *   - wcc-react.js + wcc-react.d.ts (importable stubs for React)
+ *   - wcc-vue.js + wcc-vue.d.ts (importable stubs for Vue)
+ */
+function generateFrameworkStubs(outputDir) {
+
+  const files = readdirSync(outputDir).filter(f => f.endsWith('.js') && !f.startsWith('__') && f !== 'wcc-runtime.js' && f !== 'wcc-react.js' && f !== 'wcc-vue.js');
+  const components = [];
+
+  for (const file of files) {
+    const content = readFileSync(join(outputDir, file), 'utf-8');
+    const metaMatch = content.match(/static __meta\s*=\s*\{([^}]+)\}/);
+    if (!metaMatch) continue;
+
+    try {
+      const metaStr = '{' + metaMatch[1] + '}';
+      const parsed = metaStr
+        .replace(/'/g, '"')
+        .replace(/(\w+):/g, '"$1":')
+        .replace(/,\s*}/g, '}')
+        .replace(/,\s*]/g, ']');
+      const meta = JSON.parse(parsed);
+      if (!meta.tag) continue;
+
+      const pascalName = meta.tag.split('-').map(s => s[0].toUpperCase() + s.slice(1)).join('');
+      components.push({ meta, pascalName, file });
+    } catch (e) {
+      // Skip unparseable
+    }
+  }
+
+  if (components.length === 0) return;
+
+  // ── React stubs ──
+  let reactJs = '// Auto-generated by wcc build — React component stubs\n';
+  reactJs += '// Import these in your JSX. The wccReactPlugin transforms them at build time.\n\n';
+
+  let reactDts = '// Auto-generated by wcc build — React component types\n\n';
+
+  for (const comp of components) {
+    const slots = comp.meta.slots || [];
+    const slotProps = slots.filter(s => s).map(s => {
+      const pascal = s[0].toUpperCase() + s.slice(1);
+      return `${pascal}: '${s}'`;
+    });
+
+    // JS stub
+    reactJs += `export const ${comp.pascalName} = Object.assign('${comp.meta.tag}', { __tag: '${comp.meta.tag}'`;
+    for (const s of slots) {
+      if (!s) continue;
+      const pascal = s[0].toUpperCase() + s.slice(1);
+      reactJs += `, ${pascal}: '${s}'`;
+    }
+    reactJs += ` });\n`;
+
+    // TypeScript declaration
+    const slotTypes = slots.filter(s => s).map(s => {
+      const pascal = s[0].toUpperCase() + s.slice(1);
+      return `  ${pascal}: string;`;
+    }).join('\n');
+
+    reactDts += `export declare const ${comp.pascalName}: string & {\n  __tag: '${comp.meta.tag}';\n${slotTypes}\n};\n\n`;
+  }
+
+  writeFileSync(join(outputDir, 'wcc-react.js'), reactJs);
+  writeFileSync(join(outputDir, 'wcc-react.d.ts'), reactDts);
+
+  // ── Vue stubs ──
+  let vueJs = '// Auto-generated by wcc build — Vue component stubs\n';
+  vueJs += '// Import these in your Vue SFC for type safety and IDE support.\n\n';
+
+  let vueDts = '// Auto-generated by wcc build — Vue component types\n\n';
+
+  for (const comp of components) {
+    const props = comp.meta.props || [];
+    const events = comp.meta.events || [];
+    const models = comp.meta.models || [];
+    const slots = comp.meta.slots || [];
+
+    // JS stub (just the tag name — Vue uses kebab-case directly)
+    vueJs += `export const ${comp.pascalName} = '${comp.meta.tag}';\n`;
+
+    // TypeScript declaration with props/events/slots info
+    const propTypes = props.map(p => {
+      const type = typeof p.default === 'number' || /^\d/.test(p.default) ? 'number'
+        : p.default === 'true' || p.default === 'false' ? 'boolean' : 'string';
+      return `    ${p.name}?: ${type};`;
+    }).join('\n');
+
+    const eventTypes = events.map(e => `    '${e}': CustomEvent;`).join('\n');
+    const modelTypes = models.map(m => `    '${m}': any;`).join('\n');
+    const slotTypeEntries = slots.filter(s => s).map(s => `    '${s}': any;`).join('\n');
+
+    vueDts += `export declare const ${comp.pascalName}: '${comp.meta.tag}';\n`;
+    vueDts += `/** Component: ${comp.meta.tag} */\n`;
+    vueDts += `export interface ${comp.pascalName}Props {\n${propTypes}\n}\n`;
+    if (events.length) vueDts += `export interface ${comp.pascalName}Events {\n${eventTypes}\n}\n`;
+    if (models.length) vueDts += `export interface ${comp.pascalName}Models {\n${modelTypes}\n}\n`;
+    if (slots.filter(s => s).length) vueDts += `export interface ${comp.pascalName}Slots {\n${slotTypeEntries}\n}\n`;
+    vueDts += '\n';
+  }
+
+  writeFileSync(join(outputDir, 'wcc-vue.js'), vueJs);
+  writeFileSync(join(outputDir, 'wcc-vue.d.ts'), vueDts);
+}
+
 function discoverFiles(dir) {
   const results = [];
   const entries = readdirSync(dir, { withFileTypes: true, recursive: true });

package/integrations/react.js

@@ -841,117 +841,19 @@ export function wccReactPlugin(options = {}) {
 
 
 /**
- * Vite plugin that generates a virtual module `@wcc/react` (or custom id)
- * exporting pre-built React wrapper components for all WCC components found
- * in the project's compiled output directory.
+ * @deprecated Use the CLI-generated stubs instead (dist/wcc-react.js).
+ * The `wcc build` command now auto-generates importable stubs with types.
+ * This virtual module plugin is kept for backward compatibility but will be removed.
  *
- * This enables the ideal import experience:
- *   import { WccCounter, WccCard } from '@wcc/react'
- *
- * The plugin scans the output directory for compiled .js files, reads their
- * `static __meta` declarations, and generates wrapper code using createWccWrapper.
- *
- * @param {Object} [options]
- * @param {string} [options.moduleId='@wcc/react'] - Virtual module ID for imports
- * @param {string} [options.componentsDir='./dist'] - Directory containing compiled WCC .js files
- * @param {string} [options.prefix='wcc-'] - Tag prefix filter
- * @returns {import('vite').Plugin}
- *
- * @example vite.config.js
- * ```js
- * import { wccReactPlugin, wccReactComponents } from '@sprlab/wccompiler/integrations/react'
- * export default {
- *   plugins: [
- *     wccReactPlugin(),
- *     wccReactComponents({ componentsDir: './src/wcc' })
- *   ]
- * }
- * ```
- *
- * @example Component.jsx
- * ```jsx
- * import { WccCounter, WccCard } from '@wcc/react'
- *
- * <WccCounter count={count} onCountChange={setCount} />
- * <WccCard><div slot="header">Title</div></WccCard>
- * ```
+ * Migration:
+ *   Before: import { WccCard } from '@wcc/react'  (virtual module)
+ *   After:  import { WccCard } from './dist/wcc-react'  (real file, tree-shakeable)
  */
 export function wccReactComponents(options = {}) {
-  const {
-    moduleId = '@wcc/react',
-    componentsDir = './dist',
-    prefix = 'wcc-'
-  } = options
-
-  const resolvedId = '\0' + moduleId
-
   return {
-    name: 'vite-plugin-wcc-react-components',
-    resolveId(id) {
-      if (id === moduleId) return resolvedId
-      return null
-    },
-    async load(id) {
-      if (id !== resolvedId) return null
-
-      // Scan componentsDir for .js files and extract __meta
-      const fs = await import('fs')
-      const path = await import('path')
-
-      const dir = path.default.resolve(componentsDir)
-      if (!fs.default.existsSync(dir)) {
-        this.warn(`[wcc-react-components] Directory not found: ${dir}`)
-        return 'export {}'
-      }
-
-      const files = fs.default.readdirSync(dir).filter(f => f.endsWith('.js'))
-      const components = []
-
-      for (const file of files) {
-        const content = fs.default.readFileSync(path.default.join(dir, file), 'utf-8')
-        const metaMatch = content.match(/static __meta\s*=\s*(\{[^}]+\})/)
-        if (!metaMatch) continue
-
-        try {
-          // Parse the meta object (it's a JS object literal, evaluate safely)
-          const metaStr = metaMatch[1]
-            .replace(/'/g, '"')
-            .replace(/(\w+):/g, '"$1":')
-            .replace(/,\s*}/g, '}')
-            .replace(/,\s*]/g, ']')
-          const meta = JSON.parse(metaStr)
-
-          if (!meta.tag || !meta.tag.startsWith(prefix)) continue
-
-          const pascalName = meta.tag.split('-').map(s => s[0].toUpperCase() + s.slice(1)).join('')
-          components.push({ meta, pascalName, file })
-        } catch (e) {
-          // Skip files with unparseable meta
-        }
-      }
-
-      if (components.length === 0) {
-        return 'export {}'
-      }
-
-      // Generate the virtual module code
-      let code = `import { createWccWrapper } from '@sprlab/wccompiler/adapters/react';\n`
-
-      // Import each component file to ensure registration
-      for (const comp of components) {
-        code += `import '${path.default.resolve(dir, comp.file)}';\n`
-      }
-
-      code += '\n'
-
-      // Generate wrapper exports
-      for (const comp of components) {
-        const eventsArr = JSON.stringify(comp.meta.events || [])
-        const modelsArr = JSON.stringify(comp.meta.models || [])
-        code += `export const ${comp.pascalName} = createWccWrapper('${comp.meta.tag}', { events: ${eventsArr}, models: ${modelsArr} });\n`
-      }
-
-      return code
+    name: 'vite-plugin-wcc-react-components-deprecated',
+    buildStart() {
+      this.warn('[wcc] wccReactComponents() is deprecated. Use the CLI-generated stubs from dist/wcc-react.js instead.')
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprlab/wccompiler",
-  "version": "0.10.7",
+  "version": "0.10.9",
   "description": "Zero-runtime compiler that transforms .wcc single-file components into native web components with signals-based reactivity",
   "type": "module",
   "exports": {