Simulation

You can simulate the code generated by a Source object using vif sim.

A simulation uses the ast produced by both your program and the provider to work.

vif-sim is a WASM binary, so it runs on any web environments.

However, it is not isomorphic, as different bundling is required for the browser and Node environments.

It might change in a future release of Vif depending on how the WASM ecosystem evolves.

For now, you have to download either sim-node or sim-web depending on what environment you choose.

TIP

All features and the syntax are the same in both packages.

INFO

All simulation snippets of this documentation run with the browser version.

Installing Manually

Depending on your environment:

Browser

npx @vifjs/sim-web

Node

npx @vifjs/sim-node

About browser & Vite

CORS

Both versions use SharedArrayBuffer to communicate between multiple threads.

While it is not a problem on node, you'll need to create specific headers if you plan to use the browser version.

There are tons of ways to create your own headers depending on the front end framework / bundler you choose.

However if you plan to use vite , here's what you must add to your vite.config.ts

In the plugins section, configure the CORS headers:

plugins: [
    {
        name: "configure-response-headers",
        configureServer: (server) => {
            server.middlewares.use((_req, res, next) => {
                res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
                res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
                next();
            });
        },
    },
]

There are plugins that do the exact same thing, but this solution seem to be enough (otherwise this documentation wouldn't even work).

Wasm files

Next WASM files will probably be an issue.

You have 2 choices to fix this problem in vite:

Exclude

Tell vite not to bundle vif-sim by putting it in exclude of optimizeDeps:

optimizeDeps: {
    exclude: [
        "@vifjs/sim-web"
    ]
}

While this fixes most of it when you are in dev mode, it will be a problem if you want to build an application.

The solution for this documentation was to add Meta url plugin for esbuild:

optimizeDeps: {
    esbuildOptions: {
        plugins: [
            metaUrlPlugin()
        ]
    }
}

Use vite-wasm-plugin

Another way to fix this problem is to use vite-plugin-wasm.