Explore LayerCake context as slot props

[sawyerclick]

Expose LayerCake context as slot props so that users can make _un_LayerCakes and simplify components. Closes #103.

Example of new syntax
use let:variable via Svelte's slot props to access calculated scales and other values from the same component as your chart's root.

<script>
  import {LayerCake, Svg} from 'layercake'
  import { scaleBand } from 'd3-scale';
  import AxisX from './AxisX.svelte'
  import AxisY from './AxisY.svelte'

  const data = [
    {key: a, value: 1},
    {key: b, value: 2},
    {key: c, value: 3}
  ];
</script>

<div>
  <LayerCake x='key' y='value' yScale={scaleBand().paddingInner([0.05])} xDomain={[0, null]} {data} let:xGet let:yGet let:xScale let:yScale>
    <Svg>
      <AxisX/>
      <AxisY/>
      {#each data as d}
        <rect class='group-rect' x="{xScale.range()[0]}" y="{yGet(d)}" height={yScale.bandwidth()} width="{xGet(d)}"></rect>
      {/each}
    </Svg>
  </LayerCake>
</div>

An aside: It seems there's some linting misconfiguration as the changed file here has my linting preferences on it despite the config files in the repo? I've ran the lint and format scripts but it dredges up hundreds of changed files across the repo.

TODOs

• Write documentation and examples
• Write tests

[sawyerclick]

I have the changes published at @sawyerclick/layercake for testing purposes

[mhkeller]

Thanks a bunch. Let me know when you hear back. Can you summarize the optimization issue describing what happens now and what this would change?

[sawyerclick]

After some research, I don't believe the optimization issue that plagues Svelte's $$props and $$restProps should apply here, as those relate to the compiler not being aware of what's passed. There also appears to not be a performance issue with passing these as slot props as they are already being calculated and passed via the LayerCake context.

[mhkeller]

Great – yea seems like if these are explicit props then it should be fine. We should definitely add these to the docs before merging.

[mhkeller]

Another thing that would be good, which I have not done for elsewhere in the library – is jest tests to make sure this is behaving as desired. I use the website as a test to see if anything is broken but since we dont have any examples using these, it would be good to have something else. And then, of course, add tests to the component. (The library does have tests on all javascript modules, which determine the behavior of the svelte component, but this is just pure svelte)

[mhkeller]

We should look at what the current way to do these kind of component-level tests is. I think when you initialize a svelte project it asks if you want to use playwright, which I'm familiar with.

[sawyerclick]

Good point! I can work on documentation over the next few days. I was thinking it could be a sentence or two (with a small example?) in the Computed Context Values section of the guide.

As for component tests, I'm between Jest, Playwright and Storybook. I believe Storybook fits the bill better and would also extend well to the other layout components. FWIW, the Svelte docs mention Jest.

[mhkeller]

I think maybe adding a line to each element in the docs saying something like "this value is also exposed blah blah blah". I can work on that though. The tests I'm a little hazier on...

[mhkeller]

@sawyerclick I scaffolded out the testing script but I'm not sure how to get the slot prop. A fuller DOM might have to be mocked that exposes those values in the HTML and then the HTML is searched for them. If you have any ideas that would be great. I also merged this even with the main branch – not sure why those are showing up as changes. The test file lives here: test/svelte/LayerCake.test.js