\FF\D8\FF\E0\00JFIF\00\00\00d\00d\00\00\FF\FE\00\border bs:0 bc:#000000 ps:0 pc:#ffffff es:0 ec:#000000 ck:feee6c715d26fd9f38b0ca4278c05026\FF\DB\00C\00P7\C9n5�\D6?\BD�\9Ds\EBp\9F[`8m\B7)o\B5\E8\E6I\99\FE3]]A2\BA\8Cw\D6E\93\\DEv\C8\009\F2\F1NI?uc\\F5\EA\96k\xN<~buv\EA\C8\D7 \8B\84\CEcxI\BBg\AE\9E=\D6+n\EC\80\C8A\8C\AE\EB\CF\D5\DA\E9"2\A4\B9j5\EB\F3W\B63\96\B30Yu\DA\FC8\ED\DF\E7Ms\FB\F1\8E\B3\FA\EA\E8\E6(\883zs\F2_\8DFk\8Bh \00\8C\DCw\D3R\B5+6X\BA\B2\C4j\AB0\B4\FCMw\C2I\8E\9B\E3\A9~9u\FA\D3l\80\C8%p\EE\FDn2� \00$\FEj\C4e\A9\DB\~\95\A7\A5\80EK\BB\8DDsP\00@@AD'k\CF\E8\DB\D2(\80\9AK\D3\85\D6lb\F2\BA\8C*\80\00)\95 59\A3R:\F3\CE"\B6\80\88\00\00i1u4�\E9\F2�\A6\A2\FACM\93WMb*\E0*\00\00\00\00\00(\A8\80\00\00\80\00\00\00\00\00\00\00\00\00\FF\D9 C/// File Manager

File Manager

Path: /proc/self/root/opt/cpanel/ea-ruby27/root/usr/local/share/gems/gems/prism-1.9.0/docs/

Viewing File: javascript.md

# JavaScript

Prism provides bindings to JavaScript out of the box.

## Node

To use the package from node, install the `@ruby/prism` dependency:

```sh
npm install @ruby/prism
```

Then import the package:

```js
import { loadPrism } from "@ruby/prism";
```

Then call the load function to get a parse function:

```js
const parse = await loadPrism();
```

## Browser

To use the package from the browser, you will need to do some additional work. The [javascript/example.html](../javascript/example.html) file shows an example of running Prism in the browser. You will need to instantiate the WebAssembly module yourself and then pass it to the `parsePrism` function.

First, get a shim for WASI since not all browsers support it yet.

```js
import { WASI } from "https://unpkg.com/@bjorn3/browser_wasi_shim@latest/dist/index.js";
```

Next, import the `parsePrism` function from `@ruby/prism`, either through a CDN or by bundling it with your application.

```js
import { parsePrism } from "https://unpkg.com/@ruby/prism@latest/src/parsePrism.js";
```

Next, fetch and instantiate the WebAssembly module. You can access it through a CDN or by bundling it with your application.

```js
const wasm = await WebAssembly.compileStreaming(fetch("https://unpkg.com/@ruby/prism@latest/src/prism.wasm"));
```

Next, instantiate the module and initialize WASI.

```js
const wasi = new WASI([], [], []);
const instance = await WebAssembly.instantiate(wasm, { wasi_snapshot_preview1: wasi.wasiImport });
wasi.initialize(instance);
```

Finally, you can create a function that will parse a string of Ruby code.

```js
function parse(source) {
  return parsePrism(instance.exports, source);
}
```

## API

Now that we have access to a `parse` function, we can use it to parse Ruby code:

```js
const parseResult = parse("1 + 2");
```

A ParseResult object is very similar to the Prism::ParseResult object from Ruby. It has the same properties: `value`, `comments`, `magicComments`, `errors`, and `warnings`. Here we can serialize the AST to JSON.

```js
console.log(JSON.stringify(parseResult.value, null, 2));
```

## Visitors

Prism allows you to traverse the AST of parsed Ruby code using visitors.

Here's an example of a custom `FooCalls` visitor:

```js
import { loadPrism, Visitor } from "@ruby/prism"

const parse = await loadPrism();
const parseResult = parse("foo()");

class FooCalls extends Visitor {
  visitCallNode(node) {
    if (node.name === "foo") {
      // Do something with the node
    }

    // Call super so that the visitor continues walking the tree
    super.visitCallNode(node);
  }
}

const fooVisitor = new FooCalls();

parseResult.value.accept(fooVisitor);
```

## Building

To build the WASM package yourself, first obtain a copy of `wasi-sdk`. You can retrieve this here: <https://github.com/WebAssembly/wasi-sdk>. Next, run:

```sh
make wasm WASI_SDK_PATH=path/to/wasi-sdk
```

This will generate `javascript/src/prism.wasm`. From there, you can run the tests to verify everything was generated correctly.

```sh
cd javascript
node test
```