Merge pull request #1635 from inversify/chore/update-react-code-runner-to-use-inversify-8

Update inversify code runner to v8

Author: notaphplover

packages/docs/services/inversify-site/docs/internals/planning.mdx

@@ -100,7 +100,7 @@ Each binding node contains:
 
 ## Visualizing Plan Trees
 
-Use the interactive code editor below to experiment with different binding configurations and see the generated plan trees. The editor allows you to write InversifyJS code and visualizes the resulting plan structure, helping you understand how the container resolves your dependencies.
+Use the interactive code editor below to experiment with different binding configurations. Write your InversifyJS code in the **Editor** tab and press **Run** to execute it, then switch to the **Graph** tab to see the generated dependency plan tree visualized as an interactive diagram.
 
 <DocusaurusInversifyCodeEditor style={{ height: 500 }} />
 

packages/docs/services/inversify-site/docs/introduction/getting-started.mdx

@@ -10,7 +10,7 @@ import gettingStartedSource from '@inversifyjs/code-examples/generated/examples/
 Start by installing `inversify` and `reflect-metadata`:
 
 ```bash
-npm install inversify@beta reflect-metadata
+npm install inversify reflect-metadata
 ```
 
 Next, initialize your first container and add some bindings:

packages/docs/services/inversify-site/i18n/zh/docusaurus-plugin-content-docs/current/internals/planning.mdx

@@ -100,7 +100,7 @@ interface PlanResult {
 
 ## 可视化规划树
 
-使用下面的交互式代码编辑器尝试不同的绑定配置并查看生成的规划树。编辑器允许你编写 InversifyJS 代码并可视化生成的规划结构，帮助你了解容器如何解析你的依赖项。
+使用下面的交互式代码编辑器尝试不同的绑定配置。在 **Editor** 标签页中编写 InversifyJS 代码，点击 **Run** 按钮执行，然后切换到 **Graph** 标签页查看以交互式图表形式呈现的依赖关系规划树。
 
 <DocusaurusInversifyCodeEditor style={{ height: 500 }} />
 

packages/docs/services/inversify-site/i18n/zh/docusaurus-plugin-content-docs/current/introduction/getting-started.mdx

@@ -10,7 +10,7 @@ import gettingStartedSource from '@inversifyjs/code-examples/generated/examples/
 首先安装 `inversify` 和 `reflect-metadata`：
 
 ```bash
-npm install inversify@beta reflect-metadata
+npm install inversify reflect-metadata
 ```
 
 接下来，初始化你的第一个容器并添加一些绑定：

packages/docs/services/inversify-site/i18n/zh/docusaurus-plugin-content-docs/version-7.x/fundamentals/planning.mdx

@@ -2,8 +2,6 @@
 sidebar_position: 7
 title: 规划阶段
 ---
-import BrowserOnly from '@docusaurus/BrowserOnly';
-import DocusaurusInversifyCodeEditor from '@site/src/components/DocusaurusInversifyCodeEditor';
 
 # 规划阶段
 
@@ -98,12 +96,6 @@ interface PlanResult {
 - 特定于类型的元数据（类元数据、参数、属性注入等）
 - 依赖项的子服务节点
 
-## 可视化规划树
-
-使用下面的交互式代码编辑器尝试不同的绑定配置并查看生成的规划树。编辑器允许你编写 InversifyJS 代码并可视化生成的规划结构，帮助你了解容器如何解析你的依赖项。
-
-<DocusaurusInversifyCodeEditor style={{ height: 500 }} />
-
 ## 性能考虑
 
 规划阶段旨在高效：

packages/docs/services/inversify-site/i18n/zh/docusaurus-plugin-content-docs/version-7.x/internals/planning.mdx

@@ -2,8 +2,6 @@
 sidebar_position: 1
 title: 规划阶段
 ---
-import BrowserOnly from '@docusaurus/BrowserOnly';
-import DocusaurusInversifyCodeEditor from '@site/src/components/DocusaurusInversifyCodeEditor';
 
 # 规划阶段
 
@@ -98,12 +96,6 @@ interface PlanResult {
 - 特定于类型的元数据（类元数据、参数、属性注入等）
 - 依赖项的子服务节点
 
-## 可视化规划树
-
-使用下面的交互式代码编辑器尝试不同的绑定配置并查看生成的规划树。编辑器允许你编写 InversifyJS 代码并可视化生成的规划结构，帮助你了解容器如何解析你的依赖项。
-
-<DocusaurusInversifyCodeEditor style={{ height: 500 }} />
-
 ## 性能考虑
 
 规划阶段旨在高效：

packages/docs/services/inversify-site/i18n/zh/docusaurus-plugin-content-docs/version-8.x/internals/planning.mdx

@@ -100,7 +100,7 @@ interface PlanResult {
 
 ## 可视化规划树
 
-使用下面的交互式代码编辑器尝试不同的绑定配置并查看生成的规划树。编辑器允许你编写 InversifyJS 代码并可视化生成的规划结构，帮助你了解容器如何解析你的依赖项。
+使用下面的交互式代码编辑器尝试不同的绑定配置。在 **Editor** 标签页中编写 InversifyJS 代码，点击 **Run** 按钮执行，然后切换到 **Graph** 标签页查看以交互式图表形式呈现的依赖关系规划树。
 
 <DocusaurusInversifyCodeEditor style={{ height: 500 }} />
 

packages/docs/services/inversify-site/i18n/zh/docusaurus-plugin-content-docs/version-8.x/introduction/getting-started.mdx

@@ -10,7 +10,7 @@ import gettingStartedSource from '@inversifyjs/code-examples/generated/examples/
 首先安装 `inversify` 和 `reflect-metadata`：
 
 ```bash
-npm install inversify@beta reflect-metadata
+npm install inversify reflect-metadata
 ```
 
 接下来，初始化你的第一个容器并添加一些绑定：

packages/docs/services/inversify-site/src/components/DocusaurusInversifyCodeEditor/index.tsx

@@ -78,7 +78,11 @@ export default function DocusaurusInversifyCodeEditor({
             </TabItem>
             <TabItem value="graph" label="Graph">
               {graphEntries.length === 0 ? (
-                <p>Run the code to generate a dependency graph.</p>
+                <p>
+                  No graph yet. Go to the <strong>Editor</strong> tab, write
+                  your code, and press <strong>Run</strong> to generate the
+                  dependency graph.
+                </p>
               ) : (
                 <div style={{ marginBottom: '1rem', marginTop: '1rem' }}>
                   <label

packages/docs/services/inversify-site/versioned_docs/version-7.x/internals/planning.mdx

@@ -2,8 +2,6 @@
 sidebar_position: 1
 title: Planning phase
 ---
-import BrowserOnly from '@docusaurus/BrowserOnly';
-import DocusaurusInversifyCodeEditor from '@site/src/components/DocusaurusInversifyCodeEditor';
 
 # Planning Phase
 
@@ -98,12 +96,6 @@ Each binding node contains:
 - Type-specific metadata (class metadata, parameters, property injections, etc.)
 - Child service nodes for dependencies
 
-## Visualizing Plan Trees
-
-Use the interactive code editor below to experiment with different binding configurations and see the generated plan trees. The editor allows you to write InversifyJS code and visualizes the resulting plan structure, helping you understand how the container resolves your dependencies.
-
-<DocusaurusInversifyCodeEditor style={{ height: 500 }} />
-
 ## Performance Considerations
 
 The planning phase is designed to be efficient: