Class App

constructor

• new App(root: Element): App

  Parameters

  • root: Element

    Root element of the app

  Returns App

Readonlydata

root

load

• load<const T extends readonly string[], D = Blob>(
      urls: T,
      convertor?: (blob: Blob, url: string) => MaybePromise<D>,
  ): Promise<{ [K in string | number | symbol]: D }>

  Load resources to RAM

  It will show loading progress for each resource on page

  Type Parameters

  • const T extends readonly string[]
  • D = Blob

  Parameters

  • urls: T

    Array of resource URLs to load

  • Optionalconvertor: (blob: Blob, url: string) => MaybePromise<D>

    Optional function to convert blob data

  Returns Promise<{ [K in string | number | symbol]: D }>

  Promise that resolves to array of loaded resources

  Example: Load web medias

  const [image, audio] = await app.load(['image.png', 'audio.mp3']);
  Copy

  Example: Convert image blob to bitmap

  const [image] = await app.load(['image.png'], (blob, url) => {
    console.log('Convert image from', url);
    return window.createImageBitmap(blob);
  });
  Copy

collector

• collector<T extends Data>(
      ...e: [filename: string, stringifier?: DataStringifier],
  ): DataCollector<T>

  Create data collector

  Type Parameters

  • T extends Data

  Parameters

  • ...e: [filename: string, stringifier?: DataStringifier]

  Returns DataCollector<T>

  Example: Basic usage

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

  Example: Custom hooks

  using dc = await app
    .collector('data.csv')
    .on('add', ({ row, chunk }) => {
      console.log('add a row', row, 'its chunk is', chunk);
    })
    .on('save', ({ chunk, preventDefault }) => {
      preventDefault(); // Prevent the default save behavior
      console.log('save all rows, the final chunk is', chunk);
    });
  Copy

  See

  DataCollector

scene

• scene<T extends SceneFunction>(
      ...e: [setup: T, defaultOptions: SceneOptions<T>],
  ): Scene<T>

  Create a scene

  Type Parameters

  • T extends SceneFunction

  Parameters

  • ...e: [setup: T, defaultOptions: SceneOptions<T>]

  Returns Scene<T>

  Example: Creating a text scene

  const setup = (props: { text: string }, ctx) => {
    const el = h('div'); // create element
    effect(() => {
      el.textContent = props.text; // update element content when props.text changes
    });
    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' },
  });
  // change props.text and show, then get data
  const data = await scene.show({ text: 'new text' });
  Copy

  See

  Scene

text

• text(
      content?: string,
      defaultOptions?: Partial<SceneOptions<(props: ...) => ...>>,
  ): Scene<
      (
          props: PropertiesHyphen<(...), (...)> & { children?: ... },
      ) => { node: HTMLDivElement },
  >

  Create a text scene

  Parameters

  • Optionalcontent: string

    Optional text content to display

  • OptionaldefaultOptions: Partial<SceneOptions<(props: ...) => ...>>

    Optional default scene options

  Returns Scene<
      (
          props: PropertiesHyphen<(...), (...)> & { children?: ... },
      ) => { node: HTMLDivElement },
  >

  See

  TextStim