gonia 0.2.1 → 0.2.3

package/dist/directives/slot.js

@@ -70,8 +70,8 @@ export const slot = function slot($expr, $element, $eval, $slotContent) {
         transclude();
     }
 };
-slot.$inject = ['$expr', '$element', '$eval', SlotContentContext];
-directive('g-slot', slot);
+slot.$inject = ['$expr', '$element', '$eval'];
+directive('g-slot', slot, { using: [SlotContentContext] });
 /**
  * Process native <slot> elements.
  *

package/dist/inject.d.ts

@@ -14,9 +14,10 @@
 import type { ContextKey } from './context-registry.js';
 import type { Expression, EvalFn } from './types.js';
 /**
- * An injectable dependency - either a string name or a typed context key.
+ * An injectable dependency name.
+ * For ContextKey injection, use the `using` option on directive registration.
  */
-export type Injectable = string | ContextKey<unknown>;
+export type Injectable = string;
 /**
  * Check if a value is a ContextKey.
  */
@@ -25,7 +26,7 @@ export declare function isContextKey(value: unknown): value is ContextKey<unknow
  * A function with optional `$inject` annotation.
  */
 interface InjectableFunction extends Function {
-    $inject?: readonly Injectable[];
+    $inject?: readonly string[];
 }
 /**
  * Get the list of injectable dependencies for a function.
@@ -43,10 +44,12 @@ interface InjectableFunction extends Function {
  * const myDirective = (expr, ctx, el, http, userService) => {};
  * getInjectables(myDirective); // ['expr', 'ctx', 'el', 'http', 'userService']
  *
- * // Production - explicit annotation with context keys
- * myDirective.$inject = ['$element', SlotContentContext];
- * getInjectables(myDirective); // ['$element', SlotContentContext]
+ * // Production - explicit $inject array (survives minification)
+ * myDirective.$inject = ['$element', '$scope'];
+ * getInjectables(myDirective); // ['$element', '$scope']
  * ```
+ *
+ * For ContextKey injection, use the `using` option on directive registration.
  */
 export declare function getInjectables(fn: InjectableFunction): Injectable[];
 /**

package/dist/inject.js

@@ -33,10 +33,12 @@ export function isContextKey(value) {
  * const myDirective = (expr, ctx, el, http, userService) => {};
  * getInjectables(myDirective); // ['expr', 'ctx', 'el', 'http', 'userService']
  *
- * // Production - explicit annotation with context keys
- * myDirective.$inject = ['$element', SlotContentContext];
- * getInjectables(myDirective); // ['$element', SlotContentContext]
+ * // Production - explicit $inject array (survives minification)
+ * myDirective.$inject = ['$element', '$scope'];
+ * getInjectables(myDirective); // ['$element', '$scope']
  * ```
+ *
+ * For ContextKey injection, use the `using` option on directive registration.
  */
 export function getInjectables(fn) {
     if ('$inject' in fn && Array.isArray(fn.$inject)) {
@@ -85,11 +87,6 @@ function parseFunctionParams(fn) {
 export function resolveDependencies(fn, expr, element, evalFn, config, using) {
     const inject = getInjectables(fn);
     const args = inject.map(dep => {
-        // Handle ContextKey injection
-        if (isContextKey(dep)) {
-            return config.resolveContext(dep);
-        }
-        // Handle string-based injection
         switch (dep) {
             case '$expr':
                 return expr;

package/dist/server/render.js

@@ -7,11 +7,26 @@ import { Window } from 'happy-dom';
 import { Mode, DirectivePriority, getDirective } from '../types.js';
 import { createContext } from '../context.js';
 import { processNativeSlot } from '../directives/slot.js';
-import { getLocalState, registerProvider, resolveFromProviders, resolveFromDIProviders } from '../providers.js';
+import { registerProvider, resolveFromProviders, resolveFromDIProviders } from '../providers.js';
+import { createElementScope, getElementScope } from '../scope.js';
 import { FOR_PROCESSED_ATTR, FOR_TEMPLATE_ATTR } from '../directives/for.js';
 import { IF_PROCESSED_ATTR } from '../directives/if.js';
 import { resolveDependencies as resolveInjectables } from '../inject.js';
 import { resolveContext } from '../context-registry.js';
+/**
+ * Decode HTML entities that happy-dom doesn't decode.
+ *
+ * @internal
+ */
+function decodeHTMLEntities(str) {
+    return str
+        .replace(/&#(\d+);/g, (_, code) => String.fromCharCode(Number(code)))
+        .replace(/"/g, '"')
+        .replace(/'/g, "'")
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&amp;/g, '&');
+}
 /** Registered services */
 let services = new Map();
 const selectorCache = new WeakMap();
@@ -69,15 +84,32 @@ export function registerDirective(registry, name, fn) {
 export function registerService(name, service) {
     services.set(name, service);
 }
+/**
+ * Find the nearest scope by walking up the DOM tree.
+ * Falls back to rootState if no element scope found.
+ *
+ * @internal
+ */
+function findServerScope(el, rootState) {
+    let current = el;
+    while (current) {
+        const scope = getElementScope(current);
+        if (scope) {
+            return scope;
+        }
+        current = current.parentElement;
+    }
+    return rootState;
+}
 /**
  * Create resolver config for server-side dependency resolution.
  *
  * @internal
  */
-function createServerResolverConfig(el, rootState) {
+function createServerResolverConfig(el, scopeState, rootState) {
     return {
         resolveContext: (key) => resolveContext(el, key),
-        resolveState: () => getLocalState(el) ?? rootState,
+        resolveState: () => scopeState,
         resolveRootState: () => rootState,
         resolveCustom: (name) => {
             // Look up in ancestor DI providers first (provide option)
@@ -152,6 +184,27 @@ export async function render(html, state, registry) {
                         });
                         continue;
                     }
+                    // Handle g-scope elements that don't have other directives
+                    // Add a placeholder entry so they get processed
+                    if (match.hasAttribute('g-scope')) {
+                        let hasDirective = false;
+                        for (const [name] of registry) {
+                            if (match.hasAttribute(`g-${name}`)) {
+                                hasDirective = true;
+                                break;
+                            }
+                        }
+                        if (!hasDirective) {
+                            index.push({
+                                el: match,
+                                name: 'scope',
+                                directive: null,
+                                expr: '',
+                                priority: DirectivePriority.STRUCTURAL,
+                                isNativeSlot: false
+                            });
+                        }
+                    }
                     for (const [name, directive] of registry) {
                         const attr = match.getAttribute(`g-${name}`);
                         if (attr !== null) {
@@ -161,7 +214,7 @@ export async function render(html, state, registry) {
                                 el: match,
                                 name,
                                 directive,
-                                expr: attr,
+                                expr: decodeHTMLEntities(attr),
                                 priority: directive.priority ?? DirectivePriority.NORMAL,
                                 using: registration?.options.using
                             });
@@ -227,7 +280,7 @@ export async function render(html, state, registry) {
             // Process g-scope first (inline scope initialization)
             const scopeAttr = el.getAttribute('g-scope');
             if (scopeAttr) {
-                const scopeValues = ctx.eval(scopeAttr);
+                const scopeValues = ctx.eval(decodeHTMLEntities(scopeAttr));
                 if (scopeValues && typeof scopeValues === 'object') {
                     Object.assign(state, scopeValues);
                 }
@@ -236,7 +289,7 @@ export async function render(html, state, registry) {
             for (const attr of [...el.attributes]) {
                 if (attr.name.startsWith('g-bind:')) {
                     const targetAttr = attr.name.slice('g-bind:'.length);
-                    const value = ctx.eval(attr.value);
+                    const value = ctx.eval(decodeHTMLEntities(attr.value));
                     if (value === null || value === undefined) {
                         el.removeAttribute(targetAttr);
                     }
@@ -253,14 +306,28 @@ export async function render(html, state, registry) {
                 if (item.isNativeSlot) {
                     processNativeSlot(item.el);
                 }
+                else if (item.directive === null) {
+                    // Placeholder for g-scope - already processed above
+                    continue;
+                }
                 else {
-                    const config = createServerResolverConfig(item.el, state);
+                    // Determine scope for this directive
+                    let scopeState;
+                    if (item.directive.$context?.length) {
+                        // Directives with $context get their own scope to populate
+                        const parentScope = findServerScope(item.el, state);
+                        scopeState = createElementScope(item.el, parentScope);
+                    }
+                    else {
+                        // Other directives use nearest ancestor scope or root
+                        scopeState = findServerScope(item.el, state);
+                    }
+                    const config = createServerResolverConfig(item.el, scopeState, state);
                     const args = resolveInjectables(item.directive, item.expr, item.el, ctx.eval.bind(ctx), config, item.using);
                     await item.directive(...args);
                     // Register as context provider if directive declares $context
                     if (item.directive.$context?.length) {
-                        const localState = getLocalState(item.el);
-                        registerProvider(item.el, item.directive, localState);
+                        registerProvider(item.el, item.directive, scopeState);
                     }
                 }
             }

package/dist/types.d.ts

@@ -4,7 +4,6 @@
  * @packageDocumentation
  */
 import type { ContextKey } from './context-registry.js';
-import type { Injectable } from './inject.js';
 /**
  * Execution mode for the framework.
  */
@@ -160,14 +159,15 @@ export interface DirectiveMeta<T = InjectableRegistry> {
      *
      * @example
      * ```ts
-     * // String-based injection
      * myDirective.$inject = ['$element', '$scope'];
+     * ```
      *
-     * // With typed context keys
-     * myDirective.$inject = ['$element', SlotContentContext];
+     * For typed context keys, use the `using` option on directive registration:
+     * ```ts
+     * directive('my-directive', myDirective, { using: [SlotContentContext] });
      * ```
      */
-    $inject?: readonly Injectable[];
+    $inject?: readonly string[];
     /**
      * Names this directive exposes as context to descendants.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gonia",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "A lightweight, SSR-first reactive UI library with declarative directives",
   "type": "module",
   "license": "MIT",