CLI tool for component download / Speeding up project start

[rgieseke]

I don't remember which UI component library was using such an approach but I was thinking it could be great to be able to download the Layer Cake components with some command line command into your own project instead of downloading a ZIP file or copying them from the website.

Have you thought about something like this?

[shyakadavis]

Hi;

I don't remember which UI component library was using such an approach

https://github.com/huntabyte/shadcn-svelte (https://www.shadcn-svelte.com/) comes to mind. A great example for your consideration in case it's ever decided.

[rgieseke]

Thank you, yes, that might have been the one i remembered.

[mhkeller]

Yea that's really neat. I like their interactive walkthrough. The idea has come up over the years and what's stopped me is the core idea of the library is that you have the freedom to make your own components. I didn't want people to feel like the components on the website were The Way To Make Charts™️ and I worry that making those components really easy to incorporate may not be the best option for new users.

The counter-argument is: If you're going to make a bunch of components for the website that people can use as a jumping off point, why not make it as easy as possible for them to incorporate them into their projects?

The line to balance is at what point does ease and convenience muddy the waters? I still get a lot of questions from confused people who don't realize that the components on the website are not a part of the library. (Even though I've written something to that effect on the home page, component gallery and at the top of the guide 😭. Maybe that copy is due for a rewrite since something about it is not clear enough!)

Would having an official tool that incorporates those components into your project help someone understand what the library is meant to do or further confuse them? These components are also my own best crack at what a generic axis or bar chart component is – I wouldn't want people to think my choices are the absolute canon.

I probably got some thing wrong or there are better patterns to use. For example, you could imagine some standard font-size CSS variable that you add via a prop in a lovely and elegant pattern. Instead, I've hard coded font-size: 11px; in a few places. Purposefully avoiding "a system" has the benefit that there's no system to learn and someone can just remove font-size: 11px; and do whatever they want.

To summarize: I do like the idea of making it easier for people to download files. But I also think that the friction and atypical-ness of the current setup has some pedagogical value.

Open to other thoughts, though! And, of course, anyone can build whatever they like! I think a CLI would most help power users who already understand the library. For them, I could see it being a really useful thing.

[benkates]

This might be a different use case than you're looking for but LayerChart is a library of pre-made viz built on top of Layer Cake. It provides some nice pre-made starter components but still adheres to the spirit of Layer Cake with composability.

[rgieseke]

Yes, I imagine such a CLI tool could pull components from multiple repos into one's projects.

[mhkeller]

Another idea that I've toyed with but I don't think I can take on as a maintainer would be a library that included Chart-level components with props for existing components like AxisX, Line etc. Something like:

<script>
  import { LayerCake, Svg } from 'layercake';
  import { AreaChart } from 'layercake/charts';

  import data from 'data.csv'
</script>

<LayerCake
  x='myX'
  y='myY'
  {data}
>

  <Svg>
    <AreaChart/>
  </Svg>

</LayerCake>

The <AreaChart/> component would look like this:

<script>
  import AreaComponent from './Area.svelte';
  import AxisXComponent from 'AxisX.svelte';
  import AxisYComponent from 'AxisY.svelte';

  export let AxisX = AxisXComponent;
  export let AxisY = AxisYComponent;
  export let Area = AreaComponent;
</script>

<svelte:component this={AxisX}/>
<svelte:component this={AxisY}/>
<svelte:component this={Area}/>

What that would let you do is, without having to do the annoying step of copying any code into your project, you get a very quick chart setup while preserving the ability to override the default component with something from your project like this:

<script>
  import { LayerCake, Svg } from 'layercake';
  import { AreaChart } from 'layercake/charts';

  import MyAxisX from './custom-project-charts/MyAxisX.svelte';

  import data from 'data.csv'
</script>

<LayerCake
  x='myX'
  y='myY'
  {data}
>

  <Svg>
    <AreaChart
      AxisX={MyAxisX}
    />
  </Svg>

</LayerCake>

If someone wanted to build this kind of library I think that would be really neat! My hesitations for doing it myself – and maybe I'll think differently in the future are:

1. Layer Cake is currently very sustainable to maintain because I'm not fielding requests from people to add specific features to each component. If they don't like the examples on the website, they can build that in user-land. While this proposed feature does not preclude that, it sets more of an expectation that this is a fully-featured chart library that comes with a lot out of the box instead of a framework that helps you build your own charts.
2. Combining this with Layer Cake itself seems like a versioning nightmare so it would have to live as its own thing. Even then, seems hard to version and make sure you're not messing up people's projects.
3. Simple time commitment. I have other things I'm working on – in addition to my day job – that I'd like to make progress on this year.

But if anyone is so inspired, please take this idea and run with it! I think it provides definite speed and DX improvements without sacrificing customization. I don't really see a downside from the user's perspective.

[rgieseke]

Another idea how to facilitate re-using the components could be to expose the download path of individual files somehow on the Layer Cake website.
That way it's not,

• click download zip in the browser,
• find file,
• unpack,
• move files into project,

but could instead just be

• go to directory in your project
• wget or curl component from its direct link

A tool for this, like discussed above in the thread, is probably just a fancy wrapper around this approach.
If you like this i'd be happy to start a PR for this.

[mhkeller]

Interesting idea! It makes me wonder if there is a way to make the download button include a wget or curl command, similar to how repos on GitHub have various download / clone options.

Some context for how to implement this

Currently there are two "download pages":

1. Examples which contain multiple components and they all get zipped up
2. Components which are almost always single components but can also include helper modules like Arrows.svelte.

For multi-file downloads, one thing to keep in mind is the download button does a bit of work adjusting file paths so that the imports make sense in a bare-bones example since the file paths on the website are their own system.

For single-file downloads (components) I could see having a wget or curl help you avoid having to make a new file in your text editor. It would still have to support multi-file components like the Arrow component and that may be annoying since you may also have to create a modules folder or something.

Current ways:

1. Click download, drag into your project
2. Click copy, open a new file, save

Proposed

1. Coy a curl command, navigate your terminal to the correct folder, run command

I'd be curious to see if that is faster. Personally, I kind of like just dragging files instead of cding places but if there's another option on the website for those that think differently then that would be helpful.