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.tsx b/packages/plugin-code-editor/src/pane/index.tsx
index 6f229b5..dae3b0c 100644
--- a/packages/plugin-code-editor/src/pane/index.tsx
+++ b/packages/plugin-code-editor/src/pane/index.tsx
@@ -94,7 +94,7 @@ export const CodeEditorPane = memo(({ project, event, skeleton }: CodeEditorPane
useEffect(() => {
// load schema on open
- eventRef.current?.on('skeleton.panel-dock.active', (pluginName) => {
+ skeletonRef.current?.onShowPanel((pluginName: string) => {
if (pluginName === 'codeEditor') {
const schema = lowcodeProjectRef.current?.exportSchema(common.designerCabin.TransformStage.Save);
if (!schema) {
@@ -109,7 +109,7 @@ export const CodeEditorPane = memo(({ project, event, skeleton }: CodeEditorPane
});
// save schema when panel closed
- eventRef.current?.on('skeleton.panel-dock.unactive', (pluginName) => {
+ skeletonRef.current?.onHidePanel((pluginName: string) => {
if (pluginName === 'codeEditor') {
saveSchemaRef.current?.();
}
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 @@
-