what-compiler 0.5.0 → 0.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "what-compiler",
-  "version": "0.5.0",
+  "version": "0.5.3",
   "description": "JSX compiler for What Framework - transforms JSX to optimized DOM operations",
   "main": "src/index.js",
   "type": "module",
@@ -23,7 +23,7 @@
   "license": "MIT",
   "peerDependencies": {
     "@babel/core": "^7.0.0",
-    "what-core": "^0.5.0"
+    "what-core": "^0.5.3"
   },
   "files": [
     "src"
@@ -31,5 +31,13 @@
   "devDependencies": {
     "@babel/core": "^7.23.0",
     "@babel/preset-env": "^7.23.0"
-  }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zvndev/what-fw"
+  },
+  "bugs": {
+    "url": "https://github.com/zvndev/what-fw/issues"
+  },
+  "homepage": "https://whatframework.dev"
 }

package/src/babel-plugin.js

@@ -20,6 +20,22 @@
 
 const EVENT_MODIFIERS = new Set(['preventDefault', 'stopPropagation', 'once', 'capture', 'passive', 'self']);
 const EVENT_OPTION_MODIFIERS = new Set(['once', 'capture', 'passive']);
+const VOID_HTML_ELEMENTS = new Set([
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'link',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr'
+]);
 
 export default function whatBabelPlugin({ types: t }) {
   const mode = 'fine-grained'; // Can be overridden via plugin options
@@ -47,6 +63,10 @@ export default function whatBabelPlugin({ types: t }) {
     return /^[A-Z]/.test(name);
   }
 
+  function isVoidHtmlElement(name) {
+    return VOID_HTML_ELEMENTS.has(String(name).toLowerCase());
+  }
+
   function getAttributeValue(value) {
     if (!value) return t.booleanLiteral(true);
     if (t.isJSXExpressionContainer(value)) return value.expression;
@@ -54,6 +74,12 @@ export default function whatBabelPlugin({ types: t }) {
     return t.stringLiteral(value.value || '');
   }
 
+  function normalizeAttrName(attrName) {
+    if (attrName === 'className') return 'class';
+    if (attrName === 'htmlFor') return 'for';
+    return attrName;
+  }
+
   function createEventHandler(handler, modifiers) {
     if (modifiers.length === 0) return handler;
 
@@ -456,6 +482,14 @@ export default function whatBabelPlugin({ types: t }) {
     if (t.isTemplateLiteral(expr)) {
       return expr.expressions.some(isPotentiallyReactive);
     }
+    if (t.isObjectExpression(expr)) {
+      return expr.properties.some(prop =>
+        t.isObjectProperty(prop) && isPotentiallyReactive(prop.value)
+      );
+    }
+    if (t.isArrayExpression(expr)) {
+      return expr.elements.some(el => el && isPotentiallyReactive(el));
+    }
     return false;
   }
 
@@ -467,8 +501,9 @@ export default function whatBabelPlugin({ types: t }) {
     }
 
     if (t.isJSXExpressionContainer(node)) {
-      // Dynamic — leave a placeholder
-      return '';
+      // Dynamic child marker so insert() can preserve source ordering
+      if (t.isJSXEmptyExpression(node.expression)) return '';
+      return '<!--$-->';
     }
 
     if (!t.isJSXElement(node)) return '';
@@ -501,9 +536,13 @@ export default function whatBabelPlugin({ types: t }) {
     }
 
     const selfClosing = node.openingElement.selfClosing;
+    if (selfClosing && isVoidHtmlElement(tagName)) {
+      html += '>';
+      return html;
+    }
+
     if (selfClosing) {
-      // Void elements
-      html += '/>';
+      html += `></${tagName}>`;
       return html;
     }
 
@@ -515,11 +554,12 @@ export default function whatBabelPlugin({ types: t }) {
         const text = child.value.replace(/\n\s+/g, ' ').trim();
         if (text) html += escapeHTML(text);
       } else if (t.isJSXExpressionContainer(child)) {
-        // Dynamic child — placeholder will be handled by insert()
-        // Skip entirely from template
+        if (!t.isJSXEmptyExpression(child.expression)) {
+          html += '<!--$-->';
+        }
       } else if (t.isJSXElement(child)) {
         if (isComponent(child.openingElement.name.name)) {
-          // Component — skip from template
+          html += '<!--$-->';
         } else {
           html += extractStaticHTML(child);
         }
@@ -615,6 +655,15 @@ export default function whatBabelPlugin({ types: t }) {
   }
 
   function applyDynamicAttrs(statements, elId, attributes, state) {
+    function buildSetPropCall(propName, valueExpr) {
+      state.needsSetProp = true;
+      return t.callExpression(t.identifier('_$setProp'), [
+        t.identifier(elId),
+        t.stringLiteral(propName),
+        valueExpr
+      ]);
+    }
+
     for (const attr of attributes) {
       if (t.isJSXSpreadAttribute(attr)) {
         // spread(el, props) — use runtime spread
@@ -718,75 +767,21 @@ export default function whatBabelPlugin({ types: t }) {
       // Dynamic attribute (expression)
       if (t.isJSXExpressionContainer(attr.value)) {
         const expr = attr.value.expression;
-        let domName = attrName;
-        if (attrName === 'className') domName = 'class';
-        if (attrName === 'htmlFor') domName = 'for';
+        const domName = normalizeAttrName(attrName);
 
         if (isPotentiallyReactive(expr)) {
           // Reactive attribute — wrap in effect
           state.needsEffect = true;
-          if (domName === 'class') {
-            statements.push(
-              t.expressionStatement(
-                t.callExpression(t.identifier('_$effect'), [
-                  t.arrowFunctionExpression([], t.assignmentExpression('=',
-                    t.memberExpression(t.identifier(elId), t.identifier('className')),
-                    t.logicalExpression('||', expr, t.stringLiteral(''))
-                  ))
-                ])
-              )
-            );
-          } else if (domName === 'style') {
-            statements.push(
-              t.expressionStatement(
-                t.callExpression(t.identifier('_$effect'), [
-                  t.arrowFunctionExpression([], t.blockStatement([
-                    t.expressionStatement(
-                      t.callExpression(
-                        t.memberExpression(
-                          t.memberExpression(t.identifier('Object'), t.identifier('assign')),
-                          t.identifier('call')
-                        ),
-                        [t.nullLiteral(), t.memberExpression(t.identifier(elId), t.identifier('style')), expr]
-                      )
-                    )
-                  ]))
-                ])
-              )
-            );
-          } else {
-            statements.push(
-              t.expressionStatement(
-                t.callExpression(t.identifier('_$effect'), [
-                  t.arrowFunctionExpression([], t.callExpression(
-                    t.memberExpression(t.identifier(elId), t.identifier('setAttribute')),
-                    [t.stringLiteral(domName), expr]
-                  ))
-                ])
-              )
-            );
-          }
+          statements.push(
+            t.expressionStatement(
+              t.callExpression(t.identifier('_$effect'), [
+                t.arrowFunctionExpression([], buildSetPropCall(domName, expr))
+              ])
+            )
+          );
         } else {
           // Static expression (no signal calls) — set once
-          if (domName === 'class') {
-            statements.push(
-              t.expressionStatement(
-                t.assignmentExpression('=',
-                  t.memberExpression(t.identifier(elId), t.identifier('className')),
-                  t.logicalExpression('||', expr, t.stringLiteral(''))
-                )
-              )
-            );
-          } else {
-            statements.push(
-              t.expressionStatement(
-                t.callExpression(
-                  t.memberExpression(t.identifier(elId), t.identifier('setAttribute')),
-                  [t.stringLiteral(domName), expr]
-                )
-              )
-            );
-          }
+          statements.push(t.expressionStatement(buildSetPropCall(domName, expr)));
         }
       }
       // Static string/boolean attributes already in template
@@ -809,16 +804,16 @@ export default function whatBabelPlugin({ types: t }) {
         if (t.isJSXEmptyExpression(child.expression)) continue;
 
         const expr = child.expression;
+        const marker = buildChildAccess(elId, childIndex);
         state.needsInsert = true;
 
-        // insert(parent, () => expr, marker?)
-        // For now use simple insert without marker — appends
         if (isPotentiallyReactive(expr)) {
           statements.push(
             t.expressionStatement(
               t.callExpression(t.identifier('_$insert'), [
                 t.identifier(elId),
-                t.arrowFunctionExpression([], expr)
+                t.arrowFunctionExpression([], expr),
+                marker
               ])
             )
           );
@@ -827,11 +822,13 @@ export default function whatBabelPlugin({ types: t }) {
             t.expressionStatement(
               t.callExpression(t.identifier('_$insert'), [
                 t.identifier(elId),
-                expr
+                expr,
+                marker
               ])
             )
           );
         }
+        childIndex++;
         continue;
       }
 
@@ -840,15 +837,18 @@ export default function whatBabelPlugin({ types: t }) {
         if (isComponent(childTag) || childTag === 'For' || childTag === 'Show') {
           // Component/control-flow — transform and insert
           const transformed = transformElementFineGrained({ node: child }, state);
+          const marker = buildChildAccess(elId, childIndex);
           state.needsInsert = true;
           statements.push(
             t.expressionStatement(
               t.callExpression(t.identifier('_$insert'), [
                 t.identifier(elId),
-                transformed
+                transformed,
+                marker
               ])
             )
           );
+          childIndex++;
         } else {
           // Static child element — already in template
           // But check if it has dynamic children/attrs that need effects
@@ -907,10 +907,10 @@ export default function whatBabelPlugin({ types: t }) {
   }
 
   function buildChildAccess(elId, index) {
-    // Build _el$.children[index] or _el$.firstChild / .firstChild.nextSibling chain
-    // Use children[n] for simplicity and readability
+    // Use childNodes[n] (not children[n]) so indices remain stable when text/comment
+    // placeholders are present in the static template.
     return t.memberExpression(
-      t.memberExpression(t.identifier(elId), t.identifier('children')),
+      t.memberExpression(t.identifier(elId), t.identifier('childNodes')),
       t.numericLiteral(index),
       true // computed
     );
@@ -1022,6 +1022,7 @@ export default function whatBabelPlugin({ types: t }) {
           state.needsEffect = false;
           state.needsMapArray = false;
           state.needsSpread = false;
+          state.needsSetProp = false;
           state.templates = [];
           state.templateCount = 0;
           state._varCounter = 0;
@@ -1069,6 +1070,11 @@ export default function whatBabelPlugin({ types: t }) {
                 t.importSpecifier(t.identifier('_$spread'), t.identifier('spread'))
               );
             }
+            if (state.needsSetProp) {
+              fgSpecifiers.push(
+                t.importSpecifier(t.identifier('_$setProp'), t.identifier('setProp'))
+              );
+            }
 
             // Also include h/Fragment/Island if vdom mode used for components
             const coreSpecifiers = [];

package/src/error-overlay.js

@@ -0,0 +1,357 @@
+/**
+ * What Framework — Vite Error Overlay
+ *
+ * Custom error overlay injected during dev mode. Shows compiler transform errors
+ * and runtime signal errors with What Framework branding and helpful context.
+ *
+ * This is client-side code that Vite injects into the page during development.
+ */
+
+// CSS for the overlay — scoped to avoid style conflicts
+const OVERLAY_STYLES = `
+  :host {
+    position: fixed;
+    inset: 0;
+    z-index: 99999;
+    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  }
+
+  .backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.66);
+  }
+
+  .panel {
+    position: fixed;
+    inset: 2rem;
+    overflow: auto;
+    background: #1a1a2e;
+    border: 1px solid #2a2a4a;
+    border-radius: 12px;
+    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
+    color: #e0e0e0;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid #2a2a4a;
+    background: #16163a;
+    border-radius: 12px 12px 0 0;
+  }
+
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .logo {
+    width: 28px;
+    height: 28px;
+    background: linear-gradient(135deg, #2563eb, #1d4ed8);
+    border-radius: 6px;
+    display: grid;
+    place-items: center;
+    font-weight: 800;
+    font-size: 14px;
+    color: #fff;
+  }
+
+  .brand {
+    font-size: 14px;
+    font-weight: 600;
+    color: #a0a0c0;
+  }
+
+  .tag {
+    font-size: 11px;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-weight: 600;
+  }
+
+  .tag-error {
+    background: #3b1219;
+    color: #f87171;
+  }
+
+  .tag-warning {
+    background: #3b2f19;
+    color: #fbbf24;
+  }
+
+  .close-btn {
+    background: none;
+    border: 1px solid #3a3a5a;
+    color: #a0a0c0;
+    border-radius: 6px;
+    padding: 4px 12px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 12px;
+  }
+
+  .close-btn:hover {
+    background: #2a2a4a;
+    color: #fff;
+  }
+
+  .body {
+    padding: 1.5rem;
+  }
+
+  .error-title {
+    font-size: 16px;
+    font-weight: 700;
+    color: #f87171;
+    margin: 0 0 0.5rem;
+  }
+
+  .error-message {
+    font-size: 14px;
+    color: #e0e0e0;
+    margin: 0 0 1rem;
+    line-height: 1.6;
+    white-space: pre-wrap;
+  }
+
+  .file-path {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 12px;
+    color: #818cf8;
+    margin-bottom: 1rem;
+    padding: 0.25rem 0;
+  }
+
+  .code-frame {
+    background: #0d0d1a;
+    border: 1px solid #2a2a4a;
+    border-radius: 8px;
+    overflow-x: auto;
+    margin-bottom: 1rem;
+  }
+
+  .code-line {
+    display: flex;
+    padding: 0 1rem;
+    font-size: 13px;
+    line-height: 1.7;
+  }
+
+  .code-line.highlight {
+    background: rgba(248, 113, 113, 0.1);
+  }
+
+  .line-number {
+    color: #4a4a6a;
+    min-width: 3ch;
+    text-align: right;
+    margin-right: 1rem;
+    user-select: none;
+  }
+
+  .line-content {
+    white-space: pre;
+  }
+
+  .tip {
+    margin-top: 1rem;
+    padding: 0.75rem 1rem;
+    background: #1a2744;
+    border: 1px solid #1e3a5f;
+    border-radius: 8px;
+    font-size: 13px;
+    color: #93c5fd;
+    line-height: 1.5;
+  }
+
+  .tip-label {
+    font-weight: 700;
+    color: #60a5fa;
+  }
+
+  .stack {
+    margin-top: 1rem;
+    font-size: 12px;
+    color: #6a6a8a;
+    white-space: pre-wrap;
+    line-height: 1.5;
+  }
+`;
+
+/**
+ * Build the overlay HTML for an error
+ */
+function buildOverlayHTML(err) {
+  const isCompilerError = err._isCompilerError || err.plugin === 'vite-plugin-what';
+  const type = isCompilerError ? 'Compiler Error' : 'Runtime Error';
+  const tagClass = isCompilerError ? 'tag-error' : 'tag-warning';
+
+  let codeFrame = '';
+  if (err.frame || err._frame) {
+    const frame = err.frame || err._frame;
+    const lines = frame.split('\n');
+    codeFrame = `<div class="code-frame">${
+      lines.map(line => {
+        const isHighlight = line.trimStart().startsWith('>');
+        const cleaned = line.replace(/^\s*>\s?/, ' ').replace(/^\s{2}/, '');
+        const match = cleaned.match(/^(\s*\d+)\s*\|(.*)$/);
+        if (match) {
+          return `<div class="code-line${isHighlight ? ' highlight' : ''}"><span class="line-number">${match[1].trim()}</span><span class="line-content">${escapeHTML(match[2])}</span></div>`;
+        }
+        // Caret line (^^^)
+        if (cleaned.trim().startsWith('|')) {
+          return `<div class="code-line highlight"><span class="line-number"></span><span class="line-content" style="color:#f87171">${escapeHTML(cleaned.replace(/^\s*\|/, ''))}</span></div>`;
+        }
+        return '';
+      }).join('')
+    }</div>`;
+  }
+
+  const filePath = err.id || err.loc?.file || '';
+  const line = err.loc?.line ?? '';
+  const col = err.loc?.column ?? '';
+  const location = filePath
+    ? `<div class="file-path">${escapeHTML(filePath)}${line ? `:${line}` : ''}${col ? `:${col}` : ''}</div>`
+    : '';
+
+  const tip = getTip(err);
+  const tipHTML = tip ? `<div class="tip"><span class="tip-label">Tip: </span>${escapeHTML(tip)}</div>` : '';
+
+  const stack = err.stack && !isCompilerError
+    ? `<div class="stack">${escapeHTML(cleanStack(err.stack))}</div>`
+    : '';
+
+  return `
+    <div class="backdrop"></div>
+    <div class="panel">
+      <div class="header">
+        <div class="header-left">
+          <div class="logo">W</div>
+          <span class="brand">What Framework</span>
+          <span class="tag ${tagClass}">${type}</span>
+        </div>
+        <button class="close-btn">Dismiss (Esc)</button>
+      </div>
+      <div class="body">
+        <h2 class="error-title">${escapeHTML(err.name || 'Error')}</h2>
+        ${location}
+        <pre class="error-message">${escapeHTML(err.message || String(err))}</pre>
+        ${codeFrame}
+        ${tipHTML}
+        ${stack}
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * Context-aware tips for common What Framework errors
+ */
+function getTip(err) {
+  const msg = (err.message || '').toLowerCase();
+
+  if (msg.includes('infinite') && msg.includes('effect')) {
+    return 'An effect is writing to a signal it also reads. Use untrack() to read without subscribing, or move the write to a different effect.';
+  }
+  if (msg.includes('jsx') && msg.includes('unexpected')) {
+    return 'Make sure your vite.config includes the What compiler plugin: import what from "what-compiler/vite"';
+  }
+  if (msg.includes('not a function') && msg.includes('signal')) {
+    return 'Signals are functions: call sig() to read, sig(value) to write. Check you\'re not destructuring a signal.';
+  }
+  if (msg.includes('hydrat')) {
+    return 'Hydration mismatches happen when SSR output differs from client render. Ensure server and client see the same initial state.';
+  }
+  return '';
+}
+
+function escapeHTML(str) {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+function cleanStack(stack) {
+  return stack
+    .split('\n')
+    .filter(line => !line.includes('node_modules'))
+    .slice(0, 10)
+    .join('\n');
+}
+
+/**
+ * Client-side overlay component — injected as a custom element
+ * to avoid style conflicts with the user's application.
+ */
+const OVERLAY_ELEMENT = `
+class WhatErrorOverlay extends HTMLElement {
+  constructor(err) {
+    super();
+    this.root = this.attachShadow({ mode: 'open' });
+    this.root.innerHTML = \`<style>${OVERLAY_STYLES}</style>\`;
+    this.show(err);
+  }
+
+  show(err) {
+    const template = document.createElement('template');
+    template.innerHTML = (${buildOverlayHTML.toString()})(err);
+    this.root.appendChild(template.content.cloneNode(true));
+
+    // Close handlers
+    this.root.querySelector('.close-btn')?.addEventListener('click', () => this.close());
+    this.root.querySelector('.backdrop')?.addEventListener('click', () => this.close());
+    document.addEventListener('keydown', this._onKey = (e) => {
+      if (e.key === 'Escape') this.close();
+    });
+  }
+
+  close() {
+    document.removeEventListener('keydown', this._onKey);
+    this.remove();
+  }
+}
+
+// Helper functions bundled into the overlay element
+${escapeHTML.toString()}
+${cleanStack.toString()}
+${getTip.toString()}
+
+if (!customElements.get('what-error-overlay')) {
+  customElements.define('what-error-overlay', WhatErrorOverlay);
+}
+`;
+
+/**
+ * Generate the client-side error overlay injection script.
+ * Called by the Vite plugin to inject into the dev server.
+ */
+export function getErrorOverlayCode() {
+  return OVERLAY_ELEMENT;
+}
+
+/**
+ * Create the error overlay middleware for Vite's dev server.
+ * Intercepts Vite's error events and shows a custom What-branded overlay.
+ */
+export function setupErrorOverlay(server) {
+  // Listen for Vite errors and enrich with What Framework context
+  const origSend = server.ws.send.bind(server.ws);
+  server.ws.send = function (payload) {
+    if (payload?.type === 'error') {
+      // Tag compiler errors
+      if (payload.err?.plugin === 'vite-plugin-what') {
+        payload.err._isCompilerError = true;
+      }
+    }
+    return origSend(payload);
+  };
+}

package/src/vite-plugin.js

@@ -10,6 +10,7 @@ import path from 'path';
 import { transformSync } from '@babel/core';
 import whatBabelPlugin from './babel-plugin.js';
 import { generateRoutesModule, scanPages } from './file-router.js';
+import { setupErrorOverlay } from './error-overlay.js';
 
 const VIRTUAL_ROUTES_ID = 'virtual:what-routes';
 const RESOLVED_VIRTUAL_ID = '\0' + VIRTUAL_ROUTES_ID;
@@ -43,6 +44,9 @@ export default function whatVitePlugin(options = {}) {
     configureServer(devServer) {
       server = devServer;
 
+      // Set up What-branded error overlay
+      setupErrorOverlay(devServer);
+
       // Watch the pages directory for file additions/removals
       devServer.watcher.on('add', (file) => {
         if (file.startsWith(pagesDir)) {
@@ -107,6 +111,12 @@ export default function whatVitePlugin(options = {}) {
           map: result.map
         };
       } catch (error) {
+        // Enrich Babel errors with file context for the error overlay
+        error.plugin = 'vite-plugin-what';
+        if (!error.id) error.id = id;
+        if (error.loc === undefined && error._loc) {
+          error.loc = { file: id, line: error._loc.line, column: error._loc.column };
+        }
         console.error(`[what] Error transforming ${id}:`, error.message);
         throw error;
       }