Vite-based remote web component type automatic acquisition and conversion method and device

Abstract

This invention provides a method and device for automatically acquiring and converting remote Web component types based on Vite, including project initialization and configuration parsing; intelligent scanning and import identification of project source code; filtering and verification of identified remote module addresses; parallel acquisition of corresponding type definition files; parsing and content extraction of the acquired type definition files to obtain original type definition content; extraction of component definition information from the original type definition content; event type conversion processing of the original type definition content to generate target type definitions that conform to the target framework event model; generation of type declaration files; incremental updates to maintain the synchronization of type declaration files; and cache management of processed remote module addresses and acquired type definition content. This solves the problems of missing remote component type definitions, incompatibility with event systems, high maintenance costs, and poor development experience in existing technologies.

Description

Technical Field

[0001] This invention belongs to the field of front-end development tool technology, specifically relating to a method and device for automatically acquiring and converting remote Web component types based on Vite. Background Technology

[0002] With the rise of micro-frontend architecture and component library sharing models, remote component loading has become an important pattern in modern front-end development. Developers dynamically import remote JavaScript modules via HTTP / HTTPS protocols, enabling cross-project reuse and dynamic loading of components. However, using remote components in TypeScript projects faces the following technical challenges: Missing type definition issue: Remote components are usually provided in JavaScript form and lack TypeScript type definition files, causing the IDE to be unable to provide IntelliSense and the TypeScript compiler to report errors.

[0003] Event system incompatibility: Web Components uses the CustomEvent event system, while frameworks such as Vue.js use the traditional function parameter event system, resulting in incompatibility in type definitions.

[0004] Manual maintenance is costly: Developers need to manually download and manage the type definition files of remote components, and the type files need to be updated synchronously when the components are updated.

[0005] Poor development experience: The lack of type definitions prevents developers from enjoying TypeScript's type checking, auto-completion, and other features, reducing development efficiency.

[0006] Hot updates are not supported: Traditional solutions cannot dynamically update the type definitions of remote components during development and require restarting the development server. Summary of the Invention

[0007] This invention relates to a method and device for automatically acquiring and converting remote Web component types based on Vite, in order to solve the technical problems of missing remote component type definitions, incompatibility with event systems, high maintenance costs, and poor development experience in the prior art.

[0008] To achieve the above objectives, one or more embodiments of this application provide a method for automatically acquiring and converting remote Web component types based on Vite, including: Step S1: Project initialization and configuration parsing; Step S2: Perform intelligent scanning and import identification on the project source code to locate references to remote modules; Step S3: Filter and verify the identified remote module addresses; Step S4: Based on the verified remote module address, obtain the corresponding type definition file in parallel; Step S5: Parse and extract the content of the obtained type definition file to obtain the original type definition content; Step S6: Extract component definition information from the original type definition content; Step S7: Perform event type conversion processing on the original type definition to generate a target type definition that conforms to the target framework event model; Step S8: Generate a type declaration file based on the target type definition; Step S9: In response to changes in project files, perform incremental updates to maintain the synchronization of type declaration files; Step S10: Perform cache management on the processed remote module addresses and the obtained type definition content.

[0009] Based on the above technical solution of the present invention, the following improvements can also be made: Optionally, step S1 configuration parsing includes parsing preset configuration parameters, which at least include the project file scanning directory, type file output path, and regular expression rules for matching remote module addresses; Project initialization includes initializing the caching mechanism and checking for existing type declaration files in the project; Enable or adjust log output and debug mode according to the configuration.

[0010] Optionally, step S2 includes: scanning source code files in the project according to a pre-configured file matching pattern; parsing different types of source code files using corresponding parsers to extract their source code content; identifying all import statements in the source code using a pattern matching method and extracting the address of the remote module from them.

[0011] Optionally, step S4 includes: replacing the file extension in the remote module address with the target type definition file extension to construct a type file acquisition address; and using parallel asynchronous operation, simultaneously sending requests to multiple type file acquisition addresses to download the corresponding type definition file.

[0012] Optionally, step S5 includes: detecting whether the acquired type definition file contains source code mapping information; when the source code mapping information is detected, parsing the information to obtain the mapping data encoded therein; and extracting the original type definition content that has not been converted or compressed from the mapping data.

[0013] Optionally, step S7 includes: parsing the original type definition content into an abstract syntax tree; traversing the abstract syntax tree to locate the component type definition declaration; The event-related parameters in the component type definition declaration are analyzed and transformed, converting the discrete function parameter form into a form that conforms to the custom event object specification.

[0014] Optionally, step S8 includes: Generate a first type declaration file, which contains the converted individual component type definitions; Generate a second type declaration file, which declares the module type corresponding to each remote module address; Generate a third type declaration file, which registers the component type to the target framework's global component interface.

[0015] Optionally, step S9 includes: listening for change events in the project source code files; when a changed source code file is detected to meet predetermined processing conditions, performing the incremental processing flow from steps S2 to S8 on the changed source code file; and updating the corresponding type declaration file based on the incremental processing result.

[0016] Optionally, step S10 includes: maintaining a set of remote module addresses for which type definition files have been successfully acquired; restoring the set of remote module addresses from existing type declaration files during project initialization; and triggering the type acquisition and conversion process only for newly added remote module addresses that do not exist in the set during subsequent execution.

[0017] According to another aspect of the present invention, an electronic device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the method described in any of the above embodiments.

[0018] The beneficial effects of this invention are that it provides a method and device for automatically acquiring and converting remote Web component types based on Vite. By intelligently scanning remote component import statements in a project, it automatically acquires remote type definition files and converts the Web Components event system into a Vue-compatible CustomEvent type system, thus achieving automated management of remote component types. The technical solution includes: a source code scanning module for parsing remote imports in Vue SFC files and TypeScript / JavaScript files; a type acquisition module that supports source map parsing and parallel downloading of remote .d.ts files; a type conversion module that uses Babel AST to wrap traditional event parameters into CustomEvent types; a hot update module that supports dynamic updates of type files during development; and a cache management module that enables incremental updates to avoid duplicate downloads. This invention solves the problems of missing type definitions, incompatible event systems, and low development efficiency for remote Web components. It supports modern micro-frontend architectures and component library sharing scenarios, improving the development experience and code quality of TypeScript projects.

[0019] Specifically, it boasts a high degree of automation: it automatically identifies and imports remote components by intelligently scanning project files, eliminating the need for manual maintenance of type definition files.

[0020] Event system compatibility: Innovatively solves the type incompatibility problem between Web Components and Vue's event system, achieving automatic adaptation through AST transformation.

[0021] Source Map Support: Supports extracting raw type definitions from inline source maps, ensuring the integrity and accuracy of type information.

[0022] Hot update experience: Supports dynamic updating of type files during development, providing a smooth development experience without the need to restart the service.

[0023] Performance optimization: Maximize the efficiency of type retrieval through mechanisms such as parallel downloading, intelligent caching, and incremental updates.

[0024] Flexible configuration: Supports custom URL matching rules, file paths, scan ranges, etc., to adapt to different project needs.

[0025] Multi-file format support: Simultaneously supports scanning and processing of Vue SFC, TypeScript, and JavaScript files.

[0026] Modern architecture adaptation: Perfectly supports modern front-end architecture patterns such as micro-frontends, component library sharing, and CDN distribution. Attached Figure Description

[0027] Figure 1 This is a flowchart illustrating the overall architecture of an embodiment of the present invention. Figure 2 This is a schematic diagram of the file scanning and parsing process according to an embodiment of the present invention; Figure 3 This is a schematic diagram of the core algorithm flow for type conversion in an embodiment of the present invention; Figure 4 This is a schematic diagram of the cache management and hot update mechanism according to an embodiment of the present invention; Figure 5 This is a schematic diagram of the parallel processing and error recovery mechanism in an embodiment of the present invention. Detailed Implementation

[0028] To make the objectives, technical solutions, and advantages of this disclosure clearer, the following detailed description is provided in conjunction with specific embodiments and the accompanying drawings.

[0029] It should be noted that, unless otherwise defined, the technical or scientific terms used in one or more embodiments of this application should have the ordinary meaning understood by one of ordinary skill in the art to which this disclosure pertains. The terms "first," "second," and similar terms used in one or more embodiments of this application do not indicate any order, quantity, or importance, but are merely used to distinguish different components. Terms such as "comprising" or "including" mean that the element or object preceding the word encompasses the elements or objects listed following the word and their equivalents, without excluding other elements or objects. Terms such as "connected" or "linked" are not limited to physical or mechanical connections, but can include electrical connections, whether direct or indirect. Terms such as "upper," "lower," "left," and "right" are used only to indicate relative positional relationships; when the absolute position of the described object changes, the relative positional relationship may also change accordingly.

[0030] like Figures 1-5 As shown, one or more embodiments of this application illustrate a method for automatically acquiring and converting remote Web component types based on Vite, comprising: Step S1: Project initialization and configuration parsing; configuration parsing includes parsing preset configuration parameters, which at least include the project file scanning directory, type file output path, and regular expression rules for matching remote module addresses; Project initialization includes initializing the caching mechanism and checking for existing type declaration files in the project; Enable or adjust log output and debug mode according to the configuration.

[0031] Step S2: Perform intelligent scanning and import identification on the project source code to locate references to remote modules; specifically, scan the source code files in the project according to the pre-configured file matching pattern; use the corresponding parser to parse different types of source code files to extract their source code content; identify all import statements in the source code through pattern matching methods and extract the address of the remote module from them.

[0032] Step S3: Filter and verify the identified remote module addresses; Step S4: Based on the verified remote module address, obtain the corresponding type definition file in parallel; specifically, replace the file extension in the remote module address with the target type definition file extension to construct the type file acquisition address; use parallel asynchronous operation to simultaneously send requests to multiple type file acquisition addresses to download the corresponding type definition file.

[0033] Step S5: Parse and extract the content of the obtained type definition file to obtain the original type definition content; specifically, detect whether the obtained type definition file contains source code mapping information; when the source code mapping information is detected, parse the information to obtain the encoded mapping data therein; extract the original type definition content that has not been converted or compressed from the mapping data.

[0034] Step S6: Extract component definition information from the original type definition content; Step S7: Perform event type conversion processing on the original type definition content to generate a target type definition that conforms to the target framework event model; specifically, parse the original type definition content into an abstract syntax tree; traverse the abstract syntax tree to locate the component type definition declaration; The event-related parameters in the component type definition declaration are analyzed and transformed, converting the discrete function parameter form into a form that conforms to the custom event object specification.

[0035] Step S8: Based on the target type definition, generate a type declaration file; specifically, generate a first type declaration file, which contains the converted single component type definition; Generate a second type declaration file, which declares the module type corresponding to each remote module address; Generate a third type declaration file, which registers the component type to the target framework's global component interface.

[0036] Step S9: In response to changes in project files, perform incremental updates to maintain the synchronization of type declaration files; specifically, listen for change events in project source code files, and when a changed source code file is detected to meet predetermined processing conditions, perform the incremental processing flow from steps S2 to S8 on the changed source code file; based on the incremental processing results, update the corresponding type declaration file.

[0037] Step S10: Perform cache management on the processed remote module addresses and the obtained type definition content. Specifically, maintain a set of remote module addresses for which type definition files have been successfully obtained; during project initialization, restore the set of remote module addresses from existing type declaration files; in subsequent executions, only trigger the type acquisition and conversion process for newly added remote module addresses that do not exist in the set.

[0038] In another embodiment, an electronic device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the method described in any of the above embodiments.

[0039] To further explain the above technical solution, the following embodiments are provided for illustration: Example 1: Using the basic scheme of the present invention described above, the architecture is as follows: Figure 1 As shown.

[0040] Plugin configuration and initialization process: The system first receives user configuration parameters, including the directory scanning mode, type file output path, URL matching rules, etc. Through a parameter merging mechanism, the user-defined configuration is combined with the default configuration to ensure the system has complete operating parameters. Simultaneously, a URL cache set is initialized to store processed remote import addresses, avoiding duplicate processing.

[0041] Intelligent file scanning is implemented using a glob-based file matching algorithm that supports complex file path expressions, such as "src / ** / *.vue", which means scanning all Vue files in the src directory and its subdirectories. The system uses the Promise.allSettled concurrency mechanism to scan multiple files simultaneously, improving processing efficiency. For each matching file, the system determines the file type and selects the appropriate parsing strategy.

[0042] Vue Single-File Component Parsing: For .vue files, the system uses a dedicated SFC (Single File Component) parser, which accurately extracts the content of script tags and script setup tags. The parser ignores the template and style sections, focusing on the script section containing JavaScript / TypeScript code and identifying import statements. For non-Vue files, the system directly reads and parses the entire file content. Example 2: Using the Source Map parsing scheme. This example details the specific implementation of the Source Map parsing technology, which solves the problem that remote type files may have been compressed or compiled.

[0043] Source Map Detection and Parsing Mechanism: The system first checks whether the downloaded remote type file contains source map marker information. Source maps are usually present as comments at the end of the file, containing complete source file mapping information. When the "sourceMappingURL" marker is detected, the system extracts the base64 encoded data portion of it.

[0044] Encoded Data Parsing and Content Extraction: For detected base64 encoded Source Map data, the system uses a buffer decoder to convert it into a standard JSON format mapping object. The mapping object contains multiple fields, with the `sourcesContent` field storing the original, uncompressed source code content. The system prioritizes extracting the content of this field as the final type definition, ensuring that a complete, uncompressed TypeScript type declaration is obtained.

[0045] Fault tolerance mechanism: When Source Map parsing fails or the sourcesContent field is missing, the system will fall back to using the original downloaded file content, ensuring system robustness and availability. This dual-protection mechanism ensures that the system can function normally under various conditions. Example 3: Type Conversion Scheme

[0046] This example demonstrates the core algorithm implementation for Web Components event type conversion, such as... Figure 3 As shown.

[0047] Abstract Syntax Tree (AST) parsing process: The system uses the Babel parser to convert TypeScript type definitions into an Abstract Syntax Tree (AST) structure. The parser is configured to support TypeScript syntax and decorator syntax, ensuring correct parsing of complex type definitions in modern front-end projects. The AST's structured data format facilitates programmatic processing and modification of type declarations.

[0048] DefineComponent node identification and traversal: The system locates all TSTypeReference nodes using an AST traverser and filters out nodes with typeName "DefineComponent". The DefineComponent type of a Vue component contains 11 generic parameters, each corresponding to different configuration items of the component. The system focuses on the 8th generic parameter (event object type) and the 11th generic parameter (property object type).

[0049] Event type conversion algorithm: For the identified event object type, the system analyzes its method signature or property function type. Traditional Vue event handlers receive multiple discrete parameters, while Web Components use a single CustomEvent object. The conversion algorithm collects multiple parameter types into an array and then wraps them into generic parameters of CustomEvent, achieving type system compatibility conversion.

[0050] Code regeneration mechanism: After the AST modification is completed, the system uses a code generator to reconvert the modified syntax tree into TypeScript code. The generator maintains the original code format and line number correspondence, ensuring that the generated code has good readability and debugging experience. Example 4: Hot Update Mechanism. This example details the implementation principle of the hot update mechanism during development, such as... Figure 4 As shown.

[0051] File Change Monitoring System: Integrated into Vite's hot update hook, this system can monitor project file change events in real time. When a developer modifies a source file, the system receives the file path and a callback function to read the file content. Using a picomatch pattern matcher, the system determines whether the changed file falls within the scope of the monitoring, avoiding handling changes to irrelevant files.

[0052] Incremental update algorithm: For any changes to a matching file, the system re-parses the remote import statements in that file and extracts a new list of URLs. By comparing this list with the cached set of URLs, the system can identify newly added remote imports. The system only triggers the file update process when a genuine new import is detected, avoiding unnecessary processing overhead.

[0053] Real-time type updates: Upon detecting a new remote import, the system immediately initiates the type retrieval and conversion process, appending the new type definition to the existing type file. The entire process is completed while the development server is running, without requiring a service restart, providing developers with a smooth development experience. Example 5: Configuration Management Scheme. This example demonstrates the system's flexible configuration mechanism, supporting customized configurations for different project needs.

[0054] Basic configuration scheme: The system provides a simple and intuitive configuration interface. Developers only need to add plugin configurations to the Vite configuration file. Basic configurations include core parameters such as scanned directories, output file paths, and URL matching rules. The system uses a default value mechanism, so it will work normally even if the user does not provide any configuration.

[0055] Advanced configuration strategies: For complex project requirements, the system supports a variety of advanced configuration options. These include multi-file type scanning (supporting Vue, TypeScript, JSX, etc.), multi-regular expression matching (supporting different URL patterns), selective WebComponents transformation (only performing event type transformation on specific URLs), and forced scanning mode (reprocessing all remote imports at startup).

[0056] Configuration Validation and Optimization: The system performs validity verification upon receiving configuration parameters to ensure the correctness and completeness of the configuration. For array-type configuration items, the system supports automatic conversion of individual values ​​into arrays, improving configuration convenience. Simultaneously, the system automatically optimizes processing strategies based on the configuration, such as selecting an appropriate parser based on file type.

[0057] Those skilled in the art will understand that embodiments of the present invention can be provided as methods, systems, or computer program products. Therefore, the present invention can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, the present invention can take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0058] This invention is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded computer, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart illustrations. Figure 1 One or more processes and / or boxes Figure 1 A system that specifies functions in one or more boxes.

[0059] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including an instruction set implemented in a process. Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0060] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0061] Although preferred embodiments of the invention have been described, those skilled in the art, upon learning the basic inventive concept, can make other changes and modifications to these embodiments. Therefore, the appended claims are intended to be interpreted as including both the preferred embodiments and all changes and modifications falling within the scope of the invention.

[0062] Obviously, those skilled in the art can make various modifications and variations to this invention without departing from its spirit and scope. Therefore, if these modifications and variations fall within the scope of the claims of this invention and their equivalents, this invention also intends to include these modifications and variations.

Claims

1. A method for automatically acquiring and converting remote Web component types based on Vite, characterized in that, Includes the following steps: Step S1: Project initialization and configuration parsing; Step S2: Perform intelligent scanning and import identification on the project source code to locate references to remote modules; Step S3: Filter and verify the identified remote module addresses; Step S4: Based on the verified remote module address, obtain the corresponding type definition file in parallel; Step S5: Parse and extract the content of the obtained type definition file to obtain the original type definition content; Step S6: Extract component definition information from the original type definition content; Step S7: Perform event type conversion processing on the original type definition to generate a target type definition that conforms to the target framework event model; Step S8: Generate a type declaration file based on the target type definition; Step S9: In response to changes in project files, perform incremental updates to maintain the synchronization of type declaration files; Step S10: Perform cache management on the processed remote module addresses and the obtained type definition content.

2. The method for automatically acquiring and converting remote Web component types based on Vite according to claim 1, characterized in that, Step S1 configuration parsing includes parsing preset configuration parameters, which include at least the project file scanning directory, type file output path, and regular expression rules for matching remote module addresses; Project initialization includes initializing the caching mechanism and checking for existing type declaration files in the project; Enable or adjust log output and debug mode according to the configuration.

3. The method for automatically acquiring and converting remote Web component types based on Vite according to claim 1, characterized in that, Step S2 includes: scanning source code files in the project according to a pre-configured file matching pattern; parsing source code files of different types using corresponding parsers to extract their source code content; identifying all import statements in the source code using a pattern matching method and extracting the address of the remote module from them.

4. The method for automatically acquiring and converting remote Web component types based on Vite according to claim 1, characterized in that, Step S4 includes: replacing the file extension in the remote module address with the target type definition file extension to construct a type file acquisition address; and using parallel asynchronous operation, simultaneously sending requests to multiple type file acquisition addresses to download the corresponding type definition file.

5. The method for automatically acquiring and converting remote Web component types based on Vite according to claim 1, characterized in that, Step S5 includes: detecting whether the acquired type definition file contains source code mapping information; when the source code mapping information is detected, parsing the information to obtain the mapping data encoded therein; and extracting the original type definition content that has not been converted or compressed from the mapping data.

6. The method for automatically acquiring and converting remote Web component types based on Vite according to claim 1, characterized in that, Step S7 includes: parsing the original type definition content into an abstract syntax tree; traversing the abstract syntax tree to locate the component type definition declaration; The event-related parameters in the component type definition declaration are analyzed and transformed, converting the discrete function parameter form into a form that conforms to the custom event object specification.

7. The method for automatically acquiring and converting remote Web component types based on Vite according to claim 1, characterized in that, Step S8 includes: Generate a first type declaration file, which contains the converted individual component type definitions; Generate a second type declaration file, which declares the module type corresponding to each remote module address; Generate a third type declaration file, which registers the component type to the target framework's global component interface.

8. The method for automatically acquiring and converting remote Web component types based on Vite according to claim 1, characterized in that, Step S9 includes: listening for change events in the project source code files; when a changed source code file is detected to meet predetermined processing conditions, performing the incremental processing flow from steps S2 to S8 on the changed source code file; and updating the corresponding type declaration file based on the incremental processing result.

9. The method for automatically acquiring and converting remote Web component types based on Vite according to claim 1, characterized in that, Step S10 includes: maintaining a set of remote module addresses for which type definition files have been successfully acquired; restoring the set of remote module addresses from existing type declaration files during project initialization; and triggering the type acquisition and conversion process only for newly added remote module addresses that are not in the set during subsequent execution.

10. An electronic 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 program, it implements the method as described in any one of claims 1 to 9.

Images