gonia 0.2.2 → 0.2.4

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,7 +7,8 @@ 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';
@@ -83,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)
@@ -293,13 +311,23 @@ export async function render(html, state, registry) {
                     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/dist/vite/plugin.js

@@ -351,7 +351,9 @@ export function gonia(options = {}) {
                     detected.delete(name);
                 }
                 // Generate imports if we found directives and haven't already
-                if (detected.size > 0 && !injectedModules.has(id)) {
+                // Skip HTML files - they're scanned for detection but imports go in JS
+                const isHtmlFile = /\.html$/.test(id);
+                if (detected.size > 0 && !injectedModules.has(id) && !isHtmlFile) {
                     // Check if this file already imports from gonia/directives
                     const hasGoniaImport = code.includes("from 'gonia/directives'") ||
                         code.includes('from "gonia/directives"');

package/package.json

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