JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-09-25 01:39:57 +08:00
Code Issues Projects Releases Wiki Activity

feat: 支持playground:vue2/playground:react命令

Browse Source 
vue2 react runtime path 出错导致vue2 react playground运行出错；vue2中存在多个composition-api导致出错

fix #82 fix #68
This commit is contained in:
roymondchen 2022-05-25 17:03:01 +08:00 committed by jia000
parent 1601cefb7f
commit d84037e421
12 changed files with 119 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -11,6 +11,8 @@
"lint": "eslint . --ext .js,.vue,.ts,.tsx",
"lint-fix": "eslint . --fix --ext .vue,.js,.ts,.tsx",
"playground": "lerna run dev --scope tmagic-playground --scope runtime-vue3 --parallel",
"playground:vue2": "lerna run dev:vue2 --scope tmagic-playground --scope runtime-vue2 --parallel",
"playground:react": "lerna run dev:react --scope tmagic-playground --scope runtime-react --parallel",
"build": "lerna run build --scope tmagic-playground --scope runtime-vue3 --scope runtime-vue2 --scope runtime-react --scope @tmagic/* --parallel",
"postbuild": "shx mkdir playground/dist/runtime && shx cp -r runtime/vue2/dist ./playground/dist/runtime/vue2 && shx cp -r runtime/vue3/dist ./playground/dist/runtime/vue3 && cp -r runtime/react/dist ./playground/dist/runtime/react",
"docs": "cd docs && npm run doc:dev",

1
playground/.env.react Normal file
View File

@ -0,0 +1 @@
VITE_RUNTIME_PATH=/tmagic-editor/playground/runtime/react

1
playground/.env.vue2 Normal file
View File

@ -0,0 +1 @@
VITE_RUNTIME_PATH=/tmagic-editor/playground/runtime/vue2

1
playground/.env.vue3 Normal file
View File

@ -0,0 +1 @@
VITE_RUNTIME_PATH=/tmagic-editor/playground/runtime/vue3

6
playground/package.json
View File

