9:29:01 AM [vite-plugin-svelte] WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.

@sveltejs/[email protected]

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition for details.

The recommended fix is found here https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition

// package.json
  "files": ["dist"],
  "svelte": "dist/index.js",
+ "exports": {
+   ".": {
+     "svelte": "./dist/index.js"
+   }
  }

I could definitely be doing something wrong here, but I believe Pancake may not be interacting with Svelte's draw animation properly. The draw animation starts drawing from three distinct points along the SVG path. It looks like the number of segments changes based on the window size. Here is an example of what I'm experiencing in the Svelte REPL. Any insight would be greatly appreciated.

I just wanted to say thank you for your work, I love anything relating to SVG, and this looks like a really good use case for svelte, too. Looks awesome, keep it up!

Visit https://pancake-charts.surge.sh/ using Tor Browser, disable JS by setting Security Level to safest:

The Atmospheric and Life expectancy examples don't work (axes are there, but no lines). The Population pyramid and Treemap do work.

It seems to me that working in this setting (Tor Browser 'Safest') is a reasonable benchmark for this type of library. For reference, all the JS-less charts here https://ffoodd.github.io/chaarts/index.html work in this setting.

Right now this library doesn't have anything to say about accessibility. It's potentially in a good place to make sure that people do provide relevant information for screen readers and the like, though I need to spend a bit of time educating myself about the various best practices

Hello,

It seems like there is a bit of an issue whit Quadtree class trying to read width and height that it get from the Chart context. These values seems to be bound to clientWidth and clientHeight of the chart component, but for some reason are evaluating to 0.

Seems like this sample also have the same issue :
https://svelte.dev/repl/3eaa39931e8045cf87da8b482e502c29?version=3.26.0

So when the mouse move, the cursor do not update.

It works on the main page, but not on the REPL

When I upgraded my own application with pancake from 0.0.15 to 0.0.16, the application stopped working and showed

InternalError: too much recursion

in the console. The page at https://pancake-charts.surge.sh/ does not show the same problem (is it running 0.0.16?), but if you click Edit on the "Life Expectancy" graph, the repl (which is using 0.0.16) shows the same problem:

Uncaught DOMException: The object could not be cloned. srcdoc:130
Uncaught DOMException: The object could not be cloned. srcdoc:134
Uncaught (in promise) InternalError: too much recursion
    add about:srcdoc line 86 > eval:3630
    add about:srcdoc line 86 > eval:3656
    add about:srcdoc line 86 > eval:3649
    add about:srcdoc line 86 > eval:3656
...

The above error is from firefox. Safari shows a similar Unhandled Promise Rejection: RangeError: Maximum call stack size exceeded.

I get 10 errors in the Chrome developer console:

Error: attribute d: Unexpected end of attribute. Expected number, "M".

First of all, great package, I love it! :)

I am using this package to render a chart in a table, and it seems to be having performance issues starting with 0.0.16.

I have created a REPL so that you can test it out. Clicking on refresh should give you some number, which is a rough and inaccurate estimate of the time it took.

Now, run the same thing, but using 0.0.16. You can see it's about 2-3 times slower in the best cases.

When observing performance in the profiler, it seems to be related to style and layout recalculation.

0.0.15:

0.0.16:

Also, I noticed that some purple appeared during mount (which is what is causing major issues in my website):

0.0.15:

0.0.16

This looks pretty much like layout thrashing caused by bind:clientWidth and bind:clientHeight, but I could be wrong here.

I'm guessing this is a Svelte issue, but I'm wondering if we could do a quick fix in Pancake to bring back the original performance here

Hey Rich!

I may just be totally overlooking it but is there currently a way to do something ala SvgRect in the same vein as the other SVG utilities? My Svelte-foo is still pretty basic so perhaps there's a way to tap into Pancake's contexts I've overlooked.

Thanks for sharing the library! I've noticed it appearing all over the place on NYT and it's cool to see how it's being put to use.

I did npm install -d '@sveltejs/pancake' in my project. In vscode, it marks the import * as Pancake from '@sveltejs/pancake' as error, saying module '@sveltejs/pancake' or its corresponding type declarations. I am using typescript.

screenshot of vscode:

Here's a screenshot from the example site. The screenshot doesn't show my cursor, but I had it over the letter A in "Atmospheric". I'm not sure how the tooltip is being positioned, but it's always in a position I don't understand and seems like a bug. In this example the tooltip is aligned with neither the x nor y value of my cursor. I'd expect it to be aligned on the x-axis

I'm using Chrome 83 on Ubuntu

• http://skedasis.com/d3/slopegraph/
• https://observablehq.com/@d3/sankey-diagram
• https://observablehq.com/@d3/zoomable-area-chart
• https://observablehq.com/@d3/brushable-scatterplot-matrix
• https://observablehq.com/@d3/box-plot
• https://observablehq.com/@d3/stacked-to-grouped-bars
• https://github.com/d3/d3/wiki/Gallery

Given the consistent behaviour between Chrome and Firefox...

...I'm going to go ahead and call this a Safari bug:

