CN115951890A - Method, system and device for code conversion between different front-end frames - Google Patents
Method, system and device for code conversion between different front-end frames Download PDFInfo
- Publication number
- CN115951890A CN115951890A CN202310227287.0A CN202310227287A CN115951890A CN 115951890 A CN115951890 A CN 115951890A CN 202310227287 A CN202310227287 A CN 202310227287A CN 115951890 A CN115951890 A CN 115951890A
- Authority
- CN
- China
- Prior art keywords
- code
- matching
- syntax tree
- abstract syntax
- file
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Images
Classifications
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
- Document Processing Apparatus (AREA)
Abstract
The invention discloses a code conversion method, a system and a device among different front-end frames, which relate to the technical field of front ends, and the method comprises the steps of obtaining a source file assembly type, screening out a first file assembly and a second file assembly in a matching mode, analyzing the first file assembly to obtain a template block, a code block and a pattern block, analyzing the code block to obtain a first abstract syntax tree, traversing the first abstract syntax tree to obtain a second abstract syntax tree, traversing the template block to obtain a third abstract syntax tree, combining the second abstract syntax tree and the third abstract syntax tree to obtain a fourth abstract syntax tree, generating a first code based on the fourth abstract syntax tree, combining the first code with the code of the pattern block, and completing conversion; and analyzing the second file assembly to obtain a fifth abstract syntax tree, traversing the fifth abstract syntax tree to obtain a sixth abstract syntax tree, generating a second code based on the sixth abstract syntax tree, and completing conversion. The invention can improve the code conversion rate among different front-end frames.
Description
Technical Field
The present invention relates to the field of front-end technologies, and in particular, to a method, a system, and an apparatus for transcoding between different front-end frames.
Background
In the modern web front-end development project, except for a few development modes which are not separated by front and back ends, the front-end three-large framework is almost used for developing web applications, the three frames are respectively read, vue and Angular, most of domestic companies use the read and Vue frameworks mostly, vue is used as a successor in the framework, and the places where read and Angular are referenced, so that source code conversion between Vue and read and Angular is feasible and difficult, but is complicated repeatedly on the aspect of converting various grammatical writing methods, and only a small amount of codes can be converted manually. At present, another scheme for mutual conversion between read and Vue framework codes is to allow different frameworks to coexist in one project, so that a plurality of frameworks can be used without converting source codes, but the project is not easy to maintain as a whole and is not suitable for projects requiring a unified technology stack. It is therefore meaningful how to solve the migration problem between different front-end framework components, and in the prior art, for the mutual conversion between read and Vue framework codes, the Vue2 single-file source code is converted into AST (abstract syntax tree) through the Vue-compiler-sfc plug-in provided by Vue officially, the obtained AST is modified to conform to the syntax of the read-class component, and then the modified AST is used to generate the source code converted into the read component. However, the above method for code conversion between frames cannot process the conversion of some unique grammars of frames and the conversion of user-defined commands, has certain limitations, and has poor overall effect on the conversion of frame codes containing more user-defined commands and unique grammars.
Disclosure of Invention
In order to improve the code conversion rate among different front-end frames, the invention provides a code conversion method among different front-end frames, which comprises the following steps:
s1, obtaining the type of a source file assembly;
s2, matching the type of the source file assembly with a first preset file type, if the matching is successful, naming the source file assembly as a first file assembly and executing the step S3, and if the matching is failed, executing the step S9;
s3, analyzing the first file assembly to obtain a template block, a code block and a pattern block;
s4, analyzing the code block to obtain a first abstract syntax tree;
s5, traversing the first abstract syntax tree to obtain a second abstract syntax tree, wherein the step of obtaining the node type in the first abstract syntax tree and matching the node type with a first preset node type is carried out, if the matching is successful, the first rule is used for processing the successfully matched node, and if the matching is failed, the user sets corresponding second rules for all the unsuccessfully matched nodes for processing;
s6, traversing the template block to obtain a third abstract syntax tree, wherein the third abstract syntax tree is obtained and matched with a second preset node type, if matching is successful, a third rule is used for processing the successfully matched nodes, and if matching is failed, a user sets corresponding fourth rules for all the failed matched nodes for processing;
s7, combining the second abstract syntax tree and the third abstract syntax tree to obtain a fourth abstract syntax tree;
s8, generating a first code based on the fourth abstract syntax tree, and combining the first code with the code of the style block to obtain a file code of a first target assembly;
s9, matching the type of the source file assembly with a second preset file type, if the matching is successful, naming the source file assembly as a second file assembly and executing the step S10, and if the matching is failed, exiting;
s10, analyzing the second file assembly to obtain a fifth abstract syntax tree;
s11, traversing the fifth abstract syntax tree to obtain a sixth abstract syntax tree, wherein the sixth abstract syntax tree is obtained by obtaining the node type in the fifth abstract syntax tree and matching the node type with a third preset node type, if matching is successful, processing the successfully matched node by using a fifth rule, and if matching is failed, setting a corresponding sixth rule for all the unsuccessfully matched nodes by a user for processing;
and S12, generating a second code based on the sixth abstract syntax tree, wherein the second code is a file code of a second target component.
The invention principle is as follows: firstly, the type of a source file assembly is obtained and matched with a first preset file type, a first file assembly is screened out, then the first file assembly is analyzed to obtain a template block, a code block and a pattern block, wherein the template block is a template code of the first file assembly, the code block is a JS code (JavaScript is called 'JS' for short, and is a lightweight, interpretation or instant compilation programming language with function priority), and the pattern block is a pattern code of the first file assembly. The method comprises the steps of analyzing a code block to obtain a first abstract syntax tree (the abstract syntax tree is a tree-shaped representation of an abstract syntax structure of a source code, each node on the tree represents one structure in the source code, namely, a js code is subjected to structural conversion and converted into a data structure), traversing the first abstract syntax tree to obtain a second abstract syntax tree, and when code conversion is carried out between frames, processing can be carried out on a conventional syntax of the frames by adopting the existing first rule, but different second rules need to be set by a user for a unique syntax between the frames for processing, processing can be carried out on a built-in instruction of the frames by adopting the existing third rule, and processing is carried out on a custom instruction by setting different fourth rules by the user. And traversing the template block to obtain a third abstract syntax tree, wherein the built-in hooks (hook functions) of the framework can be processed by adopting the existing fifth rule, but the user is required to set different sixth rules for processing the self-defined hooks of the framework. And combining the second abstract syntax tree and the third abstract syntax tree to obtain a fourth abstract syntax tree, generating a first code by using the fourth abstract syntax tree (performing deep traversal on the fourth abstract syntax tree, constructing a character string capable of representing the converted code, and converting the character string into the code by using a code generation tool), wherein the code of the style block is universal for all components, so that the first code and the code of the style block are directly combined to obtain the file code of the first target component. The method comprises the steps of screening out a second file component by matching the type of a source file component with a second preset file type, analyzing the second file component to obtain a fifth abstract syntax tree, traversing the fifth abstract syntax tree to obtain a sixth abstract syntax tree, and generating a second code by using the sixth abstract syntax tree (performing deep traversal on the sixth abstract syntax tree to construct a character string capable of representing the converted code, and converting the character string into the code by using a code generation tool), wherein the second code is the file code of a second target component. By the method, the overall conversion rate of codes among different front-end frameworks can be improved.
Preferably, if the matching fails, the user sets corresponding second rules for all the nodes that fail to be matched, and the processing includes:
a1. acquiring a processing result of a corresponding node which fails to be matched;
a2. judging whether the processing result is successful, if so, executing a step a3, and if not, executing a step a4;
a3. adding the node type of the corresponding node with the matching failure into the first preset node type, and adding a second rule of the corresponding node with the matching failure into the first rule;
a4. setting a seventh rule for the matching failure corresponding node for processing;
a5. and (5) circulating the steps a1-a4 until the processing results of all the corresponding nodes which fail to be matched are successful.
The method comprises the steps that a user sets a second rule to process a node, so that the condition that the processing result is unsuccessful exists, whether the processing result is successful or not is judged by obtaining the processing result of the node, if the processing result is successful, the node type corresponding to the node and the second rule are added into a first preset node type and a first rule respectively, and therefore when the node is encountered for the second time, the first rule can be directly used for processing, and the conversion efficiency is improved; if the processing result fails, the seventh rule needs to be reset for the node to process until the processing result of the node is successful, and then the node type corresponding to the node and the rule for successfully processing the node are added into the first preset node type and the first rule.
Preferably, the method further includes obtaining version information of a preset front-end frame assembly, obtaining frame information of the preset front-end frame assembly based on the version information, and updating the first preset node type, the first rule, the second preset node type, the third rule, the third preset node type, and the fourth rule based on the frame information.
Because the versions of different front-end frames are updated all the time and the frames before and after updating are different, the rule of code conversion between the frames is updated by acquiring the version information and the frame information of the preset frames, so that the method can also solve the problem of code conversion between the updated front-end frames.
Preferably, if the matching is successful, the processing of the successfully matched node by using the first rule includes, based on a depth-first traversal method, converting a plurality of first preset functions in the successfully matched node to obtain a plurality of corresponding first functions, where all the first functions satisfy the first syntax of the first target component. The writing methods of different front-end frames are different, so that a plurality of first functions obtained by processing successfully matched nodes by using a first rule need to meet the first grammar of the first target assembly, otherwise, the plurality of first functions after conversion cannot be normally used in the first target assembly.
Preferably, if the matching is successful, the processing of the successfully matched node by using the third rule includes converting a plurality of built-in instructions in the successfully matched node based on a depth-first traversal method. The method for writing the file comprises the steps of converting a plurality of built-in instructions in a first file assembly into a plurality of built-in instructions, wherein the plurality of built-in instructions in the first file assembly are different in writing method among different front end frames, so that the first target assembly can achieve the same functions as the plurality of built-in instructions, and the plurality of converted built-in instructions meet the writing method of the first target assembly.
Preferably, the generating a first code based on the fourth abstract syntax tree and merging the first code with the code of the style block to obtain the file code of the first target component includes: processing the fourth abstract syntax tree to obtain a first code character string based on a first preset code generating tool, writing the first code character string into a first preset suffix file to obtain a first code, writing the code character string of the style block into a second preset suffix file to obtain a third code, and combining the first code and the third code to obtain a file code of the first target assembly.
The code of the style block is used for designing the style of a webpage or a file and is common to different frame components, so that the code of the style block does not need to be converted when different frame codes are converted, a first code character string generated based on a fourth abstract syntax tree is written into a first preset suffix file, a code character string of the style block is written into a second preset suffix file, the first preset suffix file is used for code specification and convenient reading, and the second preset suffix file is used for prompting a compiler to compile.
Preferably, if the matching is successful, the processing of the successfully matched node by using the fifth rule includes rewriting a plurality of second preset functions in the successfully matched node to obtain a plurality of rewriting results based on a depth-first traversal method, where all the rewriting results satisfy the second syntax of the second target component. The writing methods of different front-end frameworks are different, and the implementation modes of the same function are also different, so that a plurality of second preset functions in the successfully matched nodes are rewritten to obtain a plurality of rewriting results, all the rewriting results meet the second syntax of the second target component, and the plurality of second preset functions can be implemented in the second target component after the function implemented by the first file component is rewritten.
Preferably, the generating a second code based on the sixth abstract syntax tree, the second code being a file code of a second target component includes: and processing the sixth abstract syntax tree to obtain a second code character string based on a second preset code generating tool, and writing the second code character string into a third preset suffix file to obtain a second code, wherein the second code is a file code of the second target component. And writing the second code character string into a third preset suffix file, wherein the first is to ensure code specification and convenient reading, and the second is to prompt a compiler to compile.
In order to improve the transcoding effect between different front-end frames, the invention also provides a transcoding system between different front-end frames, the system comprising:
an acquisition unit configured to acquire a type of a source file component;
the first matching unit is used for matching the type of the source file assembly with a first preset file type, if the matching is successful, the source file assembly is named as a first file assembly and a first analysis unit is executed, and if the matching is failed, a second matching unit is executed;
the first analysis unit is used for analyzing the first file assembly to obtain a template block, a code block and a pattern block;
the second analysis unit is used for analyzing the code block to obtain a first abstract syntax tree;
the first traversal unit is used for traversing the first abstract syntax tree to obtain a second abstract syntax tree, acquiring the node type in the first abstract syntax tree and matching the node type with a first preset node type, if the matching is successful, processing the successfully matched node by using a first rule, and if the matching is failed, setting a corresponding second rule for all the unsuccessfully matched nodes by a user for processing;
the second traversal unit is used for traversing the template block to obtain a third abstract syntax tree, acquiring the node type in the third abstract syntax tree and matching the node type with a second preset node type, if the matching is successful, processing the successfully matched node by using a third rule, and if the matching is failed, setting a corresponding fourth rule for all the unsuccessfully matched nodes by a user for processing;
a merging unit, configured to merge the second abstract syntax tree and the third abstract syntax tree to obtain a fourth abstract syntax tree;
a first code generating unit, configured to generate a first code based on the fourth abstract syntax tree, and merge the first code with the code of the style block to obtain a file code of a first target component;
the second matching unit is used for matching the type of the source file assembly with a second preset file type, if the matching is successful, the source file assembly is named as a second file assembly and a third analysis unit is executed, and if the matching is failed, the file assembly is exited;
a third parsing unit, configured to parse the second file component to obtain a fifth abstract syntax tree;
the third traversal unit is used for traversing the fifth abstract syntax tree to obtain a sixth abstract syntax tree, acquiring the node types in the fifth abstract syntax tree and matching the node types with a third preset node type, if the matching is successful, processing the successfully matched nodes by using a fifth rule, and if the matching is failed, setting corresponding sixth rules for all the unsuccessfully matched nodes by a user for processing;
and a second code generation unit, configured to generate a second code based on the sixth abstract syntax tree, where the second code is a file code of a second target component.
The invention also provides a device for transcoding between different front-end frameworks, which comprises a memory, a processor and a computer program which is stored in the memory and can run on the processor, wherein the processor realizes the steps of the method for transcoding between different front-end frameworks when executing the computer program.
One or more technical schemes provided by the invention at least have the following technical effects or advantages:
the invention improves the code conversion rate among different front-end frameworks on the whole by adding the conversion method of unique grammar, custom instructions and custom hooks among the frameworks.
According to the invention, the method for successfully converting the unique grammar, the user-defined instruction and the user-defined hooks between the frames is added into the conversion rule of the codes between the frames, so that the codes can be directly processed by using the code conversion rule without independently processing each unique grammar, user-defined instruction and user-defined hooks when the same unique grammar, user-defined instruction and user-defined hooks are subsequently processed, thereby improving the code conversion efficiency while improving the code conversion rate.
The invention can process the problem of code conversion after updating the frame version by continuously acquiring the version information and the frame information of the preset frame and updating the code conversion rules among different front-end frames.
Drawings
The accompanying drawings, which are included to provide a further understanding of the embodiments of the invention and are incorporated in and constitute a part of this specification, illustrate embodiments of the invention and together with the description serve to explain the principles of the invention;
FIG. 1 is a flow chart of a transcoding method between different front-end frames according to the present invention;
fig. 2 is a schematic diagram of a transcoding system between different front-end frames according to the present invention.
Detailed Description
In order that the above objects, features and advantages of the present invention can be more clearly understood, a more particular description of the invention will be rendered by reference to the appended drawings. It should be noted that the embodiments of the present invention and features of the embodiments may be combined with each other without conflicting with each other.
In the following description, numerous specific details are set forth in order to provide a thorough understanding of the present invention, however, the present invention may be practiced in other ways than those specifically described and thus the scope of the present invention is not limited by the specific embodiments disclosed below.
Example one
Referring to fig. 1, a schematic flow chart of a transcoding method between different front-end frames according to the present invention is shown, where the method includes the following steps:
s1, obtaining the type of a source file assembly;
s2, matching the type of the source file assembly with a first preset file type, if the matching is successful, naming the source file assembly as a first file assembly and executing the step S3, and if the matching is failed, executing the step S9;
s3, analyzing the first file assembly to obtain a template block, a code block and a pattern block;
s4, analyzing the code block to obtain a first abstract syntax tree;
s5, traversing the first abstract syntax tree to obtain a second abstract syntax tree, wherein the second abstract syntax tree comprises the steps of obtaining the node type in the first abstract syntax tree and matching the node type with a first preset node type, if matching is successful, processing the successfully matched node by using a first rule, and if matching is failed, setting corresponding second rules for all the unsuccessfully matched nodes by a user for processing;
s6, traversing the template block to obtain a third abstract syntax tree, wherein the third abstract syntax tree is obtained and matched with a second preset node type, if matching is successful, a third rule is used for processing the successfully matched nodes, and if matching is failed, a user sets corresponding fourth rules for all the failed matched nodes for processing;
s7, combining the second abstract syntax tree and the third abstract syntax tree to obtain a fourth abstract syntax tree;
s8, generating a first code based on the fourth abstract syntax tree, and combining the first code with the code of the style block to obtain a file code of a first target assembly;
s9, matching the type of the source file assembly with a second preset file type, if the matching is successful, naming the source file assembly as a second file assembly and executing the step S10, and if the matching is failed, exiting;
s10, analyzing the second file assembly to obtain a fifth abstract syntax tree;
s11, traversing the fifth abstract syntax tree to obtain a sixth abstract syntax tree, wherein the sixth abstract syntax tree is obtained by obtaining the node type in the fifth abstract syntax tree and matching the node type with a third preset node type, if matching is successful, processing the successfully matched node by using a fifth rule, and if matching is failed, setting a corresponding sixth rule for all the unsuccessfully matched nodes by a user for processing;
and S12, generating a second code based on the sixth abstract syntax tree, wherein the second code is a file code of a second target component.
The method comprises the steps of analyzing codes into an Abstract Syntax Tree (AST), wherein the AST comprises a lexical analysis stage and a syntactic analysis stage, the lexical analysis stage converts codes in a character string form into a word stream (tokens), the word stream is similar to nodes in the AST, the syntactic analysis stage converts the word stream into an AST form, and meanwhile information in the word stream is converted into an expression structure of the AST. The conversion of the abstract syntax tree comprises the steps of receiving the AST and performing depth-first traversal on the AST, maintaining the overall state of the AST tree, performing operations such as adding, updating and removing on nodes in the process, wherein parameters of the conversion method are an original AST tree and a preset conversion rule, and a return result is a converted AST tree. Generating code through an abstract syntax tree includes depth-first traversing the entire AST, then constructing a string that can represent the converted code, and then converting the string into code through a code generation tool. The above-mentioned parsing of the code, the conversion of the abstract syntax tree and the generation of the code are all applicable to the present invention, and will not be described in detail later.
The method comprises the steps of matching the type of a source file assembly with a first preset file type (suffix file of Vue), screening out a first file assembly (Vue assembly), analyzing the first file assembly by using an assembly analysis tool (@ Vue/builder-sfc) to obtain a template block (template code), a code block (js code) and a style block (css code), and analyzing the code block by using an AST analysis tool (@ babel/parser) to obtain a first syntax abstract tree. Using an AST traversal operation tool (@ base/reverse) to traverse the first abstract syntax tree and the template block to respectively obtain a second abstract syntax tree and a third abstract syntax tree, then combining the second abstract syntax tree and the third abstract syntax tree to obtain a fourth abstract syntax tree (combined according to the React + JSXsyntax, JSX is a JavaScript syntax extension, is called JavaScript XML and is applied to the React framework and is the mark language of React), using an AST code generation tool (@ base/generator) to generate a first code for the fourth abstract syntax tree, then combining the first code and the code of the style block to obtain a file code of a first target assembly (React assembly), and completing the conversion from the first file assembly to the first target assembly. When the type of the source file component fails to be matched with the first preset file type, the type of the source file component is matched with a second preset file type (a file with jsx or tsx suffix), if the matching fails, the file is exited, if the matching succeeds, a second file component (reach component) is screened out, an AST (@ base/server) analysis tool is used, a jsx plug-in is added to analyze the second file component to obtain a fifth abstract syntax tree, an AST traversal tool (@ base/reverse) is used to perform traversal operation on the fifth abstract syntax tree to obtain a sixth abstract syntax tree, an AST code generation tool (@ base/generator) is used to generate a second code for the sixth abstract syntax tree, and the second code is the file code of a second target component (Vue component).
The method comprises the steps of obtaining a node type in the first abstract syntax tree and matching the node type with a first preset node type, if matching is successful, processing the successfully matched node by using a first rule, and converting a plurality of first preset functions (such as ref, reactive, props, calculated, way and life cycle hook functions) in the successfully matched node to obtain a plurality of corresponding first functions (such as ref corresponding useRef function, reactive corresponding useReactive function, props corresponding usrops function, calculated corresponding useComputed function and way corresponding useWatch function) based on a depth-first traversal method, wherein all the first functions meet the first syntax of a first target component (such as the Hooks syntax of a React component). If the matching fails, the user sets corresponding second rules for all the nodes which fail to be matched, and the second rules are processed, wherein a1, the processing result of the corresponding node which fails to be matched is obtained; a2. judging whether the processing result is successful, if so, executing a step a3, and if not, executing a step a4; a3. adding the node type of the corresponding node with the matching failure into the first preset node type, and adding a second rule of the corresponding node with the matching failure into the first rule; a4. setting a seventh rule for the matching failure corresponding node for processing; a5. and e, circulating the steps a1-a4 until the processing results of all the corresponding nodes with the matching failure are successful. Because a part of frame unique grammars cannot be processed by using the unified rule when frame conversion is carried out, and nodes which fail to be matched with the first preset node type correspond to the part of unique grammars, a user processes the nodes corresponding to the failure matching by setting a second rule, but the processing failure condition (for example, the grammar of a target component is not met after the unique grammar contained in the nodes is processed) may exist when the nodes are processed, so that whether the processing result is successful needs to be judged, if the processing result is not successful, a seventh rule (a new rule) needs to be set to process the nodes until the processing results of all the nodes corresponding to the failure matching are successful, then the node type of the failure matching is added into the first preset node type, and the rule of successfully processing the node of the failure matching is added into the first rule. The nodes corresponding to the type matching failure of the second preset node in the third abstract syntax tree are processed through the fourth rule, some user-defined instructions in the corresponding first file assembly cannot be processed through the unified rule, the nodes corresponding to the type matching failure of the third preset node in the fifth abstract syntax tree are processed through the sixth rule, some user-defined hooks in the corresponding second file assembly cannot be processed through the unified rule, the specific processing mode can refer to the mode of processing the nodes corresponding to the type matching failure of the first preset node in the first abstract syntax tree through the second rule, and the method is not elaborated.
The method comprises the steps of obtaining node types in the third abstract syntax tree and matching the node types with a second preset node type, if matching is successful, processing the successfully matched nodes by using a third rule, and converting a plurality of built-in instructions (such as v-if, v-model and v-for instructions) in the successfully matched nodes based on a depth-first traversal method, for example, when data in an array is required to be circulated in a template block of a Vue component, the packaged v-for instructions can be directly used for realizing the data in the array, but the read component does not have such instructions, the read component is required to realize circulation of the list by using a map () function, a plurality of built-in instructions in the template block have corresponding realization methods in the read component, and the conversion method of the v-for instructions can be referred specifically, so that the method is not set forth.
The traversing the fifth abstract syntax tree to obtain a sixth abstract syntax tree includes obtaining a node type in the fifth abstract syntax tree and matching the node type with a third preset node type, if the matching is successful, processing a successfully matched node by using a fifth rule, and rewriting a plurality of second preset functions (such as usesate, useEffect, useemo and other built-in Hooks) in the successfully matched node based on a depth-first traversal method to obtain a plurality of rewriting results, where all the rewriting results satisfy a second syntax (Composition API syntax) of the second target component, for example, in a read component, the basic principle of useState is that relevant information of useState Hooks is stored in a fiber node (the fiber is a data structure) of a corresponding function component, and relevant information of dom and fiber tree and other information are stored in each fiber node, and the same instance of the corresponding function is required to be stored in an esite component. The above example is only for explanation, and the rewriting method for rewriting the referable usestat Hooks according to the third preset rule for the specific second preset function is not described in detail.
Generating a first code based on the fourth abstract syntax tree and merging the first code with the code of the style block to obtain a file code of the first target component, wherein the step of generating the first code based on the fourth abstract syntax tree comprises the following steps: processing the fourth abstract syntax tree to obtain a first code character string based on a first preset code generating tool (@ babel/generator), writing the first code character string into a first preset suffix file (@ jsx or tsx suffix file) to obtain the first code, writing the code character string of the pattern block into a second preset suffix file (. Css suffix file) to obtain a third code, and combining the first code and the third code to obtain a file code of the first target assembly.
Wherein generating a second code based on the sixth abstract syntax tree, the second code being file code of a second target component comprises: processing the sixth abstract syntax tree to obtain a second code character string based on a second preset code generating tool (@ babel/generator), and writing the second code character string into a third preset suffix file (. Vue suffix file) to obtain the second code, wherein the second code is a file code of the second target component.
The method further comprises the steps of obtaining version information of a preset front-end frame assembly, obtaining frame information of the preset front-end frame assembly based on the version information, and updating the first preset node type, the first rule, the second preset node type, the third rule, the third preset node type and the fourth rule based on the frame information. Since different front-end frameworks are updated continuously and the difference between the front-end frameworks before and after updating is large, for example, vue2.0 is an Option API (Option API) syntax, and vue3.0 is a combined API (Composition API) syntax, for example, the React16.8.0 version starts to introduce the Hooks syntax, but the version before the React has no Hooks syntax, and therefore, the transcoding rules of the same front-end framework but different versions also have difference, so that the transcoding rules before the front-end framework need to be updated continuously.
Example two
Please refer to fig. 2, which is a schematic diagram illustrating a transcoding system between different front-end frameworks according to the present invention, the system includes:
an acquisition unit configured to acquire a type of a source file component;
the first matching unit is used for matching the type of the source file assembly with a first preset file type, if the matching is successful, the source file assembly is named as a first file assembly and a first analysis unit is executed, and if the matching is failed, a second matching unit is executed;
the first analysis unit is used for analyzing the first file assembly to obtain a template block, a code block and a pattern block;
the second analysis unit is used for analyzing the code block to obtain a first abstract syntax tree;
the first traversal unit is used for traversing the first abstract syntax tree to obtain a second abstract syntax tree, acquiring the node type in the first abstract syntax tree and matching the node type with a first preset node type, if the matching is successful, processing the successfully matched node by using a first rule, and if the matching is failed, setting a corresponding second rule for all the unsuccessfully matched nodes by a user for processing;
the second traversal unit is used for traversing the template block to obtain a third abstract syntax tree, acquiring the node type in the third abstract syntax tree and matching the node type with a second preset node type, if the matching is successful, processing the successfully matched node by using a third rule, and if the matching is failed, setting a corresponding fourth rule for all the unsuccessfully matched nodes by a user for processing;
a merging unit, configured to merge the second abstract syntax tree and the third abstract syntax tree to obtain a fourth abstract syntax tree;
a first code generating unit, configured to generate a first code based on the fourth abstract syntax tree, and merge the first code with the code of the style block to obtain a file code of a first target component;
the second matching unit is used for matching the type of the source file assembly with a second preset file type, if the matching is successful, the source file assembly is named as a second file assembly and a third analysis unit is executed, and if the matching is failed, the file assembly is exited;
a third parsing unit, configured to parse the second file component to obtain a fifth abstract syntax tree;
the third traversal unit is used for traversing the fifth abstract syntax tree to obtain a sixth abstract syntax tree, acquiring the node types in the fifth abstract syntax tree and matching the node types with a third preset node type, if the matching is successful, processing the successfully matched nodes by using a fifth rule, and if the matching is failed, setting corresponding sixth rules for all the unsuccessfully matched nodes by a user for processing;
and the second code generating unit is used for generating a second code based on the sixth abstract syntax tree, wherein the second code is the file code of a second target component.
EXAMPLE III
The third embodiment of the present invention provides a device for transcoding between different front-end frameworks, which includes a memory, a processor, and a computer program that is stored in the memory and is executable on the processor, where the processor implements the steps of the method for transcoding between different front-end frameworks when executing the computer program.
The processor may be a Central Processing Unit (CPU), or other general-purpose processor, a digital signal processor (digital signal processor), an Application Specific Integrated Circuit (Application Specific Integrated Circuit), a ready-made programmable gate array (field programmable gate array) or other programmable logic device, a discrete gate or transistor logic device, a discrete hardware component, or the like. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like.
The memory may be used to store the computer programs and/or modules, and the processor may implement the various functions of a transcoding device between different front end frames of the invention by running or executing data stored in the memory. The memory may mainly include a storage program area and a storage data area, wherein the storage program area may store an operating system, an application program required for at least one function (such as a sound playing function, an image playing function, etc.), and the like. Further, the memory may include high speed random access memory, and may also include non-volatile memory, such as a hard disk, a memory, a plug-in hard disk, a smart memory card, a secure digital card, a flash memory card, at least one magnetic disk storage device, a flash memory device, or other volatile solid state storage device.
Having described the basic concept of the invention, it should be apparent to those skilled in the art that the foregoing detailed disclosure is to be considered merely as illustrative and not restrictive of the broad invention. Various modifications, improvements and adaptations to the present description may occur to those skilled in the art, although not explicitly described herein. Such modifications, improvements and adaptations are proposed in the present specification and thus fall within the spirit and scope of the exemplary embodiments of the present specification.
Also, the description uses specific words to describe embodiments of the description. Reference to "one embodiment," "an embodiment," and/or "some embodiments" means a feature, structure, or characteristic described in connection with at least one embodiment of the specification. Therefore, it is emphasized and should be appreciated that two or more references to "an embodiment" or "one embodiment" or "an alternative embodiment" in various places throughout this specification are not necessarily all referring to the same embodiment. Furthermore, some features, structures, or characteristics of one or more embodiments of the specification may be combined as appropriate.
Moreover, those skilled in the art will appreciate that aspects of the present description may be illustrated and described in terms of several patentable species or situations, including any new and useful combination of processes, machines, manufacture, or materials, or any new and useful improvement thereof. Accordingly, aspects of this description may be performed entirely by hardware, entirely by software (including firmware, resident software, micro-code, etc.) or by a combination of hardware and software. The above hardware or software may be referred to as "data block," module, "" engine, "" unit, "" component, "or" system. Furthermore, aspects of the present description may be represented as a computer product, including computer readable program code, embodied in one or more computer readable media.
The computer storage medium may comprise a propagated data signal with the computer program code embodied therewith, for example, on a baseband or as part of a carrier wave. The propagated signal may take any of a variety of forms, including electromagnetic, optical, etc., or any suitable combination. A computer storage medium may be any computer-readable medium that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code on a computer storage medium may be propagated over any suitable medium, including radio, cable, fiber optic cable, RF, or the like, or any combination of the preceding.
Computer program code required for the operation of various portions of this specification may be written in any one or more programming languages, including an object oriented programming language such as Java, scala, smalltalk, eiffel, JADE, emerald, C + +, C #, VB.NET, python, and the like, a conventional programming language such as C, visual Basic, fortran 2003, perl, COBOL 2002, PHP, ABAP, a dynamic programming language such as Python, ruby, and Groovy, or other programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the latter scenario, the remote computer may be connected to the user's computer through any network format, such as a Local Area Network (LAN) or a Wide Area Network (WAN), or the connection may be made to an external computer (for example, through the Internet), or in a cloud computing environment, or as a service, such as a software as a service (SaaS).
Additionally, the order in which the elements and sequences of the process are recited in the specification, the use of alphanumeric characters, or other designations, is not intended to limit the order in which the processes and methods of the specification occur, unless otherwise specified in the claims. While various presently contemplated embodiments of the invention have been discussed in the foregoing disclosure by way of example, it is to be understood that such detail is solely for that purpose and that the appended claims are not limited to the disclosed embodiments, but, on the contrary, are intended to cover all modifications and equivalent arrangements that are within the spirit and scope of the embodiments herein. For example, although the system components described above may be implemented by hardware devices, they may also be implemented by software-only solutions, such as installing the described system on an existing server or mobile device.
Similarly, it should be noted that in the preceding description of embodiments of the present specification, various features are sometimes grouped together in a single embodiment, figure, or description thereof for the purpose of streamlining the disclosure aiding in the understanding of one or more of the embodiments. This method of disclosure, however, is not intended to imply that more features than are expressly recited in a claim. Indeed, the embodiments may be characterized as having less than all of the features of a single embodiment disclosed above.
For each patent, patent application publication, and other material, such as articles, books, specifications, publications, documents, etc., cited in this specification, the entire contents of each are hereby incorporated by reference into this specification. Except where the application history document does not conform to or conflict with the contents of the present specification, it is to be understood that the application history document, as used herein in the present specification or appended claims, is intended to define the broadest scope of the present specification (whether presently or later in the specification) rather than the broadest scope of the present specification. It is to be understood that the descriptions, definitions and/or uses of terms in the accompanying materials of this specification shall control if they are inconsistent or contrary to the descriptions and/or uses of terms in this specification.
Finally, it should be understood that the embodiments described herein are merely illustrative of the principles of the embodiments described herein. Other variations are also possible within the scope of the present description. Thus, by way of example, and not limitation, alternative configurations of the embodiments of the present specification can be seen as consistent with the teachings of the present specification. Accordingly, the embodiments of the present description are not limited to only those embodiments explicitly described and depicted herein.
While preferred embodiments of the present invention have been described, additional variations and modifications in those embodiments may occur to those skilled in the art once they learn of the basic inventive concepts. Therefore, it is intended that the appended claims be interpreted as including preferred embodiments and all such alterations and modifications as fall within the scope of the invention.
It will be apparent to those skilled in the art that various changes and modifications may be made in the present invention without departing from the spirit and scope of the invention. Thus, if such modifications and variations of the present invention fall within the scope of the claims of the present invention and their equivalents, the present invention is also intended to include such modifications and variations.
Claims (10)
1. A method for transcoding between different front-end frames, the method comprising the steps of:
s1, obtaining the type of a source file assembly;
s2, matching the type of the source file assembly with a first preset file type, if the matching is successful, naming the source file assembly as a first file assembly and executing the step S3, and if the matching is failed, executing the step S9;
s3, analyzing the first file assembly to obtain a template block, a code block and a pattern block;
s4, analyzing the code block to obtain a first abstract syntax tree;
s5, traversing the first abstract syntax tree to obtain a second abstract syntax tree, wherein the step of obtaining the node type in the first abstract syntax tree and matching the node type with a first preset node type is carried out, if the matching is successful, the first rule is used for processing the successfully matched node, and if the matching is failed, the user sets corresponding second rules for all the unsuccessfully matched nodes for processing;
s6, traversing the template block to obtain a third abstract syntax tree, wherein the third abstract syntax tree is obtained and matched with a second preset node type, if matching is successful, a third rule is used for processing the successfully matched nodes, and if matching is failed, a user sets corresponding fourth rules for all the failed matched nodes for processing;
s7, combining the second abstract syntax tree and the third abstract syntax tree to obtain a fourth abstract syntax tree;
s8, generating a first code based on the fourth abstract syntax tree, and combining the first code with the code of the style block to obtain a file code of a first target assembly;
s9, matching the type of the source file assembly with a second preset file type, if the matching is successful, naming the source file assembly as a second file assembly and executing the step S10, and if the matching is failed, exiting;
s10, analyzing the second file component to obtain a fifth abstract syntax tree;
s11, traversing the fifth abstract syntax tree to obtain a sixth abstract syntax tree, wherein the sixth abstract syntax tree is obtained by obtaining the node type in the fifth abstract syntax tree and matching the node type with a third preset node type, if matching is successful, processing the successfully matched node by using a fifth rule, and if matching is failed, setting a corresponding sixth rule for all the unsuccessfully matched nodes by a user for processing;
and S12, generating a second code based on the sixth abstract syntax tree, wherein the second code is a file code of a second target component.
2. The method of claim 1, wherein if matching fails, the user sets corresponding second rules for all nodes that fail matching, and the processing includes:
a1. acquiring a processing result of a corresponding node which fails to be matched;
a2. judging whether the processing result is successful, if so, executing a step a3, and if not, executing a step a4;
a3. adding the node type of the node corresponding to the matching failure into the first preset node type, and adding the second rule of the node corresponding to the matching failure into the first rule;
a4. setting a seventh rule for the matching failure corresponding node for processing;
a5. and e, circulating the steps a1-a4 until the processing results of all the corresponding nodes with the matching failure are successful.
3. The method of claim 1, further comprising obtaining version information of a pre-defined front-end framework assembly, obtaining framework information of the pre-defined front-end framework assembly based on the version information, and updating the first pre-defined node type, the first rule, the second pre-defined node type, the third rule, the third pre-defined node type, and the fourth rule based on the framework information.
4. The method of claim 1, wherein if the matching is successful, processing the successfully matched nodes using a first rule comprises converting a plurality of first predetermined functions in the successfully matched nodes to obtain a corresponding plurality of first functions based on a depth-first traversal method, wherein all the first functions satisfy a first syntax of the first target component.
5. The method of claim 1, wherein if the matching is successful, processing the successfully matched node using a third rule comprises converting built-in instructions in the successfully matched node based on a depth-first traversal method.
6. The method of claim 1, wherein generating a first code based on the fourth abstract syntax tree and combining the first code with the code of the style block to obtain a file code of the first target component comprises: processing the fourth abstract syntax tree to obtain a first code character string based on a first preset code generating tool, writing the first code character string into a first preset suffix file to obtain a first code, writing the code character string of the style block into a second preset suffix file to obtain a third code, and combining the first code and the third code to obtain a file code of the first target assembly.
7. The method of claim 1, wherein if the matching is successful, processing the successfully matched node using a fifth rule comprises, based on a depth-first traversal method, rewriting a plurality of second predetermined functions in the successfully matched node to obtain a plurality of rewriting results, all of which satisfy the second syntax of the second target component.
8. The method of claim 1, wherein generating a second code based on the sixth abstract syntax tree, the second code being a file code of a second target component comprises: and processing the sixth abstract syntax tree to obtain a second code character string based on a second preset code generation tool, and writing the second code character string into a third preset suffix file to obtain a second code, wherein the second code is a file code of the second target component.
9. A system for transcoding between different front end frames, the system comprising:
an acquisition unit configured to acquire a type of a source file component;
the first matching unit is used for matching the type of the source file assembly with a first preset file type, if the matching is successful, the source file assembly is named as a first file assembly and a first analysis unit is executed, and if the matching is failed, a second matching unit is executed;
the first analysis unit is used for analyzing the first file assembly to obtain a template block, a code block and a pattern block;
the second analysis unit is used for analyzing the code block to obtain a first abstract syntax tree;
the first traversal unit is used for traversing the first abstract syntax tree to obtain a second abstract syntax tree, acquiring the node type in the first abstract syntax tree and matching the node type with a first preset node type, if the matching is successful, processing the successfully matched node by using a first rule, and if the matching is failed, setting a corresponding second rule for all the unsuccessfully matched nodes by a user for processing;
the second traversal unit is used for traversing the template block to obtain a third abstract syntax tree, acquiring the node type in the third abstract syntax tree and matching the node type with a second preset node type, if the matching is successful, processing the successfully matched node by using a third rule, and if the matching is failed, setting a corresponding fourth rule for all the unsuccessfully matched nodes by a user for processing;
a merging unit, configured to merge the second abstract syntax tree and the third abstract syntax tree to obtain a fourth abstract syntax tree;
a first code generating unit, configured to generate a first code based on the fourth abstract syntax tree, and merge the first code with the code of the style block to obtain a file code of a first target component;
the second matching unit is used for matching the type of the source file assembly with a second preset file type, if the matching is successful, the source file assembly is named as a second file assembly and a third analysis unit is executed, and if the matching is failed, the operation is quitted;
a third parsing unit, configured to parse the second file component to obtain a fifth abstract syntax tree;
a third traversal unit, configured to traverse the fifth abstract syntax tree to obtain a sixth abstract syntax tree, where the sixth abstract syntax tree includes obtaining a node type in the fifth abstract syntax tree and matching the node type with a third preset node type, if matching is successful, processing a node that is successfully matched using a fifth rule, and if matching is failed, setting, by a user, corresponding sixth rules for all nodes that are failed to be matched and processing the sixth rules;
and a second code generation unit, configured to generate a second code based on the sixth abstract syntax tree, where the second code is a file code of a second target component.
10. An apparatus for transcoding between different front-end chassis, comprising a memory, a processor and a computer program stored in the memory and executable on the processor, wherein the processor when executing the computer program performs the steps of the method for transcoding between different front-end chassis according to any of the claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310227287.0A CN115951890B (en) | 2023-03-10 | 2023-03-10 | Method, system and device for transcoding between different front end frameworks |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310227287.0A CN115951890B (en) | 2023-03-10 | 2023-03-10 | Method, system and device for transcoding between different front end frameworks |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN115951890A true CN115951890A (en) | 2023-04-11 |
| CN115951890B CN115951890B (en) | 2023-05-12 |
Family
ID=85906933
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310227287.0A Active CN115951890B (en) | 2023-03-10 | 2023-03-10 | Method, system and device for transcoding between different front end frameworks |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115951890B (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116627402A (en) * | 2023-07-19 | 2023-08-22 | 云筑信息科技(成都)有限公司 | Method for realizing custom component configuration in low-code platform based on React |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20060230378A1 (en) * | 2005-03-30 | 2006-10-12 | Lucent Technologies Inc. | Technique for constructing syntax-directed search and modifications in program transformation systems |
| US20130031536A1 (en) * | 2011-07-28 | 2013-01-31 | De Subrato K | Apparatus and method for improving the performance of compilers and interpreters of high level programming languages |
| CN106371829A (en) * | 2016-08-24 | 2017-02-01 | 北京邮电大学 | Modularization thinking-based template framework design method and system |
| CN110442330A (en) * | 2019-07-05 | 2019-11-12 | 五八有限公司 | List element conversion method, device, electronic equipment and storage medium |
| CN112988163A (en) * | 2021-04-01 | 2021-06-18 | 中国工商银行股份有限公司 | Intelligent programming language adaptation method and device, electronic equipment and medium |
| CN113553064A (en) * | 2021-07-07 | 2021-10-26 | 北京计算机技术及应用研究所 | Web front-end code conversion method |
| CN113760729A (en) * | 2021-01-26 | 2021-12-07 | 北京沃东天骏信息技术有限公司 | Code detection method and device |
| CN113805881A (en) * | 2021-09-18 | 2021-12-17 | 上海仪电（集团）有限公司中央研究院 | Method and device for converting front end components between different frames |
-
2023
- 2023-03-10 CN CN202310227287.0A patent/CN115951890B/en active Active
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20060230378A1 (en) * | 2005-03-30 | 2006-10-12 | Lucent Technologies Inc. | Technique for constructing syntax-directed search and modifications in program transformation systems |
| US20130031536A1 (en) * | 2011-07-28 | 2013-01-31 | De Subrato K | Apparatus and method for improving the performance of compilers and interpreters of high level programming languages |
| CN106371829A (en) * | 2016-08-24 | 2017-02-01 | 北京邮电大学 | Modularization thinking-based template framework design method and system |
| CN110442330A (en) * | 2019-07-05 | 2019-11-12 | 五八有限公司 | List element conversion method, device, electronic equipment and storage medium |
| CN113760729A (en) * | 2021-01-26 | 2021-12-07 | 北京沃东天骏信息技术有限公司 | Code detection method and device |
| CN112988163A (en) * | 2021-04-01 | 2021-06-18 | 中国工商银行股份有限公司 | Intelligent programming language adaptation method and device, electronic equipment and medium |
| CN113553064A (en) * | 2021-07-07 | 2021-10-26 | 北京计算机技术及应用研究所 | Web front-end code conversion method |
| CN113805881A (en) * | 2021-09-18 | 2021-12-17 | 上海仪电（集团）有限公司中央研究院 | Method and device for converting front end components between different frames |
Non-Patent Citations (3)
| Title |
|---|
| FABIO FERREIRA等: "Detecting code smells in React-based Web apps", INFORMATION AND SOFTWARE TECHNOLOGY * |
| 李博: "企业移动端开发框架初步探索", 中华建设 * |
| 樊鼎威: "基于TypeScript的前端MVVM框架的设计与研究", 中国优秀硕士学位论文全文数据库 信息科技辑 * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116627402A (en) * | 2023-07-19 | 2023-08-22 | 云筑信息科技(成都)有限公司 | Method for realizing custom component configuration in low-code platform based on React |
| CN116627402B (en) * | 2023-07-19 | 2023-10-20 | 云筑信息科技(成都)有限公司 | Method for realizing custom component configuration in low-code platform based on React |
Also Published As
| Publication number | Publication date |
|---|---|
| CN115951890B (en) | 2023-05-12 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9182980B2 (en) | Expansion and reduction of source code for code refactoring | |
| CN110149800B (en) | Apparatus for processing abstract syntax tree associated with source code of source program | |
| US9928156B2 (en) | Missing include suggestions for external files | |
| US10452390B2 (en) | Machine-based instruction editing | |
| US9383979B2 (en) | Optimizing intermediate representation of script code by eliminating redundant reference count operations | |
| CN108920496B (en) | Rendering method and device | |
| CN117009231B (en) | Automatic generation method and device for high-reliability unit test based on conversational large language model | |
| US9298433B2 (en) | Optimizing intermediate representation of script code for fast path execution | |
| US20080295070A1 (en) | Native access to foreign code environment | |
| US20090328016A1 (en) | Generalized expression trees | |
| US20110239200A1 (en) | Method for compiling a computer program | |
| CN111767076A (en) | Code reconstruction method and device | |
| US9047100B2 (en) | Abstract syntax tree transformation | |
| CN117113347A (en) | Large-scale code data feature extraction method and system | |
| US6625807B1 (en) | Apparatus and method for efficiently obtaining and utilizing register usage information during software binary translation | |
| CN115951890A (en) | Method, system and device for code conversion between different front-end frames | |
| US8875089B2 (en) | Workspace model for interrelated projects | |
| US9747085B2 (en) | Source code generation from prototype source | |
| CN111309301B (en) | Program language conversion method, device and conversion equipment | |
| US9697021B2 (en) | Modifiable high-level intermediate representation of source code | |
| Kramer et al. | Reflection in attribute grammars | |
| US11615014B2 (en) | Using relocatable debugging information entries to save compile time | |
| Nellaiyapen | Practical WebAssembly: Explore the fundamentals of WebAssembly programming using Rust | |
| CN113867733A (en) | Java byte code modification method and device | |
| CN117785156A (en) | Single file optimization method and device, electronic equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |