Class App<T>

constructor

• new App<T extends { frame_ms: number } = { frame_ms: number }>(
      root: HTMLElement,
      data: T & LooseObject,
  ): App<T>

  Type Parameters

  • T extends { frame_ms: number } = { frame_ms: number }

  Parameters

  • root: HTMLElement

    Root element of the app

  • data: T & LooseObject

    Data will be collected automatically

  Returns App<T>

Readonlydata

Readonlyroot

collector

• collector<T extends LooseObject>(
      ...e: [
          filename: string,
          options?: { backup_on_leave?: boolean; serializer?: Serializer<T> },
      ],
  ): Collector<T>

  Create data collector

  Type Parameters

  • T extends LooseObject

  Parameters

  • ...e: [
        filename: string,
        options?: { backup_on_leave?: boolean; serializer?: Serializer<T> },
    ]

  Returns Collector<T>

  Example

  Basic usage

  using dc = await app.collector('data.csv');
  dc.add({ name: 'Alice', age: 25 });
  dc.add({ name: 'Bob', age: 30 });
  dc.final(); // get final text
  dc.download(); // download data.csv
  Copy

  Add listeners

  using dc = await app
    .collector('data.csv')
    .on('add', (row) => {
      console.log('add a row', row);
    })
    .on('chunk', (chunk) => {
      console.log('a chunk of raw is ready', chunk);
    });
  Copy

  See

  Collector

scene

• scene<T extends MaybeGenericComponent>(
      ...__namedParameters: [
          T,
          Pick<SceneOptions<T>, "defaultProps"> & Partial<
              Omit<SceneOptions<T>, "defaultProps">,
          > & ExtendedSceneOptions,
      ],
  ): Scene<T> & {
      config(patchOptions: Partial<ExtendedSceneOptions>): Scene<T>;
  }

  Create a scene

  Type Parameters

  • T extends MaybeGenericComponent

  Parameters

  • ...__namedParameters: [
        T,
        Pick<SceneOptions<T>, "defaultProps"> & Partial<
            Omit<SceneOptions<T>, "defaultProps">,
        > & ExtendedSceneOptions,
    ]

  Returns Scene<T> & { config(patchOptions: Partial<ExtendedSceneOptions>): Scene<T> }

  • config: function

    • config(patchOptions: Partial<ExtendedSceneOptions>): Scene<T>

      Change options one-time

      Parameters

      • patchOptions: Partial<ExtendedSceneOptions>

      Returns Scene<T>

      Example

      Show with new options

      await scene.config({ duration: 1e2 }).show();
      await scene.config({ close_on: 'click' }).show();
      Copy

  Example

  Create text scene

  const Component = (props: { text: string }) => {
    const el = document.createElement('div');
    const ctx = getCurrentScene();
    ctx.on('show', () => {
      el.textContent = props.text; // update element
    });
    return {
      node: el,
      data: () => ({ text: el.textContent }),
    };
  };
  
  using scene = app.scene(Component, {
    adapter: createComponentAdapter((e) => e),
    defaultProps: { text: 'default text' }, // default props is required
    close_on: 'click',
    duration: 100,
  });
  Copy

  See

  Scene