@blac/react 0.0.16 → 0.0.18

package/dist/blac-react.d.ts

@@ -1,31 +1,28 @@
-import { Blac, BlocBase, ValueType, BlocConstructor } from 'blac';
-import React, { FC, ReactNode } from 'react';
-
-declare const BlacApp: FC<{
-    children: ReactNode;
-    blac?: Blac<any>;
-}>;
-
-declare class BlacReact {
-    static pluginKey: string;
-    blac: Blac<any>;
-    blacContext: React.Context<Blac<any>>;
-    constructor(blac: Blac<any>, blacContext: React.Context<Blac<any>>);
-    static getInstance(throwError?: boolean): BlacReact;
-    setup(): void;
-}
+import { BlocBase, ValueType, BlocConstructor, BlocInstanceId, CubitPropsType } from 'blac';
 
 interface ExternalStore<B extends BlocBase<any>> {
     subscribe: (onStoreChange: () => void) => () => void;
     getSnapshot: () => ValueType<B>;
     getServerSnapshot?: () => ValueType<B>;
 }
-declare const externalBlocStore: <B extends BlocBase<any>>(bloc: B) => ExternalStore<B>;
+declare const externalBlocStore: <B extends BlocBase<any>>(bloc: B, dependencySelector: (state: ValueType<B>) => unknown) => ExternalStore<B>;
 
 type BlocHookData<B extends BlocBase<S>, S> = [
     value: ValueType<B>,
     instance: B
 ];
-declare const useBloc: <B extends BlocBase<S>, S>(bloc: BlocConstructor<B>) => BlocHookData<B, S>;
+interface BlocHookOptions<B extends BlocBase<S>, S> {
+    id?: string;
+    dependencySelector?: (state: ValueType<B>) => unknown;
+    props?: CubitPropsType<B>;
+}
+type BlocHookDependencySelector<B extends BlocBase<S>, S> = (state: ValueType<B>) => unknown;
+declare class UseBlocClass {
+    static useBloc<B extends BlocBase<S>, S>(bloc: BlocConstructor<B>): BlocHookData<B, S>;
+    static useBloc<B extends BlocBase<S>, S>(bloc: BlocConstructor<B>, options: BlocHookOptions<B, S>): BlocHookData<B, S>;
+    static useBloc<B extends BlocBase<S>, S>(bloc: BlocConstructor<B>, depsSelector: BlocHookDependencySelector<B, S>): BlocHookData<B, S>;
+    static useBloc<B extends BlocBase<S>, S>(bloc: BlocConstructor<B>, instanceId: BlocInstanceId): BlocHookData<B, S>;
+}
+declare const useBloc: typeof UseBlocClass.useBloc;
 
-export { BlacApp, BlacReact, ExternalStore, externalBlocStore, useBloc };
+export { externalBlocStore, useBloc };

package/dist/blac-react.esm.js

@@ -1,112 +1,69 @@
+import { useMemo, useSyncExternalStore, useEffect } from 'react';
 import { Blac } from 'blac';
-import React, { createContext, useMemo, useContext, useSyncExternalStore } from 'react';
 
-class BlacReact {
-    static pluginKey = "blacReact";
-    blac;
-    blacContext;
-    constructor(blac, blacContext) {
-        const blacReact = blac.getPluginKey(BlacReact.pluginKey);
-        // new setup
-        this.blac = blac;
-        this.blacContext = blacContext;
-        this.setup();
-        if (blacReact) {
-            return blacReact;
-        }
-    }
-    static getInstance(throwError = true) {
-        // const blac = (globalThis as any).blac;
-        const blac = BlacContext._currentValue;
-        if (!blac) {
-            throw new Error("BlacReact: blac instance not found, the <BlacApp> provider component might be missing");
-        }
-        const blacReact = blac.getPluginKey(BlacReact.pluginKey);
-        if (!blacReact) {
-            throw new Error("BlacReact: blacReact instance not found");
-        }
-        return blacReact;
-    }
-    setup() {
-        // (globalThis as any).blac = this.blac;
-        this.blac.addPluginKey(BlacReact.pluginKey, this);
-    }
-}
-
-const BlacContext = createContext(null);
-const BlacApp = (props) => {
-    const { children, blac } = props;
-    const blacInstance = useMemo(() => blac ?? new Blac(), [blac]);
-    const blacApp = useMemo(() => new BlacReact(blacInstance, BlacContext), [blacInstance]);
-    if (!blacApp) {
-        throw new Error("BlacReact failed to initialize");
-    }
-    return React.createElement(BlacContext.Provider, { value: blacInstance }, children);
-};
-
-const externalBlocStore = (bloc) => {
+var externalBlocStore = function (bloc, dependencySelector) {
+    var lastDependencyCheck = dependencySelector(bloc.state);
     return {
-        subscribe: (listener) => {
-            const unSub = bloc.onStateChange(listener);
-            return () => {
+        subscribe: function (listener) {
+            var unSub = bloc.addEventListenerStateChange(function (data) {
+                var newDependencyCheck = dependencySelector(data);
+                if (newDependencyCheck !== lastDependencyCheck) {
+                    lastDependencyCheck = newDependencyCheck;
+                    listener();
+                }
+            });
+            return function () {
                 unSub();
             };
         },
-        getSnapshot: () => bloc.state
+        getSnapshot: function () { return bloc.state; },
+        getServerSnapshot: function () { return bloc.state; }
     };
 };
 
-const resolveBloc = ({ bloc, blacInstance, blacReact
-// create
- }) => {
-    // check if its a create function or a class
-    const isFunction = bloc instanceof Function;
-    const isBloc = isFunction && bloc?.isBlacClass;
-    const isLiveBloc = !isFunction &&
-        typeof bloc === "object" &&
-        bloc?.isBlacLive;
-    // if it is a create function, call it
-    if (!isBloc && isFunction) {
-        return bloc();
-    }
-    if (bloc?.isBlacLive) {
-        return bloc;
-    }
-    // if it is a class
-    const blocClass = bloc;
-    if (isLiveBloc) {
-        return bloc;
-    }
-    const registered = blacReact.blac.getBloc(blocClass);
-    if (registered) {
-        return registered;
-    }
-};
-const useResolvedBloc = (bloc) => {
-    const blacReact = BlacReact.getInstance();
-    const blacInstance = useContext(BlacContext);
-    const resolvedBloc = useMemo(() => {
-        if (!blacReact) {
-            return undefined;
-        }
-        return resolveBloc({
-            bloc,
-            blacInstance,
-            blacReact
-        });
-    }, []);
-    return resolvedBloc;
+var useResolvedBloc = function (bloc, options) {
+    if (options === void 0) { options = {}; }
+    return useMemo(function () { return Blac.getInstance().getBloc(bloc, {
+        id: options.id,
+        props: options.props
+    }); }, [options.id]);
 };
 
-const useBloc = (bloc) => {
-    const resolvedBloc = useResolvedBloc(bloc);
-    if (!resolvedBloc) {
-        throw new Error(`useBloc: could not resolve: ${bloc.name || bloc}`);
+var UseBlocClass = /** @class */ (function () {
+    function UseBlocClass() {
     }
-    const { subscribe, getSnapshot } = useMemo(() => externalBlocStore(resolvedBloc), [resolvedBloc]);
-    const state = useSyncExternalStore(subscribe, getSnapshot);
-    return [state, resolvedBloc];
-};
+    UseBlocClass.useBloc = function (bloc, options) {
+        var _a, _b;
+        // default options
+        var dependencySelector = function (state) { return state; };
+        var blocId;
+        var props = {};
+        // parse options
+        if (typeof options === "function") {
+            dependencySelector = options;
+        }
+        if (typeof options === "string") {
+            blocId = options;
+        }
+        if (typeof options === "object") {
+            dependencySelector = (_a = options.dependencySelector) !== null && _a !== void 0 ? _a : dependencySelector;
+            blocId = options.id;
+            props = (_b = options.props) !== null && _b !== void 0 ? _b : props;
+        }
+        var resolvedBloc = useResolvedBloc(bloc, { id: blocId, props: props });
+        if (!resolvedBloc) {
+            throw new Error("useBloc: could not resolve: ".concat(bloc.name || bloc));
+        }
+        var _c = useMemo(function () { return externalBlocStore(resolvedBloc, dependencySelector); }, [resolvedBloc]), subscribe = _c.subscribe, getSnapshot = _c.getSnapshot, getServerSnapshot = _c.getServerSnapshot;
+        var state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+        useEffect(function () {
+            resolvedBloc.props = props;
+        }, [props]);
+        return [state, resolvedBloc];
+    };
+    return UseBlocClass;
+}());
+var useBloc = UseBlocClass.useBloc;
 
-export { BlacApp, BlacReact, externalBlocStore, useBloc };
+export { externalBlocStore, useBloc };
 //# sourceMappingURL=blac-react.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"blac-react.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"blac-react.esm.js","sources":["../src/externalBlocStore.ts","../src/useResolvedBloc.ts","../src/useBloc.tsx"],"sourcesContent":["import { BlocBase, ValueType } from \"blac\";\n\nexport interface ExternalStore<B extends BlocBase<any>> {\n  subscribe: (onStoreChange: () => void) => () => void;\n  getSnapshot: () => ValueType<B>;\n  getServerSnapshot?: () => ValueType<B>;\n}\n\nconst externalBlocStore = <B extends BlocBase<any>>(\n  bloc: B,\n  dependencySelector: (state: ValueType<B>) => unknown\n): ExternalStore<B> => {\n  let lastDependencyCheck = dependencySelector(bloc.state);\n  return {\n    subscribe: (listener: () => void) => {\n      const unSub = bloc.addEventListenerStateChange(data => {\n        const newDependencyCheck = dependencySelector(data);\n        if (newDependencyCheck !== lastDependencyCheck) {\n          lastDependencyCheck = newDependencyCheck;\n          listener();\n        }\n      });\n      return () => {\n        unSub();\n      };\n    },\n    getSnapshot: (): ValueType<B> => bloc.state,\n    getServerSnapshot: (): ValueType<B> => bloc.state\n  };\n};\n\nexport default externalBlocStore;\n","import { Blac, BlocBase, BlocConstructor, BlocInstanceId, BlocProps } from \"blac\";\nimport { useMemo } from \"react\";\n\nconst useResolvedBloc = <B extends BlocBase<S>, S>(\n  bloc: BlocConstructor<B>,\n  options: { id?: BlocInstanceId; props?: BlocProps } = {}\n): B => useMemo(() => Blac.getInstance().getBloc(bloc, {\n  id: options.id,\n  props: options.props\n}), [options.id]);\n\nexport default useResolvedBloc;\n","import { BlocBase, BlocConstructor, BlocInstanceId, BlocProps, CubitPropsType, ValueType } from \"blac\";\nimport { useEffect, useMemo, useSyncExternalStore } from \"react\";\nimport externalBlocStore, { ExternalStore } from \"./externalBlocStore\";\nimport useResolvedBloc from \"./useResolvedBloc\";\n\nexport type BlocHookData<B extends BlocBase<S>, S> = [\n  value: ValueType<B>,\n  instance: B,\n];\n\n\nexport interface BlocHookOptions<B extends BlocBase<S>, S> {\n  id?: string;\n  dependencySelector?: (state: ValueType<B>) => unknown;\n  props?: CubitPropsType<B>;\n}\n\nexport type BlocHookDependencySelector<B extends BlocBase<S>, S> = (state: ValueType<B>) => unknown;\n\nclass UseBlocClass {\n  static useBloc<B extends BlocBase<S>, S>(\n    bloc: BlocConstructor<B>\n  ): BlocHookData<B, S>;\n  static useBloc<B extends BlocBase<S>, S>(\n    bloc: BlocConstructor<B>,\n    options: BlocHookOptions<B, S>\n  ): BlocHookData<B, S>;\n  static useBloc<B extends BlocBase<S>, S>(\n    bloc: BlocConstructor<B>,\n    depsSelector: BlocHookDependencySelector<B, S>\n  ): BlocHookData<B, S>;\n  static useBloc<B extends BlocBase<S>, S>(\n    bloc: BlocConstructor<B>,\n    instanceId: BlocInstanceId\n  ): BlocHookData<B, S>;\n  static useBloc<B extends BlocBase<S>, S>(\n    bloc: BlocConstructor<B>,\n    options?: BlocHookOptions<B, S> | BlocHookDependencySelector<B, S> | BlocInstanceId\n  ): BlocHookData<B, S> {\n    // default options\n    let dependencySelector: BlocHookDependencySelector<B, S> = (state: ValueType<B>) => state;\n    let blocId: BlocInstanceId | undefined;\n    let props: BlocProps = {};\n\n    // parse options\n    if (typeof options === \"function\") {\n      dependencySelector = options;\n    }\n\n    if (typeof options === \"string\") {\n      blocId = options;\n    }\n\n    if (typeof options === \"object\") {\n      dependencySelector = options.dependencySelector ?? dependencySelector;\n      blocId = options.id;\n      props = options.props ?? props;\n    }\n\n\n    const resolvedBloc = useResolvedBloc<B, S>(bloc, { id: blocId, props });\n\n    if (!resolvedBloc) {\n      throw new Error(`useBloc: could not resolve: ${bloc.name || bloc}`);\n    }\n\n    const { subscribe, getSnapshot, getServerSnapshot } = useMemo<ExternalStore<B>>(\n      () => externalBlocStore(resolvedBloc, dependencySelector),\n      [resolvedBloc]\n    );\n\n    const state = useSyncExternalStore<ValueType<B>>(subscribe, getSnapshot, getServerSnapshot);\n\n    useEffect(() => {\n      resolvedBloc.props = props;\n    }, [props]);\n\n    return [state, resolvedBloc];\n  }\n}\n\nconst useBloc = UseBlocClass.useBloc;\n\nexport default useBloc;\n"],"names":[],"mappings":"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"}

package/dist/blac-react.js

@@ -1,117 +1,72 @@
 'use strict';
 
+var react = require('react');
 var blac = require('blac');
-var React = require('react');
 
-class BlacReact {
-    static pluginKey = "blacReact";
-    blac;
-    blacContext;
-    constructor(blac, blacContext) {
-        const blacReact = blac.getPluginKey(BlacReact.pluginKey);
-        // new setup
-        this.blac = blac;
-        this.blacContext = blacContext;
-        this.setup();
-        if (blacReact) {
-            return blacReact;
-        }
-    }
-    static getInstance(throwError = true) {
-        // const blac = (globalThis as any).blac;
-        const blac = BlacContext._currentValue;
-        if (!blac) {
-            throw new Error("BlacReact: blac instance not found, the <BlacApp> provider component might be missing");
-        }
-        const blacReact = blac.getPluginKey(BlacReact.pluginKey);
-        if (!blacReact) {
-            throw new Error("BlacReact: blacReact instance not found");
-        }
-        return blacReact;
-    }
-    setup() {
-        // (globalThis as any).blac = this.blac;
-        this.blac.addPluginKey(BlacReact.pluginKey, this);
-    }
-}
-
-const BlacContext = React.createContext(null);
-const BlacApp = (props) => {
-    const { children, blac: blac$1 } = props;
-    const blacInstance = React.useMemo(() => blac$1 ?? new blac.Blac(), [blac$1]);
-    const blacApp = React.useMemo(() => new BlacReact(blacInstance, BlacContext), [blacInstance]);
-    if (!blacApp) {
-        throw new Error("BlacReact failed to initialize");
-    }
-    return React.createElement(BlacContext.Provider, { value: blacInstance }, children);
-};
-
-const externalBlocStore = (bloc) => {
+var externalBlocStore = function (bloc, dependencySelector) {
+    var lastDependencyCheck = dependencySelector(bloc.state);
     return {
-        subscribe: (listener) => {
-            const unSub = bloc.onStateChange(listener);
-            return () => {
+        subscribe: function (listener) {
+            var unSub = bloc.addEventListenerStateChange(function (data) {
+                var newDependencyCheck = dependencySelector(data);
+                if (newDependencyCheck !== lastDependencyCheck) {
+                    lastDependencyCheck = newDependencyCheck;
+                    listener();
+                }
+            });
+            return function () {
                 unSub();
             };
         },
-        getSnapshot: () => bloc.state
+        getSnapshot: function () { return bloc.state; },
+        getServerSnapshot: function () { return bloc.state; }
     };
 };
 
-const resolveBloc = ({ bloc, blacInstance, blacReact
-// create
- }) => {
-    // check if its a create function or a class
-    const isFunction = bloc instanceof Function;
-    const isBloc = isFunction && bloc?.isBlacClass;
-    const isLiveBloc = !isFunction &&
-        typeof bloc === "object" &&
-        bloc?.isBlacLive;
-    // if it is a create function, call it
-    if (!isBloc && isFunction) {
-        return bloc();
-    }
-    if (bloc?.isBlacLive) {
-        return bloc;
-    }
-    // if it is a class
-    const blocClass = bloc;
-    if (isLiveBloc) {
-        return bloc;
-    }
-    const registered = blacReact.blac.getBloc(blocClass);
-    if (registered) {
-        return registered;
-    }
-};
-const useResolvedBloc = (bloc) => {
-    const blacReact = BlacReact.getInstance();
-    const blacInstance = React.useContext(BlacContext);
-    const resolvedBloc = React.useMemo(() => {
-        if (!blacReact) {
-            return undefined;
-        }
-        return resolveBloc({
-            bloc,
-            blacInstance,
-            blacReact
-        });
-    }, []);
-    return resolvedBloc;
+var useResolvedBloc = function (bloc, options) {
+    if (options === void 0) { options = {}; }
+    return react.useMemo(function () { return blac.Blac.getInstance().getBloc(bloc, {
+        id: options.id,
+        props: options.props
+    }); }, [options.id]);
 };
 
-const useBloc = (bloc) => {
-    const resolvedBloc = useResolvedBloc(bloc);
-    if (!resolvedBloc) {
-        throw new Error(`useBloc: could not resolve: ${bloc.name || bloc}`);
+var UseBlocClass = /** @class */ (function () {
+    function UseBlocClass() {
     }
-    const { subscribe, getSnapshot } = React.useMemo(() => externalBlocStore(resolvedBloc), [resolvedBloc]);
-    const state = React.useSyncExternalStore(subscribe, getSnapshot);
-    return [state, resolvedBloc];
-};
+    UseBlocClass.useBloc = function (bloc, options) {
+        var _a, _b;
+        // default options
+        var dependencySelector = function (state) { return state; };
+        var blocId;
+        var props = {};
+        // parse options
+        if (typeof options === "function") {
+            dependencySelector = options;
+        }
+        if (typeof options === "string") {
+            blocId = options;
+        }
+        if (typeof options === "object") {
+            dependencySelector = (_a = options.dependencySelector) !== null && _a !== void 0 ? _a : dependencySelector;
+            blocId = options.id;
+            props = (_b = options.props) !== null && _b !== void 0 ? _b : props;
+        }
+        var resolvedBloc = useResolvedBloc(bloc, { id: blocId, props: props });
+        if (!resolvedBloc) {
+            throw new Error("useBloc: could not resolve: ".concat(bloc.name || bloc));
+        }
+        var _c = react.useMemo(function () { return externalBlocStore(resolvedBloc, dependencySelector); }, [resolvedBloc]), subscribe = _c.subscribe, getSnapshot = _c.getSnapshot, getServerSnapshot = _c.getServerSnapshot;
+        var state = react.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+        react.useEffect(function () {
+            resolvedBloc.props = props;
+        }, [props]);
+        return [state, resolvedBloc];
+    };
+    return UseBlocClass;
+}());
+var useBloc = UseBlocClass.useBloc;
 
-exports.BlacApp = BlacApp;
-exports.BlacReact = BlacReact;
 exports.externalBlocStore = externalBlocStore;
 exports.useBloc = useBloc;
 //# sourceMappingURL=blac-react.js.map

package/dist/blac-react.js.map

@@ -1 +1 @@
-{"version":3,"file":"blac-react.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"blac-react.js","sources":["../src/externalBlocStore.ts","../src/useResolvedBloc.ts","../src/useBloc.tsx"],"sourcesContent":["import { BlocBase, ValueType } from \"blac\";\n\nexport interface ExternalStore<B extends BlocBase<any>> {\n  subscribe: (onStoreChange: () => void) => () => void;\n  getSnapshot: () => ValueType<B>;\n  getServerSnapshot?: () => ValueType<B>;\n}\n\nconst externalBlocStore = <B extends BlocBase<any>>(\n  bloc: B,\n  dependencySelector: (state: ValueType<B>) => unknown\n): ExternalStore<B> => {\n  let lastDependencyCheck = dependencySelector(bloc.state);\n  return {\n    subscribe: (listener: () => void) => {\n      const unSub = bloc.addEventListenerStateChange(data => {\n        const newDependencyCheck = dependencySelector(data);\n        if (newDependencyCheck !== lastDependencyCheck) {\n          lastDependencyCheck = newDependencyCheck;\n          listener();\n        }\n      });\n      return () => {\n        unSub();\n      };\n    },\n    getSnapshot: (): ValueType<B> => bloc.state,\n    getServerSnapshot: (): ValueType<B> => bloc.state\n  };\n};\n\nexport default externalBlocStore;\n","import { Blac, BlocBase, BlocConstructor, BlocInstanceId, BlocProps } from \"blac\";\nimport { useMemo } from \"react\";\n\nconst useResolvedBloc = <B extends BlocBase<S>, S>(\n  bloc: BlocConstructor<B>,\n  options: { id?: BlocInstanceId; props?: BlocProps } = {}\n): B => useMemo(() => Blac.getInstance().getBloc(bloc, {\n  id: options.id,\n  props: options.props\n}), [options.id]);\n\nexport default useResolvedBloc;\n","import { BlocBase, BlocConstructor, BlocInstanceId, BlocProps, CubitPropsType, ValueType } from \"blac\";\nimport { useEffect, useMemo, useSyncExternalStore } from \"react\";\nimport externalBlocStore, { ExternalStore } from \"./externalBlocStore\";\nimport useResolvedBloc from \"./useResolvedBloc\";\n\nexport type BlocHookData<B extends BlocBase<S>, S> = [\n  value: ValueType<B>,\n  instance: B,\n];\n\n\nexport interface BlocHookOptions<B extends BlocBase<S>, S> {\n  id?: string;\n  dependencySelector?: (state: ValueType<B>) => unknown;\n  props?: CubitPropsType<B>;\n}\n\nexport type BlocHookDependencySelector<B extends BlocBase<S>, S> = (state: ValueType<B>) => unknown;\n\nclass UseBlocClass {\n  static useBloc<B extends BlocBase<S>, S>(\n    bloc: BlocConstructor<B>\n  ): BlocHookData<B, S>;\n  static useBloc<B extends BlocBase<S>, S>(\n    bloc: BlocConstructor<B>,\n    options: BlocHookOptions<B, S>\n  ): BlocHookData<B, S>;\n  static useBloc<B extends BlocBase<S>, S>(\n    bloc: BlocConstructor<B>,\n    depsSelector: BlocHookDependencySelector<B, S>\n  ): BlocHookData<B, S>;\n  static useBloc<B extends BlocBase<S>, S>(\n    bloc: BlocConstructor<B>,\n    instanceId: BlocInstanceId\n  ): BlocHookData<B, S>;\n  static useBloc<B extends BlocBase<S>, S>(\n    bloc: BlocConstructor<B>,\n    options?: BlocHookOptions<B, S> | BlocHookDependencySelector<B, S> | BlocInstanceId\n  ): BlocHookData<B, S> {\n    // default options\n    let dependencySelector: BlocHookDependencySelector<B, S> = (state: ValueType<B>) => state;\n    let blocId: BlocInstanceId | undefined;\n    let props: BlocProps = {};\n\n    // parse options\n    if (typeof options === \"function\") {\n      dependencySelector = options;\n    }\n\n    if (typeof options === \"string\") {\n      blocId = options;\n    }\n\n    if (typeof options === \"object\") {\n      dependencySelector = options.dependencySelector ?? dependencySelector;\n      blocId = options.id;\n      props = options.props ?? props;\n    }\n\n\n    const resolvedBloc = useResolvedBloc<B, S>(bloc, { id: blocId, props });\n\n    if (!resolvedBloc) {\n      throw new Error(`useBloc: could not resolve: ${bloc.name || bloc}`);\n    }\n\n    const { subscribe, getSnapshot, getServerSnapshot } = useMemo<ExternalStore<B>>(\n      () => externalBlocStore(resolvedBloc, dependencySelector),\n      [resolvedBloc]\n    );\n\n    const state = useSyncExternalStore<ValueType<B>>(subscribe, getSnapshot, getServerSnapshot);\n\n    useEffect(() => {\n      resolvedBloc.props = props;\n    }, [props]);\n\n    return [state, resolvedBloc];\n  }\n}\n\nconst useBloc = UseBlocClass.useBloc;\n\nexport default useBloc;\n"],"names":["useMemo","Blac","useSyncExternalStore","useEffect"],"mappings":"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"}

package/dist/vitest.config.js

@@ -0,0 +1,3 @@
+import { defineConfig } from 'vitest/config';
+export default defineConfig({});
+//# sourceMappingURL=vitest.config.js.map

package/dist/vitest.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vitest.config.js","sourceRoot":"","sources":["../vitest.config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAE5C,eAAe,YAAY,CAAC,EAE3B,CAAC,CAAA"}

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@blac/react",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "license": "MIT",
   "main": "dist/blac-react.js",
   "module": "dist/blac-react.esm.js",
   "typings": "dist/blac-react.d.ts",
-  "type": "module",
   "keywords": [
     "react",
     "typescript",
@@ -17,27 +16,19 @@
     "bloc-pattern"
   ],
   "scripts": {
-    "dev": "vite",
-    "build:demo": "vite build",
     "build": "rollup -c rollup.config.lib.js",
+    "dev": "rollup -c rollup.config.lib.js --watch",
     "prettier": "prettier --write ./src",
-    "test": "vitest run",
-    "test:watch": "vitest --watch",
-    "coverage": "vitest run --coverage"
+    "test": "vitest run --coverage"
   },
   "dependencies": {
     "blac": "*"
   },
   "devDependencies": {
-    "@types/react": "^18.2.17",
-    "@types/react-dom": "^18.2.7",
-    "@types/react-highlight": "^0.12.5",
-    "@vitejs/plugin-react": "^4.0.3",
-    "highlight.js": "^11.8.0",
+    "@rollup/plugin-typescript": "^11.1.2",
+    "@types/react": "^18.2.20",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-highlight": "^0.15.0",
-    "vite": "^4.4.7",
-    "vitest": "^0.33.0"
+    "rollup-plugin-terser": "^7.0.2",
+    "vitest": "^0.34.1"
   }
 }

package/readme.md

@@ -10,7 +10,7 @@ npm install blac-react
 
 ## Examples
 
-- [Counter with Bloc](ui/examples/CounterWithBloc.tsx)
-- [Counter with Cubit](ui/examples/CounterWithCubit.tsx)
-- [Counter with Global State](ui/examples/CounterWithCubitGlobal.tsx)
-- [Counters with Local State](ui/examples/CounterLocalDemo.tsx)
+- [Counter with Bloc](../../apps/react-demo/ui/examples/CounterWithBloc.tsx)
+- [Counter with Cubit](../../apps/react-demo/ui/examples/CounterWithCubit.tsx)
+- [Counter with Global State](../../apps/react-demo/ui/examples/CounterWithCubitGlobal.tsx)
+- [Counters with Local State](../../apps/react-demo/ui/examples/CounterMultiInstance.tsx)