plug-code 1.1.16 → 1.2.0

package/LICENSE

@@ -1,6 +1,6 @@
 Plug&Code License
 
-Copyright (c) 2026 [TU NOMBRE]
+Copyright (c) 2026 AlaunS
 
 All rights reserved.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plug-code",
-  "version": "1.1.16",
+  "version": "1.2.0",
   "description": "",
   "main": "src/plug-code.tsx",
   "types": "types/plug-code.d.ts",

package/src/core/plcAPI.tsx

@@ -1,11 +1,12 @@
 import { produce } from "immer";
 import type { ObjectType } from "../types/general";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { PlcPipeline } from "./plcPipeline";
 import type { PlcStore } from "./plcStore";
 import type { CommandFn, transformerType } from "../types/api";
 
 import type { ChannelRegistry, CommandRegistry, SlotRegistry } from "../types/registry";
+import { isEqual } from "../helpers/core";
 
 type ChannelKey = keyof ChannelRegistry | (string & {});
 type ChannelData<K> = K extends keyof ChannelRegistry ? ChannelRegistry[K] : any;
@@ -20,7 +21,6 @@ type CommandResult<K> = K extends keyof CommandRegistry
 
 type SlotKey = keyof SlotRegistry | (string & {});
 
-
 export class PlcAPI<S extends ObjectType> {
     private store: PlcStore<S>
     private pipeline: PlcPipeline<S>
@@ -28,13 +28,24 @@ export class PlcAPI<S extends ObjectType> {
 
     private transformers = new Map<string, transformerType[]>()
     private commands = new Map<string, CommandFn>();
-    private installedFeatures = new Set<string>();
 
     constructor(store: PlcStore<S>) {
         this.store = store
         this.pipeline = new PlcPipeline(store)
     }
 
+    redraw(key: string): void {
+        const currentData = this.substores.get(key);
+        if (currentData === undefined) return;
+
+        const dataRef = typeof currentData === 'object' && currentData !== null
+            ? (Array.isArray(currentData) ? [...currentData] : { ...currentData })
+            : currentData;
+
+        this.substores.set(key, dataRef);
+        this.store.set(key as any, dataRef);
+    }
+
     watch<T>(
         storeKey: string,
         selector: (data: any) => T,
@@ -122,57 +133,67 @@ export class PlcAPI<S extends ObjectType> {
         return () => lastValue
     }
 
-    register(slot: SlotKey, node: () => React.ReactNode): void;
-    register<K extends string>(slot: SlotKey, node: (data: any) => React.ReactNode, dependencyKey: K): void;
-    register(slot: SlotKey, node: (data?: any) => React.ReactNode, dependencyKey?: string) {
+    register(slot: SlotKey, node: (props?: any) => React.ReactNode): void;
+    register<K extends string>(slot: SlotKey, node: (data: any, props?: any) => React.ReactNode, dependencyKey: K): void;
+    register(slot: SlotKey, node: (arg1?: any, arg2?: any) => React.ReactNode, dependencyKey?: string) {
         if (dependencyKey) {
-            const ConnectedWrapper = () => {
-                const [data, setData] = useState(() => this.substores.get(dependencyKey));
+            const ConnectedWrapper = (props: any) => {
+                const [storeData, setStoreData] = useState(() => this.substores.get(dependencyKey));
 
                 useEffect(() => {
                     const unsubscribe = this.store.subscribe(dependencyKey as any, () => {
-                        setData(this.substores.get(dependencyKey));
+                        setStoreData(this.substores.get(dependencyKey));
                     });
                     return unsubscribe;
                 }, []);
 
-                return node(data);
+                return <>{node(storeData, props)}</>;
             };
 
             this.store.batch(() => {
-                this.pipeline.register(slot as string, () => <ConnectedWrapper />);
+                this.pipeline.register(slot as string, (p: any) => <ConnectedWrapper {...p} />);
             });
         }
         else {
             this.store.batch(() => {
-                this.pipeline.register(slot as string, node as () => React.ReactNode);
+                this.pipeline.register(slot as string, node);
             });
         }
     }
 
     scope<T = any>(key: string | "root"): {
         get: () => T;
-        update: (updater: (draft: T) => void) => void;
-        connect: (renderer: (data: T) => React.ReactNode) => React.FC;
-        render: (slotName: SlotKey) => React.ReactNode | null;
+        update: (updater: (draft: T) => void, slot?: string, triggerKey?: string) => void;
+        connect: <P = {}, R = any>(
+            selector: (data: T, props: P) => R
+        ) => (WrappedComponent: React.ComponentType<P & R>) => React.FC<P>;
+
+        render: (slotName: SlotKey) => React.FC;
         receive: (context?: any) => any;
         root: PlcAPI<S>;
     } {
         return {
             get: (): T => this.getData(key),
 
-            update: (updater: (draft: T) => void) => {
-                this.update(key as any, updater);
+            update: (updater: (draft: T) => void, slot?: string, triggerKey?: string) => {
+                this.update(key as any, updater, slot, triggerKey);
             },
 
-            connect: (renderer: (data: T) => React.ReactNode) => {
-                return this.connect(key, renderer);
+            connect: <P = {}, R = any>(
+                selector: (data: T, props: P) => R
+            ) => {
+                return this.connect(key, selector);
             },
 
             render: (slotName: SlotKey) => {
-                return this.connect(key, (localData) => {
-                    return this.pipeline.render(slotName as string, localData) as React.ReactNode;
-                }) as any;
+                const ScopedSlotRenderer = ({ _scopeData }: { _scopeData: T }) => {
+                    return <>{this.pipeline.render(slotName as string, _scopeData)}</>;
+                };
+
+                return this.connect(
+                    key,
+                    (data: T) => ({ _scopeData: data })
+                )(ScopedSlotRenderer) as any;
             },
 
             receive: (context: any = {}) => {
@@ -184,22 +205,52 @@ export class PlcAPI<S extends ObjectType> {
         };
     }
 
-    connect<T = any>(key: string, renderer: (data: T) => React.ReactNode): React.FC {
-        return () => {
-            const [data, setData] = useState<T>(() => this.substores.get(key));
+    connect<State = any, OwnProps = {}, ResultProps = {}>(
+        key: string,
+        selector: (state: State, props: OwnProps) => ResultProps
+    ): (WrappedComponent: React.ComponentType<OwnProps & ResultProps>) => React.FC<OwnProps> {
+        return (WrappedComponent: React.ComponentType<OwnProps & ResultProps>) => {
+
+            const ConnectedComponent: React.FC<OwnProps> = (props) => {
+                const propsRef = useRef(props);
+                propsRef.current = props;
 
-            useEffect(() => {
-                const unsubscribe = this.store.subscribe(key as any, () => {
-                    setData(this.substores.get(key));
+                const [slice, setSlice] = useState<ResultProps>(() => {
+                    const data = this.substores.get(key);
+                    return selector(data, props);
                 });
 
-                return () => {
-                    unsubscribe();
-                };
-            }, []);
+                useEffect(() => {
+                    const unsubscribe = this.store.subscribe(key as any, () => {
+                        const currentData = this.substores.get(key);
+                        const newSlice = selector(currentData, propsRef.current);
+                        setSlice(prev => {
+                            if (isEqual(prev, newSlice)) return prev;
+                            return newSlice;
+                        });
+                    });
+                    return unsubscribe;
+                }, []);
+
+                useEffect(() => {
+                    const currentData = this.substores.get(key);
+                    const newSlice = selector(currentData, props);
+
+                    setSlice(prev => {
+                        if (isEqual(prev, newSlice)) return prev;
+                        return newSlice;
+                    });
+                }, [props]);
 
-            if (data === undefined) return null;
-            return <>{renderer(data)}</>;
+                if (slice === undefined && this.substores.get(key) === undefined) return null;
+
+                return <WrappedComponent {...props} {...slice} />;
+            };
+
+            const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
+            ConnectedComponent.displayName = `Connect(${displayName})`;
+
+            return ConnectedComponent;
         };
     }
 
@@ -215,8 +266,8 @@ export class PlcAPI<S extends ObjectType> {
         })
     }
 
-    render(slot: SlotKey) {
-        return this.pipeline.render(slot as string)
+    render(slot: SlotKey, props?: any) {
+        return this.pipeline.render(slot as string, props)
     }
 
     invalidate(slot?: SlotKey) {
@@ -330,7 +381,6 @@ export class PlcAPI<S extends ObjectType> {
         }
 
         if (triggerKey && triggerKey !== key) {
-
             const triggerData = this.substores.get(triggerKey);
 
             if (triggerData) {

package/src/core/plcPipeline.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext } from "react";
 import { ScopeContext } from "../contexts/pipeline";
 import type { ObjectType } from "../types/general";
 import type { ScheduledSlot, Slot } from "../types/pipeline";
@@ -73,9 +73,15 @@ export class PlcPipeline<S extends ObjectType> {
     }
 
     private regenerateCache(slot: string) {
-        const nodes = this.slots.get(slot)?.map((fn, i) => (
-            <React.Fragment key={i}>{fn()}</React.Fragment>
-        )) || [];
+        const nodes = this.slots.get(slot)?.map((fn, i) => {
+            const SlotBridge = () => {
+                const dynamicProps = useContext(ScopeContext);
+                return <React.Fragment>{fn(dynamicProps)}</React.Fragment>;
+            };
+
+            return <SlotBridge key={i} />;
+        }) || [];
+
         this.cache.set(slot, nodes);
     }
 }

package/src/helpers/core.ts

@@ -0,0 +1,10 @@
+export const isEqual = (a: any, b: any) => {
+    if (a === b) return true;
+    if (typeof a === 'object' && a !== null && typeof b === 'object' && b !== null) {
+        const keysA = Object.keys(a);
+        const keysB = Object.keys(b);
+        if (keysA.length !== keysB.length) return false;
+        return keysA.every(k => a[k] === b[k]);
+    }
+    return false;
+}

package/src/types/pipeline.ts

@@ -1,3 +1,3 @@
 
-export type Slot = () => React.ReactNode
+export type Slot = (props?: any) => React.ReactNode
 export type ScheduledSlot = { slot: string, fn: Slot, priority: number }

package/types/plug-code.d.ts

@@ -7,6 +7,8 @@ import * as React from 'react';
 export declare type ObjectType = Record<string, any>;
 
 export type Slot = () => React.ReactNode;
+interface SlotRegistry {}
+type SlotKey = keyof SlotRegistry | (string & {});
 
 /**
  * Función para ejecutar lógica de negocio (Acciones).
@@ -55,9 +57,10 @@ export declare class PlcAPI<S extends ObjectType> {
     watch<T>(storeKey: string, selector: (data: any) => T, callback: (newValue: T, oldValue: T) => void): () => void
     override<K extends string>(key: K & "root", data: any, slot?: string): void
     // --- Gestión de UI (Slots & Rendering) ---
-
-    register(slot: string, node: () => React.ReactNode): void;
-    register<K extends string>(slot: string, node: (data: any) => React.ReactNode, dependencyKey: K): void;
+    
+    redraw(key: string): void
+    register(slot: string, node: (props?: any) => React.ReactNode): void;
+    register<K extends string>(slot: string, node: (data: any, props?: any) => React.ReactNode, dependencyKey: K): void;
 
     /** Envuelve un slot existente (Decorador/Wrapper) */
     wrap(slot: string, fn: (next: () => React.ReactNode) => () => React.ReactNode): void;
@@ -88,15 +91,18 @@ export declare class PlcAPI<S extends ObjectType> {
      */
     scope<T = any>(key: string): {
         get: () => T;
-        update: (updater: (draft: T) => void) => void;
-        connect: (renderer: (data: T) => React.ReactNode) => React.FC;
-        render: (slotName: string) => React.ReactNode | null;
+        update: (updater: (draft: T) => void, slot?: string, triggerKey?: string) => void;
+        connect: <P = {}, R = any>(
+            selector: (data: T, props: P) => R
+        ) => (WrappedComponent: React.ComponentType<P & R>) => React.FC<P>;
+
+        render: (slotName: SlotKey) => React.FC;
         receive: (context?: any) => any;
         root: PlcAPI<S>;
     };
 
     /** Conecta un componente a una parte del estado (HOC) */
-    connect<T = any>(key: string, renderer: (data: T) => React.ReactNode): React.FC;
+    connect<State = any, OwnProps = {}, ResultProps = {}>(key: string, selector: (state: State, props: OwnProps) => ResultProps): (WrappedComponent: React.ComponentType<OwnProps & ResultProps>) => React.FC<OwnProps>;
 
     // --- Pipeline de Datos (Transforms) ---