Writing UI in plain JavaScript

Writing UI in plain JavaScript

Runtime plugins are loaded as plain JavaScript modules. They can still render React UI through helpers exposed on the plugin context:

const h = ctx.h;                       // React.createElement
const { useSliceValue, useT } = ctx.hooks;
const { fromSlice, valueFrom } = ctx.states;

function MyPanel() {
  const state = useSliceValue(slice);  // subscribe to the plugin slice
  const t = useT();                    // re-renders on locale change
  return h("div", null, t("my.greeting", { name: state.name }));
}

ctx.contribute({ id: "panel", surface: "leftSidebar", component: MyPanel });

Available helpers:

• ctx.react — the full React namespace (createElement, Fragment, hooks…).
• ctx.h — shortcut for React.createElement.
• ctx.hooks.useSliceValue(handle) — subscribe a component to a slice.
• ctx.hooks.useT() — translate function that re-renders on locale changes.
• ctx.states.fromSlice / ctx.states.fromObservable / ctx.states.combineStates / ctx.states.valueFrom — build reactive command/toolbar state sources.
• ctx.icons — reserved for shared icon components (currently empty; plugins usually ship their own inline SVGs or bundle an icon library).