@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

• volatile: Object

• getCustomKind(name: string): CustomKindDefinition

• getExternalState(key: string): any

• getVolatileState(key: string): any

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

• 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, syncImmediately?: boolean, evaluateImmediately?: boolean): void

  Load a new State data type * * @param state The State data type to load * @param syncImmediately Whether to sync changes made to the State to all active Frames immediately * @param evaluateImmediately Whether to evaluate Frames immediately or defer through a microtask

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

  Sync changes made to the State to all active Frames. You usually do not need to call this manually * * @param evaluateImmediately Whether to evaluate Frames immediately or defer through a microtask

• change(mutator: Function): Promise | undefined

  Perform a mutation to the State

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

• createFrame(opts: FrameOpts): Promise<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

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

  Get a parent Node of an AST node

• listenToChanges(changeListenerSubscriber: Function): Function

  Listen for changes and mutations made to the State

  tsx
  reka.listenToChanges((payload) => {
    if (payload.event === 'add') {
      console.log('node added', payload.type);
    }
    if (payload.event === 'dispose') {
      console.log('node removed', payload.type);
    }
    if (payload.event === 'change') {
      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

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

• view: RekaComponentView | undefined

  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>): Object | 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): Promise | undefined

  Compute a View tree

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

  Update the props of the Component associated with the Frame

• listenToChanges(changeListenerSubscriber: Function): Function

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

• dispose(): void

Extension

Class

• reka: Reka

• definition: D

• state: ExtensionStateFromDefinition<D>

• init(): any

• dispose(): void

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