Skip to content

Conversation

@techniq
Copy link
Owner

@techniq techniq commented Oct 16, 2025

Goals

  • Provide complete / standalone / isolated examples with easy copy and paste and ability to open in Svelte REPL/Playground or Stackblitz
  • New Examples browse page with filtering
  • Automatically find related examples for all components
  • Expose APIs (generated from $prop() types)
  • Improved search (sub-section)
  • Improved design
  • Better separation of library and docs dependencies

Closes #620

PR also

  • Adds settings (default layer type and debug)
  • Layer improvements
    • respects layer setting (default)
    • integrates debug setting (overall and padding bounds)

TODO

Existing

  • Create new docs projects at {project_root}/docs}
  • Setup content-collections
  • Setup mdsx
  • Setup Tailwind / Theme select
  • Setup unplugin-icons
  • Setup Svelte UX
  • Table of Contents
  • Analytics
  • Integrate renderContext (svg/canvas/html) setting
  • Integrate debug setting
  • Setup CI (build)
  • Deploy new site to Cloudflare (new directory)
  • Identify pattern to define examples
    • preprocess markdown code blocks
      • Pro
        • Faster to migrate
        • Quick to iterate
      • Con
        • More difficult to implement (find old preprocessor)
    • Separate page per example (almost 700)
      • Pro
        • Better tooling (prettier, errors)
        • Easier to implement (?raw for source)
        • Full examples (<script>)
        • Easier to open in REPL
      • Con
        • More intensive (almost 700)
        • Each needs distinct name
  • Migrate all examples
  • Search
  • Responsive layout
  • light/dark shiki themes
  • Remove old site (after migrated)
  • Update Getting Started
  • Fix screenshots (show full examples (multi-chart), hide controls)
  • Fix data warning (box value in object)

New


Structure

I'm also thinking we have the following sections (not rigid, but general ideas):

possibly

  • Updates (News / Blog)

Issues

@changeset-bot
Copy link

changeset-bot bot commented Oct 16, 2025

🦋 Changeset detected

Latest commit: bd90db7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages
Name Type
layerchart Minor
shadcn-svelte-1 Patch
svelteux-2 Patch
skeleton-3 Patch
skeleton4 Patch
standalone Patch
daisyui-5 Patch
docs Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions
Copy link
Contributor

github-actions bot commented Oct 16, 2025

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name Status Preview Last Commit
layerchart ✅ Ready (View Log) Visit Preview bd90db7

@pkg-pr-new
Copy link

pkg-pr-new bot commented Oct 16, 2025

Open in StackBlitz

npm i https://pkg.pr.new/layerchart@659

commit: bd90db7

… / esbuild issue after updating content-collections
* fix for empty layers toggle showing small circle

* View transition tweak

View transition set scroll to auto (not smooth) so transitions not missed.
* fix for empty layers toggle showing small circle

* Barchart dynamic height example
* fix for empty layers toggle showing small circle

* add all-3 layers example (Smiley)
…ne` to fix SVG pointer events (ex. bubble map)
* initial setup testing on Arc

* more work on test Harness

* fix for empty layers toggle showing small circle

* more harness work

* first pass testing for Arc. I'm happy for any overhail for bigger picture.

- Harnesses are in `packages/layerchart/src/lib/components/tests/ChartHarness.test.svelte`
- otherwise colocated tests in ..../components
- Original Component does not require any updates.
  - `test-lc-chart` and `test-lc-component` are added via harness.
  - Optionally add accessory `data-testid="????"` in Component. I did this for `data-testid="arc-track` so that I could hook onto this accessory.
- There are a few tests I didn't know how to write (marked and commented out).

* Testing second pass

- removed hardocded `fill-blue`
- remove data-testid from Canvas.svelte
- when needed apply

```ts
componentProps: {
  track: { 'data-testid': testId },
}
```

instead of hardcoded in original Component.

* Test refinements

- TestHarness (Previously ChartHarness) now support snippet testing
- TestHarness supports Testing components w/o Chart (ie SimpleCharts)

* format

* Increase testTimeout (back to default 5s) to hopefully fix sporatic module import, add packages to fix type errors

* Remove old playwright test setup (using vitest browser mode)

* update pnpm-lock.yaml

* fix browser install for packges/layerchart

* Attempt to fix "TypeError: Failed to fetch dynamically imported module:" for "Arc.svelte.test.ts"

* Move `optimizeDeps` from top-leve to project in attempt to fix CI

* Try splitting the client (browser) tests from the server/ssr tests

* fix command

* Try to render a basic test

* another try

* add more to optimizeDeps

* add runed

* Add missing `lang="ts"` to fix `Expected "}" but found "Highlighter"`

* Ignore `state_referenced_locally` warnings (for now)

* Restore previous Arc tests

* Parallelize the CIi workflow into separate jobs

* Cleanup earlier vitest config attempts to fix "failed to fetch dynamically imported module"

---------

Co-authored-by: Sean Lynch <[email protected]>
* fix for empty layers toggle showing small circle

* better-export-data-prune

now removes all lf's before and after some variation of

`export { data };`

- for example source
- for stackblitz code

* added needed LF. not sure how that happend. Looks right now.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants