plug-code 1.2.0 → 2.0.1

package/src/core/plcAPI.tsx

@@ -1,393 +0,0 @@
-import { produce } from "immer";
-import type { ObjectType } from "../types/general";
-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;
-
-type CommandKey = keyof CommandRegistry | (string & {});
-type CommandPayload<K> = K extends keyof CommandRegistry
-    ? (CommandRegistry[K] extends { payload: infer P } ? P : any)
-    : any;
-type CommandResult<K> = K extends keyof CommandRegistry
-    ? (CommandRegistry[K] extends { result: infer R } ? R : any)
-    : any;
-
-type SlotKey = keyof SlotRegistry | (string & {});
-
-export class PlcAPI<S extends ObjectType> {
-    private store: PlcStore<S>
-    private pipeline: PlcPipeline<S>
-    private substores = new Map<string, any>()
-
-    private transformers = new Map<string, transformerType[]>()
-    private commands = new Map<string, CommandFn>();
-
-    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,
-        callback: (newValue: T, oldValue: T) => void
-    ): () => void {
-        let previousValue = selector(this.getData(storeKey));
-        const unsubscribe = this.store.subscribe(storeKey as any, () => {
-            const currentData = this.getData(storeKey);
-            const newValue = selector(currentData);
-
-            if (newValue !== previousValue) {
-                const old = previousValue;
-                previousValue = newValue;
-                callback(newValue, old);
-            }
-        });
-
-        return unsubscribe;
-    }
-
-    override<K extends string>(key: K & "root", data: any, slot?: string) {
-        this.substores.set(key, data);
-        this.store.set(key as any, data);
-
-        if (slot) {
-            this.invalidate(slot);
-        }
-    }
-
-    replace<K extends string>(key: K & "root", data: Partial<any>, slot?: string) {
-        const currentSub = this.substores.get(key) || {};
-        const newSub = { ...currentSub, ...data };
-
-        this.substores.set(key, newSub);
-        this.store.set(key as any, newSub);
-
-        if (slot) {
-            this.invalidate(slot);
-        }
-    }
-
-    derive<K extends string>(
-        outputKey: K,
-        dependencies: string[],
-        calculator: () => any
-    ) {
-        let lastValue: any
-        let isComputing = false
-
-        let scheduled = false
-
-        const scheduleUpdate = () => {
-            if (scheduled) return
-            scheduled = true
-
-            queueMicrotask(() => {
-                scheduled = false
-                runCompute()
-            })
-        }
-
-        const runCompute = () => {
-            if (isComputing) return
-
-            isComputing = true
-            try {
-                const result = calculator()
-                lastValue = result
-                this.replace("root" as any, { [outputKey]: result })
-            } finally {
-                isComputing = false
-            }
-        }
-
-
-        runCompute()
-
-        dependencies.forEach(dep => {
-            this.store.subscribe(dep as any, () => {
-                if (isComputing) return
-                scheduleUpdate()
-            })
-        })
-
-        return () => lastValue
-    }
-
-    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 = (props: any) => {
-                const [storeData, setStoreData] = useState(() => this.substores.get(dependencyKey));
-
-                useEffect(() => {
-                    const unsubscribe = this.store.subscribe(dependencyKey as any, () => {
-                        setStoreData(this.substores.get(dependencyKey));
-                    });
-                    return unsubscribe;
-                }, []);
-
-                return <>{node(storeData, props)}</>;
-            };
-
-            this.store.batch(() => {
-                this.pipeline.register(slot as string, (p: any) => <ConnectedWrapper {...p} />);
-            });
-        }
-        else {
-            this.store.batch(() => {
-                this.pipeline.register(slot as string, node);
-            });
-        }
-    }
-
-    scope<T = any>(key: string | "root"): {
-        get: () => T;
-        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, slot?: string, triggerKey?: string) => {
-                this.update(key as any, updater, slot, triggerKey);
-            },
-
-            connect: <P = {}, R = any>(
-                selector: (data: T, props: P) => R
-            ) => {
-                return this.connect(key, selector);
-            },
-
-            render: (slotName: SlotKey) => {
-                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 = {}) => {
-                const currentData = this.getData(key);
-                return this.receive(key as any, currentData, context);
-            },
-
-            root: this
-        };
-    }
-
-    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;
-
-                const [slice, setSlice] = useState<ResultProps>(() => {
-                    const data = this.substores.get(key);
-                    return selector(data, props);
-                });
-
-                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 (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;
-        };
-    }
-
-    wrap(slot: SlotKey, fn: (next: () => React.ReactNode) => () => React.ReactNode) {
-        this.store.batch(() => {
-            this.pipeline.wrap(slot as string, fn)
-        })
-    }
-
-    after(slot: SlotKey, node: () => React.ReactNode) {
-        this.store.batch(() => {
-            this.pipeline.register(slot as string, node)
-        })
-    }
-
-    render(slot: SlotKey, props?: any) {
-        return this.pipeline.render(slot as string, props)
-    }
-
-    invalidate(slot?: SlotKey) {
-        this.pipeline.invalidate(slot as string)
-    }
-
-    send<K extends ChannelKey>(
-        channel: K,
-        id: string,
-        fn: (data: ChannelData<K>, context: any) => ChannelData<K>,
-        priority: number = 0
-    ) {
-        const channelStr = channel as string;
-        if (!this.transformers.has(channelStr)) {
-            this.transformers.set(channelStr, []);
-        }
-
-        const channelList = this.transformers.get(channelStr)!;
-
-        const existingIdx = channelList.findIndex(t => t.id === id);
-        if (existingIdx >= 0) {
-            channelList[existingIdx] = { id, priority, fn };
-        } else {
-            channelList.push({ id, priority, fn });
-        }
-
-        channelList.sort((a, b) => a.priority - b.priority);
-    }
-
-    receive<K extends ChannelKey>(
-        channel: K,
-        initialData: ChannelData<K>,
-        context: any = {}
-    ): ChannelData<K> {
-        let currentData = initialData;
-        const channelList = this.transformers.get(channel as string) || [];
-
-        for (const transformer of channelList) {
-            try {
-                currentData = transformer.fn(currentData, context);
-            } catch (error) {
-                console.error(`[PlcAPI] Error in transform '${channel as string}/${transformer.id}':`, error);
-            }
-        }
-
-        return currentData as ChannelData<K>;
-    }
-
-    registerCommand<K extends CommandKey>(
-        id: K,
-        fn: CommandFn<CommandPayload<K>, CommandResult<K>>
-    ) {
-        if (this.commands.has(id as string)) {
-            console.warn(`[PlcAPI] Overwriting command '${id as string}'`);
-        }
-        this.commands.set(id as string, fn as any);
-    }
-
-    wrapCommand<K extends CommandKey>(
-        id: K,
-        wrapper: (next: CommandFn<CommandPayload<K>, CommandResult<K>>) => CommandFn<CommandPayload<K>, CommandResult<K>>
-    ) {
-        const currentFn = this.commands.get(id as string);
-        if (!currentFn) {
-            console.error(`[PlcAPI] Cannot wrap '${id as string}', command does not exist.`);
-            return;
-        }
-        this.commands.set(id as string, wrapper(currentFn) as any);
-    }
-
-    async execute<K extends CommandKey>(
-        id: K,
-        payload?: CommandPayload<K>
-    ): Promise<CommandResult<K>> {
-        const fn = this.commands.get(id as string);
-        if (!fn) {
-            throw new Error(`[PlcAPI] Command '${id as string}' not found.`);
-        }
-
-        try {
-            return await fn(payload);
-        } catch (error) {
-            console.error(`[PlcAPI] Error executing '${id as string}':`, error);
-            throw error;
-        }
-    }
-
-    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, triggerKey?: 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)
-        }
-
-        if (triggerKey && triggerKey !== key) {
-            const triggerData = this.substores.get(triggerKey);
-
-            if (triggerData) {
-                const newTriggerRef = { ...triggerData };
-                this.substores.set(triggerKey, newTriggerRef);
-                this.store.set(triggerKey as any, newTriggerRef);
-            }
-        }
-    }
-}

