From 8841b7447d40b34d86f5b9a4e53a89aff6d96a52 Mon Sep 17 00:00:00 2001 From: baeoc Date: Sun, 5 Oct 2025 05:58:23 +0530 Subject: [PATCH 1/4] fix: restore react-dom render compatibility --- docusaurus.config.ts | 1 + src/client-modules/react-dom-compat.ts | 40 ++++++++++++++++++++++++++ 2 files changed, 41 insertions(+) create mode 100644 src/client-modules/react-dom-compat.ts diff --git a/docusaurus.config.ts b/docusaurus.config.ts index f3031b8..98424d8 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -13,6 +13,7 @@ const config: Config = { mermaid: true, }, themes: ["@docusaurus/theme-mermaid"], + clientModules: ["./src/client-modules/react-dom-compat"], // Set the production url of your site here url: "https://docs.tscircuit.com", // Set the // pathname under which your site is served diff --git a/src/client-modules/react-dom-compat.ts b/src/client-modules/react-dom-compat.ts new file mode 100644 index 0000000..092b1bc --- /dev/null +++ b/src/client-modules/react-dom-compat.ts @@ -0,0 +1,40 @@ +import type { ReactNode } from "react" +import type { Root } from "react-dom/client" +import { createRoot } from "react-dom/client" +import * as ReactDOM from "react-dom" + +declare global { + interface HTMLElement { + __reactCompatRoot?: Root + } +} + +const dom = ReactDOM as typeof ReactDOM & { + render?: (element: ReactNode, container: HTMLElement) => Root + unmountComponentAtNode?: (container: HTMLElement) => boolean +} + +if (typeof window !== "undefined") { + if (typeof dom.render !== "function") { + dom.render = (element, container) => { + let root = container.__reactCompatRoot + if (!root) { + root = createRoot(container) + container.__reactCompatRoot = root + } + root.render(element) + return root + } + } + + if (typeof dom.unmountComponentAtNode !== "function") { + dom.unmountComponentAtNode = (container) => { + const root = container.__reactCompatRoot + if (root) { + root.unmount() + delete container.__reactCompatRoot + } + return true + } + } +} From e34f077e9815e66d442ac3d98835dd480680197f Mon Sep 17 00:00:00 2001 From: baeoc Date: Mon, 6 Oct 2025 18:46:22 +0530 Subject: [PATCH 2/4] Update --- docs/intro/what-is-tscircuit.mdx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/docs/intro/what-is-tscircuit.mdx b/docs/intro/what-is-tscircuit.mdx index 1634a5b..a0e7911 100644 --- a/docs/intro/what-is-tscircuit.mdx +++ b/docs/intro/what-is-tscircuit.mdx @@ -75,13 +75,6 @@ tscircuit isn't limited to simple circuits like this. You can keep adding elements, creating modules and combining them to create more and more complex circuits. Here's an example of a [simple 3x3 macrokeypad based on the PICO2!](https://tscircuit.com/seveibar/nine-key-keyboard) - - -`} /> - We ordered this one too! import macrokeypad from "@site/static/img/macrokeypad.png" From ea3a796cc3f9e7f049cb6961804b7e0e574695b4 Mon Sep 17 00:00:00 2001 From: baeoc Date: Mon, 6 Oct 2025 18:47:43 +0530 Subject: [PATCH 3/4] Up --- docusaurus.config.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 98424d8..f3031b8 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -13,7 +13,6 @@ const config: Config = { mermaid: true, }, themes: ["@docusaurus/theme-mermaid"], - clientModules: ["./src/client-modules/react-dom-compat"], // Set the production url of your site here url: "https://docs.tscircuit.com", // Set the // pathname under which your site is served From 580a0a0bc800bc0b76a796551bc6da72892c020d Mon Sep 17 00:00:00 2001 From: baeoc Date: Mon, 6 Oct 2025 18:48:10 +0530 Subject: [PATCH 4/4] Delete --- src/client-modules/react-dom-compat.ts | 40 -------------------------- 1 file changed, 40 deletions(-) delete mode 100644 src/client-modules/react-dom-compat.ts diff --git a/src/client-modules/react-dom-compat.ts b/src/client-modules/react-dom-compat.ts deleted file mode 100644 index 092b1bc..0000000 --- a/src/client-modules/react-dom-compat.ts +++ /dev/null @@ -1,40 +0,0 @@ -import type { ReactNode } from "react" -import type { Root } from "react-dom/client" -import { createRoot } from "react-dom/client" -import * as ReactDOM from "react-dom" - -declare global { - interface HTMLElement { - __reactCompatRoot?: Root - } -} - -const dom = ReactDOM as typeof ReactDOM & { - render?: (element: ReactNode, container: HTMLElement) => Root - unmountComponentAtNode?: (container: HTMLElement) => boolean -} - -if (typeof window !== "undefined") { - if (typeof dom.render !== "function") { - dom.render = (element, container) => { - let root = container.__reactCompatRoot - if (!root) { - root = createRoot(container) - container.__reactCompatRoot = root - } - root.render(element) - return root - } - } - - if (typeof dom.unmountComponentAtNode !== "function") { - dom.unmountComponentAtNode = (container) => { - const root = container.__reactCompatRoot - if (root) { - root.unmount() - delete container.__reactCompatRoot - } - return true - } - } -}