plug-code 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Alan Mendez
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "plug-code",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AlaunS/plug-code.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "bugs": {
+    "url": "https://github.com/AlaunS/plug-code/issues"
+  },
+  "homepage": "https://github.com/AlaunS/plug-code#readme",
+  "dependencies": {
+    "immer": "^11.1.3",
+    "react": "^19.2.3"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7"
+  }
+}

package/src/contexts/pipeline.tsx

@@ -0,0 +1,4 @@
+import { createContext, useContext } from "react";
+
+export const ScopeContext = createContext<any>(null);
+export const useScopeData = <T,>() => useContext(ScopeContext) as T;

package/src/core/plcAPI.tsx

@@ -0,0 +1,157 @@
+import { produce } from "immer";
+import type { ObjectType } from "../types/general";
+import { useEffect, useState } from "react";
+import { PlcPipeline } from "./plcPipeline";
+import type { PlcStore } from "./plcStore";
+import type { transformerType } from "../types/api";
+
+export class PlcAPI<S extends ObjectType> {
+    private store: PlcStore<S>
+    private pipeline: PlcPipeline<S>
+    private substores = new Map<string, any>()
+    private transformers: transformerType[] = []
+
+    constructor(store: PlcStore<S>) {
+        this.store = store
+        this.pipeline = new PlcPipeline(store)
+    }
+
+    register(slot: string, node: () => React.ReactNode): void;
+    register<K extends string>(slot: string, node: (data: any) => React.ReactNode, dependencyKey: K): void;
+    register(slot: string, node: (data?: any) => React.ReactNode, dependencyKey?: string) {
+        if (dependencyKey) {
+            const ConnectedWrapper = () => {
+                const [data, setData] = useState(() => this.substores.get(dependencyKey));
+
+                useEffect(() => {
+                    const unsubscribe = this.store.subscribe(dependencyKey as any, () => {
+                        setData(this.substores.get(dependencyKey));
+                    });
+                    return unsubscribe;
+                }, []);
+
+                return node(data);
+            };
+
+            this.store.batch(() => {
+                this.pipeline.register(slot, () => <ConnectedWrapper />);
+            });
+        }
+        else {
+            this.store.batch(() => {
+                this.pipeline.register(slot, node as () => React.ReactNode);
+            });
+        }
+    }
+
+    scope<T = any>(key: string & "root") {
+        return {
+            get: (): T => this.getData(key),
+
+            update: (updater: (draft: T) => void) => {
+                this.update(key, updater);
+            },
+
+            connect: (renderer: (data: T) => React.ReactNode) => {
+                return this.connect(key, renderer);
+            },
+
+            render: (slotName: string) => {
+                return this.connect(key, (localData) => {
+                    return this.pipeline.render(slotName, localData);
+                });
+            },
+
+            receive: (context: any = {}) => {
+                const currentData = this.getData(key);
+                return this.receive(currentData, context);
+            },
+
+            root: this
+        };
+    }
+
+    connect<T = any>(key: string, renderer: (data: T) => React.ReactNode): React.FC {
+        return () => {
+            const [data, setData] = useState<T>(() => this.substores.get(key));
+
+            useEffect(() => {
+                const unsubscribe = this.store.subscribe(key as any, () => {
+                    setData(this.substores.get(key));
+                });
+
+                return () => {
+                    unsubscribe();
+                };
+            }, []);
+
+            if (data === undefined) return null;
+            return <>{renderer(data)}</>;
+        };
+    }
+
+    wrap(slot: string, fn: (next: () => React.ReactNode) => () => React.ReactNode) {
+        this.store.batch(() => {
+            this.pipeline.wrap(slot, fn)
+        })
+    }
+
+    after(slot: string, node: () => React.ReactNode) {
+        this.store.batch(() => {
+            this.pipeline.register(slot, node)
+        })
+    }
+
+    render(slot: string) {
+        return this.pipeline.render(slot)
+    }
+
+    invalidate(slot?: string) {
+        this.pipeline.invalidate(slot)
+    }
+
+    send(id: string, fn: (data: any, context: any) => any, priority: number) {
+        this.transformers.push({ id, priority, fn });
+        this.transformers.sort((a, b) => a.priority - b.priority);
+    }
+
+    receive(initialData: any, context: any = {}) {
+        let currentData = initialData;
+
+        for (const transformer of this.transformers) {
+            try {
+                currentData = transformer.fn(currentData, context);
+            } catch (error) {
+                console.error(`[Pipeline] Error en transformador '${transformer.id}':`, error);
+            }
+        }
+
+        return currentData;
+    }
+
+    getData(key: string): any {
+        return this.substores.get(key)
+    }
+
+    subscribe(listener: () => void) {
+        return this.store.subscribe(listener);
+    }
+
+    createData<K extends string, T>(key: K, initialState: T) {
+        if (this.substores.has(key)) return
+        this.substores.set(key, initialState)
+    }
+
+    update<K extends keyof S>(key: string & "root", updater: (draft: any) => void, slot?: string) {
+        const sub = this.substores.get(key)
+        if (!sub) return
+
+        const newSub = produce(sub, updater)
+        this.substores.set(key, newSub)
+
+        this.store.set(key as K, newSub as S[K])
+        if (slot) {
+            this.invalidate(slot)
+        }
+    }
+}

