mhkeller/layercake

Question: is it NOT meant to be used with TypeScript?

shyakadavis opened this issue · 4 comments

shyakadavis commented

Hi;

Sorry for opening it as an issue (there's no Discussions tab).

I'm trying to use it in a TS project, and it's constantly screaming.

e.g. as I was trying out this: https://layercake.graphics/example-ssr/Line

// _components/Line.svelte
import { getContext } from 'svelte';

const { data, xGet, yGet } = getContext('LayerCake');

yields Property 'data' does not exist on type 'unknown'.ts(2339)

// This example loads csv data as json using @rollup/plugin-dsv
import data from './_data/points.csv';

yields Cannot find module './_data/points.csv' or its corresponding type declarations.

1:23:24 PM [vite] Error when evaluating SSR module /src/routes/snowbox/_data/points.csv:
|- ReferenceError: myX is not defined

e.t.c.

My question is just that; can I not use Layercake with TS? If its doable, are there any detailed examples somewhere to reference?

P.S. I'm new to layercake/data-vis in general, so excuse any absurdities.

mhkeller commented

Good call on creating a Discussion tab! I just did that but fine keeping this here. My suspicion is there are one or two other errors happening here.

  1. The error Cannot find module './_data/points.csv' means your code can't find the points.csv file. Make sure you have this downloaded into your project and it lives at the correct path it's being imported from
  2. The error you're getting myX is not defined means your build system is treating the csv file as a javascript file. Have you added rollup/plugin-dsv to your rollup config? This is a special plugin that allows you to import csv files and it automatically converts them to json. Normally, you can only use import with javascript files. Here's how that plugin is added to the vite config in the layercake-template.

If you were to fix those two errors, you should be able to get it working.

As for TypeScript, there have been some attempts at adding ts declarations to the library (they're in various closed issues here), but it's proved to be a lot of trouble for not that much benefit. Because the library can accept many different scale types, a lot of the typings would be generics.

BUT, the TypeScript error you pointed out above is actually not related to LayerCake. TypeScript is complaining about importing a csv file.

Hopefully that helps clarify some of the Layer Cake side of things.

shyakadavis commented

Hey;

For CSV error:

I have the rollup plugin, but like you mentioned,

your build system is treating the csv file as a javascript file.

The issue persists, so for now, though not ideal, I'm just writing the data into a normal array.

For TS:

it's proved to be a lot of trouble for not that much benefit.

I can understand this. That said, do you mind pointing me in the direction of correctly typing the bare minimum/essential things.

For example;

  1. I've never touched contexts until now, so I'd appreciate any tips on how to type them. Like I can see in Area.svelte of the aforementioned example has these, const { data, xGet, yGet, xScale, yScale, extents } = getContext('LayerCake'); and they seem to be stores? But how do I go about typing them?

  2. In +page.svelte, Parameter 'd' implicitly has an 'any' type.ts(7006) (But I'm guessing from your comment this one can't be resolved given the many different scale types)

<LayerCake
	...
	y={(d) => d[yKey]}
	...
mhkeller commented

But how do I go about typing them?

I'm not the most skilled in TypeScript so you'd be better off asking people on the Svelte Discord or Stack Overflow what the current best practices are for adding types to store values retrieved from a context.

The guide will say what each of the types is for the context values. As you mentioned they are all stores.

  1. data is whatever you passed in to the <LayerCake> component. It will generally be an array of objects but it's up to the user so it could also be an array of arrays etc.
  2. xGet, yGet are functions that return numbers or arrays of numbers, depending on what you pass in for x and y
  3. xScale and yScale are D3 scales
  4. extents is an array of numbers

Parameter 'd' implicitly has an 'any' type.ts(7006)

Again I'm not a TypeScript expert but I think you need to add type declarations such as y={d: object => d[yKey]} or however the ts syntax is.

I included JSDoc types in the library and tend to find that is a good balance. Sorry I can't be of more help.

  • 👍1
  • ❤️1
mhkeller commented

I'm going to close this for now since I think these issues are not related to a problem with the library but feel free to post any follow-ups here although probably some Svelte-specific forum will give you better results.

  • 👍1