Code dynamic rendering method and device, equipment and storage medium

Abstract

The invention discloses a code dynamic rendering method and device, equipment and a storage medium, and relates to the field of computers.The code dynamic rendering method comprises the steps that a current rendering canvas is monitored to obtain canvas interaction operation, and target operation data of the canvas interaction operation is temporarily stored through an editing state manager; performing a first updating operation and a second updating operation on the current JSON Schema data based on the target operation data to obtain a first JSON Schema data result and a second JSON Schema data result; and integrating the first JSON Schema data result and the second JSON Schema data result to obtain target JSON Schema data, analyzing the target JSON Schema data to convert the target JSON Schema data into a React rendering code, and rendering the React rendering code by using a preset rendering technology to obtain a new current rendering canvas. And bidirectional real-time conversion between visual editing and code generation is realized.

Description

Technical Field

[0001] This invention relates to the field of computers, and in particular to a method, apparatus, device, and storage medium for dynamic code rendering. Background Technology

[0002] Currently, in the field of low-code development and dynamic rendering, visual building platforms typically allow users to directly generate interfaces through interactive methods such as dragging and dropping components. However, traditional solutions often treat visual editing and low-level code editing as two independent processes, lacking an efficient and accurate two-way real-time synchronization mechanism. User operations on the canvas cannot be directly and losslessly mapped to standardized source code; conversely, modifications in the code editor cannot be reflected in the visual canvas in real time and accurately. This disconnect leads to an inconsistent development experience, difficult debugging, low efficiency, and a tendency to generate data inconsistencies. At the same time, existing dynamic rendering solutions generally have shortcomings in runtime data flow management, safe expression execution, and update granularity control, making it difficult to balance development flexibility, application performance, and runtime security.

[0003] In conclusion, how to achieve bidirectional real-time conversion between visual editing and code generation is a problem that urgently needs to be solved. Summary of the Invention

[0004] In view of this, the purpose of this invention is to provide a method, apparatus, device, and storage medium for dynamic code rendering, capable of achieving bidirectional real-time conversion between visual editing and code generation. The specific solution is as follows:

[0005] Firstly, this application provides a method for dynamic code rendering, including:

[0006] Obtain the current rendering canvas visible to the user, listen to the current rendering canvas to obtain canvas interaction operations, and temporarily store the target operation data of the canvas interaction operations using the edit state manager.

[0007] Based on the target operation data, perform a first update operation and a second update operation on the current JSON Schema data respectively to obtain the corresponding first JSON Schema data result and second JSON Schema data result;

[0008] The first JSON Schema data result and the second JSON Schema data result are integrated to obtain the target JSON Schema data. The target JSON Schema data is parsed to be converted into React rendering code. The React rendering code is rendered using a preset rendering technology to obtain a new current rendering canvas.

[0009] The first update operation is as follows: setting the attributes of the corresponding node to be updated according to the target operation data to update the current JSON Schema data and obtain the first JSON Schema data result;

[0010] The second update operation is as follows: based on the target operation data, the current JSON Schema data is converted into the current React TSX code and populated into the TSX code editor. The TSX code editor is used to modify the current React TSX code according to the target operation data to obtain the modified React TSX code. The modified React TSX code is parsed and identified through an abstract syntax tree, and the current JSON Schema data is updated according to the identification result to obtain the second JSON Schema data result.

[0011] Optionally, the step of listening to the currently rendered canvas to obtain canvas interaction operations includes:

[0012] Event delegation is performed on the top-level DOM node of the currently rendered canvas to listen for canvas interaction operations; wherein, the canvas interaction operations include any one or more of the following: component drag operation, node single selection operation, mouse right-click operation, multi-selection operation based on keyboard control keys and mouse left button, and node deletion operation based on keyboard delete key.

[0013] Optionally, the method further includes:

[0014] If the detected canvas interaction operation is a node deletion operation based on the keyboard delete key, then delete the corresponding node to be updated according to the node deletion operation, then update the current JSON Schema data to obtain the target JSON Schema data, parse the target JSON Schema data to convert it into React rendering code, and use the preset rendering technology to render the React rendering code to obtain a new current rendering canvas.

[0015] Optionally, the step of parsing and recognizing the modified ReactTSX code through an abstract syntax tree, and updating the current JSON Schema data according to the recognition result to obtain a second JSON Schema data result, includes:

[0016] The modified ReactTSX code is formatted to obtain the processed ReactTSX code;

[0017] The processed ReactTSX code is parsed using an abstract syntax tree to obtain the corresponding nodes of the target abstract syntax tree;

[0018] The node data of the node to be updated is identified by traversing each node level by level according to the target abstract syntax tree; wherein the node data includes node type, basic attributes and any one or more of the expression.

[0019] The second JSON Schema data result is obtained by updating the current JSON Schema data based on the node data of the node to be updated.

[0020] Optionally, the step of updating the current JSON Schema data based on the node data of the node to be updated to obtain the second JSON Schema data result includes:

[0021] The node instance generated from the node data of the node to be updated is subjected to in-depth observation using the state management library;

[0022] When a specified attribute of the node instance changes through depth observation, the node rendering key corresponding to the node instance is updated; wherein, the node rendering key is composed of the static identifier of the node instance and an auto-incrementing sequence value, and the auto-incrementing sequence value is an integer;

[0023] Based on the change in the node rendering key, a re-render of the node to be updated is triggered to obtain the second JSON Schema data result.