package/src/core/plcPipeline.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import { ScopeContext } from "../contexts/pipeline";
+import type { ObjectType } from "../types/general";
+import type { ScheduledSlot, Slot } from "../types/pipeline";
+import type { PlcStore } from "./plcStore";
+
+export class PlcPipeline<S extends ObjectType> {
+    private slots = new Map<string, Slot[]>()
+    private store: PlcStore<S>
+    private cache = new Map<string, React.ReactNode[]>()
+    private scheduleQueue: ScheduledSlot[] = []
+
+    constructor(store: PlcStore<S>) {
+        this.store = store
+    }
+
+    register(slot: string, fn: Slot, priority: number = 0) {
+        if (!this.slots.has(slot)) this.slots.set(slot, [])
+        this.slots.get(slot)!.push(fn)
+
+        this.scheduleQueue.push({ slot, fn, priority })
+        this.store.set(`slot:${slot}`, Math.random() as any)
+    }
+
+    wrap(slot: string, wrapper: (next: Slot) => Slot, priority: number = 0) {
+        const current = this.slots.get(slot) || []
+        this.slots.set(
+            slot,
+            current.map(fn => wrapper(fn))
+        )
+
+        current.forEach(fn => this.scheduleQueue.push({ slot, fn, priority }))
+        this.store.set(`slot:${slot}`, Math.random() as any)
+    }
+
+    render(slot: string, contextData?: any) {
+        if (this.scheduleQueue.length > 0) {
+            this.scheduleQueue.sort((a, b) => b.priority - a.priority);
+
+            const slotsToUpdate = new Set<string>();
+            this.scheduleQueue.forEach(item => slotsToUpdate.add(item.slot));
+
+            slotsToUpdate.forEach(slotName => {
+                this.regenerateCache(slotName);
+            });
+
+            this.scheduleQueue = [];
+        }
+
+        if (!this.cache.has(slot) && this.slots.has(slot)) {
+            this.regenerateCache(slot);
+        }
+
+        const content = this.cache.get(slot);
+
+        if (contextData !== undefined) {
+            return (
+                <ScopeContext.Provider value={contextData}>
+                    {content}
+                </ScopeContext.Provider>
+            );
+        }
+
+        return content;
+    }
+
+    invalidate(slot?: string) {
+        if (slot) {
+            this.cache.delete(slot)
+        } else {
+            this.cache.clear()
+        }
+    }
+
+    private regenerateCache(slot: string) {
+        const nodes = this.slots.get(slot)?.map((fn, i) => (
+            <React.Fragment key={i}>{fn()}</React.Fragment>
+        )) || [];
+        this.cache.set(slot, nodes);
+    }
+}

package/src/core/plcStore.tsx

