An SDK method and device for online compiling custom components

Abstract

This invention discloses an online SDK compilation method and apparatus for custom components. The method includes: an online editor for real-time preview of the front-end project; an SDK compilation back-end service where, upon the user opening the online editor, the server creates a temporary storage folder and scans for file changes; when the user triggers a save action, the back-end service detects file modifications and initiates the file compilation process; the front-end, upon receiving a message from the back-end, immediately partially refreshes the file and renders the latest view; the refreshed component's status can be observed in real-time through the property panel; the property panel fields are generated by the back-end parsing the component configuration script and provided to the front-end for rendering; when the user triggers saving a category, the back-end stores the developed script and source code and deletes the temporary category. This method and apparatus do not require a local environment; code can be written online via a browser to achieve real-time compilation and preview, and compilation error information is displayed in the window. Users can create and save categories using the compiled components.

Description

Technical Field

[0001] This invention relates to the field of remote compilation, and in particular to an SDK method and apparatus for online compilation of custom components. Background Technology

[0002] SDK, or Software Development Kit, is generally a collection of development tools used by software engineers to create application software for specific software packages, software frameworks, hardware platforms, operating systems, etc.

[0003] In a broad sense, software development tools refer to a collection of related documents, examples, and tools that assist in the development of a certain type of software.

[0004] A software development kit (SDK) is a collection of development tools used by software engineers to create application software for specific software packages, frameworks, hardware platforms, and operating systems. Generally, an SDK is used to develop applications for the Windows platform. It facilitates application creation through compilers, debuggers, and software frameworks. It can be as simple as providing application programming interface (API) files for a programming language, but may also include complex hardware capable of communicating with embedded systems. Common tools include utilities for debugging and other purposes.

[0005] In the existing technology, components are developed separately for the functions of various compilation platforms. Components between different compilation platforms cannot be adapted. Therefore, in order to deploy code to multiple compilation platforms, it is necessary to repeatedly develop components for various compilation platforms during the development process, resulting in high development costs and low code delivery efficiency.

[0006] High concurrency leads to increased server load, necessitating load balancing; components need to be developed differently depending on the front-end technology stack used. Currently, technologies like React and Vue have slightly different component writing methods, but maintain a consistent interface. The direct impact is that adapting to multiple technology stacks requires higher development costs. Summary of the Invention

[0007] To address the aforementioned problems with traditional methods for activating dedicated business lines for government and enterprises, this invention provides an online SDK method and apparatus for compiling custom components. This eliminates the need to set up a local environment and allows for real-time compilation and previewing of code written online via a browser.

[0008] To achieve the above objectives, the present invention adopts the following technical solution:

[0009] In one embodiment of the present invention, a method for compiling a custom component SDK online is proposed, the method comprising:

[0010] S01. Online editing and real-time preview of the front-end project;

[0011] S02, SDK compilation backend service: When a user opens the online editor, the server simultaneously creates a temporary storage folder and scans for file changes;

[0012] S03. When a user triggers a save action, the backend service detects file changes and starts the file compilation process;

[0013] S04. Upon receiving a message from the backend, the frontend immediately refreshes the file and renders the latest view.

[0014] S05. The refreshed component's status can be observed in real time through the property panel;

[0015] S06. The attribute panel fields are generated by the backend parsing component configuration script and provided to the frontend for rendering;

[0016] S07. When a user triggers the saving of a category, the backend will store the developed script and source code, and delete the temporary category.

[0017] Further, S01 includes:

[0018] S011. Create a new front-end project;

[0019] S012. During initialization, a WebSocket heartbeat connection is established with the SDK;

[0020] S013. Use input boxes or text editing components as code writing containers;

[0021] S014. Add a save button. When the save action is triggered, the input box value is passed to the SDK for processing via a heartbeat packet.

[0022] S015. Design an array to store the logs returned by heartbeat packets;

[0023] S016. Output the log information returned by the array to the browser;

[0024] S017. Upon receiving a heartbeat message indicating that compilation is complete, notify the browser to load the compiled component address and refresh the preview.

[0025] Further, S02 includes:

[0026] S021. Set up a web service and enable the WebSocket protocol;

[0027] S022. Create a temporary compilation folder based on the username used to establish the heartbeat connection, and monitor file changes;

[0028] S023. Encapsulate the packaged script into an asynchronous execution method and register a log listener;

[0029] S024. When a user's compilation request is received, the service executes the compilation by running an asynchronous method and returns the logs to the browser through a listener.

[0030] Furthermore, the file compilation in S03 is executed through the ES module packaging program.

[0031] Furthermore, the execution of file compilation in S03 includes: the backend program pushes the compilation log to the frontend, completes the build action, and the backend service returns the file path to notify the frontend to refresh.

[0032] Furthermore, the file compilation process in S03 includes:

[0033] S031. Perform abstract syntax tree transformation on the component code;

[0034] S032. Read the configuration items from the code;

[0035] S033. Write the component development template according to the configuration items;

[0036] S034, Compilation template file;

[0037] S035. Return the compilation information via WebSocket.

[0038] Furthermore, S04 includes: after the file is compiled, the browser receives a refresh request via a heartbeat packet and updates the browser interface to display the latest components.

[0039] Furthermore, the script in S07 is a compiled JavaScript script; the source code in S07 is a product edited by an editor, including but not limited to index.vue and index.jsx.

[0040] In one embodiment of the present invention, an SDK device for online compilation of custom components is also proposed, the device comprising:

[0041] The front-end project features an editing module, online editing, and real-time preview view;

[0042] SDK compilation module and SDK compilation backend service: when a user opens the online editor, the server creates a temporary storage folder and scans for file changes.

[0043] The file compilation module detects file changes and initiates the file compilation process when a user triggers a save action.

[0044] The refresh module, upon receiving a message from the backend, immediately performs a partial file refresh to render the latest view.

[0045] The property panel module allows you to observe the status of refreshed components in real time.

[0046] The front-end rendering module and attribute panel fields are generated by the back-end parsing component configuration script and provided to the front-end rendering.

[0047] In the backend processing module, when a user triggers the saving of a category, the backend will store the developed script and source code, and delete the temporary category.

[0048] Furthermore, the editing module includes:

[0049] Create a new module and a new front-end project;

[0050] The heartbeat connection module establishes a WebSocket heartbeat connection with the SDK during initialization.

[0051] Use code writing container modules, or input boxes or text editing components as code writing containers;

[0052] The heartbeat packet transmission module adds a save button, which transmits the input box value to the SDK for processing via a heartbeat packet when the save action is triggered.

[0053] Log module: Design an array to store the logs returned by heartbeat packets;

[0054] The log information output module outputs the log information returned by the array to the browser;

[0055] The compiler loads the module, and upon receiving a heartbeat message indicating that compilation is complete, it notifies the browser to load the compiled component address, thus enabling a preview refresh.

[0056] Furthermore, the SDK compilation module includes:

[0057] The protocol enables the module, sets up the web service, and enables the WebSocket protocol;

[0058] The file monitoring module creates a temporary compilation folder based on the username used to establish the heartbeat connection and monitors file changes.

[0059] Build the packaging module, encapsulate the packaging script into an asynchronous execution method, and register a log listener;

[0060] The execution and return module, upon receiving a user's compilation request, executes the compilation by running an asynchronous method and returns the logs to the browser through a listener.

[0061] Furthermore, file compilation in the file compilation module is performed through the ES module packaging program.

[0062] Furthermore, the execution of file compilation in the file compilation module includes: the backend program pushes webpack logs to the frontend, completes the build process, and the backend service returns the file path to notify the frontend to refresh.

[0063] Furthermore, the file compilation process in the file compilation module includes:

[0064] Transformation modules; abstract syntax tree transformation of component code.

[0065] Configure the reading module and read the configuration items from the code;

[0066] Configure the writing module and write the component development template according to the configuration items;

[0067] Template file compilation module, compile template files;

[0068] The information return module returns compilation information via WebSocket.

[0069] Furthermore, the refresh module includes: after the file is compiled, the browser receives a refresh request via a heartbeat packet and simultaneously updates the browser interface to display the latest components.

[0070] Furthermore, the scripts in the backend processing module are compiled JavaScript scripts; the source code in the backend processing module is the product of editing by an editor, including but not limited to index.vue and index.jsx.

[0071] In one embodiment of the present invention, a computer device is also proposed, including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, it implements the aforementioned SDK method for compiling custom components online.

[0072] In one embodiment of the present invention, a computer-readable storage medium is also provided, which stores a computer program that executes an SDK method for compiling custom components online.

[0073] Beneficial effects:

[0074] This invention eliminates the need for a local environment. It allows for real-time compilation and preview by writing code online through a browser. The implementation of components can be highly customized based on interface configuration, and compilation error information can be displayed on the window. Users can create and save the compiled components by category. Attached Figure Description

[0075] Figure 1 This is a schematic diagram of an online compilation method for SDKs of custom components according to an embodiment of the present invention;

[0076] Figure 2This is a schematic diagram of an online compilation SDK method for custom components according to an embodiment of the present invention;

[0077] Figure 3 This is a schematic diagram of the SDK operation interface in this invention;

[0078] Figure 4 This is a schematic diagram of the structure of an SDK device for online compilation of custom components according to an embodiment of the present invention;

[0079] Figure 5 This is a schematic diagram of a computer device structure according to an embodiment of the present invention. Detailed Implementation

[0080] The principles and spirit of the present invention will now be described with reference to several exemplary embodiments. It should be understood that these embodiments are provided merely to enable those skilled in the art to better understand and implement the present invention, and are not intended to limit the scope of the present invention in any way. Rather, these embodiments are provided to make this disclosure more thorough and complete, and to fully convey the scope of this disclosure to those skilled in the art.

[0081] Those skilled in the art will recognize that embodiments of the present invention can be implemented as a system, apparatus, device, method, or computer program product. Therefore, this disclosure can be specifically implemented in the following forms: entirely hardware, entirely software (including firmware, resident software, microcode, etc.), or a combination of hardware and software.

[0082] The technical terms involved in this invention and their explanations:

[0083] ES6, short for ECMAScript 6.0, is the next version standard for JavaScript.

[0084] The UMD specification is a general module definition pattern for JavaScript modules;

[0085] ES6 bundlers refer to programs that compile ES6 standard files into ES2015 or meet browser compatibility requirements. Common examples include webpack, esbuild, and rollup libraries.

[0086] According to an embodiment of the present invention, an online compilation method and apparatus for custom component SDKs are proposed, which eliminates the need to set up a local environment and enables real-time compilation and preview by writing code online through a browser.

[0087] The principles and spirit of the present invention will be explained in detail below with reference to several representative embodiments.

[0088] like Figure 1-3 As shown, the method includes:

[0089] S01. Online editing and real-time preview of the front-end project;

[0090] S02, SDK compilation backend service: When a user opens the online editor, the server simultaneously creates a temporary storage folder and scans for file changes;

[0091] S03. When a user triggers a save action, the backend service detects file changes and starts the file compilation process;

[0092] S04. Upon receiving a message from the backend, the frontend immediately refreshes the file and renders the latest view.

[0093] S05. The refreshed component's status can be observed in real time through the property panel;

[0094] S06. The attribute panel fields are generated by the backend parsing component configuration script and provided to the frontend for rendering;

[0095] S07. When a user triggers the saving of a category, the backend will store the developed script and source code, and delete the temporary category.

[0096] S01 includes:

[0097] S011. Create a new front-end project;

[0098] S012. During initialization, a WebSocket heartbeat connection is established with the SDK;

[0099] S013. Use input boxes or text editing components as code writing containers;

[0100] S014. Add a save button. When the save action is triggered, the input box value is passed to the SDK for processing via a heartbeat packet.

[0101] S015. Design an array to store the logs returned by heartbeat packets;

[0102] S016. Output the log information returned by the array to the browser;

[0103] S017. Upon receiving a heartbeat message indicating that compilation is complete, notify the browser to load the compiled component address and refresh the preview.

