Example usage of `dist/bezier.js`

[abetusk]

Could you provide an example usage of dist/bezier.js?

I was hoping to use bezierjs in a project that's just straight vanilla JS in the browser. My understanding is that dist/bezier.js was the way to do that, so my apologies if I'm mistaken about, but I had a hard time incorporating dist/bezier.js into my project to get it working. Regardless, it would be nice to have some example usage so people at least understand what the intended way of doing it is.

For clarity, here is how I was imagining using dist/bezier.js:

in index.html:

  ...
  <script defer="defer" src="./bezier.js"></script>
  <script defer="defer" src="./script.js"></script>
  ...

in script.js:

  ...
  let bz = new Bezier(150,40 , 80,30 , 105,150);
  ...

I eventually did get something working but it seems pretty clunky. After installing esbuild, I built bez_orig.js, unminified, and then altered it to return the appropriate class and export a global variable.

Here is the command I ran to build the bez_orig.js:

$ ./node_modules/esbuild/bin/esbuild ./src/bezier.js --bundle --outfile=bez_orig.js

Here are the alterations I made (diff bez_orig.js bez.js):

1c1,15
< (() => {
---
> /**
>   A javascript Bezier curve library by Pomax.
> 
>   Based on http://pomax.github.io/bezierinfo
> 
>   This code is MIT licensed.
> **/
> 
> //
> // ./node_modules/esbuild/bin/esbuild ./src/bezier.js --bundle --outfile=bez.js
> // Then had to return Bezier at the end and set a global variable Bezier to
> // give access.
> //
> 
> var Bezier = (() => {
1422a1437,1438
> 
>   return Bezier;

Note that searching dist/bezier.js only has three occurrences of the word Bezier, the first two being in strings and the third being part of a PolyBezier function. I'm not knowledgeable enough about all the build processes to say that this is necessarily an error but it does seem a bit weird to me.

My apologies again if this is all part of some standard build/deploy process. I find the JS build environment foundations to be quickly changing so I tend not to keep up with what the latest best build practices are. Regardless, it would be nice to give some quick guide as to how to use the various bundled versions for people not well versed in the latest build processes for JS.

[Pomax]

This library is a normal ES module, so you load it by importing it and marking your own code as type="module" too. Not by adding a script tag for it. And remember: modules automatically load deferred, but they do not automatically load async, so use <script src="myscript.js" type="module" async></script>, and then in your script, start with:

import { Bezier } from "./somewhere/bezier.dist.js";

[redblobgames]

I'm having the same trouble. dist/bezier.js doesn't seem to be an ES module; it seems to be IIFE. The top level is (()=>{…})();. It seems neither to export anything as an ES module, nor does it export anything as an IIFE-style module. Is it possible the switch from rollup to esbuild changed something?

[DGCK81LNN]

Can confirm that dist/bezier.js is not currently exporting anything.

[DGCK81LNN]

This build command seemed to make it work:

echo 'module.exports=require("./src/bezier.js").Bezier' | esbuild --bundle --minify --global-name=Bezier --outfile=dist/bezier.js

This passes to ESBuild a CommonJS module that requires bezier.js and re-exports Bezier by assigning it to module.exports. Seems that using ESM alone you can only export namespaces as a global variable.

Note that the above method still doesn't directly expose PolyBezier or utils.

You could also just add --global-name=bezierjs to the current build:browser command to expose Bezier as bezierjs.Bezier.

For my use case I've decided to either bundle bezier.js together with my application logic or directly import the bezier.js in src from a CDN (for experimenting).