# Occupying components

Base library 2.11.2 and above is supported, and the effects below 2.11.2 are the same as unconfigured

In the use of such as subcontract asynchronizationWhen a feature such as or is time-consumed to inject features such as , other custom components referenced by the custom component may be unavailable at the beginning of the rendering.At this point, in order for the rendering process not to be blocked, the unavailable custom component needs a__"Component placeholder"__.The base library renders the unused component with a placeholder component, then replaces the placeholder component with the component when it is available.

The occupying component of a custom component can be another custom component, or a built-in component.

# To configure

ThecomponentPlaceholderfield in the JSON configuration corresponding to the page or custom component is used to specify the placeholder component, such as:

{
  "usingComponents": {
    "comp-a": "../comp/compA",
    "comp-b": "../comp/compB",
    "comp-c": "../comp/compC"
  },
  "componentPlaceholder": {
    "comp-a": "view",
    "comp-b": "comp-c"
  }
}

This configuration represents:

• Componentcomp-aThe placeholder component is a built-in componentview
• The placeholder component of the componentcomp-bis a custom componentcomp-c(Its path is configured inusingComponents)

Suppose that the template corresponding to this configuration is as follows:

<button ontap="onTap">显示组件</button>
<comp-a wx-if="{{ visible }}">
  <comp-b prop="{{ p }}">text in slot</comp-b>
</comp-a>

Weixin Mini Program Upon initiationvisibleisfalse,Then only thebuttonwill be rendered;When the button is clicked,this.setData ({visible: true})is executed, at which point ifcomp-a,comp-bare not available, the page will be rendered as:

<button>显示组件</button>
<view>
  <comp-c prop="{{ p }}">text in slot</comp-c>
</view>

Com-awithcomp-bWhen the preparation is complete, the page is replaced with:

<button>显示组件</button>
<comp-a>
  <comp-b prop="{{ p }}">text in slot</comp-b>
</comp-a>

# Note

1. When a component is specified as a placeholder (comp-cin the example above), specifying a placeholder for it is not valid.It can be understood that if a component needs to be an occupying component for other components, it must be available in the first place;
2. Current instances where custom components are not available include:
   • In cases where the subpackage asynchronization feature is used, components of another subpackage are referenced when the corresponding subpackage has not yet been downloaded;
   • When using the time-injecting feature, the component was not injected;
3. If a component is unavailable and its occupying component does not exist, an error is reported and thrown during rendering;
4. If a component does not exist, but a placeholder component is specified for it, the placeholder component can be rendered normally, but an error is reported and thrown when subsequent attempts to prepare a replacement are made.

# Annex: The rendering process involving occupant components

When the base library attempts to render a component, it first recursively checksusingComponentsto gather information about all the components it will use;In this process, if a component being used is not available, the repository first checks whether it has a corresponding occupying component. If not, the foundation interrupts the rendering and throws an error; If so, the undefined component is marked and rendered using a placeholder component in the subsequent rendering process to replace it. Unusable components are attempted to prepare (download sub-packages or inject code, etc.) at the end of the current rendering process; When the preparation process is complete, try to render the component (which is actually the same process) and replace the occupied component that was previously rendered.