@sprlab/wccompiler 0.0.2 → 0.2.0

package/lib/printer.js

@@ -1,104 +1,118 @@
 /**
- * Pretty Printer — reconstructs .html source from a ParseResult IR.
+ * Pretty Printer — serializes a ParseResult IR back to valid .js source format.
  *
- * Produces a valid source file with <template>, <script>, and <style> blocks
- * that preserves the order and semantics of all IR elements.
+ * Used for round-trip testing: parse → prettyPrint → parse should yield
+ * an equivalent IR.
  */
 
-/**
- * Reconstruct the <template> block from the IR.
- * Uses the original template string (before tree-walking) since it
- * already contains {{var}} bindings, @event attributes, and <slot> elements.
- *
- * @param {import('./parser.js').ParseResult} ir
- * @returns {string}
- */
-function reconstructTemplate(ir) {
-  return ir.template;
-}
+/** @import { ParseResult } from './types.js' */
 
 /**
- * Reconstruct the <script> block from the IR's extracted constructs.
+ * Pretty-print a ParseResult IR back to component source format.
  *
- * @param {import('./parser.js').ParseResult} ir
- * @returns {string}
+ * @param {ParseResult} ir — The intermediate representation
+ * @returns {string} Reconstructed source code
  */
-function reconstructScript(ir) {
-  const lines = [];
+export function prettyPrint(ir) {
+  const sections = [];
 
-  // defineProps
-  if (ir.props.length > 0) {
-    const propsList = ir.props.map(p => `'${p}'`).join(', ');
-    lines.push(`  defineProps([${propsList}])`);
-    lines.push('');
-  }
+  // 1. Import statement — include only macros actually used
+  const macros = ['defineComponent'];
+  if ((ir.propDefs || []).length > 0) macros.push('defineProps');
+  if ((ir.emits || []).length > 0) macros.push('defineEmits');
+  if (ir.signals.length > 0) macros.push('signal');
+  if (ir.computeds.length > 0) macros.push('computed');
+  if (ir.effects.length > 0) macros.push('effect');
+  if ((ir.onMountHooks || []).length > 0) macros.push('onMount');
+  if ((ir.onDestroyHooks || []).length > 0) macros.push('onDestroy');
+  sections.push(`import { ${macros.join(', ')} } from 'wcc'`);
 
-  // Reactive variables
-  for (const v of ir.reactiveVars) {
-    lines.push(`  const ${v.name} = ${v.value}`);
+  // 2. defineComponent call
+  const defParts = [];
+  defParts.push(`  tag: '${ir.tagName}',`);
+  defParts.push(`  template: './${ir.tagName}.html',`);
+  if (ir.style !== '') {
+    defParts.push(`  styles: './${ir.tagName}.css',`);
   }
-  if (ir.reactiveVars.length > 0) lines.push('');
+  sections.push(`export default defineComponent({\n${defParts.join('\n')}\n})`);
 
-  // Computed properties
-  for (const c of ir.computeds) {
-    lines.push(`  const ${c.name} = computed(() => ${c.body})`);
+  // 3. defineProps (if present)
+  if ((ir.propDefs || []).length > 0) {
+    const propsObjName = ir.propsObjectName || 'props';
+    const propEntries = ir.propDefs.map(p => `${p.name}: ${p.default}`);
+    sections.push(`const ${propsObjName} = defineProps({ ${propEntries.join(', ')} })`);
   }
-  if (ir.computeds.length > 0) lines.push('');
 
-  // Watchers
-  for (const w of ir.watchers) {
-    lines.push(`  watch('${w.target}', (${w.newParam}, ${w.oldParam}) => {`);
-    // Indent the body lines
-    for (const bodyLine of w.body.split('\n')) {
-      lines.push(`    ${bodyLine}`);
-    }
-    lines.push('  })');
+  // 3b. defineEmits (if present)
+  if ((ir.emits || []).length > 0) {
+    const emitsObjName = ir.emitsObjectName || 'emit';
+    const emitEntries = ir.emits.map(e => `'${e}'`).join(', ');
+    sections.push(`const ${emitsObjName} = defineEmits([${emitEntries}])`);
   }
-  if (ir.watchers.length > 0) lines.push('');
 
-  // Functions
-  for (const m of ir.methods) {
-    lines.push(`  function ${m.name}(${m.params}) {`);
-    for (const bodyLine of m.body.split('\n')) {
-      lines.push(`    ${bodyLine}`);
-    }
-    lines.push('  }');
+  // 4. Signal declarations
+  if (ir.signals.length > 0) {
+    const signalLines = ir.signals.map(
+      s => `const ${s.name} = signal(${s.value})`
+    );
+    sections.push(signalLines.join('\n'));
   }
 
-  return lines.join('\n');
-}
+  // 5. Computed declarations
+  if (ir.computeds.length > 0) {
+    const computedLines = ir.computeds.map(
+      c => `const ${c.name} = computed(() => ${c.body})`
+    );
+    sections.push(computedLines.join('\n'));
+  }
 
-/**
- * Pretty-print a ParseResult IR back to .html source format.
- *
- * @param {import('./parser.js').ParseResult} ir - The intermediate representation
- * @returns {string} Reconstructed .html source
- */
-export function prettyPrint(ir) {
-  const parts = [];
+  // 6. Effect declarations
+  if (ir.effects.length > 0) {
+    const effectBlocks = ir.effects.map(e => {
+      const indentedBody = e.body
+        .split('\n')
+        .map(line => `  ${line}`)
+        .join('\n');
+      return `effect(() => {\n${indentedBody}\n})`;
+    });
+    sections.push(effectBlocks.join('\n\n'));
+  }
 
-  // <template> block
-  parts.push('<template>');
-  parts.push(reconstructTemplate(ir));
-  parts.push('</template>');
+  // 7. Function declarations
+  if (ir.methods.length > 0) {
+    const fnBlocks = ir.methods.map(m => {
+      const indentedBody = m.body
+        .split('\n')
+        .map(line => `  ${line}`)
+        .join('\n');
+      return `function ${m.name}(${m.params}) {\n${indentedBody}\n}`;
+    });
+    sections.push(fnBlocks.join('\n\n'));
+  }
 
-  // <style> block (if present)
-  if (ir.style) {
-    parts.push('');
-    parts.push('<style>');
-    parts.push(ir.style);
-    parts.push('</style>');
+  // 8. Lifecycle hooks — onMount
+  if ((ir.onMountHooks || []).length > 0) {
+    const mountBlocks = ir.onMountHooks.map(h => {
+      const indentedBody = h.body
+        .split('\n')
+        .map(line => `  ${line}`)
+        .join('\n');
+      return `onMount(() => {\n${indentedBody}\n})`;
+    });
+    sections.push(mountBlocks.join('\n\n'));
   }
 
-  // <script> block (if there's any script content)
-  const scriptContent = reconstructScript(ir);
-  if (scriptContent.trim()) {
-    parts.push('');
-    parts.push('<script>');
-    parts.push(scriptContent);
-    parts.push('</script>');
+  // 9. Lifecycle hooks — onDestroy
+  if ((ir.onDestroyHooks || []).length > 0) {
+    const destroyBlocks = ir.onDestroyHooks.map(h => {
+      const indentedBody = h.body
+        .split('\n')
+        .map(line => `  ${line}`)
+        .join('\n');
+      return `onDestroy(() => {\n${indentedBody}\n})`;
+    });
+    sections.push(destroyBlocks.join('\n\n'));
   }
 
-  parts.push('');
-  return parts.join('\n');
+  return sections.join('\n\n') + '\n';
 }

package/lib/reactive-runtime.js

@@ -10,6 +10,7 @@
  *
  * Dependency tracking uses a global stack (__currentEffect).
  */
+/** @type {string} */
 export const reactiveRuntime = `
 let __currentEffect = null;