Integrate with Angular

[masalinas]

I tried to integrate this component in angular (16). I started creating a empty Project with started sample for the regl-scatterplot component. When try start the project I obtained these erros:

Warning: /home/miguel/Sources/my-regl-scatterplot/node_modules/regl-scatterplot/dist/regl-scatterplot.esm.js depends on 'regl'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Error: node_modules/regl-scatterplot/dist/types.d.ts:21:21 - error TS2307: Cannot find module 'd3-scale' or its corresponding type declarations.

21 type Scale = import('d3-scale').ScaleContinuousNumeric<number, number>;
                       ~~~~~~~~~~
Error: node_modules/regl-scatterplot/dist/types.d.ts:140:38 - error TS2307: Cannot find module './renderer' or its corresponding type declarations.

140   renderer: ReturnType<typeof import('./renderer').createRenderer>;

The first one was resolved installing the D3 Types:

npm i @types/d3-scale --save-dev

But the second one persist Cannot find module './renderer'. This is where exist this problem:

export type Properties = {
  **renderer: ReturnType<typeof import('./renderer').createRenderer>;**
  canvas: HTMLCanvasElement;
  regl: import('regl').Regl;
  syncEvents: boolean;
  version: string;
  lassoInitiatorElement: HTMLElement;
  camera: Camera2D;
  performanceMode: boolean;
  opacityByDensityDebounceTime: number;
  points: [number, number][];
  pointsInView: number[];
  isDestroyed: boolean;
  isPointsDrawn: boolean;
  isPointsFiltered: boolean;
  hoveredPoint: number;
  filteredPoints: number[];
  selectedPoints: number[];
} & Settable;

I don't have any idea to resolve it. Do you have some idea how fix this problem?

[masalinas]

Finally I resolved the problem cloning the repo component and building the library like this:

npm run build-library

Then copy the dist results from previous in my angular project, but My question exist any dependency prepared for typescript in angular?

[flekschas]

Sorry for my late reply and the glitch. I honestly don't know why d3-scale isn't automatically resolved in Angular projects. This happened before (https://github.com/flekschas/regl-scatterplot/issues/98) but it doesn't seem to be a problem anywhere else. I'll need to dig a bit around to find out when and why this sometimes works and sometimes it doesn't

The second issue seems to be a regression of some sorts. ./renderer should be replaced with ./regl-scatterplot.esm but somehow it's not. Thanks for bringing this to my attention.

[flekschas]

A new version is out that should fix both issues. Thanks again for bringing them to my attention!