Options
All
  • Public
  • Public/Protected
  • All
Menu

Module "core/Nucleon/index"

Nucleon is a generic state machine for performing CRUD operations on a resource.

States
  • idle - resource can be edited;
    • template - this is a new resource, context.data is null;
      • clean - no edits have been made, context.edits is null;
        • valid - actions.validate allows submitting empty template with services.sendPost;
        • invalid - actions.validate disallows submitting empty template with services.sendPost;
      • dirty - template has been edited, context.edits is not null;
        • valid - actions.validate allows submitting template with services.sendPost;
        • invalid - actions.validate disallows submitting template with services.sendPost;
    • snapshot - this is an existing resource stored in context.data;
      • clean - no edits have been made, context.edits is null;
        • valid - actions.validate allows sending PATCH with no changes using services.sendPatch;
        • invalid - actions.validate requires changes before submitting changes with services.sendPatch;
      • dirty - existing resource has been edited, context.edits is not null;
        • valid - actions.validate allows submitting edits with services.sendPatch;
        • invalid - actions.validate disallows submitting edits with services.sendPatch;
  • busy - CRUD operation is in progress;
    • fetching - services.sendGet is loading the resource;
    • creating - services.sendPost is creating the resource;
    • updating - services.sendPatch is updating the resource;
    • deleting - services.sendDelete is deleting the resource;
  • fail - one of the CRUD operations has failed

Context
  • data - loaded resource or null;
  • edits - changes to the resource in context.data;
  • errors - array of validation errors, format defined by actions.validate;

Events
  • SET_DATA - sets context.data and transitions to the appropriate template or snapshot state;
  • EDIT (idle only) - adds an edit to context.edits and transitions to the appropriate valid or invalid state;
  • UNDO (idle only) - removes all edits and transitions to the appropriate valid or invalid state;
  • FETCH - loads a resource by transitioning to busy.fetching and running services.sendGet;
  • DELETE - deletes a resource by transitioning to busy.deleting and running services.sendDelete;
  • SUBMIT (valid only) - updates or creates a resource;

Actions:
  • validate - runs every time resource changes, put your v8n logic there;

Services
  • sendGet - fetches resource snapshot, returning parsed JSON or throwing an error;
  • sendPost - creates a resource, returning its parsed JSON or throwing an error;
  • sendPatch - updates a resource, returning its full parsed JSON or throwing an error;
  • sendDelete - deletes a resource, returning anything or throwing an error;

Index

Type aliases

Variables

Type aliases

Context

Context<TData, TError, TFailure>: { data: TData | null; edits: Partial<TData> | null; errors: TError[]; failure: TFailure | null }

Nucleon state machine context.

see

https://xstate.js.org/docs/guides/typescript.html#using-typescript

template

TData Type of data stored in the context, usually a hypermedia resource.

template

TError Type of error returned by the validate action.

template

TFailure Type of non-validation error thrown in request services.

Type parameters

  • TData: Data

  • TError

  • TFailure

Type declaration

  • data: TData | null

    Unmodified API resource snapshot. Can be null before it's loaded or once it's deleted.

  • edits: Partial<TData> | null

    Local changes to the API resource snapshot. Can be null before resource is loaded or once it's deleted.

  • errors: TError[]

    Form validation errors returned by the validate action or with request rejection.

  • failure: TFailure | null

    Request rejection info in fail state when it's unrelated to form validation.

Event

Event<TData>: { data: TData | null; type: "SET_DATA" } | { data: Partial<TData>; type: "EDIT" } | { type: "UNDO" } | { type: "FETCH" } | { type: "DELETE" } | { type: "SUBMIT" }

Nucleon state machine event.

see

https://xstate.js.org/docs/guides/typescript.html#using-typescript

template

TData Type of data stored in the context, usually a hypermedia resource.

Type parameters

  • TData: Data

State

