From 5ab62418b841552ee89d5d974732ca79d3dd077a Mon Sep 17 00:00:00 2001 From: aabidsofi19 Date: Wed, 5 Jun 2024 17:32:36 +0530 Subject: [PATCH 01/17] chore: add redux as dependency Signed-off-by: aabidsofi19 --- package-lock.json | 95 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 3 +- 2 files changed, 97 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 2232faf4..f3fcb95c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@commitlint/cli": "^17.7.2", "@commitlint/config-conventional": "^17.7.0", "@mui/icons-material": "^5.15.11", + "@reduxjs/toolkit": "^2.2.5", "@testing-library/react": "^14.1.2", "@types/jest": "^29.5.11", "@types/react": "^18.2.45", @@ -2491,6 +2492,45 @@ "integrity": "sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg==", "dev": true }, + "node_modules/@reduxjs/toolkit": { + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.5.tgz", + "integrity": "sha512-aeFA/s5NCG7NoJe/MhmwREJxRkDs0ZaSqt0MxhWUrwCf1UQXpwR87RROJEql0uAkLI6U7snBOYOcKw83ew3FPg==", + "dev": true, + "dependencies": { + "immer": "^10.0.3", + "redux": "^5.0.1", + "redux-thunk": "^3.1.0", + "reselect": "^5.1.0" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17.0.0 || ^18", + "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-redux": { + "optional": true + } + } + }, + "node_modules/@reduxjs/toolkit/node_modules/redux": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", + "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==", + "dev": true + }, + "node_modules/@reduxjs/toolkit/node_modules/redux-thunk": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz", + "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==", + "dev": true, + "peerDependencies": { + "redux": "^5.0.0" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.9.0", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.0.tgz", @@ -6738,6 +6778,16 @@ "node": ">= 4" } }, + "node_modules/immer": { + "version": "10.1.1", + "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz", + "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==", + "dev": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/immer" + } + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -11540,6 +11590,12 @@ "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", "dev": true }, + "node_modules/reselect": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz", + "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==", + "dev": true + }, "node_modules/resolve": { "version": "1.22.6", "license": "MIT", @@ -15251,6 +15307,33 @@ "integrity": "sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg==", "dev": true }, + "@reduxjs/toolkit": { + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.5.tgz", + "integrity": "sha512-aeFA/s5NCG7NoJe/MhmwREJxRkDs0ZaSqt0MxhWUrwCf1UQXpwR87RROJEql0uAkLI6U7snBOYOcKw83ew3FPg==", + "dev": true, + "requires": { + "immer": "^10.0.3", + "redux": "^5.0.1", + "redux-thunk": "^3.1.0", + "reselect": "^5.1.0" + }, + "dependencies": { + "redux": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", + "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==", + "dev": true + }, + "redux-thunk": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz", + "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==", + "dev": true, + "requires": {} + } + } + }, "@rollup/rollup-android-arm-eabi": { "version": "4.9.0", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.0.tgz", @@ -18197,6 +18280,12 @@ "version": "5.2.4", "dev": true }, + "immer": { + "version": "10.1.1", + "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz", + "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==", + "dev": true + }, "import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -21463,6 +21552,12 @@ "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", "dev": true }, + "reselect": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz", + "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==", + "dev": true + }, "resolve": { "version": "1.22.6", "requires": { diff --git a/package.json b/package.json index 7c0599ad..6d17bd84 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "@commitlint/cli": "^17.7.2", "@commitlint/config-conventional": "^17.7.0", "@mui/icons-material": "^5.15.11", + "@reduxjs/toolkit": "^2.2.5", "@testing-library/react": "^14.1.2", "@types/jest": "^29.5.11", "@types/react": "^18.2.45", @@ -76,10 +77,10 @@ "@emotion/styled": "^11.11.0", "@mui/material": "^5.15.11", "@types/mui-datatables": "*", + "@xstate/react": "^4.1.1", "mui-datatables": "*", "react": ">=17", "react-dom": ">=17", - "@xstate/react": "^4.1.1", "xstate": "^5.13.0" }, "peerDependenciesMeta": { From 887ade892bf7f23bd69560d847a3d54cd0e78b40 Mon Sep 17 00:00:00 2001 From: aabidsofi19 Date: Wed, 5 Jun 2024 17:32:45 +0530 Subject: [PATCH 02/17] chore: add redux actor Signed-off-by: aabidsofi19 --- src/actors/reduxActor.ts | 94 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 src/actors/reduxActor.ts diff --git a/src/actors/reduxActor.ts b/src/actors/reduxActor.ts new file mode 100644 index 00000000..a4325b6e --- /dev/null +++ b/src/actors/reduxActor.ts @@ -0,0 +1,94 @@ +import { assertEvent, sendTo, setup } from 'xstate'; + +import { Selector, Store, UnknownAction } from '@reduxjs/toolkit'; + +interface ReduxActorContext { + store: Store; + selectors: { + [key: string]: Selector; + }; +} + +/* eslint-disable @typescript-eslint/no-explicit-any */ +type extraArgs = any[]; + +export const REDUX_COMMANDS = { + DISPATCH: 'DISPATCH', + GET_STATE: 'GET_STATE', + GET_STATE_FROM_SELECTOR: 'GET_STATE_FROM_SELECTOR', + SUBSCRIBE: 'SUBSCRIBE', + UNSUBSCRIBE: 'UNSUBSCRIBE' +}; + +export const REDUX_EVENTS = { + REDUX_STATE_SNAPSHOT: 'REDUX_STATE_SNAPSHOT' +}; + +export type REXUX_ACTOR_EVENTS = + | { type: 'DISPATCH'; data: { action: UnknownAction } } + | { type: 'SUBSCRIBE' } + | { type: 'UNSUBSCRIBE' } + | { type: 'REDUX_STATE_SNAPSHOT'; data: { snapshot: unknown } } + | { type: 'GET_STATE'; returnAddress: string; data: { key: string } } + | { + type: 'GET_STATE_FROM_SELECTOR'; + returnAddress: string; + data: { selector: string; extraArgs?: extraArgs }; + }; + +export const reduxEvents = { + stateSnapshot: (snapshot: unknown) => ({ + type: 'STATE_SNAPSHOT', + data: { snapshot } + }) +}; + +export const reduxCommands = { + dispatch: (action: UnknownAction) => ({ + type: 'DISPATCH', + data: { action } + }), + + getState: (key: string, returnAddress: string) => ({ + type: 'GET_STATE', + returnAddress, + data: { key } + }), + + getStateFromSelector: (selector: string, returnAddress: string, extraArgs?: extraArgs) => ({ + type: 'GET_STATE_FROM_SELECTOR', + returnAddress, + data: { selector, extraArgs } + }) +}; + +export const reduxActor = setup({ + types: { + context: {} as ReduxActorContext, + input: {} as ReduxActorContext, + events: {} as REXUX_ACTOR_EVENTS + } +}).createMachine({ + initial: 'idle', + context: ({ input }) => input, + states: { + idle: { + on: { + DISPATCH: { + actions: [({ event, context }) => context.store.dispatch(event.data.action)] + }, + GET_STATE_FROM_SELECTOR: { + actions: sendTo( + ({ event }) => event.returnAddress, + ({ context, event }) => { + assertEvent(event, 'GET_STATE_FROM_SELECTOR'); + const selector = context.selectors[event.data.selector]; + const snapshot = selector(context.store.getState(), ...(event.data.extraArgs || [])); + return reduxEvents.stateSnapshot(snapshot); + } + ) + } + } + } + } +}); From 3ae0b3a54a67b829b762182abdffe4e8fc1571d6 Mon Sep 17 00:00:00 2001 From: aabidsofi19 Date: Wed, 5 Jun 2024 17:32:57 +0530 Subject: [PATCH 03/17] chore: add rtk actor Signed-off-by: aabidsofi19 --- src/actors/rtkQueryActor.ts | 152 ++++++++++++++++++++++++++++++++++++ 1 file changed, 152 insertions(+) create mode 100644 src/actors/rtkQueryActor.ts diff --git a/src/actors/rtkQueryActor.ts b/src/actors/rtkQueryActor.ts new file mode 100644 index 00000000..7e701d99 --- /dev/null +++ b/src/actors/rtkQueryActor.ts @@ -0,0 +1,152 @@ +import { Store } from '@reduxjs/toolkit'; +import { Api, EndpointDefinitions, QueryResultSelectorResult } from '@reduxjs/toolkit/query/react'; +import { DoneActorEvent, ErrorActorEvent, EventObject, fromPromise, sendTo, setup } from 'xstate'; + +/* eslint-disable @typescript-eslint/no-explicit-any */ + +interface RtkQueryActorContext { + api: Api; + store: Store; +} + +interface RtkQueryActorInput { + api: Api; + store: Store; +} + +interface initiateQueryEvent extends EventObject { + type: 'INITIATE_QUERY'; + data: { + endpointName: string; + params: unknown; + }; + returnAddress: string; +} + +interface queryDoneEvent extends DoneActorEvent { + /* eslint-disable @typescript-eslint/no-explicit-any */ + output: { + result: QueryResultSelectorResult; + sourceEvent: initiateQueryEvent; + }; +} + +interface queryFailedEvent extends ErrorActorEvent { + /* eslint-disable @typescript-eslint/no-explicit-any */ + error: { + result: QueryResultSelectorResult; + sourceEvent: initiateQueryEvent; + }; +} + +interface QueryResultEvent extends EventObject { + type: 'QUERY_RESULT'; + data: { + result: unknown; + }; +} + +interface QueryFailedEvent extends EventObject { + type: 'QUERY_FAILED'; + data: { + error: unknown; + }; +} + +export const rtkQueryActorCommands = { + initiateQuery: ({ + endpointName, + params, + returnAddress + }: { + endpointName: string; + params: unknown; + returnAddress: string; + }): initiateQueryEvent => ({ + type: 'INITIATE_QUERY', + data: { endpointName, params }, + returnAddress + }) +}; + +export const rtkQueryActorEvents = { + queryResult: ({ result }: { result: unknown }): QueryResultEvent => ({ + type: 'QUERY_RESULT', + data: { result } + }), + queryFailed: ({ error }: { error: unknown }): QueryFailedEvent => ({ + type: 'QUERY_FAILED', + data: { error } + }) +}; + +export const RTK_EVENTS = { + QUERY_RESULT: 'QUERY_RESULT', + QUERY_FAILED: 'QUERY_FAILED' +}; + +type EVENTS = initiateQueryEvent | queryDoneEvent | queryFailedEvent; + +interface InitiateQueryActorInput { + context: RtkQueryActorContext; + event: initiateQueryEvent; +} +const InitiateQueryActor = fromPromise(async ({ input }: { input: InitiateQueryActorInput }) => { + const { event, context } = input; + console.log('event.data.endpointName', event, context); + const result = await context.store.dispatch( + (context.api.endpoints[event.data.endpointName] as any).initiate(event.data.params) + ); + return { + result, + sourceEvent: event + }; +}); + +export const rtkQueryActor = setup({ + types: { + context: {} as RtkQueryActorContext, + input: {} as RtkQueryActorInput, + events: {} as EVENTS + }, + actors: { + InitiateQueryActor + } +}).createMachine({ + initial: 'idle', + context: ({ input }) => input, + states: { + idle: { + on: { + INITIATE_QUERY: { + target: 'querying' + } + } + }, + querying: { + invoke: { + id: 'initiateQuery', + input: ({ context, event }) => ({ + context, + event: event as initiateQueryEvent + }), + src: 'InitiateQueryActor', + onDone: { + actions: sendTo( + ({ event }) => event.output.sourceEvent.returnAddress, + ({ event }) => rtkQueryActorEvents.queryResult({ result: event.output }) + ), + target: 'idle' + }, + onError: { + actions: sendTo( + ({ event }) => (event as queryFailedEvent).error.sourceEvent.returnAddress, + ({ event }) => rtkQueryActorEvents.queryFailed({ error: event.error }) + ), + + target: 'idle' + } + } + } + } +}); From 82be540c64ec8914aee6a672fdcccf2abfb6f80a Mon Sep 17 00:00:00 2001 From: aabidsofi19 Date: Wed, 5 Jun 2024 17:33:15 +0530 Subject: [PATCH 04/17] feat: add worker actor Signed-off-by: aabidsofi19 --- src/actors/index.ts | 21 ++++ src/actors/utils.ts | 34 +++++- src/actors/validators/dataValidator.ts | 2 +- src/actors/worker/README.md | 0 src/actors/worker/events.ts | 47 ++++++++ src/actors/worker/fromWorkerfiedActor.ts | 132 +++++++++++++++++++++++ src/actors/worker/index.ts | 2 + src/actors/worker/workerfy.ts | 92 ++++++++++++++++ 8 files changed, 328 insertions(+), 2 deletions(-) create mode 100644 src/actors/worker/README.md create mode 100644 src/actors/worker/events.ts create mode 100644 src/actors/worker/fromWorkerfiedActor.ts create mode 100644 src/actors/worker/index.ts create mode 100644 src/actors/worker/workerfy.ts diff --git a/src/actors/index.ts b/src/actors/index.ts index 0dffc848..2923105d 100644 --- a/src/actors/index.ts +++ b/src/actors/index.ts @@ -8,7 +8,28 @@ export { selectValidationResults } from './validators/dataValidator'; +export * from './worker'; + +export { + REDUX_COMMANDS, + REDUX_EVENTS, + reduxActor, + reduxCommands, + reduxEvents, + type REXUX_ACTOR_EVENTS +} from './reduxActor'; + +export { + RTK_EVENTS, + rtkQueryActor, + rtkQueryActorCommands, + rtkQueryActorEvents +} from './rtkQueryActor'; + +export const REEE = 'xxx'; + export { + DeferEvents, XSTATE_DEBUG_EVENT, deadLetter, forwardToActors, diff --git a/src/actors/utils.ts b/src/actors/utils.ts index 1854b7da..1deb016a 100644 --- a/src/actors/utils.ts +++ b/src/actors/utils.ts @@ -1,7 +1,7 @@ // disbale stict no any for now for full file /* eslint-disable @typescript-eslint/no-explicit-any */ -import { AnyActorRef, AnyEventObject, enqueueActions, sendTo } from 'xstate'; +import { AnyActorRef, AnyEventObject, assign, enqueueActions, sendTo } from 'xstate'; import { AnyActorSystem } from 'xstate/dist/declarations/src/system'; type ContextWithReturnAddress = { returnAddress: AnyActorRef }; @@ -43,3 +43,35 @@ export const reply = (eventFn: (actionArgs: any, params: any) => AnyEventObject) sendTo(({ context }: { context: ContextWithReturnAddress }) => context.returnAddress, eventFn); export const XSTATE_DEBUG_EVENT = 'XSTATE_DEBUG_EVENT'; + +type deferredEventsQueue = AnyEventObject[]; + +interface DeferredEventsQueueContext { + deferredEventsQueue: deferredEventsQueue; +} + +interface deferActionParams { + event: AnyEventObject; + context: DeferredEventsQueueContext; +} + +const defer = assign({ + deferredEventsQueue: ({ context: { deferredEventsQueue }, event }: deferActionParams) => [ + ...deferredEventsQueue, + event + ] +}); + +const recall = enqueueActions(({ context: { deferredEventsQueue }, enqueue }) => { + enqueue.assign({ + deferredEventsQueue: [] + }); + for (const event of deferredEventsQueue) { + enqueue.raise(event); + } +}); + +export const DeferEvents = { + defer, + recall +}; diff --git a/src/actors/validators/dataValidator.ts b/src/actors/validators/dataValidator.ts index e7cbde67..2efd797a 100644 --- a/src/actors/validators/dataValidator.ts +++ b/src/actors/validators/dataValidator.ts @@ -224,7 +224,7 @@ export const dataValidatorMachine = setup({ type ValidationMachineSnapshot = SnapshotFrom; export const selectValidationResults = (state: ValidationMachineSnapshot) => - state.context.validationResults; + state.context?.validationResults; export const selectIsValidating = (state: ValidationMachineSnapshot) => state.matches('validatingData'); diff --git a/src/actors/worker/README.md b/src/actors/worker/README.md new file mode 100644 index 00000000..e69de29b diff --git a/src/actors/worker/events.ts b/src/actors/worker/events.ts new file mode 100644 index 00000000..472120b9 --- /dev/null +++ b/src/actors/worker/events.ts @@ -0,0 +1,47 @@ +import { AnyEventObject } from 'xstate'; + +export const WORKER_COMMANDS = { + START_ACTOR: 'START_ACTOR', + STOP_ACTOR: 'STOP_ACTOR', + SEND_EVENT: 'SEND_EVENT', + GET_STATE: 'GET_STATE' +}; + +export const workerCommands = { + startActor: () => ({ type: WORKER_COMMANDS.START_ACTOR }), + stopActor: () => ({ type: WORKER_COMMANDS.STOP_ACTOR }), + sendEvent: (event: AnyEventObject) => ({ type: WORKER_COMMANDS.SEND_EVENT, event }), + getState: () => ({ type: WORKER_COMMANDS.GET_STATE }) +}; + +export interface PROXY_EVENT { + type: 'PROXY_EVENT'; + data: { + event: AnyEventObject; + to: string; + }; +} + +export interface STATE_SNAPSHOT_EVENT { + type: 'STATE_SNAPSHOT'; + data: { + snapshot: unknown; + }; +} + +export const workerEvents = { + proxyEvent: (event: AnyEventObject, to: string) => ({ + type: 'PROXY_EVENT', + data: { event, to } + }), + + stateSnapshot: (snapshot: unknown) => ({ + type: 'STATE_SNAPSHOT', + data: { snapshot } + }) +}; + +export const WORKER_EVENTS = { + STATE_SNAPSHOT: 'STATE_SNAPSHOT', + PROXY_EVENT: 'PROXY_EVENT' +}; diff --git a/src/actors/worker/fromWorkerfiedActor.ts b/src/actors/worker/fromWorkerfiedActor.ts new file mode 100644 index 00000000..aeb860b9 --- /dev/null +++ b/src/actors/worker/fromWorkerfiedActor.ts @@ -0,0 +1,132 @@ +import { + ActorLogic, + AnyEventObject, + AnyMachineSnapshot, + EventObject, + NonReducibleUnknown, + StateValue, + matchesState +} from 'xstate'; +import { AnyActorSystem } from 'xstate/dist/declarations/src/system'; +import { STATE_SNAPSHOT_EVENT, WORKER_EVENTS, workerCommands } from './events'; + +const instanceStates = /* #__PURE__ */ new WeakMap(); + +type WorkerInput = NonReducibleUnknown; + +type WorkerSnapshot = AnyMachineSnapshot; +type WorkerActorLogic = ActorLogic< + WorkerSnapshot, + TEvent, + TInput, + AnyActorSystem, + EventObject // TEmitted +>; + +interface ProxyEvent { + type: 'PROXY_EVENT'; + data: { + event: AnyEventObject; + to: string; + }; +} + +export const fromWorkerfiedActor = ( + worker: Worker +): WorkerActorLogic => ({ + config: Worker, + + start: (state, actorScope) => { + const { self, system } = actorScope; + console.log('Starting fromWorkerActor [+]', state, actorScope); + worker.postMessage(workerCommands.startActor()); + console.log('Worker created fromWorkerActor [-]', worker); + const workerState = { + worker, + snapshot: null + }; + + worker.addEventListener('message', (event) => { + const eventFromWorker = event.data as AnyEventObject; + + console.log('message received from worker', eventFromWorker, event); + console.log( + 'matching', + eventFromWorker.type, + WORKER_EVENTS.STATE_SNAPSHOT, + eventFromWorker.type === WORKER_EVENTS.STATE_SNAPSHOT + ); + if (eventFromWorker.type == 'STATE_SNAPSHOT') { + // workerState.snapshot = event.data.snapshot; + console.log('passing snapshot', eventFromWorker.data.snapshot); + self.send(eventFromWorker); + return state; + } + + if (event.type === WORKER_EVENTS.PROXY_EVENT) { + const proxyEvent = event as ProxyEvent; + if (proxyEvent.data.to === 'parent' && self._parent) { + console.log('Relaying to parent', proxyEvent.data); + self._parent.send(proxyEvent.data.event); + return state; + } + + system.get(proxyEvent.data.to).send(proxyEvent.data.event); + return state; + } + }); + + instanceStates.set(self, workerState); + }, + transition: (state, event, actorScope) => { + const { self } = actorScope; + const workerState = instanceStates.get(self); + console.log('Transitioning fromWorkerActor...', state, event, actorScope, workerState); + if (event.type === 'xstate.stop') { + console.log('Stopping fromWorkerActor...', state, event, actorScope); + workerState.worker.postMessage(workerCommands.stopActor()); + workerState.worker.terminate(); + return { + ...state, + status: 'stopped', + error: undefined + }; + } + if (event.type == WORKER_EVENTS.STATE_SNAPSHOT) { + const snapshot = (event as STATE_SNAPSHOT_EVENT).data.snapshot; + console.log('Syncing snapshot with worker', snapshot); + return { + ...state, + ...(snapshot || {}) + }; + } + + workerState.worker.postMessage(workerCommands.sendEvent(event)); + const nextState = { + ...state + // matches: (value: StateValue) => matchesState(value, state?.value) + }; + console.log('Transitioned fromWorkerActor...', workerState, nextState); + return nextState; + }, + getInitialSnapshot: (_, input) => { + return { + status: 'active', + output: undefined, + error: undefined, + value: 'created', + input, + tags: [], + historyValue: undefined, + context: {}, + matches: function (value: StateValue) { + const currentValue = (this as WorkerSnapshot).value; + console.log('Matching', currentValue, value); + return matchesState(currentValue, value); + } + } as unknown as AnyMachineSnapshot; + }, + + getPersistedSnapshot: (snapshot) => snapshot, + restoreSnapshot: (snapshot) => snapshot as WorkerSnapshot +}); diff --git a/src/actors/worker/index.ts b/src/actors/worker/index.ts new file mode 100644 index 00000000..1f69094c --- /dev/null +++ b/src/actors/worker/index.ts @@ -0,0 +1,2 @@ +export { fromWorkerfiedActor } from './fromWorkerfiedActor'; +export { workerfyActor } from './workerfy'; diff --git a/src/actors/worker/workerfy.ts b/src/actors/worker/workerfy.ts new file mode 100644 index 00000000..784a56c5 --- /dev/null +++ b/src/actors/worker/workerfy.ts @@ -0,0 +1,92 @@ +import { AnyActorLogic, AnyActorRef, Subscription, createActor, setup } from 'xstate'; +import { WORKER_COMMANDS, workerEvents } from './events'; + +interface ProxyActorContext { + proxyToId: string; +} + +interface ProxyActorInput { + proxyToId: string; +} + +const ProxyActor = setup({ + types: { + context: {} as ProxyActorContext, + input: {} as ProxyActorInput + } +}).createMachine({ + id: 'proxy-actor', + initial: 'idle', + context: ({ input }) => ({ + proxyToId: input.proxyToId + }), + + states: { + idle: { + on: { + '*': { + actions: [ + ({ event, context }) => console.log('Proxying event', event, 'to', context.proxyToId), + ({ event, context }) => postMessage(workerEvents.proxyEvent(event, context.proxyToId)) + ] + } + } + } + } +}); + +const syncSnapshot = (actorRef: AnyActorRef) => { + return actorRef.subscribe((snapshot) => { + console.log('Worker sending state snapshot...', snapshot.toJSON()); + postMessage(workerEvents.stateSnapshot(snapshot.toJSON())); + }); +}; + +export const workerfyActor = (actor: AnyActorLogic) => { + let actorRef: AnyActorRef | null = null; + let snapshotSubscription: Subscription | null = null; + const parentProxy = createActor(ProxyActor, { + input: { + proxyToId: 'parent' + } + }).start(); + + addEventListener('message', (event) => { + console.log('Worker received message', event.data); + + if (event.data.type === WORKER_COMMANDS.START_ACTOR) { + actorRef = createActor(actor, { + input: event.data.input, + parent: parentProxy + }); + + console.log('Worker created actor', actor); + snapshotSubscription = syncSnapshot(actorRef); + actorRef.start(); + console.log('Worker starting actor...'); + console.log('Worker started state Subscription', snapshotSubscription); + } + + if (event.data.type === WORKER_COMMANDS.STOP_ACTOR) { + snapshotSubscription?.unsubscribe && snapshotSubscription.unsubscribe(); + actorRef?.stop && actorRef.stop(); + } + + if (event.data.type === WORKER_COMMANDS.SEND_EVENT) { + if (!actorRef) { + throw new Error('Cannot send event to uninitialized actor'); + } + actorRef.send(event.data.event); + } + + if (event.data.type === WORKER_COMMANDS.GET_STATE) { + if (!actorRef) { + throw new Error('Cannot get state of uninitialized actor'); + } + const snapshot = actorRef.getSnapshot().toJSON(); + postMessage(workerEvents.stateSnapshot(snapshot)); + } + }); + + return actorRef; +}; From 81eca0c9426152149e5ac049ce18b72661af42df Mon Sep 17 00:00:00 2001 From: Tharun T Date: Fri, 31 May 2024 20:55:11 +0530 Subject: [PATCH 05/17] fix: package.json module field - typo has been replaced by correct file name Signed-off-by: Tharun T --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6d17bd84..1f397c1b 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "url": "git+ssh://git@github.com/layer5io/sistent.git" }, "main": "./dist/index.js", - "module": "./dist/index..js", + "module": "./dist/index.mjs", "types": "./dist/index.d.ts", "files": [ "dist" From 010fc23db205d1fb938cbe8ee8b4e14f197756c7 Mon Sep 17 00:00:00 2001 From: aabidsofi19 <65964225+aabidsofi19@users.noreply.github.com> Date: Tue, 4 Jun 2024 17:08:21 +0530 Subject: [PATCH 06/17] Revert "Fix: package.json module field" --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1f397c1b..6d17bd84 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "url": "git+ssh://git@github.com/layer5io/sistent.git" }, "main": "./dist/index.js", - "module": "./dist/index.mjs", + "module": "./dist/index..js", "types": "./dist/index.d.ts", "files": [ "dist" From a4b5b5d3aff769a126eaaaa4623c4bf4f888ab01 Mon Sep 17 00:00:00 2001 From: aabidsofi19 Date: Mon, 3 Jun 2024 22:12:53 +0530 Subject: [PATCH 07/17] feat: enhance stepper Signed-off-by: aabidsofi19 --- src/custom/Stepper/index.tsx | 22 ++++++++++++++++------ src/icons/Add/AddIcon.tsx | 3 +-- src/theme/index.tsx | 4 ++++ src/theme/theme.ts | 24 ------------------------ 4 files changed, 21 insertions(+), 32 deletions(-) diff --git a/src/custom/Stepper/index.tsx b/src/custom/Stepper/index.tsx index 3ecaa844..f49b99db 100644 --- a/src/custom/Stepper/index.tsx +++ b/src/custom/Stepper/index.tsx @@ -1,8 +1,9 @@ -import { Box, IconProps, Stack, Step, StepConnector, StepLabel, Stepper } from '@mui/material'; +import { Box, Stack, Step, StepConnector, StepLabel, Stepper, useTheme } from '@mui/material'; import { stepConnectorClasses } from '@mui/material/StepConnector'; import { StepIconProps } from '@mui/material/StepIcon'; import { styled } from '@mui/system'; import React, { useMemo, useState } from 'react'; +import { IconProps } from '../../icons/types'; interface ColorlibStepIconPropsI extends StepIconProps { icons: React.ComponentType[]; @@ -23,6 +24,7 @@ interface CustomizedStepperPropsI { stepLabels: string[]; children: React.ReactNode; icons: React.ComponentType[]; + ContentWrapper?: React.ComponentType; } interface UseStepperI { @@ -100,9 +102,10 @@ function ColorlibStepIcon(props: ColorlibStepIconPropsI) { const { active, completed, className, icons } = props; const Icon = icons[Number(props.icon) - 1]; + const theme = useTheme(); return ( - {Icon ? : null} + {Icon ? : null} ); } @@ -111,11 +114,18 @@ const CustomizedStepper: React.FC = ({ stepLabels, activeStep, children, - icons + icons, + ContentWrapper = StepContentWrapper }) => { + const theme = useTheme(); + return ( - - + + }> {stepLabels.map((label) => ( @@ -128,7 +138,7 @@ const CustomizedStepper: React.FC = ({ ))} - {children} + {children} ); }; diff --git a/src/icons/Add/AddIcon.tsx b/src/icons/Add/AddIcon.tsx index b2524af8..56355125 100644 --- a/src/icons/Add/AddIcon.tsx +++ b/src/icons/Add/AddIcon.tsx @@ -16,8 +16,7 @@ export const AddIcon = ({ data-testid="add-icon-svg" {...props} > - - + ); }; diff --git a/src/theme/index.tsx b/src/theme/index.tsx index 975bb88e..e054fbd4 100644 --- a/src/theme/index.tsx +++ b/src/theme/index.tsx @@ -1,3 +1,5 @@ +import { styled, useTheme } from '@mui/material'; + export { darkModePalette, lightModePalette } from './palette'; export { typography } from './typography'; @@ -6,3 +8,5 @@ export { SistentThemeProviderWithoutBaseLine } from './ThemeProvider'; export * from './colors'; + +export { styled, useTheme }; diff --git a/src/theme/theme.ts b/src/theme/theme.ts index 369afbfa..76b6dfdd 100644 --- a/src/theme/theme.ts +++ b/src/theme/theme.ts @@ -16,27 +16,3 @@ export const createCustomTheme = (mode: PaletteMode) => { breakpoints: {} }); }; - -/* - const commonPalette = { - palette: { - paletteType, - ...(paletteType === 'light' ? lightModePalette : darkModePalette) - } - }; - - - const palette = - paletteType === 'dark' - ? { - mode: 'dark', - ...commonPalette, - text: { - main: '#FFFFFF' - } - } - : { - mode: 'light', - ...commonPalette - }; - */ From 458c26e21d926cac697cb355d881f3e41c25dfb7 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Fri, 7 Jun 2024 15:48:49 +0530 Subject: [PATCH 08/17] fix(click): tooltip Signed-off-by: Sudhanshu Dasgupta --- src/custom/Markdown/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/custom/Markdown/index.tsx b/src/custom/Markdown/index.tsx index 02cff6ac..a074a93b 100644 --- a/src/custom/Markdown/index.tsx +++ b/src/custom/Markdown/index.tsx @@ -66,10 +66,10 @@ export const RenderMarkdownTooltip: React.FC = ({ content } a: ({ ...props }) => ( { - e.preventDefault(); window.open(props.href, '_blank'); + e.stopPropagation(); }} - href={props.href} + as="a" > {props.children} From 4e8f5c4772fc469b35b5fbf914adcfa20073febf Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Wed, 5 Jun 2024 03:08:19 +0530 Subject: [PATCH 09/17] feat(action): button Signed-off-by: Sudhanshu Dasgupta --- src/custom/Modal/index.tsx | 32 ++++++++++++++++++++++++++++++-- src/custom/index.tsx | 1 + 2 files changed, 31 insertions(+), 2 deletions(-) diff --git a/src/custom/Modal/index.tsx b/src/custom/Modal/index.tsx index 60073fc3..59a71da7 100644 --- a/src/custom/Modal/index.tsx +++ b/src/custom/Modal/index.tsx @@ -1,6 +1,6 @@ import { DialogProps, styled } from '@mui/material'; import React, { useRef, useState } from 'react'; -import { Dialog, IconButton, Paper, Typography } from '../../base'; +import { Box, Dialog, IconButton, Paper, Typography } from '../../base'; import { ContainedButton, OutlinedButton, TextButton } from '../../base/Button/Button'; import { iconLarge, iconMedium } from '../../constants/iconsSizes'; import { CloseIcon, InfoCircleIcon } from '../../icons'; @@ -172,7 +172,7 @@ export const ModalFooter: React.FC = ({ helpText, children, va }; // ModalButtonPrimary -export const ModalButtonPrimary: React.FC = styled(ContainedButton)(({ theme }) => ({ +export const ModalButtonPrimary = styled(ContainedButton)(({ theme }) => ({ backgroundColor: theme.palette.background.brand?.default, color: theme.palette.text.constant?.white, '&:hover': { @@ -215,3 +215,31 @@ export const ModalButtonDanger = styled(ContainedButton)(({ theme }) => ({ background: theme.palette.background.error?.hover } })); + +const ButtonContainer = styled(Box)(() => ({ + width: '100%', + display: 'flex', + justifyContent: 'end', + gap: '1rem' +})); + +interface PrimaryActionButtonsProps { + primaryText: string; + secondaryText: string; + primaryButtonProps?: React.ComponentProps; + secondaryButtonProps?: React.ComponentProps; +} + +export const PrimaryActionButtons: React.FC = ({ + primaryText, + secondaryText, + primaryButtonProps, + secondaryButtonProps +}) => { + return ( + + {primaryText} + {secondaryText} + + ); +}; diff --git a/src/custom/index.tsx b/src/custom/index.tsx index 97956f51..6ce7b334 100644 --- a/src/custom/index.tsx +++ b/src/custom/index.tsx @@ -84,6 +84,7 @@ export { ModalButtonSecondary, ModalButtonTertiary, ModalFooter, + PrimaryActionButtons, useModal } from './Modal'; From 9cd1c51a09b339d6e0937ad0dc9580736833a7ad Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Wed, 5 Jun 2024 16:35:55 +0530 Subject: [PATCH 10/17] fix(button): rearrange Signed-off-by: Sudhanshu Dasgupta --- src/custom/Modal/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/custom/Modal/index.tsx b/src/custom/Modal/index.tsx index 59a71da7..110afb56 100644 --- a/src/custom/Modal/index.tsx +++ b/src/custom/Modal/index.tsx @@ -238,8 +238,8 @@ export const PrimaryActionButtons: React.FC = ({ }) => { return ( - {primaryText} {secondaryText} + {primaryText} ); }; From 0d07c3019153130a002ff43aec641ac2658300ca Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Wed, 5 Jun 2024 18:40:38 +0530 Subject: [PATCH 11/17] fix(margin): markdown Signed-off-by: Sudhanshu Dasgupta --- src/custom/Markdown/style.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/custom/Markdown/style.tsx b/src/custom/Markdown/style.tsx index cfcd3f36..127d45cb 100644 --- a/src/custom/Markdown/style.tsx +++ b/src/custom/Markdown/style.tsx @@ -12,6 +12,7 @@ export const StyledMarkdown = styled('a')(({ theme }) => ({ export const StyledMarkdownP = styled('p')(({ theme }) => ({ color: theme.palette.text.default, + marginBlock: '0px', ...theme.typography.textB1Regular })); @@ -61,10 +62,12 @@ export const StyledMarkdownLi = styled('li')(({ theme }) => ({ export const StyledMarkdownTh = styled('th')(({ theme }) => ({ color: theme.palette.text.default, - ...theme.typography.textH3Medium + ...theme.typography.textH3Medium, + marginBlock: '0px' })); export const StyledMarkdownTd = styled('td')(({ theme }) => ({ color: theme.palette.text.default, + marginBlock: '0px', ...theme.typography.textB1Regular })); From cf1578b44c2eb096e86fff13c53332109dcd8174 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Tue, 28 May 2024 18:25:46 +0530 Subject: [PATCH 12/17] feat(theme): tables Signed-off-by: Sudhanshu Dasgupta --- src/custom/ResponsiveDataTable.tsx | 73 ++++++++++++++++++++++++++---- 1 file changed, 65 insertions(+), 8 deletions(-) diff --git a/src/custom/ResponsiveDataTable.tsx b/src/custom/ResponsiveDataTable.tsx index 07fd470f..5ba676b3 100644 --- a/src/custom/ResponsiveDataTable.tsx +++ b/src/custom/ResponsiveDataTable.tsx @@ -1,6 +1,61 @@ +import { Theme, ThemeProvider, createTheme } from '@mui/material'; import MUIDataTable from 'mui-datatables'; import React, { useCallback } from 'react'; +const dataTableTheme = (theme: Theme) => + createTheme({ + components: { + MuiTable: { + styleOverrides: { + root: { + border: `2px solid ${theme.palette.border.normal}`, + width: '-webkit-fill-available', + '@media (max-width: 500px)': { + wordWrap: 'break-word' + } + } + } + }, + MUIDataTableHeadCell: { + styleOverrides: { + data: { + fontWeight: 'bold', + textTransform: 'uppercase' + }, + root: { + fontWeight: 'bold', + textTransform: 'uppercase', + color: theme.palette.text.default + } + } + }, + MUIDataTableSearch: { + styleOverrides: { + main: { + '@media (max-width: 600px)': { + justifyContent: 'center' + } + } + } + }, + MuiInput: { + styleOverrides: { + root: { + '&:before': { + borderBottom: `2px solid ${theme.palette.border.brand}` + }, + '&.Mui-focused:after': { + borderBottom: `2px solid ${theme.palette.border.brand}` + }, + '&:hover:not(.Mui-disabled):before': { + borderBottom: `2px solid ${theme.palette.border.brand}` + } + } + } + } + } + }); + export interface Column { name: string; label: string; @@ -130,14 +185,16 @@ const ResponsiveDataTable = ({ }; return ( - + + + ); }; From f78370665bd27fe9951b44d9b58eb820aa12d51d Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Fri, 31 May 2024 03:26:54 +0530 Subject: [PATCH 13/17] fix(theme): comps Signed-off-by: Sudhanshu Dasgupta --- src/custom/ResponsiveDataTable.tsx | 38 +++++++++++++++++++++++++++++- 1 file changed, 37 insertions(+), 1 deletion(-) diff --git a/src/custom/ResponsiveDataTable.tsx b/src/custom/ResponsiveDataTable.tsx index 5ba676b3..f29f9fa5 100644 --- a/src/custom/ResponsiveDataTable.tsx +++ b/src/custom/ResponsiveDataTable.tsx @@ -8,7 +8,7 @@ const dataTableTheme = (theme: Theme) => MuiTable: { styleOverrides: { root: { - border: `2px solid ${theme.palette.border.normal}`, + // border: `2px solid ${theme.palette.border.normal}`, width: '-webkit-fill-available', '@media (max-width: 500px)': { wordWrap: 'break-word' @@ -38,6 +38,42 @@ const dataTableTheme = (theme: Theme) => } } }, + MuiCheckbox: { + styleOverrides: { + root: { + intermediate: false, + color: 'transparent', + '&.Mui-checked': { + color: theme.palette.text.default, + '& .MuiSvgIcon-root': { + width: '1.25rem', + height: '1.25rem', + borderColor: theme.palette.border.brand, + marginLeft: '0px', + padding: '0px' + } + }, + '&.MuiCheckbox-indeterminate': { + color: theme.palette.background.brand?.default + }, + '& .MuiSvgIcon-root': { + width: '1.25rem', + height: '1.25rem', + border: `.75px solid ${theme.palette.border.strong}`, + borderRadius: '2px', + padding: '0px' + }, + '&:hover': { + backgroundColor: 'transparent' + }, + '&.Mui-disabled': { + '&:hover': { + cursor: 'not-allowed' + } + } + } + } + }, MuiInput: { styleOverrides: { root: { From 22bbe67990fbfab2804f41687b572adbc217a258 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Fri, 31 May 2024 18:03:55 +0530 Subject: [PATCH 14/17] fix(theme): enhance Signed-off-by: Sudhanshu Dasgupta --- src/custom/ResponsiveDataTable.tsx | 31 ++++++++++++++++++++++++++++-- src/theme/palette.ts | 9 +++++++-- 2 files changed, 36 insertions(+), 4 deletions(-) diff --git a/src/custom/ResponsiveDataTable.tsx b/src/custom/ResponsiveDataTable.tsx index f29f9fa5..830daa8a 100644 --- a/src/custom/ResponsiveDataTable.tsx +++ b/src/custom/ResponsiveDataTable.tsx @@ -12,7 +12,9 @@ const dataTableTheme = (theme: Theme) => width: '-webkit-fill-available', '@media (max-width: 500px)': { wordWrap: 'break-word' - } + }, + background: theme.palette.background.constant?.table, + color: theme.palette.text.default } } }, @@ -20,7 +22,8 @@ const dataTableTheme = (theme: Theme) => styleOverrides: { data: { fontWeight: 'bold', - textTransform: 'uppercase' + textTransform: 'uppercase', + color: theme.palette.text.default }, root: { fontWeight: 'bold', @@ -74,6 +77,30 @@ const dataTableTheme = (theme: Theme) => } } }, + MuiTableCell: { + styleOverrides: { + body: { + color: theme.palette.text.default + }, + root: { + borderBottom: 'none' + } + } + }, + MUIDataTablePagination: { + styleOverrides: { + toolbar: { + color: theme.palette.text.default + } + } + }, + MUIDataTableSelectCell: { + styleOverrides: { + headerCell: { + background: theme.palette.background.constant?.table + } + } + }, MuiInput: { styleOverrides: { root: { diff --git a/src/theme/palette.ts b/src/theme/palette.ts index 3369d760..062246e0 100644 --- a/src/theme/palette.ts +++ b/src/theme/palette.ts @@ -33,6 +33,7 @@ declare module '@mui/material/styles' { constant?: { disabled: string; white: string; + table: string; }; inverse?: string; brand?: Interactiveness; @@ -84,6 +85,7 @@ declare module '@mui/material/styles' { constant?: { white: string; disabled: string; + table: string; }; inverse?: string; brand?: Interactiveness; @@ -116,6 +118,7 @@ declare module '@mui/material/styles' { constant?: { white: string; disabled: string; + table: string; }; inverse?: string; brand?: Interactiveness; @@ -252,7 +255,8 @@ export const lightModePalette: PaletteOptions = { code: Colors.charcoal[90], constant: { white: Colors.accentGrey[100], - disabled: Colors.charcoal[70] + disabled: Colors.charcoal[70], + table: Colors.charcoal[100] }, surfaces: Colors.accentGrey[100] }, @@ -365,7 +369,8 @@ export const darkModePalette: PaletteOptions = { code: Colors.accentGrey[90], constant: { white: Colors.accentGrey[100], - disabled: Colors.charcoal[70] + disabled: Colors.charcoal[70], + table: '#363636' }, surfaces: Colors.accentGrey[10] }, From a304ed5a2e60ad01c09812ab4f4ebb786370ff00 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Mon, 3 Jun 2024 22:43:24 +0530 Subject: [PATCH 15/17] fix(border): theme Signed-off-by: Sudhanshu Dasgupta --- src/custom/ResponsiveDataTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/custom/ResponsiveDataTable.tsx b/src/custom/ResponsiveDataTable.tsx index 830daa8a..22d5bf67 100644 --- a/src/custom/ResponsiveDataTable.tsx +++ b/src/custom/ResponsiveDataTable.tsx @@ -83,7 +83,7 @@ const dataTableTheme = (theme: Theme) => color: theme.palette.text.default }, root: { - borderBottom: 'none' + borderBottom: `1px solid ${theme.palette.border.default}` } } }, From dacafba74310c3719761dbdb567ced7ade700cea Mon Sep 17 00:00:00 2001 From: aabidsofi19 Date: Mon, 10 Jun 2024 03:30:56 +0530 Subject: [PATCH 16/17] feat: remove logs Signed-off-by: aabidsofi19 --- src/actors/worker/fromWorkerfiedActor.ts | 22 +++++----------------- src/actors/worker/workerfy.ts | 6 ------ 2 files changed, 5 insertions(+), 23 deletions(-) diff --git a/src/actors/worker/fromWorkerfiedActor.ts b/src/actors/worker/fromWorkerfiedActor.ts index aeb860b9..eebf1496 100644 --- a/src/actors/worker/fromWorkerfiedActor.ts +++ b/src/actors/worker/fromWorkerfiedActor.ts @@ -40,7 +40,6 @@ export const fromWorkerfiedActor = ( const { self, system } = actorScope; console.log('Starting fromWorkerActor [+]', state, actorScope); worker.postMessage(workerCommands.startActor()); - console.log('Worker created fromWorkerActor [-]', worker); const workerState = { worker, snapshot: null @@ -48,17 +47,7 @@ export const fromWorkerfiedActor = ( worker.addEventListener('message', (event) => { const eventFromWorker = event.data as AnyEventObject; - - console.log('message received from worker', eventFromWorker, event); - console.log( - 'matching', - eventFromWorker.type, - WORKER_EVENTS.STATE_SNAPSHOT, - eventFromWorker.type === WORKER_EVENTS.STATE_SNAPSHOT - ); if (eventFromWorker.type == 'STATE_SNAPSHOT') { - // workerState.snapshot = event.data.snapshot; - console.log('passing snapshot', eventFromWorker.data.snapshot); self.send(eventFromWorker); return state; } @@ -81,7 +70,6 @@ export const fromWorkerfiedActor = ( transition: (state, event, actorScope) => { const { self } = actorScope; const workerState = instanceStates.get(self); - console.log('Transitioning fromWorkerActor...', state, event, actorScope, workerState); if (event.type === 'xstate.stop') { console.log('Stopping fromWorkerActor...', state, event, actorScope); workerState.worker.postMessage(workerCommands.stopActor()); @@ -94,19 +82,20 @@ export const fromWorkerfiedActor = ( } if (event.type == WORKER_EVENTS.STATE_SNAPSHOT) { const snapshot = (event as STATE_SNAPSHOT_EVENT).data.snapshot; - console.log('Syncing snapshot with worker', snapshot); return { ...state, ...(snapshot || {}) }; } - workerState.worker.postMessage(workerCommands.sendEvent(event)); + try { + workerState.worker.postMessage(workerCommands.sendEvent(event)); + } catch (error) { + console.error('Error sending event to worker', error, event); + } const nextState = { ...state - // matches: (value: StateValue) => matchesState(value, state?.value) }; - console.log('Transitioned fromWorkerActor...', workerState, nextState); return nextState; }, getInitialSnapshot: (_, input) => { @@ -121,7 +110,6 @@ export const fromWorkerfiedActor = ( context: {}, matches: function (value: StateValue) { const currentValue = (this as WorkerSnapshot).value; - console.log('Matching', currentValue, value); return matchesState(currentValue, value); } } as unknown as AnyMachineSnapshot; diff --git a/src/actors/worker/workerfy.ts b/src/actors/worker/workerfy.ts index 784a56c5..9cf25722 100644 --- a/src/actors/worker/workerfy.ts +++ b/src/actors/worker/workerfy.ts @@ -37,7 +37,6 @@ const ProxyActor = setup({ const syncSnapshot = (actorRef: AnyActorRef) => { return actorRef.subscribe((snapshot) => { - console.log('Worker sending state snapshot...', snapshot.toJSON()); postMessage(workerEvents.stateSnapshot(snapshot.toJSON())); }); }; @@ -52,19 +51,14 @@ export const workerfyActor = (actor: AnyActorLogic) => { }).start(); addEventListener('message', (event) => { - console.log('Worker received message', event.data); - if (event.data.type === WORKER_COMMANDS.START_ACTOR) { actorRef = createActor(actor, { input: event.data.input, parent: parentProxy }); - console.log('Worker created actor', actor); snapshotSubscription = syncSnapshot(actorRef); actorRef.start(); - console.log('Worker starting actor...'); - console.log('Worker started state Subscription', snapshotSubscription); } if (event.data.type === WORKER_COMMANDS.STOP_ACTOR) { From 59fafb5c7ac2e5a9e036380fdfb6c0bc7b0d0127 Mon Sep 17 00:00:00 2001 From: aabidsofi19 Date: Mon, 10 Jun 2024 11:30:30 +0530 Subject: [PATCH 17/17] fix: dont send unserializable snapshots Signed-off-by: aabidsofi19 --- src/actors/validators/dataValidator.ts | 3 ++- src/actors/worker/fromWorkerfiedActor.ts | 4 ++-- src/actors/worker/workerfy.ts | 8 +++++++- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/actors/validators/dataValidator.ts b/src/actors/validators/dataValidator.ts index 2efd797a..50dc47b9 100644 --- a/src/actors/validators/dataValidator.ts +++ b/src/actors/validators/dataValidator.ts @@ -168,13 +168,14 @@ export const dataValidatorMachine = setup({ waiting: {}, debouncing: { after: { - debounceTimeout: '#validationMachine.validatingData' + debounceTimeout: '#validatingData' } } } }, validatingData: { + id: 'validatingData', invoke: { src: 'ValidateActor', input: ({ context }: { context: ValidationMachineContext }) => ({ diff --git a/src/actors/worker/fromWorkerfiedActor.ts b/src/actors/worker/fromWorkerfiedActor.ts index eebf1496..4d3f7dd0 100644 --- a/src/actors/worker/fromWorkerfiedActor.ts +++ b/src/actors/worker/fromWorkerfiedActor.ts @@ -81,7 +81,7 @@ export const fromWorkerfiedActor = ( }; } if (event.type == WORKER_EVENTS.STATE_SNAPSHOT) { - const snapshot = (event as STATE_SNAPSHOT_EVENT).data.snapshot; + const snapshot = (event as STATE_SNAPSHOT_EVENT).data.snapshot as AnyMachineSnapshot; return { ...state, ...(snapshot || {}) @@ -110,7 +110,7 @@ export const fromWorkerfiedActor = ( context: {}, matches: function (value: StateValue) { const currentValue = (this as WorkerSnapshot).value; - return matchesState(currentValue, value); + return matchesState(value, currentValue); } } as unknown as AnyMachineSnapshot; }, diff --git a/src/actors/worker/workerfy.ts b/src/actors/worker/workerfy.ts index 9cf25722..5308eb7c 100644 --- a/src/actors/worker/workerfy.ts +++ b/src/actors/worker/workerfy.ts @@ -37,7 +37,13 @@ const ProxyActor = setup({ const syncSnapshot = (actorRef: AnyActorRef) => { return actorRef.subscribe((snapshot) => { - postMessage(workerEvents.stateSnapshot(snapshot.toJSON())); + const jsonSnapshot = snapshot.toJSON(); + delete jsonSnapshot.children; // children are not serializable + try { + postMessage(workerEvents.stateSnapshot(jsonSnapshot)); + } catch (error) { + console.error('Error sending snapshot from worker', error, jsonSnapshot); + } }); };