feat: modernize playground, fix wide-screen scroll, add dev server#49
Draft
cdtinney wants to merge 1 commit into
Draft
feat: modernize playground, fix wide-screen scroll, add dev server#49cdtinney wants to merge 1 commit into
cdtinney wants to merge 1 commit into
Conversation
Playground (Phase 5): - Rewrite from JSX/react-jss/react-json-pretty/prop-types to TypeScript - Add example cards for pauseOnHover and loop props - Inline styles into docs/index.html (no rollup CSS plugin needed) - Switch entry to React 18 createRoot - Import Marquee from src/ instead of pre-built lib output - Add npm install link in header (closes #9) - Add playground/tsconfig.json for type-checking Component (closes #19): - Render N copies of children to fill the container so wide-screen short content still scrolls in 'always' mode - Replace fixed 2-tile math with tileCount-driven measurement - Use ResizeObserver to re-measure on container resize - Replace disableScroll state with tileCount === 1 (preserves #44 fix) Dev workflow: - Add rollup-plugin-serve so npm run dev serves docs/ on port 8001
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
Continues the Phase 5 modernization work from PR #46. Three concerns:
react-jss,react-json-pretty,prop-types), use React 18'screateRoot, and add cards for the newpauseOnHover/loopprops.ResizeObserverand renders enough tiles to guarantee overflow in'always'mode.npm run devnow actually servesdocs/on port 8001 (matching the README) viarollup-plugin-serve.Component changes (
src/index.tsx)tileCountstate.useLayoutEffect+ResizeObserverrecomputestileCounton mount, content change, and container resize.getTileWidth() = scrollWidth / tileCountinstead ofwidth / 2.disableScrollstate removed;tileCount === 1now drives the centered-no-margin render that preserves the A problem with setting scrollWhen #44 fix.Playground changes
playground/src/**/*.{jsx → tsx}LoopMarqueeandPauseOnHoverMarqueeexample cardsHeadernow links to npmjs.com (closes Add npm link to example page #9)Marqueefrom../../../srcinstead of the pre-builtdocs/static/lib, so the playground builds without depending on a prior lib builddocs/index.htmlto avoid needing a rollup CSS pluginplayground/tsconfig.jsonextending root withnoEmitCloses
Test plan
npm installnpm run lintnpm testnpm run buildnpm run docsthen opendocs/index.htmland verify:scrollWhen="overflow"short content stays centered (no regression on A problem with setting scrollWhen #44)alwaysmode (the Text does not scroll on a wide screen #19 fix)npm run devthenhttp://localhost:8001loads with live rebuildsdocs/static/{index.js,lib/index.js}if shipping to GitHub PagesOut of scope (left for follow-up)
.github/workflows/release.yml— pulled in PR feat!: modernize repo — TypeScript, hooks, GitHub Actions #46 "until code stabilizes"