[0104] The S02 includes:

[0105] S021. Set up a web service and enable the WebSocket protocol;

[0106] S022, File monitoring module: Creates a temporary compilation folder based on the username of the user who established the heartbeat connection, and monitors file changes;

[0107] S023. Encapsulate the packaged script into an asynchronous execution method and register a log listener;

[0108] S024. When a user's compilation request is received, the service executes the compilation by running an asynchronous method and returns the logs to the browser through a listener.

[0109] The file compilation in S03 is performed by the ES module packaging program.

[0110] The execution of file compilation in S03 includes: the backend program pushes the compilation log to the frontend, completes the build action, and the backend service returns the file path to notify the frontend to refresh.

[0111] The file compilation process in S03 includes:

[0112] S031. Perform abstract syntax tree transformation on the component code;

[0113] S032. Read the configuration items from the code;

[0114] S033. Write the component development template according to the configuration items;

[0115] S034, Compilation template file;

[0116] S035. Return the compilation information via WebSocket.

[0117] S04 includes: after the file is compiled, the browser receives a refresh request via a heartbeat packet and updates the browser interface to display the latest components.

[0118] The script in S07 is a compiled JavaScript script; the source code in S07 is a product edited by an editor, including but not limited to index.vue and index.jsx.

[0119] It should be noted that although the operation of the method of the present invention has been described in a specific order in the above embodiments and figures, this does not require or imply that the operations must be performed in that specific order, or that all the operations shown must be performed to achieve the desired result. Additionally or alternatively, certain steps may be omitted, multiple steps may be combined into one step, and / or one step may be broken down into multiple steps.

[0120] Based on the same inventive concept, this invention also proposes an SDK device for online compilation of custom components. The implementation of this device can refer to the implementation of the methods described above, and repeated details will not be repeated. The term "module" as used below can be a combination of software and / or hardware that implements a predetermined function. Although the device described in the following embodiments is preferably implemented in software, hardware implementation, or a combination of software and hardware, is also possible and contemplated.

[0121] Figure 4 This is a schematic diagram of the SDK device structure for online compilation of custom components according to an embodiment of the present invention. Figure 4 As shown, the device includes:

[0122] Editing module 201: Online editing and real-time preview of the front-end project;

[0123] SDK compilation module 202, SDK compilation backend service: When a user opens the online editor, the server creates a temporary storage folder and scans for file changes.

[0124] File compilation module 203: When a user triggers a save action, the backend service detects file changes and starts the file compilation process;

[0125] Refresh module 204: Upon receiving a message from the backend, the frontend immediately performs a partial refresh of the file to render the latest view;

[0126] Property panel module 205: The refreshed component's status can be observed in real time through the property panel;

[0127] The front-end rendering module 206 and the attribute panel fill-in items are generated by the back-end parsing component configuration script and provided to the front-end rendering;

[0128] Backend processing module 207: When a user triggers the saving of a category, the backend will store the developed script and source code, and delete the temporary category.

[0129] The editing module 201 includes:

[0130] Create a new module and a new front-end project;

[0131] The heartbeat connection module establishes a WebSocket heartbeat connection with the SDK during initialization.

[0132] Use code writing container modules, or input boxes or text editing components as code writing containers;

[0133] The heartbeat packet transmission module adds a save button, which transmits the input box value to the SDK for processing via a heartbeat packet when the save action is triggered.

[0134] Log module: Design an array to store the logs returned by heartbeat packets;

[0135] The log information output module outputs the log information returned by the array to the browser;

[0136] The compiler loads the module, and upon receiving a heartbeat message indicating that compilation is complete, it notifies the browser to load the compiled component address, thus enabling a preview refresh.

[0137] The SDK compilation module 202 includes:

[0138] The protocol enables the module, sets up the web service, and enables the WebSocket protocol;

[0139] The file monitoring module creates a temporary compilation folder based on the username of the user who established the heartbeat connection and monitors file changes.

[0140] Build the packaging module, encapsulate the packaging script into an asynchronous execution method, and register a log listener;

