npm - @codenotch/codenotch.react - Versions diffs - 1.0.82 → 2.0.1 - Mend

@codenotch/codenotch.react 1.0.82 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/dist/components/CodeEditor.d.ts +1 -1
package/dist/components/CodeEditor.d.ts.map +1 -1
package/dist/components/CodeEditor.js +66 -64
package/dist/index.d.ts +67 -17
package/dist/index.d.ts.map +1 -1
package/dist/index.js +134 -113
package/dist/models/Codenotch.d.ts +28 -131
package/dist/models/Codenotch.d.ts.map +1 -1
package/package.json +45 -44
package/src/components/CodeEditor.tsx +204 -203
package/src/index.ts +399 -385
package/src/models/Codenotch.ts +29 -148
package/README.md +0 -145
package/dist/components/Auml.d.ts +0 -46
package/dist/components/Auml.d.ts.map +0 -1
package/dist/components/Auml.js +0 -208
package/dist/models/AppManifestModels.d.ts +0 -46
package/dist/models/AppManifestModels.d.ts.map +0 -1
package/dist/models/AppManifestModels.js +0 -2
package/dist/models/ProjectManifestModels.d.ts +0 -126
package/dist/models/ProjectManifestModels.d.ts.map +0 -1
package/dist/models/ProjectManifestModels.js +0 -158
package/dist/utils/I18nUtils.d.ts +0 -7
package/dist/utils/I18nUtils.d.ts.map +0 -1
package/dist/utils/I18nUtils.js +0 -37
package/src/core/ProcessUtils.ts +0 -86
package/src/core/SignalR.ts +0 -375

package/dist/components/CodeEditor.d.ts CHANGED Viewed

