npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vite-plugin-assemblyscript-asc

v1.0.5

Published

AssemblyScript plugin for Vite: HMR and source maps for AssemblyScript and synchronous WebAssembly module integration with ESM bindings

Downloads

17

Readme

vite-plugin-assemblyscript-asc

Test Status npm License

Add a AssemblyScript codebase to a Vite project with full HMR support and debug with source maps. Integrate the resulting WebAssembly in your frontend using standard AssemblyScript ESM imports and the typical debug and release build variants mapped to vite dev and vite build.

Installation

Just install it as:

yarn add -D vite-plugin-assemblyscript-asc

Vite integration usage

vite.config.ts

import assemblyScriptPlugin from "vite-plugin-assemblyscript-asc"

export default defineConfig({
  plugins: [
    assemblyScriptPlugin()
  ]
})

Runtime WebAssembly integration usage

The WebAssembly module comes with ESM bindings generated automatically. Also, the WASM code is inlined and being instanciated synchronously:

src/index.ts

import { add } from './as/build/assembly'

console.log(add(3, 4)) // prints: '7'

Example project

If you'd like to copy & paste, the example folder contains a fully working example project layout.

Default project layout

The default plugin configuration assumes that the AssemblyScript codebase is located in src/as and that the generated WebAssembly module is stored as build/assembly.wasm:

dist/
  [Vite build files]
src/
  as/
    assembly/
      [AssemblyScript codebase]
    build/
      assembly.wasm
      assembly.wasm.map
    asconfig.json
    package.json
  [Your other code, non-AssemblyScript]

In asconfig.json it is assumed that you change outFile to build/assembly.wasm and textFile to build/assembly.wat so that you can import from a single file location and the Vite execution mode could determine the build variant:

src/as/asconfig.json

{
  "targets": {
    "debug": {
      "outFile": "build/assembly.wasm",
      "textFile": "build/assembly.wat",
      "sourceMap": true,
      "debug": true
    },
    "release": {
      "outFile": "build/assembly.wasm",
      "textFile": "build/assembly.wat",
      "sourceMap": true,
      "optimizeLevel": 3,
      "shrinkLevel": 0,
      "converge": false,
      "noAssert": false
    }
  },
  "options": {
    "bindings": "esm"
  }
}

Custom project layout

That's why the default config looks like this:

{
  projectRoot: 'src/as',
  configFile: 'asconfig.json',
  srcMatch: 'assembly',
  srcEntryFile: 'assembly/index.ts',
  targetWasmFile: 'build/assembly.wasm',
  distFolder: 'dist'
}

In case your project layout looks differently, make sure the paths are set-up accordingly, by providing the necessary configuration options:

vite.config.ts

import assemblyScriptPlugin from "vite-plugin-assemblyscript-asc"

export default defineConfig({
  plugins: [
    // let's assume the codebase is located somewhere else
    assemblyScriptPlugin({ projectRoot: 'packages/assemblyscript' })
  ]
})

Contributors

Thanks to Menci, the author of vite-plugin-wasm for providing a great project layout and e2e test code.