@sprlab/wccompiler 0.10.8 → 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,130 +841,19 @@ export function wccReactPlugin(options = {}) {
 
 
 /**
- * Vite plugin that generates a virtual module with component stubs for
- * PascalCase imports. These stubs satisfy the linter/IDE (component is "defined")
- * and the wccReactPlugin transforms them to native custom elements at build time.
+ * @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 standard React import pattern:
- *   import { WccCounter, WccCard } from '@wcc/react'
- *
- * The stubs are zero-runtime — they're just tag name strings with slot name
- * properties. The wccReactPlugin handles the actual JSX transformation.
- *
- * @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: [
- *     wccReactComponents({ componentsDir: './src/wcc' }),
- *     wccReactPlugin(),
- *     react()
- *   ]
- * }
- * ```
- *
- * @example Component.jsx
- * ```jsx
- * import { WccCard, WccList } from '@wcc/react'
- *
- * <WccCard>
- *   <WccCard.Header><strong>Title</strong></WccCard.Header>
- *   <p>Body</p>
- * </WccCard>
- *
- * <WccList>
- *   <WccList.Item>{(item) => <li>{item}</li>}</WccList.Item>
- * </WccList>
- * ```
+ * 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 {
-          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 lightweight stubs (zero runtime)
-      // The wccReactPlugin transforms these at build time
-      let code = '// Auto-generated WCC component stubs (transformed by wccReactPlugin at build time)\n'
-
-      // Import each component file to ensure custom element registration
-      for (const comp of components) {
-        code += `import '${path.default.resolve(dir, comp.file)}';\n`
-      }
-
-      code += '\n'
-
-      // Generate stub exports with compound slot properties
-      // Use Object.assign to create an object that holds the tag name and slot sub-properties
-      for (const comp of components) {
-        const slots = comp.meta.slots || []
-        code += `export const ${comp.pascalName} = Object.assign(() => '${comp.meta.tag}', { __tag: '${comp.meta.tag}'`
-        for (const slot of slots) {
-          if (!slot) continue
-          const pascalSlot = slot[0].toUpperCase() + slot.slice(1)
-          code += `, ${pascalSlot}: '${slot}'`
-        }
-        code += ` });\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.8",
+  "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": {