[0141] The execution and return module, upon receiving a user's compilation request, executes the compilation by running an asynchronous method and returns the logs to the browser through a listener.

[0142] In file compilation module 203, file compilation is performed through the ES module packaging program.

[0143] The execution of file compilation in module 203 includes: the backend program pushes webpack logs to the frontend, completes the build process, and the backend service returns the file path to notify the frontend to refresh.

[0144] The file compilation process in the file compilation module 203 includes:

[0145] Transform modules and perform abstract syntax tree transformation on component code;

[0146] Configure the reading module and read the configuration items from the code;

[0147] Configure the writing module and write the component development template according to the configuration items;

[0148] The template file generation module uses shell commands to call webpack and generate template files from template data.

[0149] Template file compilation module, compile template files;

[0150] The information return module returns compilation information via WebSocket.

[0151] The refresh module 204 includes: after the file is compiled, the browser receives a refresh request via a heartbeat packet and updates the browser interface to display the latest components.

[0152] The scripts in the backend processing module 207 are compiled JavaScript scripts; the source code in the backend processing module 207 is the product of editing by an editor, including but not limited to index.vue and index.jsx.

[0153] It should be noted that although several modules of the SDK device for compiling custom components online are mentioned in the detailed description above, this division is merely exemplary and not mandatory. In fact, according to embodiments of the invention, the features and functions of two or more modules described above can be embodied in a single module. Conversely, the features and functions of a single module described above can be further divided and embodied by multiple modules.

[0154] Based on the aforementioned inventive concept, such as Figure 5 As shown, the present invention also proposes a computer device 300, including a memory 310, a processor 320, and a computer program 330 stored in the memory 310 and executable on the processor 320. When the processor 320 executes the computer program 330, it implements the aforementioned online compilation of custom components SDK method.

[0155] Based on the aforementioned inventive concept, the present invention also proposes a computer-readable storage medium storing a computer program that executes the aforementioned online compilation SDK method for custom components.

[0156] This invention eliminates the need for a local environment. It allows for real-time compilation and preview by writing code online through a browser. The implementation of components can be highly customized based on interface configuration, and compilation error information can be displayed on the window. Users can create and save the compiled components in categories.

[0157] While the spirit and principles of the invention have been described with reference to several specific embodiments, it should be understood that the invention is not limited to the disclosed specific embodiments, and the division of aspects does not imply that features in these aspects cannot be combined for benefit; such division is merely for ease of description. The invention is intended to cover various modifications and equivalent arrangements included within the spirit and scope of the appended claims.

[0158] Regarding the limitation of the scope of protection of this invention, those skilled in the art should understand that various modifications or variations that can be made by those skilled in the art without creative effort based on the technical solution of this invention are still within the scope of protection of this invention.

Claims

1. A method for compiling custom components online, characterized in that, The method includes: S01. Online editing and real-time preview of the front-end project; S01 includes: S011. Create a new front-end project; S012. During initialization, a WebSocket heartbeat connection is established with the SDK; S013. Use input boxes or text editing components as code writing containers; S014. Add a save button. When the save action is triggered, the input box value is passed to the SDK for processing via a heartbeat packet. S015. Design an array to store the logs returned by heartbeat packets; S016. Output the log information returned by the array to the browser; S017. Upon receiving a heartbeat message indicating that compilation is complete, notify the browser to load the compiled component address and refresh the preview. S02, SDK compilation backend service: When a user opens the online editor, the server simultaneously creates a temporary storage folder and scans for file changes; S02 includes: S021. Set up a web service and enable the WebSocket protocol; S022. Create a temporary compilation folder based on the username used to establish the heartbeat connection, and monitor file changes; S023. Encapsulate the packaged script into an asynchronous execution method and register a log listener; S024. When a user's compilation request is received, the service executes the compilation by running an asynchronous method and returns the logs to the browser through a listener. S03. When a user triggers a save action, the backend service detects file changes and starts the file compilation process; The file compilation process in S03 includes: S031. Perform abstract syntax tree transformation on the component code; S032. Read the configuration items from the code; S033. Write the component development template according to the configuration items; S034, Compilation template file; S035. Return compilation information via WebSocket; S04. Upon receiving a message from the backend, the frontend immediately refreshes the file and renders the latest view. S05. The refreshed component's status can be observed in real time through the property panel; S06. The attribute panel fields are generated by the backend parsing component configuration script and provided to the frontend for rendering; S07. When a user triggers the saving of a category, the backend will store the developed script and source code, and delete the temporary category.

