buxlabs/abstract-syntax-tree

Using the library in the browser (client-side)

ereztdev opened this issue · 8 comments

ereztdev commented

I am looking to run AST on the client side, i'm noticing an import error coming from the usage of 'filesystem', which implies this is more relevant for Node.js or other server side JS projects.

Error

ERROR in ./node_modules/abstract-syntax-tree/node_modules/source-map/lib/read-wasm.js
Module not found: Error: Can't resolve 'fs' in 'D:\xampp\htdocs\codeHut\node_modules\abstract-syntax-tree\node_modules\source-map\lib'
 @ ./node_modules/abstract-syntax-tree/node_modules/source-map/lib/read-wasm.js 20:13-26
 @ ./node_modules/abstract-syntax-tree/node_modules/source-map/lib/source-map-consumer.js
 @ ./node_modules/abstract-syntax-tree/node_modules/source-map/source-map.js
 @ ./node_modules/abstract-syntax-tree/src/sourcemap.js
 @ ./node_modules/abstract-syntax-tree/index.js
 @ ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/pages/Coding.vue?vue&type=script&lang=js&

Is there an option in yuour package that would allow me to do the following:
I am looking to run the AST on the client side browser, where I would take user input code, evaluate it , run it and then append it to the DOM.
Any answer, advice, other relevant packages would be appreciated!

emilos commented

hey @ereztdev, client side is not supported right now due to limited time/budget I have to work on the project. It's definitely possible and the library had a limited support in the early days.

There are plenty of tools you can try to use independently too:

  • acorn, esprima, meriyah, astring, escodegen and many others (you can also have a look at the dependencies of this project)

Other option is to have an api endpoint to do a part of the job you described above (if appropriate).

Yet another option, if you have time, is to try to contribute here to create a client side bundle with rollup and related libs.

emilos commented

Story

As a developer, I'd like to use the library in the browser.

Acceptance criteria

  • create a bundle with rollup
  • update main field in package.json
  • add a build script in package.json
  • add a prepublish script in package.json (that builds the client side version before it's published)
  • .js and .min.js versions
  • bundle is created in a dist dir
  • dist dir is added to .gitignore
  • all dependencies are inlined
inikonorov commented

I'll do it tomorrow (I hope :D)
But I have a question - why I need to update main field in package.json?

emilos commented

@inikonorov you can find more info here https://docs.npmjs.com/cli/v6/configuring-npm/package-json#main

If you'll be able to create a bundle with rollup, you can create bundles for different environments, e.g. :

build/index.cjs.js
build/index.umd.js

main field should probably point at build/index.cjs.js or build/index.esm.js
browser field should point at build/index.umd.js

emilos commented

@inikonorov thanks for pushing it :) I've merged that one and added few more things.

We're getting closer, but some of the dependencies are not that easy to inline, e.g. the library ast-types has some circular dependencies and rollup is not able to inline it.

It seems that the issue is related to the to-ast library. I'll add a separate issue for it, will try to rewrite it and drop the dependency.

inikonorov commented

okay!

emilos commented

@ereztdev we've added a basic browser support, there's plenty of things that could be improved but this should hopefully be a good start. The sourcemap method won't work, but the rest should be there. If you see anything that could be improved, just lmk.