@@ -0,0 +1,94 @@
+import { produce, type Draft } from "immer";
+import type { ObjectType } from "../types/general";
+import type { Listener } from "../types/store";
+
+export class PlcStore<S extends ObjectType> {
+    private state: S;
+    private listeners = new Set<Listener<S>>();
+    private batchQueue = new Set<keyof S | undefined>();
+    private debug: boolean;
+    
+    private isBatching = false
+
+    constructor(initial: S, debug: boolean) {
+        debug = false;
+
+        this.state = initial;
+        this.debug = debug;
+    }
+
+    get<K extends keyof S>(key: K): S[K] {
+        return this.state[key]
+    }
+
+    getState(): S {
+        return this.state
+    }
+
+    set<K extends keyof S>(key: K, value: S[K]) {
+        if (this.state[key] === value) return
+
+        const oldValue = this.state[key]
+        this.state = produce(this.state, draft => {
+            (draft as any)[key] = value
+        })
+
+        if (this.debug) {
+            console.log(`[Store][set] ${String(key)}:`, { oldValue, newValue: value })
+        }
+
+
+        if (this.isBatching) {
+            this.batchQueue.add(key)
+        } else {
+            this.emit(key)
+        }
+    }
+
+    batch(updater: (draft: Draft<S>) => void) {
+        this.isBatching = true
+
+        const nextState = produce(this.state, draft => {
+            updater(draft)
+        })
+
+        if (nextState === this.state) {
+            this.isBatching = false
+            return
+        }
+
+        this.state = nextState
+        this.isBatching = false
+
+        this.batchQueue.forEach(key => this.emit(key))
+        this.batchQueue.clear()
+    }
+
+    subscribe(listener: () => void): () => void
+    subscribe<K extends keyof S>(key: K, listener: () => void): () => void
+    subscribe<K extends keyof S>(keyOrListener: K | (() => void), maybeListener?: () => void): () => void {
+        let listenerObj: Listener<S>
+
+        if (typeof keyOrListener === "function") {
+            listenerObj = { callback: keyOrListener }
+        } else {
+            listenerObj = { key: keyOrListener, callback: maybeListener! }
+        }
+
+        this.listeners.add(listenerObj)
+        return () => {
+            this.listeners.delete(listenerObj)
+        }
+    }
+
+    private emit(changedKey?: keyof S) {
+        this.listeners.forEach(l => {
+            if (!l.key || l.key === changedKey) {
+                if (this.debug) {
+                    console.log(`[Store][emit] key: ${String(changedKey)}`, l)
+                }
+                l.callback()
+            }
+        })
+    }
+}

package/src/plug-code.tsx

@@ -0,0 +1,67 @@
+import { enableMapSet } from "immer";
+import type { ObjectType } from "./types/general";
+import type { FeatureType } from "./types/features";
+import { PlcAPI } from "./core/plcAPI";
+import { useEffect, useMemo, useState } from "react";
+import { PlcStore } from "./core/plcStore";
+
+enableMapSet()
+export function createPlugAndCode<S extends ObjectType>(features: FeatureType<S>[]) {
+    const FeatureHost = ({ api, children }: { api: PlcAPI<any>, children?: React.ReactNode }) => (
+        <>
+            {/* Renderizamos el slot principal */}
+            {api.render("root")}
+            {children}
+        </>
+    )
+
+    function SystemPlcRoot({ api, children }: { api: PlcAPI<any>, children?: React.ReactNode }) {
+        if (!api) return null;
+        return (
+            <FeatureHost api={api}>
+                {children}
+            </FeatureHost>
+        )
+    }
+
+    function useSystemPlc<T extends object>(initialProps: T) {
+
+        const api = useMemo(() => {
+            const store = new PlcStore({}, true);
+            const api = new PlcAPI(store);
+
+            api.createData("root", initialProps);
+
+            for (const feature of features) {
+                feature.setup?.(api as any);
+            }
+
+            return api;
+        }, []);
+
+        useEffect(() => {
+            api.update("root", (draft: any) => {
+                Object.assign(draft, initialProps);
+            });
+        }, [initialProps, api]);
+
+        const useSelector = <Result,>(selector: (state: any) => Result): Result => {
+            const [snap, setSnap] = useState(() => selector(api.getData("root")));
+
+            useEffect(() => {
+                return api.subscribe(() => {
+                    const fullState = api.getData("root");
+                    setSnap(selector(fullState));
+                });
+            }, [selector]);
+
+            return snap;
+        }
+
+        return {
+            api,
+            useSelector
+        }
+    }
+    return { useSystemPlc, SystemPlcRoot }
+}

package/src/types/api.ts

@@ -0,0 +1,2 @@
+
+export type transformerType = { id: string, priority: number, fn: (data: any, context: any) => any }

package/src/types/features.ts

@@ -0,0 +1,7 @@
+import type { PlcAPI } from "../core/plcAPI"
+import type { ObjectType } from "./general"
+
+export type FeatureType<S extends ObjectType> = {
+    name: string
+    setup?: (api: PlcAPI<S>) => void | (() => void),
+}

package/src/types/general.ts

@@ -0,0 +1,2 @@
+
+export type ObjectType = Record<string, any>;

package/src/types/pipeline.ts

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

package/src/types/store.ts

@@ -0,0 +1,2 @@
+
+export type Listener<S> = { key?: keyof S; callback: () => void }