redgin 0.1.19 → 0.2.2

package/README.md

@@ -1,268 +1,219 @@
-# Redgin
+[![NPM](https://nodei.co/npm/redgin.svg?style=flat&data=v,d&color=red)](https://nodei.co/npm/redgin/)
 
-A lightweight (~5.3kb) library for building Web Components, compatible with Vanilla JS and all JavaScript frameworks. This library simplifies the creation of Web Components and offers features such as using JavaScript template literals for template syntax, rerendering elements with watch, creating getter/setters with getset, property reflection with propReflect, inline events with event, custom events with emit, injecting global styles with injectStyles, and support for TypeScript.
+# RedGin
 
+A lightweight (~5.3kb) library that solves the pain points of native Web Components. RedGin offers fine-grained reactivity, surgical updates, and intuitive APIs - making Web Components actually enjoyable to build.
 
+## Why RedGin?
 
-## Features
+Native Web Components are powerful but come with friction:
 
+| Pain Point | Native Web Components | RedGin |
+|------------|----------------------|--------|
+| **Boilerplate** | Manual lifecycle callbacks, attributeChangedCallback, getters/setters | Zero boilerplate with `getset` and `propReflect` |
+| **Reactivity** | Manual observation with `attributeChangedCallback` | Automatic reactivity with `watch`, `s()`, and fine-grained updates |
+| **Template Updates** | Manual DOM manipulation | Surgical updates - only changed parts re-render |
+| **Attribute Reflection** | Manual sync between properties and attributes | Automatic with `propReflect` |
+| **Event Binding** | `addEventListener` boilerplate | Inline events with `on()` |
+| **Style Sharing** | Duplicated styles per component | Global `shareStyle` injection |
+| **Performance** | Full re-renders on any change | Only changed elements update |
+| **TypeScript** | Complex typing for custom elements | First-class TypeScript support |
 
+## Core Philosophy
 
-- **JavaScript Template Literals for Template Syntax**: Simplify the creation of templates using JavaScript template literals. [Template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
+RedGin is built around **surgical updates** - only the elements that need to change, change. No virtual DOM, no heavy diffing, just precise, targeted updates to your components.
 
+## Key Features
 
-
-- **Rerender Element with Watch**: Easily trigger a rerender of an element by watching for changes.[`watch`](https://stackblitz.com/edit/typescript-t3fqo8?file=sampleWatch.ts)
-
-
-
-- **Create Getter/Setters with getset**: Define getter and setter functions for your properties.[`getset`](https://stackblitz.com/edit/typescript-t3fqo8?file=sampleWatch.ts)
-
-
-
-- **Create Property Reflection with propReflect**: Reflect property changes to corresponding attributes.[`propReflect`](https://stackblitz.com/edit/typescript-hlms7u?file=index.html)
-
-
-
-- **Create Inline Events with event**: Attach events directly in your component's template.[`event`](https://stackblitz.com/edit/typescript-t3fqo8?file=sampleWatch.ts)
-
-
-
-- **Create Custom Events with emit**: Emit custom events from your components.[`emit`](https://stackblitz.com/edit/redgin-childtoparent?file=index.ts)
-
-
-
-- **Inject Global Styles with injectStyles**: Apply global styles for your components.[`injectStyles`](https://stackblitz.com/edit/redgin-bootstrap?file=index.ts)
-
-
-
-- **Support for TypeScript**: Enjoy type safety when using Redgin with TypeScript.[Support Typescript](https://stackblitz.com/edit/typescript-ue61k6?file=index.ts)
-
-
-
-
-- **Build SPAs (Single-Page Applications)**: Simplify the development of SPAs using Redgin.[Single Page Application](https://stackblitz.com/edit/typescript-ezsw6j)
+- **🎯 Surgical Rendering**: Update only what changes - perfect for large lists
+- **📝 Template Literals**: Write components using familiar JS template syntax
+- **⚡️ Fine-grained Reactivity**: Multiple reactivity patterns (`watch`, `s()`, `getset`, `propReflect`)
+- **🔗 Attribute Binding**: Smart `attr()` helper for dynamic attributes
+- **🔄 Property Reflection**: Sync properties with attributes using `propReflect`
+- **📊 Reactive Getters/Setters**: Create reactive state with `getset`
+- **🎨 Style Management**: Global style injection with `shareStyle` and scoped styles with `css`
+- **📘 TypeScript Ready**: Full type safety and IntelliSense
 
 ## Installation
 
-
-
-Include the Redgin library in your project.
-
-
-```html
-// via html
-<script type="module" src="https://cdn.jsdelivr.net/npm/redgin@latest/dist/redgin.min.js"></script>
-
-```
-
-
-Or install it via npm:
-
-
-
+### Via npm
 ```bash
-
 npm i redgin
-
 ```
-## Usage
-
-
-
-1. **Import the Library:**
-
 
+## Via CDN
 
-```javascript
-
-// via js
-
-import { Redgin, watch, getset, html } from 'https://cdn.jsdelivr.net/npm/redgin@latest/dist/redgin.min.js';
-
-
-
-// via npm
-
-import { Redgin, watch, getset, html } from 'redgin';
-
+```js
+<script type="module" src="https://cdn.jsdelivr.net/npm/redgin@latest/dist/redgin.min.js"></script>
 ```
 
 
+## Quick Start
 
-2. **Use the Features:**
-
-
-
-```javascript
-
-// FetchApiComponent.ts
+```js
+import { RedGin, getset, on, html } from 'redgin';
 
-// Creating a Fetch Api Component that displays Todos using Getset, Watch
-class FetchApi extends RedGin {
-  // Reactive properties using getset
-  ready = getset<boolean>(false);
-  todos: any;
+class Counter extends RedGin {
+  count = getset(0);
 
-  // Initialize data from the API in the onInit lifecycle method
-  onInit() {
-    fetch('https://jsonplaceholder.typicode.com/todos/1')
-      .then(response => response.json())
-      .then(json => {
-        this.todos = json;
-        this.ready = true;
-      });
-  }
-  
-  // Render method for displaying the fetched data
-  render() {       
+  render() {
     return html`
-      ${watch(['ready'], 
-        () => this.ready ? JSON.stringify(this.todos) : html`Loading...`
-      )}`;
+      <button ${on('click', () => this.count++)}>
+        Count: ${this.count}
+      </button>
+    `;
   }
 }
 
-// Define the custom element 'fetch-api'
-customElements.define('fetch-api', FetchApi);
-
+customElements.define('my-counter', Counter);
 ```
 
+## API Reference
 
-3. **Passing data from Parent to Child component**
 
+### Core Helpers
 
+| Helper | Purpose | Example |
+| :--- | :--- | :--- |
+| `getset(initial)` | Creates reactive property with getter/setter | `count = getset(0)` |
+| `propReflect(initial)` | Reactive property that reflects to attribute | `theme = propReflect('light')` |
+| `watch(deps, callback)` | Fine-grained control - rerenders when specified dependencies change | `${watch(['count', 'theme'], () => html`<div>...</div>`)}` |
+| `s(callback)` | Shorthand for reactive value binding | `${s(() => this.count)}` |
+| `attr(name, callback)` | Surgical attribute binding | `${attr('disabled', () => !this.editable)}` |
+| `on(event, handler)` | Event listener binding | `${on('click', () => this.save())}` |
+| `html` | Template literal tag for HTML | `html`<div>Hello</div>`` |
 
-```javascript
+### Style Helpers
 
-// ParentToChildComponents.ts
+| Helper | Purpose | Example |
+| :--- | :--- | :--- |
+| `css` | Template literal tag for component-scoped styles | `styles = [css`.card { padding: 1rem; }`]` |
+| `shareStyle(styles)` | Injects global styles across all components | `shareStyle(css:host { --brand: blue; })` |
 
-class ParentComp extends RedGin {
-  currentItem: string = 'Laptop';
 
-  // Initialize child component with data using properties or attributes
-  onInit() {
-    // Option 1: Send data to child component using properties     
-    const child: IChild = this.shadowRoot?.querySelector('child-comp')!;
-    child.item = this.currentItem;
-  }
+## Lifecycle Methods
 
-  // Render method for the parent component
-  render() {       
-    return html`
-      <child-comp></child-comp>
+* onInit() - After first render
+* onDoUpdate() - After data sync
+* onUpdated() - After every attribute change/requestUpdate
 
-      <!-- Option 2: Send data to child component using attributes -->
-      <child2-comp item="${this.currentItem}"></child2-comp>
-    `;
-  }
-}
-
- 
-```
+## Style Management Examples
 
-3. **Passing data from Child to Parent component**
-``` javascript
+### Global Design System with shareStyle
+import { RedGin, shareStyle, css, html } from 'redgin';
 
-// ParentChildComponents.ts
+// Share Bootstrap globally (injected once, used everywhere)
+shareStyle('<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">')
 
-// Child component for emitting a custom event
-class ChildComp extends RedGin {
-  render() {
-    return html`
-      <button ${event('click', () => emit.call(this, 'newItem', 'added New Item?'))}>
-        <slot>Add to parent's list</slot>
-      </button>
-    `;
+// Share design tokens across all components
+```js
+shareStyle(css`
+  :host {
+    --brand-primary: #007bff;
+    --brand-success: #28a745;
+    --card-shadow: 0 4px 6px rgba(0,0,0,0.1);
   }
-}
+  
+  .rg-card {
+    border-radius: 8px;
+    box-shadow: var(--card-shadow);
+    transition: transform 0.2s;
+  }
+`);
+
+class ProductCard extends RedGin {
+  // Component-specific styles (merged with shared styles)
+  styles = [css`
+    .local-price { color: var(--brand-success); font-weight: bold; }
+  `]
 
-// Parent component for receiving the custom event
-class ParentComp extends RedGin {
   render() {
+    // Bootstrap classes work without local import!
     return html`
-      <child-comp 
-        ${event('newItem', (e: CustomEvent) => console.log(`Received child data: ${e.detail}`))}>
-        Get Child Data?
-      </child-comp>
+      <div class="rg-card p-3">
+        <div class="local-price">$120.00</div>
+        <button class="btn btn-primary">Buy Now</button>
+      </div>
     `;
   }
 }
-
 ```
 
-4. Creating a Reactive button
+## Reactivity Patterns: watch vs s()
 
-```javascript
+### RedGin offers two complementary reactivity patterns:
 
-// ReactiveButton.ts
-
-class ReactiveButton extends RedGin {
-  // Reactive property using propReflect
-  message = propReflect<string>('Hello, World!');
-
-  // Observed attributes for the component
-  static observedAttributes = ['message'];
+## s() - Smart Auto-detection
+```js
+// Automatically tracks dependencies
+render() {
+  return html`
+    <div>${s(() => this.count)}</div>
+    <div>${s(() => this.theme)}</div>
+  `;
+}
+```
 
-  // Render method for the component
-  render() {
-    // Use watch to trigger a rerender when 'message' changes
-    return html`${watch(['message'], () => html`
-      <button type="button">${this.message}</button>
+## watch - Explicit Control
+```js
+// Fine-grained control over dependencies
+render() {
+  return html`
+    ${watch(['count', 'theme'], () => html`
+      <div class="${this.theme}">
+        Count: ${this.count}
+      </div>
     `)}
-    `;
-  }
-} 
-
+  `;
+}
 ```
 
-5. For Loop through the list of Products
-``` javascript
-
-// ProductListRenderer.ts
-
-// For Loop through the List of Products
-class ProductListRenderer extends RedGin {
-  // Reactive property using getset
-  products = getset<IProduct[]>([
-    { id: 1, name: 'Laptop' },
-    { id: 2, name: 'Camera' },
-  ]);
-
-  // Render method for displaying the list of products
-  render() {       
-    return html` 
-      <ul>
-        ${watch(['products'], () => 
-          this.products.map(product => 
-            html`<li>${product.id} - ${product.name}</li>`
-          )
-        )}
-      </ul>`;
-  }
-}
 
+## Examples
 
+Check out these live examples demonstrating RedGin's capabilities:
 
-```
-More
+### Basic Examples
+* [Simple Counter](https://github.com/josnin/redgin/tree/Dev/samples) - Getting started with RedGin
+* [Two-way Data Binding](https://github.com/josnin/redgin/tree/Dev/samples) - Using getset and events
+* [Todo App](https://github.com/josnin/redgin/tree/Dev/samples) - Classic todo example
 
 
+### Style Examples
 
+* [Bootstrap Integration](https://github.com/josnin/redgin/tree/Dev/samples) - Using shareStyle with CSS frameworks
+* [Design Tokens](https://github.com/josnin/redgin/tree/Dev/samples) - Global theme variables
+* [Scoped Styles](https://github.com/josnin/redgin/tree/Dev/samples) - Component-specific CSS
 
 
+### Advanced Patterns
+* [Surgical List Updates (1,000+ items)](https://github.com/josnin/redgin/tree/Dev/samples) - Only updated rows re-render
+* [E-commerce Application](https://github.com/josnin/redgin/tree/Dev/samples) - Cart, checkout, and async operations
+* [CRM Dashboard](https://github.com/josnin/redgin/tree/Dev/samples) - Multi-view with modals and pipeline
+* [Parent-Child Communication](https://github.com/josnin/redgin/tree/Dev/samples) - Custom events and props
 
-## For VSCode Syntax Highlight template literals
+### Integration Examples
 
-### Install extension [inline-html](https://marketplace.visualstudio.com/items?itemName=pushqrdx.inline-html)
+* [TypeScript Support](https://github.com/josnin/redgin/tree/Dev/samples) - Full type safety
+* [With Bootstrap](https://github.com/josnin/redgin/tree/Dev/samples) - Using CSS frameworks
+* [Property Reflection](https://github.com/josnin/redgin/tree/Dev/samples) - Syncing props with attributes
 
-```js
-    render() {
-      return html`<div>with syntax highlighted</div>`
-    }
-```
+## Performance
 
+* Surgical Updates: Only changed elements re-render
+* Bundle Size: ~5.3kb minified + gzipped
+* Memory: Zero virtual DOM overhead
+* Style Injection: Global styles shared once, not duplicated per component
 
+## Contributing
+
+We welcome contributions!
+```
+git clone https://github.com/josnin/redgin.git
+cd redgin
+npm install
+npm run dev
+```
 
 ## Reference
 https://web.dev/custom-elements-best-practices/
@@ -270,14 +221,6 @@ https://web.dev/custom-elements-best-practices/
 https://web.dev/shadowdom-v1/
 
 
-## How to run development server?
-```
-git clone git@github.com:josnin/redgin.git
-cd ~/Documents/redgin/
-npm install
-npm run dev
-```
-
 ## Help
 
 Need help? Open an issue in: [ISSUES](https://github.com/josnin/redgin/issues)
@@ -285,3 +228,5 @@ Need help? Open an issue in: [ISSUES](https://github.com/josnin/redgin/issues)
 
 ## Contributing
 Want to improve and add feature? Fork the repo, add your changes and send a pull request.
+
+

package/dist/directives/attr.d.ts

@@ -0,0 +1,11 @@
+/**
+ * watchProp: Specifically for component attributes/props.
+ * Returns a marker string that the RedGin core parses as a "Directive on a Tag".
+ */
+/**
+ * Type definition for the reactive expression.
+ * 'this' is typed as the component instance.
+ */
+type WatchExpression<T = any> = (this: T) => any;
+export declare const attr: (attrName: string, exp: WatchExpression) => string;
+export {};

package/dist/directives/events.d.ts

@@ -1,4 +1,16 @@
-export declare const event: (type: string, fn: any) => string;
+export type EventHandler = (this: any, e: any) => any;
+export declare const event: (type: string, fn: EventHandler) => string;
+/**
+ * Alias for 'event'. Moving forward, use 'on' for a more
+ * declarative feel (e.g., on('click', ...))
+ */
+export declare const on: (type: string, fn: EventHandler) => string;
 export declare function emit(this: any, customEvent: string, value: any, options?: CustomEvent): void;
+/**
+ * Attach all events for this component
+ */
 export declare function applyEventListeners(this: any): void;
+/**
+ * Remove all events for this component
+ */
 export declare function removeEventListeners(this: any): void;

package/dist/directives/index.d.ts

@@ -1,3 +1,5 @@
 export * from './watch';
+export * from './stream';
+export * from './attr';
 export * from './events';
 export * from './directives';

package/dist/directives/stream.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Type definition for the reactive expression.
+ * 'this' is typed as the component instance.
+ */
+type WatchExpression<T = any> = (this: T) => any;
+/**
+ * The 's' (stream) utility: Provides "Auto-Tracked" reactivity.
+ *
+ * Unlike standard 'watch', it treats the expression as a dynamic stream.
+ * It surgically extracts dependencies via regex from the function source,
+ * removing the need for manual reference arrays.
+ *
+ * It creates a placeholder <in-watch> and registers it to the component
+ * instance for O(1) targeted updates.
+ */
+export declare const s: (exp: WatchExpression) => string;
+export {};

package/dist/directives/watch.d.ts

@@ -1,2 +1,10 @@
-export declare const watch: (ref: string[], exp: any) => string;
-export declare function watchFn(this: any, _prop: string): boolean;
+/**
+ * Type definition for the reactive expression.
+ * 'this' is typed as the component instance.
+ */
+export type WatchExpression<T = any> = (this: T) => any;
+/**
+ * The 'watch' utility used inside render().
+ * It creates a placeholder and registers dependencies to the current component instance.
+ */
+export declare const watch: (refs: string[], exp?: WatchExpression) => string;

package/dist/props/getset.d.ts

@@ -1,5 +1,13 @@
+/**
+ * Options for the getset behavior.
+ * forWatch: determines if changing this property should trigger a DOM update.
+ */
 interface IGetSet {
     forWatch?: boolean;
 }
+/**
+ * Factory function to mark a property as reactive state.
+ * Usage: myData = getset(0)
+ */
 export declare function getset<T>(value: T, options?: IGetSet): T;
 export {};

package/dist/props/propReflect.d.ts

@@ -1,8 +1,16 @@
+/**
+ * Interface for propReflect options.
+ * Allows custom conversion logic and explicit type declarations.
+ */
 interface IPropReflect<T = any> {
     serializerFn?: (this: any, prop: string, type: any, _default: T) => T;
     deserializerFn?: (this: any, prop: string, type: any, _default: T, value: T) => void;
     type?: any;
     name?: string;
 }
+/**
+ * Marks a property for reflection.
+ * Usage: myProp = propReflect(false)
+ */
 export declare function propReflect<T>(value: T, options?: IPropReflect<T>): T;
 export {};

package/dist/redgin.d.ts

@@ -1,25 +1,88 @@
-export { event, emit, watch, customDirectives } from './directives/index';
+import { WatchExpression } from './directives/index';
+export { on, event, // to obsolete
+emit, s, watch, attr, customDirectives, } from './directives/index';
 export { getset, propReflect, customPropsBehavior } from './props/index';
-export declare const attachShadow: ShadowRootInit;
-export declare let injectStyles: string[];
-export declare let defaultStyles: string[];
-export declare const html: (raw: TemplateStringsArray, ...values: any[]) => string;
-export declare const css: (raw: TemplateStringsArray, ...values: any[]) => string;
+export declare const shared: string[];
+export declare const defaultStyle = ":host{display:block}";
+/**
+ * Handles style injection with support for adoptedStyleSheets (faster memory sharing)
+ * and standard <style>/<link> fallbacks.
+ */
+export declare function _applyStyle(styles: string | string[], shadowRoot?: ShadowRoot): string;
+/**
+ * Add global styles that will be applied to every RedGin component
+ */
+export declare function shareStyle(style: string): void;
+/**
+ * THE SURGICAL FLATTENER:
+ * 1. Recursively flattens arrays.
+ * 2. Joins with EMPTY STRING '' (kills the comma). --> Note: watcher do this
+ * 3. Filters out 'dead' values (null, undefined, false).
+ */
+export declare const _f: (v: any) => string;
+export declare const html: (raw: TemplateStringsArray, ...vals: any[]) => string;
+export declare const safe: (val: any) => string;
+export declare const css: (raw: TemplateStringsArray, ...vals: any[]) => string;
 export declare class RedGin extends HTMLElement {
+    private _pending;
+    private _changed;
+    private _connected;
+    private _reactiveCache;
+    /**
+     * INSTANCE-LEVEL CACHING
+     * These Maps allow O(1) lookups for data-binding.
+     * We store direct references to HTMLElements so we never use querySelector during updates.
+     */
+    _watchRegistry: Map<string, Map<string, WatchExpression<any>>>;
+    _idToProps: Map<string, string[]>;
+    _watchElements: Map<string, HTMLElement>;
+    _attrRegistry: Map<string, Map<string, WatchExpression<any>>>;
+    _attrElements: Map<string, HTMLElement>;
+    _eventElements: Map<string, HTMLElement>;
+    styles: string[];
     constructor();
     connectedCallback(): void;
-    attributeChangedCallback(prop: any, oldValue: any, newValue: any): void;
     disconnectedCallback(): void;
-    private updateContents;
-    private setEventListeners;
-    private setPropsBehavior;
-    getStyles(styles: string[]): string;
-    private _onInit;
-    private _onDoUpdate;
-    private _onUpdated;
+    attributeChangedCallback(prop: string, oldV: any, newV: any): void;
+    /**
+     * Schedules a DOM update using a Microtask.
+     * If 5 properties change at once, only 1 DOM update is triggered.
+     */
+    protected requestUpdate(prop: string): void;
+    /**
+     * The "Tick" where DOM updates actually happen.
+     */
+    private _flush;
+    /**
+     * Initial setup: Sets up props, applies styles, renders HTML, and caches DOM nodes.
+     */
+    private _init;
+    private _collectElements;
+    /**
+     * Garbage collection: Removes watcher references when an <in-watch> element is removed.
+     */
+    _cleanupWatch(uniqId: string): void;
+    /**
+     * First-time synchronization of property values to DOM.
+     */
+    private _sync;
+    /**
+     * Core update logic: Calls registered directives (like watchFn)
+     */
+    private _update;
+    /**
+     * Lifecycle hook triggered after DOM updates are finished.
+     */
+    private _afterUpdate;
+    private _afterUpdateNoDomChange;
+    /**
+     * Identifies all class properties to be made reactive.
+     * Caches the list to avoid repeat CPU-heavy property reflection.
+     */
+    private _setupProps;
+    private _reactiveProps;
     onInit(): void;
     onDoUpdate(): void;
     onUpdated(): void;
-    styles: string[];
     render(): string;
 }

package/dist/redgin.min.js

@@ -1,13 +1,2 @@
-var O=Object.defineProperty;var $=(s,t,e)=>t in s?O(s,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[t]=e;var f=(s,t,e)=>($(s,typeof t!="symbol"?t+"":t,e),e);var d=()=>crypto.randomUUID().split("-")[0],v=s=>s.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`),u=s=>s.replace(/-./g,t=>t[1].toUpperCase());function x(s){let t=[];for(let e of h.reg)t.push(e.call(this,s));return t.filter(e=>e===!0).length>0}var y=class{static define(t){y.reg.push(t)}},h=y;f(h,"reg",[]);var p={},m=class extends HTMLElement{};customElements.get("in-watch")||customElements.define("in-watch",m);var L=(s,t)=>{let e=document.createElement("in-watch"),o=d();for(let r of s)Object.hasOwn(p,r)||(p[r]={}),p[r][o]=t;return e.dataset.watch__=o,e.outerHTML};function _(s){let t=u(s),e=!1;if(Object.hasOwn(p,t)){for(let o of Object.keys(p[t]))if(this.shadowRoot){let r=this.shadowRoot.querySelector(`[data-watch__="${o}"]`);r&&(r.innerHTML=p[t][o]?p[t][o].call(this):this[t],e=!0)}}return e}h.define(_);var S=[];var C=(s,t)=>{let e=d();return S.push([s,t,e]),`data-evt__=${e}`};function I(s,t,e){let o={detail:t,composed:!0},r=new CustomEvent(s,{...o,...e});this.shadowRoot&&this.shadowRoot.dispatchEvent(r)}function E(s){for(let t of S){let[e,o,r]=t;if(this.shadowRoot){let i=this.shadowRoot.querySelector(`[data-evt__="${r}"]`);i&&(s===0?i.addEventListener(e,o):i.removeEventListener(e,o))}}}function R(){E.call(this,0)}function T(){E.call(this,1)}function U(s,t){for(let e of c.reg)e.call(this,s,t)}var b=class{static define(t){b.reg.push(t)}},c=b;f(c,"reg",[]);var D=["^class$","^style$","^className$","^classList$","^id$","^dataset$","^data-","^aria-"],g=["disabled"],P=s=>{let t=!0;for(let e of D){let o=new RegExp(e,"g");if(s.match(o)){t=!1,console.error(`Please remove attribute '${s}' in the observedAttributes, 
-          DOM already provided built-in props reflection for this attribute.`);break}}return t};function j(s,t){if(t===void 0||t?.name!="propReflect")return;let{type:e,value:o,serializerFn:r,deserializerFn:i}=t,l=this.constructor.observedAttributes,w=u(s),n=v(s);if(l===void 0||!l.includes(n)){console.error(`Unable to apply propReflect '${w}' for attribute '${n}', 
-        Please add '${n}' in the observedAttributes of ${this.constructor.name} component`);return}!P(n)||Object.defineProperty(this,w,{configurable:!0,set(a){if(i)return i.call(this,n,e,o,a);(e===Boolean||typeof a=="boolean"||g.includes(n))&&a===!0?this.setAttribute(n,""):(e===Boolean||g.includes(n))&&a===!1?this.removeAttribute(n):([Object,Array].includes(e)||["object","array"].includes(typeof a))&&a?this.setAttribute(n,JSON.stringify(a)):([String,Number].includes(e)||["string","number"].includes(typeof a))&&a?this.setAttribute(n,a):this.removeAttribute(n)},get(){if(r)return r.call(this,n,e,o);if(n in g||e===Boolean||typeof o=="boolean")return this.hasAttribute(n);if(([String,Array,Object].includes(e)||["number","string","array","object"].includes(typeof o))&&!this.hasAttribute(n))return o;if((e===String||typeof o=="string")&&this.hasAttribute(n))return this.getAttribute(n);if((e===Number||typeof o=="number")&&this.hasAttribute(n))return Number(this.getAttribute(n));if(([Array,Object].includes(e)||["array","object"].includes(typeof o))&&this.hasAttribute(n))return JSON.parse(this.getAttribute(n))}})}function k(s,t){return{value:s,...t,name:"propReflect"}}c.define(j);function B(s,t){if(t===void 0||t?.name!="getset")return;let{value:e,forWatch:o}=t;this[`#${s}`]=e,Object.defineProperty(this,s,{configurable:!0,set(r){this[`#${s}`]=r,o&&this.updateContents(s)&&this._onUpdated()},get(){return this[`#${s}`]}})}function M(s,t){return{value:s,...{forWatch:!0},...t,name:"getset"}}c.define(B);var N={mode:"open",delegatesFocus:!0},q=[],F=[` /* Custom elements are display: inline by default, 
-     * so setting their width or height will have no effect 
-    */
-    :host { display: block; }
-  `],H=(s,...t)=>String.raw({raw:s},...t),bt=H,A=class extends HTMLElement{constructor(){super(),this.attachShadow(N)}connectedCallback(){this._onInit(),this._onDoUpdate()}attributeChangedCallback(t,e,o){if(e===o)return;this.updateContents(t)&&this._onUpdated()}disconnectedCallback(){T.call(this)}updateContents(t){return x.call(this,t)}setEventListeners(){R.call(this)}setPropsBehavior(){let t=Object.getOwnPropertyNames(this).filter(e=>e!="styles");for(let e of t){let o=this[e];U.call(this,e,o)}}getStyles(t){let e=[],o=[],r=this.shadowRoot?.adoptedStyleSheets;for(let i of t)if(i.startsWith("<link"))e.push(i);else if(i.startsWith("@import")||!r){let l=document.createElement("style");l.innerHTML=i,e.push(l.outerHTML)}else{let l=new CSSStyleSheet;l.replaceSync(i),o.push(l)}return this.shadowRoot&&o.length>0&&(this.shadowRoot.adoptedStyleSheets=[...this.shadowRoot.adoptedStyleSheets,...o]),e.join("")}_onInit(){this.setPropsBehavior(),this.shadowRoot&&(this.shadowRoot.innerHTML=`
-      ${this.getStyles(q)} 
-      ${this.getStyles(F)} 
-      ${this.getStyles(this.styles)} 
-      ${this.render()}
-      `),this.onInit()}_onDoUpdate(){let t=Object.getOwnPropertyNames(this).filter(e=>e!="styles");for(let e of t)this.updateContents(e)&&this._onUpdated();this.setEventListeners(),this.onDoUpdate()}_onUpdated(){this.setEventListeners(),this.onUpdated()}onInit(){}onDoUpdate(){}onUpdated(){}styles=[];render(){return""}};export{A as RedGin,N as attachShadow,bt as css,h as customDirectives,c as customPropsBehavior,F as defaultStyles,I as emit,C as event,M as getset,H as html,q as injectStyles,k as propReflect,L as watch};
+var U=Object.defineProperty;var W=(e,t,n)=>t in e?U(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n;var g=(e,t,n)=>(W(e,typeof t!="symbol"?t+"":t,n),n);function d(){return"id-"+Math.random().toString(16).slice(2)+"-"+Date.now()}var S=e=>e.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`),u=e=>e.replace(/-./g,t=>t[1].toUpperCase());function T(e){let t=[];for(let n of p.reg)t.push(n.call(this,e));return t.filter(n=>n===!0).length>0}var m=class{static define(t){m.reg.push(t)}},p=m;g(p,"reg",[]);var k=(e,t)=>{let n=d(),r=window.__redgin_current_instance;if(r){for(let s=0;s<e.length;s++){let a=e[s],c=r._watchRegistry.get(a);c||(c=new Map,r._watchRegistry.set(a,c)),c.set(n,t)}r._idToProps.set(n,e)}return`<in-watch data-watch="${n}"></in-watch>`},y=class extends HTMLElement{disconnectedCallback(){let t=this.dataset.watch,r=this.getRootNode()?.host;t&&r&&r._cleanupWatch(t)}};customElements.get("in-watch")||customElements.define("in-watch",y);var A=e=>Array.isArray(e)?e.map(A).join(""):e===void 0?"":String(e);p.define(function(t){let n=u(t),r=this._watchRegistry.get(n);if(!r)return!1;let s=!1;for(let[a,c]of r){let i=this._watchElements.get(a);if((!i||!i.isConnected)&&(i=this.shadowRoot.querySelector(`[data-watch="${a}"]`),i&&this._watchElements.set(a,i)),i){let o=c?c.call(this):this[n],l=A(o);i.innerHTML!==String(l)&&(i.innerHTML=l,s=!0)}}return s});var q=e=>{let t=d(),n=window.__redgin_current_instance;if(n){let r=e.toString(),s=/this\.([a-zA-Z_$][\w$]*)/g,a,c=new Set;for(;(a=s.exec(r))!==null;){let i=a[1];n._reactiveCache?.includes(i)&&c.add(i)}for(let i of c){let o=n._watchRegistry.get(i);o||(o=new Map,n._watchRegistry.set(i,o)),o.set(t,e)}n._idToProps.set(t,Array.from(c))}return`<in-watch data-watch="${t}"></in-watch>`};var I=(e,t)=>{let n=d(),r=window.__redgin_current_instance;if(r){let s=t.toString(),a=/this\.([a-zA-Z_$][\w$]*)/g,c,i=new Set;for(;(c=a.exec(s))!==null;){let o=c[1];r._reactiveCache&&r._reactiveCache.includes(o)&&i.add(o)}for(let o of i){r._attrRegistry||(r._attrRegistry=new Map);let l=r._attrRegistry.get(o);l||(l=new Map,r._attrRegistry.set(o,l)),l.set(n,{attrName:e,exp:t})}}return`rg-attr__${e}="${n}"`};p.define(function(t){let n=u(t),r=this._attrRegistry?.get(n);if(!r)return!1;let s=!1;for(let[a,c]of r){let i=this._attrElements.get(a);if((!i||!i.isConnected)&&(i=this.shadowRoot.querySelector(`[rg-attr__${c.attrName}="${a}"]`),i&&this._attrElements.set(a,i)),i){let o=c.exp?c.exp.call(this):this[n],l=c.attrName;if(o===!1||o===null||o===void 0)i.hasAttribute(l)&&(i.removeAttribute(l),s=!0);else{let _=o===!0?"":String(o);i.getAttribute(l)!==_&&(i.setAttribute(l,_),s=!0)}}}return s});var C=(e,t)=>{let n=d(),r=window.__redgin_current_instance;return r&&(r._eventRegistry||(r._eventRegistry=new Map),r._eventRegistry.set(n,[e,t])),`rg-evt__${e}="${n}"`},L=C;function O(e,t,n){let r={detail:t,composed:!0},s=new CustomEvent(e,{...r,...n});this.shadowRoot&&this.shadowRoot.dispatchEvent(s)}function w(){if(!(!this._eventElements||!this._eventRegistry))for(let[e,t]of this._eventElements){let n=this._eventRegistry.get(e);if(!n)continue;let[r,s]=n;t.addEventListener(r,s)}}function $(){if(!(!this._eventElements||!this._eventRegistry))for(let[e,t]of this._eventElements){let n=this._eventRegistry.get(e);if(!n)continue;let[r,s]=n;t.removeEventListener(r,s)}}function P(e,t){for(let n of f.reg)n.call(this,e,t)}var b=class{static define(t){b.reg.push(t)}},f=b;g(f,"reg",[]);var D=["^class$","^style$","^className$","^classList$","^dataset$","^data-","^aria-","^hidden$","^tabindex$","^slot$","^contenteditable$","^draggable$","^spellcheck$"],F=D.map(e=>new RegExp(e)),j=new Set(["disabled","hidden","checked","selected","readonly","multiple"]),H=e=>{for(let t of F)if(t.test(e))return console.error(`Please remove attribute '${e}' from observedAttributes; browser already provides built-in reflection.`),!1;return!0};function z(e,t){if(!t||t.name!=="propReflect")return;let{type:n,value:r,serializerFn:s,deserializerFn:a}=t,c=this.constructor.observedAttributes,i=u(e),o=S(e);if(!c?.includes(o)){console.error(`propReflect '${i}' cannot map to '${o}'. Add '${o}' to observedAttributes of ${this.constructor.name}.`);return}if(!H(o))return;let l=n===Boolean||j.has(o)||typeof r=="boolean",_=n===Object||n===Array||["object","array"].includes(typeof r),R=n===String||n===Number||["string","number"].includes(typeof r);Object.defineProperty(this,i,{configurable:!0,set(h){if(a)return a.call(this,o,n,r,h);l?h?this.setAttribute(o,""):this.removeAttribute(o):_&&h!=null?this.setAttribute(o,JSON.stringify(h)):R&&h!=null?this.setAttribute(o,h):this.removeAttribute(o)},get(){if(s)return s.call(this,o,n,r);if(l)return this.hasAttribute(o);if(!this.hasAttribute(o))return r;if(_)try{return JSON.parse(this.getAttribute(o))}catch{return r}if(R){let h=this.getAttribute(o);return n===Number?Number(h):h}return this.getAttribute(o)}})}function B(e,t){return{value:e,...t,name:"propReflect"}}f.define(z);function G(e,t){if(t===void 0||t?.name!="getset")return;let{value:n,forWatch:r}=t,s=`#${e}`;this[s]=n,Object.defineProperty(this,e,{configurable:!0,set(a){this[s]!==a&&(this[s]=a,r&&this.requestUpdate(e))},get(){return this[s]}})}function K(e,t){return{value:e,...{forWatch:!0},...t,name:"getset"}}f.define(G);var M=new Map,E=[],Z=":host{display:block}";function v(e,t){let n=Array.isArray(e)?e:[e],r=[];if(!t)return n.join("");for(let s of n){if(s.startsWith("<link")){let a=s.match(/href="([^"]+)"/)?.[1];if(a&&!t.querySelector(`link[href="${a}"]`)){let c=document.createElement("div");c.innerHTML=s;let i=c.firstElementChild;i&&t.appendChild(i)}continue}if("adoptedStyleSheets"in t){let a=M.get(s);a||(a=new CSSStyleSheet,a.replaceSync(s),M.set(s,a)),t.adoptedStyleSheets=[...t.adoptedStyleSheets,a];continue}r.push(`<style>${s}</style>`)}return r.join("")}function Mt(e){E.includes(e)||E.push(e)}var x=e=>Array.isArray(e)?e.map(x).join(""):e===void 0?"":String(e),J=(e,...t)=>e.reduce((n,r,s)=>n+r+x(t[s]),""),V={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&apos;"},Nt=e=>x(e).replace(/[&<>"']/g,n=>V[n]),Ut=J,N=class extends HTMLElement{_pending=!1;_changed=new Set;_connected=!1;_reactiveCache=[];_watchRegistry=new Map;_idToProps=new Map;_watchElements=new Map;_attrRegistry=new Map;_attrElements=new Map;_eventElements=new Map;styles=[];constructor(){super(),this.attachShadow({mode:"open",delegatesFocus:!0})}connectedCallback(){this._connected||(this._connected=!0,this._init())}disconnectedCallback(){$.call(this)}attributeChangedCallback(t,n,r){n!==r&&this.requestUpdate(t)}requestUpdate(t){this._changed.add(t),!this._pending&&(this._pending=!0,queueMicrotask(()=>this._flush()))}_flush(){if(this._pending=!1,!this._changed.size)return;let t=Array.from(this._changed);this._changed.clear();let n=!1;window.__redgin_current_instance=this;for(let r of t)this._update(r)&&(n=!0);window.__redgin_current_instance=null,n?this._afterUpdate():this._afterUpdateNoDomChange()}_init(){this._setupProps(),window.__redgin_current_instance=this,this.shadowRoot&&(v(E,this.shadowRoot),v(Z,this.shadowRoot),v(this.styles,this.shadowRoot),this.shadowRoot.innerHTML+=this.render()),this._collectElements(),this.onInit(),this._sync(),window.__redgin_current_instance=null}_collectElements(t="all"){if(!this.shadowRoot)return;t==="all"&&(this._watchElements.clear(),this._attrElements.clear()),this._eventElements.clear();let n=document.createTreeWalker(this.shadowRoot,NodeFilter.SHOW_ELEMENT,null),r;for(;r=n.nextNode();){let s=r.attributes;for(let a=0;a<s.length;a++){let{name:c,value:i}=s[a];c.startsWith("rg-evt__")?this._eventElements.set(i,r):t==="all"&&(c==="data-watch"?this._watchElements.set(i,r):c.startsWith("rg-attr__")&&this._attrElements.set(i,r))}}}_cleanupWatch(t){let n=this._idToProps.get(t);if(n){for(let r of n){let s=this._watchRegistry.get(r);s&&(s.delete(t),s.size||this._watchRegistry.delete(r))}this._idToProps.delete(t),this._watchElements.delete(t)}}_sync(){for(let t of this._reactiveProps())this._update(t);this._collectElements(),w.call(this),this.onDoUpdate()}_update(t){return T.call(this,t)}_afterUpdate(){this._collectElements("events"),w.call(this),this.onUpdated()}_afterUpdateNoDomChange(){this.onUpdated()}_setupProps(){if(!this._reactiveCache.length){let t=new Set(["styles","_pending","_changed","_connected"]);this._reactiveCache=Object.getOwnPropertyNames(this).filter(n=>!t.has(n))}for(let t of this._reactiveCache)P.call(this,t,this[t])}_reactiveProps(){return this._reactiveCache}onInit(){}onDoUpdate(){}onUpdated(){}render(){return""}};export{N as RedGin,v as _applyStyle,x as _f,I as attr,Ut as css,p as customDirectives,f as customPropsBehavior,Z as defaultStyle,O as emit,C as event,K as getset,J as html,L as on,B as propReflect,q as s,Nt as safe,Mt as shareStyle,E as shared,k as watch};
 //# sourceMappingURL=redgin.min.js.map

package/dist/utils.d.ts

@@ -1,3 +1,3 @@
-export declare const getUniqID: () => string;
+export declare function getUniqID(): string;
 export declare const camelToKebab: (str: string) => string;
 export declare const kebabToCamel: (str: string) => string;

package/index.d.ts

@@ -0,0 +1,20 @@
+import './samples/sample-styles';
+import './samples/sample-binding';
+import './samples/sampleIf';
+import './samples/sample-nested';
+import './samples/sample-allevents';
+import './samples/ecommerce-app';
+import './samples/todo-catalog';
+import './samples/smart-list';
+import './samples/smart-update-list';
+import './samples/smart-pagination-list';
+import './samples/smart-sort-list';
+import './samples/xss-sandbox';
+import './samples/parentChild/parentChild';
+import './samples/childParent/cart-manager';
+import './samples/modal-app';
+import './samples/master-binding';
+import './samples/smart-grid';
+import './samples/crm-app';
+import './samples/check-search-list';
+import './samples/todo-app';

package/package.json

@@ -1,11 +1,39 @@
 {
   "name": "redgin",
-  "version": "0.1.19",
-  "description": "A lightweight (~5.3kb) library for building Web Components",
+  "version": "0.2.2",
+   "description": "A lightweight (~5.3kb) library for building Web Components with surgical updates and fine-grained reactivity",
   "keywords": [
-    "redgin",
     "web components",
-    "custom elements"
+    "custom elements",
+    "reactive",
+    "lightweight",
+    "tiny",
+    "reactive web components",
+    "custom elements library",
+    "web components framework",
+    "shadow dom",
+    "vanilla js",
+    "no dependencies",
+    "reactive programming",
+    "fine-grained reactivity",
+    "surgical updates",
+    "template literals",
+    "UI library",
+    "component library",
+    "frontend",
+    "browser",
+    "javascript",
+    "typescript",
+    "reactive state",
+    "state management",
+    "reactive properties",
+    "attribute reflection",
+    "custom events",
+    "lifecycle hooks",
+    "SPA",
+    "single page application",
+    "micro frontend",
+    "framework agnostic"
   ],
   "main": "dist/redgin.min.js",
   "types": "dist/redgin.d.ts",
@@ -19,7 +47,7 @@
     "build": "npm run clean &&  tsc -w",
     "bundle": "npx esbuild --bundle src/redgin.js --minify --sourcemap --format=esm --outfile=dist/redgin.min.js --target=es2022 && npm run copy",
     "copy": "cp -rvf src/*.d.ts dist/. && cp -rfv src/directives/*.d.ts dist/directives/. && cp -rfv src/props/*.d.ts dist/props/.",
-    "dev": "node node_modules/vite/bin/vite.js"
+    "dev": "node node_modules/vite/bin/vite.js --host 0.0.0.0"
   },
   "repository": {
     "type": "git",
@@ -32,10 +60,10 @@
   },
   "homepage": "https://github.com/josnin/redgin#readme",
   "devDependencies": {
-    "@types/node": "^18.11.14",
+    "@types/node": "^25.2.3",
     "esbuild": "^0.16.4",
     "rimraf": "^4.1.2",
     "typescript": "^4.9.5",
-    "vite": "^4.1.1"
+    "vite": "^7.3.1"
   }
 }

package/vite.config.js

@@ -0,0 +1,5 @@
+export default {
+  server: {
+    allowedHosts: ['myfedora.local'] // . prefix allows subdomains
+  }
+}

package/dist/props/directives.d.ts

@@ -1,5 +0,0 @@
-export declare function applyDirectives(this: any, prop: string): boolean;
-export declare class customDirectives {
-    static reg: any;
-    static define(d: any): void;
-}

package/dist/props/events.d.ts

@@ -1,4 +0,0 @@
-export declare const event: (type: string, fn: any) => string;
-export declare function emit(this: any, customEvent: string, value: any, options?: CustomEvent): void;
-export declare function applyEventListeners(this: any): void;
-export declare function removeEventListeners(this: any): void;

package/dist/props/watch.d.ts

@@ -1,2 +0,0 @@
-export declare const watch: (ref: string[], exp: any) => string;
-export declare function watchFn(this: any, _prop: string): boolean;