@@ -24,7 +24,7 @@ export default class CodeEditor extends React.Component<ICodeEditorProps> {
     private isIframeReady;
     private onChangeTimeoutHandle;
     private onMessageHandler;
-    refFrame: React.RefObject<HTMLIFrameElement>;
+    refFrame: React.RefObject<HTMLIFrameElement | null>;
     constructor(props: ICodeEditorProps);
     setValue(value: string): void;
     componentDidMount(): void;

package/dist/components/CodeEditor.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../src/components/CodeEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,IAAI,CAAC;AAEnC,UAAU,gBAAgB;IACtB,qFAAqF;IACrF,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC;IACrE,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,qBAAqB,CAAa;IAC1C,OAAO,CAAC,gBAAgB,CAAM;IAC9B,QAAQ,~~qCAAwC~~;gBAEpC,KAAK,EAAE,gBAAgB;IAKnC,QAAQ,CAAC,KAAK,EAAE,MAAM;IAStB,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAI5B,kBAAkB,CAAC,SAAS,EAAE,gBAAgB,GAAG,IAAI;IAoBrD,OAAO,CAAC,aAAa;IAgCrB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,WAAW;IA4EnB,MAAM;~~CAeT~~"}
1	+ {"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../src/components/CodeEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,IAAI,CAAC;AAEnC,UAAU,gBAAgB;IACtB,qFAAqF;IACrF,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC;IACrE,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,qBAAqB,CAAa;IAC1C,OAAO,CAAC,gBAAgB,CAAM;IAC9B,QAAQ,4CAAwC;gBAEpC,KAAK,EAAE,gBAAgB;IAKnC,QAAQ,CAAC,KAAK,EAAE,MAAM;IAStB,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAI5B,kBAAkB,CAAC,SAAS,EAAE,gBAAgB,GAAG,IAAI;IAoBrD,OAAO,CAAC,aAAa;IAgCrB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,WAAW;IA4EnB,MAAM;CAgBT"}

package/dist/components/CodeEditor.js CHANGED Viewed

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 /**
  * Light Monaco code editor embedded in a sandboxed iframe
@@ -92,68 +93,68 @@ class CodeEditor extends react_1.default.Component {
         if (!iframe)
             return;
         const vsBase = 'https://cdn.jsdelivr.net/npm/monaco-editor@0.55.1/min/vs';
-        const html = `<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <style>
-      html, body, #container { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; }
-    </style>
-    <script>
-      (function(){
-        var vsBase = ${JSON.stringify(vsBase)};
-        // AMD loader
-        var s = document.createElement('script');
-        s.src = vsBase + '/loader.js';
-        s.onload = function(){
-          // Configure and load monaco
-          window.require.config({ paths: { vs: vsBase } });
-          window.require(['vs/editor/editor.main'], function(){
-            var editor;
-            function post(msg){ parent.postMessage(Object.assign({__from:'MonacoIframe'}, msg), '*'); }
-            function ensureEditor(){
-              if (editor) return editor;
-              editor = monaco.editor.create(document.getElementById('container'), {
-                value: '',
-                language: 'plaintext',
-                theme: 'vs',
-                automaticLayout: true,
-                minimap: { enabled: false },
-                scrollBeyondLastLine: true,
-                wordWrap: "on"
-              });
-              editor.onDidChangeModelContent(function(){
-                var v = editor.getValue();
-                post({ type: 'change', value: v });
-              });
-              return editor;
-            }
-            window.addEventListener('message', function(ev){
-              var data = ev.data || {}; if (data.__from !== 'MonacoIframe') return;
-              if (data.type === 'init' || data.type === 'update'){
-                var ed = ensureEditor();
-                if (typeof data.value === 'string' && ed.getValue() !== data.value){ ed.setValue(data.value); }
-                if (typeof data.language === 'string') { monaco.editor.setModelLanguage(ed.getModel(), data.language); }
-                if (typeof data.theme === 'string') { monaco.editor.setTheme(data.theme); }
-                if (typeof data.readOnly === 'boolean') { ed.updateOptions({ readOnly: data.readOnly }); }
-              }
-            });
-            // Signal ready after monaco is loaded
-            post({ type: 'ready' });
-          });
-        };
-        document.head.appendChild(s);
-      })();
-    </script>
-  </head>
-  <body>
-    <div id="container"></div>
-  </body>
+        const html = `<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+      html, body, #container { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; }
+    </style>
+    <script>
+      (function(){
+        var vsBase = ${JSON.stringify(vsBase)};
+        // AMD loader
+        var s = document.createElement('script');
+        s.src = vsBase + '/loader.js';
+        s.onload = function(){
+          // Configure and load monaco
+          window.require.config({ paths: { vs: vsBase } });
+          window.require(['vs/editor/editor.main'], function(){
+            var editor;
+            function post(msg){ parent.postMessage(Object.assign({__from:'MonacoIframe'}, msg), '*'); }
+            function ensureEditor(){
+              if (editor) return editor;
+              editor = monaco.editor.create(document.getElementById('container'), {
+                value: '',
+                language: 'plaintext',
+                theme: 'vs',
+                automaticLayout: true,
+                minimap: { enabled: false },
+                scrollBeyondLastLine: true,
+                wordWrap: "on"
+              });
+              editor.onDidChangeModelContent(function(){
+                var v = editor.getValue();
+                post({ type: 'change', value: v });
+              });
+              return editor;
+            }
+            window.addEventListener('message', function(ev){
+              var data = ev.data || {}; if (data.__from !== 'MonacoIframe') return;
+              if (data.type === 'init' || data.type === 'update'){
+                var ed = ensureEditor();
+                if (typeof data.value === 'string' && ed.getValue() !== data.value){ ed.setValue(data.value); }
+                if (typeof data.language === 'string') { monaco.editor.setModelLanguage(ed.getModel(), data.language); }
+                if (typeof data.theme === 'string') { monaco.editor.setTheme(data.theme); }
+                if (typeof data.readOnly === 'boolean') { ed.updateOptions({ readOnly: data.readOnly }); }
+              }
+            });
+            // Signal ready after monaco is loaded
+            post({ type: 'ready' });
+          });
+        };
+        document.head.appendChild(s);
+      })();
+    </script>
+  </head>
+  <body>
+    <div id="container"></div>
+  </body>
 </html>`;
         const doc = iframe.contentWindow?.document;
         if (!doc)
@@ -163,12 +164,13 @@ class CodeEditor extends react_1.default.Component {
         doc.close();
     }
     render() {
-        let style = this.props.style || {};
+        // Never mutate props: copy the style object before applying defaults.
+        const style = { ...this.props.style };
         style.width = style.width || '100%';
         style.height = style.height || '100%';
         style.border = style.border || '0';
         style.outline = style.outline || '0';
-        return react_1.default.createElement("iframe", { style: style, title: "Codenotch", ref: this.refFrame, className: this.props.className, sandbox: "allow-scripts allow-same-origin" });
+        return (0, jsx_runtime_1.jsx)("iframe", { style: style, title: "Codenotch", ref: this.refFrame, className: this.props.className, sandbox: "allow-scripts allow-same-origin" });
     }
 }
 exports.default = CodeEditor;

package/dist/index.d.ts CHANGED Viewed

@@ -1,4 +1,6 @@
-import { ICodenotchApi, ICodenotchEnv } from "./models/Codenotch";
+import { type ComponentType, type ComponentProps, type FunctionComponent, type RefAttributes } from "react";
+import { IDisposable } from "./models/Misc";
+import { ICodenotchApi, ICodenotchEnv, WithCodenotchProps } from "./models/Codenotch";
 import CodeEditor from "./components/CodeEditor";
 /**
  * The Codenotch runtime environment, populated by {@link init}.
@@ -13,7 +15,6 @@ declare const env: ICodenotchEnv;
  * any other source). It must be called before `useCodenotch()` is used.
  *
  * Recognized key formats:
- * - `i18n.<key>.<language>` — a translation, stored in `env.i18n[language][key]`.
  *   The first language found becomes the current language if none is set.
  * - `GLOBAL.<name>` — JSON value assigned to `window[name]` (or `globalThis`).
  * - `appManifest` / `projectManifest` — parsed as JSON into the environment.
@@ -28,31 +29,80 @@ declare const env: ICodenotchEnv;
  * init({
  *     clusterUrl: 'https://cluster.example.com',
  *     serviceName: 'myproject',
- *     tenantName: 'acme',
- *     'i18n.welcome.en': 'Welcome',
- *     'i18n.welcome.fr': 'Bienvenue'
+ *     tenantName: 'acme'
  * });
  */
 declare function init(envVariables: any): void;
 /**
- * Return the Codenotch client API bound to the current environment.
+ * Return the Codenotch client API bound to the current environment, from
+ * anywhere: event handlers, plain modules, class components, services…
  *
- * Despite its name this is NOT a React hook — it is a plain function with no
- * hook rules attached: it can be called anywhere (components, handlers, plain
- * modules). `init()` must have been called first, which the Codenotch runtime
- * does automatically when serving the application.
+ * This is a plain function (not a hook). The returned object is never stale —
+ * its methods always read the live environment — but it does not trigger any
+ * re-render when the language or theme changes: inside React components prefer
+ * {@link useCodenotch} (function components) or {@link withCodenotch}
+ * (class components), which do.
+ *
+ * `init()` must have been called first, which the Codenotch runtime does
+ * automatically when serving the application.
  *
- * @returns The Codenotch API: BPMN processes, CNQL queries, i18n, signals, theme…
  * @example
- * import { useCodenotch } from 'codenotch-react';
+ * import { getCodenotch } from 'codenotch-react';
  *
- * const MyApp: React.FC = () => {
- *     const cn = useCodenotch();
- *     return <h1>{cn.i18n('welcome')}</h1>;
- * };
+ * export async function loadTodos(userId: string) {
+ *     const result = await getCodenotch().startProcess('getTodos', 'start', { UserId: userId });
+ *     return result.output.todos;
+ * }
+ */
+declare function getCodenotch(): ICodenotchApi;
+/**
+ * React hook returning the Codenotch client API.
+ *
+ * The reference is stable across renders and only changes when the environment
+ * changes (`setLanguage`, `setTheme`, `init`), in which case every component
+ * using the hook re-renders output follows the current
+ * language automatically, and the object is safe to use in `useMemo` /
+ * `useEffect` dependency arrays.
+ *
+ * Regular hook rules apply (call it unconditionally at the top of a function
+ * component or a custom hook). Outside of components — handlers defined in
+ * plain modules, services, class components — use {@link getCodenotch} or
+ * {@link withCodenotch} instead.
  */
 declare function useCodenotch(): ICodenotchApi;
-export { env, useCodenotch, init, CodeEditor };
+/**
+ * Register a listener called each time the Codenotch environment changes
+ * (`setLanguage`, `setTheme`, `init`). Escape hatch for code that cannot use
+ * {@link useCodenotch} or {@link withCodenotch}, e.g. a class component that
+ * wants to `forceUpdate()` itself, or a non-React module caching translations.
+ *
+ * @returns A disposable — call `dispose()` to stop listening.
+ * @example
+ * componentDidMount() {
+ *     this.sub = onCodenotchChange(() => this.forceUpdate());
+ * }
+ * componentWillUnmount() {
+ *     this.sub.dispose();
+ * }
+ */
+declare function onCodenotchChange(listener: () => void): IDisposable;
+/** Props of a component wrapped by {@link withCodenotch}, without the injected `cn`. */
+type WithoutCodenotchProps<P> = Omit<P, keyof WithCodenotchProps>;
+/** Instance type of a component (class components only), used to type the forwarded `ref`. */
+type ComponentInstance<C> = C extends new (...args: any[]) => infer I ? I : never;
+/**
+ * Higher-order component injecting the Codenotch API as a `cn` prop.
+ *
+ * Meant for class components, which cannot call {@link useCodenotch}: the
+ * wrapped component receives `this.props.cn` and re-renders whenever the
+ * environment changes (language, theme…), exactly like the hook. A `ref`
+ * passed to the wrapper is forwarded to the wrapped component instance.
+ *
+ * @param Component A component whose props extend {@link WithCodenotchProps}.
+ * @returns A component with the same props minus `cn`.
+ */
+declare function withCodenotch<C extends ComponentType<any>>(Component: C): FunctionComponent<WithoutCodenotchProps<ComponentProps<C>> & RefAttributes<ComponentInstance<C>>>;
+export { env, useCodenotch, getCodenotch, withCodenotch, onCodenotchChange, init, CodeEditor };
 export * from "./models/Codenotch";
 export * from "./models/Misc";
 export * from "@codenotch/codenotch.core";

package/dist/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"~~AAIA~~,OAAO,EAAE,aAAa,EAAoB,aAAa,EAAkB,MAAM,oBAAoB,CAAC;~~AAEpG~~,OAAO,UAAU,MAAM,yBAAyB,CAAC;~~AAIjD~~;;;GAGG;AACH,QAAA,MAAM,GAAG,EAAE,aAAkB,CAAC;~~AAM9B;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG~~;AACH,iBAAS,IAAI,CAAC,YAAY,EAAE,GAAG,GAAG,IAAI,~~CAyFrC~~;AAED~~;;;;;;;;;;;;;;;;GAgBG~~;AACH,iBAAS,YAAY,IAAI,aAAa,~~CAsNrC~~;AAED,OAAO,EACH,GAAG,EACH,YAAY,EACZ,IAAI,EACJ,UAAU,EACb,CAAC;~~AAMF~~,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuC,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAkB,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAGjK,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAoB,aAAa,EAAkB,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAExH,OAAO,UAAU,MAAM,yBAAyB,CAAC;AAEjD;;;GAGG;AACH,QAAA,MAAM,GAAG,EAAE,aAAkB,CAAC;AA6B9B;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,iBAAS,IAAI,CAAC,YAAY,EAAE,GAAG,GAAG,IAAI,CA0DrC;AA2KD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,iBAAS,YAAY,IAAI,aAAa,CAErC;AAED;;;;;;;;;;;;;GAaG;AACH,iBAAS,YAAY,IAAI,aAAa,CAErC;AAED;;;;;;;;;;;;;;GAcG;AACH,iBAAS,iBAAiB,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,WAAW,CAG5D;AAED,wFAAwF;AACxF,KAAK,qBAAqB,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,kBAAkB,CAAC,CAAC;AAElE,8FAA8F;AAC9F,KAAK,iBAAiB,CAAC,CAAC,IAAI,CAAC,SAAS,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAElF;;;;;;;;;;GAUG;AACH,iBAAS,aAAa,CAAC,CAAC,SAAS,aAAa,CAAC,GAAG,CAAC,EAC/C,SAAS,EAAE,CAAC,GACb,iBAAiB,CAAC,qBAAqB,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAQnG;AAED,OAAO,EACH,GAAG,EACH,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,IAAI,EACJ,UAAU,EACb,CAAC;AAEF,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC"}

