New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

blac

Package Overview
Dependencies
Maintainers
1
Versions
39
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

blac - npm Package Compare versions

Comparing version

0.4.1
to
1.0.1-alpha.0

src/index.test.ts
src/index.ts

210

dist/blac.d.ts

@@ -1,178 +0,48 @@

import React, { ReactElement } from 'react';
declare type ValueType<T extends BlocBase<any>> = T extends BlocBase<infer U> ? U : never;
declare type BlocClass<T> = new (...args: never[]) => T;
declare type BlocHookData<T extends BlocBase<any>> = [
value: ValueType<T>,
instance: T
];
interface BlocOptions {
persistKey?: string;
persistData?: boolean;
/**
* OBSERVABLE
*/
type BlacObserver<S> = (oldState: S, newState: S) => void;
declare class BlacObservable<S> {
private _observers;
subscribe(observer: BlacObserver<S>): void;
unsubscribe(observer: BlacObserver<S>): void;
notify(newState: S, oldState: S): void;
}
interface ChangeEvent<T> {
currentState: T;
nextState: T;
/**
* BLAC
*/
declare class Blac {
globalState: any;
}
interface TransitionEvent<T, E> {
currentState: T;
event: E;
nextState: T;
/**
* BLOC BASE
*/
interface BlocOptions {
blac?: Blac;
}
interface BlocObserverOptions {
onChange?: (bloc: BlocBase<any>, event: ChangeEvent<any>) => void;
onTransition?: (bloc: BlocBase<any>, event: TransitionEvent<any, any>) => void;
interface CubitOptions extends BlocOptions {
}
declare class BlocObserver {
onChange: (bloc: BlocBase<any>, event: ChangeEvent<any>) => void;
onTransition: (bloc: BlocBase<any>, event: TransitionEvent<any, any>) => void;
constructor(methods?: BlocObserverOptions);
readonly addChange: (bloc: BlocBase<any>, state: any) => void;
readonly addTransition: (bloc: BlocBase<any>, state: any, event: any) => void;
readonly addBlocAdded: (bloc: BlocBase<any>) => void;
readonly addBlocRemoved: (bloc: BlocBase<any>) => void;
private readonly defaultAction;
onBlocAdded: (bloc: BlocBase<any>) => void;
onBlocRemoved: (bloc: BlocBase<any>) => void;
private createTransitionEvent;
private createChangeEvent;
declare abstract class BlocBase<S> {
_state: S;
observable: BlacObservable<S>;
blac?: Blac;
constructor(initialState: S, options?: BlocOptions);
get state(): S;
get name(): string;
onStateChange: (callback: (newState: S, oldState: S) => void) => (() => void);
}
declare type BlocObserverScope = "local" | "global" | "all";
interface ProviderItem {
id: string;
parent?: string;
bloc: BlocBase<any>;
/**
* BLOC
*/
declare abstract class Bloc<S, A> extends BlocBase<S> {
abstract reducer(action: A, state: S): S;
emit: (action: A) => void;
}
interface ConsumerOptions {
observer?: BlocObserver;
/**
* CUBIT
*/
declare abstract class Cubit<S> extends BlocBase<S> {
emit(state: S): void;
}
declare class BlacConsumer {
observer: BlocObserver;
mocksEnabled: boolean;
providerList: ProviderItem[];
private blocListGlobal;
private blocChangeObservers;
private blocValueChangeObservers;
private mockBlocs;
constructor(blocs: BlocBase<any>[], options?: ConsumerOptions);
notifyChange(bloc: BlocBase<any>, state: any): void;
notifyValueChange(bloc: BlocBase<any>): void;
notifyTransition(bloc: BlocBase<any>, state: any, event: any): void;
addBlocChangeObserver<T extends BlocBase<any>>(blocClass: BlocClass<T>, callback: (bloc: T, event: ChangeEvent<ValueType<T>>) => unknown, scope?: BlocObserverScope): void;
addBlocValueChangeObserver<T extends BlocBase<any>>(blocClass: BlocClass<T>, callback: (bloc: T) => unknown, scope?: BlocObserverScope): void;
addLocalBloc(item: ProviderItem): void;
removeLocalBloc(id: string, bloc: BlocBase<any>): void;
addBlocMock(bloc: BlocBase<any>): void;
resetMocks(): void;
getGlobalBloc(blocClass: BlocClass<any>): undefined | BlocBase<any>;
getLocalBlocForProvider<T>(id: string, blocClass: BlocClass<T>): BlocBase<T> | undefined;
protected getGlobalBlocInstance<T>(global: BlocBase<any>[], blocClass: BlocClass<T>): BlocBase<T> | undefined;
}
interface Observer<T> {
next: (v: any) => void;
}
interface Subscription {
unsubscribe: () => void;
}
declare type RemoveMethods = () => void;
declare class StreamAbstraction<T> {
isClosed: boolean;
removeListeners: Array<RemoveMethods>;
protected readonly _options: BlocOptions;
private _subject;
constructor(initialValue: T, blocOptions?: BlocOptions);
get state(): T;
readonly removeRemoveListener: (index: number) => void;
readonly addRemoveListener: (method: RemoveMethods) => () => void;
subscribe: (observer: Observer<T>) => Subscription;
complete: () => void;
clearCache: () => void;
jsonToState(state: string): T;
stateToJson(state: T): string;
protected next: (value: T) => void;
protected getCachedValue: () => T | Error;
protected updateCache: () => void;
}
interface BlocMeta {
scope: "unknown" | "local" | "global";
}
declare type ChangeMethod = <T>(change: ChangeEvent<T>, bloc: BlocBase<T>) => void;
declare type RegisterMethod = <T>(consumer: BlacConsumer, bloc: BlocBase<T>) => void;
declare type ValueChangeMethod = <T>(value: T, bloc: BlocBase<T>) => void;
declare class BlocBase<T> extends StreamAbstraction<T> {
id: string;
createdAt: Date;
meta: BlocMeta;
changeListeners: ChangeMethod[];
registerListeners: RegisterMethod[];
valueChangeListeners: ValueChangeMethod[];
consumer: BlacConsumer | null;
constructor(initialValue: T, blocOptions?: BlocOptions);
readonly removeChangeListener: (index: number) => void;
readonly addChangeListener: (method: ChangeMethod) => () => void;
readonly removeValueChangeListener: (index: number) => void;
readonly addValueChangeListener: (method: ValueChangeMethod) => () => void;
readonly removeRegisterListener: (index: number) => void;
readonly addRegisterListener: (method: RegisterMethod) => () => void;
readonly notifyChange: (state: T) => void;
readonly notifyValueChange: () => void;
}
declare type EventHandler<E, T> = (event: E, emit: (state: T) => void, state: T) => void | Promise<void>;
declare class Bloc<E, T> extends BlocBase<T> {
onTransition: null | ((change: {
currentState: T;
event: E;
nextState: T;
}) => void);
/**
* @deprecated The method is deprecated. Use `on` to add your event handlers instead.
*/
protected mapEventToState: null | ((event: E) => T);
eventHandlers: [E, EventHandler<E, T>][];
constructor(initialState: T, options?: BlocOptions);
add: (event: E) => void;
private isEventPassedCorrespondTo;
private didAddNonInstantiatedEvent;
private didAddInstantiatedEvent;
private emit;
/**
* Add a listener to the Bloc for when a new event is added. There can only be one handler for each event.
* @param event The event that was added to the Bloc
* @param handler A method that receives the event and a `emit` function that can be used to update the state
*/
readonly on: (event: E, handler: EventHandler<E, T>) => void;
protected notifyTransition: (state: T, event: E) => void;
}
declare class Cubit<T> extends BlocBase<T> {
emit: (value: T) => void;
}
interface BlocHookOptions<T extends BlocBase<any>> {
subscribe?: boolean;
shouldUpdate?: (event: ChangeEvent<ValueType<T>>) => boolean;
create?: () => T;
}
declare class BlacReact extends BlacConsumer {
private readonly _blocsGlobal;
private _contextLocalProviderKey;
constructor(blocs: BlocBase<any>[], options?: ConsumerOptions);
useBloc: <T extends BlocBase<any>>(blocClass: BlocClass<T>, options?: BlocHookOptions<T>) => BlocHookData<T>;
BlocBuilder<T extends BlocBase<any>>(props: {
blocClass: BlocClass<T>;
builder: (data: BlocHookData<T>) => ReactElement;
shouldUpdate?: (event: ChangeEvent<ValueType<T>>) => boolean;
}): ReactElement | null;
BlocProvider<T extends BlocBase<any>>(props: {
children?: ReactElement | ReactElement[] | false;
bloc: T | ((id: string) => T);
}): ReactElement;
withBlocProvider: <P extends object>(bloc: BlocBase<any> | (() => BlocBase<any>)) => (Component: React.FC<P>) => React.FC<P>;
}
export { BlacReact, Bloc, BlocObserver, Cubit };
export { Blac, BlacObservable, BlacObserver, Bloc, BlocBase, BlocOptions, Cubit, CubitOptions };

575

dist/blac.esm.js

@@ -1,553 +0,66 @@

import React, { useMemo, useContext, useState, useCallback, useEffect } from 'react';
const LOCAL_STORAGE_PREFIX = "data.";
const cubitDefaultOptions = {
persistKey: "",
persistData: true,
};
const createId = () => {
return "_" + Math.random().toString(36).substr(2, 9);
};
class BehaviorSubject {
isClosed = false;
prevValue;
value;
observers = [];
constructor(initialValue) {
this.value = initialValue;
}
getValue() {
return this.value;
}
class BlacObservable {
_observers = [];
subscribe(observer) {
const id = createId();
this.observers.push({ observer, id });
this.triggerObservers();
return {
unsubscribe: () => this.removeObserver(id),
};
this._observers.push(observer);
}
complete() {
this.observers = [];
this.isClosed = true;
unsubscribe(observer) {
this._observers = this._observers.filter((obs) => obs !== observer);
}
next(value) {
this.value = value;
this.triggerObservers();
notify(newState, oldState) {
this._observers.forEach((observer) => observer(newState, oldState));
}
triggerObservers() {
this.observers.forEach(({ observer }) => {
observer.next(this.value);
});
}
removeObserver(removeId) {
this.observers = this.observers.filter(({ id }) => id !== removeId);
}
}
class StreamAbstraction {
isClosed = false;
removeListeners = [];
_options;
_subject;
constructor(initialValue, blocOptions = {}) {
let value = initialValue;
const options = { ...cubitDefaultOptions, ...blocOptions };
this._options = options;
if (options.persistKey && options.persistData) {
const cachedValue = this.getCachedValue();
if (!(cachedValue instanceof Error)) {
value = cachedValue;
}
/**
* BLAC
*/
class Blac {
globalState = {};
}
class BlocBase {
_state;
observable;
blac;
constructor(initialState, options) {
this.observable = new BlacObservable();
this._state = initialState;
if (options?.blac) {
this.blac = options?.blac;
this.blac.globalState[this.name] = this.state;
}
this._subject = new BehaviorSubject(value);
}
get state() {
return this._subject.getValue();
return this._state;
}
removeRemoveListener = (index) => {
this.removeListeners.splice(index, 1);
};
addRemoveListener = (method) => {
const index = this.removeListeners.length;
this.removeListeners.push(method);
return () => this.removeRemoveListener(index);
};
subscribe = (observer) => this._subject.subscribe({
next: observer.next,
});
complete = () => {
this.isClosed = true;
this._subject.complete();
};
clearCache = () => {
const key = this._options.persistKey;
if (key) {
localStorage.removeItem(`${LOCAL_STORAGE_PREFIX}${key}`);
}
};
jsonToState(state) {
return JSON.parse(state).state;
get name() {
return this.constructor.name;
}
stateToJson(state) {
return JSON.stringify({ state });
}
next = (value) => {
this._subject.next(value);
this.updateCache();
onStateChange = (callback) => {
this.observable.subscribe(callback);
return () => this.observable.unsubscribe(callback);
};
getCachedValue = () => {
const cachedValue = localStorage.getItem(`${LOCAL_STORAGE_PREFIX}${this._options.persistKey}`);
if (cachedValue) {
try {
return this.jsonToState(cachedValue);
}
catch (e) {
const error = new Error(`Failed to parse JSON in localstorage for the key: "${LOCAL_STORAGE_PREFIX}${this._options.persistKey}"`);
console.error(error);
return error;
}
}
return new Error("Key not found");
};
updateCache = () => {
const { persistData, persistKey } = this._options;
if (persistData && persistKey) {
localStorage.setItem(`${LOCAL_STORAGE_PREFIX}${persistKey}`, this.stateToJson(this.state));
}
else {
this.clearCache();
}
};
}
class BlocBase extends StreamAbstraction {
id = createId();
createdAt = new Date();
meta = {
scope: "unknown",
};
changeListeners = [];
registerListeners = [];
valueChangeListeners = [];
consumer = null;
constructor(initialValue, blocOptions = {}) {
super(initialValue, blocOptions);
}
// listeners
removeChangeListener = (index) => {
this.changeListeners.splice(index, 1);
};
addChangeListener = (method) => {
const index = this.changeListeners.length;
this.changeListeners.push(method);
return () => this.removeChangeListener(index);
};
removeValueChangeListener = (index) => {
this.valueChangeListeners.splice(index, 1);
};
addValueChangeListener = (method) => {
const index = this.valueChangeListeners.length;
this.valueChangeListeners.push(method);
return () => this.removeValueChangeListener(index);
};
removeRegisterListener = (index) => {
this.registerListeners.splice(index, 1);
};
addRegisterListener = (method) => {
const index = this.registerListeners.length;
this.registerListeners.push(method);
return () => this.removeRegisterListener(index);
};
notifyChange = (state) => {
this.consumer?.notifyChange(this, state);
this.changeListeners.forEach((fn) => fn({
currentState: this.state,
nextState: state,
}, this));
};
notifyValueChange = () => {
this.consumer?.notifyValueChange(this);
this.valueChangeListeners.forEach((fn) => fn(this.state, this));
};
}
/**
* BLOC
*/
class Bloc extends BlocBase {
onTransition = null;
/**
* @deprecated The method is deprecated. Use `on` to add your event handlers instead.
*/
mapEventToState = null;
eventHandlers = [];
constructor(initialState, options) {
super(initialState, options);
}
add = (event) => {
for (const [eventName, handler] of this.eventHandlers) {
if (this.isEventPassedCorrespondTo(event, eventName)) {
handler(event, this.emit(event), this.state);
return;
}
}
console.warn(`Event is not handled in Bloc:`, { event, bloc: this });
emit = (action) => {
const newState = this.reducer(action, this.state);
this.observable.notify(newState, this.state);
this._state = newState;
};
isEventPassedCorrespondTo = (passedEvent, registeredEventName) => {
return (this.didAddNonInstantiatedEvent(passedEvent, registeredEventName) ||
this.didAddInstantiatedEvent(passedEvent, registeredEventName));
};
didAddNonInstantiatedEvent(event, eventName) {
return eventName === event;
}
didAddInstantiatedEvent(eventAsObject, eventAsFunction) {
/*
A very hacky solution. JS is a nightmare with objects.
Normally we check the events as the same type or not.
However sometimes client needs to pass in data with the event, in that circumstance,
they need to have the payload in the event, meaning they instantiate the event.
That makes the type and event different, even more so
since the type is abstract and event is a instantiated subclass
thanks to the grand js, we litterally cannot check if one is another or cast (generic types) or
type-check. (i couldn't find a better solution btw maybe we can)
Moreover the code stores instantiated events as lambda functions
Now, to check type and object equality, we need to get their real"Subclass"Names to compare them
As you can see from realEventName, we get the real class Name, then
we take the constructor name of the input event and since the constructor name will
equal to real name of class, voila!
*/
try {
const realEventName = eventAsFunction.name;
const constructorName = Object.getPrototypeOf(eventAsObject).constructor.name;
return realEventName === constructorName;
}
catch (e) {
console.error(e);
}
// if the try/catch fails nothing is returned, and we can assume that adding the event was not instanciated
return false;
}
emit = (event) => (newState) => {
this.notifyChange(newState);
this.notifyTransition(newState, event);
this.next(newState);
this.notifyValueChange();
};
/**
* Add a listener to the Bloc for when a new event is added. There can only be one handler for each event.
* @param event The event that was added to the Bloc
* @param handler A method that receives the event and a `emit` function that can be used to update the state
*/
on = (event, handler) => {
this.eventHandlers.push([event, handler]);
};
notifyTransition = (state, event) => {
this.consumer?.notifyTransition(this, state, event);
this.onTransition?.({
currentState: this.state,
event,
nextState: state,
});
};
}
/**
* CUBIT
*/
class Cubit extends BlocBase {
emit = (value) => {
this.notifyChange(value);
this.next(value);
this.notifyValueChange();
};
}
class BlocObserver {
onChange;
onTransition;
constructor(methods = {}) {
this.onChange = methods.onChange ? methods.onChange : this.defaultAction;
this.onTransition = methods.onTransition
? methods.onTransition
: this.defaultAction;
}
// trigger events
addChange = (bloc, state) => {
this.onChange(bloc, this.createChangeEvent(bloc, state));
};
addTransition = (bloc, state, event) => {
this.onTransition(bloc, this.createTransitionEvent(bloc, state, event));
};
addBlocAdded = (bloc) => {
this.onBlocAdded(bloc);
};
addBlocRemoved = (bloc) => {
this.onBlocRemoved(bloc);
};
// consume
defaultAction = () => { };
onBlocAdded = this.defaultAction;
onBlocRemoved = this.defaultAction;
createTransitionEvent(bloc, state, event) {
return {
currentState: bloc.state,
event,
nextState: state,
};
}
createChangeEvent(bloc, state) {
return {
currentState: bloc.state,
nextState: state,
};
}
}
class BlacConsumer {
observer;
mocksEnabled = false;
providerList = [];
blocListGlobal;
blocChangeObservers = [];
blocValueChangeObservers = [];
mockBlocs = [];
constructor(blocs, options = {}) {
this.blocListGlobal = blocs;
this.observer = options.observer || new BlocObserver();
for (const b of blocs) {
b.consumer = this;
b.registerListeners.forEach((fn) => fn(this, b));
b.meta.scope = "global";
this.observer.addBlocAdded(b);
}
}
notifyChange(bloc, state) {
if (bloc.isClosed) {
emit(state) {
if (state === this.state) {
return;
}
this.observer.addChange(bloc, state);
for (const [blocClass, callback, scope] of this.blocChangeObservers) {
const isGlobal = this.blocListGlobal.indexOf(bloc) !== -1;
const matchesScope = scope === "all" ||
(isGlobal && scope === "global") ||
(!isGlobal && scope === "local");
if (matchesScope && bloc instanceof blocClass) {
callback(bloc, {
nextState: state,
currentState: bloc.state,
});
}
}
this.observable.notify(state, this.state);
this._state = state;
}
notifyValueChange(bloc) {
if (bloc.isClosed) {
return;
}
for (const [blocClass, callback, scope] of this.blocValueChangeObservers) {
const isGlobal = this.blocListGlobal.indexOf(bloc) !== -1;
const matchesScope = scope === "all" ||
(isGlobal && scope === "global") ||
(!isGlobal && scope === "local");
if (matchesScope && bloc instanceof blocClass) {
callback(bloc);
}
}
}
notifyTransition(bloc, state, event) {
if (bloc.isClosed) {
return;
}
this.observer.addTransition(bloc, state, event);
}
addBlocChangeObserver(blocClass, callback, scope = "all") {
this.blocChangeObservers.push([blocClass, callback, scope]);
}
addBlocValueChangeObserver(blocClass, callback, scope = "all") {
this.blocValueChangeObservers.push([blocClass, callback, scope]);
}
addLocalBloc(item) {
this.providerList.push(item);
item.bloc.consumer = this;
item.bloc.registerListeners.forEach((fn) => fn(this, item.bloc));
item.bloc.meta.scope = "local";
this.observer.addBlocAdded(item.bloc);
}
removeLocalBloc(id, bloc) {
const item = this.providerList.find((i) => i.id === id && i.bloc === bloc);
if (item) {
item.bloc.complete();
item.bloc.removeListeners.forEach((fn) => fn());
this.observer.addBlocRemoved(item.bloc);
this.providerList = this.providerList.filter((i) => i !== item);
}
}
addBlocMock(bloc) {
if (this.mocksEnabled) {
this.mockBlocs = [bloc, ...this.mockBlocs];
}
}
resetMocks() {
this.mockBlocs = [];
}
getGlobalBloc(blocClass) {
if (this.mocksEnabled) {
const mockedBloc = this.mockBlocs.find((c) => c instanceof blocClass);
if (mockedBloc) {
return mockedBloc;
}
}
return this.blocListGlobal.find((c) => c instanceof blocClass);
}
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;
}
getGlobalBlocInstance(global, blocClass) {
if (this.mocksEnabled) {
const mockedBloc = this.mockBlocs.find((c) => c instanceof blocClass);
if (mockedBloc) {
return mockedBloc;
}
}
return global.find((c) => c instanceof blocClass);
}
}
const defaultBlocHookOptions = {
subscribe: true,
};
class BlocRuntimeError {
error;
constructor(message) {
this.error = new Error(message);
}
}
class NoValue {
}
class BlacReact extends BlacConsumer {
_blocsGlobal;
_contextLocalProviderKey = React.createContext("none");
constructor(blocs, options) {
super(blocs, options);
this._blocsGlobal = blocs;
this.BlocProvider = this.BlocProvider.bind(this);
this.BlocBuilder = this.BlocBuilder.bind(this);
}
useBloc = (blocClass, options = {}) => {
const mergedOptions = {
...defaultBlocHookOptions,
...options,
};
let blocInstance = useMemo(() => (options.create ? options.create() : undefined), []);
if (!blocInstance) {
const localProviderKey = useContext(this._contextLocalProviderKey);
const localBlocInstance = useMemo(() => this.getLocalBlocForProvider(localProviderKey, blocClass), []);
blocInstance = useMemo(() => localBlocInstance ||
this.getGlobalBlocInstance(this._blocsGlobal, blocClass), []);
}
const { subscribe, shouldUpdate = true } = mergedOptions;
if (!blocInstance) {
const name = blocClass.prototype.constructor.name;
const error = new BlocRuntimeError(`"${name}"
no bloc with this name was found in the global context.
# Solutions:
1. Wrap your code in a BlocProvider.
2. Add "${name}" to the "Blac" constructor:
const state = new Blac(
[
...
new ${name}(),
]
)
`);
console.error(error.error);
return [
NoValue,
{},
{
error,
complete: true,
},
];
}
const [data, setData] = useState(blocInstance.state);
const updateData = useCallback((nextState) => {
if (shouldUpdate === true ||
shouldUpdate({ nextState, currentState: data })) {
setData(nextState);
}
}, []);
useEffect(() => {
if (subscribe) {
const subscription = blocInstance?.subscribe({
next: updateData,
});
return () => {
subscription?.unsubscribe();
};
}
}, []);
return [data, blocInstance];
};
// Components
BlocBuilder(props) {
const hook = this.useBloc(props.blocClass, {
shouldUpdate: props.shouldUpdate,
});
return props.builder(hook);
}
BlocProvider(props) {
const id = useMemo(() => createId(), []);
const localProviderKey = useContext(this._contextLocalProviderKey);
const bloc = useMemo(() => {
const newBloc = typeof props.bloc === "function" ? props.bloc(id) : props.bloc;
if (newBloc) {
this.addLocalBloc({
bloc: newBloc,
id,
parent: localProviderKey,
});
}
else {
console.error(`BLoC is undefined`);
}
return newBloc;
}, []);
const context = useMemo(() => {
return React.createContext(bloc);
}, [bloc]);
useEffect(() => {
return () => {
this.removeLocalBloc(id, bloc);
};
}, []);
return (React.createElement(this._contextLocalProviderKey.Provider, { value: id },
React.createElement(context.Provider, { value: bloc }, props.children)));
}
withBlocProvider = (bloc) => (Component) => {
const { BlocProvider } = this;
const WithBlocProvider = (props) => {
return (React.createElement(BlocProvider, { bloc: bloc },
React.createElement(Component, { ...props })));
};
return WithBlocProvider;
};
}
export { BlacReact, Bloc, BlocObserver, Cubit };
export { Blac, BlacObservable, Bloc, BlocBase, Cubit };
//# sourceMappingURL=blac.esm.js.map

584

dist/blac.js
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
const LOCAL_STORAGE_PREFIX = "data.";
const cubitDefaultOptions = {
persistKey: "",
persistData: true,
};
const createId = () => {
return "_" + Math.random().toString(36).substr(2, 9);
};
class BehaviorSubject {
isClosed = false;
prevValue;
value;
observers = [];
constructor(initialValue) {
this.value = initialValue;
}
getValue() {
return this.value;
}
class BlacObservable {
_observers = [];
subscribe(observer) {
const id = createId();
this.observers.push({ observer, id });
this.triggerObservers();
return {
unsubscribe: () => this.removeObserver(id),
};
this._observers.push(observer);
}
complete() {
this.observers = [];
this.isClosed = true;
unsubscribe(observer) {
this._observers = this._observers.filter((obs) => obs !== observer);
}
next(value) {
this.value = value;
this.triggerObservers();
notify(newState, oldState) {
this._observers.forEach((observer) => observer(newState, oldState));
}
triggerObservers() {
this.observers.forEach(({ observer }) => {
observer.next(this.value);
});
}
removeObserver(removeId) {
this.observers = this.observers.filter(({ id }) => id !== removeId);
}
}
class StreamAbstraction {
isClosed = false;
removeListeners = [];
_options;
_subject;
constructor(initialValue, blocOptions = {}) {
let value = initialValue;
const options = { ...cubitDefaultOptions, ...blocOptions };
this._options = options;
if (options.persistKey && options.persistData) {
const cachedValue = this.getCachedValue();
if (!(cachedValue instanceof Error)) {
value = cachedValue;
}
/**
* BLAC
*/
class Blac {
globalState = {};
}
class BlocBase {
_state;
observable;
blac;
constructor(initialState, options) {
this.observable = new BlacObservable();
this._state = initialState;
if (options?.blac) {
this.blac = options?.blac;
this.blac.globalState[this.name] = this.state;
}
this._subject = new BehaviorSubject(value);
}
get state() {
return this._subject.getValue();
return this._state;
}
removeRemoveListener = (index) => {
this.removeListeners.splice(index, 1);
};
addRemoveListener = (method) => {
const index = this.removeListeners.length;
this.removeListeners.push(method);
return () => this.removeRemoveListener(index);
};
subscribe = (observer) => this._subject.subscribe({
next: observer.next,
});
complete = () => {
this.isClosed = true;
this._subject.complete();
};
clearCache = () => {
const key = this._options.persistKey;
if (key) {
localStorage.removeItem(`${LOCAL_STORAGE_PREFIX}${key}`);
}
};
jsonToState(state) {
return JSON.parse(state).state;
get name() {
return this.constructor.name;
}
stateToJson(state) {
return JSON.stringify({ state });
}
next = (value) => {
this._subject.next(value);
this.updateCache();
onStateChange = (callback) => {
this.observable.subscribe(callback);
return () => this.observable.unsubscribe(callback);
};
getCachedValue = () => {
const cachedValue = localStorage.getItem(`${LOCAL_STORAGE_PREFIX}${this._options.persistKey}`);
if (cachedValue) {
try {
return this.jsonToState(cachedValue);
}
catch (e) {
const error = new Error(`Failed to parse JSON in localstorage for the key: "${LOCAL_STORAGE_PREFIX}${this._options.persistKey}"`);
console.error(error);
return error;
}
}
return new Error("Key not found");
};
updateCache = () => {
const { persistData, persistKey } = this._options;
if (persistData && persistKey) {
localStorage.setItem(`${LOCAL_STORAGE_PREFIX}${persistKey}`, this.stateToJson(this.state));
}
else {
this.clearCache();
}
};
}
class BlocBase extends StreamAbstraction {
id = createId();
createdAt = new Date();
meta = {
scope: "unknown",
};
changeListeners = [];
registerListeners = [];
valueChangeListeners = [];
consumer = null;
constructor(initialValue, blocOptions = {}) {
super(initialValue, blocOptions);
}
// listeners
removeChangeListener = (index) => {
this.changeListeners.splice(index, 1);
};
addChangeListener = (method) => {
const index = this.changeListeners.length;
this.changeListeners.push(method);
return () => this.removeChangeListener(index);
};
removeValueChangeListener = (index) => {
this.valueChangeListeners.splice(index, 1);
};
addValueChangeListener = (method) => {
const index = this.valueChangeListeners.length;
this.valueChangeListeners.push(method);
return () => this.removeValueChangeListener(index);
};
removeRegisterListener = (index) => {
this.registerListeners.splice(index, 1);
};
addRegisterListener = (method) => {
const index = this.registerListeners.length;
this.registerListeners.push(method);
return () => this.removeRegisterListener(index);
};
notifyChange = (state) => {
this.consumer?.notifyChange(this, state);
this.changeListeners.forEach((fn) => fn({
currentState: this.state,
nextState: state,
}, this));
};
notifyValueChange = () => {
this.consumer?.notifyValueChange(this);
this.valueChangeListeners.forEach((fn) => fn(this.state, this));
};
}
/**
* BLOC
*/
class Bloc extends BlocBase {
onTransition = null;
/**
* @deprecated The method is deprecated. Use `on` to add your event handlers instead.
*/
mapEventToState = null;
eventHandlers = [];
constructor(initialState, options) {
super(initialState, options);
}
add = (event) => {
for (const [eventName, handler] of this.eventHandlers) {
if (this.isEventPassedCorrespondTo(event, eventName)) {
handler(event, this.emit(event), this.state);
return;
}
}
console.warn(`Event is not handled in Bloc:`, { event, bloc: this });
emit = (action) => {
const newState = this.reducer(action, this.state);
this.observable.notify(newState, this.state);
this._state = newState;
};
isEventPassedCorrespondTo = (passedEvent, registeredEventName) => {
return (this.didAddNonInstantiatedEvent(passedEvent, registeredEventName) ||
this.didAddInstantiatedEvent(passedEvent, registeredEventName));
};
didAddNonInstantiatedEvent(event, eventName) {
return eventName === event;
}
didAddInstantiatedEvent(eventAsObject, eventAsFunction) {
/*
A very hacky solution. JS is a nightmare with objects.
Normally we check the events as the same type or not.
However sometimes client needs to pass in data with the event, in that circumstance,
they need to have the payload in the event, meaning they instantiate the event.
That makes the type and event different, even more so
since the type is abstract and event is a instantiated subclass
thanks to the grand js, we litterally cannot check if one is another or cast (generic types) or
type-check. (i couldn't find a better solution btw maybe we can)
Moreover the code stores instantiated events as lambda functions
Now, to check type and object equality, we need to get their real"Subclass"Names to compare them
As you can see from realEventName, we get the real class Name, then
we take the constructor name of the input event and since the constructor name will
equal to real name of class, voila!
*/
try {
const realEventName = eventAsFunction.name;
const constructorName = Object.getPrototypeOf(eventAsObject).constructor.name;
return realEventName === constructorName;
}
catch (e) {
console.error(e);
}
// if the try/catch fails nothing is returned, and we can assume that adding the event was not instanciated
return false;
}
emit = (event) => (newState) => {
this.notifyChange(newState);
this.notifyTransition(newState, event);
this.next(newState);
this.notifyValueChange();
};
/**
* Add a listener to the Bloc for when a new event is added. There can only be one handler for each event.
* @param event The event that was added to the Bloc
* @param handler A method that receives the event and a `emit` function that can be used to update the state
*/
on = (event, handler) => {
this.eventHandlers.push([event, handler]);
};
notifyTransition = (state, event) => {
this.consumer?.notifyTransition(this, state, event);
this.onTransition?.({
currentState: this.state,
event,
nextState: state,
});
};
}
/**
* CUBIT
*/
class Cubit extends BlocBase {
emit = (value) => {
this.notifyChange(value);
this.next(value);
this.notifyValueChange();
};
}
class BlocObserver {
onChange;
onTransition;
constructor(methods = {}) {
this.onChange = methods.onChange ? methods.onChange : this.defaultAction;
this.onTransition = methods.onTransition
? methods.onTransition
: this.defaultAction;
}
// trigger events
addChange = (bloc, state) => {
this.onChange(bloc, this.createChangeEvent(bloc, state));
};
addTransition = (bloc, state, event) => {
this.onTransition(bloc, this.createTransitionEvent(bloc, state, event));
};
addBlocAdded = (bloc) => {
this.onBlocAdded(bloc);
};
addBlocRemoved = (bloc) => {
this.onBlocRemoved(bloc);
};
// consume
defaultAction = () => { };
onBlocAdded = this.defaultAction;
onBlocRemoved = this.defaultAction;
createTransitionEvent(bloc, state, event) {
return {
currentState: bloc.state,
event,
nextState: state,
};
}
createChangeEvent(bloc, state) {
return {
currentState: bloc.state,
nextState: state,
};
}
}
class BlacConsumer {
observer;
mocksEnabled = false;
providerList = [];
blocListGlobal;
blocChangeObservers = [];
blocValueChangeObservers = [];
mockBlocs = [];
constructor(blocs, options = {}) {
this.blocListGlobal = blocs;
this.observer = options.observer || new BlocObserver();
for (const b of blocs) {
b.consumer = this;
b.registerListeners.forEach((fn) => fn(this, b));
b.meta.scope = "global";
this.observer.addBlocAdded(b);
}
}
notifyChange(bloc, state) {
if (bloc.isClosed) {
emit(state) {
if (state === this.state) {
return;
}
this.observer.addChange(bloc, state);
for (const [blocClass, callback, scope] of this.blocChangeObservers) {
const isGlobal = this.blocListGlobal.indexOf(bloc) !== -1;
const matchesScope = scope === "all" ||
(isGlobal && scope === "global") ||
(!isGlobal && scope === "local");
if (matchesScope && bloc instanceof blocClass) {
callback(bloc, {
nextState: state,
currentState: bloc.state,
});
}
}
this.observable.notify(state, this.state);
this._state = state;
}
notifyValueChange(bloc) {
if (bloc.isClosed) {
return;
}
for (const [blocClass, callback, scope] of this.blocValueChangeObservers) {
const isGlobal = this.blocListGlobal.indexOf(bloc) !== -1;
const matchesScope = scope === "all" ||
(isGlobal && scope === "global") ||
(!isGlobal && scope === "local");
if (matchesScope && bloc instanceof blocClass) {
callback(bloc);
}
}
}
notifyTransition(bloc, state, event) {
if (bloc.isClosed) {
return;
}
this.observer.addTransition(bloc, state, event);
}
addBlocChangeObserver(blocClass, callback, scope = "all") {
this.blocChangeObservers.push([blocClass, callback, scope]);
}
addBlocValueChangeObserver(blocClass, callback, scope = "all") {
this.blocValueChangeObservers.push([blocClass, callback, scope]);
}
addLocalBloc(item) {
this.providerList.push(item);
item.bloc.consumer = this;
item.bloc.registerListeners.forEach((fn) => fn(this, item.bloc));
item.bloc.meta.scope = "local";
this.observer.addBlocAdded(item.bloc);
}
removeLocalBloc(id, bloc) {
const item = this.providerList.find((i) => i.id === id && i.bloc === bloc);
if (item) {
item.bloc.complete();
item.bloc.removeListeners.forEach((fn) => fn());
this.observer.addBlocRemoved(item.bloc);
this.providerList = this.providerList.filter((i) => i !== item);
}
}
addBlocMock(bloc) {
if (this.mocksEnabled) {
this.mockBlocs = [bloc, ...this.mockBlocs];
}
}
resetMocks() {
this.mockBlocs = [];
}
getGlobalBloc(blocClass) {
if (this.mocksEnabled) {
const mockedBloc = this.mockBlocs.find((c) => c instanceof blocClass);
if (mockedBloc) {
return mockedBloc;
}
}
return this.blocListGlobal.find((c) => c instanceof blocClass);
}
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;
}
getGlobalBlocInstance(global, blocClass) {
if (this.mocksEnabled) {
const mockedBloc = this.mockBlocs.find((c) => c instanceof blocClass);
if (mockedBloc) {
return mockedBloc;
}
}
return global.find((c) => c instanceof blocClass);
}
}
const defaultBlocHookOptions = {
subscribe: true,
};
class BlocRuntimeError {
error;
constructor(message) {
this.error = new Error(message);
}
}
class NoValue {
}
class BlacReact extends BlacConsumer {
_blocsGlobal;
_contextLocalProviderKey = React__default["default"].createContext("none");
constructor(blocs, options) {
super(blocs, options);
this._blocsGlobal = blocs;
this.BlocProvider = this.BlocProvider.bind(this);
this.BlocBuilder = this.BlocBuilder.bind(this);
}
useBloc = (blocClass, options = {}) => {
const mergedOptions = {
...defaultBlocHookOptions,
...options,
};
let blocInstance = React.useMemo(() => (options.create ? options.create() : undefined), []);
if (!blocInstance) {
const localProviderKey = React.useContext(this._contextLocalProviderKey);
const localBlocInstance = React.useMemo(() => this.getLocalBlocForProvider(localProviderKey, blocClass), []);
blocInstance = React.useMemo(() => localBlocInstance ||
this.getGlobalBlocInstance(this._blocsGlobal, blocClass), []);
}
const { subscribe, shouldUpdate = true } = mergedOptions;
if (!blocInstance) {
const name = blocClass.prototype.constructor.name;
const error = new BlocRuntimeError(`"${name}"
no bloc with this name was found in the global context.
# Solutions:
1. Wrap your code in a BlocProvider.
2. Add "${name}" to the "Blac" constructor:
const state = new Blac(
[
...
new ${name}(),
]
)
`);
console.error(error.error);
return [
NoValue,
{},
{
error,
complete: true,
},
];
}
const [data, setData] = React.useState(blocInstance.state);
const updateData = React.useCallback((nextState) => {
if (shouldUpdate === true ||
shouldUpdate({ nextState, currentState: data })) {
setData(nextState);
}
}, []);
React.useEffect(() => {
if (subscribe) {
const subscription = blocInstance?.subscribe({
next: updateData,
});
return () => {
subscription?.unsubscribe();
};
}
}, []);
return [data, blocInstance];
};
// Components
BlocBuilder(props) {
const hook = this.useBloc(props.blocClass, {
shouldUpdate: props.shouldUpdate,
});
return props.builder(hook);
}
BlocProvider(props) {
const id = React.useMemo(() => createId(), []);
const localProviderKey = React.useContext(this._contextLocalProviderKey);
const bloc = React.useMemo(() => {
const newBloc = typeof props.bloc === "function" ? props.bloc(id) : props.bloc;
if (newBloc) {
this.addLocalBloc({
bloc: newBloc,
id,
parent: localProviderKey,
});
}
else {
console.error(`BLoC is undefined`);
}
return newBloc;
}, []);
const context = React.useMemo(() => {
return React__default["default"].createContext(bloc);
}, [bloc]);
React.useEffect(() => {
return () => {
this.removeLocalBloc(id, bloc);
};
}, []);
return (React__default["default"].createElement(this._contextLocalProviderKey.Provider, { value: id },
React__default["default"].createElement(context.Provider, { value: bloc }, props.children)));
}
withBlocProvider = (bloc) => (Component) => {
const { BlocProvider } = this;
const WithBlocProvider = (props) => {
return (React__default["default"].createElement(BlocProvider, { bloc: bloc },
React__default["default"].createElement(Component, { ...props })));
};
return WithBlocProvider;
};
}
exports.BlacReact = BlacReact;
exports.Blac = Blac;
exports.BlacObservable = BlacObservable;
exports.Bloc = Bloc;
exports.BlocObserver = BlocObserver;
exports.BlocBase = BlocBase;
exports.Cubit = Cubit;
//# sourceMappingURL=blac.js.map

104

package.json
{
"name": "blac",
"version": "0.4.1",
"version": "1.0.1-alpha.0",
"license": "MIT",

@@ -8,2 +8,3 @@ "main": "dist/blac.js",

"typings": "dist/blac.d.ts",
"type": "module",
"keywords": [

@@ -20,90 +21,31 @@ "react",

"scripts": {
"dev": "vite",
"dev:tool": "cd devtools && vite",
"build": "vite build",
"build:tool": "yarn build:scripts && cd devtools && vite build",
"build:lib": "rollup -c rollup.config.lib.js",
"serve": "vite preview",
"build": "rollup -c rollup.config.lib.js",
"prettier": "prettier --write ./src",
"test": "jest",
"build:scripts": "cd devtools && rollup -c rollup.config.background.js && rollup -c rollup.config.body.js && rollup -c rollup.config.inject.js"
"test": "vitest run",
"coverage": "vitest run --coverage"
},
"dependencies": {},
"devDependencies": {
"@babel/core": "^7.17.9",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"@material-ui/lab": "^4.0.0-alpha.61",
"@rollup/plugin-babel": "^5.3.1",
"@rollup/plugin-commonjs": "^21.0.3",
"@rollup/plugin-node-resolve": "^13.2.0",
"@testing-library/react": "^13.0.1",
"@types/chrome": "^0.0.181",
"@types/enzyme": "^3.10.12",
"@types/jest": "^27.4.1",
"@types/material-ui": "^0.21.12",
"@types/react": "^18.0.5",
"@types/react-dom": "^18.0.0",
"@types/react-router-dom": "^5.3.3",
"@typescript-eslint/eslint-plugin": "^5.19.0",
"@typescript-eslint/parser": "^5.19.0",
"@babel/core": "^7.21.0",
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.21.0",
"@rollup/plugin-commonjs": "^24.0.1",
"@rollup/plugin-node-resolve": "^15.0.1",
"@typescript-eslint/eslint-plugin": "^5.53.0",
"@typescript-eslint/parser": "^5.53.0",
"@vitejs/plugin-react-refresh": "^1.3.6",
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
"@vitest/browser": "^0.29.1",
"@vitest/coverage-c8": "^0.29.1",
"codecov": "^3.8.3",
"enzyme": "^3.11.0",
"esbuild": "^0.14.36",
"eslint": "^8.13.0",
"eslint-config-prettier": "^8.5.0",
"eslint-config-standard": "^16.0.3",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-react": "^7.29.4",
"ext-messenger": "^3.0.2",
"install": "^0.13.0",
"jest": "27.5.1",
"jest-localstorage-mock": "^2.4.21",
"jest-mock-console": "^1.2.3",
"prettier": "^2.6.2",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-router-dom": "^6.3.0",
"rollup": "^2.70.1",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-dts": "^4.2.1",
"rollup-plugin-node-resolve": "^5.2.0",
"esbuild": "^0.17.10",
"eslint": "^8.34.0",
"prettier": "^2.8.4",
"rollup": "^3.17.2",
"rollup-plugin-dts": "^5.2.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.31.2",
"ts-jest": "^27.1.4",
"typescript": "^4.6.3",
"vite": "^2.9.5"
},
"jest": {
"preset": "ts-jest",
"testEnvironment": "jsdom",
"resetMocks": false,
"setupFiles": [
"jest-localstorage-mock"
],
"setupFilesAfterEnv": [
"jest-mock-console/dist/setupTestFramework.js",
"./setupTests.ts"
],
"collectCoverageFrom": [
"src/lib/**/*.{ts,tsx}"
],
"coverageThreshold": {
"global": {
"branches": 100,
"functions": 100,
"lines": 100,
"statements": 100
}
}
"rollup-plugin-typescript2": "^0.34.1",
"typescript": "^4.9.5",
"vitest": "^0.29.1"
}
}
.env.local
LICENSE
readme.md
src/devTools/chrome.ts
src/devTools/Content.tsx
src/devTools/DevTools.tsx
src/devTools/main.tsx
src/devTools/observer.ts
src/devTools/state/BlocsCubit.ts
src/devTools/state/state.ts
src/helpers/test.fixtures.ts
src/lib/Bloc.test.ts
src/lib/Bloc.ts
src/lib/BlocBase.test.ts
src/lib/BlocBase.ts
src/lib/BlocConsumer.test.ts
src/lib/BlocConsumer.ts
src/lib/BlocObserver.ts
src/lib/constants.ts
src/lib/createId.ts
src/lib/Cubit.test.ts
src/lib/Cubit.ts
src/lib/index.test.ts
src/lib/index.ts
src/lib/react/BlacReact.test.tsx
src/lib/react/BlacReact.tsx
src/lib/StreamAbstraction.test.ts
src/lib/StreamAbstraction.ts
src/lib/types.ts
src/lib/usecase-tests/login/src/login_bloc.ts
src/lib/usecase-tests/login/src/login_events.ts
src/lib/usecase-tests/login/src/login_state.ts
src/lib/usecase-tests/login/src/models/password.ts
src/lib/usecase-tests/login/src/models/user.ts
src/lib/usecase-tests/login/test/login_bloc.test.ts
src/lib/usecase-tests/login/test/login_state.test.ts
src/react/bloc/AuthBloc.ts
src/react/bloc/CounterCubit.ts
src/react/bloc/PreferencesCubit.ts
src/react/bloc/QuickStart.tsx
src/react/bloc/TestLocalCubit.ts
src/react/components/App.tsx
src/react/components/Auth.test.tsx
src/react/components/Auth.tsx
src/react/components/Buttonts.tsx
src/react/components/Layout.tsx
src/react/components/LazyToggle.tsx
src/react/components/Other.tsx
src/react/components/Routes.tsx
src/react/components/Sandbox.tsx
src/react/favicon.svg
src/react/logo.svg
src/react/main.tsx
src/react/state.ts
dist/blac.esm.js.map

Sorry, the diff of this file is not supported yet

dist/blac.js.map

Sorry, the diff of this file is not supported yet