Dependent Libraries (preview)

[This topic is pre-release documentation and is subject to change.]

With model-driven apps, you can reuse a prebuilt library contained in another component that is loaded as a dependency to more than one component.

Having copies of a prebuilt library in multiple controls is undesirable. Reusing existing libraries improves performance, especially when the library is large, by reducing the load time for all components that use the library. Library reuse also helps reduce the maintenance overhead in build processes.

To use dependent libraries, you need to:

• Create a Library component that contains the library. This component can provide some functionality or only be a container for the library.
• Configure another component to depend on the library loaded by the library component.

By default, the library loads when the dependent component loads, but you can configure it to load on demand.

This way you can independently maintain the library in the Library Control and the dependent controls don't need to have a copy of the library bundled with them.

How it works

You need to add configuration data to your component project so that the build process deploys your libraries the way you want. Set this configuration data by adding or editing the following files:

• featureconfig.json
• webpack.config.js
• Edit the manifest schema to Register dependencies

featureconfig.json

Add this file to override the default feature flags for a component without modifying the files generated in the node_modules folder.

The following table describes the feature flags you can set in featureconfig.json:

By default, these values are off. Set them to on to override the default. For example:

{ 
  "pcfAllowCustomWebpack": "on" 
} 

{ 
   "pcfResourceDependency": "on",
   "pcfAllowCustomWebpack": "off" 
} 

webpack.config.js

The build process for components uses Webpack to bundle the code and dependencies into a deployable asset. To exclude your libraries from this bundling, add a webpack.config.js file to the project root folder that specifies the alias of the library as externals. Learn more about the Webpack externals configuration option

This file might look like the following when the library alias is myLib.

/* eslint-disable */ 
"use strict"; 

module.exports = { 
  externals: { 
    "myLib": "myLib" 
  }, 
}  

Register dependencies

Use the dependency element within resources of the manifest schema.

<resources>
  <dependency
    type="control"
    name="samples_SampleNS.SampleStubLibraryPCF"
    order="1"
  />
  <code path="index.ts" order="2" />
</resources>

Dependency as on demand load of a component

Rather than loading the dependent library when a component loads, you can load the dependent library on demand. Loading on demand provides the flexibility for more complex controls to only load dependencies when they're required, especially if the dependent libraries are large.

To enable on demand loading, you need to:

1. Add these platform-action element, feature-usage element, and uses-feature element child elements to the control element:

   <platform-action action-type="afterPageLoad" />
   <feature-usage>
      <uses-feature name="Utility"
         required="true" />
   </feature-usage>
   

2. Set the load-type attribute of the dependency element to onDemand.

   <dependency type="control"
         name="samples_SampleNamespace.StubLibrary"
         load-type="onDemand" />
   

Next steps

Try a tutorial that walks you through creating a dependent library.