package/dist/index.js CHANGED Viewed

@@ -19,14 +19,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeEditor = exports.env = void 0;
 exports.useCodenotch = useCodenotch;
+exports.getCodenotch = getCodenotch;
+exports.withCodenotch = withCodenotch;
+exports.onCodenotchChange = onCodenotchChange;
 exports.init = init;
-const react_dom_1 = __importDefault(require("react-dom"));
-const SignalR_1 = require("./core/SignalR");
-const ProcessUtils_1 = __importDefault(require("./core/ProcessUtils"));
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const client_1 = require("react-dom/client");
 const uuid_1 = require("uuid");
 const CodeEditor_1 = __importDefault(require("./components/CodeEditor"));
 exports.CodeEditor = CodeEditor_1.default;
-var signalR = undefined;
 /**
  * The Codenotch runtime environment, populated by {@link init}.
  * Prefer reading it through `useCodenotch().env`.
@@ -36,6 +38,30 @@ exports.env = env;
 const MISSING_CLUSTER_URL_ERROR = "Codenotch cluster URL is not defined. Please set it in the Codenotch configuration.";
 const MISSING_SERVICE_NAME_ERROR = "Codenotch service name is not defined. Please set it in the Codenotch configuration.";
 const MISSING_TENANT_NAME_ERROR = "Codenotch tenant name is not defined. Please set it in the Codenotch configuration.";
+// ---------------------------------------------------------------------------
+// Change tracking. `env` is a plain mutable object; every mutation done through
+// the public API (init, setTheme, setLanguage) goes through notify(), which
+// rotates the API object (so React sees a new reference) and wakes up the
+// subscribers: useCodenotch() via useSyncExternalStore, withCodenotch(),
+// and any listener registered with onCodenotchChange().
+// ---------------------------------------------------------------------------
+const listeners = new Set();
+let currentApi;
+function notify() {
+    currentApi = createApi();
+    listeners.forEach((listener) => {
+        try {
+            listener();
+        }
+        catch (error) {
+            console.error("Error in Codenotch change listener:", error);
+        }
+    });
+}
+function subscribe(listener) {
+    listeners.add(listener);
+    return () => { listeners.delete(listener); };
+}
 /**
  * Initialize the Codenotch environment from the given key-value pairs.
  *
@@ -44,7 +70,6 @@ const MISSING_TENANT_NAME_ERROR = "Codenotch tenant name is not defined. Please
  * any other source). It must be called before `useCodenotch()` is used.
  *
  * Recognized key formats:
- * - `i18n.<key>.<language>` — a translation, stored in `env.i18n[language][key]`.
  *   The first language found becomes the current language if none is set.
  * - `GLOBAL.<name>` — JSON value assigned to `window[name]` (or `globalThis`).
  * - `appManifest` / `projectManifest` — parsed as JSON into the environment.
@@ -59,15 +84,12 @@ const MISSING_TENANT_NAME_ERROR = "Codenotch tenant name is not defined. Please
  * init({
  *     clusterUrl: 'https://cluster.example.com',
  *     serviceName: 'myproject',
- *     tenantName: 'acme',
- *     'i18n.welcome.en': 'Welcome',
- *     'i18n.welcome.fr': 'Bienvenue'
+ *     tenantName: 'acme'
  * });
  */
 function init(envVariables) {
     // Ensure envVariables is an object
     if (typeof envVariables === 'object' && envVariables !== null) {
-        let i18nLanguages = new Set();
         Object.keys(envVariables).forEach((key) => {
             try {
                 if (key.startsWith('GLOBAL.')) {
@@ -78,21 +100,6 @@ function init(envVariables) {
                     console.log(`Codenotch global variable ${globalKey} set!`);
                     return;
                 }
-                else if (key.startsWith("i18n.")) {
-                    // Special case
-                    let parts = key.split("."); // i18n.someKey.fr
-                    let language = parts[parts.length - 1]; // fr
-                    let keyName = parts.slice(1, parts.length - 1).join("."); // someKey
-                    i18nLanguages.add(language);
-                    let value = `${envVariables[key]}`.trim();
-                    if (value.startsWith('"') && value.endsWith('"')) {
-                        // Parse like json
-                        value = JSON.parse(value);
-                    }
-                    env.i18n = env.i18n ?? {};
-                    env.i18n[language] = env.i18n[language] ?? {};
-                    env.i18n[language][keyName] = value;
-                }
                 else {
                     env[key] = envVariables[key];
                     if (['appManifest', 'projectManifest'].includes(key)) {
@@ -111,17 +118,6 @@ function init(envVariables) {
                 console.error(`Error processing Codenotch environment variable ${key}:`, error);
             }
         });
-        if (env.language === undefined) {
-            // If current language is not defined, we set it to the first language found in i18n
-            if (i18nLanguages.size > 0) {
-                env.language = Array.from(i18nLanguages)[0];
-                console.log(`Codenotch current language set to ${env.language}`);
-            }
-        }
-    }
-    // Instantiate SignalR for further use in the API
-    if (env.clusterUrl && env.serviceName) {
-        signalR = new SignalR_1.SignalR(env.clusterUrl, env.serviceName, false, env.accessToken);
     }
     // Get theme like AEC does
     try {
@@ -141,26 +137,15 @@ function init(envVariables) {
     }
     catch {
     }
+    notify();
 }
 /**
- * Return the Codenotch client API bound to the current environment.
- *
- * Despite its name this is NOT a React hook — it is a plain function with no
- * hook rules attached: it can be called anywhere (components, handlers, plain
- * modules). `init()` must have been called first, which the Codenotch runtime
- * does automatically when serving the application.
- *
- * @returns The Codenotch API: BPMN processes, CNQL queries, i18n, signals, theme…
- * @example
- * import { useCodenotch } from 'codenotch-react';
- *
- * const MyApp: React.FC = () => {
- *     const cn = useCodenotch();
- *     return <h1>{cn.i18n('welcome')}</h1>;
- * };
+ * Build the API object bound to {@link env}. Every method reads `env` lazily,
+ * so an instance never goes stale; a new one is created by {@link notify} only
+ * to give React a fresh reference when the environment changes.
  */
-function useCodenotch() {
-    return {
+function createApi() {
+    const api = {
         env: env,
         uuid: () => (0, uuid_1.v4)(),
         getProjectFileUrl: (relativePath) => {
@@ -175,7 +160,7 @@ function useCodenotch() {
             return url;
         },
         getProjectFile: async (relativePath) => {
-            let url = useCodenotch().getProjectFileUrl(relativePath);
+            let url = api.getProjectFileUrl(relativePath);
             let resp = await fetch(url);
             if (resp.status.toString().startsWith('2') === false) {
                 throw new Error(`Failed to fetch file content: ${resp.status} ${resp.statusText}`);
@@ -209,48 +194,8 @@ function useCodenotch() {
             }
             return await response.json();
         },
-        i18n: (key, ...args) => {
-            try {
-                if (env.i18n === undefined || Object.keys(env.i18n).length === 0) {
-                    console.warn("Codenotch i18n is not defined. Please set it in the Codenotch configuration.");
-                    return key;
-                }
-                let language = env.language ?? "en";
-                let isLanguageExists = env.i18n[language] !== undefined;
-                if (isLanguageExists === false) {
-                    let fallbackLanguage = Object.keys(env.i18n)[0];
-                    console.warn(`Codenotch i18n language ${language} is not defined. Falling back to ${fallbackLanguage}. Please set the correct language in the Codenotch configuration.`);
-                    language = fallbackLanguage;
-                }
-                let dico = env.i18n[language];
-                let value = dico[key];
-                if (typeof value !== "string") {
-                    console.warn(`Codenotch i18n key ${key} is not defined for language ${language}. Please set it in the Codenotch configuration.`);
-                    return key;
-                }
-                args = args ?? [];
-                let result = value.replace(/{([\d ]*)}/g, (match, p1) => {
-                    let argValue = args[p1.trim()];
-                    // Instead of returning 'undefined', returns an empty string
-                    return argValue !== undefined ? argValue : "";
-                });
-                return result;
-            }
-            catch (error) {
-                console.error("Error in i18n function:", error);
-                return key;
-            }
-        },
-        startProcess: async (processName, startNodeId, inputs) => {
-            if (env.clusterUrl === undefined)
-                throw new Error(MISSING_CLUSTER_URL_ERROR);
-            if (env.serviceName === undefined)
-                throw new Error(MISSING_SERVICE_NAME_ERROR);
-            if (env.tenantName === undefined)
-                throw new Error(MISSING_TENANT_NAME_ERROR);
-            if (signalR === undefined)
-                throw new Error("SignalR not available. Cannot start process.");
-            return ProcessUtils_1.default.startProcess((processInstanceId, callbacks) => signalR.subscribeToProcessInstance(processInstanceId, callbacks), env.clusterUrl, env.tenantName, env.serviceName, processName, inputs, undefined, startNodeId ?? 'start', env.accessToken);
+        startProcess: async (process, inputs) => {
+            throw new Error('Not implemented.');
         },
         getUrlParams: () => {
             let result = {};
@@ -266,9 +211,14 @@ function useCodenotch() {
         },
         showDialog: (node) => {
             let dialogId = "codenotch-dialog-" + Math.random().toString(36).substring(2, 9);
+            let root = undefined;
             let result = {
                 id: dialogId,
                 close: () => {
+                    // Unmount the React tree first so effects are cleaned up and nothing leaks,
+                    // then drop the <dialog> element itself.
+                    root?.unmount();
+                    root = undefined;
                     let dialogElement = document.getElementById(dialogId);
                     if (dialogElement) {
                         dialogElement.remove();
@@ -311,22 +261,13 @@ function useCodenotch() {
             dialogElement.style.background = '#78787822';
             dialogElement.style.backdropFilter = 'blur(2px)';
             container.appendChild(dialogElement);
-            react_dom_1.default.render(node, dialogElement, () => {
-                dialogElement.showModal();
-            });
+            // React 19: ReactDOM.render() is gone. Render synchronously through a dedicated root
+            // so the content is in the DOM before showModal() moves the focus into the dialog.
+            root = (0, client_1.createRoot)(dialogElement);
+            (0, react_dom_1.flushSync)(() => root.render(node));
+            dialogElement.showModal();
             return result;
         },
-        listenSignal: async (signalId, callback) => {
-            if (!signalR) {
-                throw new Error("SignalR not available. Cannot listen to signal.");
-            }
-            let unsubscribeFunc = await signalR.subscribeToSignal(signalId, callback);
-            return {
-                dispose: () => {
-                    unsubscribeFunc();
-                }
-            };
-        },
         setTheme: (theme) => {
             if (env.theme === theme)
                 return;
@@ -334,11 +275,13 @@ function useCodenotch() {
                 document.documentElement.classList.remove(env.theme);
             env.theme = theme;
             document.documentElement.classList.add(theme);
+            notify();
         },
         setLanguage: (lang) => {
             if (env.language === lang)
                 return;
             env.language = lang;
+            notify();
         },
         getLanguages: () => {
             return env.projectManifest?.languages ?? [];
@@ -359,11 +302,89 @@ function useCodenotch() {
             return env.appManifest;
         }
     };
+    return api;
+}
+currentApi = createApi();
+/**
+ * Return the Codenotch client API bound to the current environment, from
+ * anywhere: event handlers, plain modules, class components, services…
+ *
+ * This is a plain function (not a hook). The returned object is never stale —
+ * its methods always read the live environment — but it does not trigger any
+ * re-render when the language or theme changes: inside React components prefer
+ * {@link useCodenotch} (function components) or {@link withCodenotch}
+ * (class components), which do.
+ *
+ * `init()` must have been called first, which the Codenotch runtime does
+ * automatically when serving the application.
+ *
+ * @example
+ * import { getCodenotch } from 'codenotch-react';
+ *
+ * export async function loadTodos(userId: string) {
+ *     const result = await getCodenotch().startProcess('getTodos', 'start', { UserId: userId });
+ *     return result.output.todos;
+ * }
+ */
+function getCodenotch() {
+    return currentApi;
+}
+/**
+ * React hook returning the Codenotch client API.
+ *
+ * The reference is stable across renders and only changes when the environment
+ * changes (`setLanguage`, `setTheme`, `init`), in which case every component
+ * using the hook re-renders output follows the current
+ * language automatically, and the object is safe to use in `useMemo` /
+ * `useEffect` dependency arrays.
+ *
+ * Regular hook rules apply (call it unconditionally at the top of a function
+ * component or a custom hook). Outside of components — handlers defined in
+ * plain modules, services, class components — use {@link getCodenotch} or
+ * {@link withCodenotch} instead.
+ */
+function useCodenotch() {
+    return (0, react_1.useSyncExternalStore)(subscribe, getCodenotch, getCodenotch);
+}
+/**
+ * Register a listener called each time the Codenotch environment changes
+ * (`setLanguage`, `setTheme`, `init`). Escape hatch for code that cannot use
+ * {@link useCodenotch} or {@link withCodenotch}, e.g. a class component that
+ * wants to `forceUpdate()` itself, or a non-React module caching translations.
+ *
+ * @returns A disposable — call `dispose()` to stop listening.
+ * @example
+ * componentDidMount() {
+ *     this.sub = onCodenotchChange(() => this.forceUpdate());
+ * }
+ * componentWillUnmount() {
+ *     this.sub.dispose();
+ * }
+ */
+function onCodenotchChange(listener) {
+    const unsubscribe = subscribe(listener);
+    return { dispose: unsubscribe };
+}
+/**
+ * Higher-order component injecting the Codenotch API as a `cn` prop.
+ *
+ * Meant for class components, which cannot call {@link useCodenotch}: the
+ * wrapped component receives `this.props.cn` and re-renders whenever the
+ * environment changes (language, theme…), exactly like the hook. A `ref`
+ * passed to the wrapper is forwarded to the wrapped component instance.
+ *
+ * @param Component A component whose props extend {@link WithCodenotchProps}.
+ * @returns A component with the same props minus `cn`.
+ */
+function withCodenotch(Component) {
+    const Wrapped = (props) => {
+        const cn = useCodenotch();
+        // React 19: `ref` is a regular prop, so spreading `props` forwards it.
+        return (0, react_1.createElement)(Component, { ...props, cn });
+    };
+    Wrapped.displayName = `withCodenotch(${Component.displayName || Component.name || "Component"})`;
+    return Wrapped;
 }
-// Public models. Re-exported from the package root so that the typings
-// generated by the Codenotch IDE (typings/i18n.d.ts and typings/process.d.ts,
-// which augment the 'codenotch-react' module) merge with the real
-// TranslationRegistry / ProcessRegistry declarations.
 __exportStar(require("./models/Codenotch"), exports);
 __exportStar(require("./models/Misc"), exports);
 __exportStar(require("@codenotch/codenotch.core"), exports);