[0024] Optionally, the step of setting attributes of the corresponding node to be updated according to the target operation data to update the current JSON Schema data and obtain the first JSON Schema data result includes:

[0025] Based on the target operation data, the corresponding node to be updated will have its attributes modified, its interactions adjusted, and its data set to determine the page-level custom methods, styles, static data, and API management of the node to be updated, thereby obtaining the node setting results.

[0026] The first JSON Schema data result is obtained by updating the current JSON Schema data based on the node settings.

[0027] Optionally, parsing the target JSON Schema data to convert it into React rendering code includes:

[0028] Parse the nodes, node attributes, and expressions in the target JSON Schema data to generate the corresponding parsing results;

[0029] Based on the parsing results, the target JSON Schema data is converted into React rendering code.

[0030] Secondly, this application provides a code dynamic rendering apparatus, comprising:

[0031] The data storage module is used to obtain the current rendering canvas visible to the user, listen to the current rendering canvas to obtain canvas interaction operations, and use the editing state manager to temporarily store the target operation data of the canvas interaction operations.

[0032] The result acquisition module is used to perform a first update operation and a second update operation on the current JSON Schema data based on the target operation data, and obtain the corresponding first JSON Schema data result and second JSON Schema data result.

[0033] The code rendering module is used to integrate the first JSON Schema data result and the second JSON Schema data result to obtain the target JSON Schema data, parse the target JSON Schema data to convert it into React rendering code, and render the React rendering code using a preset rendering technology to obtain a new current rendering canvas;

[0034] The first update operation is as follows: setting the attributes of the corresponding node to be updated according to the target operation data to update the current JSON Schema data and obtain the first JSON Schema data result;

[0035] The second update operation is as follows: based on the target operation data, the current JSON Schema data is converted into the current React TSX code and populated into the TSX code editor. The TSX code editor is used to modify the current React TSX code according to the target operation data to obtain the modified React TSX code. The modified React TSX code is parsed and identified through an abstract syntax tree, and the current JSON Schema data is updated according to the identification result to obtain the second JSON Schema data result.

[0036] Thirdly, this application provides an electronic device, comprising:

[0037] Memory, used to store computer programs;

[0038] A processor for executing the computer program to implement the code dynamic rendering method as described above.

[0039] Fourthly, this application provides a computer-readable storage medium for storing a computer program; wherein, when the computer program is executed by a processor, it implements the aforementioned code dynamic rendering method.

[0040] In summary, this application first obtains the currently visible rendering canvas on the user's end, listens to the current rendering canvas to obtain canvas interaction operations, and temporarily stores the target operation data of the canvas interaction operations using an edit state manager; based on the target operation data, it performs a first update operation and a second update operation on the current JSON Schema data to obtain corresponding first JSON Schema data results and second JSON Schema data results; it integrates the first JSON Schema data results and the second JSON Schema data results to obtain target JSON Schema data, parses the target JSON Schema data to convert it into React rendering code, and renders the React rendering code using a preset rendering technology to obtain a new current rendering canvas; wherein, the first update operation is: setting the attributes of the corresponding nodes to be updated according to the target operation data to update the current JSON Schema data to obtain the first JSON Schema data result; the second update operation is: converting the current JSON Schema data into the current React based on the target operation data. TSX code is populated into the TSX code editor. The TSX code editor is then used to modify the current ReactTSX code based on the target operation data to obtain modified ReactTSX code. The modified ReactTSX code is parsed and identified using an abstract syntax tree (AST), and the current JSON Schema data is updated based on the identification result to obtain a second JSON Schema data result. As can be seen above, this application monitors user operations on the current rendering canvas, temporarily stores relevant operation data through an editing state manager, and then performs two update operations in parallel based on this data: first, directly updating the attributes of the corresponding nodes in the JSON Schema to generate the first result; second, converting the current JSON Schema into React TSX code and modifying it in the editor, then parsing the modified code using an AST to update the JSON Schema in reverse to obtain the second result. Finally, the two update results are integrated to form the target JSON Schema, which is then parsed and converted into React rendering code before being re-rendered to generate a new canvas. This solves the problems of real-time synchronization difficulties, lack of type safety, and poor rendering performance of complex component nesting in traditional low-code platforms, and enables low-code rendering that supports real-time reverse conversion of TSX syntax, error boundary handling, and dynamic data binding. Attached Figure Description

[0041] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on the provided drawings without creative effort.

[0042] Figure 1 This is a flowchart of a dynamic code rendering method disclosed in this application;

[0043] Figure 2 This application discloses a flowchart of a dynamic rendering method for deleting canvas nodes.

[0044] Figure 3 This application discloses a specific code dynamic rendering method flowchart;

[0045] Figure 4 This is a schematic diagram of the structure of a code dynamic rendering device disclosed in this application;

[0046] Figure 5 This is a structural diagram of an electronic device disclosed in this application. Detailed Implementation

[0047] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0048] Currently, in the field of low-code development and dynamic rendering, visual building platforms typically allow users to directly generate interfaces through interactive methods such as dragging and dropping components. However, traditional solutions often treat visual editing and underlying code editing as two independent processes, lacking an efficient and accurate two-way real-time synchronization mechanism. User operations on the canvas cannot be directly and losslessly mapped to standardized source code; conversely, modifications in the code editor cannot be reflected in the visual canvas in real time and accurately. This disconnect leads to an inconsistent development experience, difficult debugging, low efficiency, and a tendency to generate data inconsistencies. Meanwhile, existing dynamic rendering solutions generally have shortcomings in runtime data flow management, expression secure execution, and update granularity control, making it difficult to balance development flexibility, application performance, and runtime security. To address these technical problems, this application discloses a code dynamic rendering method, apparatus, device, and storage medium capable of achieving two-way real-time conversion between visual editing and code generation.

[0049] See Figure 1 As shown, this embodiment of the invention discloses a method for dynamic code rendering, including:

[0050] Step S11: Obtain the current rendering canvas visible to the user, listen to the current rendering canvas to obtain canvas interaction operations, and temporarily store the target operation data of the canvas interaction operations using the editing state manager.

[0051] In this embodiment, on a low-code platform, a currently rendered canvas with a visible user interface is rendered in real time based on dynamically generated JavaScript code. Then, event delegation is performed on the top-level DOM (Document Object Model) node of the currently rendered canvas to listen for canvas interaction operations. The canvas interaction operations include any one or more of the following: component drag operation, node single selection operation, mouse right-click operation, multi-selection operation based on keyboard control keys and mouse left button, and node deletion operation based on keyboard delete key. Specifically, the rendering process converts code into browser-executable instructions to generate and update the DOM structure in the canvas. Then, a unified event listener is set on the outermost container node of the canvas. Through the event bubbling mechanism, user interaction events triggered on all child elements inside the canvas are captured, i.e., canvas interaction operations. The specific operation type is distinguished according to the properties of the event object. For example, by judging the mouse button state, drag event sequence, whether a specific keyboard key is pressed at the same time, and the target element of the event, it is possible to identify whether it is a drag start, node click selection, right-click menu call, multi-selection based on keyboard control keys and left mouse button, or deletion intent by pressing the keyboard delete key. These identified operations are output as discrete interaction instructions, i.e., target operation data.

[0052] Step S12: Based on the target operation data, perform a first update operation and a second update operation on the current JSON Schema data respectively to obtain the corresponding first JSON Schema data result and second JSON Schema data result.

[0053] In this embodiment, the target operation data temporarily stored in the edit state manager is used as input to trigger two parallel update paths. Based on the target operation data, a first update operation and a second update operation are performed on the current JSON Schema (JSON data format) data to obtain corresponding first and second JSON Schema data results. Specifically, the first update operation involves setting attributes of the corresponding nodes to be updated according to the target operation data to update the current JSON Schema data and obtain the first JSON Schema data result. The second update operation involves converting the current JSON Schema data into current React TSX code based on the target operation data and populating it into the TSX (TypeScript Execute) code editor. The TSX code editor is then used to modify the current React TSX code according to the target operation data to obtain modified React TSX code. The modified React TSX code is then parsed and identified using an abstract syntax tree to update the current JSON Schema data based on the identification result, resulting in the second JSON Schema data result.

[0054] It's important to understand that in the first path, based on the target operation data, the corresponding node to be updated undergoes attribute modification, interaction, and data settings to determine the page-level custom methods, styles, static data, and API management of the node to be updated, resulting in the node setting result. The current JSON Schema data is then updated based on the node setting result to obtain the first JSON Schema data result. Specifically, the target operation data is first parsed to identify the specific node to be operated on and the specific setting intent indicated by the target operation data, such as adjusting styles, binding events, or configuring data sources. Based on the setting intent, corresponding attribute fields in the corresponding node data structure are directly assigned or modified. These fields cover style attributes controlling the component's appearance, event handling methods defining the component's behavioral logic, static data values ​​used internally by the component, and API interface configuration information required for the component to interact with the backend service. After updating these specific fields, the complete setting result for that node is formed. Finally, this result is synchronously merged into the current complete JSON Schema data structure, completing the update of the specific node description, thereby generating the first JSON Schema data result.

[0055] It can be understood that in the second path, the current JSON Schema data is first converted into corresponding current React TSX code using a converter, and this code is loaded into a TSX code editor. Subsequently, the editor simulates or applies corresponding code editing actions based on the same target operation data, modifying the current React TSX code to obtain the modified React TSX code. The modified React TSX code is then formatted to obtain processed React TSX code. The processed React TSX code is parsed using an abstract syntax tree (AST) to obtain the nodes of the corresponding target AST. Each node is traversed level by level according to the target AST to identify the node data of the node to be updated. The node data includes one or more of the following: node type, basic attributes, and expressions. The current JSON Schema data is updated based on the node data of the node to be updated to obtain the second JSON Schema data result.Specifically, the converter transforms the structure and attributes of the JSON Schema into equivalent React component TSX syntax according to preset mapping rules, forming editable initial ReactTSX code. After receiving the target operation data, the TSX code editor parses it into CRUD (Create, Read, Update, Delete) commands for the code text. For example, it locates the fragments representing specific components in the initial ReactTSX code and inserts new attribute lines or modifies existing attribute values, thus generating a React TSX code containing the user's operational intent, which may have messy syntax. Subsequently, a code formatting tool processes this code to conform to unified indentation, line breaks, and other syntax specifications, resulting in a clear and standardized processed ReactTSX code. Next, the abstract syntax tree parser reads this formatted code and converts it into a complete, tree-structured in-memory representation, i.e., the target abstract syntax tree. Starting from the root node of the target abstract syntax tree, it traverses each child node using a depth-first or breadth-first strategy, locating the specific ASTs (Abstract Syntax Trees) representing the edited components by comparing change flags or analyzing the node's position in the tree. The code (abstract syntax tree) nodes are identified. For these nodes to be updated, their key data is extracted, including the HTML (Hypertext Markup Language) tag or React component type corresponding to the node, the set of attribute key-value pairs attached to the node, and the JavaScript expression fragments that may be contained in the attribute values. Finally, based on these extracted node types, attributes, and expression data, the mapping logic opposite to that of the transformer is executed in reverse, re-encoding it into the format and structure required by JSON Schema, and applying these updates to the corresponding parts of the current JSON Schema data, thereby generating a second updated JSON Schema data result.

