@sprlab/wccompiler 0.6.3 → 0.7.0

package/README.md

@@ -636,6 +636,63 @@ Component-level `standalone` always takes precedence over the global config. Thi
 
 Each standalone component has its own isolated reactive runtime. Signals from component A cannot be observed by effects in component B — they are completely independent. This is by design for distribution scenarios where components must be self-contained. If you need cross-component reactivity (e.g., shared state), use the default shared mode (`standalone: false`).
 
+## Framework Integrations
+
+WCC components are native custom elements — they work in any framework. Optional integration helpers reduce configuration friction:
+
+### Vue 3 (Vite)
+
+```js
+// vite.config.js
+import { wccVuePlugin } from '@sprlab/wccompiler/integrations/vue'
+
+export default defineConfig({
+  plugins: [wccVuePlugin()]
+})
+
+// Custom prefix:
+// plugins: [wccVuePlugin({ prefix: 'my-' })]
+```
+
+### React
+
+React 19+ supports custom elements natively. For React 18, use the event hook:
+
+```jsx
+import { useWccEvent } from '@sprlab/wccompiler/integrations/react'
+
+function App() {
+  const ref = useWccEvent('change', (e) => console.log(e.detail))
+  return <wcc-counter ref={ref}></wcc-counter>
+}
+```
+
+### Angular
+
+```ts
+import { WCC_SCHEMAS } from '@sprlab/wccompiler/integrations/angular'
+
+// Standalone component (Angular 17+)
+@Component({
+  schemas: WCC_SCHEMAS,
+  template: `<wcc-counter></wcc-counter>`
+})
+
+// Or NgModule approach
+@NgModule({
+  schemas: WCC_SCHEMAS,
+})
+```
+
+### Vanilla
+
+No configuration needed:
+
+```html
+<script type="module" src="dist/wcc-counter.js"></script>
+<wcc-counter></wcc-counter>
+```
+
 ## Editor Support
 
 The **wcCompiler (.wcc) Language Support** extension is available on the VS Code Marketplace. It provides syntax highlighting, completions, and diagnostics for `.wcc` files.

package/integrations/angular.js

@@ -0,0 +1,31 @@
+/**
+ * Angular schema helper for WCC custom elements.
+ * Provides CUSTOM_ELEMENTS_SCHEMA configuration for Angular modules/components.
+ *
+ * @module @sprlab/wccompiler/integrations/angular
+ */
+
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
+
+/**
+ * Schema array for Angular components/modules that use WCC custom elements.
+ * Use in @Component({ schemas: WCC_SCHEMAS }) or @NgModule({ schemas: WCC_SCHEMAS })
+ *
+ * @type {Array<import('@angular/core').SchemaMetadata>}
+ */
+export const WCC_SCHEMAS = [CUSTOM_ELEMENTS_SCHEMA]
+
+/**
+ * NgModule-compatible class that declares CUSTOM_ELEMENTS_SCHEMA.
+ * Import this in your NgModule's imports array.
+ *
+ * Usage:
+ * @NgModule({ imports: [WccModule] })
+ * export class AppModule {}
+ *
+ * Note: For standalone components (Angular 17+), use WCC_SCHEMAS directly:
+ * @Component({ schemas: WCC_SCHEMAS })
+ */
+export class WccModule {
+  static schemas = WCC_SCHEMAS
+}

package/integrations/react.js

@@ -0,0 +1,31 @@
+/**
+ * React hook for WCC custom element events.
+ * Bridges CustomEvent to React's ref-based event system.
+ *
+ * @module @sprlab/wccompiler/integrations/react
+ */
+
+import { useRef, useEffect } from 'react'
+
+/**
+ * Hook that attaches a CustomEvent listener to a DOM element via ref.
+ *
+ * @param {string} eventName - The event name to listen for
+ * @param {(event: CustomEvent) => void} handler - Event handler callback
+ * @returns {import('react').RefObject<HTMLElement>}
+ */
+export function useWccEvent(eventName, handler) {
+  const ref = useRef(null)
+  const handlerRef = useRef(handler)
+  handlerRef.current = handler
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    const listener = (e) => handlerRef.current(e)
+    el.addEventListener(eventName, listener)
+    return () => el.removeEventListener(eventName, listener)
+  }, [eventName])
+
+  return ref
+}

package/integrations/vue.js

@@ -0,0 +1,31 @@
+/**
+ * Vue Vite plugin for WCC custom elements.
+ * Configures isCustomElement to recognize WCC component tags.
+ *
+ * @module @sprlab/wccompiler/integrations/vue
+ */
+
+import vue from '@vitejs/plugin-vue'
+
+/**
+ * @typedef {Object} WccVuePluginOptions
+ * @property {string} [prefix='wcc-'] - Tag prefix for custom element detection
+ */
+
+/**
+ * Creates a Vite plugin that configures Vue's template compiler
+ * to recognize custom elements with the given prefix.
+ *
+ * @param {WccVuePluginOptions} [options]
+ * @returns {import('vite').Plugin}
+ */
+export function wccVuePlugin(options = {}) {
+  const prefix = typeof options.prefix === 'string' ? options.prefix : 'wcc-'
+  return vue({
+    template: {
+      compilerOptions: {
+        isCustomElement: (tag) => tag.startsWith(prefix)
+      }
+    }
+  })
+}

