Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@blac/react
Advanced tools
@blac/react - npm Package Compare versions
Comparing version 0.0.14 to 0.0.15
@@ -1,2 +0,2 @@ | ||
| import { Blac, BlocBase, BlocClass, ValueType } from 'blac'; | ||
| import { Blac, BlocBase, ValueType, BlocConstructor } from 'blac'; | ||
| import React, { FC, ReactNode } from 'react'; | ||
@@ -6,61 +6,14 @@ | ||
| children: ReactNode; | ||
| blac: Blac<any, any>; | ||
| blac?: Blac<any>; | ||
| }>; | ||
| /** | ||
| * 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 ProviderOptions<B> { | ||
| bloc: BlocClass<B> | (() => B); | ||
| debug?: boolean; | ||
| } | ||
| declare class BlacReact { | ||
| blac: Blac<any, any>; | ||
| blacContext: React.Context<Blac<any, any>>; | ||
| localContextProvider: React.Context<BlocBase<any> | null>; | ||
| static pluginKey: string; | ||
| constructor(blac: Blac<any, any>, blacContext: React.Context<Blac<any, any>>); | ||
| static safeGetInstance(): BlacReact | undefined; | ||
| blac: Blac<any>; | ||
| blacContext: React.Context<Blac<any>>; | ||
| constructor(blac: Blac<any>, blacContext: React.Context<Blac<any>>); | ||
| static getInstance(throwError?: boolean): BlacReact; | ||
| setup(): void; | ||
| /** | ||
| * React hook to get the bloc instance from the nearest BlocProvider | ||
| */ | ||
| useLocalBlocContext(): BlocBase<any> | null; | ||
| private _contextLocalProviderKey; | ||
| get LocalProvider(): React.Provider<string>; | ||
| /** | ||
| * React hook to get the id from the nearest BlocProvider | ||
| */ | ||
| useLocalProviderKey(): string; | ||
| addLocalBloc: (item: ProviderItem) => void; | ||
| removeLocalBloc: (id: string) => void; | ||
| createProviderId: () => string; | ||
| providerList: ProviderItem[]; | ||
| getLocalBlocForProvider<B>(id: string, blocClass: BlocClass<B>): BlocBase<B> | undefined; | ||
| providerMounted(options: { | ||
| providerId: string; | ||
| localProviderKey?: string; | ||
| } & Parameters<BlacReact['useLocalProvider']>[0]): { | ||
| instance: BlocBase<any> | undefined; | ||
| destroyOnUnmount: boolean; | ||
| }; | ||
| providerUnmounted(providerId: string | undefined): void; | ||
| readonly useLocalProvider: (options: ProviderOptions<any>) => string | undefined; | ||
| } | ||
| interface BlocProviderProps<B> { | ||
| children?: ReactNode; | ||
| bloc: BlocClass<B> | (() => B) | B; | ||
| debug?: boolean; | ||
| } | ||
| declare const BlocProvider: FC<BlocProviderProps<any>>; | ||
| interface ExternalStore<B extends BlocBase<any>> { | ||
@@ -73,19 +26,8 @@ subscribe: (onStoreChange: () => void) => () => void; | ||
| interface BlocResolveOptions { | ||
| /** | ||
| * Set to true if you want blac to automatically create a new instance of the bloc, | ||
| * for this to work, pass the unconstructed class to the hook. The constructor should not expect any arguments. | ||
| */ | ||
| create?: boolean; | ||
| } | ||
| type BlocHookData<B extends BlocBase<S>, S> = [ | ||
| value: ValueType<B>, | ||
| instance: B, | ||
| Provider: FC<{ | ||
| children: ReactNode; | ||
| }> | ||
| instance: B | ||
| ]; | ||
| declare const useBloc: <B extends BlocBase<S>, S>(bloc: BlocClass<B> | (() => B), options?: BlocResolveOptions) => BlocHookData<B, S>; | ||
| declare const useBloc: <B extends BlocBase<S>, S>(bloc: BlocConstructor<B>) => BlocHookData<B, S>; | ||
| export { BlacApp, BlacReact, BlocProvider, ExternalStore, externalBlocStore, useBloc }; | ||
| export { BlacApp, BlacReact, ExternalStore, externalBlocStore, useBloc }; |
@@ -1,15 +0,19 @@ | ||
| import React, { useContext, useMemo, useEffect, createContext, useSyncExternalStore } from 'react'; | ||
| import { Blac } from 'blac'; | ||
| import React, { createContext, useMemo, useContext, useSyncExternalStore } from 'react'; | ||
| /** | ||
| * Keep track of the hierarchy of Blac BlocProvider components, so that | ||
| * useBloc can find the correct bloc instance. | ||
| */ | ||
| // import { BlocConstructor } from "blac"; | ||
| // export interface ProviderItem { | ||
| // id: string; | ||
| // parent?: string; | ||
| // bloc: BlocBase<any>; | ||
| // } | ||
| // interface ProviderOptions<B> { | ||
| // bloc: BlocConstructor<B>; | ||
| // debug?: boolean; | ||
| // } | ||
| class BlacReact { | ||
| static pluginKey = "blacReact"; | ||
| blac; | ||
| blacContext; | ||
| localContextProvider = React.createContext(null); | ||
| static pluginKey = 'blacReact'; | ||
| constructor(blac, blacContext) { | ||
| // treat this as singleton | ||
| console.log('create', blac); | ||
| const blacReact = blac.getPluginKey(BlacReact.pluginKey); | ||
@@ -24,15 +28,10 @@ // new setup | ||
| } | ||
| static safeGetInstance() { | ||
| const blac = globalThis.blac; | ||
| const blacReact = blac?.getPluginKey(BlacReact.pluginKey); | ||
| return blacReact; | ||
| } | ||
| static getInstance(throwError = true) { | ||
| const blac = globalThis.blac; | ||
| if (!blac) { | ||
| throw new Error('BlacReact: blac instance not found'); | ||
| throw new Error("BlacReact: blac instance not found"); | ||
| } | ||
| const blacReact = blac.getPluginKey(BlacReact.pluginKey); | ||
| if (!blacReact) { | ||
| throw new Error('BlacReact: blacReact instance not found'); | ||
| throw new Error("BlacReact: blacReact instance not found"); | ||
| } | ||
@@ -42,101 +41,5 @@ 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); | ||
| } | ||
| /** | ||
| * React hook to get the bloc instance from the nearest BlocProvider | ||
| */ | ||
| useLocalBlocContext() { | ||
| return useContext(this.localContextProvider); | ||
| } | ||
| _contextLocalProviderKey = React.createContext('none'); | ||
| get LocalProvider() { | ||
| return this._contextLocalProviderKey.Provider; | ||
| } | ||
| /** | ||
| * React hook to get the id from the nearest BlocProvider | ||
| */ | ||
| 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; | ||
| } | ||
| providerMounted(options) { | ||
| const { bloc, providerId, localProviderKey } = options; | ||
| let instance = undefined; | ||
| let destroyOnUnmount = true; | ||
| const isFunction = bloc instanceof Function; | ||
| const isLiveBloc = !isFunction && | ||
| typeof bloc === 'object' && | ||
| bloc?.isBlacLive; | ||
| if (isFunction) { | ||
| instance = bloc(); | ||
| } | ||
| if (isLiveBloc) { | ||
| instance = bloc; | ||
| } | ||
| if (instance) { | ||
| this.addLocalBloc({ | ||
| bloc: instance, | ||
| id: providerId, | ||
| parent: localProviderKey, | ||
| }); | ||
| } | ||
| return { instance, destroyOnUnmount }; | ||
| } | ||
| providerUnmounted(providerId) { | ||
| this.removeLocalBloc(providerId); | ||
| } | ||
| useLocalProvider = (options) => { | ||
| const [blocInstance, setBlocInstance] = React.useState(undefined); | ||
| const localProviderKey = this.useLocalProviderKey(); | ||
| const providerId = useMemo(() => this.createProviderId(), []); | ||
| useEffect(() => { | ||
| const { instance, destroyOnUnmount } = this.providerMounted({ | ||
| ...options, | ||
| localProviderKey, | ||
| providerId, | ||
| }); | ||
| setBlocInstance(instance); | ||
| if (destroyOnUnmount) | ||
| return this.providerUnmounted(providerId); | ||
| }, []); | ||
| if (blocInstance) | ||
| return providerId; | ||
| }; | ||
| } | ||
@@ -147,18 +50,10 @@ | ||
| const { children, blac } = props; | ||
| const blacApp = useMemo(() => new BlacReact(blac, BlacContext), [blac]); | ||
| const blacInstance = useMemo(() => blac ?? new Blac(), [blac]); | ||
| const blacApp = useMemo(() => new BlacReact(blacInstance, BlacContext), [blacInstance]); | ||
| if (!blacApp) { | ||
| throw new Error('BlacReact failed to initialize'); | ||
| throw new Error("BlacReact failed to initialize"); | ||
| } | ||
| return React.createElement(BlacContext.Provider, { value: blac }, children); | ||
| return React.createElement(BlacContext.Provider, { value: blacInstance }, children); | ||
| }; | ||
| const BlocProvider = ({ children, bloc, debug }) => { | ||
| const blacReact = BlacReact.getInstance(); | ||
| const providerId = blacReact.useLocalProvider({ bloc, debug }); | ||
| if (!providerId) { | ||
| return null; | ||
| } | ||
| return (React.createElement(blacReact.LocalProvider, { value: providerId }, children)); | ||
| }; | ||
| const externalBlocStore = (bloc) => { | ||
@@ -172,7 +67,9 @@ return { | ||
| }, | ||
| getSnapshot: () => bloc.state, | ||
| getSnapshot: () => bloc.state | ||
| }; | ||
| }; | ||
| const resolveBloc = ({ bloc, blacInstance, localProviderKey, blacReact, create }) => { | ||
| const resolveBloc = ({ bloc, blacInstance, blacReact | ||
| // create | ||
| }) => { | ||
| // check if its a create function or a class | ||
@@ -182,49 +79,26 @@ const isFunction = bloc instanceof Function; | ||
| const isLiveBloc = !isFunction && | ||
| typeof bloc === 'object' && | ||
| typeof bloc === "object" && | ||
| bloc?.isBlacLive; | ||
| // if its a create function, call it | ||
| // if it is 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 (isLiveBloc) { | ||
| return bloc; | ||
| } | ||
| console.log(typeof bloc, { | ||
| isFunction, | ||
| isBloc, | ||
| isLiveBloc, | ||
| bloc, | ||
| create, | ||
| }); | ||
| // if it is not, check if we can create a new instance | ||
| if (!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 (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, options = {}) => { | ||
| const useResolvedBloc = (bloc) => { | ||
| const blacReact = BlacReact.getInstance(); | ||
| const localProviderKey = blacReact.useLocalProviderKey(); | ||
| const blacInstance = useContext(BlacContext); | ||
| const resolvedBloc = useMemo(() => { | ||
| if (!blacReact || !localProviderKey) { | ||
| if (!blacReact) { | ||
| return undefined; | ||
@@ -235,27 +109,19 @@ } | ||
| blacInstance, | ||
| blacReact, | ||
| localProviderKey, | ||
| create: options.create ?? false | ||
| blacReact | ||
| }); | ||
| }, [localProviderKey]); | ||
| console.trace(resolvedBloc, options); | ||
| }, []); | ||
| return resolvedBloc; | ||
| }; | ||
| const useBloc = (bloc, options = {}) => { | ||
| const resolvedBloc = useResolvedBloc(bloc, options); | ||
| const useBloc = (bloc) => { | ||
| const resolvedBloc = useResolvedBloc(bloc); | ||
| if (!resolvedBloc) { | ||
| throw new Error('useBloc: bloc is undefined'); | ||
| throw new Error(`useBloc: could not resolve: ${bloc.name || bloc}`); | ||
| } | ||
| const { subscribe, getSnapshot } = useMemo(() => externalBlocStore(resolvedBloc), [resolvedBloc]); | ||
| const state = useSyncExternalStore(subscribe, getSnapshot); | ||
| const Provider = useMemo(() => { | ||
| return ({ children }) => { | ||
| return React.createElement(BlocProvider, { bloc: resolvedBloc }, children); | ||
| }; | ||
| }, [resolvedBloc,]); | ||
| return [state, resolvedBloc, Provider]; | ||
| return [state, resolvedBloc]; | ||
| }; | ||
| export { BlacApp, BlacReact, BlocProvider, externalBlocStore, useBloc }; | ||
| export { BlacApp, BlacReact, externalBlocStore, useBloc }; | ||
| //# sourceMappingURL=blac-react.esm.js.map |
| 'use strict'; | ||
| var blac = require('blac'); | ||
| var React = require('react'); | ||
| /** | ||
| * Keep track of the hierarchy of Blac BlocProvider components, so that | ||
| * useBloc can find the correct bloc instance. | ||
| */ | ||
| // import { BlocConstructor } from "blac"; | ||
| // export interface ProviderItem { | ||
| // id: string; | ||
| // parent?: string; | ||
| // bloc: BlocBase<any>; | ||
| // } | ||
| // interface ProviderOptions<B> { | ||
| // bloc: BlocConstructor<B>; | ||
| // debug?: boolean; | ||
| // } | ||
| class BlacReact { | ||
| static pluginKey = "blacReact"; | ||
| blac; | ||
| blacContext; | ||
| localContextProvider = React.createContext(null); | ||
| static pluginKey = 'blacReact'; | ||
| constructor(blac, blacContext) { | ||
| // treat this as singleton | ||
| console.log('create', blac); | ||
| const blacReact = blac.getPluginKey(BlacReact.pluginKey); | ||
@@ -26,15 +30,10 @@ // new setup | ||
| } | ||
| static safeGetInstance() { | ||
| const blac = globalThis.blac; | ||
| const blacReact = blac?.getPluginKey(BlacReact.pluginKey); | ||
| return blacReact; | ||
| } | ||
| static getInstance(throwError = true) { | ||
| const blac = globalThis.blac; | ||
| if (!blac) { | ||
| throw new Error('BlacReact: blac instance not found'); | ||
| throw new Error("BlacReact: blac instance not found"); | ||
| } | ||
| const blacReact = blac.getPluginKey(BlacReact.pluginKey); | ||
| if (!blacReact) { | ||
| throw new Error('BlacReact: blacReact instance not found'); | ||
| throw new Error("BlacReact: blacReact instance not found"); | ||
| } | ||
@@ -44,101 +43,5 @@ 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); | ||
| } | ||
| /** | ||
| * React hook to get the bloc instance from the nearest BlocProvider | ||
| */ | ||
| useLocalBlocContext() { | ||
| return React.useContext(this.localContextProvider); | ||
| } | ||
| _contextLocalProviderKey = React.createContext('none'); | ||
| get LocalProvider() { | ||
| return this._contextLocalProviderKey.Provider; | ||
| } | ||
| /** | ||
| * React hook to get the id from the nearest BlocProvider | ||
| */ | ||
| 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; | ||
| } | ||
| providerMounted(options) { | ||
| const { bloc, providerId, localProviderKey } = options; | ||
| let instance = undefined; | ||
| let destroyOnUnmount = true; | ||
| const isFunction = bloc instanceof Function; | ||
| const isLiveBloc = !isFunction && | ||
| typeof bloc === 'object' && | ||
| bloc?.isBlacLive; | ||
| if (isFunction) { | ||
| instance = bloc(); | ||
| } | ||
| if (isLiveBloc) { | ||
| instance = bloc; | ||
| } | ||
| if (instance) { | ||
| this.addLocalBloc({ | ||
| bloc: instance, | ||
| id: providerId, | ||
| parent: localProviderKey, | ||
| }); | ||
| } | ||
| return { instance, destroyOnUnmount }; | ||
| } | ||
| providerUnmounted(providerId) { | ||
| this.removeLocalBloc(providerId); | ||
| } | ||
| useLocalProvider = (options) => { | ||
| const [blocInstance, setBlocInstance] = React.useState(undefined); | ||
| const localProviderKey = this.useLocalProviderKey(); | ||
| const providerId = React.useMemo(() => this.createProviderId(), []); | ||
| React.useEffect(() => { | ||
| const { instance, destroyOnUnmount } = this.providerMounted({ | ||
| ...options, | ||
| localProviderKey, | ||
| providerId, | ||
| }); | ||
| setBlocInstance(instance); | ||
| if (destroyOnUnmount) | ||
| return this.providerUnmounted(providerId); | ||
| }, []); | ||
| if (blocInstance) | ||
| return providerId; | ||
| }; | ||
| } | ||
@@ -148,19 +51,11 @@ | ||
| const BlacApp = (props) => { | ||
| const { children, blac } = props; | ||
| const blacApp = React.useMemo(() => new BlacReact(blac, BlacContext), [blac]); | ||
| 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'); | ||
| throw new Error("BlacReact failed to initialize"); | ||
| } | ||
| return React.createElement(BlacContext.Provider, { value: blac }, children); | ||
| return React.createElement(BlacContext.Provider, { value: blacInstance }, children); | ||
| }; | ||
| const BlocProvider = ({ children, bloc, debug }) => { | ||
| const blacReact = BlacReact.getInstance(); | ||
| const providerId = blacReact.useLocalProvider({ bloc, debug }); | ||
| if (!providerId) { | ||
| return null; | ||
| } | ||
| return (React.createElement(blacReact.LocalProvider, { value: providerId }, children)); | ||
| }; | ||
| const externalBlocStore = (bloc) => { | ||
@@ -174,7 +69,9 @@ return { | ||
| }, | ||
| getSnapshot: () => bloc.state, | ||
| getSnapshot: () => bloc.state | ||
| }; | ||
| }; | ||
| const resolveBloc = ({ bloc, blacInstance, localProviderKey, blacReact, create }) => { | ||
| const resolveBloc = ({ bloc, blacInstance, blacReact | ||
| // create | ||
| }) => { | ||
| // check if its a create function or a class | ||
@@ -184,49 +81,26 @@ const isFunction = bloc instanceof Function; | ||
| const isLiveBloc = !isFunction && | ||
| typeof bloc === 'object' && | ||
| typeof bloc === "object" && | ||
| bloc?.isBlacLive; | ||
| // if its a create function, call it | ||
| // if it is 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 (isLiveBloc) { | ||
| return bloc; | ||
| } | ||
| console.log(typeof bloc, { | ||
| isFunction, | ||
| isBloc, | ||
| isLiveBloc, | ||
| bloc, | ||
| create, | ||
| }); | ||
| // if it is not, check if we can create a new instance | ||
| if (!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 (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, options = {}) => { | ||
| const useResolvedBloc = (bloc) => { | ||
| const blacReact = BlacReact.getInstance(); | ||
| const localProviderKey = blacReact.useLocalProviderKey(); | ||
| const blacInstance = React.useContext(BlacContext); | ||
| const resolvedBloc = React.useMemo(() => { | ||
| if (!blacReact || !localProviderKey) { | ||
| if (!blacReact) { | ||
| return undefined; | ||
@@ -237,24 +111,16 @@ } | ||
| blacInstance, | ||
| blacReact, | ||
| localProviderKey, | ||
| create: options.create ?? false | ||
| blacReact | ||
| }); | ||
| }, [localProviderKey]); | ||
| console.trace(resolvedBloc, options); | ||
| }, []); | ||
| return resolvedBloc; | ||
| }; | ||
| const useBloc = (bloc, options = {}) => { | ||
| const resolvedBloc = useResolvedBloc(bloc, options); | ||
| const useBloc = (bloc) => { | ||
| const resolvedBloc = useResolvedBloc(bloc); | ||
| if (!resolvedBloc) { | ||
| throw new Error('useBloc: bloc is undefined'); | ||
| throw new Error(`useBloc: could not resolve: ${bloc.name || bloc}`); | ||
| } | ||
| const { subscribe, getSnapshot } = React.useMemo(() => externalBlocStore(resolvedBloc), [resolvedBloc]); | ||
| const state = React.useSyncExternalStore(subscribe, getSnapshot); | ||
| const Provider = React.useMemo(() => { | ||
| return ({ children }) => { | ||
| return React.createElement(BlocProvider, { bloc: resolvedBloc }, children); | ||
| }; | ||
| }, [resolvedBloc,]); | ||
| return [state, resolvedBloc, Provider]; | ||
| return [state, resolvedBloc]; | ||
| }; | ||
@@ -264,5 +130,4 @@ | ||
| exports.BlacReact = BlacReact; | ||
| exports.BlocProvider = BlocProvider; | ||
| exports.externalBlocStore = externalBlocStore; | ||
| exports.useBloc = useBloc; | ||
| //# sourceMappingURL=blac-react.js.map |
| { | ||
| "name": "@blac/react", | ||
| "version": "0.0.14", | ||
| "version": "0.0.15", | ||
| "license": "MIT", | ||
@@ -32,10 +32,12 @@ "main": "dist/blac-react.js", | ||
| "devDependencies": { | ||
| "@types/react": "^18.0.28", | ||
| "@types/react-dom": "^18.0.11", | ||
| "@vitejs/plugin-react": "^3.1.0", | ||
| "@types/react": "^18.2.17", | ||
| "@types/react-dom": "^18.2.7", | ||
| "@types/react-highlight": "^0.12.5", | ||
| "@vitejs/plugin-react": "^4.0.3", | ||
| "react": "^18.2.0", | ||
| "react-dom": "^18.2.0", | ||
| "vite": "^4.1.4", | ||
| "vitest": "^0.29.1" | ||
| "react-highlight": "^0.15.0", | ||
| "vite": "^4.4.7", | ||
| "vitest": "^0.33.0" | ||
| } | ||
| } |
@@ -16,2 +16,2 @@ # Blac for React | ||
| - [Counter with Global State](ui/examples/CounterWithCubitGlobal.tsx) | ||
| - [Counters with Local State](ui/examples/CounterScoped.tsx) | ||
| - [Counters with Local State](ui/examples/CounterLocalDemo.tsx) |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-55.97%
9956
- Dev dependency count
- increased by28.57%
9
- Lines of code
- decreased by-55.33%
260
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes