Skip to content
This repository has been archived by the owner on Jun 23, 2023. It is now read-only.

Add standalone script compatibility #30

Merged
merged 8 commits into from
Mar 29, 2020
Merged

Add standalone script compatibility #30

merged 8 commits into from
Mar 29, 2020

Conversation

josh-hemphill
Copy link
Contributor

@josh-hemphill josh-hemphill commented Feb 21, 2020

Add UMD (Universal Module) webpacked file for inclusion in plain js projects and automatic inclusion in UNPKG CDN

This would have the added benefit of being able to create codepens etc. for examples and testing.
I also added a basic example.html which includes the UMD and lets you test/experiment with it.

Note: No modification to index.js, just added webpack dev-dependency, npm run build command, example.html, and UMD directory/file (maybe eventually add beautified UMD expression-eval.js so CDN users can view source in codepens etc.)

package.json Outdated
"webpack-cli": "^3.3.11"
},
"engines": {
"node": ">= 6.0.0"
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the engine requirement based on?

Copy link
Contributor Author

@josh-hemphill josh-hemphill Mar 6, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Webpack had some mention of it being sometimes necessary to specify. I think it was webpack's minimum supported version of node.
I just removed it since it's no longer necessary.

@donmccurdy
Copy link
Owner

Hi! Unfortunately I don't use Webpack regularly, and would prefer not to take on maintaining a build artifact that requires it. Would microbundle's unpkg output work for you? If so, I think this structure could be OK:

  "source": "index.js",                        // source file
  "main": "dist/expression-eval.js",           // output path for CommonJS/Node
  "module": "dist/expression-eval.module.js",  // output path for JS Modules
  "unpkg": "dist/expression-eval.umd.js",      // optional, for unpkg.com

It'd be fine to omit example.html as well, I'm willing to trust the test suite and microbundle's maintainers.

@josh-hemphill
Copy link
Contributor Author

Yeah, microbundle works great, I didn't know it existed.
And I guess I went overboard with the example.html, since having a expression-eval.umd.js is supposed to allow making codepens etc. which would would fill that purpose.
I'll make a push shortly.

@josh-hemphill
Copy link
Contributor Author

NPM is reporting that microbundle has several security vulnerabilities. So I added a notice not to use the standalone scripts in production at the moment.

Webpack had some mention of it being sometimes necessary to specify.
@RobertoMaurizzi
Copy link

Shouldn't those vulnerabilities only affect the npm run build step, i.e they won't affect the generated code? Modules should be safe (and in addition the only High one involves svgo, an SVG optimizer)

@donmccurdy
Copy link
Owner

Right, the vulnerabilities are essentially false positives, and would only affect the person publishing the package to npm with devDependencies in any case (i.e. me). Let's remove the warning, otherwise this looks good. Thanks!

@donmccurdy donmccurdy merged commit 6bb5682 into donmccurdy:master Mar 29, 2020
@donmccurdy
Copy link
Owner

Thanks!

@josh-hemphill
Copy link
Contributor Author

josh-hemphill commented Mar 29, 2020

@donmccurdy I apologize, I don't think I tested it. No matter how I try to direct import it, it throws errors in browsers.

- Uncaught ReferenceError: require is not defined

Microbundle doesn't redefine require(). I think it's designed for front-end-only modules. If you're set on microbundle, one solution would be to import jsep from 'jsep' and 'export= instead of module.exports=, but this would prevent older versions of node from using it. And additionally, using that way, imports all the functions directly under window.exports e.g. window.exports.parse().

@donmccurdy
Copy link
Owner

It looks like Microbundle expects the input source code to use ES modules. It still creates CJS-compatible outputs from that. I've updated accordingly. For the standalone script use case, this should work:

<script src="https://unpkg.com/jsep@0.3.4/build/jsep.js"></script>
<script src="https://unpkg.com/expression-eval@3.0.4/dist/expression-eval.umd.js"></script>
<script>

const fn = expressionEval.compile('a+3');
console.log('result: ', fn({a:4}));

</script>

@josh-hemphill
Copy link
Contributor Author

Awesome, that works great.
BTW, I made a codepen that people could use to try out how it behaves with certain inputs. I ended up using something like it a lot to determine how to handle different edge cases and such.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants