refactor(examples): author controls as JSX components#8819
Merged
Conversation
Replace the argument-injected `controls.mjs` factory (deps passed in as
`{ observer, React, ReactPCUI, jsx, fragment }`) with developer-friendly
`*.controls.jsx` files that import React/PCUI/playcanvas directly and use real
JSX. Controls are now a named `export function Controls({ observer })` component.
Controls are transpiled in the browser via a lazily-loaded `@babel/standalone`
(CommonJS output + a `require` shim in Example.mjs), so editing controls in the
code panel and reloading now updates the UI. The server-side controls transpile
and all legacy `controls.mjs` handling are removed.
Includes build/dev/prod, eslint (jsx), tsconfig (jsx), monaco language and
prettier updates, plus README + template scaffolding for the new format.
#8818 landed concurrently and modified controls that this branch migrated to JSX. Re-apply those changes in the new format so nothing regresses: - graphics/shadow-soft: Penumbra slider 1/100/0 -> 0/0.2/3 - graphics/shadow-cascades: add PCSS Penumbra + PCSS Falloff sliders - gaussian-splatting/shadow-soft: migrate the newly-added controls to JSX and drop the orphan .controls.mjs
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
Migrates the examples' control panels from the argument-injected
*.controls.mjsfactory format to developer-friendly
*.controls.jsxReact components.Before — deps were passed in as arguments and JSX was hand-written via
jsx()/fragment():After — a named component that imports what it needs and uses real JSX:
What changed
*.controls.mjs→*.controls.jsxcomponents (real imports + JSX).@babel/standalone(CommonJS output + a
requireshim inExample.mjs). Because the raw.jsxistranspiled at execution time, editing controls in the code panel and reloading now
updates the UI (previously the edit and the executed artifact diverged).
controls.mjshandlingacross build/dev/prod —
controls.jsxis now the single controls artifact end-to-end..jsx+jsx-uses-vars,max-len100), tsconfig (jsx),Monaco language mapping + JSDoc
@scopehighlighting, prettier override, README andtemplates/controls.jsxscaffold.Integration with #8818
#8818 (World-space PCSS penumbra) landed concurrently and modified controls this branch
migrated. Its changes are re-applied in the new format so nothing regresses:
graphics/shadow-soft: Penumbra slider1/100/0→0/0.2/3graphics/shadow-cascades: added PCSS Penumbra + PCSS Falloff slidersgaussian-splatting/shadow-soft(new example in [BREAKING] World-space PCSS penumbra, plus gsplat & cascade fixes #8818): its controls migrated to JSXVerification
npm run lintandnpm run type:check:examples— pass.controls.jsxtranspile (automatic runtime +commonjs) and load to a
Controlsexport.→ reload → UI updates);
graphics/shadow-cascadesshows the new PCSS sliders.(
blend-trees-2d-cartesian, class →useRef/useEffect): no behavioral regressions.