Skip to content

feat: REPL support for Solid 2 (builds on #173) - #177

Open
devagrawal09 wants to merge 9 commits into
kobaltedev:mainfrom
devagrawal09:repl-solid2
Open

devagrawal09 wants to merge 9 commits into
kobaltedev:mainfrom
devagrawal09:repl-solid2

Conversation

@devagrawal09

Copy link
Copy Markdown
Contributor

REPL support for SolidBase 2, building on @milomg's #173. It contains his commit (bb14a31, rebased onto Solid 2) unchanged, plus three fixes from milomg#1. I can't push to his branch, so this PR gets a preview and review going now, as @jer3m01 asked on #173. Happy to close it if milomg prefers to land #173 himself.

Feature (from #173)

  • A remark plugin turns REPL code blocks into an embedded solid-repl playground.
  • Repl/ReplClient load client-only through clientOnly, with an Errored fallback. Compiler and formatter workers are shared between REPLs on a page.
  • solid-repl is an optional peer dependency. Without it, a stand-in component renders.
  • The demo page is dev/src/routes/repl.mdx.

Fixes on top

  • Align root, dev and docs with Solid/Web rc.19 and update the pnpm 11.20.0 lockfile. Keep library Solid peer ranges and the Vite plugin unchanged.
  • Install published solid-repl@^1.0.1 for library development and the dev app; constrain its optional peer to ^1.0.0.
  • Use a file-backed missing-package fallback so prerender can find its client assets without a manifest warning.
  • Add seven REPL cases to existing test suites only: markdown options/files, flagged code, validation and CSS scoping.

Commits: ae6273a dependencies; 5bef30e fallback; ad6d032 existing-suite tests.

Verification

  • Rerun after test cleanup: 147 tests / 29 files, Biome and library typecheck — all passed.
  • Earlier runtime checks remain valid (runtime code unchanged): frozen install, library build, dev/docs tsc and production build/prerender, plus clean tarball consumers with REPL absent and present.
  • Playwright on dev/preview at / and /docs/: edit/compile, counter clicks, formatting, themes and worker cleanup/recreation passed. Four REPLs share compiler/formatter workers; total workers go 6 → 0 → 6 on navigation. No hydration errors or diagnostics traced to SolidBase.

Known upstream issues

  • Kobalte alpha.4/utils alpha.1 require exactly rc.16: pnpm warns, but installation succeeds with one rc.19 runtime per app. These warnings go away once fix: allow newer Solid 2 release candidates in peer ranges kobalte#756 is released.
  • Kobalte Select emits untracked-read and effect feedback/relay development diagnostics on theme changes.
  • solid-repl@1.0.1 has intermittent language-worker TypeError: n is not a function and embedded chii devtools errors. No vendor patches included.

Notes

  • The Netlify preview builds the docs site only, so it verifies install and build but doesn't show the REPL. The demo is in the dev app (pnpm dev in dev/).

Supersedes #173.

— Claude (Opus 5.5), posting on behalf of @devagrawal09

@netlify

netlify Bot commented Oct 29, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for solidbase ready!

Name Link
🔨 Latest commit 0183703
🔍 Latest deploy log https://app.netlify.com/projects/solidbase/deploys/6ae8dab094638bc462d4d038
😎 Deploy Preview https://deploy-preview-177--solidbase.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 89 (🔴 down 1 from production)
Accessibility: 100 (no change from production)
Best Practices: 100 (no change from production)
SEO: 100 (no change from production)
PWA: -
View the detailed breakdown and full score reports
🤖 Make changes Run an agent on this branch

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

@pkg-pr-new

pkg-pr-new Bot commented Oct 29, 2026 •

Copy link
Copy Markdown

Open in StackBlitz

npm i https://pkg.pr.new/kobaltedev/solidbase/@kobalte/solidbase@177

commit: 0183703

@socket-security

socket-security Bot commented Oct 29, 2026 •

Copy link
Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security
Vulnerability Quality Maintenance License
Addedsolid-repl@​1.0.1731007590100
Updated@​solidjs/​web@​2.0.0-rc.16 ⏵ 2.0.0-rc.1989 -1010083 +197 +1100
Updatedsolid-js@​2.0.0-rc.16 ⏵ 2.0.0-rc.19100 +110095 +196 +2100

View full report

@jer3m01
jer3m01 self-requested a review October 29, 2026 10:48
@devagrawal09

Copy link
Copy Markdown
Contributor Author

Added a full screen mode. Each REPL now has a Full screen button above it.

Why the output was hard to use: inline, the preview is about 826×143px on desktop (under a third of the 32rem box) and sits behind a tab on mobile. Full screen makes it 545×819px at 1440×900, beside the editor, and 390×762px on a 390×844 phone. The new button row takes about 13px from the inline preview.

How it behaves

  • Exit with the button or Esc. Focus returns to the button, and the page's scroll position is kept.
  • Esc closes the editor's search panel, autocomplete or a menu first. A second press exits.
  • The page behind is scroll-locked and inert, so only one REPL can be full screen at a time. Leaving the route clears all of this.
  • Portrait screens stay stacked, and layout=horizontal blocks keep their layout.

Why not the native Fullscreen API: solid-repl portals its menus to <body>, so they open hidden behind the fullscreen element. I tested this with the tab's Rename/Delete menu. It's a fixed overlay instead, which also doesn't depend on element fullscreen, which iOS Safari lacks.

Trade-offs

  • solid-repl only reads vertical on mount, so moving a stacked REPL side by side has to remount it. Edits are kept, but preview state, undo history, the cursor and extra open tabs reset. The preview usually returns in about 0.9s, though I saw a few much slower runs (up to about 20s) that I haven't explained. This is its own commit, so it's easy to drop if you'd rather keep state and stay stacked (preview about 1436×280px).
  • Esc can't be detected while focus is inside the preview iframe, so the button is the way out there.
  • Not changed: on desktop, solid-repl keeps the preview at pointer-events: none until its panel is active, so the first click only activates it. That also makes the inline preview feel unresponsive, and looks like a fix for solid-repl itself.

To try it: open /repl in the dev app (pnpm dev) and click Full screen on any REPL. The labels can be overridden with replFullscreen and replExitFullscreen in themeConfig.text.

Tested in Chromium at desktop, emulated mobile and tablet sizes, in light and dark, and under --base /docs/. Not tested in real Safari or Firefox.

I also pushed 0183703, which fixes the Biome format error and the unused onCleanup import in pace.ts (no behaviour change), so the Biome check passes.

— Claude (Opus 5.5), posting on behalf of @devagrawal09

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.

3 participants