[0056] Furthermore, to update the corresponding part of the current JSON Schema data based on the node data, thereby generating a second updated JSON Schema data result, a state management library is needed to perform deep observation of the node instance generated from the node data of the node to be updated. When a change is detected in a specified attribute of the node instance through deep observation, the node rendering key corresponding to the node instance is updated. The node rendering key is composed of a static identifier of the node instance and an auto-incrementing sequence value, where the auto-incrementing sequence value is an integer. Based on the change in the node rendering key, a re-rendering of the node to be updated is triggered to obtain the second JSON Schema data result. Specifically, when creating or updating an internal node instance based on the AST node data, the node instance is entrusted to the state management library for management. The state management library performs deep monitoring of all attributes of the instance through proxy or encapsulation techniques. When subsequent processing causes a change in the value of any monitored attribute of the node instance, the state management library captures this change event. In response, a special identifier bound to the node instance, the node rendering key, is modified. Its value is a concatenation of a static string identifier representing the node's unique identity and a globally or locally managed auto-incrementing integer sequence. Whenever an attribute change is observed, this auto-incrementing sequence is incremented, generating a new, unique node rendering key. The rendering engine listens for changes to the node rendering key; once the key value is updated, the engine considers it a strong signal that the node needs to be re-rendered and initiates the rendering process for that node. Finally, based on the node instance's latest and all changed attribute data, a new data fragment conforming to JSON Schema format, fully describing the node and its substructure, is recalculated and generated. This new data fragment is then integrated back into the overall JSON Schema structure, forming the final second JSON Schema data result.

[0057] Step S13: Integrate the first JSON Schema data result and the second JSON Schema data result to obtain the target JSON Schema data, parse the target JSON Schema data to convert it into React rendering code, and use the preset rendering technology to render the React rendering code to obtain a new current rendering canvas.

[0058] In this embodiment, the direct attribute update result generated by the first path is compared and merged with the update result derived through reverse code parsing from the second path to generate a complete and unified target JSON Schema data. This target JSON Schema data, as a stateless, centralized data set, centrally describes the complete structure of the page, the configuration of all nodes, the static data required by the business logic, the interface definition for interaction with the backend, user-defined method logic, and style rules.

[0059] Next, the nodes, node attributes, and expressions in the target JSON Schema data are parsed to generate corresponding parsing results. Based on these results, the target JSON Schema data is converted into React rendering code. Specifically, the target JSON Schema data is parsed iteratively to identify all defined node elements, the set of attributes carried by each node, and any dynamic expressions that may be embedded in the attribute values. For each node, the parsing process determines its corresponding React component type or HTML tag; for attributes, it distinguishes between static attributes and dynamic bindings such as event handlers or data attributes defined in the form of expressions; for expressions, it extracts their logical content and prepares them for evaluation at runtime. Based on these parsing results, according to preset mapping rules and code templates, the node structure is converted into the nested call syntax of React components, static attributes are written directly, and dynamic expressions are embedded into JSX (JavaScript) interpolation syntax or converted into component props. Finally, a complete and executable React component function code string, i.e., the React rendering code, is assembled.

[0060] Additionally, during the transformation process, each node can be wrapped with an error boundary to isolate errors and prevent the propagation of single points of failure. Simultaneously, a dataset tag is added to component nodes for runtime data tracking. The `makeAutoObservable,reaction` methods provided by the mobx package are used to monitor Page instances, deeply monitoring component properties. When properties change, PageRender performs a reactive update. Furthermore, mobx is used to listen for other key properties affecting runtime performance. The `makeAutoObservable,reaction` methods provided by the state management library are used to monitor Node component instance instances, deeply monitoring prop properties. When properties change, PageRender performs a reactive update. A proxy can also be used to wrap the runtime context, controlling the scope and permissions of user-defined code data operations. For example, a proxy can be used in PageRender to hijack `this` access, strictly controlling code access permissions. At runtime, agreed-upon user-accessible properties are dynamically passed as parameters, providing a secure execution context. Based on the MobX reactive update mechanism, rendering data is managed to precisely control update granularity. Custom methods, static data, APIs, etc., are dynamically transformed to extend the runtime context. For example, new `newFunction()` parameters can be extended through built-in extension methods or inheritance, allowing users to quickly integrate custom React components for seamless rendering.

[0061] Finally, the rendering engine executes this newly generated code, creates and updates the corresponding DOM elements in the browser, and thus presents the latest user interface in the canvas area, completing the closed loop from data change to view update.

[0062] As described above, this embodiment of the application monitors user operations on the current rendering canvas, temporarily stores relevant operation data through an editing state manager, and then executes two update operations in parallel based on this data: first, directly updating the attributes of the corresponding nodes in the JSON Schema to generate a first result; second, converting the current JSON Schema into React TSX code, modifying it in the editor, parsing the modified code through an abstract syntax tree, and updating the JSON Schema in reverse to obtain a second result. Finally, the two update results are integrated to form a target JSON Schema, which is parsed and converted into React rendering code before being re-rendered to generate a new canvas. In this way, the problems of real-time synchronization difficulties, lack of type safety, and low rendering performance of complex component nesting in traditional low-code platforms are solved, achieving low-code rendering that supports real-time reverse conversion of TSX syntax, has error boundary handling, and supports dynamic data binding.

[0063] See Figure 2As shown, this embodiment of the invention discloses a method for dynamic code rendering, including:

[0064] Step S21: Obtain the current rendering canvas visible to the user, listen to the current rendering canvas to obtain canvas interaction operations, and temporarily store the target operation data of the canvas interaction operations using the edit state manager.

[0065] For a more detailed description of the process of step S21, please refer to the relevant content disclosed in the foregoing embodiments, which will not be repeated here.

[0066] Step S22: If the canvas interaction operation detected by the listener is a node deletion operation based on the keyboard delete key, then delete the corresponding node to be updated according to the node deletion operation, then update the current JSON Schema data to obtain the target JSON Schema data, parse the target JSON Schema data to convert it into React rendering code, and use the preset rendering technology to render the React rendering code to obtain a new current rendering canvas.

[0067] In this embodiment, if the detected canvas interaction operation is a node deletion operation based on the keyboard delete key, the corresponding node to be updated is located in the current JSON Schema data structure according to the node identifier information carried by the deletion operation, and removed from the list of its parent and child nodes, thereby completing the direct update of the Schema data and obtaining the target JSON Schema data. Subsequently, this target JSON Schema data with the specified deleted node is parsed, converted into React rendering code, and executed using a preset rendering technology. Finally, a new user interface without the deleted node is re-rendered on the canvas, i.e., the new current rendering canvas.

[0068] As can be seen from the above, this embodiment of the application, by listening to and responding to the user's node deletion operation triggered by the keyboard delete key on the canvas, can accurately locate and remove the corresponding node definition in the JSON Schema data structure. Subsequently, it automatically converts the updated Schema data into React rendering code and re-renders the canvas interface in real time. This process achieves rapid closed-loop synchronization of the user's deletion intent from the interaction layer to the data layer and then to the view layer. Its technical effect is to ensure the immediate consistency between the visual operation and the underlying data model and front-end rendering results, thereby providing users with a smooth, responsive, and intuitive "what you see is what you get" editing experience, while ensuring a strict correspondence between the interface state and changes in the data structure.

[0069] As can be seen from the previous embodiment, this application discloses a method for dynamic code rendering, which can realize bidirectional real-time conversion between visual editing and code generation. Next, we will address methods such as... Figure 3 The following is a detailed explanation of a method for dynamically rendering code.

[0070] First, obtain the currently rendered canvas visible to the user, listen to the currently rendered canvas to capture canvas interaction operations, and use the editing state manager to temporarily store the target operation data of the canvas interaction operations.

[0071] Then, based on the aforementioned temporarily stored target operation data, two update operations are performed on the current JSON Schema data. The first update operation involves setting the attributes of the corresponding nodes to be updated according to the target operation data to update the current JSON Schema data, thereby obtaining the first JSON Schema data result.

[0072] Simultaneously, the second update operation converts the current JSON Schema data into the current React TSX code based on the target operation data and populates it into the TSX code editor. The code is shown below:

[0073] export const node2Jsx = (node: NodeJson | Array <nodejson>, indent =0): string => {

[0074] if (!node) {

[0075] console.warn('node2Jsx: Invalid node input');

[0076] return '';

[0077] }

[0078] if (Array.isArray(node)) {

[0079] if (node.length === 0) {

[0080] return '<>';

[0081] }

[0082] return

[0083] '<>',

[0084] node

[0085] .map((child) => node2Jsx(child, 1))

[0086] .join('\n')

[0087] .replace( / ^\s*[\r\n] / gm, ''),

[0088] '',

[0089] .join(`\n`);

[0090] }

[0091] const { name = 'React.Fragment', children = [], type, expression,value = '', spread = false} = node;

[0092] / / Expression

[0093] if (type === NodeType.Expression) {

[0094] if (!expression) return '';<000已修正翻译内容,确保准确传达原文含义。请确认是否符合你的要求。如果还有其他问题,请随时告诉我。001>

[0095] / / Whether to include the spread operator

[0096] return dealIndent(indent, `{${spread ? '...' : ''}${expression}}`);

[0097] }

[0098] / / text

[0099] if (type === NodeType.Text) {

[0100] if (typeof value === 'string' && !value.trim()) return '';

[0101] return dealIndent(indent, value);

[0102] }

[0103] / / Child node JSX

[0104] const childrenJsx = (children || [])

[0105] ?.map((child) => node2Jsx(child, indent + 1))

[0106] .join(`\n`)

[0107] .replace( / ^\s*[\r\n] / gm, '');

[0108] const openingElementContent = getOpeningElementContent(node, indent);

[0109] return dealIndent(

[0110] indent,

[0111] childrenJsx

[0112] ? `<${openingElementContent}>\n${childrenJsx}\n${dealIndent(indent)}< / ${name}> `

[0113] : `<${openingElementContent}${openingElementContent.includes('\n') ?'' : ' '} / >`, );

[0115] };

[0116] Next, the current React TSX code is modified using a TSX code editor based on the target operation data to obtain the modified React TSX code. Then, the modified React TSX code is parsed and identified using an abstract syntax tree (AST), and the current JSON Schema data is updated based on the identification result to obtain the second JSON Schema data result. The code is shown below:

[0117] export const jsx2Node = (jsx = '', throwError?: boolean): NodeJson |null => {

[0118] if (!validateCode(jsx)) {

[0119] console.warn('jsx2Node: Invalid JSX input');

[0120] return null;

[0121] }

[0122] try {

[0123] const code = preprocessJsx(jsx);

[0124] const tsxExpression = getTSXExpression(code, { throwError});

[0125] if (!tsxExpression || !['JSXElement', 'JSXFragment', 'JSXExpressionContainer', 'JSXSpreadChild', 'JSXText'].includes(tsxExpression.type)) {

[0126] console.warn('jsx2Node: No valid JSX expression found', code.slice(0, 100) +(code.length > 100 ? '...' : ''));

[0127] return null;

[0128] }

[0129] return transformNode(tsxExpression, code);

[0130] } catch (error) {

[0131] const errorMsg = formatError(error, 'jsx2Node: Conversion failed');

[0132] if (throwError === true) {

[0133] throw new Error(errorMsg);

[0134] }

[0135] console.error(errorMsg, error);

[0136] return null;

[0137] }

[0138] };

[0139] Finally, the first and second JSON Schema data results are integrated to obtain the target JSON Schema data. This target JSON Schema data is parsed and converted into React rendering code. The React rendering code is then rendered using preset rendering techniques to generate a new current rendering canvas. The code is shown below:

[0140] export const compile = (code: string, config?: TransformOptions):string => {

[0141] if (!code || typeof code !== 'string') {

[0142] console.warn('compile: Invalid code input');

[0143] return '';

[0144] }

[0145] if (!isPresetsRegistered) {

[0146] registerPresets();

[0147] }

[0148] try {

[0149] let triedCode = trimCode(startsWithJsx(code)? wrapCodeInFragment(code) : code);

[0150] / / Suspicious object literal

[0151] if (triedCode.startsWith('{') && triedCode.endsWith('}')) {

[0152] const expression = getExpression(triedCode);

[0153] if (expression?.type === 'ObjectExpression') { ​​​​​​​​​​​​​​​​​​​​​​​​

[0162] });

[0163] return result?.code || '';

[0164] } catch (error) {

[0165] const errorMsg = formatError(error, 'compile: compilation failed');

[0166] console.error(errorMsg, error);

[0167] return '';

[0168] }

[0169] };

[0170] See Figure 4 As shown, an embodiment of the present invention discloses a code dynamic rendering device, comprising:

[0171] The data temporary storage module 11 is used to obtain the current rendering canvas visible to the user, listen to the current rendering canvas to obtain canvas interaction operations, and use the editing state manager to temporarily store the target operation data of the canvas interaction operations.

[0172] The result acquisition module 12 is used to perform a first update operation and a second update operation on the current JSON Schema data based on the target operation data, respectively, to obtain the corresponding first JSON Schema data result and second JSON Schema data result;

[0173] The code rendering module 13 is used to integrate the first JSON Schema data result and the second JSON Schema data result to obtain target JSON Schema data, parse the target JSON Schema data to convert it into React rendering code, and render the React rendering code using a preset rendering technology to obtain a new current rendering canvas;

[0174] The first update operation is as follows: setting the attributes of the corresponding node to be updated according to the target operation data to update the current JSON Schema data and obtain a first JSON Schema data result; the second update operation is as follows: converting the current JSON Schema data into current React TSX code based on the target operation data and populating it into the TSX code editor, modifying the current React TSX code according to the target operation data using the TSX code editor to obtain modified React TSX code, parsing and recognizing the modified React TSX code through an abstract syntax tree, and updating the current JSON Schema data according to the recognition result to obtain a second JSON Schema data result.

[0175] As described above, this embodiment of the application monitors user operations on the current rendering canvas, temporarily stores relevant operation data through an editing state manager, and then executes two update operations in parallel based on this data: first, directly updating the attributes of the corresponding nodes in the JSON Schema to generate a first result; second, converting the current JSON Schema into React TSX code, modifying it in the editor, parsing the modified code through an abstract syntax tree, and updating the JSON Schema in reverse to obtain a second result. Finally, the two update results are integrated to form a target JSON Schema, which is parsed and converted into React rendering code before being re-rendered to generate a new canvas. In this way, the problems of real-time synchronization difficulties, lack of type safety, and low rendering performance of complex component nesting in traditional low-code platforms are solved, achieving low-code rendering that supports real-time reverse conversion of TSX syntax, has error boundary handling, and supports dynamic data binding.

[0176] In some specific implementations, the data temporary storage module 11 may include:

[0177] The canvas listening unit is used to perform event delegation on the top-level DOM node of the currently rendered canvas in order to listen for canvas interaction operations; wherein, the canvas interaction operations include any one or more of the following: component drag operation, node single selection operation, mouse right-click operation, multi-selection operation based on keyboard control keys and mouse left button, and node deletion operation based on keyboard delete key.

[0178] In some specific embodiments, the code dynamic rendering device may further include:

[0179] The node deletion module is used to delete the corresponding node to be updated if the canvas interaction operation detected is a node deletion operation based on the keyboard delete key. Then, it updates the current JSON Schema data to obtain the target JSON Schema data, parses the target JSON Schema data to convert it into React rendering code, and renders the React rendering code using a preset rendering technology to obtain a new current rendering canvas.

