MDsveX icon indicating copy to clipboard operation
MDsveX copied to clipboard

mdsvex does not correctly retain "chained" function calls

Open xrd opened this issue 1 year ago • 2 comments

Reproduction case here:

https://github.com/xrd/simple-svekyll

I have an mdsvex template that looks like this:

---
title: "chart"
published: true
date: 2023-03-02
---

<script>
 import * as Plot from '@observablehq/plot';
 let ref;
 
 function installPlot(r) {
     if (r) {
         console.log('Installing plot');
         const x = Math.random;
         const binX = Plot.binX( { y: "count" }, { x } );
         const rectY = Plot
               .rectY(
                   { length: 10000 },
                   binX,
               );
         console.log('rectY', rectY );
         const result = rectY.plot();
         console.log('Result is', result);
         r.append(result);
     } else {
         console.log('Ref not ready yet');
     }
 }
 
  $: installPlot(ref);
</script>

<div bind:this={ref}/>

Originally I chained these functions together like the documentation suggested (https://observablehq.com/plot/getting-started), hence the title: Plot.rectY({length: 10000}, Plot.binX({y: "count"}, {x: d3.randomNormal()})).plot(). Breaking them into discrete calls still results in the loss of the plot function but not the binX or rectY which seems really weird.

When I run these commands:

yarn 
yarn build
cd build
python -m http.server

Then, opening http://localhost:8000 results in this error in the console: Uncaught TypeError: f.plot is not a function.

plot-is-not-a-function

(I apologize if this is actually a vite or svelte preprocessor issue, but tracking down where it is failing is challenging)

xrd avatar May 08 '23 21:05 xrd