feat(runtime): vue2/react使用tamgic-cli生成组件依赖入口

2026-03-22 18:48:34 +08:00 · 2022-08-04 15:35:05 +08:00
parent a57fef4947
commit e8b8d35cbd
52 changed files with 702 additions and 1116 deletions
--- a/runtime/react/page/App.tsx
+++ b/runtime/react/page/App.tsx
@@ -0,0 +1,37 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useContext } from 'react';
+
+import Core from '@tmagic/core';
+import type { Page } from '@tmagic/schema';
+import { AppContent } from '@tmagic/ui-react';
+
+function App() {
+  const app = useContext<Core | undefined>(AppContent);
+
+  if (!app?.page?.data) {
+    return null;
+  }
+
+  const MagicUiPage = app.resolveComponent('page');
+
+  return <MagicUiPage config={app?.page?.data as Page}></MagicUiPage>;
+}
+
+export default App;
--- a/runtime/react/page/index.html
+++ b/runtime/react/page/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Page</title>
+    <style>
+      html,
+      body,
+      #app {
+        width: 100%;
+        height: 100%;
+      }
+
+      #app {
+        position: relative;
+        overflow: auto;
+      }
+
+      #app::-webkit-scrollbar {
+        width: 0 !important;
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
--- a/runtime/react/page/main.tsx
+++ b/runtime/react/page/main.tsx
@@ -0,0 +1,70 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import Core from '@tmagic/core';
+import type { MApp } from '@tmagic/schema';
+import { AppContent } from '@tmagic/ui-react';
+import { getUrlParam } from '@tmagic/utils';
+
+import components from '../.tmagic/comp-entry';
+import plugins from '../.tmagic/plugin-entry';
+
+import App from './App';
+declare global {
+  interface Window {
+    magicDSL: MApp[];
+    magicPresetComponents: any;
+    magicPresetConfigs: any;
+    magicPresetValues: any;
+  }
+}
+
+const getLocalConfig = (): MApp[] => {
+  const configStr = localStorage.getItem('magicDSL');
+  if (!configStr) return [];
+  try {
+    // eslint-disable-next-line no-eval
+    return [eval(`(${configStr})`)];
+  } catch (err) {
+    return [];
+  }
+};
+
+window.magicDSL = [];
+
+const app = new Core({
+  config: ((getUrlParam('localPreview') ? getLocalConfig() : window.magicDSL) || [])[0] || {},
+  curPage: getUrlParam('page'),
+});
+
+Object.keys(components).forEach((type: string) => app.registerComponent(type, components[type]));
+Object.values(plugins).forEach((plugin: any) => {
+  plugin.install(app);
+});
+
+ReactDOM.render(
+  <React.StrictMode>
+    <AppContent.Provider value={app}>
+      <App />
+    </AppContent.Provider>
+  </React.StrictMode>,
+  document.getElementById('root'),
+);