@sprlab/wccompiler 0.0.2 → 0.2.0

package/README.md

@@ -1,6 +1,6 @@
 # wcCompiler
 
-Zero-runtime compiler that transforms `.html` files with Vue-like syntax into 100% native web components. No dependencies in the output — just vanilla JavaScript.
+Zero-runtime compiler that transforms `.ts`/`.js` component files into native web components. No framework, no virtual DOM, no runtime — just vanilla JavaScript custom elements with signals-based reactivity.
 
 ## Install
 
@@ -8,53 +8,283 @@ Zero-runtime compiler that transforms `.html` files with Vue-like syntax into 10
 npm install -D @sprlab/wccompiler
 ```
 
-## Usage
+## Quick Start
 
-### 1. Create a component
+**1. Create a component**
+
+```js
+// src/wcc-counter.js
+import { defineComponent, signal } from 'wcc'
+
+export default defineComponent({
+  tag: 'wcc-counter',
+  template: './wcc-counter.html',
+  styles: './wcc-counter.css',
+})
+
+const count = signal(0)
+
+function increment() {
+  count.set(count() + 1)
+}
+```
 
 ```html
 <!-- src/wcc-counter.html -->
-<template>
-  <div class="counter">
-    <span>{{label}}</span>
-    <span>{{count}}</span>
-    <button @click="increment">+</button>
-  </div>
-</template>
-
-<style>
-  .counter { display: flex; gap: 8px; }
-</style>
-
-<script>
-  defineProps(['label'])
-  const count = 0
-
-  function increment() {
-    const count = count + 1
-  }
-</script>
+<div class="counter">
+  <span>{{count}}</span>
+  <button @click="increment">+</button>
+</div>
+```
+
+```css
+/* src/wcc-counter.css */
+.counter { display: flex; gap: 8px; align-items: center; }
 ```
 
-### 2. Build
+**2. Build**
 
 ```bash
 npx wcc build
 ```
 
-### 3. Use
+**3. Use**
 
 ```html
 <script type="module" src="dist/wcc-counter.js"></script>
