1# IsolatedComponent (System API)
2
3**IsolatedComponent** is designed to support the embedding and display of UIs provided by independent .abc files within the current page, with the displayed content running in a restricted worker thread.
4
5The **FolderStack** component is usually used in modular development scenarios where .abc file hot update is required.
6
7> **NOTE**
8>
9> This component is supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version.
10>
11> The APIs provided by this module are system APIs.
12
13## Constraints
14
15**Specifications Constraints**
16
171. This component does not support preview.
18
192. .abc files must pass the [VerifyAbc](../../apis-ability-kit/js-apis-bundleManager.md#bundlemanagerverifyabc11) verification to be used in this component.
20
213. Construction parameter updates are not supported; only the initial input is effective.
22
234. Nesting of **IsolatedComponent** components is not supported.
24
25**Experience Constraints**
26
271. When an **IsolatedComponent** component is created, there is a certain amount of time required for the restricted worker thread to load and render the .abc file layout. During this period, the background color of the **IsolatedComponent** is displayed.
28
292. The main thread and the restricted worker thread handle layout rendering asynchronously, which can lead to desynchronization in page changes caused by layout alterations or rotations.
30
313. Event transmission between the main thread and the restricted worker thread is managed asynchronously, and there is no support for event bubbling between threads. As a result, UI interactions between threads may encounter event conflicts.
32
33**Security Constraints**
34
351. Displaying an independent .abc file through the **IsolatedComponent** component in the host process means that the .abc file content is fully accessible to the host, granting the host the control over the file content. For security-sensitive situations where such open access could be a risk, the use of this feature is disabled.
36
372. Running independent .abc files in a restricted worker thread offers a level of security, as the .abc file content is isolated and does not interfere with the main thread.
38
39## Child Components
40
41Not supported
42
43## APIs
44
45IsolatedComponent(options: IsolatedOptions)
46
47Creates an **IsolatedComponent** component to display the .abc file executed in a restricted worker thread.
48
49**Parameters**
50
51| Name               | Type                                                  | Mandatory| Description          |
52| --------------------- | ---------------------------------------------------------- | ---- | ------------------ |
53| options | [IsolatedOptions](#isolatedoptions)                | Yes  | Construction parameters.|
54
55## IsolatedOptions
56Describes the optional construction parameters during **IsolatedComponent** construction.
57
58**Parameters**
59
60| Name              | Type                                | Mandatory| Description                                                                                                     |
61| ----                 | ---------------------------------------- | ---- | ---------------                                                                                               |
62| want | [Want](../../apis-ability-kit/js-apis-app-ability-want.md)                                  | Yes  | .abc file information to load.|
63| worker | [RestrictedWorker](../../apis-arkts/js-apis-worker.md#restrictedworker11)       | Yes  | Restricted worker thread where the .abc file is running.|
64
65## Attributes
66Only the [width](ts-universal-attributes-size.md#width), [height](ts-universal-attributes-size.md#height), and [backgroundColor](ts-universal-attributes-background.md#backgroundcolor) universal attributes are supported.
67
68## Events
69
70The [universal events](ts-universal-events-click.md) are not supported.
71
72Events are asynchronously passed to the restricted worker thread after coordinate conversion.
73
74The following events are supported:
75
76### onError
77
78onError(callback:ErrorCallback)
79
80Invoked when an error occurs during the running of the **IsolatedComponent**. You can obtain the error information based on the **code**, **name**, and **message** parameters in the callback and rectify the exception accordingly.
81
82**Parameters**
83
84| Name                      | Type  | Description                                                        |
85| ---------------------------- | ------ | ------------------------------------------------------------ |
86| callback                        | [ErrorCallback](../../apis-basic-services-kit/js-apis-base.md#errorcallback) | Error information.   |
87
88## Example
89
90This example shows only the usage of the component.
91
92```ts
93// OhCardWorker.ets
94import { worker, ThreadWorkerGlobalScope, MessageEvents, ErrorEvent } from '@kit.ArkTS';
95const workerPort: ThreadWorkerGlobalScope = worker.workerPort;
96
97workerPort.onmessage = (e: MessageEvents) => {}
98workerPort.onmessageerror = (e: MessageEvents) => {}
99workerPort.onerror = (e: ErrorEvent) => {}
100```
101
102```ts
103// Index.ets
104import { worker } from '@kit.ArkTS';
105import { bundleManager } from '@kit.AbilityKit';
106
107@Entry
108@Component
109struct Index2 {
110  @State isShow: boolean = false;
111  worker ?: worker.RestrictedWorker;
112  resourcePath : string = "";
113  abcPath : string = "";
114  entryPoint : string = "";
115  fileName: string = "Index"
116
117  build() {
118    Row() {
119      Column() {
120        // 1. Call verifyAbc to verify /data/storage/el2/haps/entry/files/Index.abc in the application sandbox.
121        Button("verifyAbc").onClick(()=>{
122          let abcFilePath = getContext(this).filesDir + "/" + this.fileName + ".abc";
123          bundle.verifyAbc([abcFilePath], false);
124        }).height(100).width(100)
125
126        // 2. Display the IsolatedComponent.
127        Button("showIsolatedComponent").onClick(()=>{
128          if (!this.isShow) {
129            this.worker = new worker.RestrictedWorker("./OhCardWorker");
130            // /data/storage/el2/haps/entry/files/{fileName}.hap
131            this.resourcePath = getContext(this).filesDir + "/" + this.fileName + '.hap';
132            // /abcs/data/storage/el2/haps/entry/files/{fileName}.hap
133            this.abcPath = "/abcs" + getContext(this).filesDir + "/" + this.fileName;
134            this.entryPoint = "com.ohos.test/entry/ets/pages/Index"
135            this.isShow = true;
136          }
137        }).height(100).width(100)
138
139        if (this.isShow) {
140          IsolatedComponent({
141            want: {
142              "parameters" : {
143                "resourcePath" : this.resourcePath,
144                "abcPath" : this.abcPath,
145                "entryPoint" : this.entryPoint
146              }
147            },
148            "worker" : this.worker
149          }).width(300).height(300).onError((err)=>{
150            console.info("onError : " + JSON.stringify(err));
151          })
152        }
153      }
154      .width('100%')
155    }
156    .height('100%')
157  }
158}
159
160```
161