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>

data

Readonlyroot

collector

• collector<T extends LooseObject>(
      ...e: [filename: string, serializer?: Serializer<T>],
  ): Collector<T>

  Create data collector

  Type Parameters

  • T extends LooseObject

  Parameters

  • ...e: [filename: string, 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 MaybeGenericSceneSetup>(...__namedParameters: any): Scene<T>

  Create a scene

  Type Parameters

  • T extends MaybeGenericSceneSetup

  Parameters

  • ...__namedParameters: any

  Returns Scene<T>

  Example

  Create text scene

  const setup = (props: { text: string }, ctx: Scene<any>) => {
    const el = document.createElement('div');
    ctx.on('scene:show', (props) => {
      el.textContent = props.text; // update element
    });
    return { node: el, data: () => ({ text: el.textContent }) }; // return element and data getter
  };
  
  // create scene by setup function
  using scene = app.scene(setup, {
    defaultProps: { text: 'default text' }, // default props is required
    close_on: 'key: ', // close when space is pressed
    duration: 100, // auto close after 100ms
  });
  // change props.text and show, then get data
  const data = await scene.show({ text: 'new text' });
  Copy

  See

  Scene