-<wcc-counter label="Clicks:"></wcc-counter>
+<wcc-counter></wcc-counter>
+```
+
+The compiled output is a single `.js` file with zero dependencies — works in any browser that supports custom elements.
+
+## Reactivity
+
+### Signals
+
+```js
+const count = signal(0)       // create
+count()                        // read → 0
+count.set(5)                   // write → 5
+```
+
+### Computed
+
+```js
+const doubled = computed(() => count() * 2)
+doubled()  // auto-updates when count changes
+```
+
+### Effects
+
+```js
+effect(() => {
+  console.log('Count is:', count())  // re-runs on change
+})
+```
+
+### Constants
+
+```js
+const TAX_RATE = 0.21  // non-reactive, no signal() wrapper
+```
+
+## Props
+
+```js
+const props = defineProps({ label: 'Click', count: 0 })
+```
+
+```html
+<wcc-counter label="Clicks:" count="5"></wcc-counter>
+```
+
+TypeScript generics:
+
+```ts
+const props = defineProps<{ label: string, count: number }>({ label: 'Click', count: 0 })
+```
+
+Props are reactive — they update when attributes change. Supports boolean and number coercion.
+
+## Custom Events
+
+```js
+const emit = defineEmits(['change', 'reset'])
+
+function handleClick() {
+  emit('change', count())
+}
+```
+
+TypeScript call signatures:
+
+```ts
+const emit = defineEmits<{ (e: 'change', value: number): void }>()
+```
+
+The compiler validates emit calls against declared events at compile time.
+
+## Template Directives
+
+### Text Interpolation
+
+```html
+<span>{{count}}</span>
+<p>Hello, {{name}}! You have {{count}} items.</p>
+```
+
+### Event Binding
+
+```html
+<button @click="increment">+</button>
+<input @input="handleInput">
+```
+
+### Conditional Rendering
+
+```html
+<div if="status === 'active'">Active</div>
+<div else-if="status === 'pending'">Pending</div>
+<div else>Inactive</div>
+```
+
+### List Rendering
+
+```html
+<li each="item in items">{{item.name}}</li>
+<li each="(item, index) in items">{{index}}: {{item.name}}</li>
+```
+
+### Visibility Toggle
+
+```html
+<div show="isVisible">Shown or hidden via CSS display</div>
+```
+
+### Two-Way Binding
+
+```html
+<input type="text" model="name">
+<input type="number" model="age">
+<input type="checkbox" model="agree">
+<input type="radio" name="color" value="red" model="color">
+<select model="country">...</select>
+<textarea model="bio"></textarea>
 ```
 
-## Commands
+### Attribute Binding
+
+```html
+<a :href="url">Link</a>
+<button :disabled="isLoading">Submit</button>
+<div :class="{ active: isActive, error: hasError }">...</div>
+<div :style="{ color: textColor }">...</div>
+```
 
-- `wcc build` — Compile all `.html` files from input to output
-- `wcc dev` — Build + watch + dev server with live-reload
+### Template Refs
 
-## Configuration
+```js
+const canvas = templateRef('myCanvas')
+
+onMount(() => {
+  const ctx = canvas.value.getContext('2d')
+})
+```
+
+```html
+<canvas ref="myCanvas"></canvas>
+```
+
+## Slots
+
+### Named Slots
+
+Component template:
+```html
+<div class="card">
+  <slot name="header">Default Header</slot>
+  <slot>Default Body</slot>
+  <slot name="footer">Default Footer</slot>
+</div>
+```
+
+Consumer:
+```html
+<wcc-card>
+  <template #header><strong>Custom Header</strong></template>
+  <p>Custom body content</p>
+  <template #footer>Custom footer</template>
+</wcc-card>
+```
+
+### Scoped Slots
+
+Component template (passes reactive data to consumer):
+```html
+<slot name="stats" :likes="likes">Likes: {{likes}}</slot>
+```
+
+Consumer (receives data via template props):
+```html
+<wcc-card>
+  <template #stats="{ likes }">🔥 {{likes}} likes!</template>
+</wcc-card>
+```
+
+## Lifecycle Hooks
+
+```js
+onMount(() => {
+  console.log('Component connected to DOM')
+})
+
+onDestroy(() => {
+  console.log('Component removed from DOM')
+})
+```
+
+## CSS Scoping
+
+Styles are automatically scoped to the component using tag-name prefixing:
+
+```css
+/* Input */
+.counter { display: flex; }
+
+/* Output */
+wcc-counter .counter { display: flex; }
+```
+
+`@media` rules are recursively scoped. `@keyframes` are preserved without prefixing.
+
+## TypeScript
+
+Use `.ts` files with full type support:
+
+```ts
+import { defineComponent, defineProps, signal, computed, templateBindings } from 'wcc'
+
+const props = defineProps<{ title: string }>({ title: 'Demo' })
+const count = signal<number>(0)
+const doubled = computed<number>(() => count() * 2)
+
+function increment(): void {
+  count.set(count() + 1)
+}
+
+templateBindings({ doubled, increment })
+```
+
+`templateBindings()` declares which variables are used in the template, eliminating TypeScript "unused variable" warnings.
+
+## CLI
+
+```bash
+wcc build    # Compile all .ts/.js files from input/ to output/
+wcc dev      # Build + watch + live-reload dev server
+```
+
+### Configuration
 
 Create `wcc.config.js` in your project root:
 
@@ -63,37 +293,24 @@ export default {
   port: 4100,    // dev server port
   input: 'src',  // source directory
   output: 'dist' // output directory
-};
+}
 ```
 
 All options are optional — defaults shown above.
 
-## Features
-
-- `{{var}}` text interpolation
-- `defineProps([...])` for external props
-- `const x = value` for reactive internal state
-- `computed(() => expr)` for derived values
-- `watch('prop', (new, old) => {...})` for side effects
-- `@event="handler"` for DOM events
-- `emit('name', data)` for custom events
-- `<slot>`, `<slot name="x">`, scoped slots with slotProps
-- `<style>` with automatic scoped CSS
-- Zero runtime — output is pure vanilla JS
-
-## Optional Runtime Helper
+## Runtime Helper
 
-An optional `wcc-runtime.js` is copied to your output directory for declarative bindings:
+An optional `wcc-runtime.js` is copied to your output directory for declarative host-page bindings:
 
 ```html
-<wcc-counter :label="myLabel" @on-click="handler"></wcc-counter>
+<wcc-counter :count="count" @change="handleChange"></wcc-counter>
 
 <script type="module">
-  import './dist/wcc-counter.js';
-  import { init, set, get, on } from './dist/wcc-runtime.js';
+  import './dist/wcc-counter.js'
+  import { init, on, set, get } from './dist/wcc-runtime.js'
 
-  on('handler', (e) => console.log(e.detail));
-  init({ myLabel: 'Clicks:' });
+  on('handleChange', (e) => set('count', e.detail))
+  init({ count: 0 })
 </script>
 ```
 

package/bin/wcc.js

@@ -1,131 +1,96 @@
 #!/usr/bin/env node
 
-/**
- * wcc CLI — entry point for the wcCompiler.
- *
- * Commands:
- *   wcc build  — Compile all .html files from input/ to .js in output/
- *   wcc dev    — Build + watch input/ for changes + start dev server
- */
-
-import { readdir, writeFile, mkdir, watch, copyFile } from 'node:fs/promises';
-import { existsSync, watchFile } from 'node:fs';
-import { resolve, join, basename, dirname } from 'node:path';
+import { readdirSync, writeFileSync, mkdirSync, existsSync, watch, copyFileSync } from 'node:fs';
+import { resolve, relative, extname, basename, dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { loadConfig } from '../lib/config.js';
 import { compile } from '../lib/compiler.js';
 import { startDevServer } from '../lib/dev-server.js';
 
-const projectRoot = process.cwd();
+const command = process.argv[2];
 
-/**
- * Compile a single file and write the output.
- * Returns true on success, false on error.
- */
-async function compileFile(filePath, outputDir) {
-  const fileName = basename(filePath, '.html');
-  try {
-    const code = compile(filePath);
-    const outPath = join(outputDir, `${fileName}.js`);
-    await writeFile(outPath, code, 'utf-8');
-    return true;
-  } catch (err) {
-    console.error(`Error compilando '${basename(filePath)}': ${err.message}`);
-    return false;
-  }
-}
+async function build(config, cwd) {
+  const inputDir = resolve(cwd, config.input);
+  const outputDir = resolve(cwd, config.output);
 
-/**
- * Compile all .html files from inputDir to outputDir.
- * Returns { success, errors } counts.
- */
-async function buildAll(inputDir, outputDir) {
-  // Create output dir if needed
-  if (!existsSync(outputDir)) {
-    await mkdir(outputDir, { recursive: true });
-  }
+  if (!existsSync(outputDir)) mkdirSync(outputDir, { recursive: true });
 
-  // Find all .html files
-  let files;
-  try {
-    const entries = await readdir(inputDir);
-    files = entries.filter(f => f.endsWith('.html'));
-  } catch {
-    console.error(`Error: la carpeta de entrada '${inputDir}' no existe`);
-    process.exit(1);
-  }
-
-  let success = 0;
+  // Discover source files
+  const files = discoverFiles(inputDir);
   let errors = 0;
 
   for (const file of files) {
-    const filePath = join(inputDir, file);
-    const ok = await compileFile(filePath, outputDir);
-    if (ok) success++;
-    else errors++;
+    try {
+      const output = await compile(file);
+      const relPath = relative(inputDir, file);
+      const outPath = resolve(outputDir, relPath.replace(/\.ts$/, '.js'));
+      const outDir = dirname(outPath);
+      if (!existsSync(outDir)) mkdirSync(outDir, { recursive: true });
+      writeFileSync(outPath, output);
+    } catch (err) {
+      console.error(`Error compiling ${file}: ${err.message}`);
+      errors++;
+    }
   }
 
-  // Copy optional wcc-runtime.js to output
+  // Copy wcc-runtime.js to output directory
   const __filename = fileURLToPath(import.meta.url);
   const __dirname = dirname(__filename);
   const runtimeSrc = resolve(__dirname, '../lib/wcc-runtime.js');
   const runtimeDest = join(outputDir, 'wcc-runtime.js');
-  await copyFile(runtimeSrc, runtimeDest);
+  copyFileSync(runtimeSrc, runtimeDest);
 
-  return { success, errors };
+  return errors;
 }
 
-// ── Main ──
-
-async function main() {
-  const command = process.argv[2];
-
-  if (!command || (command !== 'build' && command !== 'dev')) {
-    console.log('Usage: wcc <command>');
-    console.log('');
-    console.log('Commands:');
-    console.log('  build   Compile all .html files');
-    console.log('  dev     Build + watch + dev server');
-    process.exit(0);
+function discoverFiles(dir) {
+  const results = [];
+  const entries = readdirSync(dir, { withFileTypes: true, recursive: true });
+  for (const entry of entries) {
+    if (!entry.isFile()) continue;
+    const ext = extname(entry.name);
+    if (ext !== '.ts' && ext !== '.js') continue;
+    if (entry.name.includes('.test.')) continue;
+    if (entry.name.endsWith('.d.ts')) continue;
+    const fullPath = resolve(dir, entry.parentPath ? relative(dir, entry.parentPath) : '', entry.name);
+    results.push(fullPath);
   }
+  return results;
+}
 
-  const config = await loadConfig(projectRoot);
-  const inputDir = resolve(projectRoot, config.input);
-  const outputDir = resolve(projectRoot, config.output);
+async function main() {
+  const cwd = process.cwd();
+  const config = await loadConfig(cwd);
 
   if (command === 'build') {
-    const { success, errors } = await buildAll(inputDir, outputDir);
-    console.log(`Build complete: ${success} compiled, ${errors} error(s)`);
-    process.exit(errors > 0 ? 1 : 0);
-  }
-
-  if (command === 'dev') {
-    // Initial build
-    const { success, errors } = await buildAll(inputDir, outputDir);
-    console.log(`Initial build: ${success} compiled, ${errors} error(s)`);
-
-    // Watch input/ for changes
-    console.log(`Watching ${config.input}/ for changes...`);
-    const watcher = watch(inputDir, { recursive: true });
-    (async () => {
-      for await (const event of watcher) {
-        if (event.filename && event.filename.endsWith('.html')) {
-          const filePath = join(inputDir, event.filename);
-          if (existsSync(filePath)) {
-            console.log(`Change detected: ${event.filename}`);
-            const ok = await compileFile(filePath, outputDir);
-            if (ok) console.log(`Recompiled: ${event.filename}`);
-          }
-        }
+    const errors = await build(config, cwd);
+    if (errors > 0) process.exit(1);
+  } else if (command === 'dev') {
+    await build(config, cwd);
+    const outputDir = resolve(cwd, config.output);
+    startDevServer({ port: config.port, root: cwd, outputDir });
+    const inputDir = resolve(cwd, config.input);
+    console.log(`Watching ${inputDir} for changes...`);
+    watch(inputDir, { recursive: true }, async (eventType, filename) => {
+      if (!filename) return;
+      const ext = extname(filename);
+      if (ext !== '.ts' && ext !== '.js') return;
+      if (filename.includes('.test.')) return;
+      const filePath = resolve(inputDir, filename);
+      try {
+        const output = await compile(filePath);
+        const outPath = resolve(outputDir, filename.replace(/\.ts$/, '.js'));
+        const outDir = dirname(outPath);
+        if (!existsSync(outDir)) mkdirSync(outDir, { recursive: true });
+        writeFileSync(outPath, output);
+        console.log(`Compiled: ${filename}`);
+      } catch (err) {
+        console.error(`Error compiling ${filename}: ${err.message}`);
       }
-    })();
-
-    // Start dev server
-    startDevServer({
-      port: config.port,
-      root: projectRoot,
-      outputDir,
     });
+  } else {
+    console.error('Usage: wcc <build|dev>');
+    process.exit(1);
   }
 }
 

package/bin/wcc.test.js

@@ -0,0 +1,119 @@
+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 component source
+    writeFileSync(join(srcDir, `${name}.js`), `
+import { defineComponent, signal } from 'wcc'
+
+export default defineComponent({
+  tag: '${name}',
+  template: './${name}.html',
+})
+
+const count = signal(0)
+
+function increment() {
+  count.set(count() + 1)
+}
+`);
+    // Write a minimal template
+    writeFileSync(join(srcDir, `${name}.html`), `<div>{{count}}</div>`);
+  }
+
+  function writeConfig(config) {
+    writeFileSync(join(tmpDir, 'wcc.config.js'), `export default ${JSON.stringify(config)};\n`);
+  }
+
+  it('discovers .ts and .js files, excludes *.test.* and *.d.ts', () => {
+    // Create various files
+    writeComponent('wcc-counter');
+    writeFileSync(join(tmpDir, 'src', 'helper.test.js'), 'test file');
+    writeFileSync(join(tmpDir, 'src', 'types.d.ts'), 'declare module "x" {}');
+    writeFileSync(join(tmpDir, 'src', 'readme.md'), '# readme');
+
+    // Run build — it should only compile wcc-counter.js (not test, d.ts, 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/d.ts files were NOT compiled
+    expect(existsSync(join(tmpDir, 'dist', 'helper.test.js'))).toBe(false);
+    expect(existsSync(join(tmpDir, 'dist', 'types.d.ts'))).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 component (no defineComponent)
+    writeFileSync(join(tmpDir, 'src', 'bad.js'), 'const x = 1;');
+
+    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');
+    }
+  });
+});