@sprlab/wccompiler 0.12.1 → 0.14.0

package/bin/wcc.test.js

@@ -1,126 +1,126 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { execFileSync, execFile } from 'node:child_process';
-import { mkdirSync, writeFileSync, rmSync, existsSync, readFileSync, readdirSync } from 'node:fs';
-import { resolve, join } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-const __dirname = fileURLToPath(new URL('.', import.meta.url));
-const cliPath = resolve(__dirname, 'wcc.js');
-
-describe('wcc CLI', () => {
-  const tmpDir = resolve(__dirname, '__tmp_cli_test__');
-
-  beforeEach(() => {
-    if (existsSync(tmpDir)) rmSync(tmpDir, { recursive: true });
-    mkdirSync(tmpDir, { recursive: true });
-    mkdirSync(join(tmpDir, 'src'), { recursive: true });
-  });
-
-  afterEach(() => {
-    if (existsSync(tmpDir)) rmSync(tmpDir, { recursive: true });
-  });
-
-  function writeComponent(name, dir = 'src') {
-    const srcDir = join(tmpDir, dir);
-    if (!existsSync(srcDir)) mkdirSync(srcDir, { recursive: true });
-
-    // Write a minimal .wcc SFC component
-    const sfcContent = `<script>
-import { defineComponent, signal } from 'wcc'
-
-export default defineComponent({ tag: '${name}' })
-
-const count = signal(0)
-
-function increment() {
-  count.set(count() + 1)
-}
-</script>
-
-<template>
-<div>{{count()}}</div>
-</template>
-`;
-    writeFileSync(join(srcDir, `${name}.wcc`), sfcContent);
-  }
-
-  function writeConfig(config) {
-    writeFileSync(join(tmpDir, 'wcc.config.js'), `export default ${JSON.stringify(config)};\n`);
-  }
-
-  it('discovers .wcc files, excludes *.test.* files', () => {
-    // Create various files
-    writeComponent('wcc-counter');
-    writeFileSync(join(tmpDir, 'src', 'helper.test.js'), 'test file');
-    writeFileSync(join(tmpDir, 'src', 'readme.md'), '# readme');
-
-    // Run build — it should only compile wcc-counter.wcc (not test or md files)
-    const result = execFileSync('node', [cliPath, 'build'], {
-      cwd: tmpDir,
-      encoding: 'utf-8',
-      timeout: 30000,
-    });
-
-    // Check that output was created
-    expect(existsSync(join(tmpDir, 'dist', 'wcc-counter.js'))).toBe(true);
-    // Check that test/md files were NOT compiled
-    expect(existsSync(join(tmpDir, 'dist', 'helper.test.js'))).toBe(false);
-    expect(existsSync(join(tmpDir, 'dist', 'readme.md'))).toBe(false);
-  });
-
-  it('writes compiled output to the configured output directory', () => {
-    writeComponent('wcc-app');
-    writeConfig({ output: 'out' });
-
-    execFileSync('node', [cliPath, 'build'], {
-      cwd: tmpDir,
-      encoding: 'utf-8',
-      timeout: 30000,
-    });
-
-    expect(existsSync(join(tmpDir, 'out', 'wcc-app.js'))).toBe(true);
-    const content = readFileSync(join(tmpDir, 'out', 'wcc-app.js'), 'utf-8');
-    // Should contain the compiled component
-    expect(content).toContain('customElements.define');
-    expect(content).toContain('wcc-app');
-  });
-
-  it('exits with non-zero code on compilation error', () => {
-    // Write an invalid .wcc component (no defineComponent)
-    const badSfc = `<script>
-const x = 1;
-</script>
-
-<template>
-<div>hello</div>
-</template>
-`;
-    writeFileSync(join(tmpDir, 'src', 'bad.wcc'), badSfc);
-
-    try {
-      execFileSync('node', [cliPath, 'build'], {
-        cwd: tmpDir,
-        encoding: 'utf-8',
-        timeout: 30000,
-      });
-      // Should not reach here
-      expect.fail('Expected non-zero exit code');
-    } catch (err) {
-      expect(err.status).not.toBe(0);
-    }
-  });
-
-  it('prints usage and exits with non-zero code for unknown command', () => {
-    try {
-      execFileSync('node', [cliPath, 'unknown'], {
-        cwd: tmpDir,
-        encoding: 'utf-8',
-        timeout: 30000,
-      });
-      expect.fail('Expected non-zero exit code');
-    } catch (err) {
-      expect(err.status).not.toBe(0);
-      expect(err.stderr).toContain('Usage');
-    }
-  });
-});
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { execFileSync, execFile } from 'node:child_process';
+import { mkdirSync, writeFileSync, rmSync, existsSync, readFileSync, readdirSync } from 'node:fs';
+import { resolve, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+const cliPath = resolve(__dirname, 'wcc.js');
+
+describe('wcc CLI', () => {
+  const tmpDir = resolve(__dirname, '__tmp_cli_test__');
+
+  beforeEach(() => {
+    if (existsSync(tmpDir)) rmSync(tmpDir, { recursive: true });
+    mkdirSync(tmpDir, { recursive: true });
+    mkdirSync(join(tmpDir, 'src'), { recursive: true });
+  });
+
+  afterEach(() => {
+    if (existsSync(tmpDir)) rmSync(tmpDir, { recursive: true });
+  });
+
+  function writeComponent(name, dir = 'src') {
+    const srcDir = join(tmpDir, dir);
+    if (!existsSync(srcDir)) mkdirSync(srcDir, { recursive: true });
+
+    // Write a minimal .wcc SFC component
+    const sfcContent = `<script>
+import { defineComponent, signal } from 'wcc'
+
+export default defineComponent({ tag: '${name}' })
+
+const count = signal(0)
+
+function increment() {
+  count.set(count() + 1)
+}
+</script>
+
+<template>
+<div>{{count()}}</div>
+</template>
+`;
+    writeFileSync(join(srcDir, `${name}.wcc`), sfcContent);
+  }
+
+  function writeConfig(config) {
+    writeFileSync(join(tmpDir, 'wcc.config.js'), `export default ${JSON.stringify(config)};\n`);
+  }
+
+  it('discovers .wcc files, excludes *.test.* files', () => {
+    // Create various files
+    writeComponent('wcc-counter');
+    writeFileSync(join(tmpDir, 'src', 'helper.test.js'), 'test file');
+    writeFileSync(join(tmpDir, 'src', 'readme.md'), '# readme');
+
+    // Run build — it should only compile wcc-counter.wcc (not test or md files)
+    const result = execFileSync('node', [cliPath, 'build'], {
+      cwd: tmpDir,
+      encoding: 'utf-8',
+      timeout: 30000,
+    });
+
+    // Check that output was created
+    expect(existsSync(join(tmpDir, 'dist', 'wcc-counter.js'))).toBe(true);
+    // Check that test/md files were NOT compiled
+    expect(existsSync(join(tmpDir, 'dist', 'helper.test.js'))).toBe(false);
+    expect(existsSync(join(tmpDir, 'dist', 'readme.md'))).toBe(false);
+  });
+
+  it('writes compiled output to the configured output directory', () => {
+    writeComponent('wcc-app');
+    writeConfig({ output: 'out' });
+
+    execFileSync('node', [cliPath, 'build'], {
+      cwd: tmpDir,
+      encoding: 'utf-8',
+      timeout: 30000,
+    });
+
+    expect(existsSync(join(tmpDir, 'out', 'wcc-app.js'))).toBe(true);
+    const content = readFileSync(join(tmpDir, 'out', 'wcc-app.js'), 'utf-8');
+    // Should contain the compiled component
+    expect(content).toContain('customElements.define');
+    expect(content).toContain('wcc-app');
+  });
+
+  it('exits with non-zero code on compilation error', () => {
+    // Write an invalid .wcc component (no defineComponent)
+    const badSfc = `<script>
+const x = 1;
+</script>
+
+<template>
+<div>hello</div>
+</template>
+`;
+    writeFileSync(join(tmpDir, 'src', 'bad.wcc'), badSfc);
+
+    try {
+      execFileSync('node', [cliPath, 'build'], {
+        cwd: tmpDir,
+        encoding: 'utf-8',
+        timeout: 30000,
+      });
+      // Should not reach here
+      expect.fail('Expected non-zero exit code');
+    } catch (err) {
+      expect(err.status).not.toBe(0);
+    }
+  });
+
+  it('prints usage and exits with non-zero code for unknown command', () => {
+    try {
+      execFileSync('node', [cliPath, 'unknown'], {
+        cwd: tmpDir,
+        encoding: 'utf-8',
+        timeout: 30000,
+      });
+      expect.fail('Expected non-zero exit code');
+    } catch (err) {
+      expect(err.status).not.toBe(0);
+      expect(err.stderr).toContain('Usage');
+    }
+  });
+});

package/integrations/angular.js

@@ -1,73 +1,73 @@
-/**
- * Angular integration guide for WCC custom elements.
- *
- * @module @sprlab/wccompiler/integrations/angular
- *
- * Setup requires two steps:
- *
- * 1. Import the adapter in main.ts (enables [(prop)] two-way binding):
- *    ```ts
- *    import '@sprlab/wccompiler/adapters/angular'
- *    ```
- *
- * 2. Add CUSTOM_ELEMENTS_SCHEMA to your component/module:
- *
- * @example Standalone component (Angular 17+)
- * ```ts
- * import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
- *
- * @Component({
- *   selector: 'app-root',
- *   schemas: [CUSTOM_ELEMENTS_SCHEMA],
- *   template: `
- *     <!-- Simple one-way binding -->
- *     <wcc-counter [count]="myCount"></wcc-counter>
- *
- *     <!-- Two-way binding with [(prop)] -->
- *     <wcc-input [(value)]="text"></wcc-input>
- *   `
- * })
- * export class AppComponent {
- *   text = '';
- *   myCount = 0;
- * }
- * ```
- *
- * @example NgModule approach
- * ```ts
- * import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
- *
- * @NgModule({
- *   schemas: [CUSTOM_ELEMENTS_SCHEMA],
- * })
- * export class AppModule {}
- * ```
- *
- * @example Two-way binding with [(prop)]
- * The WccModel directive translates wcc:model events to Angular's propChange convention.
- * Angular's banana-in-a-box [(prop)] expands to:
- *   [prop]="value" (propChange)="value = $event.detail"
- *
- * So when the WCC component emits wcc:model with { prop: 'value', value: 'new' },
- * the WccModel directive re-dispatches as 'valueChange' CustomEvent, which Angular picks up.
- *
- * @example ngModel support (requires ControlValueAccessor)
- * For ngModel/ReactiveForms, see the WccValueAccessor guide in:
- *   @sprlab/wccompiler/adapters/angular
- *
- * That file contains a copy-paste TypeScript directive implementation.
- */
-
-/**
- * Configuration instructions for Angular projects using WCC components.
- * This is a documentation-only export — Angular's AOT compiler requires
- * CUSTOM_ELEMENTS_SCHEMA to be imported directly from @angular/core.
- *
- * @type {{ schema: string, standalone: string, ngModule: string, adapter: string }}
- */
-export const WCC_ANGULAR_CONFIG = {
-  schema: "import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'",
-  standalone: "@Component({ schemas: [CUSTOM_ELEMENTS_SCHEMA] })",
-  ngModule: "@NgModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA] })",
-  adapter: "import '@sprlab/wccompiler/adapters/angular' // in main.ts",
-}
+/**
+ * Angular integration guide for WCC custom elements.
+ *
+ * @module @sprlab/wccompiler/integrations/angular
+ *
+ * Setup requires two steps:
+ *
+ * 1. Import the adapter in main.ts (enables [(prop)] two-way binding):
+ *    ```ts
+ *    import '@sprlab/wccompiler/adapters/angular'
+ *    ```
+ *
+ * 2. Add CUSTOM_ELEMENTS_SCHEMA to your component/module:
+ *
+ * @example Standalone component (Angular 17+)
+ * ```ts
+ * import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+ *
+ * @Component({
+ *   selector: 'app-root',
+ *   schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ *   template: `
+ *     <!-- Simple one-way binding -->
+ *     <wcc-counter [count]="myCount"></wcc-counter>
+ *
+ *     <!-- Two-way binding with [(prop)] -->
+ *     <wcc-input [(value)]="text"></wcc-input>
+ *   `
+ * })
+ * export class AppComponent {
+ *   text = '';
+ *   myCount = 0;
+ * }
+ * ```
+ *
+ * @example NgModule approach
+ * ```ts
+ * import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+ *
+ * @NgModule({
+ *   schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ * })
+ * export class AppModule {}
+ * ```
+ *
+ * @example Two-way binding with [(prop)]
+ * The WccModel directive translates wcc:model events to Angular's propChange convention.
+ * Angular's banana-in-a-box [(prop)] expands to:
+ *   [prop]="value" (propChange)="value = $event.detail"
+ *
+ * So when the WCC component emits wcc:model with { prop: 'value', value: 'new' },
+ * the WccModel directive re-dispatches as 'valueChange' CustomEvent, which Angular picks up.
+ *
+ * @example ngModel support (requires ControlValueAccessor)
+ * For ngModel/ReactiveForms, see the WccValueAccessor guide in:
+ *   @sprlab/wccompiler/adapters/angular
+ *
+ * That file contains a copy-paste TypeScript directive implementation.
+ */
+
+/**
+ * Configuration instructions for Angular projects using WCC components.
+ * This is a documentation-only export — Angular's AOT compiler requires
+ * CUSTOM_ELEMENTS_SCHEMA to be imported directly from @angular/core.
+ *
+ * @type {{ schema: string, standalone: string, ngModule: string, adapter: string }}
+ */
+export const WCC_ANGULAR_CONFIG = {
+  schema: "import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'",
+  standalone: "@Component({ schemas: [CUSTOM_ELEMENTS_SCHEMA] })",
+  ngModule: "@NgModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA] })",
+  adapter: "import '@sprlab/wccompiler/adapters/angular' // in main.ts",
+}