In the browser

webpack

The core as an asset module and the stylesheet through css-loader, in webpack 5.

Terminal

npm install @morphscreen/web

Terminal

pnpm add @morphscreen/web

Terminal

yarn add @morphscreen/web

Terminal

bun add @morphscreen/web

An asset/resource rule turns the imported .wasm into the address of a file webpack emits, which loadCore fetches.

webpack.config.js

import HtmlWebpackPlugin from "html-webpack-plugin";

export default {
  entry: "./src/main.js",
  output: { clean: true },
  module: {
    rules: [
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      // The core is served as a file of its own, and loadCore fetches it.
      { test: /\.wasm$/, type: "asset/resource" },
    ],
  },
  plugins: [new HtmlWebpackPlugin({ title: "MorphScreen with webpack", templateContent: '<!doctype html><html lang="en"><head><meta charset="utf-8"></head><body><div id="answer"></div></body></html>' })],
};

src/main.js

import { createAnswer, loadCore } from "@morphscreen/web";
import "@morphscreen/web/morphscreen.css";
import wasm from "@morphscreen/web/morphscreen.wasm";
import { SAMPLE } from "./sample.js";

const core = await loadCore(wasm);
const answer = createAnswer(document.querySelector("#answer"), { core });

// Your server's stream goes here; this feeds a saved answer in pieces.
for (let i = 0; i < SAMPLE.length; i += 24) {
  answer.push(SAMPLE.slice(i, i + 24));
  await new Promise((r) => setTimeout(r, 10));
}
answer.end();
document.body.dataset.done = "yes";