package/lib/codegen.js

@@ -904,10 +904,51 @@ export function generateComponent(parseResult, options = {}) {
     lines.push('');
   }
 
-  // Constructor
+  // Constructor — reactive state only (no DOM manipulation per Custom Elements spec)
   lines.push('  constructor() {');
   lines.push('    super();');
 
+  // Prop signal initialization (BEFORE user signals)
+  for (const p of propDefs) {
+    lines.push(`    this._s_${p.name} = __signal(${p.default});`);
+  }
+
+  // Signal initialization
+  for (const s of signals) {
+    lines.push(`    this._${s.name} = __signal(${s.value});`);
+  }
+
+  // Constant initialization
+  for (const c of constantVars) {
+    lines.push(`    this._const_${c.name} = ${c.value};`);
+  }
+
+  // Computed initialization
+  for (const c of computeds) {
+    const body = transformExpr(c.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
+    lines.push(`    this._c_${c.name} = __computed(() => ${body});`);
+  }
+
+  // Watcher prev-value initialization
+  for (let idx = 0; idx < watchers.length; idx++) {
+    const w = watchers[idx];
+    if (w.kind === 'signal') {
+      lines.push(`    this.__prev_${w.target} = undefined;`);
+    } else {
+      lines.push(`    this.__prev_watch${idx} = undefined;`);
+    }
+  }
+
+  lines.push('  }');
+  lines.push('');
+
+  // connectedCallback (idempotent — safe for re-mount)
+  lines.push('  connectedCallback() {');
+  lines.push('    if (this.__connected) return;');
+  lines.push('    this.__connected = true;');
+
+  // ── DOM SETUP (moved from constructor for Custom Elements spec compliance) ──
+
   // Slot resolution: read childNodes BEFORE clearing innerHTML (when slots are present)
   if (slots.length > 0) {
     lines.push('    const __slotMap = {};');
@@ -973,37 +1014,6 @@ export function generateComponent(parseResult, options = {}) {
     }
   }
 
-  // Prop signal initialization (BEFORE user signals)
-  for (const p of propDefs) {
-    lines.push(`    this._s_${p.name} = __signal(${p.default});`);
-  }
-
-  // Signal initialization
-  for (const s of signals) {
-    lines.push(`    this._${s.name} = __signal(${s.value});`);
-  }
-
-  // Constant initialization
-  for (const c of constantVars) {
-    lines.push(`    this._const_${c.name} = ${c.value};`);
-  }
-
-  // Computed initialization
-  for (const c of computeds) {
-    const body = transformExpr(c.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
-    lines.push(`    this._c_${c.name} = __computed(() => ${body});`);
-  }
-
-  // Watcher prev-value initialization
-  for (let idx = 0; idx < watchers.length; idx++) {
-    const w = watchers[idx];
-    if (w.kind === 'signal') {
-      lines.push(`    this.__prev_${w.target} = undefined;`);
-    } else {
-      lines.push(`    this.__prev_watch${idx} = undefined;`);
-    }
-  }
-
   // ── if: template creation, anchor reference, state init ──
   for (const ifBlock of ifBlocks) {
     const vn = ifBlock.varName;
@@ -1055,13 +1065,7 @@ export function generateComponent(parseResult, options = {}) {
     }
   }
 
-  lines.push('  }');
-  lines.push('');
-
-  // connectedCallback (idempotent — safe for re-mount)
-  lines.push('  connectedCallback() {');
-  lines.push('    if (this.__connected) return;');
-  lines.push('    this.__connected = true;');
+  // ── EFFECTS AND LISTENERS ──
   lines.push('    this.__ac = new AbortController();');
   lines.push('    this.__disposers = [];');
   lines.push('');

package/package.json

@@ -1,8 +1,14 @@
 {
   "name": "@sprlab/wccompiler",
-  "version": "0.6.3",
+  "version": "0.7.0",
   "description": "Zero-runtime compiler that transforms .wcc single-file components into native web components with signals-based reactivity",
   "type": "module",
+  "exports": {
+    ".": "./lib/compiler.js",
+    "./integrations/vue": "./integrations/vue.js",
+    "./integrations/react": "./integrations/react.js",
+    "./integrations/angular": "./integrations/angular.js"
+  },
   "bin": {
     "wcc": "./bin/wcc.js"
   },
@@ -10,6 +16,7 @@
     "bin/",
     "lib/*.js",
     "!lib/*.test.js",
+    "integrations/",
     "types/",
     "README.md"
   ],
@@ -34,6 +41,18 @@
     "esbuild": "^0.27.0",
     "linkedom": "^0.18.12"
   },
+  "peerDependencies": {
+    "@vitejs/plugin-vue": ">=4.0.0",
+    "vue": ">=3.0.0",
+    "react": ">=18.0.0",
+    "@angular/core": ">=14.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@vitejs/plugin-vue": { "optional": true },
+    "vue": { "optional": true },
+    "react": { "optional": true },
+    "@angular/core": { "optional": true }
+  },
   "devDependencies": {
     "fast-check": "^4.1.1",
     "jsdom": "^29.1.1",