@ -3,8 +3,10 @@
"version": "1.0.0-rc.3",
"private": true,
"scripts": {
"dev": "vite",
"build": "node --max_old_space_size=8192 node_modules/.bin/vite build",
"dev": "vite --mode vue3",
"dev:vue2": "vite --mode vue2",
"dev:react": "vite --mode react",
"build": "node --max_old_space_size=8192 node_modules/.bin/vite build --mode vue3",
"serve": "vite preview"
},
"dependencies": {

14
playground/src/pages/Editor.vue
View File

@ -19,7 +19,7 @@
v-if="previewVisible"
width="100%"
height="817"
:src="`${RUNTIME_PATH}/page.html?localPreview=1&page=${editor?.editorService.get('page').id}`"
:src="`${VITE_RUNTIME_PATH}/page.html?localPreview=1&page=${editor?.editorService.get('page').id}`"
></iframe>
</el-dialog>
</div>
@ -47,7 +47,7 @@ import { asyncLoadJs } from '@tmagic/utils';
import config from '../config';
const RUNTIME_PATH = '/tmagic-editor/playground/runtime/vue3';
const { VITE_RUNTIME_PATH } = import.meta.env;
export default defineComponent({
name: 'EditorApp',
@ -121,20 +121,20 @@ export default defineComponent({
],
};
asyncLoadJs(`${RUNTIME_PATH}/assets/config.js`).then(() => {
asyncLoadJs(`${VITE_RUNTIME_PATH}/assets/config.js`).then(() => {
propsConfigs.value = (globalThis as any).magicPresetConfigs;
});
asyncLoadJs(`${RUNTIME_PATH}/assets/value.js`).then(() => {
asyncLoadJs(`${VITE_RUNTIME_PATH}/assets/value.js`).then(() => {
propsValues.value = (globalThis as any).magicPresetValues;
});
asyncLoadJs(`${RUNTIME_PATH}/assets/event.js`).then(() => {
asyncLoadJs(`${VITE_RUNTIME_PATH}/assets/event.js`).then(() => {
eventMethodList.value = (globalThis as any).magicPresetEvents;
});
save();
return {
RUNTIME_PATH,
VITE_RUNTIME_PATH,
editor,
menu,
@ -146,7 +146,7 @@ export default defineComponent({
previewVisible,
runtimeUrl: `${RUNTIME_PATH}/playground.html`,
runtimeUrl: `${VITE_RUNTIME_PATH}/playground.html`,
componentGroupList: ref([
{

2
runtime/react/package.json
View File

@ -3,7 +3,7 @@
"version": "1.0.0-rc.3",
"private": true,
"scripts": {
"dev": "npm run build && npm run serve",
"dev:react": "npm run build && npm run serve",
"start": "node scripts/dev.js && vite",
"build": "node scripts/build.js && vite build",
"serve": "vite preview --port 8076"

10
runtime/react/src/playground/main.tsx
View File

@ -27,7 +27,7 @@ import { getUrlParam } from '@tmagic/utils';
import App from './App';
const componentUrl = '/tamgic-editor/playground/runtime/react/assets/components.js';
const componentUrl = '/tmagic-editor/playground/runtime/react/assets/components.js';
import(componentUrl).then(() => {
const { components } = window.magicPresetComponents;
@ -42,9 +42,6 @@ import(componentUrl).then(() => {
const updateConfig = (root: MApp) => {
app?.setConfig(root);
renderDom();
// @ts-ignore
window.magic.onPageElUpdate(document.querySelector('.magic-ui-page'));
};
const renderDom = () => {
@ -56,6 +53,11 @@ import(componentUrl).then(() => {
</React.StrictMode>,
document.getElementById('root'),
);
setTimeout(() => {
// @ts-ignore
window.magic.onPageElUpdate(document.querySelector('.magic-ui-page'));
});
};
const operations = {

2
runtime/vue2/package.json
View File

@ -3,7 +3,7 @@
"version": "1.0.0-rc.3",
"private": true,
"scripts": {
"dev": "npm run build && npm run serve",
"dev:vue2": "npm run build && npm run serve",
"start": "node scripts/dev.js && vite",
"build": "node scripts/build.js && vite build",
"serve": "vite preview --port 8077"

125
runtime/vue2/src/playground/App.vue
View File

@ -3,90 +3,74 @@
</template>
<script lang="ts">
/* eslint-disable no-param-reassign */
import Vue from 'vue';
import { reactive } from '@vue/composition-api';
import { computed, defineComponent, nextTick, onMounted, provide, reactive, ref, watch } from '@vue/composition-api';
import Core from '@tmagic/core';
import { MApp, MNode, MPage } from '@tmagic/schema';
import { RemoveData, SortEventData, UpdateData } from '@tmagic/stage';
import { Id, MApp, MNode } from '@tmagic/schema';
import { Magic, RemoveData, UpdateData } from '@tmagic/stage';
import { getNodePath } from '@tmagic/utils';
// @ts-ignore
export default Vue.extend({
data(): {
app: Core | null;
config?: MApp;
curPageId: string;
selectedId: string;
} {
return {
app: null,
config: undefined,
curPageId: '',
selectedId: '',
};
},
declare global {
interface Window {
magic: Magic;
}
}
computed: {
pageConfig(): MPage | undefined {
return this.config?.items?.find((item: MNode) => item.id === this.curPageId) || this.config?.items?.[0];
},
},
export default defineComponent({
setup() {
const root = ref<MApp>();
const curPageId = ref<Id>();
const selectedId = ref<Id>();
provide() {
this.app = new Core({
config: this.config,
const pageConfig = computed(
() => root.value?.items?.find((item: MNode) => item.id === curPageId.value) || root.value?.items?.[0],
);
const app = new Core({
config: root.value,
platform: 'editor',
});
return {
app: this.app,
};
},
mounted() {
// @ts-ignore
globalThis.magic?.onRuntimeReady(this);
},
provide('app', app);
watch: {
async pageConfig() {
await this.$nextTick();
// @ts-ignore
globalThis.magic.onPageElUpdate(document.querySelector('.magic-ui-page'));
},
},
watch(pageConfig, async () => {
await nextTick();
const page = document.querySelector<HTMLElement>('.magic-ui-page');
page && window.magic.onPageElUpdate(page);
});
methods: {
onMounted(() => {
window.magic?.onRuntimeReady({
updateRootConfig(config: MApp) {
console.log('update config', config);
this.config = config;
this.app?.setConfig(config, this.curPageId);
root.value = config;
app?.setConfig(config, curPageId.value);
},
updatePageId(id: string) {
updatePageId(id: Id) {
console.log('update page id', id);
this.curPageId = id;
this.app?.setPage(id);
curPageId.value = id;
app?.setPage(id);
},
getSnapElementQuerySelector() {
return '[class*=magic-ui][id]';
getSnapElements() {
return Array.from(document.querySelectorAll<HTMLElement>('[class*=magic-ui][id]'));
},
select(id: string) {
select(id: Id) {
console.log('select config', id);
this.selectedId = id;
const el = document.getElementById(id);
selectedId.value = id;
const el = document.getElementById(`${id}`);
if (el) return el;
// 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取
return this.$nextTick().then(() => document.getElementById(id));
return nextTick().then(() => document.getElementById(`${id}`) as HTMLElement);
},
add({ config }: UpdateData) {
console.log('add config', config);
if (!this.config) throw new Error('error');
const path = getNodePath(this.selectedId, [this.config]);
if (!root.value) throw new Error('error');
if (!selectedId.value) throw new Error('error');
const path = getNodePath(selectedId.value, [root.value]);
const node = path.pop();
const parent = node?.items ? node : path.pop();
if (!parent) throw new Error('未找到父节点');
@ -95,8 +79,8 @@ export default Vue.extend({
update({ config }: UpdateData) {
console.log('update config', config);
if (!this.config) throw new Error('error');
const path = getNodePath(config.id, [this.config]);
if (!root.value) throw new Error('error');
const path = getNodePath(config.id, [root.value]);
const node = path.pop();
const parent = path.pop();
if (!node) throw new Error('未找到目标节点');
@ -105,22 +89,9 @@ export default Vue.extend({
parent.items.splice(index, 1, reactive(config));
},
sortNode({ src, dist }: SortEventData) {
if (!this.config) throw new Error('error');
const path = getNodePath(this.selectedId, [this.config]);
path.pop();
const parent = path.pop();
if (!parent) return;
// 在 id1 的兄弟组件中若无 id2 则直接 return
const index2 = parent.items.findIndex((node: MNode) => node.id === dist);
if (index2 < 0) return;
const index1 = parent.items.findIndex((node: MNode) => node.id === src);
parent.items.splice(index2, 0, ...parent.items.splice(index1, 1));
},
remove({ id }: RemoveData) {
if (!this.config) throw new Error('error');
const path = getNodePath(id, [this.config]);
if (!root.value) throw new Error('error');
const path = getNodePath(id, [root.value]);
const node = path.pop();
if (!node) throw new Error('未找到目标元素');
const parent = path.pop();
@ -128,6 +99,12 @@ export default Vue.extend({
const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
parent.items.splice(index, 1);
},
});
});
return {
pageConfig,
};
},
});
</script>

2
runtime/vue2/src/playground/main.ts
View File

@ -20,7 +20,7 @@ import Vue from 'vue';
import App from './App.vue';
const componentUrl = '/tamgic-editor/playground/runtime/vue2/assets/components.js';
const componentUrl = '/tmagic-editor/playground/runtime/vue2/assets/components.js';
import(componentUrl).then(() => {
const { components, plugins } = window.magicPresetComponents;

2
runtime/vue2/vite.config.ts
View File

@ -30,6 +30,7 @@ export default defineConfig({
resolve: {
alias: [
{ find: /^vue$/, replacement: path.join(__dirname, 'node_modules/vue/dist/vue.esm.js') },
{ find: /^@vue\/composition-api$/, replacement: path.join(__dirname, 'node_modules/@vue/composition-api') },
{ find: /^@tmagic\/ui-vue2/, replacement: path.join(__dirname, '../../packages/ui-vue2/src/index.ts') },
{ find: /^@tmagic\/utils/, replacement: path.join(__dirname, '../../packages/utils/src/index.ts') },
{ find: /^@tmagic\/core/, replacement: path.join(__dirname, '../../packages/core/src/index.ts') },
@ -49,6 +50,7 @@ export default defineConfig({
components: './src/comp-entry.ts',
config: './src/config-entry.ts',
value: './src/value-entry.ts',
event: './src/event-entry.ts',
},
output: {
entryFileNames: 'assets/[name].js',