@blac/react 0.0.1

package/dist/blac-react.d.ts

@@ -0,0 +1,29 @@
+import { Blac, BlocBase, BlocClass } from 'blac';
+import React from 'react';
+
+declare const BlacContext: React.Context<Blac | null>;
+
+/**
+ * Keep track of the hierarchy of Blac BlocProvider components, so that
+ * useBloc can find the correct bloc instance.
+ */
+
+interface ProviderItem {
+    id: string;
+    parent?: string;
+    bloc: BlocBase<any>;
+}
+
+interface ExternalStore<S> {
+    subscribe: (onStoreChange: () => void) => () => void;
+    getSnapshot: () => S;
+    getServerSnapshot?: () => S;
+}
+
+type BlocHookData<T extends BlocBase<S>, S> = [value: S, instance: T];
+type BlocHookOptions<T extends BlocBase<S>, S> = {
+    create?: boolean;
+};
+declare const useBloc: <B extends BlocBase<S>, S>(bloc: BlocClass<B> | (() => B), options?: BlocHookOptions<B, S>) => BlocHookData<B, S>;
+
+export { BlacContext, BlocHookData, BlocHookOptions, ExternalStore, ProviderItem, useBloc };

package/dist/blac-react.esm.js

@@ -0,0 +1,152 @@
+import React, { useContext, createContext, useMemo, useSyncExternalStore } from 'react';
+
+/**
+ * Keep track of the hierarchy of Blac BlocProvider components, so that
+ * useBloc can find the correct bloc instance.
+ */
+class BlacReact {
+    blac;
+    blacContext;
+    localContextProvider = React.createContext(null);
+    static pluginKey = 'blacReact';
+    constructor(blac, blacContext) {
+        // treat this as singleton
+        const blacReact = blac.getPluginKey(BlacReact.pluginKey);
+        // new setup
+        this.blac = blac;
+        this.blacContext = blacContext;
+        this.setup();
+        if (blacReact) {
+            return blacReact;
+        }
+    }
+    static getInstance() {
+        const blac = globalThis.blac;
+        if (!blac) {
+            throw new Error('BlacReact: blac instance not found');
+        }
+        const blacReact = blac.getPluginKey(BlacReact.pluginKey);
+        if (!blacReact) {
+            throw new Error('BlacReact: blacReact instance not found');
+        }
+        return blacReact;
+    }
+    setup() {
+        // register blac instance on global object
+        globalThis.blac = this.blac;
+        // add the BlacReact instance to blac
+        this.blac.addPluginKey(BlacReact.pluginKey, this);
+    }
+    useLocalBlocContext() {
+        return useContext(this.localContextProvider);
+    }
+    _contextLocalProviderKey = React.createContext('none');
+    get LocalProvider() {
+        return this._contextLocalProviderKey.Provider;
+    }
+    useLocalProviderKey() {
+        return useContext(this._contextLocalProviderKey);
+    }
+    addLocalBloc = (item) => {
+        this.providerList.push(item);
+    };
+    removeLocalBloc = (id) => {
+        const index = this.providerList.findIndex((i) => i.id === id);
+        if (!index)
+            return;
+        const item = this.providerList[index];
+        item.bloc.dispose();
+        if (index !== -1) {
+            this.providerList.splice(index, 1);
+        }
+    };
+    createProviderId = () => {
+        return Math.random().toString(36).split('.')[1];
+    };
+    providerList = new Array();
+    getLocalBlocForProvider(id, blocClass) {
+        for (const providerItem of this.providerList) {
+            if (providerItem.id === id) {
+                if (providerItem.bloc instanceof blocClass) {
+                    return providerItem.bloc;
+                }
+                let parent = providerItem.parent;
+                while (parent) {
+                    const parentItem = this.providerList.find((i) => i.id === parent);
+                    if (parentItem?.bloc instanceof blocClass) {
+                        return parentItem.bloc;
+                    }
+                    parent = parentItem?.parent;
+                }
+            }
+        }
+        return undefined;
+    }
+}
+
+const BlacContext = createContext(null);
+
+createContext(null);
+
+const externalBlocStore = (bloc) => {
+    return {
+        subscribe: (listener) => {
+            const unSub = bloc.onStateChange(listener);
+            return () => {
+                unSub();
+                bloc.dispose();
+            };
+        },
+        getSnapshot: () => bloc.state,
+    };
+};
+
+// B extends BlocBase<S>,
+const useBloc = (bloc, options = {}) => {
+    const blacReact = BlacReact.getInstance();
+    // const localCtxP = blacReact.useLocalBlocContext();
+    const localProviderKey = blacReact.useLocalProviderKey();
+    const blacInstance = useContext(BlacContext);
+    const resolvedBloc = useMemo(() => {
+        // check if its a create function or a class
+        const isFunction = bloc instanceof Function;
+        const isBloc = isFunction && bloc?.isBlacClass;
+        // if its a create function, call it
+        if (!isBloc && isFunction) {
+            return bloc();
+        }
+        // if its a class
+        if (isFunction && isBloc) {
+            const blocClass = bloc;
+            // check if the bloc is registered in the blac instance
+            if (blacInstance) {
+                const e = blacReact.getLocalBlocForProvider(localProviderKey, blocClass);
+                if (e) {
+                    return e;
+                }
+            }
+            // search in global blocs
+            const globalBloc = blacReact.blac.getBloc(blocClass);
+            if (globalBloc) {
+                return globalBloc;
+            }
+            // if it is not, check if we can create a new instance
+            if (!options.create) {
+                // creating it automatically should be opt-in
+                throw new Error('useBloc: set create to true to create a new bloc when a class constructor is passed');
+            }
+            // create a new instance -- this can cause issues if the constructor expects arguments
+            const constructed = new blocClass();
+            return constructed;
+        }
+    }, []);
+    if (!resolvedBloc) {
+        throw new Error('useBloc: bloc is undefined');
+    }
+    const { subscribe, getSnapshot } = useMemo(() => externalBlocStore(resolvedBloc), [resolvedBloc]);
+    const state = useSyncExternalStore(subscribe, getSnapshot);
+    return [state, resolvedBloc];
+};
+
+export { BlacContext, useBloc };
+//# sourceMappingURL=blac-react.esm.js.map

package/dist/blac-react.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"blac-react.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/blac-react.js

@@ -0,0 +1,155 @@
+'use strict';
+
+var React = require('react');
+
+/**
+ * Keep track of the hierarchy of Blac BlocProvider components, so that
+ * useBloc can find the correct bloc instance.
+ */
+class BlacReact {
+    blac;
+    blacContext;
+    localContextProvider = React.createContext(null);
+    static pluginKey = 'blacReact';
+    constructor(blac, blacContext) {
+        // treat this as singleton
+        const blacReact = blac.getPluginKey(BlacReact.pluginKey);
+        // new setup
+        this.blac = blac;
+        this.blacContext = blacContext;
+        this.setup();
+        if (blacReact) {
+            return blacReact;
+        }
+    }
+    static getInstance() {
+        const blac = globalThis.blac;
+        if (!blac) {
+            throw new Error('BlacReact: blac instance not found');
+        }
+        const blacReact = blac.getPluginKey(BlacReact.pluginKey);
+        if (!blacReact) {
+            throw new Error('BlacReact: blacReact instance not found');
+        }
+        return blacReact;
+    }
+    setup() {
+        // register blac instance on global object
+        globalThis.blac = this.blac;
+        // add the BlacReact instance to blac
+        this.blac.addPluginKey(BlacReact.pluginKey, this);
+    }
+    useLocalBlocContext() {
+        return React.useContext(this.localContextProvider);
+    }
+    _contextLocalProviderKey = React.createContext('none');
+    get LocalProvider() {
+        return this._contextLocalProviderKey.Provider;
+    }
+    useLocalProviderKey() {
+        return React.useContext(this._contextLocalProviderKey);
+    }
+    addLocalBloc = (item) => {
+        this.providerList.push(item);
+    };
+    removeLocalBloc = (id) => {
+        const index = this.providerList.findIndex((i) => i.id === id);
+        if (!index)
+            return;
+        const item = this.providerList[index];
+        item.bloc.dispose();
+        if (index !== -1) {
+            this.providerList.splice(index, 1);
+        }
+    };
+    createProviderId = () => {
+        return Math.random().toString(36).split('.')[1];
+    };
+    providerList = new Array();
+    getLocalBlocForProvider(id, blocClass) {
+        for (const providerItem of this.providerList) {
+            if (providerItem.id === id) {
+                if (providerItem.bloc instanceof blocClass) {
+                    return providerItem.bloc;
+                }
+                let parent = providerItem.parent;
+                while (parent) {
+                    const parentItem = this.providerList.find((i) => i.id === parent);
+                    if (parentItem?.bloc instanceof blocClass) {
+                        return parentItem.bloc;
+                    }
+                    parent = parentItem?.parent;
+                }
+            }
+        }
+        return undefined;
+    }
+}
+
+const BlacContext = React.createContext(null);
+
+React.createContext(null);
+
+const externalBlocStore = (bloc) => {
+    return {
+        subscribe: (listener) => {
+            const unSub = bloc.onStateChange(listener);
+            return () => {
+                unSub();
+                bloc.dispose();
+            };
+        },
+        getSnapshot: () => bloc.state,
+    };
+};
+
+// B extends BlocBase<S>,
+const useBloc = (bloc, options = {}) => {
+    const blacReact = BlacReact.getInstance();
+    // const localCtxP = blacReact.useLocalBlocContext();
+    const localProviderKey = blacReact.useLocalProviderKey();
+    const blacInstance = React.useContext(BlacContext);
+    const resolvedBloc = React.useMemo(() => {
+        // check if its a create function or a class
+        const isFunction = bloc instanceof Function;
+        const isBloc = isFunction && bloc?.isBlacClass;
+        // if its a create function, call it
+        if (!isBloc && isFunction) {
+            return bloc();
+        }
+        // if its a class
+        if (isFunction && isBloc) {
+            const blocClass = bloc;
+            // check if the bloc is registered in the blac instance
+            if (blacInstance) {
+                const e = blacReact.getLocalBlocForProvider(localProviderKey, blocClass);
+                if (e) {
+                    return e;
+                }
+            }
+            // search in global blocs
+            const globalBloc = blacReact.blac.getBloc(blocClass);
+            if (globalBloc) {
+                return globalBloc;
+            }
+            // if it is not, check if we can create a new instance
+            if (!options.create) {
+                // creating it automatically should be opt-in
+                throw new Error('useBloc: set create to true to create a new bloc when a class constructor is passed');
+            }
+            // create a new instance -- this can cause issues if the constructor expects arguments
+            const constructed = new blocClass();
+            return constructed;
+        }
+    }, []);
+    if (!resolvedBloc) {
+        throw new Error('useBloc: bloc is undefined');
+    }
+    const { subscribe, getSnapshot } = React.useMemo(() => externalBlocStore(resolvedBloc), [resolvedBloc]);
+    const state = React.useSyncExternalStore(subscribe, getSnapshot);
+    return [state, resolvedBloc];
+};
+
+exports.BlacContext = BlacContext;
+exports.useBloc = useBloc;
+//# sourceMappingURL=blac-react.js.map

package/dist/blac-react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"blac-react.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@blac/react",
+  "version": "0.0.1",
+  "license": "MIT",
+  "main": "dist/blac-react.js",
+  "module": "dist/blac-react.esm.js",
+  "typings": "dist/blac-react.d.ts",
+  "type": "module",
+  "keywords": [
+    "react",
+    "typescript",
+    "rxjs",
+    "state-management",
+    "reactjs",
+    "observer-pattern",
+    "bloc",
+    "bloc-pattern"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "rollup -c rollup.config.lib.js",
+    "prettier": "prettier --write ./src",
+    "test": "vitest run",
+    "test:watch": "vitest --watch",
+    "coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "blac": "*"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^3.1.0",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "vite": "^4.1.4",
+    "vitest": "^0.29.1"
+  }
+}