[0180] In some specific implementations, the result acquisition module 12 may include:

[0181] The code formatting unit is used to format the modified ReactTSX code to obtain the processed ReactTSX code;

[0182] The node acquisition unit is used to parse the processed ReactTSX code through the abstract syntax tree to obtain the nodes of the corresponding target abstract syntax tree;

[0183] The node data identification unit is used to traverse each node level by level according to the target abstract syntax tree and identify the node data of the node to be updated; wherein the node data includes any one or more of node type, basic attributes, and expressions;

[0184] The first data result acquisition unit is used to update the current JSON Schema data based on the node data of the node to be updated to obtain the second JSON Schema data result.

[0185] In some specific implementations, obtaining the first data result may include:

[0186] The node instance observation subunit is used to perform in-depth observation of the node instance generated from the node data of the node to be updated using the state management library;

[0187] The node rendering key update subunit is used to update the node rendering key corresponding to the node instance when a specified attribute of the node instance changes through depth observation; wherein, the node rendering key is composed of a static identifier of the node instance and an auto-incrementing sequence value, and the auto-incrementing sequence value is an integer;

[0188] The data result acquisition subunit is used to trigger a re-render of the node to be updated based on the change of the node rendering key, so as to obtain the second JSON Schema data result.

[0189] In some specific implementations, the result acquisition module 12 may include:

[0190] The node setting unit is used to modify the attributes, interactions, and data settings of the corresponding node to be updated according to the target operation data, so as to determine the page-level custom method, style, static data, and API management of the node to be updated, and obtain the node setting result;

[0191] The second data result acquisition unit is used to update the current JSON Schema data according to the node setting result to obtain the first JSON Schema data result.

[0192] In some specific implementations, the code rendering module 13 may include:

[0193] The data parsing unit is used to parse the nodes, node attributes, and expressions in the target JSON Schema data to generate corresponding parsing results;

[0194] The code rendering unit is used to convert the target JSON Schema data into React rendering code based on the parsing results.

[0195] Furthermore, embodiments of this application also disclose an electronic device, Figure 5 This is a structural diagram of an electronic device 20 according to an exemplary embodiment. The content of the diagram should not be construed as limiting the scope of this application.

[0196] Figure 5 This is a schematic diagram of the structure of an electronic device 20 provided in an embodiment of this application. Specifically, the electronic device 20 may include: at least one processor 21, at least one memory 22, a power supply 23, a communication interface 24, an input / output interface 25, and a communication bus 26. The memory 22 stores a computer program, which is loaded and executed by the processor 21 to implement the relevant steps in the code dynamic rendering method disclosed in any of the foregoing embodiments. Furthermore, the electronic device 20 in this embodiment may specifically be an electronic computer.

[0197] In this embodiment, the power supply 23 is used to provide operating voltage for each hardware device on the electronic device 20; the communication interface 24 can create a data transmission channel between the electronic device 20 and external devices, and the communication protocol it follows can be any communication protocol applicable to the technical solution of this application, and is not specifically limited here; the input / output interface 25 is used to acquire external input data or output data to the outside world, and its specific interface type can be selected according to specific application needs, and is not specifically limited here.

[0198] In addition, the memory 22, as a carrier for resource storage, can be a read-only memory, random access memory, disk or optical disk, etc. The resources stored thereon can include operating system 221, computer program 222, etc., and the storage method can be temporary storage or permanent storage.

[0199] The operating system 221 is used to manage and control the various hardware devices on the electronic device 20 and the computer program 222, which may be Windows Server, Netware, Unix, Linux, etc. In addition to including a computer program capable of performing the code dynamic rendering method executed by the electronic device 20 as disclosed in any of the foregoing embodiments, the computer program 222 may further include a computer program capable of performing other specific tasks.

[0200] Furthermore, this application also discloses a computer-readable storage medium for storing a computer program; wherein, when the computer program is executed by a processor, it implements the aforementioned dynamic code rendering method. Specific steps of this method can be found in the corresponding content disclosed in the foregoing embodiments, and will not be repeated here.

[0201] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on its differences from other embodiments. Similar or identical parts between embodiments can be referred to interchangeably. For the apparatus disclosed in the embodiments, since it corresponds to the method disclosed in the embodiments, the description is relatively simple; relevant parts can be referred to in the method section.

[0202] Those skilled in the art will further recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of both. To clearly illustrate the interchangeability of hardware and software, the components and steps of the various examples have been generally described in terms of functionality in the foregoing description. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0203] The steps of the methods or algorithms described in conjunction with the embodiments disclosed herein can be implemented directly by hardware, a software module executed by a processor, or a combination of both. The software module can be located in random access memory (RAM), main memory, read-only memory (ROM), electrically programmable ROM, electrically erasable programmable ROM, registers, hard disk, removable disk, CD-ROM, or any other form of storage medium known in the art.

[0204] Finally, it should be noted that in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0205] The technical solutions provided in this application have been described in detail above. Specific examples have been used to illustrate the principles and implementation methods of this application. The descriptions of the above embodiments are only for the purpose of helping to understand the methods and core ideas of this application. At the same time, for those skilled in the art, there will be changes in the specific implementation methods and application scope based on the ideas of this application. Therefore, the content of this specification should not be construed as a limitation of this application.< / nodejson>

Claims

