@sprlab/wccompiler 0.2.1 → 0.4.0

package/README.md

@@ -1,6 +1,6 @@
 # wcCompiler
 
-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.
+Zero-runtime compiler that transforms `.wcc` single-file components into native web components. No framework, no virtual DOM, no runtime — just vanilla JavaScript custom elements with signals-based reactivity.
 
 ## Install
 
@@ -12,14 +12,13 @@ npm install -D @sprlab/wccompiler
 
 **1. Create a component**
 
-```js
-// src/wcc-counter.js
+```html
+<!-- src/wcc-counter.wcc -->
+<script>
 import { defineComponent, signal } from 'wcc'
 
 export default defineComponent({
   tag: 'wcc-counter',
-  template: './wcc-counter.html',
-  styles: './wcc-counter.css',
 })
 
 const count = signal(0)
@@ -27,19 +26,18 @@ const count = signal(0)
 function increment() {
   count.set(count() + 1)
 }
-```
+</script>
 
-```html
-<!-- src/wcc-counter.html -->
+<template>
 <div class="counter">
-  <span>{{count}}</span>
+  <span>{{count()}}</span>
   <button @click="increment">+</button>
 </div>
-```
+</template>
 
-```css
-/* src/wcc-counter.css */
+<style>
 .counter { display: flex; gap: 8px; align-items: center; }
+</style>
 ```
 
 **2. Build**
@@ -57,6 +55,36 @@ npx wcc build
 
 The compiled output is a single `.js` file with zero dependencies — works in any browser that supports custom elements.
 
+## Single File Component (.wcc)
+
+wcCompiler uses a single-file component format with the `.wcc` extension. Each file contains three blocks:
+
+- `<script>` — Component logic (signals, props, events, lifecycle)
+- `<template>` — HTML template with directives
+- `<style>` — Scoped CSS
+
+```html
+<script>
+import { defineComponent, signal } from 'wcc'
+
+export default defineComponent({
+  tag: 'wcc-my-component',
+})
+
+const message = signal('Hello')
+</script>
+
+<template>
+<p>{{message()}}</p>
+</template>
+
+<style>
+p { color: steelblue; }
+</style>
+```
+
+Use `<script lang="ts">` for TypeScript support. The CLI discovers and compiles all `.wcc` files in your source directory.
+
 ## Reactivity
 
 ### Signals
@@ -82,6 +110,31 @@ effect(() => {
 })
 ```
 
+Effects support cleanup — return a function to run before re-execution:
+
+```js
+effect(() => {
+  const id = setInterval(() => tick.set(tick() + 1), 1000)
+  return () => clearInterval(id)  // called before re-run
+})
+```
+
+### Watch
+
+```js
+// Watch a signal directly
+watch(count, (newVal, oldVal) => {
+  console.log(`Changed from ${oldVal} to ${newVal}`)
+})
+
+// Watch a getter function (useful for props or derived values)
+watch(() => props.count, (newVal, oldVal) => {
+  console.log(`Prop changed: ${oldVal} → ${newVal}`)
+})
+```
+
+`watch` observes a specific signal or getter and provides both old and new values. The callback does not run on initial mount — only on subsequent changes.
+
 ### Constants
 
 ```js
@@ -98,6 +151,16 @@ const props = defineProps({ label: 'Click', count: 0 })
 <wcc-counter label="Clicks:" count="5"></wcc-counter>
 ```
 
+You can also call `defineProps` without assignment — the props are available by name in the template:
+
+```js
+defineProps({ label: 'Click' })
+```
+
+```html
+<span>{{label}}</span>
+```
+
 TypeScript generics:
 
 ```ts
@@ -128,9 +191,19 @@ The compiler validates emit calls against declared events at compile time.
 
 ### Text Interpolation
 
+Signals and computeds require `()` to read their value in templates:
+
+```html
+<span>{{count()}}</span>
+<p>You have {{items().length}} items.</p>
+<span>{{doubled()}}</span>
+```
+
+Props accessed without assignment use their name directly (no parentheses):
+
 ```html
-<span>{{count}}</span>
-<p>Hello, {{name}}! You have {{count}} items.</p>
+<span>{{label}}</span>
+<p>Hello, {{name}}!</p>
 ```
 
 ### Event Binding
@@ -140,25 +213,34 @@ The compiler validates emit calls against declared events at compile time.
 <input @input="handleInput">
 ```
 
+Event handlers support expressions and inline arguments:
+
+```html
+<button @click="removeItem(item)">×</button>
+<button @click="() => doSomething()">Do it</button>
+```
+
 ### Conditional Rendering
 
 ```html
-<div if="status === 'active'">Active</div>
-<div else-if="status === 'pending'">Pending</div>
+<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>
+<li each="item in items()">{{item.name}}</li>
+<li each="(item, index) in items()">{{index}}: {{item.name}}</li>
 ```
 
+The source expression calls the signal (`items()`) to read the current array.
+
 ### Visibility Toggle
 
 ```html
-<div show="isVisible">Shown or hidden via CSS display</div>
+<div show="isVisible()">Shown or hidden via CSS display</div>
 ```
 
 ### Two-Way Binding
@@ -175,10 +257,10 @@ The compiler validates emit calls against declared events at compile time.
 ### 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>
+<a :href="url()">Link</a>
+<button :disabled="isLoading()">Submit</button>
+<div :class="{ active: isActive(), error: hasError() }">...</div>
+<div :style="{ color: textColor() }">...</div>
 ```
 
 ### Template Refs
@@ -238,11 +320,18 @@ onMount(() => {
   console.log('Component connected to DOM')
 })
 
+onMount(async () => {
+  const data = await fetch('/api/items').then(r => r.json())
+  items.set(data)
+})
+
 onDestroy(() => {
   console.log('Component removed from DOM')
 })
 ```
 
