gonia 0.0.1 → 0.0.3

package/README.md

@@ -5,7 +5,7 @@ A lightweight, SSR-first reactive UI library for building web applications with
 ## Features
 
 - **SSR-First Architecture** - Server-side rendering with seamless client hydration
-- **Declarative Directives** - Vue-inspired template syntax (`c-text`, `c-for`, `c-if`, etc.)
+- **Declarative Directives** - Vue-inspired template syntax (`g-text`, `g-for`, `g-if`, etc.)
 - **Fine-Grained Reactivity** - Efficient updates without virtual DOM diffing
 - **Zero Dependencies** - Core library has no runtime dependencies (linkedom for SSR only)
 - **TypeScript Native** - Full type safety with excellent IDE support
@@ -34,7 +34,7 @@ registerDirective(registry, 'class', cclass);
 
 // Render HTML with state
 const html = await render(
-  '<ul><li c-for="item in items" c-text="item"></li></ul>',
+  '<ul><li g-for="item in items" g-text="item"></li></ul>',
   { items: ['Apple', 'Banana', 'Cherry'] },
   registry
 );
@@ -76,8 +76,8 @@ directive('my-app', myApp, { scope: true });
 
 ```html
 <my-app>
-  <p c-text="count"></p>
-  <button c-on="click: increment">+1</button>
+  <p g-text="count"></p>
+  <button g-on="click: increment">+1</button>
 </my-app>
 ```
 
@@ -85,13 +85,13 @@ directive('my-app', myApp, { scope: true });
 
 | Directive | Description | Example |
 |-----------|-------------|---------|
-| `c-text` | Set text content | `<span c-text="message"></span>` |
-| `c-show` | Toggle visibility | `<div c-show="isVisible">...</div>` |
-| `c-if` | Conditional render | `<p c-if="hasError">Error!</p>` |
-| `c-for` | Loop iteration | `<li c-for="item in items">...</li>` |
-| `c-class` | Dynamic classes | `<div c-class="{ active: isActive }">` |
-| `c-model` | Two-way binding | `<input c-model="name">` |
-| `c-on` | Event handling | `<button c-on="click: handleClick">` |
+| `g-text` | Set text content | `<span g-text="message"></span>` |
+| `g-show` | Toggle visibility | `<div g-show="isVisible">...</div>` |
+| `g-if` | Conditional render | `<p g-if="hasError">Error!</p>` |
+| `g-for` | Loop iteration | `<li g-for="item in items">...</li>` |
+| `g-class` | Dynamic classes | `<div g-class="{ active: isActive }">` |
+| `g-model` | Two-way binding | `<input g-model="name">` |
+| `g-on` | Event handling | `<button g-on="click: handleClick">` |
 
 ## Vite Integration
 

package/dist/client/hydrate.js

