Skip to content

React client - #8

Merged
jlee-kitware merged 2 commits into
masterfrom
react-client
Oct 20, 2026
Merged

jlee-kitware merged 2 commits into
masterfrom
react-client

Conversation

@jlee-kitware

Copy link
Copy Markdown
Collaborator

The editor only worked under the Vue client, so apps running with
client_type="react" had no code editor.

Adds a React bundle alongside the Vue one. setup() serves whichever matches the
server's client type. The widget branches as well, since the editor is v-model
based and the two clients spell that binding differently: React declares value
and onChange through self.props/self.events, Vue keeps modelValue and
input. Same shape as trame-vtklocal. Completion and hover still go through
window.trame.trigger, so the Python side is unchanged. The component is TSX
built against React 19, the version trame-client ships.

For review:

  • The Monaco worker URL now matches .umd.cjs as well as .umd.js, since that
    is what the React bundle builds as. Without it, workers fall back to the old
    unversioned path and 404.
  • react-components stays on Vite 4: vite-plugin-monaco-editor needs esbuild,
    which the rolldown based Vite 8 dropped.
  • CI builds the React bundle after the Vue one, which runs --emptyOutDir on the
    shared serve directory.
  • @shared aliases to vue-components/src so utils/ and themes/ exist once.
    trame-rca keeps parallel copies instead; happy to match that if preferred.

Verified against the example and a real app: editor mounts and binds, edits round
trip, completion and hover populate from Python, workers load from the versioned
directory.

@jlee-kitware
jlee-kitware requested a review from jourdain October 18, 2026 13:33
@jlee-kitware jlee-kitware self-assigned this Oct 18, 2026
Comment thread src/trame_code/widgets/code.py
Comment thread vue-components/src/utils/monacoEnv.js Outdated
Comment thread src/trame_code/module/__init__.py Outdated
@jourdain

Copy link
Copy Markdown
Collaborator

You need to make your commits count so changelog and release properly happen.

The module serves its assets from __trame_code_<version>, but the bundle
asked for an unversioned path, so worker creation failed and monaco fell
back to the main thread. The server now passes the serve directory as a
vue_use plugin option.
Adds react-components/, a TypeScript port of the Monaco editor built
against react 19, sharing utils/ and themes/ with vue-components. The
module loads the bundle matching server.client_type, and the widget
declares the common props once, adding v-model/input for vue and
value/onChange for react. Completion and hover keep the same trigger
contract, so python callers are unchanged. react_use takes no plugin
options, so the react widget passes the serve directory as a prop.

CI builds the react bundle after the vue one, since the vue build empties
the shared serve directory.
@jlee-kitware
jlee-kitware merged commit a84f5d4 into master Oct 20, 2026
6 checks passed
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