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

@cedar-policy/cedar-wasm

v4.2.2

Published

Wasm bindings and typescript types for Cedar lib

Downloads

2,308

Readme

cedar-wasm

An implementation of various cedar functions to enable developers to write typescript and javascript applications using Cedar and wasm.

Installing

Installing is simple, just run npm i @cedar-policy/cedar-wasm --save or install with whatever your favorite package manager is.

Loading is much more complicated. It depends on your environment. We offer three subpackages:

  • es modules (default). It loads wasm in a way that will be bundled into a single file if you use dynamic imports, or embedded into your main bundle if you use regular imports.
  • commonjs (for node). It loads wasm using node's fs module, synchronously. Not really designed for bundling or shipping to the browser.
  • web: more customizable. This one is for when you need to load the wasm in some totally custom way. More details in the "alternate loading strategies" section.

These sub-packages are named @cedar-policy/cedar-wasm, @cedar-policy/cedar-wasm/nodejs, and @cedar-policy/cedar-wasm/web, respectively.

Loading in bare nodeJs without a bundler

Node uses CommonJs so you have to import with require, or with dynamic import().

Importing the CJS export:

const cedar = require('@cedar-policy/cedar-wasm/nodejs');
console.log(cedar.getCedarVersion());

Importing the esm version using esm async import:

import('@cedar-policy/cedar-wasm/nodejs')
  .then(cedar => console.log(cedar.getCedarVersion()));

Loading in webpack 5:

Minimal package.json for webpack including dev server:

{
  "name": "webpack-ts-tester",
  "version": "1.0.0",
  "description": "", 
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack serve"
  },  
  "keywords": [], 
  "author": "", 
  "license": "ISC",
  "dependencies": {
    "@cedar-policy/cedar-wasm": "3.2.0"
  },  
  "devDependencies": {
    "ts-loader": "^9.5.1",
    "typescript": "^5.4.5",
    "webpack": "^5.91.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4",
    "html-webpack-plugin": "^5.6.0"
  }
}

Minimal tsconfig:

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es2020",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node"
  }
}

Configure webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = { 
  mode: 'development', // change this to suit you
  entry: './src/index.ts',
  module: {
    rules: [
      {   
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },  
    ],  
  },  
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },  
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },  
  experiments: {
    asyncWebAssembly: true, // enables wasm support in webpack
  },
  plugins: [new HtmlWebpackPlugin()],
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },  
    compress: true,
    port: 8000,
  }
};

Finally, load the code from your index.ts file. We recommend dynamic imports:

import('@cedar-policy/cedar-wasm').then(mod => {
  // cache it globally here or invoke functions like mod.getCedarVersion();
});

Loading in vite 5:

Starting from the vite typescript template, install these two dependencies to enable wasm:

npm i --save-dev vite-plugin-top-level-await vite-plugin-wasm

Then add those two plugins to your vite config in vite.config.js:

import wasm from 'vite-plugin-wasm';
import topLevelAwait from 'vite-plugin-top-level-await';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    wasm(),
    topLevelAwait()
  ]
});

Finally, load the code. We recommend dynamic imports:

import('@cedar-policy/cedar-wasm').then(mod => {
  // cache it globally here or invoke functions like mod.getCedarVersion();
});

Alternate loading strategies

If for some reason you cannot use es modules, we provide alternate sub-packages web and nodejs (defined as exports in the root package.json).

The nodejs subpackage uses fs and CommonJS modules. To use it, you can import it like so:

const cedar = require('@cedar-policy/cedar-wasm/nodejs')

The web subpackage exposes an initSync function that you can use to load Cedar in scenarios where you want to load the wasm binary async for whatever reason. Using the web subpackage may also be necessary with some jest setups. Here's how you use the web subpackage:

const wasmBuffer = ... // `fetch` it or use `fs` to read it from `node_modules` in jest setupTests
import * as cedarJsBindings from '@cedar-policy/cedar-wasm/web';
cedarJsBindings.initSync(wasmBuffer);