{loading && {WORD_EDITOR_INITIALIZING}}
-
-
);
};
@@ -128,12 +135,12 @@ const SingleMonacoEditor = (props: ISingleMonacoEditorProps) => {
const DiffMonacoEditor = (props: IDiffMonacoEditorProps) => {
const { enableOutline, width, height, language, original } = props;
- const { isEditorReady, focused, loading, containerRef, monacoRef, editorRef } = useEditor(
+ const { isEditorReady, focused, loading, containerRef, monacoRef, editorRef } = useEditor
- {supportFullScreen && }
-
+
+
+ {supportFullScreen && }
+
+
;
+};
+
+export default BlockCard;
\ No newline at end of file
diff --git a/packages/plugin-block/src/index.tsx b/packages/plugin-block/src/index.tsx
new file mode 100644
index 0000000..dfbbb71
--- /dev/null
+++ b/packages/plugin-block/src/index.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { IPublicModelPluginContext } from '@alilc/lowcode-types';
+import { default as BlockPane } from './pane';
+
+const LowcodePluginCusPlugin = (ctx: IPublicModelPluginContext) => {
+ return {
+ // 插件名，注册环境下唯一
+ name: 'LowcodePluginCusPlugin',
+ // 依赖的插件（插件名数组）
+ dep: [],
+ // 插件对外暴露的数据和方法
+ exports() {
+ return {
+ data: '你可以把插件的数据这样对外暴露',
+ func: () => {
+ console.log('方法也是一样');
+ },
+ }
+ },
+ // 插件的初始化函数，在引擎初始化之后会立刻调用
+ init() {
+ // 你可以拿到其他插件暴露的方法和属性
+ // const { data, func } = ctx.plugins.pluginA;
+ // func();
+
+ // console.log(options.name);
+
+ // 往引擎增加面板
+ ctx.skeleton.add({
+ area: 'leftArea',
+ name: 'blockPane',
+ type: 'PanelDock',
+ props: {
+ icon:
+ 
+
+
+ {title}
+
+ 
,
+ description: '区块面板',
+ },
+ content: BlockPane,
+ });
+
+ ctx.logger.log('打个日志');
+ },
+ };
+};
+
+LowcodePluginCusPlugin.pluginName = 'BlockPlugin';
+
+export default LowcodePluginCusPlugin;
diff --git a/packages/plugin-block/src/pane/index.scss b/packages/plugin-block/src/pane/index.scss
new file mode 100644
index 0000000..e576c4d
--- /dev/null
+++ b/packages/plugin-block/src/pane/index.scss
@@ -0,0 +1,13 @@
+.block-pane {
+ overflow-y: scroll;
+ height: 100%;
+}
+
+.block-pane-loading {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
diff --git a/packages/plugin-block/src/pane/index.tsx b/packages/plugin-block/src/pane/index.tsx
new file mode 100644
index 0000000..3f2f6cd
--- /dev/null
+++ b/packages/plugin-block/src/pane/index.tsx
@@ -0,0 +1,124 @@
+import * as React from 'react';
+
+import { common, project, config, event } from '@alilc/lowcode-engine';
+import { Loading, Box } from '@alifd/next';
+
+import { default as BlockCard } from '../card';
+import { default as store } from '../store';
+
+import './index.scss';
+
+const { useState, useEffect } = React;
+
+const DEFAULT_SCREENSHOT = 'https://tianshu.alicdn.com/19307bb5-2881-44ad-82d3-f92e2f44aabb.png';
+
+function checkBlockAPI() {
+ const apiList = config.get('apiList') || {};
+ const { block: blockAPI } = apiList;
+
+ if (!blockAPI?.listBlocks) {
+ throw new Error('[BlockPane] block api required in engine config.');
+ }
+
+ return blockAPI;
+}
+
+export interface Block {
+
+}
+
+export interface BlockResponse {
+ code: number;
+ data: Block[];
+}
+
+export interface BlockPaneAPI {
+ listBlocks: () => BlockResponse;
+}
+
+export interface BlockPaneProps {
+ api: BlockPaneAPI
+}
+
+export const BlockPane = (props: BlockPaneProps) => {
+ const { listBlocks } = checkBlockAPI();
+ const [ blocks, setBlocks ] = useState();
+ useEffect(() => {
+ const fetchBlocks = async () => {
+ const res = await listBlocks();
+ store.init(res);
+ setBlocks(res);
+ };
+ event.on('common:BlockChanged', () => {
+ fetchBlocks();
+ })
+ fetchBlocks();
+
+ }, []);
+
+ const registerAdditive = (shell: HTMLDivElement | null) => {
+ console.log('shell: ', shell);
+ if (!shell || shell.dataset.registered) {
+ return;
+ }
+
+ function getSnippetId(elem: any) {
+ if (!elem) {
+ return null;
+ }
+ while (shell !== elem) {
+ console.log('elem.classList; ', elem.classList);
+ if (elem.classList.contains('snippet')) {
+ return elem.dataset.id;
+ }
+ elem = elem.parentNode;
+ }
+ return null;
+ }
+
+ const _dragon = common.designerCabin.dragon
+ console.log('_dragon: ', _dragon);
+ if (!_dragon) {
+ return;
+ }
+
+ // eslint-disable-next-line
+ const click = (e: Event) => {};
+
+ shell.addEventListener('click', click);
+
+ _dragon.from(shell, (e: Event) => {
+ const doc = project.getCurrentDocument();
+ const id = getSnippetId(e.target);
+ console.log('doc: ', doc);
+ console.log('id: ', id);
+ if (!doc || !id) {
+ return false;
+ }
+
+ console.log('store.get(id): ', store.get(id));
+
+ const dragTarget = {
+ type: 'nodedata',
+ data: store.get(id),
+ };
+
+ return dragTarget;
+ });
+
+ shell.dataset.registered = 'true';
+ };
+
+ if (!blocks?.length) {
+ return 详细错误: {errorInfo || '未知原因'}
-
+
diff --git a/packages/plugin-code-editor/src/components/JSEditor/JsEditor.tsx b/packages/plugin-code-editor/src/components/JSEditor/JsEditor.tsx
index c84a816..4b0acfd 100644
--- a/packages/plugin-code-editor/src/components/JSEditor/JsEditor.tsx
+++ b/packages/plugin-code-editor/src/components/JSEditor/JsEditor.tsx
@@ -178,8 +178,14 @@ export class JsEditor extends PureComponent {
if (!monacoEditor || !monaco) {
return;
}
- const count = monacoEditor.getModel()?.getLineCount() ?? 0;
- const range = new monaco.Range(count, 1, count, 1);
+
+ // 找到最后一个 }，在他前面插入新的 function 字符串
+ const matches = monacoEditor.getModel()?.findMatches('}');
+ let range = {}
+ if(matches && matches.length > 0) {
+ const { startLineNumber, startColumn } = matches[matches.length - 1]?.range || {}
+ range = new monaco.Range(startLineNumber, startColumn, startLineNumber, startColumn);
+ }
const functionCode = params.template ?
params.template :
@@ -248,10 +254,9 @@ export class JsEditor extends PureComponent {
return;
}
- const pos = monacoEditor.getPosition();
+ // const pos = monacoEditor.getPosition();
this.setState({ errorInfo, hasError, code: newCode, errorLocation }, () => {
- monacoEditor.setPosition(pos);
-
+ // monacoEditor.setPosition(pos);
// update error decorations
if (this.lastErrorDecoration) {
monacoEditor.deltaDecorations(
diff --git a/packages/plugin-code-editor/src/config/default-code.ts b/packages/plugin-code-editor/src/config/default-code.ts
index 3765874..bf7ea44 100644
--- a/packages/plugin-code-editor/src/config/default-code.ts
+++ b/packages/plugin-code-editor/src/config/default-code.ts
@@ -1,5 +1,5 @@
export const defaultCode = `
- export default class LowcodeComponent extends Component {
+ export default class Page extends Component {
// 可以在 state 中定义搭建所需要的 State
state = {
test: 1,
diff --git a/packages/plugin-code-editor/src/index.tsx b/packages/plugin-code-editor/src/index.tsx
index 766a74c..c40e74e 100644
--- a/packages/plugin-code-editor/src/index.tsx
+++ b/packages/plugin-code-editor/src/index.tsx
@@ -1,8 +1,9 @@
import { CodeEditorPane } from './pane';
-import { project, ILowCodePluginContext } from '@alilc/lowcode-engine';
+import { project } from '@alilc/lowcode-engine';
import icon from './icon';
+import { IPublicModelPluginContext } from '@alilc/lowcode-types';
-const plugin = (ctx: ILowCodePluginContext) => {
+const plugin = (ctx: IPublicModelPluginContext) => {
return {
name: 'codeEditor',
width: 600,
@@ -14,7 +15,7 @@ const plugin = (ctx: ILowCodePluginContext) => {
},
// 插件的初始化函数，在引擎初始化之后会立刻调用
init() {
- const schemaDock = ctx.skeleton.add({
+ const codeEditorDock = ctx.skeleton.add({
area: 'leftArea',
name: 'codeEditor',
type: 'PanelDock',
@@ -35,9 +36,9 @@ const plugin = (ctx: ILowCodePluginContext) => {
),
});
- schemaDock && schemaDock.disable();
+ codeEditorDock && codeEditorDock.disable();
project.onSimulatorRendererReady(() => {
- schemaDock.enable();
+ codeEditorDock.enable();
});
},
};
diff --git a/packages/plugin-code-editor/src/pane/index.less b/packages/plugin-code-editor/src/pane/index.less
index 16f5e99..3956047 100644
--- a/packages/plugin-code-editor/src/pane/index.less
+++ b/packages/plugin-code-editor/src/pane/index.less
@@ -15,7 +15,7 @@
overflow: hidden;
}
- .ve-code-control {
+ .lc-code-control {
position: relative;
height: calc(100% - 24px);
}
diff --git a/packages/plugin-code-editor/src/pane/index.tsx b/packages/plugin-code-editor/src/pane/index.tsx
index 917832a..dae3b0c 100644
--- a/packages/plugin-code-editor/src/pane/index.tsx
+++ b/packages/plugin-code-editor/src/pane/index.tsx
@@ -4,6 +4,7 @@ import { Dialog, Message } from '@alifd/next';
import { JsEditor, CssEditor } from '../components';
import { schema2JsCode, schema2CssCode } from '../utils';
import { WORDS, TAB_KEY } from '../config';
+import { common } from '@alilc/lowcode-engine';
import { FunctionEventParams } from '../types';
import { Project, Event, Skeleton } from '@alilc/lowcode-shell';
@@ -27,7 +28,7 @@ export const CodeEditorPane = memo(({ project, event, skeleton }: CodeEditorPane
const cssEditorRef = useRef(null);
const saveSchemaRef = useRef<() => void>(); // save code to schema
- const [schema, setSchema] = useState(() => project.exportSchema());
+ const [schema, setSchema] = useState(() => project.exportSchema(common.designerCabin.TransformStage.Save));
const jsCode = useMemo(() => {
return schema2JsCode(schema);
@@ -40,7 +41,7 @@ export const CodeEditorPane = memo(({ project, event, skeleton }: CodeEditorPane
useEffect(() => {
saveSchemaRef.current = () => {
try {
- const currentSchema = lowcodeProjectRef.current?.exportSchema();
+ const currentSchema = lowcodeProjectRef.current?.exportSchema(common.designerCabin.TransformStage.Save);
const pageNode = currentSchema.componentsTree[0];
const { state, methods, lifeCycles, originCode = '' } = jsEditorRef.current?.getSchemaFromCode() ?? {};
const css = cssEditorRef.current?.getBeautifiedCSS() ?? cssCode;
@@ -48,7 +49,7 @@ export const CodeEditorPane = memo(({ project, event, skeleton }: CodeEditorPane
pageNode.methods = methods;
pageNode.lifeCycles = lifeCycles;
pageNode.originCode = originCode;
-
+
pageNode.css = css;
lowcodeProjectRef.current?.importSchema(currentSchema);
@@ -69,7 +70,7 @@ export const CodeEditorPane = memo(({ project, event, skeleton }: CodeEditorPane
),
onOk: () => {
- skeletonRef.current?.showPanel("codeEditor")
+ skeletonRef.current?.showPanel('codeEditor');
},
});
}
@@ -93,9 +94,9 @@ export const CodeEditorPane = memo(({ project, event, skeleton }: CodeEditorPane
useEffect(() => {
// load schema on open
- eventRef.current?.on('skeleton.panel-dock.active', (pluginName) => {
- if (pluginName == 'codeEditor') {
- const schema = lowcodeProjectRef.current?.exportSchema()
+ skeletonRef.current?.onShowPanel((pluginName: string) => {
+ if (pluginName === 'codeEditor') {
+ const schema = lowcodeProjectRef.current?.exportSchema(common.designerCabin.TransformStage.Save);
if (!schema) {
return;
}
@@ -106,26 +107,26 @@ export const CodeEditorPane = memo(({ project, event, skeleton }: CodeEditorPane
cssEditorRef.current?._updateCode(cssCode);
}
});
-
+
// save schema when panel closed
- eventRef.current?.on('skeleton.panel-dock.unactive', (pluginName) => {
+ skeletonRef.current?.onHidePanel((pluginName: string) => {
if (pluginName === 'codeEditor') {
saveSchemaRef.current?.();
}
});
// focus function by functionName
- eventRef.current?.on('common:codeEditor.focusByFunction', (params: FunctionEventParams) => {
+ eventRef.current?.on('common:codeEditor.focusByFunction', (params) => {
setActiveKey(TAB_KEY.JS);
setTimeout(() => {
- jsEditorRef.current?.focusByFunctionName(params);
+ jsEditorRef.current?.focusByFunctionName(params as FunctionEventParams);
}, 100);
});
- eventRef.current?.on('common:codeEditor.addFunction', (params: FunctionEventParams) => {
+ eventRef.current?.on('common:codeEditor.addFunction', (params) => {
setActiveKey(TAB_KEY.JS);
setTimeout(() => {
- jsEditorRef.current?.addFunction(params);
+ jsEditorRef.current?.addFunction(params as FunctionEventParams);
}, 100);
});
}, []);
diff --git a/packages/plugin-code-editor/src/types/methods.ts b/packages/plugin-code-editor/src/types/methods.ts
index 2e62f08..093941f 100644
--- a/packages/plugin-code-editor/src/types/methods.ts
+++ b/packages/plugin-code-editor/src/types/methods.ts
@@ -1,7 +1,8 @@
+import { JSFunction, JSExpression } from '@alilc/lowcode-types';
+export type Method = JSExpression | JSFunction & {
+ source: string;
+}
+
export interface Methods {
- [key: string]: {
- type: 'JSFunction';
- value: string;
- originalCode: string;
- };
+ [key: string]: Method;
}
diff --git a/packages/plugin-code-editor/src/types/state.ts b/packages/plugin-code-editor/src/types/state.ts
index d994852..ff85180 100644
--- a/packages/plugin-code-editor/src/types/state.ts
+++ b/packages/plugin-code-editor/src/types/state.ts
@@ -1,6 +1,6 @@
import { JSExpression } from '@alilc/lowcode-types';
-export interface IState extends JSExpression{
- // 原始代码
- originCode: string;
+export interface IState extends JSExpression {
+ // 原始代码
+ source: string;
}
\ No newline at end of file
diff --git a/packages/plugin-code-editor/src/typeings.d.ts b/packages/plugin-code-editor/src/typings.d.ts
similarity index 100%
rename from packages/plugin-code-editor/src/typeings.d.ts
rename to packages/plugin-code-editor/src/typings.d.ts
diff --git a/packages/plugin-code-editor/src/utils/evaluate.ts b/packages/plugin-code-editor/src/utils/evaluate.ts
new file mode 100644
index 0000000..d4b7db7
--- /dev/null
+++ b/packages/plugin-code-editor/src/utils/evaluate.ts
@@ -0,0 +1,32 @@
+interface Expr {
+ type: string;
+ value: string | number;
+ extType?: string;
+}
+
+type ExprType = Expr | string;
+
+function getExprStr(expr: ExprType) {
+ if (typeof expr === 'string') {
+ return expr;
+ }
+ return expr && (expr as Expr).value;
+}
+
+function getEvalExpressionStr(expr: ExprType): string | undefined {
+ const exprStr = getExprStr(expr);
+ if (exprStr == undefined) {
+ return exprStr;
+ } else if (exprStr === '') {
+ return undefined;
+ }
+ return `(function(){return (${exprStr})}).call($scope)`;
+}
+
+export function evaluate(expr: ExprType) {
+ const evalExprStr = getEvalExpressionStr(expr);
+ const code = `with($scope || {}) { return ${evalExprStr} }`;
+ const fn = new Function('$scope', code);
+ // 暂时不传递 $scope
+ return fn();
+}
diff --git a/packages/plugin-code-editor/src/utils/get-methods.ts b/packages/plugin-code-editor/src/utils/get-methods.ts
index 72579f7..cd890b2 100644
--- a/packages/plugin-code-editor/src/utils/get-methods.ts
+++ b/packages/plugin-code-editor/src/utils/get-methods.ts
@@ -54,8 +54,7 @@ export const getMethods = (ast: Node) => {
methods[name] = {
type: 'JSFunction',
value: compiledCode,
- // 这里的 originalCode 直接放在全局，不挂在局部
- // originalCode: codeStr,
+ source: codeStr,
};
},
});
diff --git a/packages/plugin-code-editor/src/utils/schema-to-code.ts b/packages/plugin-code-editor/src/utils/schema-to-code.ts
index 166ae6b..986ed9a 100644
--- a/packages/plugin-code-editor/src/utils/schema-to-code.ts
+++ b/packages/plugin-code-editor/src/utils/schema-to-code.ts
@@ -1,14 +1,14 @@
-
import { js_beautify, css_beautify } from 'js-beautify';
-import { isJSExpression, ProjectSchema, RootSchema, JSFunction, JSExpression } from '@alilc/lowcode-types';
+import { isJSExpression, ProjectSchema, RootSchema } from '@alilc/lowcode-types';
import { Dialog } from '@alifd/next';
import { IState } from '../types';
-import { defaultStateCode, WORDS } from '../config';
+import { WORDS } from '../config';
+import type { Method } from '../types/methods';
const js_beautify_config = { indent_size: 2, indent_empty_lines: true, e4x: true };
const initCode = (componentSchema: RootSchema | undefined) => {
- const code = `class LowcodeComponent extends Component {
+ const code = `class Page extends Component {
${initStateCode(componentSchema)}
${initLifeCycleCode(componentSchema)}
${initMethodsCode(componentSchema)}
@@ -30,34 +30,24 @@ export const schema2CssCode = (schema: ProjectSchema) => {
};
export const beautifyCSS = (input?: string): string => {
- return input ? css_beautify(input, { indent_size: 2 }) : ''
+ return input ? css_beautify(input, { indent_size: 2 }) : '';
}
function initStateCode(componentSchema: RootSchema | undefined) {
if (componentSchema?.state) {
- let states: Record = {};
- let needNotice = false;
- Object.keys(componentSchema.state).forEach((item) => {
- const state = componentSchema.state?.[item];
+ let statesStr = 'state = {\n';
+ Object.keys(componentSchema.state).forEach((key) => {
+ const state = componentSchema.state?.[key];
if (typeof state === 'object' && isJSExpression(state)) {
- states[item] = (state as IState).originCode || state.value; // 兼容历史数据
- if (!(state as IState).originCode) {
- needNotice = true;
- }
+ statesStr += `"${key}": ${(state as IState).source || state.value},\n`;
} else {
- states[item] = state; // 兼容历史数据
+ statesStr += `"${key}": ${typeof state === 'string' ? '"' + state + '"' : state},,\n`;
}
});
- if (needNotice) {
- Dialog.alert({
- title: WORDS.title,
- content: WORDS.irreparableState,
- });
- }
- return `state = ${JSON.stringify(states)}`;
+ statesStr += '}';
+ return statesStr;
}
- return defaultStateCode;
}
function initLifeCycleCode(componentSchema: RootSchema | undefined) {
@@ -100,10 +90,10 @@ function initMethodsCode(componentSchema: RootSchema | undefined) {
}
}
-function createFunctionCode(functionName: string, functionNode: JSFunction | JSExpression) {
+function createFunctionCode(functionName: string, functionNode: Method) {
if (functionNode?.type === 'JSExpression' || functionNode?.type === 'JSFunction') {
// 读取原始代码
- let functionCode = functionNode.originalCode;
+ let functionCode = functionNode.source;
if (functionCode) {
functionCode = functionCode.replace(/function/, '');
} else {
diff --git a/packages/plugin-code-editor/src/utils/state-parser.ts b/packages/plugin-code-editor/src/utils/state-parser.ts
index 439e964..872eb2b 100644
--- a/packages/plugin-code-editor/src/utils/state-parser.ts
+++ b/packages/plugin-code-editor/src/utils/state-parser.ts
@@ -18,7 +18,6 @@ export const stateParser = (ast: Node) => {
// get state identifier or literal
if (path.isIdentifier({ name: 'state' }) || path.isLiteral({ value: 'state' })) {
const properties = path.container?.value?.properties;
- // console.log('properties', properties);
if (properties) {
properties.forEach((property) => {
// creat empty AST
@@ -26,7 +25,7 @@ export const stateParser = (ast: Node) => {
code.program.body.push(t.variableDeclaration('var', [
t.variableDeclarator(t.identifier('name'), property.value),
]));
-
+
const codeStr = babelTransformFromAst(code).code;
const compiledCode = transformJS(codeStr, defaultBabelConfig).code;
if (compiledCode) {
diff --git a/packages/plugin-code-editor/src/utils/transform.ts b/packages/plugin-code-editor/src/utils/transform.ts
index 7f18e94..faed277 100644
--- a/packages/plugin-code-editor/src/utils/transform.ts
+++ b/packages/plugin-code-editor/src/utils/transform.ts
@@ -1,4 +1,3 @@
-
import { transform } from './babel';
import { TransformResult } from '../types';
diff --git a/packages/plugin-components-pane/.gitignore b/packages/plugin-components-pane/.gitignore
deleted file mode 100644
index 8523c97..0000000
--- a/packages/plugin-components-pane/.gitignore
+++ /dev/null
@@ -1,26 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-node_modules/
-
-# production
-build/
-dist/
-tmp/
-lib/
-es/
-
-# misc
-.idea/
-.happypack
-.DS_Store
-*.swp
-*.dia~
-.ice
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-index.module.scss.d.ts
-
-node_modules
diff --git a/packages/plugin-components-pane/build.json b/packages/plugin-components-pane/build.json
index 90ae90f..36f5196 100644
--- a/packages/plugin-components-pane/build.json
+++ b/packages/plugin-components-pane/build.json
@@ -1,6 +1,14 @@
{
"plugins": [
"build-plugin-component",
+ [
+ "@alilc/build-plugin-alt",
+ {
+ "type": "plugin",
+ "inject": true,
+ "openUrl": "https://lowcode-engine.cn/demo/index.html?debug"
+ }
+ ],
"build-plugin-fusion",
[
"build-plugin-moment-locales",
diff --git a/packages/plugin-components-pane/demo/demo.hbs b/packages/plugin-components-pane/demo/demo.hbs
index bcca41a..f5147dd 100644
--- a/packages/plugin-components-pane/demo/demo.hbs
+++ b/packages/plugin-components-pane/demo/demo.hbs
@@ -11,9 +11,9 @@
-
-
-
+
+
+
@@ -21,4 +21,4 @@
-