What's the best way to use locally?

[mhkeller]

If I see the area chart, for example, and I want to get a version of that going locally, what's the best way to do that? The code sample shows up like this:

But it would be nice to also show the imports. It looks like it has tailwind css classes, too. Is that required? Sorry if I've missed part of the docs. Would love a "Getting Started" or "Installing" section with a template repo.

[techniq]

Hey @mhkeller :). This is an area to improve for sure. It's challenging as I want to examples to focus on the concepts, but it's also painful to have to figure out imports, data, etc. That's one reason I added the view data button to make it a little easier to understand.

With that said, each page does have a Page Source button at the top, and a conveient Copy button to grab the full page of source.

Page Source	Dialog

If you are viewing a component docs, there is also a Source button, which is nice if you just want to the implementation

Source	Dialog

I 100% need to add a "Getting Started" section and improve/streamline that process. I also want a REPL (either embedded or quick open to Svelte REPL, SvelteLab, Stackblitz) but haven't had the time to integrate it (and was met with some challenges a few years ago when I tried, but I think things are much better now).

[techniq]

Btw, I've setup a discord to chat about these kinds of things if you would want to join - https://discord.gg/m5PhBaEX (don't feel obligated).

[mattlangeman]

@techniq I'm up for taking a stab at some getting started docs. My assumption you want to recommend installation via npm install as opposed to copying code into a new project. One issue I think is that when looking at the Layerchart example source, it shows importing components from $lib/components, but when you npm install, the import is different. Also, there is the tailwind config that needs to happen. None of it is super crazy, but likely would help get people started more smoothly.

[percybolmer]

I am all down for helping with the docs as well.

I am currently testing the libs and documenting any hickups I come across, I am totally down on making a few PRs with updates on the docs.

[techniq]

@mattlangeman That would be awesome!. Yeah, I agree having to understand and jump from...

import Chart from '$lib/components/Chart.svelte';
import Area from '$lib/components/Area.svelte';
import Axis from '$lib/components/Axis.svelte';
...

to...

import { Chart, Area, Axis, ... } from 'layerchart'

is beyond ideal. I have seen docs like Material UI which allow you to jump between concise and expand to full example...

I would love to have the best of both words going forward, but know it would be a decent lift. I like keeping the authoring experience as streamlined as possible.

I'm wondering if we could enhance the codePreview Svelte preprocessor to identify these components and add them to the top. Even a naive of find...

<SomeComponent>
  <AnotherComponent />
</SomeComponent>

and append the following to the top...

import { SomeComponent, AnotherComponent } from 'layerchart';

might be a good start, although it would definitely not be perfect.

I would love to see how other libraries handle this (most I've looked at are more explicit with the examples / sources, even having multiple copies. That makes me nervous based on the current volume and future maintainability.

[techniq]

@percybolmer We have a discord server that we've been chatting through some of this if you want to join.

I really should add that to the README :)

[mattlangeman]

I agree with making the authoring experience as streamlined as possible and not having to keep two copies of example code updated. I like the idea of trying to automatically add the import at the top of the code preview.

[mhkeller]

Honestly I get so confused by the discord UI I guess that makes me a dinosaur!

It's not the nicest code but the way I did the imports on the layer cake website FWIW is just string replacement so that the user can download a zip file with the proper import paths and the website can keep the $lib/path/to/Component.svelte imports

[mhkeller]

Here's the main part of where that code is in case it's helpful. i think i took the first version from maybe a very early version of the svelte REPL circa 2019. https://github.com/mhkeller/layercake/blob/59218331b184275fc6be34030a4125f399979281/src/routes/_site-components/DownloadBtn.svelte#L5

[mattlangeman]

Honestly I get so confused by the discord UI I guess that makes me a dinosaur!

You are not alone! I struggle with all of the non-threaded chat group apps.

[techniq]

@mhkeller Ha, no worries. yeah, we could do a simple regex replace, especially for the full page source since it's a simple string in each example's +page.ts. That would improve the $lib/components => layerchart mismatch (regex would be a little tricky being multi-line and needing to handle default and named exports for the same file...

import Chart, { Svg } from '$lib/components/Chart.svelte';
import Area from '$lib/components/Area.svelte';
import Axis from '$lib/components/Axis.svelte';

to

import { Chart, Svg, Area, Axis } from 'layerchart';

I think having a starter project would be nice as well, similar to npm create svelte, i.e. npm create layerchart (or svelte-ux). There is also svelte-add, but I haven't used it a bunch personally.

I know there are a few things being mentioned:

• Improve getting started, both with better (i.e. existing) docs, and possibly a quick way via CLI (npm create layerchart) or download button
• Improve the doc examples, with easier way to copy examples
• Possibly an interactive REPL or way to quickly experiment (using WebContainers or embedded REPL, or links to Svelte REPL, SvelteLab, StackBlitz, etc).

[techniq]

Initial getting started docs added by @mattlangeman

[techniq]

Some progress to report. We've recently made LayerChart and Svelte UX monorepos using pnpm workspaces, and added npm create svelte-ux@latest to the Svelte UX repo. Currently there is just a minimal and starter templates, but I plan to add a starter template that includes LayerChart. Additional, the starter template is currently available to open in SvelteLab, StackBlitz, or Codesandbox using the badges in the README.

With that said, I'm considering adding npm create layerchart@latest as well to setup the project with LayerChart only, and have a few templates (minimal, starter, and possibly with Svelte UX). Since they are both separate, but companion projects, it gets a little tricky where to draw a line, but I think this will be very helpful for both getting started quickly, testing ideas, diagnosing issues, etc.

Anyways, the first steps have been made, and we can iterate from here.

[techniq]

All imports on the docs/examples now use layerchart alias to improve copy/paste experience. Plan to continue adding improvements to make it easy to open individual examples in a REPL/StackBlitz/etc