mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-04-05 19:41:40 +08:00
feat(runtime): vue2/react使用tamgic-cli生成组件依赖入口
This commit is contained in:
roymondchen
jia000
parent
a57fef4947
commit
e8b8d35cbd
@ -5,7 +5,7 @@
|
|||||||
"packageManager": "pnpm@7.1.9",
|
"packageManager": "pnpm@7.1.9",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"bootstrap": "pnpm i && pnpm build",
|
"bootstrap": "pnpm i && pnpm build",
|
||||||
"clean:top": "rimraf */**/dist */dist coverage dwt*",
|
"clean:top": "rimraf */**/dist */**/admin-dist */**/entry-dist */dist coverage dwt*",
|
||||||
"clean:modules": "rimraf node_modules **/node_modules **/**/node_modules",
|
"clean:modules": "rimraf node_modules **/node_modules **/**/node_modules",
|
||||||
"clean:all": "pnpm clean:top && pnpm clean:modules",
|
"clean:all": "pnpm clean:top && pnpm clean:modules",
|
||||||
"lint": "eslint . --ext .js,.vue,.ts,.tsx",
|
"lint": "eslint . --ext .js,.vue,.ts,.tsx",
|
||||||
|
|||||||
@ -6,7 +6,7 @@
|
|||||||
</button>
|
</button>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { computed, defineComponent, getCurrentInstance, PropType, reactive } from 'vue';
|
import { computed, defineComponent, getCurrentInstance, PropType, ref } from 'vue';
|
||||||
|
|
||||||
import type { MComponent } from '@tmagic/schema';
|
import type { MComponent } from '@tmagic/schema';
|
||||||
|
|
||||||
@ -28,14 +28,14 @@ export default defineComponent({
|
|||||||
setup(props) {
|
setup(props) {
|
||||||
useApp(props);
|
useApp(props);
|
||||||
const vm = getCurrentInstance()?.proxy;
|
const vm = getCurrentInstance()?.proxy;
|
||||||
const actions = reactive<Function[]>([]);
|
const actions = ref<Function[]>([]);
|
||||||
const actualActions = computed(() => [
|
const actualActions = computed(() => [
|
||||||
typeof props.config.preAction === 'function' ? props.config.preAction : () => true,
|
typeof props.config.preAction === 'function' ? props.config.preAction : () => true,
|
||||||
...actions,
|
...actions.value,
|
||||||
typeof props.config.postAction === 'function' ? props.config.postAction : () => true,
|
typeof props.config.postAction === 'function' ? props.config.postAction : () => true,
|
||||||
]);
|
]);
|
||||||
function pushAction(action: Function): void {
|
function pushAction(action: Function): void {
|
||||||
actions.push(action);
|
actions.value.push(action);
|
||||||
}
|
}
|
||||||
async function clickHandler(): Promise<void> {
|
async function clickHandler(): Promise<void> {
|
||||||
for (const fn of actualActions.value) {
|
for (const fn of actualActions.value) {
|
||||||
|
|||||||
78
pnpm-lock.yaml
generated
78
pnpm-lock.yaml
generated
@ -474,56 +474,82 @@ importers:
|
|||||||
|
|
||||||
runtime/react:
|
runtime/react:
|
||||||
specifiers:
|
specifiers:
|
||||||
|
'@tmagic/cli': workspace:*
|
||||||
|
'@tmagic/core': 1.1.0-beta.5
|
||||||
'@tmagic/schema': 1.1.0-beta.5
|
'@tmagic/schema': 1.1.0-beta.5
|
||||||
'@tmagic/stage': 1.1.0-beta.5
|
'@tmagic/stage': 1.1.0-beta.5
|
||||||
|
'@tmagic/ui-react': 1.1.0-beta.5
|
||||||
|
'@tmagic/utils': 1.1.0-beta.5
|
||||||
'@types/react': ^17.0.37
|
'@types/react': ^17.0.37
|
||||||
'@types/react-dom': ^17.0.11
|
'@types/react-dom': ^17.0.11
|
||||||
|
'@vitejs/plugin-legacy': ^2.0.0
|
||||||
'@vitejs/plugin-react-refresh': ^1.3.1
|
'@vitejs/plugin-react-refresh': ^1.3.1
|
||||||
|
axios: ^0.25.0
|
||||||
react: ^17.0.2
|
react: ^17.0.2
|
||||||
react-dom: ^17.0.2
|
react-dom: ^17.0.2
|
||||||
recast: ^0.20.4
|
recast: ^0.20.4
|
||||||
|
terser: ^5.14.2
|
||||||
typescript: ^4.7.4
|
typescript: ^4.7.4
|
||||||
vite: ^3.0.4
|
vite: ^3.0.4
|
||||||
dependencies:
|
dependencies:
|
||||||
|
'@tmagic/cli': link:../../packages/cli
|
||||||
|
'@tmagic/core': link:../../packages/core
|
||||||
'@tmagic/schema': link:../../packages/schema
|
'@tmagic/schema': link:../../packages/schema
|
||||||
'@tmagic/stage': link:../../packages/stage
|
'@tmagic/stage': link:../../packages/stage
|
||||||
|
'@tmagic/ui-react': link:../../packages/ui-react
|
||||||
|
'@tmagic/utils': link:../../packages/utils
|
||||||
|
axios: 0.25.0
|
||||||
react: 17.0.2
|
react: 17.0.2
|
||||||
react-dom: 17.0.2_react@17.0.2
|
react-dom: 17.0.2_react@17.0.2
|
||||||
|
terser: 5.14.2
|
||||||
devDependencies:
|
devDependencies:
|
||||||
'@types/react': 17.0.45
|
'@types/react': 17.0.45
|
||||||
'@types/react-dom': 17.0.17
|
'@types/react-dom': 17.0.17
|
||||||
|
'@vitejs/plugin-legacy': 2.0.0_terser@5.14.2+vite@3.0.4
|
||||||
'@vitejs/plugin-react-refresh': 1.3.6
|
'@vitejs/plugin-react-refresh': 1.3.6
|
||||||
recast: 0.20.5
|
recast: 0.20.5
|
||||||
typescript: 4.7.4
|
typescript: 4.7.4
|
||||||
vite: 3.0.4
|
vite: 3.0.4_terser@5.14.2
|
||||||
|
|
||||||
runtime/vue2:
|
runtime/vue2:
|
||||||
specifiers:
|
specifiers:
|
||||||
|
'@tmagic/cli': workspace:*
|
||||||
|
'@tmagic/core': 1.1.0-beta.5
|
||||||
'@tmagic/schema': 1.1.0-beta.5
|
'@tmagic/schema': 1.1.0-beta.5
|
||||||
'@tmagic/stage': 1.1.0-beta.5
|
'@tmagic/stage': 1.1.0-beta.5
|
||||||
|
'@tmagic/ui-vue2': 1.1.0-beta.5
|
||||||
|
'@tmagic/utils': 1.1.0-beta.5
|
||||||
'@types/events': ^3.0.0
|
'@types/events': ^3.0.0
|
||||||
|
'@vitejs/plugin-legacy': ^2.0.0
|
||||||
'@vitejs/plugin-vue2': ^1.1.2
|
'@vitejs/plugin-vue2': ^1.1.2
|
||||||
axios: ^0.27.2
|
axios: ^0.25.0
|
||||||
recast: ^0.20.4
|
recast: ^0.20.4
|
||||||
rollup: ^2.25.0
|
rollup: ^2.25.0
|
||||||
rollup-plugin-external-globals: ^0.6.1
|
rollup-plugin-external-globals: ^0.6.1
|
||||||
sass: ^1.35.1
|
sass: ^1.35.1
|
||||||
|
terser: ^5.14.2
|
||||||
vite: ^3.0.4
|
vite: ^3.0.4
|
||||||
vue: ^2.7.4
|
vue: ^2.7.4
|
||||||
vue-template-compiler: ^2.7.4
|
vue-template-compiler: ^2.7.4
|
||||||
dependencies:
|
dependencies:
|
||||||
|
'@tmagic/cli': link:../../packages/cli
|
||||||
|
'@tmagic/core': link:../../packages/core
|
||||||
'@tmagic/schema': link:../../packages/schema
|
'@tmagic/schema': link:../../packages/schema
|
||||||
'@tmagic/stage': link:../../packages/stage
|
'@tmagic/stage': link:../../packages/stage
|
||||||
|
'@tmagic/ui-vue2': link:../../packages/ui-vue2
|
||||||
|
'@tmagic/utils': link:../../packages/utils
|
||||||
|
axios: 0.25.0
|
||||||
|
terser: 5.14.2
|
||||||
vue: 2.7.4
|
vue: 2.7.4
|
||||||
devDependencies:
|
devDependencies:
|
||||||
'@types/events': 3.0.0
|
'@types/events': 3.0.0
|
||||||
|
'@vitejs/plugin-legacy': 2.0.0_terser@5.14.2+vite@3.0.4
|
||||||
'@vitejs/plugin-vue2': 1.1.2_vite@3.0.4+vue@2.7.4
|
'@vitejs/plugin-vue2': 1.1.2_vite@3.0.4+vue@2.7.4
|
||||||
axios: 0.27.2
|
|
||||||
recast: 0.20.5
|
recast: 0.20.5
|
||||||
rollup: 2.75.5
|
rollup: 2.75.5
|
||||||
rollup-plugin-external-globals: 0.6.1_rollup@2.75.5
|
rollup-plugin-external-globals: 0.6.1_rollup@2.75.5
|
||||||
sass: 1.52.2
|
sass: 1.52.2
|
||||||
vite: 3.0.4_sass@1.52.2
|
vite: 3.0.4_sass@1.52.2+terser@5.14.2
|
||||||
vue-template-compiler: 2.7.4
|
vue-template-compiler: 2.7.4
|
||||||
|
|
||||||
runtime/vue3:
|
runtime/vue3:
|
||||||
@ -1704,7 +1730,7 @@ packages:
|
|||||||
regenerator-runtime: 0.13.9
|
regenerator-runtime: 0.13.9
|
||||||
systemjs: 6.12.1
|
systemjs: 6.12.1
|
||||||
terser: 5.14.2
|
terser: 5.14.2
|
||||||
vite: 3.0.4_sass@1.52.2+terser@5.14.2
|
vite: 3.0.4_terser@5.14.2
|
||||||
|
|
||||||
/@vitejs/plugin-react-refresh/1.3.6:
|
/@vitejs/plugin-react-refresh/1.3.6:
|
||||||
resolution: {integrity: sha512-iNR/UqhUOmFFxiezt0em9CgmiJBdWR+5jGxB2FihaoJfqGt76kiwaKoVOJVU5NYcDWMdN06LbyN2VIGIoYdsEA==}
|
resolution: {integrity: sha512-iNR/UqhUOmFFxiezt0em9CgmiJBdWR+5jGxB2FihaoJfqGt76kiwaKoVOJVU5NYcDWMdN06LbyN2VIGIoYdsEA==}
|
||||||
@ -1762,7 +1788,7 @@ packages:
|
|||||||
vite: '>=2.5.10'
|
vite: '>=2.5.10'
|
||||||
vue: ^2.7.0-0
|
vue: ^2.7.0-0
|
||||||
dependencies:
|
dependencies:
|
||||||
vite: 3.0.4_sass@1.52.2
|
vite: 3.0.4_sass@1.52.2+terser@5.14.2
|
||||||
vue: 2.7.4
|
vue: 2.7.4
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
@ -2492,15 +2518,6 @@ packages:
|
|||||||
- debug
|
- debug
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/axios/0.27.2:
|
|
||||||
resolution: {integrity: sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==}
|
|
||||||
dependencies:
|
|
||||||
follow-redirects: 1.15.1
|
|
||||||
form-data: 4.0.0
|
|
||||||
transitivePeerDependencies:
|
|
||||||
- debug
|
|
||||||
dev: true
|
|
||||||
|
|
||||||
/balanced-match/1.0.2:
|
/balanced-match/1.0.2:
|
||||||
resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
|
resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
|
||||||
dev: true
|
dev: true
|
||||||
@ -4067,6 +4084,7 @@ packages:
|
|||||||
peerDependenciesMeta:
|
peerDependenciesMeta:
|
||||||
debug:
|
debug:
|
||||||
optional: true
|
optional: true
|
||||||
|
dev: false
|
||||||
|
|
||||||
/foreground-child/2.0.0:
|
/foreground-child/2.0.0:
|
||||||
resolution: {integrity: sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==}
|
resolution: {integrity: sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==}
|
||||||
@ -4500,6 +4518,7 @@ packages:
|
|||||||
|
|
||||||
/immutable/4.1.0:
|
/immutable/4.1.0:
|
||||||
resolution: {integrity: sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==}
|
resolution: {integrity: sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==}
|
||||||
|
dev: true
|
||||||
|
|
||||||
/import-fresh/3.3.0:
|
/import-fresh/3.3.0:
|
||||||
resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
|
resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
|
||||||
@ -6083,6 +6102,7 @@ packages:
|
|||||||
chokidar: 3.5.3
|
chokidar: 3.5.3
|
||||||
immutable: 4.1.0
|
immutable: 4.1.0
|
||||||
source-map-js: 1.0.2
|
source-map-js: 1.0.2
|
||||||
|
dev: true
|
||||||
|
|
||||||
/sass/1.53.0:
|
/sass/1.53.0:
|
||||||
resolution: {integrity: sha512-zb/oMirbKhUgRQ0/GFz8TSAwRq2IlR29vOUJZOx0l8sV+CkHUfHa4u5nqrG+1VceZp7Jfj59SVW9ogdhTvJDcQ==}
|
resolution: {integrity: sha512-zb/oMirbKhUgRQ0/GFz8TSAwRq2IlR29vOUJZOx0l8sV+CkHUfHa4u5nqrG+1VceZp7Jfj59SVW9ogdhTvJDcQ==}
|
||||||
@ -6866,6 +6886,34 @@ packages:
|
|||||||
terser: 5.14.2
|
terser: 5.14.2
|
||||||
optionalDependencies:
|
optionalDependencies:
|
||||||
fsevents: 2.3.2
|
fsevents: 2.3.2
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/vite/3.0.4_terser@5.14.2:
|
||||||
|
resolution: {integrity: sha512-NU304nqnBeOx2MkQnskBQxVsa0pRAH5FphokTGmyy8M3oxbvw7qAXts2GORxs+h/2vKsD+osMhZ7An6yK6F1dA==}
|
||||||
|
engines: {node: ^14.18.0 || >=16.0.0}
|
||||||
|
hasBin: true
|
||||||
|
peerDependencies:
|
||||||
|
less: '*'
|
||||||
|
sass: '*'
|
||||||
|
stylus: '*'
|
||||||
|
terser: ^5.4.0
|
||||||
|
peerDependenciesMeta:
|
||||||
|
less:
|
||||||
|
optional: true
|
||||||
|
sass:
|
||||||
|
optional: true
|
||||||
|
stylus:
|
||||||
|
optional: true
|
||||||
|
terser:
|
||||||
|
optional: true
|
||||||
|
dependencies:
|
||||||
|
esbuild: 0.14.49
|
||||||
|
postcss: 8.4.14
|
||||||
|
resolve: 1.22.1
|
||||||
|
rollup: 2.77.0
|
||||||
|
terser: 5.14.2
|
||||||
|
optionalDependencies:
|
||||||
|
fsevents: 2.3.2
|
||||||
|
|
||||||
/vitest/0.14.1_c8@7.11.3+jsdom@19.0.0:
|
/vitest/0.14.1_c8@7.11.3+jsdom@19.0.0:
|
||||||
resolution: {integrity: sha512-2UUm6jYgkwh7Y3VKSRR8OuaNCm+iA5LPDnal7jyITN39maZK9L+JVxqjtQ39PSFo5Fl3/BgaJvER6GGHX9JLxg==}
|
resolution: {integrity: sha512-2UUm6jYgkwh7Y3VKSRR8OuaNCm+iA5LPDnal7jyITN39maZK9L+JVxqjtQ39PSFo5Fl3/BgaJvER6GGHX9JLxg==}
|
||||||
|
|||||||
@ -1,2 +0,0 @@
|
|||||||
BASE=/runtime
|
|
||||||
OUT_DIR=admin-dist
|
|
||||||
6
runtime/react/.gitignore
vendored
6
runtime/react/.gitignore
vendored
@ -1,5 +1,3 @@
|
|||||||
comp-entry.ts
|
.tmagic
|
||||||
config-entry.ts
|
|
||||||
value-entry.ts
|
|
||||||
event-entry.ts
|
|
||||||
admin-dist
|
admin-dist
|
||||||
|
entry-dist
|
||||||
|
|||||||
73
runtime/react/build.vite.config.ts
Normal file
73
runtime/react/build.vite.config.ts
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
/*
|
||||||
|
* 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 path from 'path';
|
||||||
|
|
||||||
|
import { defineConfig } from 'vite';
|
||||||
|
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);
|
||||||
|
return {
|
||||||
|
build: {
|
||||||
|
cssCodeSplit: false,
|
||||||
|
sourcemap: true,
|
||||||
|
minify: false,
|
||||||
|
target: 'esnext',
|
||||||
|
outDir: `entry-dist/${mode}-entry`,
|
||||||
|
|
||||||
|
lib: {
|
||||||
|
entry: `.tmagic/${mode}-entry.ts`,
|
||||||
|
name: `magicPreset${capitalToken}s`,
|
||||||
|
fileName: 'index',
|
||||||
|
formats: ['umd'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (['page', 'playground', 'page:admin', 'playground:admin'].includes(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}`);
|
||||||
|
return {
|
||||||
|
plugins: [
|
||||||
|
reactRefresh(),
|
||||||
|
legacy({
|
||||||
|
targets: ['defaults', 'not IE 11'],
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
|
||||||
|
root: `./${type}/`,
|
||||||
|
|
||||||
|
base,
|
||||||
|
|
||||||
|
build: {
|
||||||
|
emptyOutDir: true,
|
||||||
|
sourcemap: true,
|
||||||
|
outDir,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {};
|
||||||
|
});
|
||||||
63
runtime/react/dev.vite.config.ts
Normal file
63
runtime/react/dev.vite.config.ts
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
/*
|
||||||
|
* 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 path from 'path';
|
||||||
|
|
||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import reactRefresh from '@vitejs/plugin-react-refresh';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [reactRefresh()],
|
||||||
|
|
||||||
|
resolve: {
|
||||||
|
alias: [
|
||||||
|
{ find: /^react$/, replacement: path.join(__dirname, 'node_modules/react/index.js') },
|
||||||
|
{ find: /^react-dom$/, replacement: path.join(__dirname, 'node_modules/react-dom/index.js') },
|
||||||
|
{ find: /^@tmagic\/utils/, replacement: path.join(__dirname, '../../packages/utils/src/index.ts') },
|
||||||
|
{ find: /^@tmagic\/core/, replacement: path.join(__dirname, '../../packages/core/src/index.ts') },
|
||||||
|
{ find: /^@tmagic\/schema/, replacement: path.join(__dirname, '../../packages/schema/src/index.ts') },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
root: './',
|
||||||
|
|
||||||
|
base: '/tmagic-editor/playground/runtime/react/',
|
||||||
|
|
||||||
|
publicDir: 'entry-dist',
|
||||||
|
|
||||||
|
server: {
|
||||||
|
host: '0.0.0.0',
|
||||||
|
port: 8078,
|
||||||
|
},
|
||||||
|
|
||||||
|
build: {
|
||||||
|
sourcemap: true,
|
||||||
|
|
||||||
|
cssCodeSplit: false,
|
||||||
|
|
||||||
|
rollupOptions: {
|
||||||
|
input: {
|
||||||
|
page: './page/index.html',
|
||||||
|
playground: './playground/index.html',
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
entryFileNames: 'assets/[name].js',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
@ -3,17 +3,27 @@
|
|||||||
"version": "1.1.0-beta.5",
|
"version": "1.1.0-beta.5",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev:react": "npm run entry && npm run build:lib & npm run dev:html",
|
"dev:react": "npm run build:libs && vite --config dev.vite.config.ts",
|
||||||
"build": "npm run entry && vite build",
|
"build": "npm run build:libs && npm run build:page && npm run build:playground",
|
||||||
"build:admin": "npm run entry && vite build --mode admin",
|
"build:admin": "npm run build:libs && npm run build:page:admin && npm run build:playground:admin",
|
||||||
"serve": "vite preview",
|
"build:page": "vite build --config build.vite.config.ts --mode page",
|
||||||
"entry": "node scripts/build.js",
|
"build:playground": "vite build --config build.vite.config.ts --mode playground",
|
||||||
"build:lib": "vite build --mode lib",
|
"build:page:admin": "vite build --config build.vite.config.ts --mode page:admin",
|
||||||
"dev:html": "vite --port 8078"
|
"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: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"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@tmagic/cli": "workspace:*",
|
||||||
|
"@tmagic/core": "1.1.0-beta.5",
|
||||||
|
"@tmagic/ui-react": "1.1.0-beta.5",
|
||||||
"@tmagic/schema": "1.1.0-beta.5",
|
"@tmagic/schema": "1.1.0-beta.5",
|
||||||
"@tmagic/stage": "1.1.0-beta.5",
|
"@tmagic/stage": "1.1.0-beta.5",
|
||||||
|
"@tmagic/utils": "1.1.0-beta.5",
|
||||||
|
"axios": "^0.25.0",
|
||||||
|
"terser": "^5.14.2",
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
"react-dom": "^17.0.2"
|
"react-dom": "^17.0.2"
|
||||||
},
|
},
|
||||||
@ -24,6 +34,7 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/react": "^17.0.37",
|
"@types/react": "^17.0.37",
|
||||||
"@types/react-dom": "^17.0.11",
|
"@types/react-dom": "^17.0.11",
|
||||||
|
"@vitejs/plugin-legacy": "^2.0.0",
|
||||||
"@vitejs/plugin-react-refresh": "^1.3.1",
|
"@vitejs/plugin-react-refresh": "^1.3.1",
|
||||||
"recast": "^0.20.4",
|
"recast": "^0.20.4",
|
||||||
"typescript": "^4.7.4",
|
"typescript": "^4.7.4",
|
||||||
|
|||||||
@ -1,13 +0,0 @@
|
|||||||
<!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>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="root"></div>
|
|
||||||
<script type="module" src="/src/page/main.tsx"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -22,8 +22,6 @@ import Core from '@tmagic/core';
|
|||||||
import type { Page } from '@tmagic/schema';
|
import type { Page } from '@tmagic/schema';
|
||||||
import { AppContent } from '@tmagic/ui-react';
|
import { AppContent } from '@tmagic/ui-react';
|
||||||
|
|
||||||
import './App.css';
|
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const app = useContext<Core | undefined>(AppContent);
|
const app = useContext<Core | undefined>(AppContent);
|
||||||
|
|
||||||
31
runtime/react/page/index.html
Normal file
31
runtime/react/page/index.html
Normal file
@ -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>
|
||||||
@ -24,7 +24,8 @@ import type { MApp } from '@tmagic/schema';
|
|||||||
import { AppContent } from '@tmagic/ui-react';
|
import { AppContent } from '@tmagic/ui-react';
|
||||||
import { getUrlParam } from '@tmagic/utils';
|
import { getUrlParam } from '@tmagic/utils';
|
||||||
|
|
||||||
import entry from '../comp-entry';
|
import components from '../.tmagic/comp-entry';
|
||||||
|
import plugins from '../.tmagic/plugin-entry';
|
||||||
|
|
||||||
import App from './App';
|
import App from './App';
|
||||||
declare global {
|
declare global {
|
||||||
@ -54,7 +55,10 @@ const app = new Core({
|
|||||||
curPage: getUrlParam('page'),
|
curPage: getUrlParam('page'),
|
||||||
});
|
});
|
||||||
|
|
||||||
Object.keys(entry.components).forEach((type: string) => app.registerComponent(type, entry.components[type]));
|
Object.keys(components).forEach((type: string) => app.registerComponent(type, components[type]));
|
||||||
|
Object.values(plugins).forEach((plugin: any) => {
|
||||||
|
plugin.install(app);
|
||||||
|
});
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
@ -1,27 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" style="font-size: 100px">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>React Playground</title>
|
|
||||||
<style>
|
|
||||||
html{-ms-overflow-style: none; overflow: -moz-scrollbars-none;}
|
|
||||||
html,body {height: 100%; margin: 0; padding: 0}
|
|
||||||
body {
|
|
||||||
height: fit-content;
|
|
||||||
min-height: 100%;
|
|
||||||
}
|
|
||||||
html::-webkit-scrollbar, .body::-webkit-scrollbar { width: 0 !important }
|
|
||||||
.magic-ui-page {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body style="font-size: 14px">
|
|
||||||
|
|
||||||
<div id="root"></div>
|
|
||||||
|
|
||||||
<script type="module" src="/src/playground/main.tsx"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -19,11 +19,9 @@
|
|||||||
import React, { useContext } from 'react';
|
import React, { useContext } from 'react';
|
||||||
|
|
||||||
import Core from '@tmagic/core';
|
import Core from '@tmagic/core';
|
||||||
import type { Page } from '@tmagic/schema';
|
import type { MPage } from '@tmagic/schema';
|
||||||
import { AppContent } from '@tmagic/ui-react';
|
import { AppContent } from '@tmagic/ui-react';
|
||||||
|
|
||||||
import './App.css';
|
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const app = useContext<Core | undefined>(AppContent);
|
const app = useContext<Core | undefined>(AppContent);
|
||||||
|
|
||||||
@ -33,7 +31,7 @@ function App() {
|
|||||||
|
|
||||||
const MagicUiPage = app.resolveComponent('page');
|
const MagicUiPage = app.resolveComponent('page');
|
||||||
|
|
||||||
return <MagicUiPage config={app?.page?.data as Page}></MagicUiPage>;
|
return <MagicUiPage config={app?.page?.data as MPage}></MagicUiPage>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
46
runtime/react/playground/index.html
Normal file
46
runtime/react/playground/index.html
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" style="font-size: 100px">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>React Playground</title>
|
||||||
|
<style>
|
||||||
|
html,body {margin: 0; padding: 0}
|
||||||
|
|
||||||
|
.magic-ui-page {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
#app {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
position: relative;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.magic-ui-container {
|
||||||
|
background-color: rgba(136, 136, 136, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-area {
|
||||||
|
background-color: rgba(51, 153, 255, 0.5) !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body style="font-size: 14px">
|
||||||
|
|
||||||
|
<div id="root"></div>
|
||||||
|
|
||||||
|
<script type="module" src="./main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
121
runtime/react/playground/main.tsx
Normal file
121
runtime/react/playground/main.tsx
Normal file
@ -0,0 +1,121 @@
|
|||||||
|
/*
|
||||||
|
* 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 type { RemoveData, SortEventData, UpdateData } from '@tmagic/stage';
|
||||||
|
import { AppContent } from '@tmagic/ui-react';
|
||||||
|
|
||||||
|
import components from '../.tmagic/comp-entry';
|
||||||
|
import plugins from '../.tmagic/plugin-entry';
|
||||||
|
|
||||||
|
import App from './App';
|
||||||
|
|
||||||
|
const app = new Core({
|
||||||
|
config: {},
|
||||||
|
platform: 'editor',
|
||||||
|
});
|
||||||
|
|
||||||
|
let curPageId = '';
|
||||||
|
|
||||||
|
const updateConfig = (root: MApp) => {
|
||||||
|
app?.setConfig(root);
|
||||||
|
renderDom();
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderDom = () => {
|
||||||
|
ReactDOM.render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<AppContent.Provider value={app}>
|
||||||
|
<App />
|
||||||
|
</AppContent.Provider>
|
||||||
|
</React.StrictMode>,
|
||||||
|
document.getElementById('root'),
|
||||||
|
);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
// @ts-ignore
|
||||||
|
window.magic.onPageElUpdate(document.querySelector('.magic-ui-page'));
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const operations = {
|
||||||
|
getApp() {
|
||||||
|
return app;
|
||||||
|
},
|
||||||
|
|
||||||
|
updateRootConfig(root: MApp) {
|
||||||
|
console.log('update root config', root);
|
||||||
|
app?.setConfig(root);
|
||||||
|
},
|
||||||
|
|
||||||
|
updatePageId(id: string) {
|
||||||
|
console.log('update page id', id);
|
||||||
|
curPageId = id;
|
||||||
|
app?.setPage(curPageId);
|
||||||
|
renderDom();
|
||||||
|
},
|
||||||
|
|
||||||
|
getSnapElementQuerySelector() {
|
||||||
|
return '[class*=magic-ui][id]';
|
||||||
|
},
|
||||||
|
|
||||||
|
select(id: string) {
|
||||||
|
console.log('select config', id);
|
||||||
|
const el = document.getElementById(id);
|
||||||
|
if (el) return el;
|
||||||
|
// 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
resolve(document.getElementById(id));
|
||||||
|
}, 0);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
add({ root }: UpdateData) {
|
||||||
|
console.log('add config', root);
|
||||||
|
updateConfig(root);
|
||||||
|
},
|
||||||
|
|
||||||
|
update({ root }: UpdateData) {
|
||||||
|
console.log('update config', root);
|
||||||
|
updateConfig(root);
|
||||||
|
},
|
||||||
|
|
||||||
|
sortNode({ root }: SortEventData) {
|
||||||
|
console.log('sort config', root);
|
||||||
|
updateConfig(root);
|
||||||
|
},
|
||||||
|
|
||||||
|
remove({ root }: RemoveData) {
|
||||||
|
console.log('remove config', root);
|
||||||
|
updateConfig(root);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
Object.keys(components).forEach((type: string) => app.registerComponent(type, components[type]));
|
||||||
|
|
||||||
|
Object.values(plugins).forEach((plugin: any) => {
|
||||||
|
plugin.install(app);
|
||||||
|
});
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
window.magic?.onRuntimeReady(operations);
|
||||||
@ -1,22 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
const generateEntry = require('../../scripts/generateEntry');
|
|
||||||
const units = require('./units');
|
|
||||||
|
|
||||||
generateEntry({ type: 'build', componentFileAffix: '.tsx', units, workingDir: __dirname });
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
const generateEntry = require('../../scripts/generateEntry');
|
|
||||||
const units = require('./units');
|
|
||||||
|
|
||||||
generateEntry({ type: 'dev', componentFileAffix: '.tsx', units, workingDir: __dirname });
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
const path = require('path');
|
|
||||||
|
|
||||||
const units = {
|
|
||||||
ui: path.join(__dirname, '../../../packages/ui-react/src/index.ts'),
|
|
||||||
};
|
|
||||||
|
|
||||||
module.exports = units;
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
html,
|
|
||||||
body,
|
|
||||||
#root {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#root {
|
|
||||||
position: relative;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#root::-webkit-scrollbar {
|
|
||||||
width: 0 !important;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
html,
|
|
||||||
body,
|
|
||||||
#app {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
position: relative;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.magic-ui-container {
|
|
||||||
background-color: rgba(136, 136, 136, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-area {
|
|
||||||
background-color: rgba(51, 153, 255, 0.5) !important;
|
|
||||||
}
|
|
||||||
@ -1,119 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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 type { RemoveData, SortEventData, UpdateData } from '@tmagic/stage';
|
|
||||||
import { AppContent } from '@tmagic/ui-react';
|
|
||||||
import { getUrlParam } from '@tmagic/utils';
|
|
||||||
|
|
||||||
import App from './App';
|
|
||||||
|
|
||||||
import('../comp-entry').then(() => {
|
|
||||||
const { components } = window.magicPresetComponents;
|
|
||||||
|
|
||||||
const app = new Core({
|
|
||||||
config: {},
|
|
||||||
curPage: getUrlParam('page'),
|
|
||||||
});
|
|
||||||
|
|
||||||
let curPageId = '';
|
|
||||||
|
|
||||||
const updateConfig = (root: MApp) => {
|
|
||||||
app?.setConfig(root);
|
|
||||||
renderDom();
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderDom = () => {
|
|
||||||
ReactDOM.render(
|
|
||||||
<React.StrictMode>
|
|
||||||
<AppContent.Provider value={app}>
|
|
||||||
<App />
|
|
||||||
</AppContent.Provider>
|
|
||||||
</React.StrictMode>,
|
|
||||||
document.getElementById('root'),
|
|
||||||
);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
// @ts-ignore
|
|
||||||
window.magic.onPageElUpdate(document.querySelector('.magic-ui-page'));
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const operations = {
|
|
||||||
getApp() {
|
|
||||||
return app;
|
|
||||||
},
|
|
||||||
|
|
||||||
updateRootConfig(root: MApp) {
|
|
||||||
console.log('update root config', root);
|
|
||||||
app?.setConfig(root);
|
|
||||||
},
|
|
||||||
|
|
||||||
updatePageId(id: string) {
|
|
||||||
console.log('update page id', id);
|
|
||||||
curPageId = id;
|
|
||||||
app?.setPage(curPageId);
|
|
||||||
renderDom();
|
|
||||||
},
|
|
||||||
|
|
||||||
getSnapElementQuerySelector() {
|
|
||||||
return '[class*=magic-ui][id]';
|
|
||||||
},
|
|
||||||
|
|
||||||
select(id: string) {
|
|
||||||
console.log('select config', id);
|
|
||||||
const el = document.getElementById(id);
|
|
||||||
if (el) return el;
|
|
||||||
// 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
resolve(document.getElementById(id));
|
|
||||||
}, 0);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
add({ root }: UpdateData) {
|
|
||||||
console.log('add config', root);
|
|
||||||
updateConfig(root);
|
|
||||||
},
|
|
||||||
|
|
||||||
update({ root }: UpdateData) {
|
|
||||||
console.log('update config', root);
|
|
||||||
updateConfig(root);
|
|
||||||
},
|
|
||||||
|
|
||||||
sortNode({ root }: SortEventData) {
|
|
||||||
console.log('sort config', root);
|
|
||||||
updateConfig(root);
|
|
||||||
},
|
|
||||||
|
|
||||||
remove({ root }: RemoveData) {
|
|
||||||
console.log('remove config', root);
|
|
||||||
updateConfig(root);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
Object.keys(components).forEach((type: string) => app.registerComponent(type, components[type]));
|
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
window.magic?.onRuntimeReady(operations);
|
|
||||||
});
|
|
||||||
1
runtime/react/src/vite-env.d.ts
vendored
1
runtime/react/src/vite-env.d.ts
vendored
@ -1 +0,0 @@
|
|||||||
/// <reference types="vite/client" />
|
|
||||||
8
runtime/react/tmagic.config.ts
Normal file
8
runtime/react/tmagic.config.ts
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import path from 'path';
|
||||||
|
|
||||||
|
import { defineConfig } from '@tmagic/cli';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
packages: [path.join(__dirname, '../../packages/ui-react')],
|
||||||
|
componentFileAffix: '.tsx',
|
||||||
|
});
|
||||||
@ -20,5 +20,5 @@
|
|||||||
"@tmagic/*": ["../packages/*"],
|
"@tmagic/*": ["../packages/*"],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
"include": ["./src"]
|
"include": ["./page", "./playground"]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,95 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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 path from 'path';
|
|
||||||
|
|
||||||
import { defineConfig, loadEnv } from 'vite';
|
|
||||||
import reactRefresh from '@vitejs/plugin-react-refresh';
|
|
||||||
|
|
||||||
export default defineConfig(({ command, mode }) => {
|
|
||||||
const { WATCH_INCLUDE = '', BASE, OUT_DIR } = loadEnv(mode, process.cwd(), '');
|
|
||||||
const libInput = {
|
|
||||||
config: './src/config-entry.ts',
|
|
||||||
value: './src/value-entry.ts',
|
|
||||||
event: './src/event-entry.ts',
|
|
||||||
};
|
|
||||||
|
|
||||||
const htmlInput = {
|
|
||||||
page: './page.html',
|
|
||||||
playground: './playground.html',
|
|
||||||
};
|
|
||||||
|
|
||||||
const devInput = mode === 'lib' ? libInput : htmlInput;
|
|
||||||
|
|
||||||
const buildConfig = {
|
|
||||||
outDir: OUT_DIR || 'dist',
|
|
||||||
|
|
||||||
sourcemap: true,
|
|
||||||
|
|
||||||
cssCodeSplit: false,
|
|
||||||
|
|
||||||
rollupOptions: {
|
|
||||||
input:
|
|
||||||
command === 'build' && mode !== 'lib'
|
|
||||||
? {
|
|
||||||
...htmlInput,
|
|
||||||
...libInput,
|
|
||||||
}
|
|
||||||
: devInput,
|
|
||||||
output: {
|
|
||||||
entryFileNames: 'assets/[name].js',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
if (mode === 'lib') {
|
|
||||||
return {
|
|
||||||
build: {
|
|
||||||
...buildConfig,
|
|
||||||
watch: {
|
|
||||||
include: WATCH_INCLUDE.split(','),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
base: BASE || '/tmagic-editor/playground/runtime/react',
|
|
||||||
|
|
||||||
plugins: [reactRefresh()],
|
|
||||||
|
|
||||||
resolve: {
|
|
||||||
alias: [
|
|
||||||
{ find: /^react$/, replacement: path.join(__dirname, 'node_modules/react/index.js') },
|
|
||||||
{ find: /^react-dom$/, replacement: path.join(__dirname, 'node_modules/react-dom/index.js') },
|
|
||||||
{ find: /^@tmagic\/ui-react/, replacement: path.join(__dirname, '../../packages/ui-react/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') },
|
|
||||||
{ find: /^@tmagic\/schema/, replacement: path.join(__dirname, '../../packages/schema/src/index.ts') },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
|
|
||||||
publicDir: command === 'serve' ? 'dist' : 'public',
|
|
||||||
|
|
||||||
server: {
|
|
||||||
host: '0.0.0.0',
|
|
||||||
},
|
|
||||||
|
|
||||||
build: buildConfig,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
@ -1,430 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
const { execSync } = require('child_process');
|
|
||||||
const { exit } = require('process');
|
|
||||||
const fs = require('fs');
|
|
||||||
const path = require('path');
|
|
||||||
|
|
||||||
const { parse, prettyPrint, types } = require('recast');
|
|
||||||
const n = types.namedTypes;
|
|
||||||
|
|
||||||
const pluginList = {};
|
|
||||||
let cwd = __dirname;
|
|
||||||
const pageRoot = () => path.resolve(cwd, '..');
|
|
||||||
const entryPath = () => path.resolve(pageRoot(), './src');
|
|
||||||
const defineTypes = {
|
|
||||||
component: 'component',
|
|
||||||
config: 'config',
|
|
||||||
value: 'value',
|
|
||||||
event: 'event',
|
|
||||||
};
|
|
||||||
|
|
||||||
const makeCamelCase = function (name) {
|
|
||||||
if (typeof name !== 'string') {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
return name.replace(/-(\w)/g, ($0, $1) => $1.toUpperCase());
|
|
||||||
};
|
|
||||||
|
|
||||||
const parseEntry = function ({ ast, package, indexPath }) {
|
|
||||||
if (!ast.program) {
|
|
||||||
console.log(`${package} 入口文件不合法`);
|
|
||||||
return exit(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
const tokens = getASTTokenByTraverse({ ast, indexPath });
|
|
||||||
let { config, value, event } = tokens;
|
|
||||||
const { importComponentSource, importComponentToken } = tokens;
|
|
||||||
|
|
||||||
if (!config) {
|
|
||||||
console.log(`${package} ${defineTypes.config} 文件声明不合法`);
|
|
||||||
return exit(1);
|
|
||||||
}
|
|
||||||
if (!value) {
|
|
||||||
console.log(`${package} ${defineTypes.value} 文件声明不合法`);
|
|
||||||
return exit(1);
|
|
||||||
}
|
|
||||||
if (!event) {
|
|
||||||
// event 非必须，不需要 exit
|
|
||||||
console.log(`${package} ${defineTypes.event} 文件声明缺失`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const findIndex = importComponentToken.indexOf(exportDefaultToken);
|
|
||||||
let component = '';
|
|
||||||
if (findIndex > -1) {
|
|
||||||
component = path.resolve(path.dirname(indexPath), importComponentSource[findIndex]);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!component) {
|
|
||||||
console.log(`${package} ${defineTypes.component} 文件声明不合法`);
|
|
||||||
return exit(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
const reg = /^.*[/\\]node_modules[/\\](.*)/;
|
|
||||||
[, config] = config.match(reg) || [, config];
|
|
||||||
[, value] = value.match(reg) || [, value];
|
|
||||||
[, component] = component.match(reg) || [, component];
|
|
||||||
[, event] = event.match(reg) || [, event];
|
|
||||||
|
|
||||||
return {
|
|
||||||
config,
|
|
||||||
value,
|
|
||||||
component,
|
|
||||||
event,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const getASTTokenByTraverse = ({ ast, indexPath }) => {
|
|
||||||
let config = '';
|
|
||||||
let value = '';
|
|
||||||
let event = '';
|
|
||||||
const importComponentToken = [];
|
|
||||||
const importComponentSource = [];
|
|
||||||
|
|
||||||
types.visit(ast, {
|
|
||||||
visitImportDeclaration(p) {
|
|
||||||
const { node } = p;
|
|
||||||
const { specifiers, source } = node;
|
|
||||||
|
|
||||||
importComponentToken.push(specifiers[0].local.name);
|
|
||||||
importComponentSource.push(source.value);
|
|
||||||
|
|
||||||
this.traverse(p);
|
|
||||||
},
|
|
||||||
visitExportNamedDeclaration(p) {
|
|
||||||
const { node } = p;
|
|
||||||
const { specifiers, source } = node;
|
|
||||||
const name = specifiers[0].exported.name.toLowerCase();
|
|
||||||
|
|
||||||
if (name === defineTypes.value) {
|
|
||||||
value = path.resolve(path.dirname(indexPath), source.value);
|
|
||||||
} else if (name === defineTypes.config) {
|
|
||||||
config = path.resolve(path.dirname(indexPath), source.value);
|
|
||||||
} else if (name === defineTypes.event) {
|
|
||||||
event = path.resolve(path.dirname(indexPath), source.value);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.traverse(p);
|
|
||||||
},
|
|
||||||
visitExportDefaultDeclaration(p) {
|
|
||||||
const { node } = p;
|
|
||||||
const { declaration } = node;
|
|
||||||
exportDefaultToken = declaration.name;
|
|
||||||
this.traverse(p);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
config,
|
|
||||||
value,
|
|
||||||
event,
|
|
||||||
importComponentToken,
|
|
||||||
importComponentSource,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const generateEntry = function ({ entries, type = 'build', componentFileAffix }) {
|
|
||||||
const commonArgs = { entries, componentFileAffix };
|
|
||||||
|
|
||||||
generateEntryFile({ entryFile: 'comp-entry.ts', type: defineTypes.component, ...commonArgs });
|
|
||||||
if (type === 'build') {
|
|
||||||
generateEntryFile({ entryFile: 'config-entry.ts', type: defineTypes.config, ...commonArgs });
|
|
||||||
generateEntryFile({ entryFile: 'value-entry.ts', type: defineTypes.value, ...commonArgs });
|
|
||||||
generateEntryFile({ entryFile: 'event-entry.ts', type: defineTypes.event, ...commonArgs });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const generateEntryFile = function ({ entries, entryFile, type, componentFileAffix }) {
|
|
||||||
const list = [];
|
|
||||||
const importDeclarations = [];
|
|
||||||
|
|
||||||
entries.forEach((entry) => {
|
|
||||||
if (!entry.entry[type]) return;
|
|
||||||
|
|
||||||
const name = makeCamelCase(entry.type);
|
|
||||||
importDeclarations.push(
|
|
||||||
`import ${name} from '${entry.entry[type]}${
|
|
||||||
type === defineTypes.component && !entry.entry[type].includes(componentFileAffix) ? componentFileAffix : ''
|
|
||||||
}'`,
|
|
||||||
);
|
|
||||||
list.push(`'${entry.type}': ${name}`);
|
|
||||||
});
|
|
||||||
|
|
||||||
const exportToken = `${type}s`;
|
|
||||||
const capitalToken = exportToken.charAt(0).toUpperCase() + exportToken.slice(1);
|
|
||||||
let jsString = '';
|
|
||||||
let exportData = `window.magicPreset${capitalToken} = ${exportToken};`;
|
|
||||||
|
|
||||||
if (type === defineTypes.component) {
|
|
||||||
const pList = [];
|
|
||||||
|
|
||||||
Object.keys(pluginList).forEach((pluginType) => {
|
|
||||||
const name = makeCamelCase(pluginType);
|
|
||||||
importDeclarations.push(`import ${name} from '${pluginList[pluginType]}'`);
|
|
||||||
pList.push(`'${pluginType}': ${name}`);
|
|
||||||
});
|
|
||||||
|
|
||||||
exportData = `const plugins = {${pList.join(',')}};
|
|
||||||
const entry = {${exportToken}, plugins};
|
|
||||||
window.magicPreset${capitalToken} = entry;
|
|
||||||
export default entry;`;
|
|
||||||
|
|
||||||
jsString += `${importDeclarations.join(';')}
|
|
||||||
const ${exportToken}: Record<string, any> = {
|
|
||||||
${list.join(',')}
|
|
||||||
}
|
|
||||||
${exportData}`;
|
|
||||||
} else {
|
|
||||||
jsString += `${importDeclarations.join(';')}
|
|
||||||
(function(){
|
|
||||||
const ${exportToken}: Record<string, any> = {
|
|
||||||
${list.join(',')}
|
|
||||||
}
|
|
||||||
${exportData}
|
|
||||||
})()`;
|
|
||||||
}
|
|
||||||
|
|
||||||
fs.writeFileSync(
|
|
||||||
path.resolve(entryPath(), entryFile),
|
|
||||||
// window下需要将路径中\转换成/
|
|
||||||
prettyPrint(parse(jsString.replace(/\\/g, '/'), { parser: require('recast/parsers/typescript') }), {
|
|
||||||
tabWidth: 2,
|
|
||||||
trailingComma: true,
|
|
||||||
quote: 'single',
|
|
||||||
}).code,
|
|
||||||
{ encoding: 'utf-8' },
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const installPackage = function (package) {
|
|
||||||
try {
|
|
||||||
// window下需要将路径中\转换成/
|
|
||||||
execSync(`node -e "require.resolve('${package.replace(/\\/g, '/')}')"`, { stdio: 'ignore' });
|
|
||||||
} catch (e) {
|
|
||||||
execSync(`npm install ${package}`, {
|
|
||||||
stdio: 'inherit',
|
|
||||||
cwd: pageRoot(),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getIndexPath = function (entry) {
|
|
||||||
if (fs.lstatSync(entry).isFile()) {
|
|
||||||
return entry;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (fs.lstatSync(entry).isDirectory()) {
|
|
||||||
const files = fs.readdirSync(entry);
|
|
||||||
const [index] = files.filter((file) => file.split('.')[0] === 'index');
|
|
||||||
|
|
||||||
return path.resolve(entry, index);
|
|
||||||
}
|
|
||||||
|
|
||||||
return entry;
|
|
||||||
};
|
|
||||||
|
|
||||||
const typeComponent = 1;
|
|
||||||
const typePlugin = 2;
|
|
||||||
const typeComponentPackage = 3;
|
|
||||||
|
|
||||||
const getComponentPackageImports = function ({ result, properties, indexPath, importDeclarations }) {
|
|
||||||
result.type = typeComponentPackage;
|
|
||||||
result.imports = [];
|
|
||||||
|
|
||||||
properties.forEach((property) => {
|
|
||||||
const [propertyMatch] = importDeclarations.filter((i) => {
|
|
||||||
const [specifier] = i.specifiers;
|
|
||||||
|
|
||||||
if (n.ImportDefaultSpecifier.check(specifier) && specifier.local.name === property.value.name) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
|
|
||||||
if (propertyMatch) {
|
|
||||||
result.imports.push({
|
|
||||||
type: property.key.name,
|
|
||||||
name: propertyMatch.specifiers[0].local.name,
|
|
||||||
indexPath: getIndexPath(path.resolve(path.dirname(indexPath), propertyMatch.source.value)),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return result;
|
|
||||||
};
|
|
||||||
|
|
||||||
const isPlugin = function (properties) {
|
|
||||||
const [match] = properties.filter((property) => property.key.name === 'install');
|
|
||||||
|
|
||||||
return !!match;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1 判断是否组件&插件包
|
|
||||||
* 2 判断是组件还是插件
|
|
||||||
* 3 组件插件分开写入 comp-entry.ts
|
|
||||||
* @param {*} ast
|
|
||||||
* @param {String} indexPath
|
|
||||||
* @return {Object} { type: '', imports: [] } 返回传入组件的类型。如果是组件包，imports 中包含所有子组件的入口文件路径
|
|
||||||
*/
|
|
||||||
const typeAssertion = function ({ ast, indexPath }) {
|
|
||||||
const result = {
|
|
||||||
type: '',
|
|
||||||
imports: [],
|
|
||||||
};
|
|
||||||
const { importDeclarations, variableDeclarations, exportDefaultName, exportDefaultNode } =
|
|
||||||
getAssertionTokenByTraverse(ast);
|
|
||||||
|
|
||||||
if (exportDefaultName) {
|
|
||||||
importDeclarations.every((node) => {
|
|
||||||
const [specifier] = node.specifiers;
|
|
||||||
|
|
||||||
// 从 import 语句中找到 export default 的变量，认为是组件
|
|
||||||
if (n.ImportDefaultSpecifier.check(specifier) && specifier.local.name === exportDefaultName) {
|
|
||||||
result.type = typeComponent;
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
|
|
||||||
if (result.type) return result;
|
|
||||||
|
|
||||||
variableDeclarations.every((node) => {
|
|
||||||
const [variable] = node.declarations;
|
|
||||||
|
|
||||||
// 从声明变量语句中找到 export default 的变量，认为是组件包
|
|
||||||
if (
|
|
||||||
n.Identifier.check(variable.id) &&
|
|
||||||
variable.id.name === exportDefaultName &&
|
|
||||||
n.ObjectExpression.check(variable.init)
|
|
||||||
) {
|
|
||||||
if (isPlugin(variable.init.properties)) {
|
|
||||||
result.type = typePlugin;
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 从组件包声明中找到对应子组件入口文件
|
|
||||||
getComponentPackageImports({ result, properties: variable.init.properties, indexPath, importDeclarations });
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (exportDefaultNode) {
|
|
||||||
if (isPlugin(exportDefaultNode.properties)) {
|
|
||||||
result.type = typePlugin;
|
|
||||||
} else {
|
|
||||||
getComponentPackageImports({ result, properties: variable.init.properties, indexPath, importDeclarations });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return result;
|
|
||||||
};
|
|
||||||
|
|
||||||
const getAssertionTokenByTraverse = (ast) => {
|
|
||||||
const importDeclarations = [];
|
|
||||||
const variableDeclarations = [];
|
|
||||||
let exportDefaultName = '';
|
|
||||||
let exportDefaultNode = undefined;
|
|
||||||
|
|
||||||
types.visit(ast, {
|
|
||||||
visitImportDeclaration(p) {
|
|
||||||
importDeclarations.push(p.node);
|
|
||||||
this.traverse(p);
|
|
||||||
},
|
|
||||||
visitVariableDeclaration(p) {
|
|
||||||
variableDeclarations.push(p.node);
|
|
||||||
this.traverse(p);
|
|
||||||
},
|
|
||||||
visitExportDefaultDeclaration(p) {
|
|
||||||
const { node } = p;
|
|
||||||
const { declaration } = node;
|
|
||||||
|
|
||||||
// 导出的是变量名
|
|
||||||
if (n.Identifier.check(declaration)) {
|
|
||||||
exportDefaultName = declaration.name;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 导出的是对象的字面量
|
|
||||||
if (n.ObjectExpression.check(declaration)) {
|
|
||||||
exportDefaultNode = declaration;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.traverse(p);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
importDeclarations,
|
|
||||||
variableDeclarations,
|
|
||||||
exportDefaultName,
|
|
||||||
exportDefaultNode,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const start = function ({ type, componentFileAffix, units, workingDir }) {
|
|
||||||
cwd = workingDir;
|
|
||||||
const entries = [];
|
|
||||||
|
|
||||||
Object.keys(units).forEach((componentType) => {
|
|
||||||
const package = units[componentType];
|
|
||||||
|
|
||||||
installPackage(package);
|
|
||||||
|
|
||||||
const indexPath = require.resolve(package);
|
|
||||||
const indexCode = fs.readFileSync(indexPath, { encoding: 'utf-8', flag: 'r' });
|
|
||||||
const ast = parse(indexCode, { parser: require('recast/parsers/typescript') });
|
|
||||||
const result = typeAssertion({ ast, indexPath });
|
|
||||||
|
|
||||||
if (result.type === typeComponent) {
|
|
||||||
// 组件
|
|
||||||
const entry = parseEntry({ ast, package, indexPath });
|
|
||||||
entries.push({ type: componentType, entry });
|
|
||||||
} else if (result.type === typePlugin) {
|
|
||||||
// 插件
|
|
||||||
pluginList[componentType] = package;
|
|
||||||
} else if (result.type === typeComponentPackage) {
|
|
||||||
// 组件&插件包
|
|
||||||
result.imports.forEach((i) => {
|
|
||||||
const affixReg = new RegExp(`${componentFileAffix}$`);
|
|
||||||
if (affixReg.test(i.indexPath)) {
|
|
||||||
entries.push({ type: i.type, entry: { component: i.indexPath } });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const indexCode = fs.readFileSync(i.indexPath, { encoding: 'utf-8', flag: 'r' });
|
|
||||||
const ast = parse(indexCode);
|
|
||||||
if (typeAssertion({ ast, indexPath }).type === typePlugin) {
|
|
||||||
// 插件
|
|
||||||
pluginList[i.type] = i.indexPath;
|
|
||||||
} else {
|
|
||||||
// 组件
|
|
||||||
const entry = parseEntry({ ast, package: `${package} | ${i.name}`, indexPath: i.indexPath });
|
|
||||||
entries.push({ type: i.type, entry });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
generateEntry({ entries, type, componentFileAffix });
|
|
||||||
};
|
|
||||||
|
|
||||||
module.exports = start;
|
|
||||||
@ -1,2 +0,0 @@
|
|||||||
BASE=/runtime
|
|
||||||
OUT_DIR=admin-dist
|
|
||||||
6
runtime/vue2/.gitignore
vendored
6
runtime/vue2/.gitignore
vendored
@ -1,5 +1,3 @@
|
|||||||
comp-entry.ts
|
.tmagic
|
||||||
config-entry.ts
|
|
||||||
value-entry.ts
|
|
||||||
event-entry.ts
|
|
||||||
admin-dist
|
admin-dist
|
||||||
|
entry-dist
|
||||||
|
|||||||
76
runtime/vue2/build.vite.config.ts
Normal file
76
runtime/vue2/build.vite.config.ts
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
/*
|
||||||
|
* 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 path from 'path';
|
||||||
|
|
||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import legacy from '@vitejs/plugin-legacy';
|
||||||
|
import vue from '@vitejs/plugin-vue2';
|
||||||
|
// @ts-ignore
|
||||||
|
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);
|
||||||
|
return {
|
||||||
|
build: {
|
||||||
|
cssCodeSplit: false,
|
||||||
|
sourcemap: true,
|
||||||
|
minify: false,
|
||||||
|
target: 'esnext',
|
||||||
|
outDir: `entry-dist/${mode}-entry`,
|
||||||
|
|
||||||
|
lib: {
|
||||||
|
entry: `.tmagic/${mode}-entry.ts`,
|
||||||
|
name: `magicPreset${capitalToken}s`,
|
||||||
|
fileName: 'index',
|
||||||
|
formats: ['umd'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (['page', 'playground', 'page:admin', 'playground:admin'].includes(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}`);
|
||||||
|
return {
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
legacy({
|
||||||
|
targets: ['defaults', 'not IE 11'],
|
||||||
|
}),
|
||||||
|
externalGlobals({ vue: 'Vue' }, { exclude: [`./${type}/index.html`] }),
|
||||||
|
],
|
||||||
|
|
||||||
|
root: `./${type}/`,
|
||||||
|
|
||||||
|
base,
|
||||||
|
|
||||||
|
build: {
|
||||||
|
emptyOutDir: true,
|
||||||
|
sourcemap: true,
|
||||||
|
outDir,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {};
|
||||||
|
});
|
||||||
62
runtime/vue2/dev.vite.config.ts
Normal file
62
runtime/vue2/dev.vite.config.ts
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
/*
|
||||||
|
* 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 path from 'path';
|
||||||
|
|
||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import vue from '@vitejs/plugin-vue2';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
|
||||||
|
resolve: {
|
||||||
|
alias: [
|
||||||
|
{ find: /^vue$/, replacement: path.join(__dirname, 'node_modules/vue/dist/vue.esm.js') },
|
||||||
|
{ find: /^@tmagic\/utils/, replacement: path.join(__dirname, '../../packages/utils/src/index.ts') },
|
||||||
|
{ find: /^@tmagic\/core/, replacement: path.join(__dirname, '../../packages/core/src/index.ts') },
|
||||||
|
{ find: /^@tmagic\/schema/, replacement: path.join(__dirname, '../../packages/schema/src/index.ts') },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
root: './',
|
||||||
|
|
||||||
|
base: '/tmagic-editor/playground/runtime/vue2/',
|
||||||
|
|
||||||
|
publicDir: 'entry-dist',
|
||||||
|
|
||||||
|
server: {
|
||||||
|
host: '0.0.0.0',
|
||||||
|
port: 8078,
|
||||||
|
},
|
||||||
|
|
||||||
|
build: {
|
||||||
|
sourcemap: true,
|
||||||
|
|
||||||
|
cssCodeSplit: false,
|
||||||
|
|
||||||
|
rollupOptions: {
|
||||||
|
input: {
|
||||||
|
page: './page/index.html',
|
||||||
|
playground: './playground/index.html',
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
entryFileNames: 'assets/[name].js',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
@ -3,17 +3,27 @@
|
|||||||
"version": "1.1.0-beta.5",
|
"version": "1.1.0-beta.5",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev:vue2": "npm run entry && npm run build:lib & npm run dev:html",
|
"dev:vue2": "npm run build:libs && vite --config dev.vite.config.ts",
|
||||||
"build": "npm run entry && vite build",
|
"build": "npm run build:libs && npm run build:page && npm run build:playground",
|
||||||
"build:admin": "npm run entry && vite build --mode admin",
|
"build:admin": "npm run build:libs && npm run build:page:admin && npm run build:playground:admin",
|
||||||
"serve": "vite preview",
|
"build:page": "vite build --config build.vite.config.ts --mode page",
|
||||||
"entry": "node scripts/build.js",
|
"build:playground": "vite build --config build.vite.config.ts --mode playground",
|
||||||
"build:lib": "vite build --mode lib",
|
"build:page:admin": "vite build --config build.vite.config.ts --mode page:admin",
|
||||||
"dev:html": "vite --port 8078"
|
"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: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"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@tmagic/cli": "workspace:*",
|
||||||
|
"@tmagic/core": "1.1.0-beta.5",
|
||||||
|
"@tmagic/ui-vue2": "1.1.0-beta.5",
|
||||||
"@tmagic/schema": "1.1.0-beta.5",
|
"@tmagic/schema": "1.1.0-beta.5",
|
||||||
"@tmagic/stage": "1.1.0-beta.5",
|
"@tmagic/stage": "1.1.0-beta.5",
|
||||||
|
"@tmagic/utils": "1.1.0-beta.5",
|
||||||
|
"axios": "^0.25.0",
|
||||||
|
"terser": "^5.14.2",
|
||||||
"vue": "^2.7.4"
|
"vue": "^2.7.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@ -24,6 +34,7 @@
|
|||||||
"rollup-plugin-external-globals": "^0.6.1",
|
"rollup-plugin-external-globals": "^0.6.1",
|
||||||
"sass": "^1.35.1",
|
"sass": "^1.35.1",
|
||||||
"vite": "^3.0.4",
|
"vite": "^3.0.4",
|
||||||
|
"@vitejs/plugin-legacy": "^2.0.0",
|
||||||
"@vitejs/plugin-vue2": "^1.1.2",
|
"@vitejs/plugin-vue2": "^1.1.2",
|
||||||
"vue-template-compiler": "^2.7.4"
|
"vue-template-compiler": "^2.7.4"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,13 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Vue2 Page</title>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app"></div>
|
|
||||||
<script type="module" src="/src/page/main.ts"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -20,22 +20,3 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
html,
|
|
||||||
body,
|
|
||||||
#app {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
position: relative;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app::-webkit-scrollbar {
|
|
||||||
width: 0 !important;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
31
runtime/vue2/page/index.html
Normal file
31
runtime/vue2/page/index.html
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Vue2 Page</title>
|
||||||
|
<style>
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
#app {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
position: relative;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app::-webkit-scrollbar {
|
||||||
|
width: 0 !important;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="./main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -21,11 +21,12 @@ import Vue from 'vue';
|
|||||||
import Core from '@tmagic/core';
|
import Core from '@tmagic/core';
|
||||||
import { getUrlParam } from '@tmagic/utils';
|
import { getUrlParam } from '@tmagic/utils';
|
||||||
|
|
||||||
import entry from '../comp-entry';
|
import components from '../.tmagic/comp-entry';
|
||||||
import { getLocalConfig } from '../utils';
|
import plugins from '../.tmagic/plugin-entry';
|
||||||
import request from '../utils/request';
|
|
||||||
|
|
||||||
|
import request from './utils/request';
|
||||||
import AppComponent from './App.vue';
|
import AppComponent from './App.vue';
|
||||||
|
import { getLocalConfig } from './utils';
|
||||||
|
|
||||||
Vue.use(request);
|
Vue.use(request);
|
||||||
|
|
||||||
@ -34,13 +35,13 @@ const app = new Core({
|
|||||||
curPage: getUrlParam('page'),
|
curPage: getUrlParam('page'),
|
||||||
});
|
});
|
||||||
|
|
||||||
Object.keys(entry.components).forEach((type: string) => {
|
Object.keys(components).forEach((type: string) => {
|
||||||
const component = entry.components[type];
|
const component = components[type];
|
||||||
Vue.component(component.name, component);
|
Vue.component(component.name, component);
|
||||||
app.registerComponent(type, component);
|
app.registerComponent(type, component);
|
||||||
});
|
});
|
||||||
|
|
||||||
Object.values(entry.plugins).forEach((plugin: any) => {
|
Object.values(plugins).forEach((plugin: any) => {
|
||||||
Vue.use(plugin);
|
Vue.use(plugin);
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" style="font-size: 100px">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Vue2 Playground</title>
|
|
||||||
<style>
|
|
||||||
html{-ms-overflow-style: none; overflow: -moz-scrollbars-none;}
|
|
||||||
html,body {height: 100%; margin: 0; padding: 0}
|
|
||||||
body {
|
|
||||||
height: fit-content;
|
|
||||||
min-height: 100%;
|
|
||||||
}
|
|
||||||
html::-webkit-scrollbar, .body::-webkit-scrollbar { width: 0 !important }
|
|
||||||
.magic-ui-page {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body style="font-size: 14px">
|
|
||||||
|
|
||||||
<div id="app"></div>
|
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
|
||||||
|
|
||||||
<script type="module" src="/src/playground/main.ts"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
48
runtime/vue2/playground/index.html
Normal file
48
runtime/vue2/playground/index.html
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" style="font-size: 100px">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Vue2 Playground</title>
|
||||||
|
<style>
|
||||||
|
html,body {margin: 0; padding: 0}
|
||||||
|
|
||||||
|
.magic-ui-page {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
#app {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
position: relative;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.magic-ui-container {
|
||||||
|
background-color: rgba(136, 136, 136, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-area {
|
||||||
|
background-color: rgba(51, 153, 255, 0.5) !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body style="font-size: 14px">
|
||||||
|
|
||||||
|
<div id="app"></div>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
|
||||||
|
|
||||||
|
<script type="module" src="./main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -20,14 +20,12 @@ import Vue from 'vue';
|
|||||||
|
|
||||||
import App from './App.vue';
|
import App from './App.vue';
|
||||||
|
|
||||||
import('../comp-entry').then(() => {
|
Promise.all([import('../.tmagic/comp-entry'), import('../.tmagic/plugin-entry')]).then(([components, plugins]) => {
|
||||||
const { components, plugins } = window.magicPresetComponents;
|
Object.values(components.default).forEach((component: any) => {
|
||||||
|
|
||||||
Object.values(components).forEach((component: any) => {
|
|
||||||
Vue.component(component.name, component);
|
Vue.component(component.name, component);
|
||||||
});
|
});
|
||||||
|
|
||||||
Object.values(plugins).forEach((plugin: any) => {
|
Object.values(plugins.default).forEach((plugin: any) => {
|
||||||
Vue.use(plugin);
|
Vue.use(plugin);
|
||||||
});
|
});
|
||||||
|
|
||||||
6
runtime/vue2/playground/shims-vue.d.ts
vendored
Normal file
6
runtime/vue2/playground/shims-vue.d.ts
vendored
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
declare module '*.vue' {
|
||||||
|
import { DefineComponent } from 'vue';
|
||||||
|
|
||||||
|
const component: DefineComponent<{}, {}, any>;
|
||||||
|
export default component;
|
||||||
|
}
|
||||||
@ -1,22 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
const generateEntry = require('../../scripts/generateEntry');
|
|
||||||
const units = require('./units');
|
|
||||||
|
|
||||||
generateEntry({ type: 'build', componentFileAffix: '.vue', units, workingDir: __dirname });
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
const generateEntry = require('../../scripts/generateEntry');
|
|
||||||
const units = require('./units');
|
|
||||||
|
|
||||||
generateEntry({ type: 'dev', componentFileAffix: '.vue', units, workingDir: __dirname });
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
const path = require('path');
|
|
||||||
|
|
||||||
const units = {
|
|
||||||
ui: path.join(__dirname, '../../../packages/ui-vue2/src/index.ts'),
|
|
||||||
};
|
|
||||||
|
|
||||||
module.exports = units;
|
|
||||||
28
runtime/vue2/src/index.d.ts
vendored
28
runtime/vue2/src/index.d.ts
vendored
@ -1,28 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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 type { MApp } from '@tmagic/schema';
|
|
||||||
|
|
||||||
declare global {
|
|
||||||
interface Window {
|
|
||||||
magicDSL: MApp[];
|
|
||||||
magicPresetComponents: any;
|
|
||||||
magicPresetConfigs: any;
|
|
||||||
magicPresetValues: any;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
1
runtime/vue2/src/vite-env.d.ts
vendored
1
runtime/vue2/src/vite-env.d.ts
vendored
@ -1 +0,0 @@
|
|||||||
/// <reference types="vite/client" />
|
|
||||||
8
runtime/vue2/tmagic.config.ts
Normal file
8
runtime/vue2/tmagic.config.ts
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import path from 'path';
|
||||||
|
|
||||||
|
import { defineConfig } from '@tmagic/cli';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
packages: [path.join(__dirname, '../../packages/ui-vue2')],
|
||||||
|
componentFileAffix: '.vue',
|
||||||
|
});
|
||||||
@ -1,96 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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 path from 'path';
|
|
||||||
|
|
||||||
import { defineConfig, loadEnv } from 'vite';
|
|
||||||
import vue from '@vitejs/plugin-vue2';
|
|
||||||
// @ts-ignore
|
|
||||||
import externalGlobals from 'rollup-plugin-external-globals';
|
|
||||||
|
|
||||||
export default defineConfig(({ command, mode }) => {
|
|
||||||
const { WATCH_INCLUDE = '', BASE, OUT_DIR } = loadEnv(mode, process.cwd(), '');
|
|
||||||
const libInput = {
|
|
||||||
config: './src/config-entry.ts',
|
|
||||||
value: './src/value-entry.ts',
|
|
||||||
event: './src/event-entry.ts',
|
|
||||||
};
|
|
||||||
|
|
||||||
const htmlInput = {
|
|
||||||
page: './page.html',
|
|
||||||
playground: './playground.html',
|
|
||||||
};
|
|
||||||
|
|
||||||
const devInput = mode === 'lib' ? libInput : htmlInput;
|
|
||||||
|
|
||||||
const buildConfig = {
|
|
||||||
outDir: OUT_DIR || 'dist',
|
|
||||||
|
|
||||||
sourcemap: true,
|
|
||||||
|
|
||||||
cssCodeSplit: false,
|
|
||||||
|
|
||||||
rollupOptions: {
|
|
||||||
input:
|
|
||||||
command === 'build' && mode !== 'lib'
|
|
||||||
? {
|
|
||||||
...htmlInput,
|
|
||||||
...libInput,
|
|
||||||
}
|
|
||||||
: devInput,
|
|
||||||
output: {
|
|
||||||
entryFileNames: 'assets/[name].js',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
if (mode === 'lib') {
|
|
||||||
return {
|
|
||||||
build: {
|
|
||||||
...buildConfig,
|
|
||||||
watch: {
|
|
||||||
include: WATCH_INCLUDE.split(','),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
base: BASE || '/tmagic-editor/playground/runtime/vue2',
|
|
||||||
|
|
||||||
plugins: [vue(), externalGlobals({ vue: 'Vue' }, { exclude: ['page.html', 'playground.html'] })],
|
|
||||||
|
|
||||||
resolve: {
|
|
||||||
alias: [
|
|
||||||
{ find: /^vue$/, replacement: path.join(__dirname, 'node_modules/vue/dist/vue.esm.js') },
|
|
||||||
{ 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') },
|
|
||||||
{ find: /^@tmagic\/schema/, replacement: path.join(__dirname, '../../packages/schema/src/index.ts') },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
|
|
||||||
publicDir: command === 'serve' ? 'dist' : 'public',
|
|
||||||
|
|
||||||
server: {
|
|
||||||
host: '0.0.0.0',
|
|
||||||
},
|
|
||||||
|
|
||||||
build: buildConfig,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
@ -4,8 +4,8 @@
|
|||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "npm run build:libs && vite --config dev.vite.config.ts",
|
"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": "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 && npm run build:page:admin && npm run build:playground:admin",
|
||||||
"build:page": "vite build --config build.vite.config.ts --mode page",
|
"build:page": "vite build --config build.vite.config.ts --mode page",
|
||||||
"build:playground": "vite build --config build.vite.config.ts --mode playground",
|
"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:page:admin": "vite build --config build.vite.config.ts --mode page:admin",
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user