Unclear Plugins support

[Rolleander]

trafficstars

Hi together,

so far I tried to get two different ChartJS plugins to work with deno fresh_charts, with mixed results:

• https://www.npmjs.com/package/chartjs-chart-sankey
• https://www.npmjs.com/package/chartjs-plugin-zoom

This is my deno imports stetup:

 "$fresh_charts/" : "https://deno.land/x/[email protected]/"

Zoom - First attempt

import { ChartJs } from "$fresh_charts/deps.ts";
import plugin from "npm:[email protected]";

export default function (props: MenuProps) {
  if (IS_BROWSER) { 
    ChartJs.Chart.register(plugin);
  }
}

Crashes on start:

error: Uncaught (in promise) ReferenceError: document is not defined
    at Object.<anonymous> (file:///I:/Workspace/deno/monstat/node_modules/.deno/[email protected]/node_modules/hammerjs/hammer.js:2643:12)
    at Object.<anonymous> (file:///I:/Workspace/deno/monstat/node_modules/.deno/[email protected]/node_modules/hammerjs/hammer.js:2645:4) 
    at Module._compile (node:module:732:34)
    at Object.Module._extensions..js (node:module:746:10)
    at Module.load (node:module:657:32)
    at Function.Module._load (node:module:538:12)
    at Module.require (node:module:676:19)
    at require (node:module:790:16)
    at file:///I:/Workspace/deno/monstat/node_modules/.deno/[email protected]/node_modules/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.js:8:110
    at Object.<anonymous> (file:///I:/Workspace/deno/monstat/node_modules/.deno/[email protected]/node_modules/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.js:11:3)

The error makes sense that on server-side it should not work. Are there something like client-only imports for deno?

Zoom - Second attempt (working)

import { ChartJs } from "$fresh_charts/deps.ts";
import plugin from "npm:[email protected]";

export default function (props: MenuProps) {
  if (IS_BROWSER) { 
    import("npm:[email protected]").then((plugin) => {
      ChartJs.Chart.register(plugin.default);
    });
  }
}

Feels and seems ugly, since the import is only done on client runtime. Also the editor will show the following error:

Argument of type 'typeof import("file:///I:/Workspace/deno/monstat/node_modules/.deno/[email protected]/node_modules/chartjs-plugin-zoom/types/index")' is not assignable to parameter of type 'ChartComponentLike'.

However, it somehow works on client-side and zooming&panning is finally possible in the charts

... so I tried to do the same thing with the sankey plugin:

Sankey - First attempt

import { ChartJs } from "$fresh_charts/deps.ts";
import {SankeyController, Flow} from "npm:[email protected]";

export default function (props: MenuProps) {
  if (IS_BROWSER) { 
   ChartJs.Chart.register(SankeyController, Flow);
  }
}

No error in the editor, but crashes on the start:

The requested module 'npm:[email protected]' does not provide an export named 'Flow' at file:///I:/Workspace/deno/monstat/islands/Menu.tsx:13:27

Sankey - Second attempt

import { ChartJs } from "$fresh_charts/deps.ts";
import sankey from "npm:[email protected]";

export default function (props: MenuProps) {
  if (IS_BROWSER) { 
    ChartJs.Chart.register(sankey.SankeyController, sankey.Flow);
  }
}

No error in the editor, but crashes on the start:

islands/Menu.tsx:14:7: ERROR: No matching export in "C:/Users/Roland/AppData/Local/deno/deno_esbuild/[email protected][email protected]/node_modules/chartjs-chart-sankey/dist/chartjs-chart-sankey.esm.js" for import "default"

Sankey - Third attempt

import { ChartJs } from "$fresh_charts/deps.ts";

export default function (props: MenuProps) {
 if (IS_BROWSER) { 
      import("npm:[email protected]").then((plugin) => {
      ChartJs.Chart.register(plugin.SankeyController, plugin.Flow);
   });
 }
}

No problems server side, also what previously worked with the zoom-plugin. However, in the browser it gives the following problem:

auto.js:2 Uncaught Error: "sankey" is not a registered controller.

So somehow it seems registering this plugin did not really work, or happens too late.

Sankey - Last attempt

To exclude possible problems with loading the plugin after the chart is created:

import { ChartJs } from "$fresh_charts/deps.ts";
import { useSignal } from "@preact/signals";

export default function (props: MenuProps) {
const loading = useSignal(true);
 if (IS_BROWSER) { 
      import("npm:[email protected]").then((plugin) => {
      ChartJs.Chart.register(plugin.SankeyController, plugin.Flow);
     console.log("imported sankey plugin", plugin);
     loading.value = false;
   });
 }

return (<>
         {!loading.value&&  <SankeyTest />}
     </>);
}

Still, same error in the browser, that sankey is not a registered chart type.

At this point im out of ideas, it just feels wrong what ive tried so far, even though ive got the zoom plugin working. Anyone here who has an idea or knows what the problem is? Could it be the npm repos of the plugins, or is there some deno/fresh-specific loading behavior im missing?

Thank you very much