State<TData, TError, TFailure>: { context: Context<TData, TError> & { failure: TFailure }; value: "fail" } | { context: Context<TData, TError> & { failure: null }; value: "busy" } | { context: Context<TData, TError> & { data: null; edits: null; failure: null }; value: { busy: "fetching" } } | { context: Context<TData, TError> & { data: null; edits: Partial<TData>; failure: null }; value: { busy: "creating" } } | { context: Context<TData, TError> & { data: TData; edits: Partial<TData>; failure: null }; value: { busy: "updating" } } | { context: Context<TData, TError> & { data: TData; failure: null }; value: { busy: "deleting" } } | { context: Context<TData, TError> & { failure: null }; value: "idle" } | { context: Context<TData, TError> & { data: TData; failure: null }; value: { idle: "snapshot" } } | { context: Context<TData, TError> & { data: TData; edits: null; failure: null }; value: { idle: { snapshot: "clean" } } } | { context: Context<TData, TError> & { data: TData; edits: null; failure: null }; value: { idle: { snapshot: { clean: "valid" } } } } | { context: Context<TData, TError> & { data: TData; edits: null; failure: null }; value: { idle: { snapshot: { clean: "invalid" } } } } | { context: Context<TData, TError> & { data: TData; edits: Partial<TData>; failure: null }; value: { idle: { snapshot: "dirty" } } } | { context: Context<TData, TError> & { data: TData; edits: Partial<TData>; failure: null }; value: { idle: { snapshot: { dirty: "valid" } } } } | { context: Context<TData, TError> & { data: TData; edits: Partial<TData>; failure: null }; value: { idle: { snapshot: { dirty: "invalid" } } } } | { context: Context<TData, TError> & { data: null; failure: null }; value: { idle: "template" } } | { context: Context<TData, TError> & { data: null; edits: null; failure: null }; value: { idle: { template: "clean" } } } | { context: Context<TData, TError> & { data: null; edits: null; failure: null }; value: { idle: { template: { clean: "valid" } } } } | { context: Context<TData, TError> & { data: null; edits: null; failure: null }; value: { idle: { template: { clean: "invalid" } } } } | { context: Context<TData, TError> & { data: null; edits: Partial<TData>; failure: null }; value: { idle: { template: "dirty" } } } | { context: Context<TData, TError> & { data: null; edits: Partial<TData>; failure: null }; value: { idle: { template: { dirty: "valid" } } } } | { context: Context<TData, TError> & { data: null; edits: Partial<TData>; failure: null }; value: { idle: { template: { dirty: "invalid" } } } }

Nucleon state machine typestate.

template

TData Type of data stored in the context, usually a hypermedia resource.

template

TError Type of error returned by the validate action.

Type parameters

  • TData: Data

  • TError

  • TFailure

Variables

Const machine

