feat(snippet): embeddable <silk-snippet> element with live diagnostics, hover, and inlay hints - #268
Merged
Conversation
New framework-free @silk-effect/snippet package: CodeMirror-based editor core with compiler-driven highlighting and opt-in language-server semantics (diagnostics, hover, inlay hints) compiled lazily in the browser per snippet, exactly as doctest verifies them. The labs workbench editor becomes a thin React wrapper over the shared core; Hover.tsx's React renderer is replaced by a DOM renderer in the package. The static documentation site emits <silk-snippet> for silk fences (silk,ignore degrades to highlight-only) and ships the self-registering element bundle with generated pages, keeping the renderer's no-workspace-imports boundary: only the CLI shell resolves the bundle, as opaque file contents.
Syncs the snippet-element and documentation-site-silk-snippets capabilities into main specs and archives the completed 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.
Summary
Extracts the labs workbench editor into a new framework-free package,
@silk-effect/snippet, exposing a<silk-snippet>custom element that any plain-HTML page can use with one script tag — and teaches the static documentation site to emit it forsilkfences.packages/snippet— CodeMirror-based editor core (Editor.ts) with compiler-driven highlighting and opt-in language-server semantics:diagnostics,hover,inlay-hints,editableas boolean attributes. Snippets compile lazily (first visibility, main thread) as standalone modules with doctest's conventions, so readers see exactly what doctest verified. First consumer ofLspDocument.inlayHints. Shadow-DOM theming via--silk-snippet-*custom properties with light/dark defaults; hover markdown rendered by a DOM renderer (HoverContent.ts) preserving link-scheme sanitization.apps/docs/app/labs/editor.tsxis now a ~90-line React wrapper over the shared core;Hover.tsxdeleted. Workbench palette mapped onto the element's CSS properties; observable behavior unchanged.silkfences render as<silk-snippet diagnostics hover>;silk,ignoredegrades to a highlight-only element that never compiles; other languages keep<pre><code>. The CLI ships the self-registering bundle (2.98 MB / ~714 KB gzip) with generated output, referenced relatively;silk-snippet:not(:defined)CSS keeps no-JS pages readable.Site.renderstays pure (bundle contents as an option); only the CLI shell resolves@silk-effect/snippet/bundleas an opaque asset. The site package's dependency guard tests were deliberately amended to allowlist exactly that, per their own comments.OpenSpec: change
extract-embeddable-silk-snippet-elementimplemented, synced (snippet-element,documentation-site-silk-snippetscapabilities), and archived.Test plan
packages/snippet: 11 jsdom tests covering the spec scenarios (highlight-only never compiles, per-flag gating, doctest-parity diagnostics, unsafe hover links, read-only default, deferred compile, inlay hint widgets)packages/documentation-site: 27 tests including snippet emission, ignore degradation, bundle shipping, relative references: SystemAllocatorinlay hint, editable recompile-on-edit, light + dark themes