@@ -55,7 +55,7 @@ function getSelector(registry) {
     if (!cachedSelector) {
         const directiveSelectors = [];
         for (const name of registry.keys()) {
-            directiveSelectors.push(`[c-${name}]`);
+            directiveSelectors.push(`[g-${name}]`);
         }
         // Also match native <slot> elements
         directiveSelectors.push('slot');
@@ -71,7 +71,7 @@ function getSelector(registry) {
 function getDirectivesForElement(el, registry) {
     const directives = [];
     for (const [name, directive] of registry) {
-        const attr = el.getAttribute(`c-${name}`);
+        const attr = el.getAttribute(`g-${name}`);
         if (attr !== null) {
             directives.push({ name, directive, expr: attr });
         }
@@ -175,7 +175,7 @@ function resolveDependencies(directive, expr, el, ctx) {
  * @internal
  */
 function processElement(el, registry) {
-    // Skip elements already processed by c-for (they have their own child scope)
+    // Skip elements already processed by g-for (they have their own child scope)
     if (el.hasAttribute(FOR_PROCESSED_ATTR)) {
         return;
     }
@@ -201,7 +201,7 @@ function processElement(el, registry) {
             }
             return result;
         };
-        // STRUCTURAL directives (like c-for) take ownership of the element.
+        // STRUCTURAL directives (like g-for) take ownership of the element.
         // They remove the original and handle other directives on clones themselves.
         const isStructural = directive.priority === DirectivePriority.STRUCTURAL;
         if (chain instanceof Promise) {
@@ -259,7 +259,7 @@ export function registerDirective(registry, name, fn) {
     registry.set(name, fn);
     cachedSelector = null;
     if (document.body && initialized) {
-        const selector = `[c-${name}]`;
+        const selector = `[g-${name}]`;
         for (const el of document.querySelectorAll(selector)) {
             processElement(el, registry);
         }
@@ -400,7 +400,7 @@ export async function init(registry) {
     const selector = getSelector(reg);
     // Process existing elements synchronously, collecting promises from async directives.
     // Note: We collect elements first, but some may be removed during processing
-    // (e.g., c-for removes its template). Check isConnected before processing.
+    // (e.g., g-for removes its template). Check isConnected before processing.
     const elements = document.querySelectorAll(selector);
     const promises = [];
     for (const el of elements) {

package/dist/directives/class.d.ts

@@ -14,8 +14,8 @@ import { Directive } from '../types.js';
  *
  * @example
  * ```html
- * <div c-class="{ active: isActive, 'text-red': hasError }">
- * <div c-class="{ [dynamicClass]: true }">
+ * <div g-class="{ active: isActive, 'text-red': hasError }">
+ * <div g-class="{ [dynamicClass]: true }">
  * ```
  */
 export declare const cclass: Directive<['$expr', '$element', '$eval']>;

package/dist/directives/class.js

@@ -15,8 +15,8 @@ import { effect } from '../reactivity.js';
  *
  * @example
  * ```html
- * <div c-class="{ active: isActive, 'text-red': hasError }">
- * <div c-class="{ [dynamicClass]: true }">
+ * <div g-class="{ active: isActive, 'text-red': hasError }">
+ * <div g-class="{ [dynamicClass]: true }">
  * ```
  */
 export const cclass = function cclass($expr, $element, $eval) {
@@ -39,4 +39,4 @@ export const cclass = function cclass($expr, $element, $eval) {
     });
 };
 cclass.$inject = ['$expr', '$element', '$eval'];
-directive('c-class', cclass);
+directive('g-class', cclass);

package/dist/directives/for.d.ts

@@ -4,10 +4,10 @@
  * @packageDocumentation
  */
 import { Directive } from '../types.js';
-/** Attribute used to mark elements processed by c-for */
-export declare const FOR_PROCESSED_ATTR = "data-c-for-processed";
+/** Attribute used to mark elements processed by g-for */
+export declare const FOR_PROCESSED_ATTR = "data-g-for-processed";
 /** Attribute used to mark template content that should be skipped during SSR */
-export declare const FOR_TEMPLATE_ATTR = "data-c-for-template";
+export declare const FOR_TEMPLATE_ATTR = "data-g-for-template";
 /**
  * Iterate over array or object items.
  *
@@ -17,13 +17,13 @@ export declare const FOR_TEMPLATE_ATTR = "data-c-for-template";
  * For objects, provides value and key.
  *
  * On server: wraps template in <template> element, renders items after it.
- * On client: finds <template c-for>, extracts template, sets up reactive loop.
+ * On client: finds <template g-for>, extracts template, sets up reactive loop.
  *
  * @example
  * ```html
- * <li c-for="item in items" c-text="item.name"></li>
- * <li c-for="(item, index) in items" c-text="index + ': ' + item.name"></li>
- * <div c-for="(value, key) in object" c-text="key + ': ' + value"></div>
+ * <li g-for="item in items" g-text="item.name"></li>
+ * <li g-for="(item, index) in items" g-text="index + ': ' + item.name"></li>
+ * <div g-for="(value, key) in object" g-text="key + ': ' + value"></div>
  * ```
  */
 export declare const cfor: Directive<['$expr', '$element', '$eval', '$state', '$mode']>;

package/dist/directives/for.js

@@ -7,7 +7,7 @@ import { directive, DirectivePriority, Mode } from '../types.js';
 import { effect, createEffectScope, createScope } from '../reactivity.js';
 import { createContext } from '../context.js';
 /**
- * Parse a c-for expression.
+ * Parse a g-for expression.
  *
  * Supports:
  * - `item in items`
@@ -27,26 +27,26 @@ function parseForExpression(expr) {
         iterableName: match[3].trim()
     };
 }
-/** Attribute used to mark elements processed by c-for */
-export const FOR_PROCESSED_ATTR = 'data-c-for-processed';
+/** Attribute used to mark elements processed by g-for */
+export const FOR_PROCESSED_ATTR = 'data-g-for-processed';
 /** Attribute used to mark template content that should be skipped during SSR */
-export const FOR_TEMPLATE_ATTR = 'data-c-for-template';
+export const FOR_TEMPLATE_ATTR = 'data-g-for-template';
 /**
  * Process directives on a cloned element within a child scope.
  */
 function processClonedElement(el, parentState, scopeAdditions, mode) {
-    // Mark this element as processed by c-for so hydrate skips it
+    // Mark this element as processed by g-for so hydrate skips it
     el.setAttribute(FOR_PROCESSED_ATTR, '');
     const childScope = createScope(parentState, scopeAdditions);
     const childCtx = createContext(mode, childScope);
-    // Process c-text directives
-    const textAttr = el.getAttribute('c-text');
+    // Process g-text directives
+    const textAttr = el.getAttribute('g-text');
     if (textAttr) {
         const value = childCtx.eval(textAttr);
         el.textContent = String(value ?? '');
     }
-    // Process c-class directives
-    const classAttr = el.getAttribute('c-class');
+    // Process g-class directives
+    const classAttr = el.getAttribute('g-class');
     if (classAttr) {
         const classObj = childCtx.eval(classAttr);
         if (classObj && typeof classObj === 'object') {
@@ -60,15 +60,15 @@ function processClonedElement(el, parentState, scopeAdditions, mode) {
             }
         }
     }
-    // Process c-show directives
-    const showAttr = el.getAttribute('c-show');
+    // Process g-show directives
+    const showAttr = el.getAttribute('g-show');
     if (showAttr) {
         const value = childCtx.eval(showAttr);
         el.style.display = value ? '' : 'none';
     }
-    // Process c-on directives (format: "event: handler") - client only
+    // Process g-on directives (format: "event: handler") - client only
     if (mode === Mode.CLIENT) {
-        const onAttr = el.getAttribute('c-on');
+        const onAttr = el.getAttribute('g-on');
         if (onAttr) {
             setupEventHandler(el, onAttr, childCtx, childScope);
         }
@@ -85,7 +85,7 @@ function processClonedElement(el, parentState, scopeAdditions, mode) {
 function setupEventHandler(el, expr, ctx, state) {
     const colonIdx = expr.indexOf(':');
     if (colonIdx === -1) {
-        console.error(`Invalid c-on expression: ${expr}. Expected "event: handler"`);
+        console.error(`Invalid g-on expression: ${expr}. Expected "event: handler"`);
         return;
     }
     const eventName = expr.slice(0, colonIdx).trim();
@@ -168,19 +168,19 @@ function removeSSRItems(templateEl) {
  * For objects, provides value and key.
  *
  * On server: wraps template in <template> element, renders items after it.
- * On client: finds <template c-for>, extracts template, sets up reactive loop.
+ * On client: finds <template g-for>, extracts template, sets up reactive loop.
  *
  * @example
  * ```html
- * <li c-for="item in items" c-text="item.name"></li>
- * <li c-for="(item, index) in items" c-text="index + ': ' + item.name"></li>
- * <div c-for="(value, key) in object" c-text="key + ': ' + value"></div>
+ * <li g-for="item in items" g-text="item.name"></li>
+ * <li g-for="(item, index) in items" g-text="index + ': ' + item.name"></li>
+ * <div g-for="(value, key) in object" g-text="key + ': ' + value"></div>
  * ```
  */
 export const cfor = function cfor($expr, $element, $eval, $state, $mode) {
     const parsed = parseForExpression($expr);
     if (!parsed) {
-        console.error(`Invalid c-for expression: ${$expr}`);
+        console.error(`Invalid g-for expression: ${$expr}`);
         return;
     }
     const parent = $element.parentNode;
@@ -192,10 +192,10 @@ export const cfor = function cfor($expr, $element, $eval, $state, $mode) {
     if ($mode === Mode.SERVER) {
         // Create a <template> element to hold the original
         const templateWrapper = $element.ownerDocument.createElement('template');
-        templateWrapper.setAttribute('c-for', $expr);
-        // Clone the original element (without c-for attr) into the template
+        templateWrapper.setAttribute('g-for', $expr);
+        // Clone the original element (without g-for attr) into the template
         const templateContent = $element.cloneNode(true);
-        templateContent.removeAttribute('c-for');
+        templateContent.removeAttribute('g-for');
         // Mark as template content so render loop skips it
         templateContent.setAttribute(FOR_TEMPLATE_ATTR, '');
         // Append directly to template element (linkedom doesn't support .content)
@@ -209,11 +209,11 @@ export const cfor = function cfor($expr, $element, $eval, $state, $mode) {
     }
     // Client-side: check if hydrating from SSR or fresh render
     if (isTemplateElement) {
-        // Hydrating from SSR: element is <template c-for="...">
+        // Hydrating from SSR: element is <template g-for="...">
         const templateWrapper = $element;
         const templateContent = templateWrapper.content.firstElementChild;
         if (!templateContent) {
-            console.error('c-for template element has no content');
+            console.error('g-for template element has no content');
             return;
         }
         // Remove SSR-rendered items
@@ -235,12 +235,12 @@ export const cfor = function cfor($expr, $element, $eval, $state, $mode) {
         });
     }
     else {
-        // Fresh client render: element has c-for attribute directly
+        // Fresh client render: element has g-for attribute directly
         // Wrap in template element for consistency
         const templateWrapper = $element.ownerDocument.createElement('template');
-        templateWrapper.setAttribute('c-for', $expr);
+        templateWrapper.setAttribute('g-for', $expr);
         const templateContent = $element.cloneNode(true);
-        templateContent.removeAttribute('c-for');
+        templateContent.removeAttribute('g-for');
         templateWrapper.content.appendChild(templateContent);
         parent.replaceChild(templateWrapper, $element);
         // Set up reactive loop
@@ -262,4 +262,4 @@ export const cfor = function cfor($expr, $element, $eval, $state, $mode) {
 };
 cfor.$inject = ['$expr', '$element', '$eval', '$state', '$mode'];
 cfor.priority = DirectivePriority.STRUCTURAL;
-directive('c-for', cfor);
+directive('g-for', cfor);

package/dist/directives/html.d.ts

@@ -9,8 +9,8 @@ import { Directive } from '../types.js';
  *
  * @example
  * ```html
- * <div c-html="formattedContent"></div>
- * <div c-html="'<strong>' + title + '</strong>'"></div>
+ * <div g-html="formattedContent"></div>
+ * <div g-html="'<strong>' + title + '</strong>'"></div>
  * ```
  */
 export declare const html: Directive<['$expr', '$element', '$eval']>;

package/dist/directives/html.js

@@ -1,4 +1,5 @@
 import { directive } from '../types.js';
+import { effect } from '../reactivity.js';
 /**
  * Set element's innerHTML from an expression.
  *
@@ -9,11 +10,13 @@ import { directive } from '../types.js';
  *
  * @example
  * ```html
- * <div c-html="formattedContent"></div>
- * <div c-html="'<strong>' + title + '</strong>'"></div>
+ * <div g-html="formattedContent"></div>
+ * <div g-html="'<strong>' + title + '</strong>'"></div>
  * ```
  */
 export const html = function html($expr, $element, $eval) {
-    $element.innerHTML = String($eval($expr) ?? '');
+    effect(() => {
+        $element.innerHTML = String($eval($expr) ?? '');
+    });
 };
-directive('c-html', html);
+directive('g-html', html);

package/dist/directives/if.d.ts

@@ -4,13 +4,13 @@
  * @packageDocumentation
  */
 import { Directive } from '../types.js';
-/** Attribute used to mark elements processed by c-if */
-export declare const IF_PROCESSED_ATTR = "data-c-if-processed";
+/** Attribute used to mark elements processed by g-if */
+export declare const IF_PROCESSED_ATTR = "data-g-if-processed";
 /**
  * Conditionally render an element.
  *
  * @remarks
- * Unlike c-show which uses display:none, c-if completely removes
+ * Unlike g-show which uses display:none, g-if completely removes
  * the element from the DOM when the condition is falsy.
  *
  * On server: evaluates once and removes element if false.
@@ -18,8 +18,8 @@ export declare const IF_PROCESSED_ATTR = "data-c-if-processed";
  *
  * @example
  * ```html
- * <div c-if="isLoggedIn">Welcome back!</div>
- * <div c-if="items.length > 0">Has items</div>
+ * <div g-if="isLoggedIn">Welcome back!</div>
+ * <div g-if="items.length > 0">Has items</div>
  * ```
  */
 export declare const cif: Directive<['$expr', '$element', '$eval', '$state', '$mode']>;

package/dist/directives/if.js

@@ -7,8 +7,8 @@ import { directive, DirectivePriority, Mode } from '../types.js';
 import { effect } from '../reactivity.js';
 import { createContext } from '../context.js';
 import { createScope } from '../reactivity.js';
-/** Attribute used to mark elements processed by c-if */
-export const IF_PROCESSED_ATTR = 'data-c-if-processed';
+/** Attribute used to mark elements processed by g-if */
+export const IF_PROCESSED_ATTR = 'data-g-if-processed';
 /**
  * Process directives on a conditionally rendered element.
  */
@@ -16,14 +16,14 @@ function processConditionalElement(el, parentState, mode) {
     el.setAttribute(IF_PROCESSED_ATTR, '');
     const childScope = createScope(parentState, {});
     const childCtx = createContext(mode, childScope);
-    // Process c-text directives
-    const textAttr = el.getAttribute('c-text');
+    // Process g-text directives
+    const textAttr = el.getAttribute('g-text');
     if (textAttr) {
         const value = childCtx.eval(textAttr);
         el.textContent = String(value ?? '');
     }
-    // Process c-class directives
-    const classAttr = el.getAttribute('c-class');
+    // Process g-class directives
+    const classAttr = el.getAttribute('g-class');
     if (classAttr) {
         const classObj = childCtx.eval(classAttr);
         if (classObj && typeof classObj === 'object') {
@@ -37,15 +37,15 @@ function processConditionalElement(el, parentState, mode) {
             }
         }
     }
-    // Process c-show directives
-    const showAttr = el.getAttribute('c-show');
+    // Process g-show directives
+    const showAttr = el.getAttribute('g-show');
     if (showAttr) {
         const value = childCtx.eval(showAttr);
         el.style.display = value ? '' : 'none';
     }
-    // Process c-on directives (format: "event: handler") - client only
+    // Process g-on directives (format: "event: handler") - client only
     if (mode === Mode.CLIENT) {
-        const onAttr = el.getAttribute('c-on');
+        const onAttr = el.getAttribute('g-on');
         if (onAttr) {
             const colonIdx = onAttr.indexOf(':');
             if (colonIdx !== -1) {
@@ -69,7 +69,7 @@ function processConditionalElement(el, parentState, mode) {
  * Conditionally render an element.
  *
  * @remarks
- * Unlike c-show which uses display:none, c-if completely removes
+ * Unlike g-show which uses display:none, g-if completely removes
  * the element from the DOM when the condition is falsy.
  *
  * On server: evaluates once and removes element if false.
@@ -77,8 +77,8 @@ function processConditionalElement(el, parentState, mode) {
  *
  * @example
  * ```html
- * <div c-if="isLoggedIn">Welcome back!</div>
- * <div c-if="items.length > 0">Has items</div>
+ * <div g-if="isLoggedIn">Welcome back!</div>
+ * <div g-if="items.length > 0">Has items</div>
  * ```
  */
 export const cif = function cif($expr, $element, $eval, $state, $mode) {
@@ -94,16 +94,16 @@ export const cif = function cif($expr, $element, $eval, $state, $mode) {
         }
         else {
             // Process child directives
-            $element.removeAttribute('c-if');
+            $element.removeAttribute('g-if');
             processConditionalElement($element, $state, $mode);
         }
         return;
     }
     // Client-side: set up reactive effect
-    const placeholder = $element.ownerDocument.createComment(` c-if: ${$expr} `);
+    const placeholder = $element.ownerDocument.createComment(` g-if: ${$expr} `);
     parent.insertBefore(placeholder, $element);
     const template = $element.cloneNode(true);
-    template.removeAttribute('c-if');
+    template.removeAttribute('g-if');
     $element.remove();
     let renderedElement = null;
     effect(() => {
@@ -130,4 +130,4 @@ export const cif = function cif($expr, $element, $eval, $state, $mode) {
 };
 cif.$inject = ['$expr', '$element', '$eval', '$state', '$mode'];
 cif.priority = DirectivePriority.STRUCTURAL;
-directive('c-if', cif);
+directive('g-if', cif);

package/dist/directives/model.d.ts

@@ -18,10 +18,10 @@ import { Directive } from '../types.js';
  *
  * @example
  * ```html
- * <input c-model="name">
- * <input type="checkbox" c-model="isActive">
- * <select c-model="selectedOption">
- * <textarea c-model="description"></textarea>
+ * <input g-model="name">
+ * <input type="checkbox" g-model="isActive">
+ * <select g-model="selectedOption">
+ * <textarea g-model="description"></textarea>
  * ```
  */
 export declare const model: Directive<['$expr', '$element', '$eval', '$rootState']>;

package/dist/directives/model.js

@@ -68,10 +68,10 @@ function getInputType(el) {
  *
  * @example
  * ```html
- * <input c-model="name">
- * <input type="checkbox" c-model="isActive">
- * <select c-model="selectedOption">
- * <textarea c-model="description"></textarea>
+ * <input g-model="name">
+ * <input type="checkbox" g-model="isActive">
+ * <select g-model="selectedOption">
+ * <textarea g-model="description"></textarea>
  * ```
  */
 export const model = function model($expr, $element, $eval, $rootState) {
@@ -131,4 +131,4 @@ export const model = function model($expr, $element, $eval, $rootState) {
     }
 };
 model.$inject = ['$expr', '$element', '$eval', '$rootState'];
-directive('c-model', model);
+directive('g-model', model);

package/dist/directives/on.d.ts

@@ -13,9 +13,9 @@ import { Directive } from '../types.js';
  *
  * @example
  * ```html
- * <button c-on="click: handleClick">Click me</button>
- * <form c-on="submit: save">
- * <input c-on="keydown: onKey">
+ * <button g-on="click: handleClick">Click me</button>
+ * <form g-on="submit: save">
+ * <input g-on="keydown: onKey">
  * ```
  */
 export declare const on: Directive<['$expr', '$element', '$eval', '$rootState']>;

package/dist/directives/on.js

@@ -5,7 +5,7 @@
  */
 import { directive } from '../types.js';
 /**
- * Parse c-on expression: "event: handler" or "event: handler()"
+ * Parse g-on expression: "event: handler" or "event: handler()"
  */
 function parseOnExpression(expr) {
     const colonIdx = expr.indexOf(':');
@@ -28,15 +28,15 @@ function parseOnExpression(expr) {
  *
  * @example
  * ```html
- * <button c-on="click: handleClick">Click me</button>
- * <form c-on="submit: save">
- * <input c-on="keydown: onKey">
+ * <button g-on="click: handleClick">Click me</button>
+ * <form g-on="submit: save">
+ * <input g-on="keydown: onKey">
  * ```
  */
 export const on = function on($expr, $element, $eval, $rootState) {
     const parsed = parseOnExpression($expr);
     if (!parsed) {
-        console.error(`Invalid c-on expression: ${$expr}. Expected "event: handler"`);
+        console.error(`Invalid g-on expression: ${$expr}. Expected "event: handler"`);
         return;
     }
     const { event: eventName, handler: handlerExpr } = parsed;
@@ -51,4 +51,4 @@ export const on = function on($expr, $element, $eval, $rootState) {
     $element.addEventListener(eventName, handler);
 };
 on.$inject = ['$expr', '$element', '$eval', '$rootState'];
-directive('c-on', on);
+directive('g-on', on);

package/dist/directives/show.d.ts

@@ -8,8 +8,8 @@ import { Directive } from '../types.js';
  *
  * @example
  * ```html
- * <div c-show="isVisible">Visible content</div>
- * <div c-show="items.length > 0">Has items</div>
+ * <div g-show="isVisible">Visible content</div>
+ * <div g-show="items.length > 0">Has items</div>
  * ```
  */
 export declare const show: Directive<['$expr', '$element', '$eval']>;

package/dist/directives/show.js

@@ -1,4 +1,5 @@
 import { directive } from '../types.js';
+import { effect } from '../reactivity.js';
 /**
  * Toggle element visibility based on an expression.
  *
@@ -8,12 +9,14 @@ import { directive } from '../types.js';
  *
  * @example
  * ```html
- * <div c-show="isVisible">Visible content</div>
- * <div c-show="items.length > 0">Has items</div>
+ * <div g-show="isVisible">Visible content</div>
+ * <div g-show="items.length > 0">Has items</div>
  * ```
  */
 export const show = function show($expr, $element, $eval) {
-    const value = $eval($expr);
-    $element.style.display = value ? '' : 'none';
+    effect(() => {
+        const value = $eval($expr);
+        $element.style.display = value ? '' : 'none';
+    });
 };
-directive('c-show', show);
+directive('g-show', show);

package/dist/directives/slot.d.ts

@@ -27,7 +27,7 @@ import { Directive } from '../types.js';
  *
  * Dynamic slot name:
  * ```html
- * <slot c-slot="activeTab"></slot>
+ * <slot g-slot="activeTab"></slot>
  * ```
  *
  * Default slot (no name):
@@ -41,7 +41,7 @@ export declare const slot: Directive<['$expr', '$element', '$eval']>;
  *
  * @remarks
  * This handles native `<slot>` elements in templates,
- * treating them the same as `c-slot` directives.
+ * treating them the same as `g-slot` directives.
  *
  * @internal
  */

package/dist/directives/slot.js

@@ -29,7 +29,7 @@ import { findTemplateAncestor, getSavedContent } from './template.js';
  *
  * Dynamic slot name:
  * ```html
- * <slot c-slot="activeTab"></slot>
+ * <slot g-slot="activeTab"></slot>
  * ```
  *
  * Default slot (no name):
@@ -75,13 +75,13 @@ export const slot = function slot($expr, $element, $eval) {
         transclude();
     }
 };
-directive('c-slot', slot);
+directive('g-slot', slot);
 /**
  * Process native <slot> elements.
  *
  * @remarks
  * This handles native `<slot>` elements in templates,
- * treating them the same as `c-slot` directives.
+ * treating them the same as `g-slot` directives.
  *
  * @internal
  */

package/dist/directives/template.d.ts

@@ -40,7 +40,7 @@ export declare function findTemplateAncestor(el: Element): Element | null;
  *
  * @example
  * ```html
- * <div c-template="dialog">
+ * <div g-template="dialog">
  *   <span slot="header">Title</span>
  *   <p>Body content</p>
  * </div>

package/dist/directives/template.js

@@ -85,7 +85,7 @@ function extractSlotContent(el) {
  *
  * @example
  * ```html
- * <div c-template="dialog">
+ * <div g-template="dialog">
  *   <span slot="header">Title</span>
  *   <p>Body content</p>
  * </div>
@@ -136,7 +136,7 @@ export const template = async function template($expr, $element, $templates) {
 template.$inject = ['$expr', '$element', '$templates'];
 template.transclude = true;
 template.priority = DirectivePriority.TEMPLATE;
-directive('c-template', template);
+directive('g-template', template);
 /**
  * Get the effect scope for an element.
  *

package/dist/directives/text.d.ts

@@ -8,8 +8,8 @@ import { Directive } from '../types.js';
  *
  * @example
  * ```html
- * <span c-text="user.name"></span>
- * <span c-text="'Hello, ' + user.name + '!'"></span>
+ * <span g-text="user.name"></span>
+ * <span g-text="'Hello, ' + user.name + '!'"></span>
  * ```
  */
 export declare const text: Directive<['$expr', '$element', '$eval']>;

package/dist/directives/text.js

@@ -1,4 +1,5 @@
 import { directive } from '../types.js';
+import { effect } from '../reactivity.js';
 /**
  * Set element's text content from an expression.
  *
@@ -8,11 +9,13 @@ import { directive } from '../types.js';
  *
  * @example
  * ```html
- * <span c-text="user.name"></span>
- * <span c-text="'Hello, ' + user.name + '!'"></span>
+ * <span g-text="user.name"></span>
+ * <span g-text="'Hello, ' + user.name + '!'"></span>
  * ```
  */
 export const text = function text($expr, $element, $eval) {
-    $element.textContent = String($eval($expr) ?? '');
+    effect(() => {
+        $element.textContent = String($eval($expr) ?? '');
+    });
 };
-directive('c-text', text);
+directive('g-text', text);

package/dist/reactivity.d.ts

@@ -75,7 +75,7 @@ export declare function effect(fn: Effect): () => void;
  * Create a child reactive scope.
  *
  * @remarks
- * Used by structural directives like c-for to create per-item contexts.
+ * Used by structural directives like g-for to create per-item contexts.
  * The child scope inherits from the parent, with additions taking precedence.
  *
  * @typeParam T - Parent object type

package/dist/reactivity.js

@@ -184,7 +184,7 @@ function cleanup(effectFn) {
  * Create a child reactive scope.
  *
  * @remarks
- * Used by structural directives like c-for to create per-item contexts.
+ * Used by structural directives like g-for to create per-item contexts.
  * The child scope inherits from the parent, with additions taking precedence.
  *
  * @typeParam T - Parent object type

package/dist/server/render.d.ts

@@ -51,11 +51,11 @@ export declare function registerService(name: string, service: unknown): void;
  * registry.set('text', textDirective);
  *
  * const html = await render(
- *   '<span c-text="user.name"></span>',
+ *   '<span g-text="user.name"></span>',
  *   { user: { name: 'Alice' } },
  *   registry
  * );
- * // '<span c-text="user.name">Alice</span>'
+ * // '<span g-text="user.name">Alice</span>'
  * ```
  */
 export declare function render(html: string, state: Record<string, unknown>, registry: DirectiveRegistry): Promise<string>;

package/dist/server/render.js

@@ -21,7 +21,7 @@ const selectorCache = new WeakMap();
 function getSelector(registry) {
     let selector = selectorCache.get(registry);
     if (!selector) {
-        const directiveSelectors = [...registry.keys()].map(n => `[c-${n}]`);
+        const directiveSelectors = [...registry.keys()].map(n => `[g-${n}]`);
         // Also match native <slot> elements
         directiveSelectors.push('slot');
         selector = directiveSelectors.join(',');
@@ -115,11 +115,11 @@ function resolveDependencies(directive, expr, el, ctx, rootState) {
  * registry.set('text', textDirective);
  *
  * const html = await render(
- *   '<span c-text="user.name"></span>',
+ *   '<span g-text="user.name"></span>',
  *   { user: { name: 'Alice' } },
  *   registry
  * );
- * // '<span c-text="user.name">Alice</span>'
+ * // '<span g-text="user.name">Alice</span>'
  * ```
  */
 export async function render(html, state, registry) {
@@ -148,7 +148,7 @@ export async function render(html, state, registry) {
                         continue;
                     }
                     for (const [name, directive] of registry) {
-                        const attr = match.getAttribute(`c-${name}`);
+                        const attr = match.getAttribute(`g-${name}`);
                         if (attr !== null) {
                             index.push({
                                 el: match,
@@ -189,25 +189,25 @@ export async function render(html, state, registry) {
         }
         // Process elements in tree order
         for (const el of elementOrder) {
-            // Skip elements that were removed (e.g., by c-for cloning)
+            // Skip elements that were removed (e.g., by g-for cloning)
             if (!el.isConnected) {
                 processed.add(el);
                 continue;
             }
-            // Skip elements already processed by structural directives (c-for, c-if)
+            // Skip elements already processed by structural directives (g-for, g-if)
             // These elements have their own scoped processing
             if (el.hasAttribute(FOR_PROCESSED_ATTR) || el.hasAttribute(IF_PROCESSED_ATTR)) {
                 processed.add(el);
                 continue;
             }
-            // Skip template elements with c-for - these are template wrappers created by c-for
+            // Skip template elements with g-for - these are template wrappers created by g-for
             // and should not be processed as directives (they're for client hydration)
-            if (el.tagName === 'TEMPLATE' && el.hasAttribute('c-for')) {
+            if (el.tagName === 'TEMPLATE' && el.hasAttribute('g-for')) {
                 processed.add(el);
                 continue;
             }
             // Skip template content elements - these are inside template wrappers
-            // and their directives are processed by c-for when rendering items
+            // and their directives are processed by g-for when rendering items
             if (el.hasAttribute(FOR_TEMPLATE_ATTR)) {
                 processed.add(el);
                 continue;
@@ -217,7 +217,7 @@ export async function render(html, state, registry) {
             // Sort directives on this element by priority (higher first)
             directives.sort((a, b) => b.priority - a.priority);
             for (const item of directives) {
-                // Check if element was disconnected by a previous directive (e.g., c-for replacing it)
+                // Check if element was disconnected by a previous directive (e.g., g-for replacing it)
                 if (!item.el.isConnected) {
                     break;
                 }

package/dist/types.d.ts

@@ -51,7 +51,7 @@ export interface InjectableRegistry {
     $state: Record<string, unknown>;
     /** Root reactive state object (shared across all elements) */
     $rootState: Record<string, unknown>;
-    /** Template registry for c-template directive */
+    /** Template registry for g-template directive */
     $templates: {
         get(name: string): Promise<string>;
     };
@@ -111,10 +111,10 @@ export interface Context {
  *
  * @remarks
  * Higher priority directives run first. Structural directives
- * (like c-if, c-for) need to run before behavioral ones.
+ * (like g-if, g-for) need to run before behavioral ones.
  */
 export declare enum DirectivePriority {
-    /** Structural directives that control DOM presence (c-if, c-for) */
+    /** Structural directives that control DOM presence (g-if, g-for) */
     STRUCTURAL = 1000,
     /** Template/transclusion directives */
     TEMPLATE = 500,
@@ -314,7 +314,7 @@ export interface DirectiveRegistration {
  * The function can be `null` for pure template directives that have no
  * runtime behavior.
  *
- * @param name - The directive name (e.g., 'c-text' or 'todo-app')
+ * @param name - The directive name (e.g., 'g-text' or 'todo-app')
  * @param fn - The directive function, or null for template-only directives
  * @param options - Registration options
  *

package/dist/types.js

@@ -18,11 +18,11 @@ export var Mode;
  *
  * @remarks
  * Higher priority directives run first. Structural directives
- * (like c-if, c-for) need to run before behavioral ones.
+ * (like g-if, g-for) need to run before behavioral ones.
  */
 export var DirectivePriority;
 (function (DirectivePriority) {
-    /** Structural directives that control DOM presence (c-if, c-for) */
+    /** Structural directives that control DOM presence (g-if, g-for) */
     DirectivePriority[DirectivePriority["STRUCTURAL"] = 1000] = "STRUCTURAL";
     /** Template/transclusion directives */
     DirectivePriority[DirectivePriority["TEMPLATE"] = 500] = "TEMPLATE";
@@ -42,7 +42,7 @@ const directiveRegistry = new Map();
  * The function can be `null` for pure template directives that have no
  * runtime behavior.
  *
- * @param name - The directive name (e.g., 'c-text' or 'todo-app')
+ * @param name - The directive name (e.g., 'g-text' or 'todo-app')
  * @param fn - The directive function, or null for template-only directives
  * @param options - Registration options
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gonia",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "A lightweight, SSR-first reactive UI library with declarative directives",
   "type": "module",
   "license": "MIT",
@@ -16,7 +16,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/monokrome/cubist.js"
+    "url": "https://github.com/monokrome/gonia"
   },
   "files": [
     "dist",