@v-ibe/core 0.1.1 → 0.1.2

package/dist/components/base-component.js

@@ -278,12 +278,12 @@ class BaseComponent extends HTMLElement {
     );
     if (metadata?.stylesClass) {
       const stylesInstance = new metadata.stylesClass();
+      stylesInstance.setHost(this);
       const stylesheet = stylesInstance.getStyleSheet();
       this.shadowRoot.adoptedStyleSheets = [
         ...this.shadowRoot.adoptedStyleSheets,
         stylesheet
       ];
-      stylesInstance.setHost(this);
     }
   }
   initializeContexts() {

package/dist/index.d.ts

@@ -33,7 +33,7 @@ export { registerServiceMetadata, getServiceMetadata, getAllServiceMetadata, cle
 export type { ServiceMetadata } from './DI/service-metadata';
 export { core } from './core';
 export { Rule } from './styles/decorators/rule';
-export type { CSSProperties } from './styles/decorators/rule';
+export type { CSSProperties } from './styles/css-properties';
 export { UseStyles } from './styles/decorators/useStyles';
 export { Behavior, Host, ComponentHost } from './behaviors';
 export { MediaQuery } from './styles/decorators/factories';

package/dist/styles/__tests__/rule-host-timing.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/styles/base-style-sheet.d.ts

@@ -30,12 +30,19 @@ export declare class BaseStyleSheet {
         index: number;
         effect: any;
     }>;
+    private _rulesActivated;
     constructor();
     /**
-     * Returns the internal CSSStyleSheet
-     * Used by @UseStyles decorator to attach styles to components
+     * Returns the internal CSSStyleSheet.
+     * If no @Host is used, activates @Rule effects on first call.
+     * If @Host is used, effects are activated by setHost() instead.
      */
     getStyleSheet(): CSSStyleSheet;
+    /**
+     * Reads @Rule definitions from the constructor and creates reactive effects
+     * for each rule getter. Only runs once per instance.
+     */
+    private activateRules;
     /**
      * Sets the host component and initializes styles
      * Called by @UseStyles decorator when attaching styles to a component

package/dist/styles/base-style-sheet.js

@@ -1,20 +1,49 @@
 import { HOST_KEY } from "../behaviors/constants.js";
+import { effect } from "../reactivity/signals/effect.js";
+import { RULES_KEY, cssObjectToString } from "./decorators/rule.js";
 class BaseStyleSheet {
   constructor() {
     this.cleanupFunctions = [];
     this.selectorSymbolMap = /* @__PURE__ */ new Map();
     this.documentStyleElement = null;
     this.documentRuleMap = /* @__PURE__ */ new Map();
+    this._rulesActivated = false;
     this.stylesheet = new CSSStyleSheet();
     this.ruleIndexMap = /* @__PURE__ */ new Map();
   }
   /**
-   * Returns the internal CSSStyleSheet
-   * Used by @UseStyles decorator to attach styles to components
+   * Returns the internal CSSStyleSheet.
+   * If no @Host is used, activates @Rule effects on first call.
+   * If @Host is used, effects are activated by setHost() instead.
    */
   getStyleSheet() {
+    this.activateRules();
     return this.stylesheet;
   }
+  /**
+   * Reads @Rule definitions from the constructor and creates reactive effects
+   * for each rule getter. Only runs once per instance.
+   */
+  activateRules() {
+    if (this._rulesActivated) return;
+    this._rulesActivated = true;
+    const rules = this.constructor[RULES_KEY];
+    if (!rules) return;
+    for (const { selector, getterName, getter } of rules) {
+      const indexSymbol = Symbol(`css_rule_${selector}_${getterName}`);
+      const cleanup = effect(() => {
+        const stylesObject = getter.call(this);
+        if (!stylesObject || typeof stylesObject !== "object") {
+          console.warn(`@Rule('${selector}'): Getter '${getterName}' must return a CSSProperties object`);
+          return;
+        }
+        const cssContent = cssObjectToString(stylesObject);
+        const cssText = `${selector} { ${cssContent}; }`;
+        this.updateSpecificRule(selector, cssText, indexSymbol);
+      });
+      this.registerCleanup(cleanup.dispose);
+    }
+  }
   /**
    * Sets the host component and initializes styles
    * Called by @UseStyles decorator when attaching styles to a component

package/dist/styles/css-properties.d.ts

@@ -0,0 +1,158 @@
+/**
+ * Comprehensive CSS Properties Interface
+ * Provides type safety and autocomplete for CSS declarations
+ */
+export interface CSSProperties {
+    display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'none' | 'contents' | 'table' | 'table-row' | 'table-cell' | string;
+    visibility?: 'visible' | 'hidden' | 'collapse';
+    opacity?: number | string;
+    position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
+    top?: number | string;
+    right?: number | string;
+    bottom?: number | string;
+    left?: number | string;
+    inset?: number | string;
+    zIndex?: number | string;
+    flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+    justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch';
+    alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+    alignContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'stretch';
+    gap?: number | string;
+    rowGap?: number | string;
+    columnGap?: number | string;
+    flex?: number | string;
+    flexGrow?: number;
+    flexShrink?: number;
+    flexBasis?: number | string;
+    alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+    order?: number;
+    gridTemplateColumns?: string;
+    gridTemplateRows?: string;
+    gridTemplateAreas?: string;
+    gridAutoColumns?: string;
+    gridAutoRows?: string;
+    gridAutoFlow?: 'row' | 'column' | 'dense' | 'row dense' | 'column dense';
+    gridArea?: string;
+    gridColumn?: string;
+    gridRow?: string;
+    gridColumnStart?: string | number;
+    gridColumnEnd?: string | number;
+    gridRowStart?: string | number;
+    gridRowEnd?: string | number;
+    width?: number | string;
+    height?: number | string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    boxSizing?: 'content-box' | 'border-box';
+    margin?: number | string;
+    marginTop?: number | string;
+    marginRight?: number | string;
+    marginBottom?: number | string;
+    marginLeft?: number | string;
+    marginBlock?: number | string;
+    marginInline?: number | string;
+    padding?: number | string;
+    paddingTop?: number | string;
+    paddingRight?: number | string;
+    paddingBottom?: number | string;
+    paddingLeft?: number | string;
+    paddingBlock?: number | string;
+    paddingInline?: number | string;
+    color?: string;
+    fontSize?: number | string;
+    fontFamily?: string;
+    fontWeight?: number | 'normal' | 'bold' | 'lighter' | 'bolder' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+    fontStyle?: 'normal' | 'italic' | 'oblique';
+    lineHeight?: number | string;
+    letterSpacing?: number | string;
+    textAlign?: 'left' | 'right' | 'center' | 'justify' | 'start' | 'end';
+    textDecoration?: string;
+    textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
+    textOverflow?: 'clip' | 'ellipsis' | string;
+    whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'break-spaces';
+    wordBreak?: 'normal' | 'break-all' | 'keep-all' | 'break-word';
+    wordWrap?: 'normal' | 'break-word';
+    background?: string;
+    backgroundColor?: string;
+    backgroundImage?: string;
+    backgroundSize?: string;
+    backgroundPosition?: string;
+    backgroundRepeat?: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'space' | 'round';
+    backgroundAttachment?: 'scroll' | 'fixed' | 'local';
+    backgroundClip?: 'border-box' | 'padding-box' | 'content-box' | 'text';
+    border?: string;
+    borderWidth?: number | string;
+    borderStyle?: 'none' | 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset';
+    borderColor?: string;
+    borderRadius?: number | string;
+    borderTop?: string;
+    borderRight?: string;
+    borderBottom?: string;
+    borderLeft?: string;
+    borderTopWidth?: number | string;
+    borderRightWidth?: number | string;
+    borderBottomWidth?: number | string;
+    borderLeftWidth?: number | string;
+    borderTopColor?: string;
+    borderRightColor?: string;
+    borderBottomColor?: string;
+    borderLeftColor?: string;
+    borderTopLeftRadius?: number | string;
+    borderTopRightRadius?: number | string;
+    borderBottomLeftRadius?: number | string;
+    borderBottomRightRadius?: number | string;
+    outline?: string;
+    outlineWidth?: number | string;
+    outlineStyle?: 'none' | 'solid' | 'dashed' | 'dotted' | 'double';
+    outlineColor?: string;
+    outlineOffset?: number | string;
+    boxShadow?: string;
+    textShadow?: string;
+    filter?: string;
+    backdropFilter?: string;
+    transform?: string;
+    transformOrigin?: string;
+    transition?: string;
+    transitionProperty?: string;
+    transitionDuration?: string;
+    transitionTimingFunction?: string;
+    transitionDelay?: string;
+    animation?: string;
+    animationName?: string;
+    animationDuration?: string;
+    animationTimingFunction?: string;
+    animationDelay?: string;
+    animationIterationCount?: number | 'infinite';
+    animationDirection?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
+    animationFillMode?: 'none' | 'forwards' | 'backwards' | 'both';
+    animationPlayState?: 'running' | 'paused';
+    overflow?: 'visible' | 'hidden' | 'scroll' | 'auto' | 'clip';
+    overflowX?: 'visible' | 'hidden' | 'scroll' | 'auto' | 'clip';
+    overflowY?: 'visible' | 'hidden' | 'scroll' | 'auto' | 'clip';
+    clip?: string;
+    clipPath?: string;
+    cursor?: 'auto' | 'default' | 'pointer' | 'wait' | 'text' | 'move' | 'not-allowed' | 'help' | 'grab' | 'grabbing' | string;
+    pointerEvents?: 'auto' | 'none' | 'visiblePainted' | 'visibleFill' | 'visibleStroke' | 'visible' | 'painted' | 'fill' | 'stroke' | 'all';
+    userSelect?: 'none' | 'auto' | 'text' | 'contain' | 'all';
+    content?: string;
+    listStyle?: string;
+    listStyleType?: string;
+    listStylePosition?: 'inside' | 'outside';
+    listStyleImage?: string;
+    tableLayout?: 'auto' | 'fixed';
+    borderCollapse?: 'collapse' | 'separate';
+    borderSpacing?: number | string;
+    captionSide?: 'top' | 'bottom';
+    emptyCells?: 'show' | 'hide';
+    verticalAlign?: 'baseline' | 'sub' | 'super' | 'top' | 'text-top' | 'middle' | 'bottom' | 'text-bottom' | number | string;
+    objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+    objectPosition?: string;
+    float?: 'none' | 'left' | 'right';
+    clear?: 'none' | 'left' | 'right' | 'both';
+    resize?: 'none' | 'both' | 'horizontal' | 'vertical';
+    [key: `--${string}`]: string | number;
+    [key: string]: any;
+}

package/dist/styles/decorators/rule.d.ts

@@ -1,163 +1,41 @@
+import { CSSProperties } from '../css-properties';
+export type { CSSProperties };
 /**
- * Comprehensive CSS Properties Interface
- * Provides type safety and autocomplete for CSS declarations
+ * Symbol to store rule definitions in class metadata.
+ * Each @Rule registers { selector, getterName, getter } in metadata[RULES_KEY].
  */
-export interface CSSProperties {
-    display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'none' | 'contents' | 'table' | 'table-row' | 'table-cell' | string;
-    visibility?: 'visible' | 'hidden' | 'collapse';
-    opacity?: number | string;
-    position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
-    top?: number | string;
-    right?: number | string;
-    bottom?: number | string;
-    left?: number | string;
-    inset?: number | string;
-    zIndex?: number | string;
-    flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
-    flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
-    justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch';
-    alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
-    alignContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'stretch';
-    gap?: number | string;
-    rowGap?: number | string;
-    columnGap?: number | string;
-    flex?: number | string;
-    flexGrow?: number;
-    flexShrink?: number;
-    flexBasis?: number | string;
-    alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
-    order?: number;
-    gridTemplateColumns?: string;
-    gridTemplateRows?: string;
-    gridTemplateAreas?: string;
-    gridAutoColumns?: string;
-    gridAutoRows?: string;
-    gridAutoFlow?: 'row' | 'column' | 'dense' | 'row dense' | 'column dense';
-    gridArea?: string;
-    gridColumn?: string;
-    gridRow?: string;
-    gridColumnStart?: string | number;
-    gridColumnEnd?: string | number;
-    gridRowStart?: string | number;
-    gridRowEnd?: string | number;
-    width?: number | string;
-    height?: number | string;
-    minWidth?: number | string;
-    maxWidth?: number | string;
-    minHeight?: number | string;
-    maxHeight?: number | string;
-    boxSizing?: 'content-box' | 'border-box';
-    margin?: number | string;
-    marginTop?: number | string;
-    marginRight?: number | string;
-    marginBottom?: number | string;
-    marginLeft?: number | string;
-    marginBlock?: number | string;
-    marginInline?: number | string;
-    padding?: number | string;
-    paddingTop?: number | string;
-    paddingRight?: number | string;
-    paddingBottom?: number | string;
-    paddingLeft?: number | string;
-    paddingBlock?: number | string;
-    paddingInline?: number | string;
-    color?: string;
-    fontSize?: number | string;
-    fontFamily?: string;
-    fontWeight?: number | 'normal' | 'bold' | 'lighter' | 'bolder' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
-    fontStyle?: 'normal' | 'italic' | 'oblique';
-    lineHeight?: number | string;
-    letterSpacing?: number | string;
-    textAlign?: 'left' | 'right' | 'center' | 'justify' | 'start' | 'end';
-    textDecoration?: string;
-    textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
-    textOverflow?: 'clip' | 'ellipsis' | string;
-    whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'break-spaces';
-    wordBreak?: 'normal' | 'break-all' | 'keep-all' | 'break-word';
-    wordWrap?: 'normal' | 'break-word';
-    background?: string;
-    backgroundColor?: string;
-    backgroundImage?: string;
-    backgroundSize?: string;
-    backgroundPosition?: string;
-    backgroundRepeat?: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'space' | 'round';
-    backgroundAttachment?: 'scroll' | 'fixed' | 'local';
-    backgroundClip?: 'border-box' | 'padding-box' | 'content-box' | 'text';
-    border?: string;
-    borderWidth?: number | string;
-    borderStyle?: 'none' | 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset';
-    borderColor?: string;
-    borderRadius?: number | string;
-    borderTop?: string;
-    borderRight?: string;
-    borderBottom?: string;
-    borderLeft?: string;
-    borderTopWidth?: number | string;
-    borderRightWidth?: number | string;
-    borderBottomWidth?: number | string;
-    borderLeftWidth?: number | string;
-    borderTopColor?: string;
-    borderRightColor?: string;
-    borderBottomColor?: string;
-    borderLeftColor?: string;
-    borderTopLeftRadius?: number | string;
-    borderTopRightRadius?: number | string;
-    borderBottomLeftRadius?: number | string;
-    borderBottomRightRadius?: number | string;
-    outline?: string;
-    outlineWidth?: number | string;
-    outlineStyle?: 'none' | 'solid' | 'dashed' | 'dotted' | 'double';
-    outlineColor?: string;
-    outlineOffset?: number | string;
-    boxShadow?: string;
-    textShadow?: string;
-    filter?: string;
-    backdropFilter?: string;
-    transform?: string;
-    transformOrigin?: string;
-    transition?: string;
-    transitionProperty?: string;
-    transitionDuration?: string;
-    transitionTimingFunction?: string;
-    transitionDelay?: string;
-    animation?: string;
-    animationName?: string;
-    animationDuration?: string;
-    animationTimingFunction?: string;
-    animationDelay?: string;
-    animationIterationCount?: number | 'infinite';
-    animationDirection?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
-    animationFillMode?: 'none' | 'forwards' | 'backwards' | 'both';
-    animationPlayState?: 'running' | 'paused';
-    overflow?: 'visible' | 'hidden' | 'scroll' | 'auto' | 'clip';
-    overflowX?: 'visible' | 'hidden' | 'scroll' | 'auto' | 'clip';
-    overflowY?: 'visible' | 'hidden' | 'scroll' | 'auto' | 'clip';
-    clip?: string;
-    clipPath?: string;
-    cursor?: 'auto' | 'default' | 'pointer' | 'wait' | 'text' | 'move' | 'not-allowed' | 'help' | 'grab' | 'grabbing' | string;
-    pointerEvents?: 'auto' | 'none' | 'visiblePainted' | 'visibleFill' | 'visibleStroke' | 'visible' | 'painted' | 'fill' | 'stroke' | 'all';
-    userSelect?: 'none' | 'auto' | 'text' | 'contain' | 'all';
-    content?: string;
-    listStyle?: string;
-    listStyleType?: string;
-    listStylePosition?: 'inside' | 'outside';
-    listStyleImage?: string;
-    tableLayout?: 'auto' | 'fixed';
-    borderCollapse?: 'collapse' | 'separate';
-    borderSpacing?: number | string;
-    captionSide?: 'top' | 'bottom';
-    emptyCells?: 'show' | 'hide';
-    verticalAlign?: 'baseline' | 'sub' | 'super' | 'top' | 'text-top' | 'middle' | 'bottom' | 'text-bottom' | number | string;
-    objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
-    objectPosition?: string;
-    float?: 'none' | 'left' | 'right';
-    clear?: 'none' | 'left' | 'right' | 'both';
-    resize?: 'none' | 'both' | 'horizontal' | 'vertical';
-    [key: `--${string}`]: string | number;
-    [key: string]: any;
+export declare const RULES_KEY: unique symbol;
+export interface RuleDefinition {
+    selector: string;
+    getterName: string;
+    getter: (this: any) => CSSProperties | undefined;
 }
 /**
- * @Rule Decorator - Type-safe reactive CSS rules
+ * Helper Functions for CSS Processing
+ */
+/**
+ * Converts camelCase to kebab-case
+ * Example: backgroundColor → background-color
+ */
+export declare function camelToKebab(str: string): string;
+/**
+ * Formats a CSS value, adding units where necessary
+ * Example: ('width', 100) → '100px'
+ *          ('opacity', 0.5) → '0.5'
+ */
+export declare function formatCSSValue(property: string, value: any): string;
+/**
+ * Converts a CSSProperties object to a CSS string
+ * Example: { width: 100, display: 'grid' } → 'width: 100px; display: grid'
+ */
+export declare function cssObjectToString(styles: CSSProperties): string;
+/**
+ * @Rule Decorator - Metadata-only marker for reactive CSS rules.
+ *
+ * Registers the getter and its CSS selector in class metadata.
+ * The actual reactive effects are created later by BaseStyleSheet
+ * when getStyleSheet() is called, ensuring @Host and all other
+ * fields are fully initialized before any effect runs.
  *
  * Usage:
  * ```typescript
@@ -165,7 +43,7 @@ export interface CSSProperties {
  *   @State width = 100;
  *
  *   @Rule(':host')
- *   get hostStyles() {
+ *   get hostStyles(): CSSProperties {
  *     return {
  *       display: 'grid',
  *       width: this.width,  // Reactive!

package/dist/styles/decorators/rule.js

@@ -1,4 +1,4 @@
-import { effect } from "../../reactivity/signals/effect.js";
+const RULES_KEY = Symbol("stylesheet:rules");
 function camelToKebab(str) {
   return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
 }
@@ -42,31 +42,27 @@ function Rule(selector) {
       throw new Error("@Rule can only be applied to getters");
     }
     const getterName = String(context.name);
+    const metadata = context.metadata;
+    if (!metadata[RULES_KEY]) {
+      metadata[RULES_KEY] = [];
+    }
+    metadata[RULES_KEY].push({
+      selector,
+      getterName,
+      getter: target
+    });
     context.addInitializer(function() {
-      const indexSymbol = Symbol(`css_rule_${selector}_${getterName}`);
-      const cleanup = effect(() => {
-        const stylesObject = target.call(this);
-        if (!stylesObject || typeof stylesObject !== "object") {
-          console.warn(`@Rule('${selector}'): Getter '${getterName}' must return a CSSProperties object`);
-          return;
-        }
-        const cssContent = cssObjectToString(stylesObject);
-        const cssText = `${selector} { ${cssContent}; }`;
-        if (typeof this.updateSpecificRule === "function") {
-          this.updateSpecificRule(selector, cssText, indexSymbol);
-        } else {
-          console.error(`@Rule decorator requires BaseStyleSheet.updateSpecificRule method`);
-        }
-      });
-      if (typeof this.registerCleanup === "function") {
-        this.registerCleanup(cleanup.dispose);
-      } else {
-        console.error(`@Rule decorator requires BaseStyleSheet.registerCleanup method`);
+      if (!this.constructor[RULES_KEY]) {
+        this.constructor[RULES_KEY] = metadata[RULES_KEY];
       }
     });
     return target;
   };
 }
 export {
-  Rule
+  RULES_KEY,
+  Rule,
+  camelToKebab,
+  cssObjectToString,
+  formatCSSValue
 };

package/dist/styles/decorators/useStyles.js

@@ -11,6 +11,7 @@ function UseStyles(StylesConstructor) {
         try {
           const stylesInstance = new StylesConstructor();
           stylesInstance.setHost(this);
+          stylesInstance.getStyleSheet();
           Object.defineProperty(this, "styles", {
             value: stylesInstance,
             writable: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@v-ibe/core",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A reactive framework for SPAs using signals, class-based web components, and JSX with direct DOM updates",
   "type": "module",
   "main": "./dist/index.js",
@@ -49,7 +49,8 @@
     "test": "vitest",
     "test:ui": "vitest --ui",
     "test:run": "vitest run",
-    "test:coverage": "vitest run --coverage"
+    "test:coverage": "vitest run --coverage",
+    "docs": "hugo server --source docs"
   },
   "keywords": [
     "framework",