1. A code dynamic rendering method, characterized in that, include: Obtain the current rendering canvas visible to the user, listen to the current rendering canvas to obtain canvas interaction operations, and temporarily store the target operation data of the canvas interaction operations using the edit state manager. Based on the target operation data, perform a first update operation and a second update operation on the current JSON Schema data respectively to obtain the corresponding first JSON Schema data result and second JSON Schema data result; The first JSON Schema data result and the second JSON Schema data result are integrated to obtain the target JSON Schema data. The target JSON Schema data is parsed to be converted into React rendering code. The React rendering code is rendered using a preset rendering technology to obtain a new current rendering canvas. The first update operation is as follows: setting the attributes of the corresponding node to be updated according to the target operation data to update the current JSON Schema data and obtain the first JSON Schema data result; The second update operation is as follows: based on the target operation data, the current JSON Schema data is converted into the current React TSX code and populated into the TSX code editor. The TSX code editor is used to modify the current React TSX code according to the target operation data to obtain the modified React TSX code. The modified React TSX code is parsed and identified through an abstract syntax tree, and the current JSON Schema data is updated according to the identification result to obtain the second JSON Schema data result.

2. The code dynamic rendering method according to claim 1, characterized in that, The process of monitoring the currently rendered canvas to obtain canvas interaction operations includes: Event delegation is performed on the top-level DOM node of the currently rendered canvas to listen for canvas interaction operations; wherein, the canvas interaction operations include any one or more of the following: component drag operation, node single selection operation, mouse right-click operation, multi-selection operation based on keyboard control keys and mouse left button, and node deletion operation based on keyboard delete key.

3. The code dynamic rendering method according to claim 1, characterized in that, Also includes: If the detected canvas interaction operation is a node deletion operation based on the keyboard delete key, then delete the corresponding node to be updated according to the node deletion operation, then update the current JSON Schema data to obtain the target JSON Schema data, parse the target JSON Schema data to convert it into React rendering code, and use the preset rendering technology to render the React rendering code to obtain a new current rendering canvas.

4. The code dynamic rendering method according to claim 1, characterized in that, The step of parsing and recognizing the modified ReactTSX code through an abstract syntax tree, and updating the current JSON Schema data according to the recognition result to obtain a second JSON Schema data result, includes: The modified ReactTSX code is formatted to obtain the processed ReactTSX code; The processed ReactTSX code is parsed using an abstract syntax tree to obtain the corresponding nodes of the target abstract syntax tree; The node data of the node to be updated is identified by traversing each node level by level according to the target abstract syntax tree; wherein the node data includes node type, basic attributes and any one or more of the expression. The current JSON Schema data is updated based on the node data of the node to be updated to obtain a second JSON Schema data result.

5. The code dynamic rendering method according to claim 4, characterized in that, The process of updating the current JSON Schema data based on the node data of the node to be updated to obtain the second JSON Schema data result includes: The node instance generated from the node data of the node to be updated is observed in depth using the state management library; When a specified attribute of the node instance changes through depth observation, the node rendering key corresponding to the node instance is updated; wherein, the node rendering key is composed of the static identifier of the node instance and an auto-incrementing sequence value, and the auto-incrementing sequence value is an integer; Based on the change in the node rendering key, a re-rendering of the node to be updated is triggered to obtain the second JSONSchema data result.

6. The code dynamic rendering method according to claim 1, characterized in that, The step of setting attributes for the corresponding node to be updated based on the target operation data to update the current JSON Schema data and obtain the first JSON Schema data result includes: Based on the target operation data, the corresponding node to be updated will have its attributes modified, its interactions adjusted, and its data set to determine the page-level custom methods, styles, static data, and API management of the node to be updated, thereby obtaining the node setting results. The first JSON Schema data result is obtained by updating the current JSON Schema data based on the node settings.

7. The code dynamic rendering method according to claim 1, characterized in that, The process of parsing the target JSONSchema data to convert it into React rendering code includes: Parse the nodes, node attributes, and expressions in the target JSON Schema data to generate the corresponding parsing results; Based on the parsing results, the target JSON Schema data is converted into React rendering code.

8. A code dynamic rendering device, characterized in that, include: The data storage module is used to obtain the current rendering canvas visible to the user, listen to the current rendering canvas to obtain canvas interaction operations, and use the editing state manager to temporarily store the target operation data of the canvas interaction operations. The result acquisition module is used to perform a first update operation and a second update operation on the current JSON Schema data based on the target operation data, and obtain the corresponding first JSON Schema data result and second JSON Schema data result. The code rendering module is used to integrate the first JSON Schema data result and the second JSON Schema data result to obtain the target JSON Schema data, parse the target JSON Schema data to convert it into React rendering code, and render the React rendering code using a preset rendering technology to obtain a new current rendering canvas; The first update operation is as follows: setting the attributes of the corresponding node to be updated according to the target operation data to update the current JSON Schema data and obtain the first JSON Schema data result; The second update operation is as follows: based on the target operation data, the current JSON Schema data is converted into the current React TSX code and populated into the TSX code editor. The TSX code editor is used to modify the current React TSX code according to the target operation data to obtain the modified React TSX code. The modified React TSX code is parsed and identified through an abstract syntax tree, and the current JSON Schema data is updated according to the identification result to obtain the second JSON Schema data result.

9. An electronic device, characterized in that, include: Memory, used to store computer programs; A processor for executing the computer program to implement the code dynamic rendering method as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, Used to store computer programs; wherein, when the computer program is executed by a processor, it implements the code dynamic rendering method as described in any one of claims 1 to 7.

Images