Fix Svelte Playground (REPL) usage

[techniq]

Currently it's not possible to use LayerChart within the Svelte REPL (example);

Current error:

Cannot require modules dynamically (@dagrejs/graphlib)

but wouldn't be surprised if there are others after resolving this.

[techniq]

The main issue (REPL) is @dagrejs/dagre is still written in CommonJS and has some dynamic requires.

There have been a few requests to provide an ESM build (and some progress was made and later reverted due to breaking compatibility).

I found a few projects, the most promising being dagre-d3-es but it currently does not expose .layout() (and only .render()) and is more focused on dagre-d3. Looking around at the source it looks like it's all been ported though. The project has been active since about 7 months ago, but the npm package dagre-d3-es hasn't been updated in 3 years.

Consider:

• Continue to investigate dagre-es / dagre-d3-es and PR to expose
• Provide our own fork/port of @dagrejs/dagre
• Split LayerChart into smaller packages (already setup as a monorepo) (@layerchart/dagre)

[techniq]

Also just came across @unovis/dagre-layout but it hasn't been published in 2 years, and is a fork of a fork (might still be worth investigating).

[techniq]

Moving some components to sub directories and removing them from top-level imports (notable import { Dagre } from 'layerchart/graph';) (#617) should resolve the @dagrejs/graphlib issue for non-Dagre examples on Svelte REPL/Playground.

Also looking to add individual component imports (#618) which will help.

[dummdidumm]

I pushed a fix for better commonjs support to the REPL, hopefully works now

[techniq]

Thanks so much @dummdidumm 🫶

I gave it a quick test and no errors! I'm still planning to restructure some imports to reduce bundle sizes, but this helps a ton!

After I wrap the CSS-only PR I'm going to give the Playground/REPL a proper testing with some examples, and this will come in very handy for support requests on Github/Discord.

Thanks again!

[techniq]

@dummdidumm curious if you have a solution for pkg.pr.new releases within the REPL?

While import { LineChart } from 'layerchart@next'; works with the new CommonJS improvements, I was hoping to test some changes within the REPL for PR 557 (and some others).

I tried import { Chart } from 'https://pkg.pr.new/layerchart@557'; but get the following error:

https://pkg.pr.new/layerchart@557 (1:0): Unexpected character '\u{1f}' (Note that you need plugins to import files that are not JavaScript)

I also tried using https://esm.sh/pr/layerchart@557 but this won't work with the CommonJS deps (namely dagrejs).

Invalid import "/@dagrejs/dagre@^1.1.5?target=es2022"

The esm.sh approach should work once I rework the exports, but was hoping there might be a way to have the npm package support (layerchart@next) with pkg.pr.new URLs imports.

layerchart@next	https://pkg.pr.new/layerchart@557	https://esm.sh/pr/layerchart@557

[techniq]

import { ... } from layerchart@next now just works as of 2.0.0-next.39