@rekajs/core

The core package of Reka.

API

Reka

Class

tsx
import { Reka } from '@rekajs/core';
import * as t from '@rekajs/types';
import confetti from 'canvas-confetti';
import { Header } from './path-to-header-component.tsx';
const reka = Reka.create({
  externals: {
    states: {
      myGlobalVariable: 0,
    },
    functions: (reka) => ({
      getGlobalVariable: () => {
        return reka.getExternalState('myGlobalVariable');
      },
      confetti: () => {
        return confetti();
      },
    }),
    components: [
      t.externalComponent({
        name: 'MyReactHeader',
        render: (props) => {
          return <Header {...props} />;
        },
      }),
    ],
  },
});

• create(opts?: RekaOpts): Reka

  Create a new Reka instance

• id: string

• frames: Array<Frame>

  A list of RekaComponent instances

• state: State

  The primary State data structure. Changes to the State will cause all Frames to recompute their output View

• loaded: boolean

• externals: Object

• changes: Array<any>

• volatile: Object

• setHistoryManager(manager: HistoryManager): void

• canUndo(): boolean

• canRedo(): boolean

• undo(): void

• redo(): void

• getCustomKind(name: string): CustomKindDefinition

• getExternalState(key: string): any

• getVolatileState(key: string): any

• setVolatileState<V>(key: string, value: V): V

• updateVolatileState: Function

  @deprecated - Use setVolatileState()

• updateExternalState(key: string, value: any): void

• program: Program

  Get the Program AST node from State. Shorthand for state.program

• components: Object

  All components that exists in the instance. Includes RekaComponents in the Program AST and ExternalComponents that was passed to the instance in the constructor.

• load(state: State, opts?: RekaLoadOpts): void

  Load a new State data type

• sync(evaluateImmediately?: boolean): Promise<Array>

  Sync changes made to the State to all active Frames. You usually do not need to call this manually.

• change(mutator: Function, opts?: RekaChangeOpts): Promise | undefined

  Perform a mutation to the State

  tsx
  reka.change(() => {
    reka.components.push(t.rekaComponent(...))
  })

• createFrame(opts: FrameOpts, cb?: Function): Frame

  Create a new Frame instance

• removeFrame(frame: Frame): void

  Remove an existing Frame instance

• getFrame(id: string): Frame | undefined

  Get a Frame instance by its id

• getExtension<D extends ExtensionDefinition>(definition: D): Extension<D>

  Get an Extension's state from its definition

• getNodeFromId<T extends Type>(id: string, expectedType?: TypeConstructor<T>): T

  Get an AST node by its id from the State

• getParentNode<T extends Type>(node: Type, expectedParentType?: TypeConstructor<T>): T | null

  Get the nearest parent Node of a given AST node in the State.

  tsx
  const state = t.state({
    program: t.program({
      components: [
        t.rekaComponent({
          name: "App"
          ...
        })
      ]
    })
  })
  reka.load(state);
  const appComponent = state.program.components[0];
  console.log(reka.getParentNode(appComponent) === state.program); // true

• getNodeLocation(node: Type): Object

  Get the nearest parent Node and its relative path of a given AST node in the State.

  tsx
  const state = t.state({
    program: t.program({
      components: [
        t.rekaComponent({
          name: "App"
          ...
        })
      ]
    })
  })
  reka.load(state);
  const appComponent = state.program.components[0];
  const location = reka.getNodeLocation(appComponent);
  console.log(location.parent === state.program); // true
  console.log(location.path) // ["components", 0]

• getNodePathStr: Function

• listenToChangeset(subscriber: Function): Function

  Listen for changes and mutations made to the State

  tsx
  reka.listenToChangeset((payload) => {
    console.log(
      'node changed',
      payload.type,
      payload.newValue,
      payload.oldValue,
      payload.name
    );
  });

• subscribe<C>(collect: Function, onCollect: Function, opts?: StateSubscriberOpts): Function

  Subscribe to changes made in a Reka instance

  tsx
  reka.subscribe(
    (state) => ({
      componentNames: state.program.components.map((component) => component.name),
    }),
    (collected) => {
      console.log('component names', collected.componentNames);
    }
  );

• watch(cb: Function): Function

  Watch changes made within a Reka instance

  tsx
  reka.watch(() => {
    console.log(
      'component names',
      state.program.components.map((component) => component.name)
    );
  });

• createCachedQuery: Function

• dispose(): void

  Dispose instance, stops all future computations

• toJSON(): State

• getIdentifiablesAtNode: Function

• getIdentifiableFromIdentifier: Function

• getComponentSlots(component: Component): Array | Map

Frame

Class

Creates a Frame that computes an output View tree for a Component instance. You should not create this instance manually. Instead, use Reka.createFrame(...)

• id: string

  An id to easily identify the Frame instance

• sync: boolean

  Frame only computes (and recomputes) its View when sync is set to true

• opts: FrameOpts

• reka: Reka

• componentName: string

• component: Component | null

• view: FrameView

  Get the output View for the Frame

• getViewFromId<T extends View>(id: string, expectedType?: TypeConstructor<T>): T

  Get a View node by its id

• getParentView<T extends View>(view: View, expectedParentType?: TypeConstructor<T>): T | null

  Get the parent View of the specified View node

• enableSync(): void

  Enable synching. Changes made to the State that affects the Frame's component will cause its View to be recomputed

• disableSync(): void

  Disable synching. Changes made to the State will not cause View to be recomputed

• compute(evaluateImmediately?: boolean, cb?: Function): Promise | undefined

  Compute a View tree

• setProps(props: Record<string,any>): void

  Update the props of the Component associated with the Frame

• listenToChangeset: Function

  Listen for changes and mutations made to the Frame's output View

• dispose(): void

• getViewsForTpl(template: Template): Array<View>

Extension

Class

• reka: Reka

• definition: D

• state: ExtensionStateFromDefinition<D>

• init(): any

• dispose(): void

• subscribe<C extends Record>(collector: Function, subscriber: Function, opts?: StateSubscriberOpts): Function