Considering changing the pattern to experimental loaders.

In preview.js, the loaders would define the exports, and decorators would enable auto resize:

import { app, canvas, context, createScene, viewport } from "../stories/Scene";

export const loaders = [
  async () => ({
    app: app,
    canvas: canvas,
    context: context,
    viewport: viewport,
  }),
];

export const decorators = [
  (story) => {
    createScene({ width: window.innerWidth - 32, height: window.innerHeight - 36 });
    return story();
  },
];

Scene.js basically remains the same, only instead of returning constants from createScene() they are exported - scene creation only needs to clear the viewport.

For window resizing, add:

window.addEventListener("resize", () => {
  resize(window.innerWidth - 32, window.innerHeight - 36);
});

Each <name>.stories.js then uses the loaded variable passed to args:

export const Single = (args, { loaded: { app, canvas, viewport } }) => {
};

This seems good, as it eliminates the boilerplate of calling createScene() each template or story; however, it would enforce a consist pattern across all stories, which might be a good thing.

Between stories or args, the scene is fully reloaded - while this is ideal for certain situations, at other times having only a single instantiation would be preferred. It would certainly be lighter.

This requires a few things:

• Decorators to setup the initial canvas
• Globals to access canvas, app, and viewport.
• Events for story change, arg change

Decorators

For example, the .storybook/preview.js would need a decorator such as:

addDecorator((story) => {
  const { canvas, app, viewport } = createScene({ width: 600, height: 400 });
  return canvas;
});

These would need exported, or available as globals

Events

Story change would require emptying the viewport.

Callbacks for story and argument change, handling any additional lifecycle cleanup per story.