2. The method for compiling custom components online according to claim 1, characterized in that, The file compilation in S03 is performed by the ES module packaging program.

3. The method for compiling custom components online according to claim 1, characterized in that, The execution of file compilation in S03 includes: the backend program pushes webpack logs to the frontend, completes the build process, and the backend service returns the file path to notify the frontend to refresh.

4. The method for compiling custom components online according to claim 1, characterized in that, S04 includes: after the file is compiled, the browser receives a refresh request via a heartbeat packet and updates the browser interface to display the latest components.

5. The method for compiling custom components online according to claim 1, characterized in that, The script in S07 is a compiled JavaScript script; the source code in S07 is a product edited by an editor, including but not limited to index.vue and index.jsx.

6. An SDK device for online compilation of custom components, characterized in that, The device includes: The front-end project features an editing module, online editing, and real-time preview view; The editing module includes: Create a new module and a new front-end project; The heartbeat connection module establishes a WebSocket heartbeat connection with the SDK during initialization. Use code writing container modules, or input boxes or text editing components as code writing containers; The heartbeat packet transmission module adds a save button, which transmits the input box value to the SDK for processing via a heartbeat packet when the save action is triggered. Log module: Design an array to store the logs returned by heartbeat packets; The log information output module outputs the log information returned by the array to the browser; Load the compiled module, and upon receiving a heartbeat message indicating that compilation is complete, notify the browser to load the compiled component address to refresh the preview; SDK compilation module and SDK compilation backend service: when a user opens the online editor, the server creates a temporary storage folder and scans for file changes. The SDK compilation module includes: The protocol enables the module, sets up the web service, and enables the WebSocket protocol; The file monitoring module creates a temporary compilation folder based on the username of the user who established the heartbeat connection and monitors file changes. Build the packaging module, encapsulate the packaging script into an asynchronous execution method, and register a log listener; The execution and return module, upon receiving a user's compilation request, executes the compilation by running an asynchronous method and returns the logs to the browser through a listener. The file compilation module detects file changes and initiates the file compilation process when a user triggers a save action. The file compilation process in the file compilation module includes: Transformation modules; abstract syntax tree transformation of component code. Configure the reading module and read the configuration items from the code; Configure the writing module and write the component development template according to the configuration items; Template file compilation module, compile template files; The information return module returns compilation information via WebSocket; The refresh module, upon receiving a message from the backend, immediately performs a partial file refresh to render the latest view. The property panel module allows you to observe the status of refreshed components in real time. The front-end rendering module and attribute panel fields are generated by the back-end parsing component configuration script and provided to the front-end rendering. In the backend processing module, when a user triggers the saving of a category, the backend will store the developed script and source code, and delete the temporary category.

7. The SDK device for online compilation of custom components according to claim 6, characterized in that, In the file compilation module, file compilation is performed by webpack.

8. The SDK device for online compilation of custom components according to claim 6, characterized in that, The file compilation module includes the following steps: the backend program pushes webpack logs to the frontend, completes the build process, and the backend service returns the file path to notify the frontend to refresh.

9. The SDK device for online compilation of custom components according to claim 6, characterized in that, The refresh module includes: after the file is compiled, the browser receives a refresh request via a heartbeat packet and updates the browser interface to display the latest components.

10. The SDK device for online compilation of custom components according to claim 6, characterized in that, The scripts in the backend processing module are compiled JavaScript scripts; the source code in the backend processing module is the product of editing by an editor, including but not limited to index.vue and index.jsx.

11. A computer device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the method according to any one of claims 1-5.

12. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that performs the method according to any one of claims 1-5.

Images