Component isolation preview method, system, and electronic device

Abstract

The application relates to the technical field of software development, and discloses a component isolation preview method, a system and electronic equipment, the method comprising the following steps: obtaining target preview selection data containing to-be-previewed component identification information and corresponding rendering conditions, constructing a target preview environment independent of a target business application running link according to the rendering conditions after responding to the data, and then matching a corresponding target rendering entrance by means of a pre-constructed component preview data packet and calling the target rendering entrance, so as to load and render the to-be-previewed component in the target preview environment and obtain an independently isolated preview result. It can be seen that the application can decouple the UI component from the business link of a complete application, and the independent isolated preview of the component can be realized without relying on login, route jump and a backend service interface, the convenience of component preview is improved, a unified component preview data packet is used as a whole-process running basis, the consistency of data sources in all links is ensured, the reproduction cost of various states of the component is effectively reduced, and the development and debugging efficiency of the component is improved.

Description

Technical Field

[0001] This invention relates to the field of software development technology, and in particular to a component isolation preview method, system, and electronic device. Background Technology

[0002] With the rapid iteration of mobile cross-platform applications and private cloud client products, the number of UI components within applications continues to grow, and the complexity of component styles, interactions, and adaptation scenarios is constantly increasing. During the development phase, it is necessary to frequently debug the display effects of components under different devices, themes, languages, and font sizes.

[0003] Currently, debugging mobile UI components generally relies on the entire application as a preview platform. Debuggers must complete a series of operations, including account login, page route navigation, waiting for backend API responses, and manually constructing business data, to locate the target component. For boundary display states such as empty data, loading failures, excessively long text, and permission interception, the reproduction process is cumbersome and time-consuming. Furthermore, multi-dimensional adaptation parameters such as device size, theme depth, multiple languages, and accessibility font scaling are scattered and require repeated application restarts after switching parameters, resulting in low debugging efficiency. Therefore, proposing a technical solution that enables isolated rendering and previewing of components, improving the convenience of component previewing, and thus improving component development efficiency is particularly important. Summary of the Invention

[0004] This invention provides a component isolation preview method, system, and electronic device, which can realize component isolation rendering preview, improve the convenience of component preview, and thus improve component development efficiency.

[0005] To address the aforementioned technical problems, the first aspect of this invention discloses a component isolation preview method, the method comprising: Obtain the input target preview selection data; wherein, the target preview selection data includes the identification information of the component to be previewed in the target business application and the rendering conditions corresponding to the component to be previewed; In response to the target preview selection data, a target preview environment independent of the target business application's runtime chain is constructed based on the rendering conditions; By using a pre-built component preview data package, the target rendering entry corresponding to the identification information is obtained and invoked. The component to be previewed is loaded and rendered in the target preview environment to obtain a preview result that is independent of the target business application's runtime chain and corresponds to the component to be previewed. The component preview data package includes at least: the identification information of the previewable components in the target business application and the entry information corresponding to the identification information of each previewable component.

[0006] As an optional implementation, in the first aspect of the invention, before constructing the target preview environment independent of the target business application runtime environment, the method further includes: The target preview selection data is obtained through the state management center, and the preview selection data currently maintained by the state management center is updated according to the target preview selection data, so as to construct the target preview environment based on the preview selection data obtained from the state management center, and update the display status of the control interface corresponding to the component to be previewed based on the same preview selection data obtained from the state management center.

[0007] As an optional implementation, in the first aspect of the present invention, the rendering conditions include device configuration data selected by the user and preview selection status data; The step of responding to the target preview selection data and constructing a target preview environment independent of the target business application's runtime chain based on the rendering conditions includes: The component display device type is determined based on the device configuration data, and the corresponding rendering rules are determined based on the component display device type; The runtime environment configuration information is determined based on the preview selection status data. Based on the rendering rules and the runtime environment configuration information, a target preview environment independent of the target business application runtime chain is constructed.

[0008] As an optional implementation, in the first aspect of the present invention, the method further includes: Based on preset filtering conditions, extract component metadata from the project source file of the component to be previewed; When the component metadata meets the preset data constraints, a component preview data package and the initial identification information of the component to be previewed are constructed based on the component metadata; When the initial identification information of the component to be previewed meets the preset consistency conditions, the initial identification information is determined to be the identification information of the component to be previewed.

[0009] As an optional implementation, in the first aspect of the present invention, the method further includes: In response to a user-triggered rendering condition update request, when the rendering conditions corresponding to the rendering condition update request meet preset validity conditions, the preview selection data in the status management center is updated based on the rendering condition update request, so as to reconstruct the target preview environment according to the updated status change message, and update the display status according to the updated status change message.

[0010] As an optional implementation, in the first aspect of the present invention, the method further includes: Detect whether the preview result corresponding to the component to be previewed matches the display state of the control interface corresponding to the component to be previewed; When the preview result does not match the display status, the preview selection data is retrieved again from the status management center. Based on the retrieved preview selection data, the target preview environment is updated so that the preview result is retrieved again based on the updated target preview environment.

[0011] As an optional implementation, in the first aspect of the present invention, the method further includes: When a first type of data change event is detected for the component to be previewed, a hot reload operation is performed on the component to be previewed loaded and rendered in the target preview environment based on the first type of data change event to update the preview result. The first type of data change event includes a change event in the data item set of the component to be previewed; and / or, When a second type of data change event is detected for the component to be previewed, the target preview selection data and the component preview data package are updated based on the second type of data change event. When it is determined that the identification information in the updated target preview selection data meets the preset consistency conditions, the target preview environment is reconstructed based on the updated target preview selection data. The updated component preview data package is then used to load and render the updated component to be previewed in the reconstructed target preview environment. The second type of data change event includes changes in the metadata key values ​​and / or metadata field structure of the component to be previewed.

[0012] As an optional implementation, in the first aspect of the present invention, the method further includes: When an anomaly is detected, all anomalies are identified, and anomaly diagnosis information and location information for each anomaly are generated, including construction anomalies and / or rendering anomalies.

[0013] As an optional implementation, in the first aspect of the present invention, the method further includes: For each of the anomalies in the component to be previewed, an error degradation view is generated and the display area for the component to be previewed in the target preview environment is replaced; The error degradation view displays the anomaly diagnostic information and the location information.

[0014] As an optional implementation, in the first aspect of the present invention, the method further includes: Based on the target preview selection data, the component preview data package, and the current time identifier, a preview context snapshot corresponding to the component to be previewed is generated, and the preview context snapshot is saved to a local file; When a restore request for a target preview context snapshot is detected, the preview environment corresponding to the target preview context snapshot is restored based on the target preview context snapshot.

[0015] As an optional implementation, in the first aspect of the present invention, the rendering conditions include at least one or more of the following: theme data, language data, scaling data, and visualization debugging flag data.

[0016] A second aspect of the present invention discloses a component isolation preview system, the system comprising a control terminal, a main control module, and a preview rendering terminal, wherein: The control terminal is used to acquire input target preview selection data; wherein, the target preview selection data includes the identification information of the component to be previewed in the target business application and the rendering conditions corresponding to the component to be previewed; The main control module is used to respond to the target preview selection data and construct a target preview environment independent of the target business application's runtime chain according to the rendering conditions; The preview rendering terminal is used to obtain and call the target rendering entry corresponding to the identification information through a pre-built component preview data package, load and render the component to be previewed in the target preview environment, so as to obtain a preview result that is independent of the target business application's runtime chain and corresponds to the component to be previewed; wherein, the component preview data package includes at least: the identification information of the previewable components in the target business application and the entry information corresponding to the identification information of each previewable component.

[0017] As an optional implementation, in a second aspect of the invention, the system further includes a status management center, wherein: The state management center is used to obtain the target preview selection data before the main control module builds the target preview environment independent of the target business application's runtime link, and to update the preview selection data currently maintained by the state management center based on the target preview selection data, so that the main control module builds the target preview environment based on the preview selection data obtained from the state management center, and the control terminal updates the display status of the control interface corresponding to the component to be previewed based on the same preview selection data obtained from the state management center.

[0018] As an optional implementation, in a second aspect of the invention, the rendering conditions include user-selected device configuration data and preview selection status data; The main control module responds to the target preview selection data and constructs a target preview environment independent of the target business application's runtime chain based on the rendering conditions. Specifically, this includes: The component display device type is determined based on the device configuration data, and the corresponding rendering rules are determined based on the component display device type; The runtime environment configuration information is determined based on the preview selection status data. Based on the rendering rules and the runtime environment configuration information, a target preview environment independent of the target business application runtime chain is constructed.

[0019] As an optional implementation, in a second aspect of the invention, the system further includes a data construction module, wherein the data construction module is used for: Based on preset filtering conditions, extract component metadata from the project source file of the component to be previewed; When the component metadata meets the preset data constraints, a component preview data package and the initial identification information of the component to be previewed are constructed based on the component metadata; When the initial identification information of the component to be previewed meets the preset consistency conditions, the initial identification information is determined to be the identification information of the component to be previewed.

[0020] As an optional implementation, in a second aspect of the present invention, the main control module is further configured to respond to a rendering condition update request triggered by a user, and when the rendering conditions corresponding to the rendering condition update request meet preset validity conditions, update the preview selection data in the status management center based on the rendering condition update request, so that the main control module reconstructs the target preview environment according to the updated status change message, and causes the preview rendering terminal to update the display status according to the updated status change message.

[0021] As an optional implementation, in a second aspect of the present invention, the main control module is further configured to detect whether the preview result corresponding to the component to be previewed matches the display state of the control interface corresponding to the component to be previewed; when the preview result does not match the display state, the preview selection data is re-obtained from the state management center, and the target preview environment is updated according to the re-obtained preview selection data, so that the preview rendering end re-obtains the preview result based on the updated target preview environment.

[0022] As an optional implementation, in a second aspect of the invention, the main control module is further configured to, when a first type of data change event is detected for the component to be previewed, perform a hot reload operation on the component to be previewed loaded and rendered in the target preview environment based on the first type of data change event via the preview rendering terminal, so as to update the preview result, wherein the first type of data change event includes a data item set change event of the component to be previewed; and / or, The main control module is further configured to, when detecting a second type of data change event for the component to be previewed, update the target preview selection data and the component preview data package based on the second type of data change event through the data construction module, and when determining that the identification information in the updated target preview selection data meets a preset consistency condition, reconstruct the target preview environment based on the updated target preview selection data, and load and render the updated component to be previewed in the reconstructed target preview environment through the preview rendering terminal using the updated component preview data package; wherein, the second type of data change event includes metadata key value change events and / or metadata field structure change events of the component to be previewed.

[0023] As an optional implementation, in a second aspect of the present invention, the main control module is further configured to capture all generated anomalies when an anomaly is detected, and generate anomaly diagnosis information and location information for each anomaly, the anomalies including construction anomalies and / or rendering anomalies.

[0024] As an optional implementation, in a second aspect of the present invention, the preview rendering end is further configured to generate an error degradation view based on each of the anomalies of the component to be previewed and replace the display area for the component to be previewed in the target preview environment; and display the anomaly diagnosis information and the location information in the error degradation view.

[0025] As an optional implementation, in a second aspect of the present invention, the main control module is further configured to generate a preview context snapshot corresponding to the component to be previewed based on the target preview selection data, the component preview data package and the current time identifier, and save the preview context snapshot to a local file; when a restore request for the target preview context snapshot is detected, the preview environment corresponding to the target preview context snapshot is restored based on the target preview context snapshot.

[0026] As an optional implementation, in the second aspect of the present invention, the rendering conditions include at least one or more of the following: theme data, language data, scaling data, and visualization debugging flag data.

[0027] A third aspect of the present invention discloses an electronic device, the electronic device comprising: Memory containing executable program code; A processor coupled to the memory; The processor calls the executable program code stored in the memory to execute some or all of the steps in the component isolation preview method according to any of the first aspects of the present invention.

[0028] The fourth aspect of the present invention discloses a computer storage medium storing computer instructions, which, when invoked, are used to execute some or all of the steps in the component isolation preview method described in any of the first aspects of the present invention.

[0029] Compared with the prior art, the present invention has the following beneficial effects: Implementing this invention can completely decouple UI components from the runtime chain of the complete business application. It can achieve independent and isolated preview of components without relying on the login process, page routing, and backend service interfaces of the business application. At the same time, it uses a standardized component preview data package as a unified entry carrier to ensure the consistency of data source throughout the preview process, greatly reduce the cost of reproducing various boundary states of components, improve the convenience of component preview, and thus effectively improve the development and debugging efficiency of mobile UI components. Attached Figure Description

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

[0031] Figure 1 This is a flowchart illustrating a component isolation preview method disclosed in an embodiment of the present invention; Figure 2 This is a flowchart illustrating another component isolation preview method disclosed in an embodiment of the present invention; Figure 3 This is a schematic diagram of the structure of a component isolation preview system disclosed in an embodiment of the present invention; Figure 4 This is a schematic diagram of another component isolation preview system disclosed in an embodiment of the present invention; Figure 5 This is a schematic diagram of the structure of an electronic device disclosed in an embodiment of the present invention. Detailed Implementation

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

[0033] The terms "first," "second," etc., used in the specification, claims, and accompanying drawings of this invention are used to distinguish different objects, not to describe a specific order. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion. For example, a process, method, apparatus, product, or end that includes a series of steps or units is not limited to the listed steps or units, but may optionally include steps or units not listed, or may optionally include other steps or units inherent to these processes, methods, products, or ends.

[0034] In this document, the term "embodiment" means that a particular feature, structure, or characteristic described in connection with an embodiment may be included in at least one embodiment of the invention. The appearance of this phrase in various places throughout the specification does not necessarily refer to the same embodiment, nor is it a separate or alternative embodiment mutually exclusive with other embodiments. It will be explicitly and implicitly understood by those skilled in the art that the embodiments described herein can be combined with other embodiments.

[0035] This invention discloses a component isolation preview method, system, and electronic device, which can completely decouple UI components from the runtime chain of a complete business application. It enables independent, isolated preview of components without relying on the application's login process, page routing, or backend service interfaces. Simultaneously, it uses a standardized component preview data package as a unified entry point, ensuring data source consistency throughout the preview process, significantly reducing the cost of reproducing various boundary states of components, improving the convenience of component preview, and thus effectively enhancing the development and debugging efficiency of mobile UI components. These are described in detail below.

[0036] Example 1 Please see Figure 1 , Figure 1 This is a flowchart illustrating a component isolation preview method disclosed in an embodiment of the present invention. Figure 1 The described component isolation preview method can be applied to an electronic device that is communicatively connected to a network attached storage device. The electronic device accesses project source files stored on the network attached storage device and performs isolated previews of the components to be previewed in the project source files using the component isolation preview method; and... Figure 1 The described component isolation preview method can also be applied to a component isolation preview system, which may include an intelligent server or intelligent platform for implementing component isolation preview. The intelligent server may include a local server, a NAS server, or a cloud server; this embodiment of the invention does not impose any limitations. Figure 1 As shown, the isolated preview method of this component can include the following operations: 101. Obtain the target preview selection data input.

[0037] In this embodiment of the invention, optionally, when performing component isolation preview, the control end and the preview rendering end can be initialized. The control end may include a control window, and the preview rendering end may include a preview rendering window. The control window is used to display relevant control parameters for the component and the component display device. The component display device may include mobile smart devices, such as smartphones, or PC devices, etc. The preview window is used to display the real-time rendering effect of the component to be previewed. While initializing the control window and the preview window, the preview API registers its own port. The main control module obtains the port of the preview API and establishes a connection. The control window loads reference data, project data, and the current selection status, and then displays this data to the user (such as a project developer) for the user to select and input relevant status data. The current selection status after initialization can be the default status.

[0038] In this embodiment of the invention, optionally, a user (such as a project developer) can obtain input target preview selection data through a control terminal. The target preview selection data may include the identification information of the component to be previewed in the target business application and the rendering conditions corresponding to the component. The identification information of the component to be previewed may include the current project package name (packageName), the story collection indexed by grouping key (storyMap), the user theme and standard theme collection (themeList), the localization capability collection (localeList), the device configuration collection (deviceProfiles), and the project data version number (projectVersion). The rendering conditions corresponding to the component to be previewed may include the rendering conditions input by the user in the control window. The rendering conditions include at least one or more of the following: theme data, language data, scaling data, and visual debug flag data. Specifically, it may include the currently selected story (activeStoryId), the current device (activeDeviceId), the current theme (activeThemeId), the current language (activeLanguageTag), the text scaling factor (textScaleFactor), the overall scaling factor of the preview story (storyScale), the docking mode of the control window (dockMode), the set of visual debug flags (visualDebugFlags), and the rendering generation, which is used to exclude outdated rendering results (renderGeneration).

[0039] 102. In response to the target preview selection data, construct a target preview environment independent of the target business application's runtime chain based on the rendering conditions.

[0040] In this embodiment of the invention, optionally, in response to the target preview selection data, a target preview environment independent of the target business application's runtime chain is constructed based on the rendering conditions selected by the user. This preview environment can achieve isolated preview rendering of the components to be previewed.

[0041] 103. By using the pre-built component preview data package, obtain and call the target rendering entry corresponding to the identification information, load and render the component to be previewed in the target preview environment, so as to obtain a preview result that is independent of the target business application's runtime chain and corresponds to the component to be previewed.

[0042] In this embodiment of the invention, optionally, the component preview data package may include at least the identification information of the previewable components in the target business application and the entry information corresponding to the identification information of each previewable component. It may also include the component metadata of each previewable component. The component metadata may include story metadata, theme metadata, localization metadata, and device configuration data. The component metadata is a structured data set, including index information and configuration parameters such as story list, theme list, language list, device configuration, and version number. The component preview data package can be generated based on the component metadata and device configuration data. The component preview data package is a complete resource package that can be loaded and run by the preview window process. It contains the mobile rendering shell, communication channel, story rendering protector, component code, resource files, and loading logic of preview project data. It is a runtime carrier that can run directly and render the component.

[0043] In this embodiment of the invention, optionally, story metadata may include one or more combinations of the following: story unique identifier (storyId), story package name (packageName), story source file path (sourcePath), story display name (storyName), story group key (groupKey), story build entry reference (builderRef), and source file digest (sourceHash). The source file digest is used to determine whether regeneration is required. Theme metadata may include one or more combinations of the following: theme unique identifier (themeId), theme display name (themeName), whether it is the default theme (isDefault), theme build entry reference (themeBuilderRef), and theme metadata validation result (validationState). Localization metadata may include one or more combinations of the following: localization delegate identifier (delegateId), supported language tag set (LanguageTags), localization delegate reference (delegateRef), and localization metadata validation result (validationState). Device configuration data may include one or more combinations of device identifier (deviceId), device name (deviceName), target platform type (targetPlatform), logical resolution (logicalWidth and logicalHeight), pixel density (devicePixelRadio), and optional safe area configuration (safeAreaProfile).

[0044] In this embodiment of the invention, optionally, the target rendering entry corresponding to the identification information can be obtained and called through a pre-built component preview data package, and the component to be previewed can be loaded and rendered in the target preview environment to obtain a preview result that is independent of the target business application running link and corresponds to the component to be previewed, so as to realize isolated preview rendering of the component to be previewed, and the preview result in the component to be previewed corresponds to the rendering conditions selected by the user.

[0045] It is evident that implementation Figure 1The described component isolation preview method can obtain target preview selection data containing the identifier information of the component to be previewed and the corresponding rendering conditions. After responding to the data, it constructs a target preview environment independent of the target business application's runtime chain based on the rendering conditions. Then, with the help of the pre-built component preview data package and the identifier information in the target preview selection data, it matches and calls the corresponding target rendering entry point. The component to be previewed is loaded and rendered in the target preview environment to obtain an independent and isolated preview result. This method can completely decouple UI components from the runtime chain of the complete business application. It can achieve independent and isolated preview of components without relying on the business application's login process, page routing, and backend service interfaces. At the same time, it uses a standardized component preview data package as a unified entry carrier to ensure the consistency of the data source throughout the preview process, significantly reducing the reproduction cost of various boundary states of components, improving the convenience of component preview, and thus effectively improving the development and debugging efficiency of mobile UI components.

[0046] In an optional embodiment, before building the target preview environment independent of the target business application's runtime environment, the component isolation preview method may further include the following operations: The system obtains target preview selection data from the state management center and updates the preview selection data currently maintained by the state management center based on the target preview selection data. This allows the system to construct the target preview environment based on the preview selection data obtained from the state management center and update the display status of the control interface corresponding to the component to be previewed based on the same preview selection data obtained from the state management center.

[0047] In this optional embodiment, the target preview selection data can be obtained through the state management center. Specifically, the rendering conditions corresponding to the component to be previewed can be obtained from the user input. Then, based on the target preview selection data, the preview selection data currently maintained by the state management center can be updated, including story, device, theme, language, scaling or debugging flags. When any story, device, theme, language, scaling or debugging flag changes, for example, when the user selects a new theme through the control window, this changed data is first transmitted to the state management center to update the data maintained in the state management center and obtain the latest preview selection data.

[0048] In this optional embodiment, after updating the preview selection data currently maintained by the status management center, the updated latest selection status can be sent to the control window and the preview rendering window via the preview API. This allows for the construction of a target preview environment based on the preview selection data obtained from the status management center, and the updating of the display status of the control interface corresponding to the component to be previewed based on the same preview selection data obtained from the status management center. This ensures that the display status of the control window is consistent with the preview result of the preview rendering window. The preview channel bridging module is used to forward status changes, project data, hot reload, errors, and ready messages between the preview API and the preview window.

[0049] As can be seen, implementing this optional embodiment can receive target preview selection data and update its maintained preview selection data through the state management center before constructing the target preview environment. This allows both the preview rendering end and the control interface to obtain preview selection data from the same state management center, which is used to construct the preview environment and update the display state, respectively. This centralized state management mechanism can establish a globally unique source of state truth, solving the problem of inconsistency between the display state of the control interface and the rendering state of the preview rendering end from the root of the architecture. It avoids preview deviations caused by the disconnection of parameters between the two ends, effectively improving the accuracy and operational stability of the preview state.

[0050] In another optional embodiment, the rendering conditions include user-selected device configuration data and preview selection status data; In response to the target preview selection data, constructing a target preview environment independent of the target business application's runtime environment based on rendering conditions can include the following operations: The component display device type is determined based on the device configuration data, and the corresponding rendering rules are determined based on the component display device type; Determine the runtime environment configuration information based on the preview selection status data; Based on rendering rules and runtime environment configuration information, construct a target preview environment that is independent of the target business application's runtime chain.

[0051] In this optional embodiment, the rendering conditions may include user-selected device configuration data and preview selection status data. The device configuration data may include one or more combinations of device identifier (deviceId), device name (deviceName), target platform type (targetPlatform), logical resolution (logicalWidth and logicalHeight), pixel density (devicePixelRadio), and optional safe area configuration (safeAreaProfile). The preview selection status data may include theme data, language data, scaling data, and visual debugging flag data.

[0052] In this optional embodiment, the component display device type can be determined based on the device configuration data, and the corresponding rendering rules can be determined based on the component display device type. The component display device type may include iOS type or Android type. Rendering rules such as screen size, pixel density, and safe area can be set according to the selected mobile phone model to simulate the display boundary of a real mobile phone.

[0053] In this optional embodiment, the runtime environment configuration information can be determined based on the preview selection status data. The runtime environment configuration information may include at least one of the following: theme style information, localization delegation and current language information, text scaling information, overall preview story scaling information, and visual debugging flag information.

[0054] In this optional embodiment, a target preview environment independent of the target business application's runtime chain can be constructed based on rendering rules and runtime environment configuration information. Specifically, runtime environment configuration information can be injected under the constraints of rendering rules to construct the preview device's runtime environment. This includes injecting the selected theme style based on preview selection status data to enable components to render under the selected theme; injecting localization delegates and the current language to enable components to display different language text; injecting text scaling ratios to construct a text scaling environment for checking accessibility and long text adaptation; performing overall scaling of the preview content based on the overall scaling ratio of the preview story to observe ultra-large or ultra-small device screens in the preview window; and injecting control layout boundaries, baselines, redraw highlights, slow animations, image size hints, or performance overlays through visual debugging flags.

[0055] As can be seen, implementing this optional embodiment can first determine the component display device type and corresponding rendering rules based on device configuration data, then determine the runtime environment configuration information by combining preview selection status data, and finally complete the construction of an independent preview environment; through multi-dimensional environment parameter adaptation logic, it can accurately simulate the native rendering effect under different platforms and different size devices, while covering multiple runtime configurations such as theme, language, scaling ratio, and debugging flags. Multi-scene adaptation and debugging can be completed without switching multiple simulators or manually modifying project configurations, significantly improving the debugging efficiency and effect reproduction of multi-dimensional adaptation on mobile devices.

[0056] In yet another optional embodiment, the component isolation preview method may further include the following operations: When a first-type data change event is detected for the component to be previewed, a hot reload operation is performed on the component to be previewed loaded and rendered in the target preview environment based on the first-type data change event to update the preview result. The first-type data change event includes a change event in the data item set of the component to be previewed; and / or, When a second type of data change event is detected for the component to be previewed, the target preview selection data and the component preview data package are updated based on the second type of data change event. When it is determined that the identification information in the updated target preview selection data meets the preset consistency conditions, the target preview environment is reconstructed based on the updated target preview selection data. The updated component preview data package is then used to load and render the updated component to be previewed in the reconstructed target preview environment. The second type of data change event includes changes in the metadata key values ​​of the component to be previewed and / or changes in the metadata field structure.

[0057] In this optional embodiment, the first type of data change event may include a change event in the set of data items of the component to be previewed, such as adding or deleting story metadata, adding a theme, adding a language, or deleting a device configuration, which will cause changes to the story tree, theme list, language list, or device list. When a first type of data change event for the component to be previewed is detected, a hot reload operation is performed on the component to be previewed loaded and rendered in the target preview environment based on the first type of data change event. Specifically, the target preview selection data can be directly updated to update the preview result.

[0058] In this optional embodiment, the second type of data change event may include metadata key value change events and / or metadata field structure change events for the component to be previewed. Metadata key value change events may include modifications to a story identifier, group identifier, story name, build entry reference, theme identifier, language tag, or device identifier. These changes will affect the control window and preview rendering window in finding target objects by identifier. Metadata field structure change events may include changes to the original story metadata, which only contained story identifier, story reference information, and story file information. Later, fields were added or deleted, or the semantics of the fields were changed. This is a schema-level change that affects the preview API, control window, and preview window in parsing project data.

[0059] In this optional embodiment, when a second type of data change event for the component to be previewed is detected, the target preview selection data and the component preview data package are updated based on the second type of data change event, and the identification information in the updated target preview selection data is checked for consistency. When it is determined that the identification information in the updated target preview selection data meets the preset consistency conditions, the target preview environment is reconstructed based on the updated target preview selection data, and the updated component to be previewed is loaded and rendered in the reconstructed target preview environment through the updated component preview data package.

[0060] As can be seen, implementing this optional embodiment can set differentiated update strategies for two types of data change events of the component to be previewed. For the first type of event, which only involves changes in the set of data items, hot reloading of the component is performed to update the preview result. For the second type of event, which involves changes in metadata key values ​​or field structures, the target preview selection data and the component preview data package are updated first. After verifying the consistency of the identifier, the preview environment is rebuilt and the updated component is rendered. Through the differentiated update strategy of hierarchical reloading, the lightest refresh method can be selected to match changes of different ranges, reducing unnecessary data package reconstruction and environment reconstruction operations, greatly improving the preview refresh efficiency. At the same time, the consistency of the identifier is verified simultaneously, which can avoid rendering anomalies caused by invalid selections after data updates and ensure the stability of the updated preview operation.

[0061] In yet another optional embodiment, the component isolation preview method may further include the following operations: When an anomaly is detected, all anomalies are identified, and anomaly diagnosis and location information for each anomaly are generated. Anomalies include construction anomalies and / or rendering anomalies.

[0062] In this optional embodiment, during the process of building the preview device runtime environment and rendering components, it is possible to continuously monitor whether any abnormalities occur. When an abnormality occurs, all generated abnormalities are identified. The abnormalities may include construction abnormalities and / or rendering abnormalities. Specifically, the abnormalities may include one or more combinations of component story construction abnormalities, preview environment injection abnormalities, component rendering runtime abnormalities, and metadata verification abnormalities. Among them, component story construction exceptions indicate errors that occur when calling the component story construction entry point, such as a missing story function, a mismatch between the return type of the construction function and the expected component type, function input parameters not meeting the parameterless constraint, missing modules that the component depends on, and errors in the execution of component initialization logic; preview environment injection exceptions indicate errors that occur when injecting configuration into the component during the construction of the preview device runtime environment, such as the inability to inject the selected theme normally, failure to load the localization language pack, illegal device size parameters causing layout container initialization failure, and rendering exceptions caused by scaling parameters exceeding the legal range; component rendering runtime exceptions indicate errors triggered during the component rendering process, such as layout size overflow, rendering exceptions caused by excessively long text content, failure to load static resources such as images / icons, errors in the execution of the component's internal state logic, and rendering exceptions caused by empty data; metadata validation exceptions indicate metadata validity errors found during runtime validation, such as invalid references to the construction entry point in the story metadata, illegal theme metadata validation status, and mismatched localization delegate types, which are exceptions that should have been filtered during the build phase but flow into the runtime state.

[0063] In this optional embodiment, the anomaly diagnostic information is used to describe the nature and impact of the error, and may include the anomaly type classification (build error / rendering error / configuration error), a description of the core cause of the anomaly, the scope of the anomaly's impact (e.g., only the current component, not affecting the overall preview), and preliminary repair suggestions, such as checking the story function return value or checking the theme configuration validity. The location information is used to accurately locate the location where the error occurred, and may include the unique identifier of the corresponding component story, the project path of the story source file, the code location that triggered the anomaly, the component module group to which it belongs, the current preview selection status when the anomaly was triggered (corresponding device, theme, language parameters), the time and rendering generation of the anomaly triggering, etc.

[0064] As can be seen, implementing this optional embodiment can capture all build and rendering anomalies when an anomaly is detected, and generate corresponding anomaly diagnosis and location information for each anomaly. Through the end-to-end anomaly capture mechanism, it can fully cover all errors in the component preview process from environment building to component rendering, avoiding process crashes caused by unrestrained anomaly throwing. At the same time, the structured diagnostic and location information can clearly mark the anomaly type and location, providing developers with a clear basis for troubleshooting problems and effectively reducing the troubleshooting cost of UI rendering problems.

[0065] In yet another optional embodiment, the component isolation preview method may further include the following operations: Generate an error degradation view for each exception of the component to be previewed and replace the display area of ​​the component to be previewed in the target preview environment; The error degradation view displays anomaly diagnostic and location information.

[0066] In this optional embodiment, an error degradation view can be generated for each exception of the component to be previewed, and the display area of ​​the component to be previewed in the target preview environment can be replaced. That is, the exception only affects the display area of ​​the current component to be previewed, and the overall framework of the preview window, all functions of the control window, and the selection and preview capabilities of other component stories are not affected. There will be no situation where a single component error causes the entire preview page to crash, display a white screen, or become inoperable. An error degradation view is generated for each exception, and then the exception summary, diagnosis, and location information are displayed in the original display position of the component. This ensures the stability of the preview interface and provides developers with clear troubleshooting clues. The replacement only applies to the rendered content and does not clear the global selection state or interrupt the preview process. After the developer repairs the component code, they can directly trigger a hot reload to refresh the component without restarting the preview window or reconfiguring all preview parameters.

[0067] As can be seen, implementing this optional embodiment can generate a corresponding error degradation view for each captured anomaly, replace the display area of ​​the component to be previewed in the target preview environment, and display anomaly diagnosis information and location information in the degradation view. Through this anomaly isolation and degradation display mechanism, the rendering failure of a single component can be strictly limited to the display area of ​​the component itself, avoiding the crash, white screen or overall functional failure of the entire preview page caused by the anomaly of a single component. At the same time, the standardized display of anomaly information can help developers quickly locate the root cause of the problem, which not only improves the overall operational stability of the preview system, but also optimizes the anomaly feedback experience during the debugging process.

[0068] In yet another optional embodiment, the component isolation preview method may further include the following operations: Based on the target preview selection data, component preview data package, and current time stamp, generate a preview context snapshot corresponding to the component to be previewed, and save the preview context snapshot to a local file; When a restore request for a target preview context snapshot is detected, the preview environment corresponding to the target preview context snapshot is restored based on the target preview context snapshot.

[0069] In this optional embodiment, a preview context snapshot corresponding to the component to be previewed can be generated based on the component preview data package, preview selection state data, and the current time identifier. The data snapshot may include one or more combinations of snapshot identifier (snapshotId), project data version (projectVersion), current selection state (selectionState), story source summary (storySourceHash), snapshot generation time (createAt), and optional diagnostic summary (diagnosticSummary). After obtaining the preview context snapshot, it can be saved to a local file and shared with other developers.

[0070] In this optional embodiment, when a target preview context snapshot shared across platforms by other developers is received or a restore request for a locally saved preview context snapshot is detected, the corresponding preview device runtime environment can be restored based on the target preview context snapshot or the locally saved preview context snapshot. Snapshots can also be batch invoked, and all components can be traversed in batches based on the snapshots to automatically check for issues such as layout overflow and rendering anomalies.

[0071] As can be seen, implementing this optional embodiment can generate a preview context snapshot of the component to be previewed based on the component preview data package, preview selection status data, and the current time identifier, and save it as a local file. It also supports loading snapshots shared across platforms or stored locally to restore the corresponding preview device's operating environment. It can structurally retain the complete preview debugging scenario, which is convenient for developers to save the debugging scene and quickly reproduce the problem scenario later. It also supports team members to share snapshots and restore the debugging environment with one click without having to repeatedly configure all preview parameters. In addition, batch snapshots can also be extended to automated visual regression testing and full component inspection, which greatly improves team collaboration efficiency and problem reproduction capabilities.

[0072] Example 2 Please see Figure 2 , Figure 2 This is a flowchart illustrating a component isolation preview method disclosed in an embodiment of the present invention. Figure 2 The described component isolation preview method can be applied to an electronic device that is communicatively connected to a network attached storage device. The electronic device accesses project source files stored on the network attached storage device and performs isolated previews of the components to be previewed in the project source files using the component isolation preview method; and... Figure 2 The described component isolation preview method can also be applied to a component isolation preview system, which may include an intelligent server or intelligent platform for implementing component isolation preview. The intelligent server may include a local server, a NAS server, or a cloud server; this embodiment of the invention does not impose any limitations. Figure 2 As shown, the isolated preview method of this component can include the following operations: 201. Based on preset filtering conditions, extract component metadata from the project source file of the component to be previewed.

[0073] In this embodiment of the invention, optionally, the project developer can write multiple parameterless story construction entry points for components in the target business application. Each entry point corresponds to a fixed state of the component, such as the normal clickable state, disabled gray state, loading state, and error message state of a button, or the full data state, empty data state, and loading failure state of a list. Each parameterless story construction entry point ultimately returns the rendering result of the corresponding component in a fixed state. These entry points do not depend on login, page redirection, or backend interface, and they themselves contain all the parameters required for component rendering. Running them independently can display the corresponding effect.

[0074] In this embodiment of the invention, optionally, the preset filtering conditions may include: scanning the component story functions in the project source file and filtering out private functions, functions with parameters, functions without return types, and declarations that clearly do not conform to story constraints. The project source file may include multiple components to be previewed, each of which includes its corresponding component metadata. The component metadata may include story metadata, theme metadata, localization metadata, and device configuration data. The component metadata is a structured data set, including index information and configuration parameters such as story list, theme list, language list, device configuration, and version number. A component preview data package can be generated based on the component metadata and device configuration data. The component preview data package is a complete resource package that can be loaded and run by the preview window process. It includes a mobile rendering shell, communication channel, story rendering protector, component code, resource files, and loading logic for preview project data. It is a runtime carrier that can run directly and render the component.

[0075] In this embodiment of the invention, optionally, extracting component metadata from the project source file of the component to be previewed may specifically include: scanning component story functions in the project source file to obtain story metadata; collecting device theme configurations in the project source file to obtain theme metadata, specifically, scanning theme tags, generating theme metadata, and outputting warnings for non-top-level, non-hot-reloadable friendly theme declarations. Localization delegates and language tags may be collected in the project source file, and localization metadata may be generated based on the localization delegates and language tags, and the language tag and localization delegate types may be verified. Multiple preset types of device parameters may be collected in the project source file, and device configuration data may be generated based on each type of device parameter. The device may include a smart mobile device, such as a smartphone.

[0076] 202. When the component metadata meets the preset data constraints, construct the component preview data package and the initial identification information of the component to be previewed based on the component metadata.

[0077] In this embodiment of the invention, optionally, the preset data constraints may include verifying whether the story entry point meets the constraints, such as whether it has no parameters, whether it returns a renderable component, and whether it can generate a stable story identifier; theme data needs to verify the theme entry point and theme type; localization data needs to verify the language tag and delegate type; device configuration needs to verify whether parameters such as size, platform, and security zone are valid. When the component metadata meets the preset data constraints, a component preview data package and the initial identification information of the component to be previewed are constructed based on the component metadata.

[0078] 203. When the initial identification information of the component to be previewed meets the preset consistency conditions, the initial identification information is determined to be the identification information of the component to be previewed.

[0079] In this embodiment of the invention, optionally, after the component preview data package and the initial identification information of the component to be previewed are constructed, it is necessary to check whether the initial identification information of the component to be previewed meets preset consistency conditions, such as whether the story identifier is unique, whether a default story exists, whether there are available themes and languages, whether the entry index can correspond to the actual construction entry, and whether the resource list is complete. When the initial identification information of the component to be previewed meets the preset consistency conditions, the initial identification information is determined to be the identification information of the component to be previewed.

[0080] 204. Obtain the target preview selection data.

[0081] 205. In response to the target preview selection data, construct a target preview environment independent of the target business application's runtime chain based on the rendering conditions.

[0082] 206. By using the pre-built component preview data package, obtain the target rendering entry corresponding to the identification information and call it. Load and render the component to be previewed in the target preview environment to obtain a preview result that is independent of the target business application's runtime chain and corresponds to the component to be previewed.

[0083] In this embodiment of the invention, it should be noted that for other descriptions of steps 204-206, please refer to the detailed description of steps 101-103 in Embodiment 1 of the invention, and the embodiments of the invention will not repeat them.

[0084] It is evident that implementation Figure 2The described component isolation preview method can extract component metadata from project source files through preset filtering conditions. When the metadata meets data constraints, it constructs a component preview data package and initial identification information of the component to be previewed. Once the initial identification information meets consistency conditions, it is determined as the final component identification information. It generates standardized component preview data packages through automatic scanning, verification, and integration during the build phase, replacing the manual maintenance mode of component examples, theme configurations, and language files scattered in different files. This avoids data inconsistency issues caused by multiple entry points for maintenance. Simultaneously, it filters invalid metadata and illegal identifiers in advance through double verification, providing a stable and compliant unified data source for runtime previews, effectively reducing metadata maintenance costs and the probability of runtime errors. By obtaining the identification information of the component to be previewed... The system selects target preview data along with corresponding rendering conditions. After responding to the data, it constructs a target preview environment independent of the target business application's runtime path based on the rendering conditions. Then, it uses a pre-built component preview data package to match and call the corresponding target rendering entry point. The component to be previewed is loaded and rendered in the target preview environment to obtain an independent and isolated preview result. This completely decouples UI components from the runtime path of the complete business application. It can achieve independent and isolated preview of components without relying on the business application's login process, page routing, or backend service interfaces. At the same time, it uses a standardized component preview data package as a unified entry carrier to ensure the consistency of the data source throughout the preview process, significantly reducing the cost of reproducing various boundary states of components, improving the convenience of component preview, and thus effectively improving the development and debugging efficiency of mobile UI components.

[0085] In an optional embodiment, the component isolation preview method may further include the following operations: In response to a user-triggered rendering condition update request, when the rendering conditions corresponding to the rendering condition update request meet the preset validity conditions, the preview selection data in the state management center is updated based on the rendering condition update request, so as to reconstruct the target preview environment according to the updated state change message, and update the display status according to the updated state change message.

[0086] In this optional embodiment, the user-triggered rendering condition change request may include the user initially selecting rendering conditions for the component to be previewed, or it may include the user changing the rendering conditions during the rendering process of the component to be previewed. In response to the user-triggered rendering condition update request, it can be determined whether the rendering conditions corresponding to the rendering condition update request meet preset validity conditions. Specifically, it can be verified whether there is invalid data in the rendering conditions. Invalid data may include one or more of the following: component story type invalidity, theme configuration type invalidity, localization language type invalidity, device configuration type invalidity, scaling parameter type invalidity, and visual debugging flag type invalidity. Component story failures can include situations where the source code for a previously selected component story has been deleted, the function name / path has changed, resulting in the story's unique identifier no longer existing in the latest story metadata, or the story's constructor being filtered out of the component preview data package due to syntax errors, parameter changes, or mismatched return types, rendering the previously selected item invalid. Theme configuration failures can include situations where the corresponding theme configuration has been removed from the project, the theme identifier has changed, the previously selected theme ID is no longer in the latest available theme metadata list, or the theme type and constructor entry do not meet rendering constraints and are filtered out, preventing the previously selected theme from being properly injected into the preview environment. Localization language failures can include situations where the corresponding language pack has been deleted, language tags have been removed, the previously selected language item is no longer in the available language tag set, localization delegates are missing, type validation fails, and the corresponding language cannot be loaded correctly, rendering the previously selected... Language becomes an invalid item; Device configuration failures may include the deletion of custom device configurations, changes to device identifiers, the previously selected device model no longer being in the available set of device configuration data, device parameter (resolution, pixel density) validation failing, being filtered out of component preview data packages, and the previously selected device being unusable for building the runtime environment; Scaling parameter failures may include the project adjusting the legal range of text scaling and story scaling, the scaling ratio previously selected by the user exceeding the latest numerical boundary, the removal of preset scaling levels, and the previously selected scaling value no longer being in the available configuration set; Visual debugging flag failures may include changes to the debugging flags supported by the system, the removal of a certain type of debugging flag previously enabled by the user (such as specific performance overlays, layout guides) in the new version, the corresponding debugging capabilities being offline in the rendering shell, and the previously selected flags being ineffective.

[0087] In this optional embodiment, when the rendering conditions corresponding to the rendering condition update request meet the preset validity conditions, that is, when there is no invalid data in the rendering conditions, the preview selection data in the status management center is updated based on the rendering condition update request, so as to reconstruct the target preview environment according to the updated status change message, and update the display status according to the updated status change message; when the rendering conditions corresponding to the rendering condition update request do not meet the preset validity conditions, that is, when there is invalid data in the rendering conditions, the invalid data can be corrected to obtain the corrected preview selection status data. The method of correcting the invalid data may include at least one of default value rollback correction, first item fallback correction, boundary value adaptation correction, and invalid removal correction. Among them, the default value rollback correction is applicable to scenarios with explicit system defaults, such as when the originally selected story or theme has an official default configuration, directly correcting the invalid item to the corresponding default story or theme; the first item fallback correction is applicable to scenarios without explicit defaults, such as when the originally selected language or device configuration is invalid and no default item is configured, then the corresponding parameter is automatically corrected to the first valid item in the available list, such as language rollback to the first available language tag, device rollback to the first standard device configuration, ensuring that the preview environment can be built normally; the boundary value adaptation correction is applicable to scenarios where numerical parameters are invalid, such as when the originally selected text scaling or story scaling ratio exceeds the latest valid range, then the value is automatically corrected to the boundary value closest to the original value (if it exceeds the maximum value, take the maximum value; if it is lower than the minimum value, take the minimum value), preserving the user's adjustment intention to the greatest extent; the invalid removal correction is applicable to scenarios where set parameters are invalid, such as when only some of the originally selected visual debugging flags are invalid, then the invalid flag items are automatically removed, the remaining valid flags are retained and kept on, without affecting the normal use of other debugging capabilities.

[0088] As can be seen, implementing this optional embodiment can first verify the validity of the corresponding rendering conditions when a user-triggered rendering condition update request is received. Only after the conditions are met will the preview selection data in the state management center be updated. Then, based on the updated state change message, the preview environment reconstruction and control interface display status update are completed synchronously. The processing logic of verification before updating can avoid rendering anomalies caused by illegal parameter input. At the same time, relying on the state management center to realize the unified distribution of state changes, it ensures that the rendering end and the control end receive the latest status synchronously, and ensures that the status of the two ends is aligned in real time after parameter adjustment, effectively improving the smoothness of preview operation and the reliability of state synchronization.

[0089] In another alternative embodiment, the component isolation preview method may further include the following operations: Check whether the preview result of the component to be previewed matches the display state of the control interface corresponding to the component to be previewed; When the preview result does not match the display status, the preview selection data is retrieved again from the status management center. Based on the retrieved preview selection data, the target preview environment is updated, and the preview result is retrieved again based on the updated target preview environment.

[0090] In this optional embodiment, optionally, before rendering the component to be previewed for the first time and displaying the preview result, and / or after reconstructing the target preview environment, it is detected whether the preview result corresponding to the component to be previewed matches the display state of the control interface corresponding to the component to be previewed, that is, whether the data displayed in the preview result and the display state of the control interface are the same or correspond; when the preview result does not match the display state, the preview selection data is retrieved again from the state management center, and the target preview environment is updated according to the retrieved preview selection data, so as to retrieve the preview result again based on the updated target preview environment; when the preview result matches the display state, the rendering result is rendered and displayed.

[0091] As can be seen, implementing this optional embodiment can detect whether the preview result of the component to be previewed matches the display state of the corresponding control interface. If they do not match, the target preview environment can be updated and corrected based on the target preview selection data. By adding a fallback mechanism for state consistency verification and correction, the system can promptly detect the disconnect between the states of the two ends caused by factors such as communication delays, message loss, and rendering timing deviations, and automatically complete the correction and alignment of the preview environment. This further ensures the consistency between the display on the control end and the rendering on the preview end, and improves the overall reliability of the preview system.

[0092] Example 3 Please see Figure 3 , Figure 3 This is a schematic diagram of the structure of a component isolation preview system disclosed in an embodiment of the present invention. Figure 3 The described component isolation preview system may include an intelligent server or intelligent platform for implementing component isolation preview. The intelligent server may include a local server, a NAS server, or a cloud server; this embodiment of the invention is not limited thereto. Figure 3 As shown, the component-isolated preview system includes a control terminal 301, a main control module 302, and a preview rendering terminal 303, wherein: The control terminal 301 is used to acquire the input target preview selection data; wherein, the target preview selection data includes the identification information of the component to be previewed in the target business application and the rendering conditions corresponding to the component to be previewed; The main control module 302 is used to respond to the target preview selection data and construct a target preview environment independent of the target business application's runtime chain based on the rendering conditions; The preview rendering terminal 303 is used to obtain the target rendering entry corresponding to the identification information through a pre-built component preview data package and call it to load and render the component to be previewed in the target preview environment, so as to obtain a preview result that is independent of the target business application's runtime chain and corresponds to the component to be previewed; wherein, the component preview data package includes at least: the identification information of the previewable components in the target business application and the entry information corresponding to the identification information of each previewable component.

[0093] In this embodiment of the invention, optionally, the rendering conditions include at least one or more of the following: theme data, language data, scaling data, and visualization debugging flag data.

[0094] It is evident that implementation Figure 3 The described component isolation preview system can obtain target preview selection data containing the identifier information of the component to be previewed and the corresponding rendering conditions. After responding to the data, it constructs a target preview environment independent of the target business application's runtime chain based on the rendering conditions. Then, it uses a pre-built component preview data package to match and call the corresponding target rendering entry point. The component to be previewed is loaded and rendered in the target preview environment to obtain an independent and isolated preview result. This system can completely decouple UI components from the runtime chain of the complete business application. It can achieve independent and isolated preview of components without relying on the business application's login process, page routing, or backend service interfaces. At the same time, it uses a standardized component preview data package as a unified entry carrier to ensure the consistency of the data source throughout the preview process, significantly reducing the reproduction cost of various boundary states of components, improving the convenience of component preview, and thus effectively improving the development and debugging efficiency of mobile UI components.

[0095] In an optional embodiment, such as Figure 4 As shown, the component isolation preview system may also include a state management center 304: The status management center 304 is used to obtain target preview selection data before the main control module 302 builds a target preview environment independent of the target business application's runtime link, and to update the preview selection data currently maintained by the status management center 304 based on the target preview selection data, so that the main control module 302 can build the target preview environment based on the preview selection data obtained from the status management center 304, and the control terminal 301 can update the display status of the control interface corresponding to the component to be previewed based on the same preview selection data obtained from the status management center 304.

[0096] It is evident that implementation Figure 4The described component isolation preview system can receive target preview selection data and update its maintained preview selection data through the state management center before building the target preview environment. This allows both the preview rendering end and the control interface to obtain preview selection data from the same state management center, which is used to build the preview environment and update the display state, respectively. It can establish a globally unique source of state truth through a centralized state management mechanism, solving the problem of inconsistency between the display state of the control interface and the rendering state of the preview rendering end from the root of the architecture. This avoids preview deviations caused by the disconnection of parameters between the two ends and effectively improves the accuracy of the preview state and the stability of operation.

[0097] In another alternative embodiment, such as Figure 4 As shown, the rendering conditions include the device configuration data selected by the user and the preview selection status data; The main control module 302 responds to the target preview selection data and constructs a target preview environment independent of the target business application's runtime chain based on the rendering conditions. Specific methods include: The component display device type is determined based on the device configuration data, and the corresponding rendering rules are determined based on the component display device type; Determine the runtime environment configuration information based on the preview selection status data; Based on rendering rules and runtime environment configuration information, construct a target preview environment that is independent of the target business application's runtime chain.

[0098] It is evident that implementation Figure 4 The described component isolation preview system can first determine the component display device type and corresponding rendering rules based on device configuration data, and then determine the runtime environment configuration information by combining preview selection status data, and finally complete the construction of an independent preview environment. Through multi-dimensional environment parameter adaptation logic, it can accurately simulate the native rendering effect under different platforms and different size devices, while covering multiple runtime configurations such as theme, language, scaling ratio, and debugging flags. It can complete multi-scene adaptation and debugging without switching multiple simulators or manually modifying project configurations, significantly improving the debugging efficiency and effect reproduction of multi-dimensional adaptation on mobile devices.

[0099] In yet another alternative embodiment, such as Figure 4 As shown, the component isolation preview system may also include a data construction module 305, wherein the data construction module 305 is used for: Based on preset filtering conditions, extract component metadata from the project source file of the component to be previewed; When the component metadata meets the preset data constraints, construct the component preview data package and the initial identification information of the component to be previewed based on the component metadata; When the initial identification information of the component to be previewed meets the preset consistency conditions, the initial identification information is determined to be the identification information of the component to be previewed.

[0100] It is evident that implementation Figure 4 The described component isolation preview system can extract component metadata from project source files through preset filtering conditions. When the metadata meets data constraints, it constructs a component preview data package and initial identification information of the component to be previewed. Once the initial identification information meets consistency conditions, it is determined as the final component identification information. It generates standardized component preview data packages through automatic scanning, verification, and integration during the build phase, replacing the manual maintenance mode of component examples, theme configurations, and language files scattered in different files. This avoids data inconsistency issues caused by multiple entry points for maintenance. Simultaneously, it filters invalid metadata and illegal identifiers in advance through dual verification, providing a stable and compliant unified data source for runtime previews, effectively reducing metadata maintenance costs and the probability of runtime errors. By obtaining the identification information of the component to be previewed... The system selects target preview data along with corresponding rendering conditions. After responding to the data, it constructs a target preview environment independent of the target business application's runtime path based on the rendering conditions. Then, it uses a pre-built component preview data package to match and call the corresponding target rendering entry point. The component to be previewed is loaded and rendered in the target preview environment to obtain an independent and isolated preview result. This completely decouples UI components from the runtime path of the complete business application. It can achieve independent and isolated preview of components without relying on the business application's login process, page routing, or backend service interfaces. At the same time, it uses a standardized component preview data package as a unified entry carrier to ensure the consistency of the data source throughout the preview process, significantly reducing the cost of reproducing various boundary states of components, improving the convenience of component preview, and thus effectively improving the development and debugging efficiency of mobile UI components.

[0101] In yet another alternative embodiment, such as Figure 4 As shown, the main control module 302 is also used to respond to the rendering condition update request triggered by the user. When the rendering condition corresponding to the rendering condition update request meets the preset validity conditions, the preview selection data in the status management center 304 is updated based on the rendering condition update request, so that the main control module 302 can reconstruct the target preview environment according to the updated status change message, and the preview rendering terminal 303 can update the display status according to the updated status change message.

[0102] It is evident that implementation Figure 4The described component isolation preview system, upon receiving a user-triggered rendering condition update request, first verifies the validity of the corresponding rendering conditions. If the conditions are met, it updates the preview selection data in the state management center. Then, based on the updated state change message, it synchronously completes the reconstruction of the preview environment and the update of the control interface display status. The processing logic of verification before updating avoids rendering anomalies caused by illegal parameter input. At the same time, relying on the state management center to achieve unified distribution of state changes, it ensures that the rendering end and the control end receive the latest status synchronously, ensuring that the status of both ends is aligned in real time after parameter adjustment, effectively improving the smoothness of preview operation and the reliability of state synchronization.

[0103] In yet another alternative embodiment, such as Figure 4 As shown, the main control module 302 is also used to detect whether the preview result corresponding to the component to be previewed matches the display state of the control interface corresponding to the component to be previewed; when the preview result does not match the display state, the preview selection data is re-obtained from the state management center 304, and the target preview environment is updated according to the re-obtained preview selection data, so that the preview rendering end 303 re-obtains the preview result based on the updated target preview environment.

[0104] It is evident that implementation Figure 4 The described component isolation preview system can detect whether the preview result of the component to be previewed matches the display state of the corresponding control interface. If they do not match, the system updates and corrects the target preview environment based on the target preview selection data. By adding a fallback mechanism for state consistency verification and correction, the system can promptly detect the disconnect between the two states caused by factors such as communication delays, message loss, and rendering timing deviations, and automatically correct and align the preview environment. This further ensures the consistency between the display on the control end and the rendering on the preview end, and improves the overall reliability of the preview system.

[0105] In yet another alternative embodiment, such as Figure 4 As shown, the main control module 302 is further configured to, when a first type of data change event is detected for the component to be previewed, perform a hot reload operation on the component to be previewed loaded and rendered in the target preview environment based on the first type of data change event via the preview rendering terminal 303, in order to update the preview result. The first type of data change event includes a change event in the data item set of the component to be previewed; and / or, The main control module 302 is also used to update the target preview selection data and component preview data package based on the second type of data change event when a second type of data change event is detected for the component to be previewed, through the data construction module 305. When it is determined that the identification information in the updated target preview selection data meets the preset consistency conditions, the target preview environment is reconstructed based on the updated target preview selection data. Then, through the preview rendering terminal 303, the updated component preview data package is used to load and render the updated component to be previewed in the reconstructed target preview environment. The second type of data change event includes the metadata key value change event and / or metadata field structure change event of the component to be previewed.

[0106] It is evident that implementation Figure 4 The described component isolation preview system can set differentiated update strategies for two types of data change events of the component to be previewed. For the first type of event, which only involves changes in the set of data items, hot reloading of the component is performed to update the preview result. For the second type of event, which involves changes in metadata key values ​​or field structure, the target preview selection data and the component preview data package are updated first. After verifying the consistency of the identifiers, the preview environment is rebuilt and the updated component is rendered. Through the differentiated update strategy of hierarchical reloading, the system can match the lightest refresh method to changes of different ranges, reduce unnecessary data package reconstruction and environment reconstruction operations, and greatly improve the preview refresh efficiency. At the same time, the system can simultaneously verify the consistency of the identifiers to avoid rendering anomalies caused by invalid selections after data updates, and ensure the stability of the updated preview operation.

[0107] In yet another alternative embodiment, such as Figure 4 As shown, the main control module 302 is also used to capture all generated anomalies when an anomaly is detected, and generate anomaly diagnosis information and location information for each anomaly, including construction anomalies and / or rendering anomalies.

[0108] It is evident that implementation Figure 4 The described component isolation preview system can capture all build and rendering exceptions when an anomaly is detected, and generate corresponding diagnostic and location information for each exception. Through the end-to-end exception capture mechanism, it can fully cover the entire process of errors from environment building to component rendering during component preview, avoiding process crashes caused by unrestrained exception throwing. At the same time, the structured diagnostic and location information can clearly mark the exception type and location, providing developers with clear basis for troubleshooting problems and effectively reducing the troubleshooting cost of UI rendering problems.

[0109] In yet another alternative embodiment, such as Figure 4As shown, the preview rendering terminal 303 is also used to generate an error degradation view based on each exception of the component to be previewed and replace the display area of ​​the component to be previewed in the target preview environment; and to display exception diagnosis information and location information in the error degradation view.

[0110] It is evident that implementation Figure 4 The described component isolation preview system can generate a corresponding error degradation view for each captured exception, replace the display area of ​​the component to be previewed in the target preview environment, and display exception diagnosis and location information in the degradation view. Through this exception isolation and degradation display mechanism, the rendering failure of a single component can be strictly limited to the display area of ​​the component itself, avoiding the entire preview page from crashing, blanking, or failing overall functionality due to the exception of a single component. At the same time, the standardized exception information display can help developers quickly locate the root cause of the problem, which not only improves the overall operational stability of the preview system, but also optimizes the exception feedback experience during the debugging process.

[0111] In yet another alternative embodiment, such as Figure 4 As shown, the main control module 302 is also used to generate a preview context snapshot corresponding to the component to be previewed based on the target preview selection data, the component preview data package and the current time identifier, and save the preview context snapshot to a local file; when a restore request for the target preview context snapshot is detected, the preview environment corresponding to the target preview context snapshot is restored based on the target preview context snapshot.

[0112] It is evident that implementation Figure 4 The described component isolation preview system can generate a preview context snapshot of the component to be previewed based on the component preview data package, preview selection status data, and current time stamp, and save it as a local file. It also supports loading snapshots shared across platforms or stored locally to restore the corresponding preview device's operating environment. It can structurally retain the complete preview debugging scenario, which is convenient for developers to save the debugging scene and quickly reproduce the problem scenario. It also supports team members to share snapshots and restore the debugging environment with one click without having to repeatedly configure all preview parameters. In addition, batch snapshots can also be extended to automated visual regression testing and full component inspection, which greatly improves team collaboration efficiency and problem reproduction capabilities.

[0113] Example 4 Please see Figure 5 , Figure 5 This is a schematic diagram of the structure of an electronic device disclosed in an embodiment of the present invention. The electronic device can communicate with a network attached storage device (NETS), access project source files stored in the NETS, and perform isolated previews of the components to be previewed in the project source files according to the component metadata-based component isolation preview method described in Embodiment 1 or Embodiment 2 of the present invention. Figure 5As shown, the electronic device may include: Memory 401 storing executable program code; Processor 402 coupled to memory 401; The processor 402 calls the executable program code stored in the memory 401 to execute the steps in the component isolation preview method described in Embodiment 1 or Embodiment 2 of the present invention.

[0114] Example 5 This invention discloses a computer storage medium storing computer instructions. When these computer instructions are invoked, they are used to execute some or all of the steps in any of the component isolation preview methods disclosed in Embodiment 1 of this invention.

[0115] Example 6 This invention discloses a computer program product, which includes a non-transitory computer-readable storage medium storing a computer program, and the computer program is operable to cause a computer to perform the steps in the component isolation preview method described in Embodiment 1 or Embodiment 2.

[0116] The device embodiments described above are merely illustrative. The modules described as separate components may or may not be physically separate. The components shown as modules may or may not be physical modules; that is, they may be located in one place or distributed across multiple network modules. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs. Those skilled in the art can understand and implement this without any creative effort.

[0117] Through the detailed description of the above embodiments, those skilled in the art can clearly understand that each implementation method can be implemented by means of software plus necessary general-purpose hardware platforms, and of course, it can also be implemented by hardware. Based on this understanding, the above technical solutions, in essence or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product can be stored in a computer-readable storage medium, including read-only memory (ROM), random access memory (RAM), programmable read-only memory (PROM), erasable programmable read-only memory (EPROM), one-time programmable read-only memory (OTPROM), electrically-Erasable Programmable Read-Only Memory (EEPROM), compact disc read-only memory (CD-ROM) or other optical disc storage, disk storage, magnetic tape storage, or any other computer-readable medium that can be used to carry or store data.

[0118] Finally, it should be noted that the component isolation preview method, system, and electronic device disclosed in the embodiments of the present invention are merely preferred embodiments of the present invention and are only used to illustrate the technical solutions of the present invention, not to limit them. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A component isolation preview method, characterized in that, The method includes: Obtain the input target preview selection data; wherein, the target preview selection data includes the identification information of the component to be previewed in the target business application and the rendering conditions corresponding to the component to be previewed; In response to the target preview selection data, a target preview environment independent of the target business application's runtime chain is constructed based on the rendering conditions; By using a pre-built component preview data package, the target rendering entry corresponding to the identification information is obtained and invoked. The component to be previewed is loaded and rendered in the target preview environment to obtain a preview result that is independent of the target business application's runtime chain and corresponds to the component to be previewed. The component preview data package includes at least: the identification information of the previewable components in the target business application and the entry information corresponding to the identification information of each previewable component.

2. The component isolation preview method according to claim 1, characterized in that, Before constructing the target preview environment independent of the target business application's runtime environment, the method further includes: The target preview selection data is obtained through the state management center, and the preview selection data currently maintained by the state management center is updated according to the target preview selection data, so as to construct the target preview environment based on the preview selection data obtained from the state management center, and update the display status of the control interface corresponding to the component to be previewed based on the same preview selection data obtained from the state management center.

3. The component isolation preview method according to claim 1, characterized in that, The rendering conditions include the device configuration data selected by the user and the preview selection status data; The step of responding to the target preview selection data and constructing a target preview environment independent of the target business application's runtime chain based on the rendering conditions includes: The component display device type is determined based on the device configuration data, and the corresponding rendering rules are determined based on the component display device type; The runtime environment configuration information is determined based on the preview selection status data. Based on the rendering rules and the runtime environment configuration information, a target preview environment independent of the target business application runtime chain is constructed.

4. The component isolation preview method according to claim 1, characterized in that, The method further includes: Based on preset filtering conditions, extract component metadata from the project source file of the component to be previewed; When the component metadata meets the preset data constraints, a component preview data package and the initial identification information of the component to be previewed are constructed based on the component metadata; When the initial identification information of the component to be previewed meets the preset consistency conditions, the initial identification information is determined to be the identification information of the component to be previewed.

5. The component isolation preview method according to any one of claims 2-4, characterized in that, The method further includes: In response to a user-triggered rendering condition update request, when the rendering conditions corresponding to the rendering condition update request meet preset validity conditions, the preview selection data in the status management center is updated based on the rendering condition update request, so as to reconstruct the target preview environment according to the updated status change message, and update the display status according to the updated status change message.

6. The component isolation preview method according to any one of claims 2-4, characterized in that, The method further includes: Detect whether the preview result corresponding to the component to be previewed matches the display state of the control interface corresponding to the component to be previewed; When the preview result does not match the display status, the preview selection data is retrieved again from the status management center. Based on the retrieved preview selection data, the target preview environment is updated so that the preview result is retrieved again based on the updated target preview environment.

7. The component isolation preview method according to any one of claims 1-4, characterized in that, The method further includes: When a first type of data change event is detected for the component to be previewed, a hot reload operation is performed on the component to be previewed loaded and rendered in the target preview environment based on the first type of data change event to update the preview result. The first type of data change event includes a change event in the data item set of the component to be previewed; and / or, When a second type of data change event is detected for the component to be previewed, the target preview selection data and the component preview data package are updated based on the second type of data change event. When it is determined that the identification information in the updated target preview selection data meets the preset consistency conditions, the target preview environment is reconstructed based on the updated target preview selection data. The updated component preview data package is then used to load and render the updated component to be previewed in the reconstructed target preview environment. The second type of data change event includes changes in the metadata key values ​​and / or metadata field structure of the component to be previewed.

8. The component isolation preview method according to any one of claims 1-4, characterized in that, The method further includes: When an anomaly is detected, all anomalies are identified, and anomaly diagnosis information and location information for each anomaly are generated, including construction anomalies and / or rendering anomalies.

9. The component isolation preview method according to claim 8, characterized in that, The method further includes: For each of the anomalies in the component to be previewed, an error degradation view is generated and the display area for the component to be previewed in the target preview environment is replaced; The error degradation view displays the anomaly diagnostic information and the location information.

10. The component isolation preview method according to any one of claims 1-4, characterized in that, The method further includes: Based on the target preview selection data, the component preview data package, and the current time identifier, a preview context snapshot corresponding to the component to be previewed is generated, and the preview context snapshot is saved to a local file; When a restore request for a target preview context snapshot is detected, the preview environment corresponding to the target preview context snapshot is restored based on the target preview context snapshot.

11. The component isolation preview method according to any one of claims 1-4, 6 and 9, characterized in that, The rendering conditions include at least one or more of the following: theme data, language data, scaling data, and visualization debugging flag data.

12. A component isolation preview system, characterized in that, The system includes a control terminal, a main control module, and a preview rendering terminal, wherein: The control terminal is used to acquire input target preview selection data; wherein, the target preview selection data includes the identification information of the component to be previewed in the target business application and the rendering conditions corresponding to the component to be previewed; The main control module is used to respond to the target preview selection data and construct a target preview environment independent of the target business application's runtime chain according to the rendering conditions; The preview rendering terminal is used to obtain and call the target rendering entry corresponding to the identification information through a pre-built component preview data package, load and render the component to be previewed in the target preview environment, so as to obtain a preview result that is independent of the target business application's runtime chain and corresponds to the component to be previewed; wherein, the component preview data package includes at least: the identification information of the previewable components in the target business application and the entry information corresponding to the identification information of each previewable component.

13. An electronic device, characterized in that, The electronic device includes: Memory containing executable program code; A processor coupled to the memory; The processor calls the executable program code stored in the memory to execute the component isolation preview method as described in any one of claims 1-11.

Images