tencent / tmagic-editor Goto Github PK
View Code? Open in Web Editor NEWLicense: Other
License: Other
组件列表,展示根据当前编辑的模式进行加载相应组件,避免有些定制化组件在pc或者mobile下不支持的问题
比如,组件在pc模式下的显示控制,
专属于pc模式的组件,
专属于mobile模式下的组件
我看了里面的内容,在ui-vue2中的Component.vue中,会提示找不到config,导致page中无法渲染,
比如点击A组件,把选择的结果作为B组件的动作入参,好像没看到具体的参数配置
如题
如题
目前项目中需要用到多端发布能力,如果近期没有计划支持,可以简单介绍下实现思路吗?
ERR_PNPM_FETCH_403 GET https://registry-node.aliyun.com/org/1166572487057521/registry/comall/ansi-styles/-/ansi-styles-3.2.1.tgz: Forbidden - 403
请教一下关于packages/form使用,看了一下目前的相关文档没有说明和是否能直接在playground引入使用,谢谢
缺少 pm2.config.js
cd runtime/vue3目录下执行yarn build
报错,报错如下:
yarn run v1.22.17
$ node scripts/build.js && vite build
node:internal/modules/cjs/loader:936
throw err;
^
Error: Cannot find module 'recast'
yarn build
后会执行runtime/scripts/generateEntry.js
,脚本中的const { parse, prettyPrint, types } = require('recast');
命令所需依赖在子目录中,而在当前目录找不到该依赖导致报错
环境如下
CPU: M1 max
系统:MacOS Monterey
node: v16.13.2
npm: 8.1.2
yarn: 1.22.17
运行 yarn 安装依赖后 运行 yarn bootstrap 报错如下
lerna notice cli v4.0.0
lerna info Bootstrapping 14 packages
lerna info Installing external dependencies
lerna info hoist Installing hoisted dependencies into root
lerna info hoist Pruning hoisted dependencies
lerna info hoist Finished pruning hoisted dependencies
lerna ERR! npm install exited 1 in 'tmagic'
lerna ERR! npm install stderr:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vue
npm ERR! peer vue@">= 2.5 < 3" from @vue/[email protected]
npm ERR! node_modules/@vue/composition-api
npm ERR! @vue/composition-api@"1.0.5" from the root project
npm ERR! peerOptional @vue/composition-api@"^1.0.0-rc.1" from [email protected]
npm ERR! packages/editor/node_modules/element-plus/node_modules/@vueuse/core/node_modules/vue-demi
npm ERR! vue-demi@"*" from @vueuse/[email protected]
npm ERR! packages/editor/node_modules/element-plus/node_modules/@vueuse/core
npm ERR! @vueuse/core@"^8.2.6" from [email protected]
npm ERR! packages/editor/node_modules/element-plus
npm ERR! 1 more (@vueuse/shared)
npm ERR! 1 more (vue-demi)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @vue/vue3-jest@"^27.0.0-alpha.4" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/vue
npm ERR! peer vue@"^3.0.0-0" from @vue/[email protected]
npm ERR! node_modules/@vue/vue3-jest
npm ERR! @vue/vue3-jest@"^27.0.0-alpha.4" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
按照官网的快速开始,运行不起来
https://tencent.github.io/tmagic-editor/docs/guide/installation.html#引入-tmagic-editor
1. vue create myapp
2. npm install @tmagic/editor@latest -S npm install @tmagic/form@latest element-plus -S
3. 在 main.js 引入
4. npm run build
错误如下
error in ./node_modules/@tmagic/form/dist/tmagic-form.es.js
Module parse failed: Unexpected token (113:18)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/conc
epts#loaders
| }
| return config(mForm, {
> values: mForm?.initValues || {},
| model: props.model,
| parent: mForm?.parentValues || {},
@ ./src/main.ts 11:0-37 23:8-17
@ multi ./src/main.ts
错误消息:Field 'act_crypto_id' doesn't have a default value
npm run dev
。localhost:3001
中 web端页面,新建活动并编辑页面保存并发布。http://localhost:3001/publish/hello.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Magic App</title>
<script type="module" src="./uiconfig_hello.js"></script>
<script src="https://unpkg.com/vue@next/dist/vue.runtime.global.js"></script>
<script
type="module"
crossorigin
src="/runtime/vue3/assets/page.js"
></script>
<link rel="modulepreload" href="/runtime/vue3/assets/vendor.3f0d9265.js" />
<link
rel="modulepreload"
href="/runtime/vue3/assets/resetcss.b08d57c8.js"
/>
<link
rel="modulepreload"
href="/runtime/vue3/assets/plugin-vue_export-helper.3811b543.js"
/>
<link rel="modulepreload" href="/runtime/vue3/assets/components.js" />
<link rel="stylesheet" href="/runtime/vue3/assets/resetcss.52e41e6b.css" />
<link rel="stylesheet" href="/runtime/vue3/assets/page.6c73043b.css" />
<script>
Vue.config.productionTip = false;
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
window.magicUiconfig=[{type:"app",id:17,items:[{id:19,type:"page",name:"hello",title:"helloWorld",style:{height:"728",width:"375",position:"relative",layout:"absolute",left:0,top:0,right:"",bottom:"",backgroundImage:"",backgroundColor:"",backgroundRepeat:"no-repeat",backgroundSize:"100% 100%",color:"",fontSize:"",fontWeight:"",transform:{rotate:"",scale:""}},items:[{type:"text",id:"text_5222",style:{position:"absolute",width:"100",height:"auto",top:121.44186401367188,left:83.43206787109375,right:"",bottom:"",backgroundImage:"",backgroundColor:"",backgroundRepeat:"no-repeat",backgroundSize:"100% 100%",color:"",fontSize:"",fontWeight:"",transform:{rotate:"",scale:""}},name:"文本",text:"HelloWorld",multiple:!0,events:[],created:""}],layout:"absolute",events:[],created:""}],abTest:[]}];
我觉得可以把使用的数据库版本号,也写到对应的文档上
无论是根据hellowworld文档写出来的代码,还是复制教程代码(https://github.com/jia000/tmagic-tutorial)运行,点击组件的时候都报以下错误:
Uncaught (in promise) Error: app下不能添加组件
at Editor$1.add (editor.ts:297:13)
at async doAction (BaseService.ts:53:28)
add @ editor.ts:297
import MagicEditor from "@tmagic/editor";
Uncaught Error: Secure random number generation is not supported by this browser.
Use Chrome, Firefox or Internet Explorer 11
at oldBrowser (browser.js:12:9)
at generateUID (index.js:38:17)
at node_modules/_serialize-javascript@6.0.0@serialize-javascript/index.js (index.js:13:27)
at __require2 (chunk-JZING22Y.js?v=cd9a69f8:47:50)
at dep:@tmagic_editor:1:1
自定义事件“抽奖成功”(app.emit('draw:success', node)) --> 触发蒙层弹窗方法“打开蒙层”(成功) --> 再触发“中奖弹窗”组件自定义方法“弹窗警告”(失败)
原因调试定位到:
package/core/src/App.ts里面的bindEvents()方法判断响应方法的地方,204行:
if (typeof toNode.instance?.[methodName] === 'function') {
这里的toNode.instance 为 undefined,所以无法调用对应的方法:toNode.instance?.[methodName]
但是如果修改一下bindEvents() 里面代码,把上面的判断条件放到setTimeout里面调用toNode.instance?.[methodName]可以调用到。
现在问题是:
能不能在不修改package/core里面的代码情况下,实现自定义组件的自定义事件触发组件方法?
这是什么垃圾?组件还要自己写?不开源?被百度的amis甩十八条街
下面是错误提示新消息
> [email protected] playground
> lerna run dev --scope tmagic-playground --scope runtime-vue3 --parallel
lerna notice cli v4.0.0
lerna notice filter including ["tmagic-playground","runtime-vue3"]
lerna info filter [ 'tmagic-playground', 'runtime-vue3' ]
lerna info Executing command in 2 packages: "npm run dev"
runtime-vue3: > [email protected] dev
runtime-vue3: > npm run build && npm run serve
tmagic-playground: > [email protected] dev
tmagic-playground: > vite
runtime-vue3: > [email protected] build
runtime-vue3: > export NODE_OPTIONS=--openssl-legacy-provider && node scripts/build.js && vite build
runtime-vue3: node:internal/modules/cjs/loader:936
runtime-vue3: throw err;
runtime-vue3: ^
runtime-vue3: Error: Cannot find module 'recast'
runtime-vue3: Require stack:
runtime-vue3: - /Users/IvanChu/Documents/angularjs2_demo/tmagic-editor/runtime/scripts/generateEntry.js
runtime-vue3: - /Users/IvanChu/Documents/angularjs2_demo/tmagic-editor/runtime/vue3/scripts/build.js
runtime-vue3: at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
runtime-vue3: at Function.Module._load (node:internal/modules/cjs/loader:778:27)
runtime-vue3: at Module.require (node:internal/modules/cjs/loader:999:19)
runtime-vue3: at require (node:internal/modules/cjs/helpers:102:18)
runtime-vue3: at Object.<anonymous> (/Users/IvanChu/Documents/angularjs2_demo/tmagic-editor/runtime/scripts/generateEntry.js:24:39)
runtime-vue3: at Module._compile (node:internal/modules/cjs/loader:1097:14)
runtime-vue3: at Object.Module._extensions..js (node:internal/modules/cjs/loader:1151:10)
runtime-vue3: at Module.load (node:internal/modules/cjs/loader:975:32)
runtime-vue3: at Function.Module._load (node:internal/modules/cjs/loader:822:12)
runtime-vue3: at Module.require (node:internal/modules/cjs/loader:999:19) {
runtime-vue3: code: 'MODULE_NOT_FOUND',
runtime-vue3: requireStack: [
runtime-vue3: '/Users/IvanChu/Documents/angularjs2_demo/tmagic-editor/runtime/scripts/generateEntry.js',
runtime-vue3: '/Users/IvanChu/Documents/angularjs2_demo/tmagic-editor/runtime/vue3/scripts/build.js'
runtime-vue3: ]
runtime-vue3: }
runtime-vue3: Node.js v17.6.0
runtime-vue3: npm notice
你好,
看了Playground演示页面,页面被解析成了JSON格式,引擎能否支持导出.vue 或者 .jsx格式的web代码?
代码编辑功能使用频率本来不高(或者只需一个简单的json/js编辑器),build打包出来的文件大小,monaco-editor占比却非常高,包含各种无用语言的scripts文件。
前置操作:
报错信息:
[email protected] dev
nodemon
[nodemon] 1.19.4
[nodemon] to restart at any time, enter rs
[nodemon] watching dir(s): src/**/*
[nodemon] watching extensions: ts
[nodemon] starting ts-node -r tsconfig-paths/register src/index.ts --files
/Users/yuzf/walle/tmagic-editor/magic-admin/server/node_modules/ts-node/src/index.ts:434
return new TSError(diagnosticText, diagnosticCodes)
^
TSError: ⨯ Unable to compile TypeScript:
src/index.ts:26:9 - error TS2354: This syntax requires an imported helper but module 'tslib' cannot be found.
26 const { PORT } = process.env;
~~~~
at createTSError (/Users/yuzf/walle/tmagic-editor/magic-admin/server/node_modules/ts-node/src/index.ts:434:12)
at reportTSError (/Users/yuzf/walle/tmagic-editor/magic-admin/server/node_modules/ts-node/src/index.ts:438:19)
at getOutput (/Users/yuzf/walle/tmagic-editor/magic-admin/server/node_modules/ts-node/src/index.ts:578:36)
at Object.compile (/Users/yuzf/walle/tmagic-editor/magic-admin/server/node_modules/ts-node/src/index.ts:775:32)
at Module.m._compile (/Users/yuzf/walle/tmagic-editor/magic-admin/server/node_modules/ts-node/src/index.ts:858:43)
at Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Object.require.extensions.<computed> [as .ts] (/Users/yuzf/walle/tmagic-editor/magic-admin/server/node_modules/ts-node/src/index.ts:861:12)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
node 版本:v16.15.0
npm 版本:8.5.5
操作系统:Darwin MacBook-Pro.local 19.6.0 Darwin Kernel Version 19.6.0: Thu Oct 29 22:56:45 PDT 2020; root:xnu-6153.141.2.2~1/RELEASE_X86_64 x86_64
报错路径是:
src/main.ts:
import MagicEditor from '@tmagic/editor';
...
app.use(MagicEditor);
->
@tmagic/editor/dist/tmagic-editor.es.js:
import serialize from 'serialize-javascript';
->
serialize-javascript/index.js:
var randomBytes = require('randombytes');
->
randombytes/browser.js:
var Buffer = require('safe-buffer').Buffer
->Uncaught TypeError: Cannot read properties of undefined (reading 'from')
报错信息:
@tmagic_editor.js?v=c6492491:707 Uncaught TypeError: Cannot read properties of undefined (reading 'from')
Uncaught TypeError: Cannot read properties of undefined (reading 'from')
at node_modules/safe-buffer/index.js (@tmagic_editor.js?v=c6492491:707:16)
at __require2 (chunk-TMRFOBSY.js?v=9ed9471b:47:50)
at node_modules/randombytes/browser.js (@tmagic_editor.js?v=c6492491:764:18)
at __require2 (chunk-TMRFOBSY.js?v=9ed9471b:47:50)
at node_modules/serialize-javascript/index.js (@tmagic_editor.js?v=c6492491:798:23)
at __require2 (chunk-TMRFOBSY.js?v=9ed9471b:47:50)
at @tmagic_editor.js?v=c6492491:2893:43
本地启动runtime-vue2
修改如下:
package.json "playground": "lerna run dev --scope tmagic-playground --scope runtime-vue2 --parallel", 默认vue3 改为runtime-vue2
playground\src\pages\Editor.vue const RUNTIME_PATH = '/tmagic-editor/playground/runtime/vue2'; 默认vue3改为vue2
npm run playground 启动正常,页面中间的工作区域为空。
控制台报错如下:
GET http://localhost:8101/tmagic-editor/playground/runtime/vue2/assets/event.js net::ERR_ABORTED 404 (Not Found)
[Vue warn]: Error in data(): "TypeError: Cannot read properties of null (reading 'config')"
found in
--->
TypeError: Cannot read properties of null (reading 'config')
[Vue warn]: Error in render: "TypeError: e.display is not a function"
以上,麻烦看一下。
谢谢!
根据https://tencent.github.io/tmagic-editor/docs/tutorial/runtime.html教程搭建项目,runtime项目以打包产物的形式放入editor项目的public文件夹下,正常运行后,添加组件成功,但有以下现象:
1、新建页面后,滚动鼠标滚轮,报错:
Uncaught Error: page 未初始化
at StageMask.mouseWheelHandler (StageMask.ts:324:27)
2、焦点在页面的情况下,拖动,报错:
Uncaught (in promise) Error: 没有配置或者配置缺少id值
at Editor$1.update (editor.ts:391:28)
at dispatch (compose.ts:27:32)
at compose.ts:19:12
at doAction (BaseService.ts:53:34)
at BaseService.ts:147:37
at Editor$1.doTask (BaseService.ts:181:13)
at Editor$1.value (BaseService.ts:156:18)
at Editor$1.sort (editor.ts:464:16)
at dispatch (compose.ts:27:32)
at compose.ts:19:12
3、修改组件高度,能改变并且反馈到右侧样式面板,反之,没有反应
4、组件依旧如教程helloworld一般,不能拖动
执行的测试runtime: vue3 runtime
一直刷新页面,有时runtime下的vue3的playground App.vue的onMounted 会早于 StageRender里的 loadHandler执行,造成onMounted 时, window还未挂载magic, 导致不会执行onRuntimeReady, 导致页面有时空白.
另问一下: 为什么 runtime vue3里的playground里的App.vue ,要使用:
const componentUrl = '/tmagic-editor/playground/runtime/vue3/assets/components.js';
import(componentUrl)
为什么不像page的 app.vue里一直直接使用
import entry from '../comp-entry';
const { components, plugins } = entry;
是有其它原因吗?
我把这种加载方式改掉, 然后onMounted 里添加
window.addEventListener('message', ({ data }) => {
if (!data.tmagicRuntimeReady) {
return;
}
window.magic?.onRuntimeReady({
getApp() {
return app;
},
...
就可以解决这个有时白屏的现象, 但是没有发pr, 不知道原来的写法是不是有别的用途
Install fail! Error: [@tmagic/editor@next] Can't find package @tmagic/editor@next
node版本:14.19.3
安装依赖无任何报错
报错信息:
/magic-admin/server/node_modules/_ts-node@8.10.2@ts-node/src/index.ts:434
return new TSError(diagnosticText, diagnosticCodes)
^
TSError: ⨯ Unable to compile TypeScript:
src/service/act.ts:185:9 - error TS2322: Type '{ actId: number; }' is not assignable to type 'AllowArray<Fn | Literal | Where | Json | WhereAttributeHash | { [or]: AllowArray<AllowArray<Fn | Literal | Where | ... 4 more ... | { ...; }>>; } | { ...; } | { ...; }>'.
Property 'clone' is missing in type '{ actId: number; }' but required in type 'Fn'.
.....
node_modules/sequelize/types/model.d.ts:52:3
52 where?: WhereOptions;
~~~~~
The expected type comes from property 'where' which is declared here on type 'FindOptions'
src/service/act.ts:346:14 - error TS2339: Property 'toJSON' does not exist on type 'ActInfo'.
346 return act.toJSON() as ActInfoIncludePage;
进magic-admin的时候执行setup.sh即web build的时候报一堆Unable to compile TypeScript问题
阿里云的lowcode-engine相关文章低代码渲染那些事里说:
渲染方式主要有两个大类:
- 出码渲染
- 运行时渲染
其中在阿里内部大多数低代码平台中,我们主要使用的都是运行时渲染,包括宜搭低代码产品,只有少部分对性能要求较高的产品才会使用出码渲染的方式。
tmagic-editor 没有考虑过出码渲染?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.