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	`95c38c2`
🔍 Latest deploy log	https://app.netlify.com/projects/svelteplot/deploys/6a5ff32d0b09620008a7d40c
😎 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: 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.

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 95c38c28cf

ℹ️ 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-07-21T22:41:29Z

        ...options
    }: RasterMarkProps = $derived({ ...DEFAULTS, ...markProps });

+    const svgFilter = $derived((markProps as any).svgFilter as string | undefined);


Resolve raster filter accessors before rendering

When svgFilter is supplied as an accessor, this stores the function itself and the <image> later receives that function as its filter value instead of the resolved URL. Other marks resolve svgFilter through resolveProp, and the shared mark type allows accessors, so Raster svgFilter={() => 'url(#blur)'} silently renders without the filter; resolve the prop once for the generated raster image or narrow the prop to a string-only API.

Useful? React with 👍 / 👎.

chatgpt-codex-connector · 2026-07-21T22:41:29Z

+    x="bill_length_mm"
+    y="bill_depth_mm"
+    fill="species"
+    fy="species" />


Keep the faceting solution on islands

This lesson text and code block instruct users to keep fy="island" so each panel represents an island, but the provided solved state switches the mark to fy="species". Clicking Solve therefore produces species panels instead of the island panels described by the exercise, making the tutorial answer inconsistent with the lesson; keep the solution's facet channel aligned with the markdown.

Useful? React with 👍 / 👎.

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

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

more tutorial work

95c38c2

gka had a problem deploying to npm July 21, 2026 22:32 — with GitHub Actions Failure

chatgpt-codex-connector Bot reviewed Jul 21, 2026

View reviewed changes

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

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 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

Uh oh!

chatgpt-codex-connector Bot commented Jun 15, 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 Jul 21, 2026

Choose a reason for hiding this comment

Uh oh!

chatgpt-codex-connector Bot Jul 21, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

gka commented Apr 26, 2026 •

edited

Loading

Interactive Tutorial (`/tutorial`)

Custom REPL package (`packages/repl/`)

netlify Bot commented Apr 26, 2026 •

edited

Loading