feat(tutorial): add interactive tutorial with Svelte REPL by gka · Pull Request #555 · svelteplot/svelteplot

gka · 2026-04-26T22:36:36Z

Summary

Interactive Tutorial (`/tutorial`)

Full step-by-step tutorial at `/tutorial` with an in-browser REPL editor + live preview
7 chapters, 30+ exercises covering: getting started, marks (Dot, Tick, Line), transforms (stack, jitter), scales, axes & grids, and faceting
Each exercise has a starting state (`app-a/`) and a solution (`app-b/`) the user can reveal
"Auto-merge" mode: exercises that don't have an `app-a` inherit the previous step's solution as starting state
Shiki-based diff notation in prose: `+++added+++` / `---deleted---` highlight code changes inline
File tabs above the editor for multi-file exercises; SvelteKit `+`-prefixed files are hidden
Dark mode support for prose code blocks, editor, and preview pane

Custom REPL package (`packages/repl/`)

Self-contained `@svelteplot/repl` package (adapted from the Svelte REPL source) instead of relying on `@sveltejs/repl`
In-browser Rollup bundler worker with plugins: CSV, JSON, CommonJS, loop protection, TypeScript type stripping, and more
In-browser Svelte compiler worker
CodeMirror 6 editor with Svelte autocomplete

New library features

`svgFilter` prop added to all applicable marks (Area, Arrow, Dot, Image, Raster, RuleX/Y, TickY, Trail, Vector, and path/rect helpers)
`light-dark()` CSS color function support for marks

Bug fixes

AxisX and AxisY now automatically skip NaN and duplicate tick values
Fixed AxisY label alignment
Fixed global facet options (`fx`/`fy` scale propagation)

Docs & Examples

Inline examples rendered directly inside mark and transform reference pages via new `InlineExamplesGrid` component
New examples: rug plot, global facet scatter, tick-x-faceted, convex hull with blur
Extensive doc page rewrites across marks, transforms, features, and introduction pages
New polls dataset (`static/data/polls.csv`) and updated penguins CSV

Build & CI

`vite.config.js`: set `worker.format: 'es'` to fix IIFE/code-splitting incompatibility with the bundler web worker
OxLint CI: run `svelte-kit sync` before linting to generate required `.svelte-kit` types
Removed stray `.svelte-kit/tsconfig.json` from the repo root

Test plan

🤖 Generated with Claude Code

netlify · 2026-04-26T22:36:42Z

✅ Deploy Preview for svelteplot ready!

Name	Link
🔨 Latest commit	`38bf42b`
🔍 Latest deploy log	https://app.netlify.com/projects/svelteplot/deploys/6a2f928920d90d0008a28d71
😎 Deploy Preview	https://deploy-preview-555--svelteplot.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

github-actions · 2026-04-26T22:38:48Z

📦 Preview package for this PR is published!

Version: 0.14.2-pr-555.0

Install it with:

npm install svelteplot@pr-555
# or install the specific version
npm install svelteplot@0.14.2-pr-555.0

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: e21aa48faf

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2026-04-26T22:42:11Z