package/src/core/plcPipeline.tsx

@@ -1,87 +0,0 @@
-import React, { useContext } 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) => {
-            const SlotBridge = () => {
-                const dynamicProps = useContext(ScopeContext);
-                return <React.Fragment>{fn(dynamicProps)}</React.Fragment>;
-            };
-
-            return <SlotBridge key={i} />;
-        }) || [];
-
-        this.cache.set(slot, nodes);
-    }
-}

package/src/core/plcStore.tsx

@@ -1,94 +0,0 @@
-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/helpers/core.ts

@@ -1,10 +0,0 @@
-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/plug-code.tsx

@@ -1,64 +0,0 @@
-import { enableMapSet } from "immer";
-import type { ObjectType } from "./types/general";
-import { PlcAPI } from "./core/plcAPI";
-import { useEffect, useMemo, useState } from "react";
-import { PlcStore } from "./core/plcStore";
-
-enableMapSet();
-
-export function createPlugAndCode<S extends ObjectType>(
-    setupSystem: (api: PlcAPI<S>) => void
-) {
-    const FeatureHost = ({ api, children }: { api: PlcAPI<any>, children?: React.ReactNode }) => (
-        <>
-            {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);
-
-            setupSystem(api as unknown as PlcAPI<S>);
-
-            return api;
-        }, []);
-
-        useEffect(() => {
-            api.override("root", 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

@@ -1,8 +0,0 @@
-
-export type transformerType = {
-    id: string,
-    priority: number,
-    fn: (data: any, context: any) => any
-}
-
-export type CommandFn<T = any, R = any> = (payload: T) => Promise<R> | R;

package/src/types/features.ts

@@ -1,7 +0,0 @@
-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

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

package/src/types/pipeline.ts

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

package/src/types/registry.ts

@@ -1,4 +0,0 @@
-
-export interface ChannelRegistry {}
-export interface CommandRegistry {}
-export interface SlotRegistry {}

package/src/types/store.ts

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