Repository navigation
Site overhaul, Tetris tutorial chapter, and library catch-up from fixes - #57
Merged
Merged
Conversation
Wires @mdx-js/rollup with solid-mdx provider into the tutorial Vite config, adds remark-frontmatter/remark-mdx-frontmatter plugins, and renders a smoke-test chapter (00-hello.mdx) that exports a typed frontmatter object.
Replace the bespoke Vite + custom-MDX scaffolding with a SolidStart + @kobalte/solidbase site. Salvages the @bigmistqke/repl-backed `<Demo>` component and the local solid-three esbuild bundle plugin verbatim. The tutorial is now its own isolated project (no longer driven by the root vite config): tutorial/package.json with @solidjs/start v2 alpha, @kobalte/solidbase 0.6.x, vite 8, nitro. Root `dev:tutorial` / `build:tutorial` cd into tutorial/ and run `vite dev` / `vite build`. Chapters are MDX files under `src/routes/`, the sidebar (Parts I-VI) is configured in `vite.config.ts`, and Demo is exposed globally to MDX via `src/theme/mdx-components.tsx` (SolidBase's componentsPath convention). A small fallback plugin works around a packaging quirk in SolidBase 0.6.3 where some `.jsx` files in dist are referenced via `.js` extensions. Demo is rendered as an empty placeholder during SSR because @bigmistqke/repl depends on DOMParser; the client takes over on hydration.
…stqke/repl The previous pipeline ran ts.transpile twice (preserve -> ReactJSX with jsxImportSource: 'solid-js'), producing _jsx(...) calls that import from solid-js/jsx-runtime. That module doesn't export 'jsx' (Solid compiles JSX to _$template/_$insert calls, not a runtime jsx() factory), so snippets failed at load time. Use @bigmistqke/repl's babelTransform to load @babel/standalone + babel-preset-solid from esm.sh at runtime, and run Solid's real JSX transform on the snippet. TS syntax is stripped first via ts.transpile (JsxEmit.Preserve) so Babel only handles JSX -- this also sidesteps the @babel/preset-typescript filename requirement that babelTransform doesn't forward. The Babel bundle resolves asynchronously, so the Extension transform returns an Accessor that swaps in the compiled output once the CDN imports settle; before then it emits a placeholder default export so the iframe loads without throwing.
…ite ch4 as click+signal
…rted via ?raw) Extracts all inline MDX template-literal snippets to tutorial/src/snippets/ and imports them via Vite's ?raw query to preserve source indentation exactly.
Tap the demo iframe's theme postMessages into a signal and rebuild the canvas texture + background on change: dark tube / light type in dark mode, inverted in light mode.
Revert the reference route tree and all cross-links to /api; keep /tour.
The previous approach keyed off the active link, but Kobalte unmounts a collapsed section's content so that link isn't in the DOM until its section is already open. Derive the section from /api/<group>/<page> instead — the capitalized group matches the section heading — and click its still-collapsed trigger. Also reverts the tab label to API.
Edit-mode runs the snippet in a blob: iframe whose base can't resolve root-absolute paths, so a loader fetching "/IFKica-Regular.ttf" threw "Failed to parse URL". Add the same <base href=origin/> the initial bootstrap uses; module specifiers are already absolute, so only runtime fetches are affected.
The bootstrap blob memos depended on editorTheme, so toggling the theme regenerated the blob and reloaded the iframe — defeating the postTheme() message that already updates color-scheme live. Read the theme untracked when baking the HTML, and seed useSiteTheme from the real data-theme so the initial bake is correct (no first-paint flash).
Show a hero-style progress line whenever an edit is recompiling/reloading. Driven by a `compiling` signal set synchronously on input (outside the startTransition that defers `hasEdited`), so it appears immediately and covers the first-edit TS/Babel + dependency load, clearing on iframe load.
IFKica is only free for personal use; a public docs site redistributes the font binary, which that license doesn't cover. Swap in the OFL Zalando Sans Expanded (self-hosted .ttf, needed for letter-drop's TTFLoader) across the @font-face, rubiks, tunnel, and letter-drop.
Replace the onMount class toggle (which walked up to the containing <article> after first paint, causing a one-frame jump) with an article:has(.hero) selector so the layout applies on first render.
Show the loading bar during the initial/reload load (compiling || iframeBusy) instead of the separate pulsing circle, and remove its CSS + keyframes.
- Introduce <Entity from={Class}> as the fundamental wrapper before createT,
and link both API references.
- Reserve callouts for genuine side-notes: createT brevity is a [!NOTE], the
WebGPU support caveat becomes [!WARNING], and the T.Group blockquote reverts
to inline demo narration.
- Note Entity mirrors Solid's <Dynamic> in the API reference.
- Style inline-code links with an accent border so they read as links.
…hing Grid treadmill scroll + slow turntable orbit framing the duck; build the extruded geometries declaratively (centered via the geometry ref); make the eyes track the camera; smooth the teardrop body with Phong + higher curveSegments.
Repurpose the gh-pages workflow to build and deploy the SolidStart site (was the old demo), using the official Pages actions and triggering on next. SolidStart v2's Vite-plugin architecture doesn't thread a deploy base through manifest injection, SolidBase links, or the app head, so add Vite base + nitro baseURL + Router base and a post-build pass that prefixes root-absolute href/src in the prerendered HTML. Base lives in one place (base.config.ts). Bump Node to 24 to run the .ts script.
typescript-eslint rejects a relative tsconfigRootDir, so every src file failed to parse and was never linted. Point it at import.meta.dirname.
These were never enforced while the parser was misconfigured. Correct LoaderTreeRegistry.get to return CacheNode | undefined (it always could), which legitimises the existing not-found guards; drop redundant optional chains on the get-or-create registry and the non-null TreeNode parent; prefer-const and remove a no-op type assertion. Type/syntax only, no runtime behavior change.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What's in this PR
A new docs site for
solid-three(site/, ~21k lines, 93 files) plus a small follow-up refactor of the renderer-type default. The library/test-infrastructure work that came in via the recentfixesmerge — gl-prop flat refactor, browser-mode testing migration,createThreecanvas swap, etc. — is not described below; it's its own concern and reviewable separately.The docs site
Scaffolded under
site/with SolidStart and SolidBase, rendered with MDX. Every code sample is a live<Demo>— a small wrapper around@bigmistqke/replthat compiles the snippet withbabel-preset-solidand runs it in an iframe; the reader can edit the source in-place. Two top-level sections:Tutorial (nine chapters)
Canvas,<T.Mesh>, the smart-prop pipeline.args, reactive props.<Show>,<For>,<Index>,<Switch>/<Match>,<Suspense>.stopPropagation,onClickMissed.useLoader,<Resource>, loader cache.<T.Mesh>."API reference
Ported and rewritten from the README into per-export pages, organised by component / hook / event / utility (16 pages). Notable rewrites:
Canvas— flat r3f-styleglprop documented, with an explicit note that constructor params are applied once at first construction and are never re-read (becausecanvas.getContextis idempotent — to swap, unmount and remount<Canvas>). Defaults table coversframeloop,gl,shadows, tone-mapping, color-space.useProps— rewritten to match the actual coercion order insrc/props.ts.Entity/createEntity— moved off theTpage where it didn't belong.Home page
A 3D hero scene of SOLID THREE letters dropped with cannon-es physics, cursor repulsion, click-to-punch, camera drift, fake contact shadows, studio reflection. A toggle lazy-mounts a
<Demo>editor over the scene so the home page doubles as a REPL into its own source.<Demo>componentThe piece that makes the whole site tick. Wraps
@bigmistqke/repl, pre-bundles the localsolid-threefor the iframe, gates the editor open on click, syncs the editor theme with the site's light/dark mode, syntax-highlights viatm-textarea, surfaces compile errors without killing the iframe, and bakescolor-schemeinto the iframe HTML at creation so there's no white flash in dark mode.Renderer type default (small library follow-up)
The
fixesmerge leftResolvedRendererdefaulting to the openRendererunion, which forced every project to declare aRegisteraugmentation just to callWebGLRenderer-specific methods onuseThree().gl. This PR flips the default:ResolvedRendererdefaults toWebGLRenderer— the common case is friction-free; users on other renderers opt in viaRegister.Register/Renderer/ResolvedRendererre-exported at the top level sodeclare module "solid-three" { interface Register { ... } }works directly (previously the symbols were only accessible via theS3namespace, so augmentation didn't merge).solid-three.d.tssince the site demos both WebGL and WebGPU renderers.tests/setup.tsso mockRendererLikerenderers in test fixtures keep type-checking.This is the only library change in this PR; everything else under
src/was already infixes.Process / docs
Specs and implementation plans for the bigger pieces of work (tutorial structure, hero splash REPL, tetris chapter) live under
docs/superpowers/{specs,plans}/.Test plan
pnpm test— 9 files, 151 passed, 2 todo, 0 failures.pnpm exec tsc --noEmit— clean apart from two pre-existing, unrelated errors (demo.tsxbabel-preset,vite.config.tsextensionAlias drift).pnpm build— both ESM and DTS build successfully.cd site && pnpm dev— walk the tutorial chapters end to end, exercise the API reference pages, confirm the hero scene plays.