machine: StateMachine<{ data: TData | null; edits: Partial<TData> | null; errors: TError[]; failure: TFailure | null }, any, { type: "UNDO" } | { type: "FETCH" } | { type: "DELETE" } | { type: "SUBMIT" } | { data: TData | null; type: "SET_DATA" } | { data: Partial<TData>; type: "EDIT" }, { context: Context<TData, TError> & { failure: TFailure }; value: "fail" } | { context: Context<TData, TError> & { failure: null }; value: "busy" } | { context: Context<TData, TError> & { data: null; edits: null; failure: null }; value: { busy: "fetching" } } | { context: Context<TData, TError> & { data: null; edits: Partial<TData>; failure: null }; value: { busy: "creating" } } | { context: Context<TData, TError> & { data: TData; edits: Partial<TData>; failure: null }; value: { busy: "updating" } } | { context: Context<TData, TError> & { data: TData; failure: null }; value: { busy: "deleting" } } | { context: Context<TData, TError> & { failure: null }; value: "idle" } | { context: Context<TData, TError> & { data: TData; failure: null }; value: { idle: "snapshot" } } | { context: Context<TData, TError> & { data: TData; edits: null; failure: null }; value: { idle: { snapshot: "clean" } } } | { context: Context<TData, TError> & { data: TData; edits: null; failure: null }; value: { idle: { snapshot: { clean: "valid" } } } } | { context: Context<TData, TError> & { data: TData; edits: null; failure: null }; value: { idle: { snapshot: { clean: "invalid" } } } } | { context: Context<TData, TError> & { data: TData; edits: Partial<TData>; failure: null }; value: { idle: { snapshot: "dirty" } } } | { context: Context<TData, TError> & { data: TData; edits: Partial<TData>; failure: null }; value: { idle: { snapshot: { dirty: "valid" } } } } | { context: Context<TData, TError> & { data: TData; edits: Partial<TData>; failure: null }; value: { idle: { snapshot: { dirty: "invalid" } } } } | { context: Context<TData, TError> & { data: null; failure: null }; value: { idle: "template" } } | { context: Context<TData, TError> & { data: null; edits: null; failure: null }; value: { idle: { template: "clean" } } } | { context: Context<TData, TError> & { data: null; edits: null; failure: null }; value: { idle: { template: { clean: "valid" } } } } | { context: Context<TData, TError> & { data: null; edits: null; failure: null }; value: { idle: { template: { clean: "invalid" } } } } | { context: Context<TData, TError> & { data: null; edits: Partial<TData>; failure: null }; value: { idle: { template: "dirty" } } } | { context: Context<TData, TError> & { data: null; edits: Partial<TData>; failure: null }; value: { idle: { template: { dirty: "valid" } } } } | { context: Context<TData, TError> & { data: null; edits: Partial<TData>; failure: null }; value: { idle: { template: { dirty: "invalid" } } } }> = createMachine<Context, Event, State>({context: {data: null,edits: null,errors: [],failure: null,},entry: ['validate'],id: 'nucleon',initial: 'init',on: {DELETE: { actions: ['clearData', 'clearEdits', 'clearErrors'], target: '#nucleon.busy.deleting' },FETCH: { actions: ['clearData', 'clearEdits', 'clearErrors'], target: '#nucleon.busy.fetching' },SET_DATA: { actions: ['setData', 'clearEdits', 'clearErrors'], target: '#nucleon.init' },},states: {busy: {states: {creating: {invoke: {onDone: { actions: ['setData', 'clearEdits', 'validate'], target: '#nucleon.idle.snapshot' },onError: [{ actions: 'setErrors', cond: 'isV8nErrorEvent', target: '#nucleon.idle' },{ actions: 'setFailure', target: '#nucleon.fail' },],src: 'sendPost',},},deleting: {invoke: {onDone: { actions: ['clearData', 'clearEdits', 'validate'], target: '#nucleon.idle.template' },onError: [{ actions: 'setErrors', cond: 'isV8nErrorEvent', target: '#nucleon.idle' },{ actions: 'setFailure', target: '#nucleon.fail' },],src: 'sendDelete',},},fetching: {invoke: {onDone: { actions: ['setData', 'clearErrors', 'validate'], target: '#nucleon.idle.snapshot' },onError: [{ actions: 'setErrors', cond: 'isV8nErrorEvent', target: '#nucleon.idle' },{ actions: 'setFailure', target: '#nucleon.fail' },],src: 'sendGet',},},updating: {invoke: {onDone: { actions: ['setData', 'clearEdits', 'validate'], target: '#nucleon.idle.snapshot' },onError: [{ actions: 'setErrors', cond: 'isV8nErrorEvent', target: '#nucleon.idle' },{ actions: 'setFailure', target: '#nucleon.fail' },],src: 'sendPatch',},},},},fail: {exit: 'clearFailure',},idle: {initial: 'unknown',on: { EDIT: { actions: ['applyEdit', 'validate'], target: '.unknown' } },states: {snapshot: {initial: 'unknown',states: {clean: {initial: 'unknown',states: {invalid: {},unknown: { always: [{ cond: 'hasErrors', target: 'invalid' }, { target: 'valid' }] },valid: {},},},dirty: {initial: 'unknown',on: {UNDO: {actions: ['clearEdits', 'clearErrors', 'validate'],target: '#nucleon.idle.snapshot.clean',},},states: {invalid: {},unknown: { always: [{ cond: 'hasErrors', target: 'invalid' }, { target: 'valid' }] },valid: { on: { SUBMIT: { target: '#nucleon.busy.updating' } } },},},unknown: {always: [{ cond: 'hasEdits', target: 'dirty' }, { target: 'clean' }],},},},template: {initial: 'unknown',states: {clean: {initial: 'unknown',states: {invalid: {},unknown: { always: [{ cond: 'hasErrors', target: 'invalid' }, { target: 'valid' }] },valid: {},},},dirty: {initial: 'unknown',on: {UNDO: {actions: ['clearEdits', 'clearErrors', 'validate'],target: '#nucleon.idle.template.clean',},},states: {invalid: {},unknown: { always: [{ cond: 'hasErrors', target: 'invalid' }, { target: 'valid' }] },valid: { on: { SUBMIT: { target: '#nucleon.busy.creating' } } },},},unknown: {always: [{ cond: 'hasEdits', target: 'dirty' }, { target: 'clean' }],},},},unknown: {always: [{ cond: 'hasData', target: 'snapshot' }, { target: 'template' }],},},},init: {always: [{ cond: 'hasData', target: 'idle.snapshot' }, { target: 'idle.template' }],},},},{actions,guards,})

Generated using TypeDoc