build: 修改runtime publicDir

This commit is contained in:
roymondchen 2022-08-08 16:12:35 +08:00 committed by jia000
parent 7de649d8c4
commit 1d8149b5eb
29 changed files with 185 additions and 182 deletions

View File

@ -1,5 +1,4 @@
dist
admin-dist
entry-dist
coverage
node_modules

View File

@ -147,7 +147,7 @@ cd tmatic-editor
npm run build:runtime:admin
```
将/runtime/{vue3 | vue2 | react}/admin-dist 中所有文件以及文件夹复制到 /magic/runtime 目录下
将/runtime/{vue3 | vue2 | react}/dist 中所有文件以及文件夹复制到 /magic/runtime 目录下
上面的操作我们提供了/magic-admin/setup.sh 脚本文件来实现,开发者可以参考该脚本文件来搭建流水线。

View File

@ -5,7 +5,7 @@
"packageManager": "pnpm@7.1.9",
"scripts": {
"bootstrap": "pnpm i && pnpm build",
"clean:top": "rimraf */**/dist */**/types */**/admin-dist */**/entry-dist */dist coverage dwt*",
"clean:top": "rimraf */**/dist */**/types */dist coverage dwt*",
"clean:modules": "rimraf node_modules **/node_modules **/**/node_modules",
"clean:all": "pnpm clean:top && pnpm clean:modules",
"lint": "eslint . --ext .js,.vue,.ts,.tsx",
@ -18,8 +18,7 @@
"pg:react": "pnpm playground:react",
"build": "pnpm --filter \"@tmagic/*\" build",
"build:runtime:admin": "pnpm --filter \"runtime-*\" build:admin",
"build:playground": "pnpm --filter \"runtime-vue3\" --filter \"tmagic-playground\" build",
"postbuild:playground": "shx mkdir playground/dist/runtime && shx cp -r runtime/vue3/dist ./playground/dist/runtime/vue3 && cp -r runtime/vue3/entry-dist/* ./playground/dist/runtime/vue3",
"build:playground": "pnpm --filter \"runtime-vue3\" build && pnpm --filter \"tmagic-playground\" build",
"docs": "pnpm --filter \"docs\" dev",
"build:docs": "pnpm --filter \"docs\" build",
"reinstall": "pnpm clean:all && pnpm bootstrap",

View File

@ -1 +1,2 @@
VITE_RUNTIME_PATH=/tmagic-editor/playground/runtime/react
VITE_RUNTIME_PATH=/tmagic-editor/playground/runtime/react
VITE_ENTRY_PATH=./entry/react

View File

@ -1 +1,2 @@
VITE_RUNTIME_PATH=/tmagic-editor/playground/runtime/vue2
VITE_RUNTIME_PATH=/tmagic-editor/playground/runtime/vue2
VITE_ENTRY_PATH=./entry/vue2

View File

@ -1 +1,2 @@
VITE_RUNTIME_PATH=/tmagic-editor/playground/runtime/vue3
VITE_RUNTIME_PATH=/tmagic-editor/playground/runtime/vue3
VITE_ENTRY_PATH=./entry/vue3

View File

@ -1 +1,3 @@
dist
dist
public/entry
public/runtime

View File

@ -15,23 +15,18 @@
:stage-rect="stageRect"
>
<template #workspace-content>
<device-group v-model="stageRect"></device-group>
<DeviceGroup v-model="stageRect"></DeviceGroup>
</template>
</m-editor>
<el-dialog v-model="previewVisible" destroy-on-close :width="375" custom-class="pre-viewer" title="预览">
<iframe
v-if="previewVisible"
width="100%"
height="817"
:src="`${VITE_RUNTIME_PATH}/page/index.html?localPreview=1&page=${editor?.editorService.get('page').id}`"
></iframe>
<iframe v-if="previewVisible" width="100%" height="817" :src="previewUrl"></iframe>
</el-dialog>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, toRaw } from 'vue';
<script lang="ts" setup>
import { computed, ref, toRaw } from 'vue';
import { useRouter } from 'vue-router';
import { Coin, Connection, Document } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
@ -47,145 +42,124 @@ import DeviceGroup from '../components/DeviceGroup.vue';
import componentGroupList from '../configs/componentGroupList';
import dsl from '../configs/dsl';
const { VITE_RUNTIME_PATH } = import.meta.env;
const { VITE_RUNTIME_PATH, VITE_ENTRY_PATH } = import.meta.env;
export default defineComponent({
name: 'EditorApp',
const runtimeUrl = `${VITE_RUNTIME_PATH}/playground/index.html`;
const router = useRouter();
const editor = ref<InstanceType<typeof TMagicEditor>>();
const previewVisible = ref(false);
const value = ref(dsl);
const defaultSelected = ref(dsl.items[0].id);
const propsValues = ref<Record<string, any>>({});
const propsConfigs = ref<Record<string, any>>({});
const eventMethodList = ref<Record<string, any>>({});
const stageRect = ref();
components: { DeviceGroup },
const previewUrl = computed(
() => `${VITE_RUNTIME_PATH}/page/index.html?localPreview=1&page=${editor.value?.editorService.get('page').id}`,
);
setup() {
const router = useRouter();
const editor = ref<InstanceType<typeof TMagicEditor>>();
const previewVisible = ref(false);
const value = ref(dsl);
const defaultSelected = ref(dsl.items[0].id);
const propsValues = ref<Record<string, any>>({});
const propsConfigs = ref<Record<string, any>>({});
const eventMethodList = ref<Record<string, any>>({});
const save = () => {
localStorage.setItem(
'magicDSL',
serialize(toRaw(value.value), {
space: 2,
unsafe: true,
}).replace(/"(\w+)":\s/g, '$1: '),
);
editor.value?.editorService.resetModifiedNodeId();
};
const menu: MenuBarData = {
left: [
{
type: 'text',
text: '魔方',
},
],
center: ['delete', 'undo', 'redo', 'guides', 'rule', 'zoom'],
right: [
{
type: 'button',
text: 'Form Playground',
handler: () => router.push('form'),
},
{
type: 'button',
text: 'Table Playground',
handler: () => router.push('table'),
},
'/',
{
type: 'button',
text: '预览',
icon: Connection,
handler: async (services) => {
if (services?.editorService.get<Map<Id, Id>>('modifiedNodeIds').size > 0) {
try {
await ElMessageBox.confirm('有修改未保存,是否先保存再预览', '提示', {
confirmButtonText: '保存并预览',
cancelButtonText: '预览',
type: 'warning',
});
save();
ElMessage.success('保存成功');
} catch (e) {
console.error(e);
}
}
previewVisible.value = true;
},
},
{
type: 'button',
text: '保存',
icon: Coin,
handler: () => {
const menu: MenuBarData = {
left: [
{
type: 'text',
text: '魔方',
},
],
center: ['delete', 'undo', 'redo', 'guides', 'rule', 'zoom'],
right: [
{
type: 'button',
text: 'Form Playground',
handler: () => router.push('form'),
},
{
type: 'button',
text: 'Table Playground',
handler: () => router.push('table'),
},
'/',
{
type: 'button',
text: '预览',
icon: Connection,
handler: async (services) => {
if (services?.editorService.get<Map<Id, Id>>('modifiedNodeIds').size > 0) {
try {
await ElMessageBox.confirm('有修改未保存,是否先保存再预览', '提示', {
confirmButtonText: '保存并预览',
cancelButtonText: '预览',
type: 'warning',
});
save();
ElMessage.success('保存成功');
},
},
'/',
{
type: 'button',
icon: Document,
tooltip: '源码',
handler: (service) => service?.uiService.set('showSrc', !service?.uiService.get('showSrc')),
},
],
};
asyncLoadJs(`${VITE_RUNTIME_PATH}/config-entry/index.umd.js`).then(() => {
propsConfigs.value = (globalThis as any).magicPresetConfigs;
});
asyncLoadJs(`${VITE_RUNTIME_PATH}/value-entry/index.umd.js`).then(() => {
propsValues.value = (globalThis as any).magicPresetValues;
});
asyncLoadJs(`${VITE_RUNTIME_PATH}/event-entry/index.umd.js`).then(() => {
eventMethodList.value = (globalThis as any).magicPresetEvents;
});
save();
return {
VITE_RUNTIME_PATH,
editor,
menu,
value,
defaultSelected,
propsValues,
propsConfigs,
eventMethodList,
stageRect: ref(),
previewVisible,
runtimeUrl: `${VITE_RUNTIME_PATH}/playground/index.html`,
componentGroupList,
moveableOptions: (core?: StageCore): MoveableOptions => {
const options: MoveableOptions = {};
const id = core?.dr?.target?.id;
if (!id || !editor.value) return options;
const node = editor.value.editorService.getNodeById(id);
if (!node) return options;
const isPage = node.type === NodeType.PAGE;
options.draggable = !isPage;
options.resizable = !isPage;
options.rotatable = !isPage;
return options;
} catch (e) {
console.error(e);
}
}
previewVisible.value = true;
},
};
},
},
{
type: 'button',
text: '保存',
icon: Coin,
handler: () => {
save();
ElMessage.success('保存成功');
},
},
'/',
{
type: 'button',
icon: Document,
tooltip: '源码',
handler: (service) => service?.uiService.set('showSrc', !service?.uiService.get('showSrc')),
},
],
};
const moveableOptions = (core?: StageCore): MoveableOptions => {
const options: MoveableOptions = {};
const id = core?.dr?.target?.id;
if (!id || !editor.value) return options;
const node = editor.value.editorService.getNodeById(id);
if (!node) return options;
const isPage = node.type === NodeType.PAGE;
options.draggable = !isPage;
options.resizable = !isPage;
options.rotatable = !isPage;
return options;
};
const save = () => {
localStorage.setItem(
'magicDSL',
serialize(toRaw(value.value), {
space: 2,
unsafe: true,
}).replace(/"(\w+)":\s/g, '$1: '),
);
editor.value?.editorService.resetModifiedNodeId();
};
asyncLoadJs(`${VITE_ENTRY_PATH}/config/index.umd.js`).then(() => {
propsConfigs.value = (globalThis as any).magicPresetConfigs;
});
asyncLoadJs(`${VITE_ENTRY_PATH}/value/index.umd.js`).then(() => {
propsValues.value = (globalThis as any).magicPresetValues;
});
asyncLoadJs(`${VITE_ENTRY_PATH}/event/index.umd.js`).then(() => {
eventMethodList.value = (globalThis as any).magicPresetEvents;
});
save();
</script>
<style lang="scss">

View File

@ -1,3 +1,2 @@
.tmagic
admin-dist
entry-dist

View File

@ -23,18 +23,20 @@ import legacy from '@vitejs/plugin-legacy';
import reactRefresh from '@vitejs/plugin-react-refresh';
export default defineConfig(({ mode }) => {
if (['value', 'config', 'event'].includes(mode)) {
const capitalToken = mode.charAt(0).toUpperCase() + mode.slice(1);
if (['value', 'config', 'event', 'value:admin', 'config:admin', 'event:admin'].includes(mode)) {
const [type, isAdmin] = mode.split(':');
const capitalToken = type.charAt(0).toUpperCase() + type.slice(1);
return {
publicDir: './.tmagic/public',
build: {
cssCodeSplit: false,
sourcemap: true,
minify: false,
target: 'esnext',
outDir: `entry-dist/${mode}-entry`,
outDir: isAdmin ? `./dist/entry/react/${type}` : `../../playground/public/entry/react/${type}`,
lib: {
entry: `.tmagic/${mode}-entry.ts`,
entry: `.tmagic/${type}-entry.ts`,
name: `magicPreset${capitalToken}s`,
fileName: 'index',
formats: ['umd'],
@ -47,8 +49,8 @@ export default defineConfig(({ mode }) => {
const [type, isAdmin] = mode.split(':');
const base = isAdmin ? `/runtime/${type}/` : `/tmagic-editor/playground/runtime/react/${type}`;
const outDir = isAdmin
? path.resolve(process.cwd(), `./admin-dist/${type}`)
: path.resolve(process.cwd(), `./dist/${type}`);
? path.resolve(process.cwd(), `./dist/${type}`)
: path.resolve(process.cwd(), `../../playground/public/runtime/react/${type}`);
return {
plugins: [
reactRefresh(),
@ -59,6 +61,8 @@ export default defineConfig(({ mode }) => {
root: `./${type}/`,
publicDir: '../public',
base,
build: {

View File

@ -38,7 +38,7 @@ export default defineConfig({
base: '/tmagic-editor/playground/runtime/react/',
publicDir: 'entry-dist',
publicDir: 'public',
server: {
host: '0.0.0.0',

View File

@ -5,15 +5,19 @@
"scripts": {
"dev:react": "npm run build:libs && vite --config dev.vite.config.ts",
"build": "npm run build:libs && npm run build:page && npm run build:playground",
"build:admin": "npm run build:libs && npm run build:page:admin && npm run build:playground:admin",
"build:admin": "npm run build:libs:admin && npm run build:page:admin && npm run build:playground:admin",
"build:page": "vite build --config build.vite.config.ts --mode page",
"build:playground": "vite build --config build.vite.config.ts --mode playground",
"build:page:admin": "vite build --config build.vite.config.ts --mode page:admin",
"build:playground:admin": "vite build --config build.vite.config.ts --mode playground:admin",
"build:libs": "tmagic entry && npm run build:config & npm run build:value & npm run build:event",
"build:libs:admin": "tmagic entry && npm run build:config:admin && npm run build:value:admin && npm run build:event:admin",
"build:config": "vite build --config build.vite.config.ts --mode config",
"build:value": "vite build --config build.vite.config.ts --mode value",
"build:event": "vite build --config build.vite.config.ts --mode event"
"build:event": "vite build --config build.vite.config.ts --mode event",
"build:config:admin": "vite build --config build.vite.config.ts --mode config:admin",
"build:value:admin": "vite build --config build.vite.config.ts --mode value:admin",
"build:event:admin": "vite build --config build.vite.config.ts --mode event:admin"
},
"dependencies": {
"@tmagic/cli": "1.1.0-beta.6",

View File

@ -4,6 +4,7 @@
<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" />
<link rel="icon" href="/favicon.png" type="image/png">
<title>React Page</title>
<style>
html,

View File

@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favicon.png" type="image/png">
<title>React Playground</title>
<style>
html,body {margin: 0; padding: 0}

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

View File

@ -1,3 +1,2 @@
.tmagic
admin-dist
entry-dist

View File

@ -25,18 +25,20 @@ import vue from '@vitejs/plugin-vue2';
import externalGlobals from 'rollup-plugin-external-globals';
export default defineConfig(({ mode }) => {
if (['value', 'config', 'event'].includes(mode)) {
const capitalToken = mode.charAt(0).toUpperCase() + mode.slice(1);
if (['value', 'config', 'event', 'value:admin', 'config:admin', 'event:admin'].includes(mode)) {
const [type, isAdmin] = mode.split(':');
const capitalToken = type.charAt(0).toUpperCase() + type.slice(1);
return {
publicDir: './.tmagic/public',
build: {
cssCodeSplit: false,
sourcemap: true,
minify: false,
target: 'esnext',
outDir: `entry-dist/${mode}-entry`,
outDir: isAdmin ? `./dist/entry/vue2/${type}` : `../../playground/public/entry/vue2/${type}`,
lib: {
entry: `.tmagic/${mode}-entry.ts`,
entry: `.tmagic/${type}-entry.ts`,
name: `magicPreset${capitalToken}s`,
fileName: 'index',
formats: ['umd'],
@ -49,8 +51,8 @@ export default defineConfig(({ mode }) => {
const [type, isAdmin] = mode.split(':');
const base = isAdmin ? `/runtime/${type}/` : `/tmagic-editor/playground/runtime/vue2/${type}`;
const outDir = isAdmin
? path.resolve(process.cwd(), `./admin-dist/${type}`)
: path.resolve(process.cwd(), `./dist/${type}`);
? path.resolve(process.cwd(), `./dist/${type}`)
: path.resolve(process.cwd(), `../../playground/public/runtime/vue2/${type}`);
return {
plugins: [
vue(),
@ -62,6 +64,8 @@ export default defineConfig(({ mode }) => {
root: `./${type}/`,
publicDir: '../public',
base,
build: {

View File

@ -37,7 +37,7 @@ export default defineConfig({
base: '/tmagic-editor/playground/runtime/vue2/',
publicDir: 'entry-dist',
publicDir: 'public',
server: {
host: '0.0.0.0',

View File

@ -5,15 +5,19 @@
"scripts": {
"dev:vue2": "npm run build:libs && vite --config dev.vite.config.ts",
"build": "npm run build:libs && npm run build:page && npm run build:playground",
"build:admin": "npm run build:libs && npm run build:page:admin && npm run build:playground:admin",
"build:admin": "npm run build:libs:admin && npm run build:page:admin && npm run build:playground:admin",
"build:page": "vite build --config build.vite.config.ts --mode page",
"build:playground": "vite build --config build.vite.config.ts --mode playground",
"build:page:admin": "vite build --config build.vite.config.ts --mode page:admin",
"build:playground:admin": "vite build --config build.vite.config.ts --mode playground:admin",
"build:libs": "tmagic entry && npm run build:config & npm run build:value & npm run build:event",
"build:libs:admin": "tmagic entry && npm run build:config:admin && npm run build:value:admin && npm run build:event:admin",
"build:config": "vite build --config build.vite.config.ts --mode config",
"build:value": "vite build --config build.vite.config.ts --mode value",
"build:event": "vite build --config build.vite.config.ts --mode event"
"build:event": "vite build --config build.vite.config.ts --mode event",
"build:config:admin": "vite build --config build.vite.config.ts --mode config:admin",
"build:value:admin": "vite build --config build.vite.config.ts --mode value:admin",
"build:event:admin": "vite build --config build.vite.config.ts --mode event:admin"
},
"dependencies": {
"@tmagic/cli": "1.1.0-beta.6",

View File

@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/favicon.png" type="image/png">
<title>Vue2 Page</title>
<style>
html,

View File

@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favicon.png" type="image/png">
<title>Vue2 Playground</title>
<style>
html,body {margin: 0; padding: 0}

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

View File

@ -1,3 +1 @@
.tmagic
admin-dist
entry-dist

View File

@ -26,18 +26,20 @@ import vueJsx from '@vitejs/plugin-vue-jsx';
import externalGlobals from 'rollup-plugin-external-globals';
export default defineConfig(({ mode }) => {
if (['value', 'config', 'event'].includes(mode)) {
const capitalToken = mode.charAt(0).toUpperCase() + mode.slice(1);
if (['value', 'config', 'event', 'value:admin', 'config:admin', 'event:admin'].includes(mode)) {
const [type, isAdmin] = mode.split(':');
const capitalToken = type.charAt(0).toUpperCase() + type.slice(1);
return {
publicDir: './.tmagic/public',
build: {
cssCodeSplit: false,
sourcemap: true,
minify: false,
target: 'esnext',
outDir: `entry-dist/${mode}-entry`,
outDir: isAdmin ? `./dist/entry/vue3/${type}` : `../../playground/public/entry/vue3/${type}`,
lib: {
entry: `.tmagic/${mode}-entry.ts`,
entry: `.tmagic/${type}-entry.ts`,
name: `magicPreset${capitalToken}s`,
fileName: 'index',
formats: ['umd'],
@ -50,8 +52,8 @@ export default defineConfig(({ mode }) => {
const [type, isAdmin] = mode.split(':');
const base = isAdmin ? `/runtime/${type}/` : `/tmagic-editor/playground/runtime/vue3/${type}`;
const outDir = isAdmin
? path.resolve(process.cwd(), `./admin-dist/${type}`)
: path.resolve(process.cwd(), `./dist/${type}`);
? path.resolve(process.cwd(), `./dist/${type}`)
: path.resolve(process.cwd(), `../../playground/public/runtime/vue3/${type}`);
return {
plugins: [
vue(),
@ -64,6 +66,8 @@ export default defineConfig(({ mode }) => {
root: `./${type}/`,
publicDir: '../public',
base,
build: {

View File

@ -38,7 +38,7 @@ export default defineConfig({
base: '/tmagic-editor/playground/runtime/vue3/',
publicDir: 'entry-dist',
publicDir: 'public',
server: {
host: '0.0.0.0',

View File

@ -5,15 +5,19 @@
"scripts": {
"dev": "npm run build:libs && vite --config dev.vite.config.ts",
"build": "npm run build:libs && npm run build:page && npm run build:playground",
"build:admin": "npm run build:libs && npm run build:page:admin && npm run build:playground:admin",
"build:admin": "npm run build:libs:admin && npm run build:page:admin && npm run build:playground:admin",
"build:page": "vite build --config build.vite.config.ts --mode page",
"build:playground": "vite build --config build.vite.config.ts --mode playground",
"build:page:admin": "vite build --config build.vite.config.ts --mode page:admin",
"build:playground:admin": "vite build --config build.vite.config.ts --mode playground:admin",
"build:libs": "tmagic entry && npm run build:config & npm run build:value & npm run build:event",
"build:libs": "tmagic entry && npm run build:config && npm run build:value && npm run build:event",
"build:libs:admin": "tmagic entry && npm run build:config:admin && npm run build:value:admin && npm run build:event:admin",
"build:config": "vite build --config build.vite.config.ts --mode config",
"build:value": "vite build --config build.vite.config.ts --mode value",
"build:event": "vite build --config build.vite.config.ts --mode event"
"build:event": "vite build --config build.vite.config.ts --mode event",
"build:config:admin": "vite build --config build.vite.config.ts --mode config:admin",
"build:value:admin": "vite build --config build.vite.config.ts --mode value:admin",
"build:event:admin": "vite build --config build.vite.config.ts --mode event:admin"
},
"dependencies": {
"@tmagic/cli": "1.1.0-beta.6",

View File

@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/favicon.png" type="image/png">
<title>Vue3 Page</title>
<style>
html,

View File

@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favicon.png" type="image/png">
<title>Vue3 Playground</title>
<style>
html,body {margin: 0; padding: 0}

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB