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?