@sprlab/wccompiler 0.6.4 → 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/package.json

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