For whatever reason, it's not respecting the stroke width on the points with zero dimensions.

Have you plans to support logarithmic scale grids?

The chart div exists (e.currentTarget is populated) but Svelte doesn't have a reference (yet) for some reason

I'd like to add a super simple bar chart example (REPL) to the website to engage more people, but there's no activity in this repo.

So I've created a community fork:

• merged the PR's in this repo (and cleaning them up a bit)
• added a readme to get docs started
• added PR creators in this repo as maintainers (also you)

But it would be easier if you added me as a contributor (maybe also to npm and website). Would save a lot of confusion. I would probably add the other PR creators also.

import * as Pancake from '@sveltejs/pancake'

Can't get it to work with Sapper. The rollup-compiled server.js contains var pancake = require('@sveltejs/pancake'); which will break as the package doesn't have a main attribute in the package.json.

Looking at the rollup plugin config options, it sounds like rollup should be able to take care of it, but I can't work out which options to set

internal/modules/cjs/loader.js:1033
  throw err;
  ^

Error: Cannot find module '@sveltejs/pancake'
Require stack:
- /home/t/sapper-ts/__sapper__/dev/server/server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1030:15)
    at Function.Module._load (internal/modules/cjs/loader.js:899:27)
    at Module.require (internal/modules/cjs/loader.js:1090:19)
    at require (internal/modules/cjs/helpers.js:75:18)
    at Object.<anonymous> (/home/t/sapper-ts/__sapper__/dev/server/server.js:9:15)
    at Module._compile (internal/modules/cjs/loader.js:1201:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1221:10)
    at Module.load (internal/modules/cjs/loader.js:1050:32)
    at Function.Module._load (internal/modules/cjs/loader.js:938:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '/home/t/sapper-ts/__sapper__/dev/server/server.js' ]
}

Adding a main attribute changes the error to this:

internal/modules/cjs/loader.js:1048
    throw new ERR_REQUIRE_ESM(filename);
    ^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/t/sapper-ts/node_modules/@sveltejs/pancake/index.mjs
    at Module.load (internal/modules/cjs/loader.js:1048:11)
    at Function.Module._load (internal/modules/cjs/loader.js:938:14)
    at Module.require (internal/modules/cjs/loader.js:1090:19)
    at require (internal/modules/cjs/helpers.js:75:18)
    at Object.<anonymous> (/home/t/sapper-ts/__sapper__/dev/server/server.js:9:15)
    at Module._compile (internal/modules/cjs/loader.js:1201:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1221:10)
    at Module.load (internal/modules/cjs/loader.js:1050:32)
    at Function.Module._load (internal/modules/cjs/loader.js:938:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) {
  code: 'ERR_REQUIRE_ESM'

Check out this example for the Zoomable Treemap:

Initial render is fine but upon clicking, the whole chart whitens out.

It's exactly the same code as what's linked from the README -> Examples page, with only this line added:

<svelte:head>
	<script src="//cdn.tailwindcss.com/"></script>
</svelte:head>

I suspect TailwindCSS is setting some global styles which Pancake is not isolating/defending against.

Pancake is not compatible with 3.24.0 and shows the following error on the REPL:

I'm assuming due to:

• Prevent use of $store at compile time when top-level store has been shadowed

Saw the post online, very cool package! Is there a repo (if not this one) that potential users could start making documentation? (so that you don't have to do all of the heavy lifting)
Are there any documentation style choices that you would prefer?

The Real Problem

Pancake works fine when used with a bundler, but svelte/register doesn't work when trying to run directly with node. This is because ES Modules need to be imported (as opposed to require()) and because imports are asyncronous, so the .svelte extension isn't registered in time.

Original Issue

Hey Rich,
Love this library. I'm trying to get SSR working with the following from the svelte docs:

index.js

require('svelte/register');

const App = require('./App.svelte').default;

const { head, html, css } = App.render();
console.log("TCL: head, html, css", head, html, css)

and App.svelte contains your Life Expectancy chart from https://pancake-charts.surge.sh/

import Pancake from '@sveltejs/pancake'; 
import { countries, years } from './data.js';

However, when I run node index.js, I get:
Error: Cannot find module '@sveltejs/pancake'
I'm on Node v13.8.0

Am I missing a preprocessing step? The example makes it look like I can just require the .svelte file as i do in index.js above.

How do I render a chart on the server-side via node?

Hi @Rich-Harris , good night!
First of all, thank you for all your work on Svelte. It's a fantastic outside-of-the-box approach to front-end development.

I'm trying to use pancake as our main charts provider and I might have found a small issue with Quadtree. I'm trying to build a similar example to your Example 2 but I'm getting the error below whenever the chart is hovered:

Uncaught (in promise) RangeError: Maximum call stack size exceeded

I took a look at utils/Quadtree.mjs to see if there were any recent changes that might have caused the issue but I couldn't tell.

Would you mind giving me a hint on what could be wrong? If it's a bug, I would love to help, just need a brief direction.

I created a reproduction, using the same code of the website. You just need to open the Console and hover on the cart.

Thanks again,
Marcelo