+    function toggle_solution() {
+        const target = solved ? data.exercise.a : data.exercise.b;
+        workspace.set(make_items({ ...data.exercise.a, ...target }));
+        solved = !solved;


Set solved state from intent instead of toggling it

workspace.set(...) calls the configured onreset handler synchronously, and that handler already assigns solved = false. The subsequent solved = !solved therefore computes from a mutated value, so clicking Reset (while currently solved) immediately flips solved back to true, leaving the UI stuck in the solved state and preventing the Solve/Reset toggle from behaving correctly. Set solved explicitly from the chosen target (solution vs starter) rather than negating the current flag.

Useful? React with 👍 / 👎.

github-actions · 2026-04-26T22:45:07Z

📦 Preview package for this PR is published!

Version: 0.14.2-pr-555.1

Install it with:

npm install svelteplot@pr-555
# or install the specific version
npm install svelteplot@0.14.2-pr-555.1

github-actions · 2026-04-26T22:50:12Z

📦 Preview package for this PR is published!

Version: 0.14.2-pr-555.2

Install it with:

npm install svelteplot@pr-555
# or install the specific version
npm install svelteplot@0.14.2-pr-555.2

github-actions · 2026-04-27T20:12:49Z

📦 Preview package for this PR is published!

Version: 0.14.2-pr-555.3

Install it with:

npm install svelteplot@pr-555
# or install the specific version
npm install svelteplot@0.14.2-pr-555.3

github-actions · 2026-04-27T20:18:07Z

📦 Preview package for this PR is published!

Version: 0.14.2-pr-555.4

Install it with:

npm install svelteplot@pr-555
# or install the specific version
npm install svelteplot@0.14.2-pr-555.4

github-actions · 2026-04-27T20:20:21Z

📦 Preview package for this PR is published!

Version: 0.14.2-pr-555.5

Install it with:

npm install svelteplot@pr-555
# or install the specific version
npm install svelteplot@0.14.2-pr-555.5

github-actions · 2026-04-27T20:21:51Z

📦 Preview package for this PR is published!

Version: 0.14.2-pr-555.6

Install it with:

npm install svelteplot@pr-555
# or install the specific version
npm install svelteplot@0.14.2-pr-555.6

github-actions · 2026-04-27T20:27:30Z

📦 Preview package for this PR is published!

Version: 0.14.2-pr-555.7

Install it with:

npm install svelteplot@pr-555
# or install the specific version
npm install svelteplot@0.14.2-pr-555.7

Integrates an interactive tutorial into svelteplot.dev using a local copy of @sveltejs/repl with a minimal site-kit shim, tutorial content from the svelteplot workshop, and a full-width SvelteKit layout that reuses the global navbar. - packages/repl/: local copy of @sveltejs/repl with embedded site-kit shim (Checkbox, Dropdown, ScreenToggle, Toolbox, HoverMenu, codemirror, polyfills) - src/content/tutorial/02-svelteplot/: tutorial exercises (6 chapters) - src/lib/server/tutorial.ts: import.meta.glob-based exercise loader - src/routes/tutorial/[...slug]/: SplitPane layout with Editor + Viewer - Vite/SvelteKit aliases for @sveltejs/repl/* and @sveltejs/site-kit/* shims - tsconfig.json excludes tutorial content files from type checking Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

The condition `parts[2] !== 'index.md'` excluded all exercise paths since every exercise's markdown is named index.md. Changed to check that neither the chapter nor exercise segment is `+assets`. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…h resolution @rollup/plugin-alias uses prefix matching for string aliases, so { find: '@sveltejs/repl', ... } was matching @sveltejs/repl/editor and replacing only the prefix, producing a non-existent path. The base package now resolves via the workspace symlink in node_modules. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Content was reorganized from 02-svelteplot/ to 01-basics/, 02-marks/, 03-transforms/. The loader now discovers groups dynamically from /src/content/tutorial/ and threads groupAssetPrefix through for shared assets, keeping slugs as chapter/exercise. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Set \$sidebar = false in the tutorial layout using the theme's writable store, which GlobalLayout reads with {#if \$sidebar}. Restore on destroy so navigating away from /tutorial re-shows the sidebar. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

tailwindcss v4 uses a Rust/WASM backend. When Vite pre-bundles it, the .wasm file ends up misplaced in .vite/deps/ and the browser gets a 404. Since init_tailwind() is only called with tailwind:true (never in this tutorial), excluding the package prevents the WASM from being loaded at all. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

@rollup/browser loads bindings_wasm_bg.wasm via new URL(..., import.meta.url). When Vite pre-bundles it into .vite/deps/, the .wasm file is left behind in node_modules, so the browser gets a 404. Excluding it keeps import.meta.url pointing at the real package location where the WASM file exists. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…ntax highlighting - Add shikiDiffNotation transformer with inline +++/--- marker support via Shiki decorations API - Add shikiFileHeader transformer for /// file: comment styling - Fix CodeMirror syntax highlighting by defining --shiki-token-* CSS variables - Add file tabs above CodeMirror editor, hiding SvelteKit +-prefixed files - Make tutorial Viewer respect prefers-color-scheme dark mode - Configure Prettier: 2-space indent for tutorial .svelte files Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: b27c0f4eb3

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2026-06-09T22:31:12Z

+              Array.from(new Set(data)).filter(
+                  (d) => !isNaN(d as number) && d !== null && d !== undefined
+              )


Preserve custom categorical ticks

When callers pass explicit ticks/data for a categorical axis, e.g. ticks={['Adelie', 'Gentoo']} or data={['A', 'B']}, this filter drops every non-numeric string because isNaN('Adelie') is true. That makes custom ticks unusable on band/point scales; only null/undefined and numeric NaN should be removed. The same regression is present in the matching AxisY change.

Useful? React with 👍 / 👎.

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: e356cf607b

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2026-06-09T22:58:30Z

+                workspace.files
+                    .filter((f): f is File => f.type === 'file' && f.name.startsWith('/src/lib/'))
+                    .map((f) => ({ ...f, name: f.name.slice(9) })),
+                { runes: true, svelte_version }


Bundle tutorial examples against the local package

When any tutorial file imports svelteplot, this bundle call provides no alias for it, so the REPL worker treats it as a bare npm dependency and resolves/fetches the latest published package instead of the workspace source. In deployed docs that are ahead of npm (or for changes in this same PR), the preview can render different behavior than the lesson and local docs; pass an alias/include the local package files for svelteplot in these bundle options.

Useful? React with 👍 / 👎.

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: ffd211664d

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2026-06-09T23:41:03Z

+                d={path}
+                class={styleClass}
+                {style}
+                filter={resolveProp(args.svgFilter, datum, undefined) as string | undefined} />


Pass original datum to svgFilter accessors

For PathGroup-backed marks such as Hull, DelaunayMesh, and VoronoiMesh, datum here is the scaled wrapper ({ datum, x, y, ... }), while resolveProp accessors are expected to run against the original data row (as the style code and other svgFilter call sites do with datum.datum). If a caller uses svgFilter={(d) => ...} or a column-backed filter, it receives the wrapper or cannot find the column, so per-datum filters are silently omitted or computed from the wrong object.

Useful? React with 👍 / 👎.

…at tutorial markdown isNaN('A') === true in JS, so the NaN-filtering guard on custom axis tick data was incorrectly dropping all string ticks on ordinal scales. Now only filters values that are numeric NaN. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

chatgpt-codex-connector · 2026-06-09T23:46:16Z

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

…/prefer-svelte-reactivity SvelteSet is already reactive so $state wrappers are not needed. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 4f9790fe63

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2026-06-09T23:55:48Z

+                if (parts.length >= 2 && parts[0] !== '+assets' && parts[0] !== 'index.md') {
+                    if (!acc.includes(parts[0])) acc.push(parts[0]);


Include nested tutorial lesson directories

For lessons nested below a section directory, this only records parts[0] as the exercise. In the added content, paths like src/content/tutorial/01-basics/02-marks/01-dot/01-symbol/index.md therefore become only the slug 02-marks/01-dot; load_exercise then looks for 01-dot/index.md and never exposes the actual 01-symbol, 02-dotx-doty, line, etc. lessons in entries() or the nav, so large parts of the new tutorial are omitted from the built site.

Useful? React with 👍 / 👎.

…f resolve() - toggle_group/toggle_chapter and afterNavigate now mutate open_groups/open_chapters in place instead of reassigning, resolving the non_reactive_update warning without needing $state() wrappers that ESLint flags as unnecessary - InlineExamplesGrid: replace resolve(dynamicString) with base+url since resolve() only accepts typed SvelteKit routes, not plain strings Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

chatgpt-codex-connector · 2026-06-10T00:05:15Z

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

…Lint and svelte-check The svelte/no-navigation-without-resolve ESLint rule requires resolve(), but resolve() is typed to only accept known SvelteKit routes — not dynamic strings. Using `as any` (same pattern as ExamplesPagePreview) satisfies both. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

chatgpt-codex-connector · 2026-06-10T00:13:20Z

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

chatgpt-codex-connector · 2026-06-10T00:17:30Z

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

chatgpt-codex-connector · 2026-06-10T00:19:58Z

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

chatgpt-codex-connector · 2026-06-10T05:27:24Z

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

chatgpt-codex-connector · 2026-06-15T05:50:07Z

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

gka temporarily deployed to npm April 26, 2026 22:38 — with GitHub Actions Inactive

chatgpt-codex-connector Bot reviewed Apr 26, 2026

View reviewed changes

gka temporarily deployed to npm April 26, 2026 22:44 — with GitHub Actions Inactive

gka temporarily deployed to npm April 26, 2026 22:49 — with GitHub Actions Inactive

gka temporarily deployed to npm April 27, 2026 20:12 — with GitHub Actions Inactive

gka temporarily deployed to npm April 27, 2026 20:17 — with GitHub Actions Inactive

gka temporarily deployed to npm April 27, 2026 20:19 — with GitHub Actions Inactive

gka temporarily deployed to npm April 27, 2026 20:21 — with GitHub Actions Inactive

gka temporarily deployed to npm April 27, 2026 20:26 — with GitHub Actions Inactive

gka and others added 12 commits April 27, 2026 22:30

rename tutorial chapter

396cfed

remove .svelte-kit file from index

ba3fa92

format

3c5ca89

remove log

42f122b

chatgpt-codex-connector Bot reviewed Jun 9, 2026

View reviewed changes

tutorial: make marks lesson more exciting using hull

e356cf6

chatgpt-codex-connector Bot reviewed Jun 9, 2026

View reviewed changes

gka added 2 commits June 10, 2026 01:29

auto-merge tutorial with prev step

8591c8d

feat: implement svgFilter property everywhere

ffd2116

chatgpt-codex-connector Bot reviewed Jun 9, 2026

View reviewed changes

gka had a problem deploying to npm June 9, 2026 23:47 — with GitHub Actions Failure

fix(lint): use SvelteMap/SvelteSet in tutorial page to satisfy svelte…

4f9790f

…/prefer-svelte-reactivity SvelteSet is already reactive so $state wrappers are not needed. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

gka had a problem deploying to npm June 9, 2026 23:54 — with GitHub Actions Failure

chatgpt-codex-connector Bot reviewed Jun 9, 2026

View reviewed changes

gka had a problem deploying to npm June 10, 2026 00:06 — with GitHub Actions Failure

gka had a problem deploying to npm June 10, 2026 00:14 — with GitHub Actions Failure

tutorial: design tweaks

998bde9

gka had a problem deploying to npm June 10, 2026 00:18 — with GitHub Actions Failure

fix Reset button

93f9368

gka had a problem deploying to npm June 10, 2026 00:21 — with GitHub Actions Failure

snapshot

0e9aacc

gka had a problem deploying to npm June 10, 2026 05:28 — with GitHub Actions Failure

tutorial work

38bf42b

gka had a problem deploying to npm June 15, 2026 05:51 — with GitHub Actions Failure

		if (parts.length >= 2 && parts[0] !== '+assets' && parts[0] !== 'index.md') {
		if (!acc.includes(parts[0])) acc.push(parts[0]);

Uh oh!

Uh oh!

Conversation

gka commented Apr 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Interactive Tutorial (/tutorial)

Custom REPL package (packages/repl/)

New library features

Bug fixes

Docs & Examples

Build & CI

Test plan

Uh oh!

netlify Bot commented Apr 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for svelteplot ready!

Uh oh!

github-actions Bot commented Apr 26, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Apr 26, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Apr 26, 2026

Uh oh!

github-actions Bot commented Apr 26, 2026

Uh oh!

github-actions Bot commented Apr 27, 2026

Uh oh!

github-actions Bot commented Apr 27, 2026

Uh oh!

github-actions Bot commented Apr 27, 2026

Uh oh!

github-actions Bot commented Apr 27, 2026

Uh oh!

github-actions Bot commented Apr 27, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Jun 9, 2026

Choose a reason for hiding this comment

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Jun 9, 2026

Choose a reason for hiding this comment

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Jun 9, 2026

Choose a reason for hiding this comment

Uh oh!

chatgpt-codex-connector Bot commented Jun 9, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Jun 9, 2026

Choose a reason for hiding this comment

Uh oh!

chatgpt-codex-connector Bot commented Jun 10, 2026

Uh oh!

chatgpt-codex-connector Bot commented Jun 10, 2026

Uh oh!

chatgpt-codex-connector Bot commented Jun 10, 2026

Uh oh!

chatgpt-codex-connector Bot commented Jun 10, 2026

Uh oh!

chatgpt-codex-connector Bot commented Jun 10, 2026

gka commented Apr 26, 2026 •

edited

Loading

Interactive Tutorial (`/tutorial`)

Custom REPL package (`packages/repl/`)

netlify Bot commented Apr 26, 2026 •

edited

Loading