@sprlab/wccompiler 0.6.4 → 0.7.1

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

@@ -933,9 +933,24 @@ export function generateComponent(parseResult, options = {}) {
   for (let idx = 0; idx < watchers.length; idx++) {
     const w = watchers[idx];
     if (w.kind === 'signal') {
-      lines.push(`    this.__prev_${w.target} = undefined;`);
+      // For signal watchers watching a prop, initialize with the prop's default value
+      // so that attributeChangedCallback changes before connectedCallback are detected
+      if (propNames.has(w.target)) {
+        const propDef = propDefs.find(p => p.name === w.target);
+        lines.push(`    this.__prev_${w.target} = ${propDef ? propDef.default : 'undefined'};`);
+      } else {
+        lines.push(`    this.__prev_${w.target} = undefined;`);
+      }
     } else {
-      lines.push(`    this.__prev_watch${idx} = undefined;`);
+      // For getter watchers, check if the getter references a prop (e.g., props.value)
+      // Initialize with the prop's default so pre-connection attribute changes are detected
+      const propMatch = propsObjectName ? w.target.match(new RegExp(`^${propsObjectName}\\.(\\w+)$`)) : null;
+      if (propMatch && propNames.has(propMatch[1])) {
+        const propDef = propDefs.find(p => p.name === propMatch[1]);
+        lines.push(`    this.__prev_watch${idx} = ${propDef ? propDef.default : 'undefined'};`);
+      } else {
+        lines.push(`    this.__prev_watch${idx} = undefined;`);
+      }
     }
   }
 
@@ -1170,7 +1185,7 @@ export function generateComponent(parseResult, options = {}) {
       }
       lines.push('    this.__disposers.push(__effect(() => {');
       lines.push(`      const ${w.newParam} = ${watchRef};`);
-      lines.push(`      if (this.__prev_${w.target} !== undefined) {`);
+      lines.push(`      if (this.__prev_${w.target} !== undefined && this.__prev_${w.target} !== ${w.newParam}) {`);
       lines.push(`        const ${w.oldParam} = this.__prev_${w.target};`);
       lines.push('        __untrack(() => {');
       const bodyLines = body.split('\n');
@@ -1187,7 +1202,7 @@ export function generateComponent(parseResult, options = {}) {
       const prevName = `__prev_watch${idx}`;
       lines.push('    this.__disposers.push(__effect(() => {');
       lines.push(`      const ${w.newParam} = ${getterExpr};`);
-      lines.push(`      if (this.${prevName} !== undefined) {`);
+      lines.push(`      if (this.${prevName} !== undefined && this.${prevName} !== ${w.newParam}) {`);
       lines.push(`        const ${w.oldParam} = this.${prevName};`);
       lines.push('        __untrack(() => {');
       const bodyLines2 = body.split('\n');

package/package.json

@@ -1,8 +1,14 @@
 {
   "name": "@sprlab/wccompiler",
-  "version": "0.6.4",
+  "version": "0.7.1",
   "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",