Error with es6 worker + es6 modules

[chris-kruining]

Hi,

I'm getting the following error when trying to include your lib in js worker (paint-worklet to be exact).

Uncaught (in promise) ReferenceError: self is not defined

Can you either chain and or change the self to globalThis (is supported by all relevant browsers as far as I am aware).

Or even better, if I can bother you with this job, create a delaunay.min.esm so I can just use es6 modules as is :D

Thanks in advance!!!

[chris-kruining]

btw, this is how I import the code, the docs tell me that a d3 global is created, so to get that I have

import 'https://unpkg.com/d3-delaunay@5.3.0/dist/d3-delaunay.js';

console.log(d3);

but I never reach my console log due to the error

[chris-kruining]

test.html

<script type="module">
    await CSS.paintWorklet.addModule('gradient.js');
</script>

gradient.js

import 'https://unpkg.com/d3-delaunay@5.3.0/dist/d3-delaunay.js';
console.log(d3);

Throws the error, because workers and/or worklets do not have a global variable self

[chris-kruining]

aah correction, worklets specifically, workers work fine.

this creates a worker, and works as intended

<script type="module">
    const w = new Worker('gradient.js', { type: 'module' });
</script>

where as my previous comment creates a worklet, which gives the error of the self variable being undefined

[Fil]

hmmm I wonder if upgrading rollup would suffice?
Compare the boilerplate at the top of https://unpkg.com/d3@5.16.0/dist/d3.js and https://unpkg.com/d3@6.0.0/dist/d3.js ; the difference was introduced by our upgrade to rollup:"2" and specifically https://github.com/rollup/rollup/releases/tag/v2.23.0

It's something that's yet to deploy in all the modules.

[chris-kruining]

can I possibly bother you with the question of quickly making a build with the new rollup? or is that not feasible?

[Fil]

I have a simpler test:

import 'https://unpkg.com/d3@6';
console.log(d3); // {the d3 object} 👍

import 'https://unpkg.com/d3@5';
console.log(d3); // ReferenceError: self is not defined 💣

So I guess the next releases will work. In the meantime you might want to load d3@6

[Fil]

Related: d3/d3#3366

[chris-kruining]

Thanks!!! works like a charm!

[Fil]

leaving open so I'll be happier to close it with the proper dependency upgrade :)

[chris-kruining]

ok. :D

[chris-kruining]

if by any chance you are curious what I need this lib for: I'm trying to replicate adobe illustrator's freeform gradient in the browser, this is to not limit the options of the designers.

As you can see, I still need to find a way to actually blend between the polygons :D

[Fil]

Oh oh! You would do https://observablehq.com/@fil/walk-on-spheres-worker in gradient.js?

[Fil]

Should be fixed by #113

[chris-kruining]

Oh oh! You would do https://observablehq.com/@fil/walk-on-spheres-worker in gradient.js?

sorry for the late response, I seem to have overlooked this on my vacation.

I don't believe I would use the tatic used in your link as the 2dcontext provided by a paintworklet, while intended to be similar, is not the same as a canvas. One of the differences is no ability to draw pixel per pixel. In this case meaning that I need some nasty workaround to calculate each pixels color based on a polygon somehow.

my current thinking is to use what I have above and then somehow place some linear gradients on the edges.

[Fil]

Your approach made me curious about this spec and I wrote a helper function to create and update paintworklets https://observablehq.com/@fil/hello-paintworklet

[chris-kruining]

nice! thanks for the mention :D

Maybe I'll make a post if / when I actually manage to make this gradient shader without per-pixel calculations :P

[Fil]

fixed in d3-delaunay@6