+Async callbacks are wrapped in an IIFE — `connectedCallback` itself stays synchronous.
+
 ## CSS Scoping
 
 Styles are automatically scoped to the component using tag-name prefixing:
@@ -259,31 +348,58 @@ wcc-counter .counter { display: flex; }
 
 ## TypeScript
 
-Use `.ts` files with full type support:
+Use `<script lang="ts">` in your `.wcc` file for full type support:
 
-```ts
-import { defineComponent, defineProps, signal, computed, templateBindings } from 'wcc'
+```html
+<script lang="ts">
+import { defineComponent, defineProps, defineEmits, signal, computed, watch, defineExpose } from 'wcc'
 
-const props = defineProps<{ title: string }>({ title: 'Demo' })
-const count = signal<number>(0)
-const doubled = computed<number>(() => count() * 2)
+export default defineComponent({
+  tag: 'wcc-typescript',
+})
 
-function increment(): void {
-  count.set(count() + 1)
+const props = defineProps<{ title: string, count: number }>({ title: 'Demo', count: 0 })
+const emit = defineEmits<{ (e: 'update', value: number): void }>()
+
+const doubled = computed<number>(() => props.count * 2)
+const watchLog = signal<string>('(no changes yet)')
+
+watch(() => props.count, (newVal, oldVal) => {
+  watchLog.set(`count changed: ${oldVal} → ${newVal}`)
+})
+
+function handleUpdate(): void {
+  emit('update', doubled())
 }
 
-templateBindings({ doubled, increment })
+defineExpose({ doubled, handleUpdate, watchLog })
+</script>
+
+<template>
+<div class="demo">
+  <span>{{title}}: {{count}}</span>
+  <span>Doubled: {{doubled()}}</span>
+  <span>Watch: {{watchLog()}}</span>
+  <button @click="handleUpdate">Update</button>
+</div>
+</template>
+
+<style>
+.demo { font-family: sans-serif; }
+</style>
 ```
 
-`templateBindings()` declares which variables are used in the template, eliminating TypeScript "unused variable" warnings.
+`defineExpose()` exposes methods and properties for external access via ref.
 
 ## CLI
 
 ```bash
-wcc build    # Compile all .ts/.js files from input/ to output/
+wcc build    # Compile all .wcc files from input/ to output/
 wcc dev      # Build + watch + live-reload dev server
 ```
 
+The CLI discovers all `.wcc` files in your source directory and compiles each into a standalone `.js` file.
+
 ### Configuration
 
 Create `wcc.config.js` in your project root:
@@ -298,6 +414,10 @@ export default {
 
 All options are optional — defaults shown above.
 
+## 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.
+
 ## Runtime Helper
 
 An optional `wcc-runtime.js` is copied to your output directory for declarative host-page bindings:

package/bin/wcc.js

@@ -23,7 +23,7 @@ async function build(config, cwd) {
     try {
       const output = await compile(file);
       const relPath = relative(inputDir, file);
-      const outPath = resolve(outputDir, relPath.replace(/\.ts$/, '.js'));
+      const outPath = resolve(outputDir, relPath.replace(/\.wcc$/, '.js'));
       const outDir = dirname(outPath);
       if (!existsSync(outDir)) mkdirSync(outDir, { recursive: true });
       writeFileSync(outPath, output);
@@ -49,9 +49,8 @@ function discoverFiles(dir) {
   for (const entry of entries) {
     if (!entry.isFile()) continue;
     const ext = extname(entry.name);
-    if (ext !== '.ts' && ext !== '.js') continue;
+    if (ext !== '.wcc') 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);
   }
@@ -74,12 +73,12 @@ async function main() {
     watch(inputDir, { recursive: true }, async (eventType, filename) => {
       if (!filename) return;
       const ext = extname(filename);
-      if (ext !== '.ts' && ext !== '.js') return;
+      if (ext !== '.ts' && ext !== '.js' && ext !== '.wcc') 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 outPath = resolve(outputDir, filename.replace(/\.ts$/, '.js').replace(/\.wcc$/, '.js'));
         const outDir = dirname(outPath);
         if (!existsSync(outDir)) mkdirSync(outDir, { recursive: true });
         writeFileSync(outPath, output);

package/bin/wcc.test.js

@@ -24,37 +24,37 @@ describe('wcc CLI', () => {
     const srcDir = join(tmpDir, dir);
     if (!existsSync(srcDir)) mkdirSync(srcDir, { recursive: true });
 
-    // Write a minimal component source
-    writeFileSync(join(srcDir, `${name}.js`), `
+    // Write a minimal .wcc SFC component
+    const sfcContent = `<script>
 import { defineComponent, signal } from 'wcc'
 
-export default defineComponent({
-  tag: '${name}',
-  template: './${name}.html',
-})
+export default defineComponent({ tag: '${name}' })
 
 const count = signal(0)
 
 function increment() {
   count.set(count() + 1)
 }
-`);
-    // Write a minimal template
-    writeFileSync(join(srcDir, `${name}.html`), `<div>{{count}}</div>`);
+</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 .ts and .js files, excludes *.test.* and *.d.ts', () => {
+  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', '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)
+    // 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',
@@ -63,9 +63,8 @@ function increment() {
 
     // Check that output was created
     expect(existsSync(join(tmpDir, 'dist', 'wcc-counter.js'))).toBe(true);
-    // Check that test/d.ts files were NOT compiled
+    // Check that test/md 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);
   });
 
@@ -87,8 +86,16 @@ function increment() {
   });
 
   it('exits with non-zero code on compilation error', () => {
-    // Write an invalid component (no defineComponent)
-    writeFileSync(join(tmpDir, 'src', 'bad.js'), 'const x = 1;');
+    // 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'], {