notes-demo: browser app validating the webrun no-bundle CSS pipeline - #1
Merged
Conversation
…F3 url() asset, swappable FilesApi store) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
build.ts runs newProjectBuild(src→dist); serve.ts is a node:http static server for the emitted tree; index.html sets <base href="/~/"> (F2/F3 deployment requirement). test/build.test.ts asserts the emitted /~/ tree (Tailwind utilities + @theme bg-brand, real /~/tokens.css F2, byte-identical /~/logo.svg F3, /~/main.js entry) with MemFilesApi — no network. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
README covers what it demonstrates, pnpm build/serve, the ?mem param, and the <base href="/~/"> F2/F3 note. css-modules.d.ts makes `import "./styles.css"` typecheck (tsc --noEmit clean). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…browser Rewrites the guest UI as plain DOM/TS (drops React — its no-bundle instance sharing is a separate concern from the CSS features under test). Renames to @statewalker/webrun-notes-demo (a name collision existed with webrun-wire). Adds a PLAIN @import chain (theme.css → palette.css) to exercise F2 at RUNTIME: the injected <style> keeps @import "./palette.css", which resolves against <base href="/~/"> to the real emitted /~/palette.css (verified: #c7d2fe borders .note-card). Tailwind + @theme (bg-brand #4f46e5) and the F3 url() asset also verified in a real browser. MemFilesApi build test 4/4 green; tsc + biome clean. Requires webrun-files fix/resolve-project-ext (project .js→.ts/.tsx resolution).
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
1 participant
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.
notes-demo — browser app validating the webrun no-bundle CSS pipeline
Adds
apps/notes-demo(@statewalker/webrun-notes-demo): a plain-DOM/TypeScript note-taking app served with no bundler through@statewalker/webrun-modules-build. Its purpose is to validate the Phase-3 CSS features (Tailwind v4 + F2@importchains + F3url()assets) in a real browser.Verified in a real browser
@theme— utilities render; the custombg-brandtoken (#4f46e5) applies to the logo chip + "New" button.@importat runtime — a plain (non-Tailwind) chaintheme.css → @import "./palette.css"keeps the@importin the emitted<style>injector; it resolves against<base href="/~/">to the real emitted/~/palette.css, whose--note-line: #c7d2fecolors the.note-cardborder. (The Tailwind entry instead inlines its@import, so the plain chain is what exercises the runtime case — the F2 runtime-base concern is thereby answered: it resolves when the document base is the tree root.)url("./logo.svg")→ byte-identical/~/logo.svg./~/main.jsas a plain ES module; the whole graph (guest + npm deps) is served from the static build tree.Design notes
src/store.tsis FilesApi-only; default persists via a localStorage-backedMemFilesApi,?memboots a clean in-memory store (auto-testable).Tests / gate
test/build.test.ts(MemFilesApi, no network) 4/4 — asserts the emitted tree: Tailwind utilities +bg-brand/#4f46e5, real/~/tokens.css(F2), byte-identical/~/logo.svg(F3),/~/main.jsentry.tsc+biomeclean.🤖 Generated with Claude Code