feat(demo-manifest): add stripComments + stripWrappers options#8
Merged
Conversation
Two new opt-in options on `demoManifestPlugin` for keeping consumer
positioning chrome out of the published code panel without forcing
the demo file itself to forgo it:
- `stripComments?: string[]` — substring markers whose enclosing
comment (`/* … */` block or `<!-- … -->` template) is removed
before highlighting. Lets consumers leave maintainer notes inside
demo files explaining *why* the file carries some positioning
chrome, without leaking that prose into the snippet readers see.
- `stripWrappers?: string[]` — class tokens whose wrapping element
is unwrapped: opening + closing tags vanish, children stay in
place as siblings. Also strips the matching CSS rule from the
demo's `<style>` block so the published source doesn't carry an
orphan selector pointing at nothing.
Both default to `[]` (feature off). Consumers opt in per-project,
e.g. svelte-motion would pass:
```ts
demoManifestPlugin({
stripComments: ['HUMANSPEAK'],
stripWrappers: ['humanspeak-demo-shell']
})
```
Implementation:
- `stripMarkedComments()` — regex over both comment forms
- `unwrapMarkedElements()` — depth-balanced tag matching by tag
name handles nested same-tag children. Multi-line attribute
layouts tolerated via `[^<>]*?` against the attrs body. Self-
closing matches log a warning instead of failing (the marker
class is almost certainly authored on a wrapping element).
- `stripOrphanCSSRules()` — strips rule blocks targeting only the
marker class. Compound selectors (`.marker, .other`) survive
intact; @-rules aren't recursed into. Documented limitations.
Pipeline order (matters):
comments → wrappers → orphan CSS → existing docs-kit chrome
strip → prettier format.
Verified by hand against a fixture with nested same-name divs and
both comment forms; all six acceptance checks green. No test infra
in this repo yet — the existing `stripDocsKitChrome` heuristic ships
without tests too, and these helpers follow the same shape.
jaysin586
added
enhancement
|
Caution Review failedPull request was closed or merged during review 📝 WalkthroughWalkthroughThe PR extends the Vite demo-manifest plugin with configurable source-cleanup options. Two new interface fields enable consumers to specify comment markers and wrapper class tokens. Three transformation helpers strip marked comments, unwrap wrapper elements, and remove orphaned CSS. The build pipeline chains these transformations before applying existing docs-kit chrome stripping. ChangesDemo Manifest Source Cleanup Configuration
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
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.
Summary
Two new opt-in options on
demoManifestPluginfor keeping consumer positioning chrome out of the published code panel — without forcing the demo file itself to forgo it.The use case driving this: svelte-motion's example demos are intrinsically-sized cards (200×120) that need a flex-centering wrapper inside docs-kit's
.dk-ex-bodyso they don't land top-left and let the footer strip float mid-panel. Today that wrapper either has to live on the page side (away from the demo it serves) or pollute the published code with off-topic positioning chrome. With these options it can live in the demo file, marked, and the manifest strips it on emission.Changes
✨ New options
stripComments?: string[]— substring markers whose enclosing comment is removed before highlighting. Catches both/* MARKER */(block) and<!-- MARKER -->(template). PlainString.includesmatch, no regex.stripWrappers?: string[]— class tokens whose wrapping element is unwrapped: opening + closing tags vanish, children stay in place as siblings. Also strips the matching CSS rule from the demo's<style>block so the published source doesn't carry orphan selectors. Self-closing matches log a warning (no children to preserve) instead of silently dropping.Both default to
[](feature off). Consumers opt in per project, e.g.:🔧 Implementation
stripMarkedComments()— regex over both comment forms with non-greedy bodies so adjacent comments don't fuseunwrapMarkedElements()— depth-balanced tag matching by tag name (nested same-tag children don't fool the close-tag search). Multi-line attribute layouts tolerated via[^<>]*?against the attrs bodystripOrphanCSSRules()— strips rule blocks targeting only the marker class. Compound selectors (.marker, .other) survive intact; @-rules aren't recursed into. Documented limitations in codePipeline order matters and is now: comments → wrappers → orphan CSS → existing docs-kit chrome strip → prettier format.
Verification
Smoke-tested by hand against a fixture with nested same-name
<div>s, both comment forms, and a mix of orphan + real CSS rules:<motion.div>preserved.humanspeak-demo-shellCSS rule removed.real-rulepreservedpnpm svelte-checkcleanpnpm buildclean; new options surface indist/vite/demo-manifest.d.tsNo tests added — this repo doesn't have vitest set up yet, and the existing
stripDocsKitChromeheuristic ships untested too. These new helpers follow the same shape and are structured for easy test coverage once we add the infra.Commits
a36be95feat(demo-manifest): add stripComments + stripWrappers options