Skip to main content

Wasm

You can use playbook-lang on your WebApp (javascript runtime).

EX) Cloudflare Workers

In fact, the web playground utilizes this.

QuickStart​

You can refer to the following for QuickStart.

Step By Step​

  1. clone the repository

    git clone git@github.com:poteto0/playbook-lang.git
    # or
    git clone https://github.com/poteto0/playbook-lang.git

  2. select version

    Available Versions

    git switch -d <version>

  3. build wasm

    just release-wasm

  4. copy to your project

    • playbook_lang_core.js
    • playbook_lang_core_bg.wasm.d.ts
    • playbook_lang_core.d.ts
    • playbook_lang_core_bg.wasm

  5. configure

    Vite CloudflareWorkers + React + typescript​

    use sync init

    App.tsx
    import initSync, { render_playbook } from "./pkg/playbook_lang_core.js";

    /* ... */
    function App() {
      useEffect(() => {
        initSync();
      });

      // on your handler
      compile() => {
       const output = render_playbook(e.target.value);
       /* ... */
      }

      /* ... */
    }

    Vite + typescript + html​

    configure

    vite.config.ts
    import { defineConfig } from "vite";

    export default defineConfig({
      assetsInclude: ["**/*.wasm"],
      server: {
        fs: {
          allow: [".."],
        },
      },
    });

    in your main function

    main.ts
    // @ts-ignore
    import init, { render_playbook } from "./pkg/playbook_lang_core.js";

    async function main() {
      // initialize wasm
      await init();

      // get compiled svg
      const svg = render_playbook(inputEl.value);

      /* ... */
    }