Skip to content

refactor(examples): author controls as JSX components#8819

Merged
kpal81xd merged 2 commits into
mainfrom
examples-controls-jsx
Jun 2, 2026
Merged

refactor(examples): author controls as JSX components#8819
kpal81xd merged 2 commits into
mainfrom
examples-controls-jsx

Conversation

@kpal81xd
Copy link
Copy Markdown
Contributor

@kpal81xd kpal81xd commented Jun 1, 2026

Summary

Migrates the examples' control panels from the argument-injected *.controls.mjs
factory format to developer-friendly *.controls.jsx React components.

Before — deps were passed in as arguments and JSX was hand-written via jsx()/fragment():

export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
    const { LabelGroup, SliderInput, BindingTwoWay } = ReactPCUI;
    return fragment(jsx(LabelGroup, { text: 'Blend' }, jsx(SliderInput, { ... })));
};

After — a named component that imports what it needs and uses real JSX:

import { BindingTwoWay, LabelGroup, SliderInput } from '@playcanvas/pcui/react';

/**
 * @param {{ observer: Observer }} props - The control panel props.
 * @returns {ReactElement} The control panel.
 */
export function Controls({ observer }) {
    return (
        <LabelGroup text='Blend'>
            <SliderInput binding={new BindingTwoWay()} link={{ observer, path: 'blend' }} />
        </LabelGroup>
    );
}

What changed

  • All 89 *.controls.mjs*.controls.jsx components (real imports + JSX).
  • Controls are transpiled in the browser via a lazily-loaded @babel/standalone
    (CommonJS output + a require shim in Example.mjs). Because the raw .jsx is
    transpiled at execution time, editing controls in the code panel and reloading now
    updates the UI
    (previously the edit and the executed artifact diverged).
  • Removed the server-side controls transpile and all legacy controls.mjs handling
    across build/dev/prod — controls.jsx is now the single controls artifact end-to-end.
  • Supporting updates: eslint (.jsx + jsx-uses-vars, max-len 100), tsconfig (jsx),
    Monaco language mapping + JSDoc @scope highlighting, prettier override, README and
    templates/controls.jsx scaffold.

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:

Verification

  • npm run lint and npm run type:check:examples — pass.
  • Browser-pipeline harness: all 90 controls.jsx transpile (automatic runtime +
    commonjs) and load to a Controls export.
  • Runtime (dev server): controls render across examples; live-edit verified (edit a label
    → reload → UI updates); graphics/shadow-cascades shows the new PCSS sliders.
  • Adversarial parity review of the one non-mechanical rewrite
    (blend-trees-2d-cartesian, class → useRef/useEffect): no behavioral regressions.

Note: @babel/standalone (a pre-existing, previously-unused devDep) is now a
lazily-loaded chunk fetched the first time controls build — the necessary trade-off for
in-browser JSX editing.

kpal81xd added 2 commits June 1, 2026 17:10
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
Copy link
Copy Markdown
Contributor

@mvaligursky mvaligursky left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!

@kpal81xd kpal81xd merged commit 75e409b into main Jun 2, 2026
8 checks passed
@kpal81xd kpal81xd deleted the examples-controls-jsx branch June 2, 2026 09:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants