{"id":27381348,"url":"https://github.com/albanian-xrm/pcf-workspaces","last_synced_at":"2025-10-04T16:16:01.153Z","repository":{"id":285580780,"uuid":"958494546","full_name":"albanian-xrm/pcf-workspaces","owner":"albanian-xrm","description":"Tutorial on how to use NPM workspaces to work with multiple PCF components on a monorepo.","archived":false,"fork":false,"pushed_at":"2025-04-01T15:29:46.000Z","size":140,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-13T14:56:27.221Z","etag":null,"topics":["dataverse","mvpbuzz","powerappscomponentframework"],"latest_commit_sha":null,"homepage":"https://xrm.al/blog","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/albanian-xrm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-04-01T09:38:42.000Z","updated_at":"2025-04-10T00:57:00.000Z","dependencies_parsed_at":"2025-04-01T15:35:37.238Z","dependency_job_id":"6ba99092-fb6d-44b4-914e-d32f9f65495d","html_url":"https://github.com/albanian-xrm/pcf-workspaces","commit_stats":null,"previous_names":["albanian-xrm/pcf-workspaces"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/albanian-xrm/pcf-workspaces","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/albanian-xrm%2Fpcf-workspaces","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/albanian-xrm%2Fpcf-workspaces/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/albanian-xrm%2Fpcf-workspaces/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/albanian-xrm%2Fpcf-workspaces/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/albanian-xrm","download_url":"https://codeload.github.com/albanian-xrm/pcf-workspaces/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/albanian-xrm%2Fpcf-workspaces/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278337471,"owners_count":25970530,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-04T02:00:05.491Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dataverse","mvpbuzz","powerappscomponentframework"],"created_at":"2025-04-13T14:56:26.347Z","updated_at":"2025-10-04T16:16:01.071Z","avatar_url":"https://github.com/albanian-xrm.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PCF Workspaces\nTutorial on how to use NPM workspaces to work with multiple PCF components on a monorepo.\n\nNPM Workspaces is a feature in the npm CLI that allows you to manage multiple packages within a single top-level, root package. This feature streamlines the workflow by automating the linking process during npm install, avoiding the need to manually use npm link. [read more here...](https://docs.npmjs.com/cli/using-npm/workspaces)\n\nFor this tutorial we are going to build components using Dependent Libraries, and with the help of workspaces we are going to avoid having many node_module folders in our project. If you are interested in Dependent Libraries [read more here...](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/dependent-libraries)\n\n## 1. Setting up the workspace\nGo to the root of your project. Our example will be using vscode but this is not mandatory.\n\n```shell\ncode C:\\repos\\AlbanianXrm\\PCF-Workspaces\n```\n\n1. Create a `package.json` file at the root of your project.\n\n1. Write the following content to the `package.json`:\n    ```json\n    {\n        \"name\": \"pcf-worskpaces\",\n        \"workspaces\":[\n            \"StubLibrary\",\n            \"DependencyControl\"\n        ]\n    }\n    ```\n\n1. Create a new folder at the root of your project named `StubLibrary`\n\n1. Open a terminal to that folder:\n   ```shell\n   cd C:\\repos\\AlbanianXrm\\PCF-Workspaces\\StubLibrary\n   ```\n\n1. Create the first PCF Project\n   ```shell\n   pac pcf init -n StubLibrary -ns SampleNamespace -t field\n   ```\n\n1. Modify the `package.json` of your PCF project to have a different name and avoid clashes with workspaces. The diff for `StubLibrary/package.json` should look like this: \n    ```diff\n    {\n    -   \"name\": \"pcf-project\",\n    +   \"name\": \"stub-library\",\n        \"version\": \"1.0.0\",\n        \"description\": \"Project containing your PowerApps Component Framework (PCF) control.\",\n        \"scripts\": {\n            \"build\": \"pcf-scripts build\",\n            \"clean\": \"pcf-scripts clean\",\n            \"lint\": \"pcf-scripts lint\",\n            \"lint:fix\": \"pcf-scripts lint fix\",\n            \"rebuild\": \"pcf-scripts rebuild\",\n            \"start\": \"pcf-scripts start\",\n            \"start:watch\": \"pcf-scripts start watch\",\n            \"refreshTypes\": \"pcf-scripts refreshTypes\"\n        },\n        \"dependencies\": {\n        },\n        \"devDependencies\": {\n            \"@eslint/js\": \"^9.17.0\",\n            \"@microsoft/eslint-plugin-power-apps\": \"^0.2.51\",\n            \"@types/node\": \"^18.19.54\",\n            \"@types/powerapps-component-framework\": \"^1.3.15\",\n            \"eslint-plugin-promise\": \"^7.1.0\",\n            \"globals\": \"15.13.0\",\n            \"pcf-scripts\": \"^1\",\n            \"pcf-start\": \"^1\",\n            \"typescript\": \"^4.9.5\",\n            \"typescript-eslint\": \"^8.18.1\"\n        }\n    }\n\n    ```\n\n1. Update `tsconfig.json` to point to the right parent project. `StubLibrary/tsconfig.json` needs to be updated as follows:\n    ```diff\n    {\n    -    \"extends\": \"./node_modules/pcf-scripts/tsconfig_base.json\",\n    +    \"extends\": \"../node_modules/pcf-scripts/tsconfig_base.json\",\n        \"compilerOptions\": {\n    -       \"typeRoots\": [\"node_modules/@types\"]\n    +       \"typeRoots\": [\"../node_modules/@types\"]\n        }\n    }\n\n    ```\n\n1. (Temporary workaround) Update your `StubLibrary.pcfproj` to disable the automatic npm install step as it is not currently compatible with NPM Workspaces. You can add the following property:\n    ```diff\n    \u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n    \u003cProject ToolsVersion=\"15.0\" DefaultTargets=\"Build\" xmlns=\"http://schemas.microsoft.com/developer/msbuild/2003\"\u003e\n        \u003cPropertyGroup\u003e\n            \u003cPowerAppsTargetsPath\u003e$(MSBuildExtensionsPath)\\Microsoft\\VisualStudio\\v$(VisualStudioVersion)\\PowerApps\u003c/PowerAppsTargetsPath\u003e\n        \u003c/PropertyGroup\u003e\n\n        \u003cImport Project=\"$(MSBuildExtensionsPath)\\$(MSBuildToolsVersion)\\Microsoft.Common.props\" /\u003e\n        \u003cImport Project=\"$(PowerAppsTargetsPath)\\Microsoft.PowerApps.VisualStudio.Pcf.props\" Condition=\"Exists('$(PowerAppsTargetsPath)\\Microsoft.PowerApps.VisualStudio.Pcf.props')\" /\u003e\n\n        \u003cPropertyGroup\u003e\n            \u003cName\u003eStubLibrary\u003c/Name\u003e\n             \u003cProjectGuid\u003ebd0603c7-b7ee-4011-ba28-1fb7dcb14520\u003c/ProjectGuid\u003e\n            \u003cOutputPath\u003e$(MSBuildThisFileDirectory)out\\controls\u003c/OutputPath\u003e\n    +       \u003cPcfEnableAutoNpmInstall\u003efalse\u003c/PcfEnableAutoNpmInstall\u003e\n        \u003c/PropertyGroup\u003e\n\n        \u003cPropertyGroup\u003e\n            \u003cTargetFrameworkVersion\u003ev4.6.2\u003c/TargetFrameworkVersion\u003e\n            \u003c!--Remove TargetFramework when this is available in 16.1--\u003e\n            \u003cTargetFramework\u003enet462\u003c/TargetFramework\u003e\n            \u003cRestoreProjectStyle\u003ePackageReference\u003c/RestoreProjectStyle\u003e\n        \u003c/PropertyGroup\u003e\n\n        \u003cItemGroup\u003e\n            \u003cPackageReference Include=\"Microsoft.PowerApps.MSBuild.Pcf\" Version=\"1.*\" /\u003e\n            \u003cPackageReference Include=\"Microsoft.NETFramework.ReferenceAssemblies\" Version=\"1.0.0\" PrivateAssets=\"All\" /\u003e\n        \u003c/ItemGroup\u003e\n\n        \u003cItemGroup\u003e\n            \u003cExcludeDirectories Include=\"$(MSBuildThisFileDirectory)\\.gitignore\" /\u003e\n            \u003cExcludeDirectories Include=\"$(MSBuildThisFileDirectory)\\bin\\**\" /\u003e\n            \u003cExcludeDirectories Include=\"$(MSBuildThisFileDirectory)\\obj\\**\" /\u003e\n            \u003cExcludeDirectories Include=\"$(OutputPath)\\**\" /\u003e\n            \u003cExcludeDirectories Include=\"$(MSBuildThisFileDirectory)\\*.pcfproj\" /\u003e\n            \u003cExcludeDirectories Include=\"$(MSBuildThisFileDirectory)\\*.pcfproj.user\" /\u003e\n            \u003cExcludeDirectories Include=\"$(MSBuildThisFileDirectory)\\*.sln\" /\u003e\n            \u003cExcludeDirectories Include=\"$(MSBuildThisFileDirectory)\\node_modules\\**\" /\u003e\n        \u003c/ItemGroup\u003e\n\n        \u003cItemGroup\u003e\n            \u003cNone Include=\"$(MSBuildThisFileDirectory)\\**\" Exclude=\"@(ExcludeDirectories)\" /\u003e\n        \u003c/ItemGroup\u003e\n\n        \u003cImport Project=\"$(MSBuildToolsPath)\\Microsoft.Common.targets\" /\u003e\n        \u003cImport Project=\"$(PowerAppsTargetsPath)\\Microsoft.PowerApps.VisualStudio.Pcf.targets\" Condition=\"Exists('$(PowerAppsTargetsPath)\\Microsoft.PowerApps.VisualStudio.Pcf.targets')\" /\u003e\n\n    \u003c/Project\u003e\n    ```\n\n1. Create a new folder at the root of your project named `DependencyControl`\n\n1. Open a terminal to that folder:\n   ```shell\n   cd C:\\repos\\AlbanianXrm\\PCF-Workspaces\\DependencyControl\n   ```\n\n1. Create the second PCF Project\n   ```shell\n   pac pcf init -n DependencyControl -ns SampleNamespace -t field -fw react\n   ```\n\n1. Modify the `package.json` of your PCF project to have a different name and avoid clashes with workspaces. The diff for `DependencyControl/package.json` should look like this: \n    ```diff\n    {\n    -   \"name\": \"pcf-project\",\n    +   \"name\": \"dependency-control\",\n        \"version\": \"1.0.0\",\n        \"description\": \"Project containing your PowerApps Component Framework (PCF) control.\",\n        \"scripts\": {\n            \"build\": \"pcf-scripts build\",\n            \"clean\": \"pcf-scripts clean\",\n            \"lint\": \"pcf-scripts lint\",\n            \"lint:fix\": \"pcf-scripts lint fix\",\n            \"rebuild\": \"pcf-scripts rebuild\",\n            \"start\": \"pcf-scripts start\",\n            \"start:watch\": \"pcf-scripts start watch\",\n            \"refreshTypes\": \"pcf-scripts refreshTypes\"\n        },\n        \"dependencies\": {\n            \"react\": \"16.14.0\",\n            \"@fluentui/react-components\": \"9.46.2\",\n            \"react-dom\": \"16.14.0\"\n        },\n        \"devDependencies\": {\n            \"@eslint/js\": \"^9.17.0\",\n            \"@microsoft/eslint-plugin-power-apps\": \"^0.2.51\",\n            \"@types/powerapps-component-framework\": \"^1.3.15\",\n            \"@types/react\": \"^16.14.60\",\n            \"@types/react-dom\": \"^16.9.24\",\n            \"eslint-plugin-promise\": \"^7.1.0\",\n            \"eslint-plugin-react\": \"^7.37.2\",\n            \"globals\": \"^15.13.0\",\n            \"pcf-scripts\": \"^1\",\n            \"pcf-start\": \"^1\",\n            \"react\": \"^16.14.0\",\n            \"typescript\": \"^4.9.5\",\n            \"typescript-eslint\": \"^8.18.1\"\n        }\n    }\n    ```\n\n1. Update `tsconfig.json` to point to the right parent project. `DependencyControl/tsconfig.json` needs to be updated as follows:\n    ```diff\n    {\n    -    \"extends\": \"./node_modules/pcf-scripts/tsconfig_base.json\",\n    +    \"extends\": \"../node_modules/pcf-scripts/tsconfig_base.json\",\n        \"compilerOptions\": {\n    -       \"typeRoots\": [\"node_modules/@types\"]\n    +       \"typeRoots\": [\"../node_modules/@types\"]\n        }\n    }\n\n    ```\n\n1. (Temporary workaround) Update your `DependencyControl.pcfproj` to disable the automatic npm install step as it is not currently compatible with NPM Workspaces. You can add the following property:\n    ```diff\n    \u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n    \u003cProject ToolsVersion=\"15.0\" DefaultTargets=\"Build\" xmlns=\"http://schemas.microsoft.com/developer/msbuild/2003\"\u003e\n        \u003cPropertyGroup\u003e\n            \u003cPowerAppsTargetsPath\u003e$(MSBuildExtensionsPath)\\Microsoft\\VisualStudio\\v$(VisualStudioVersion)\\PowerApps\u003c/PowerAppsTargetsPath\u003e\n        \u003c/PropertyGroup\u003e\n\n        \u003cImport Project=\"$(MSBuildExtensionsPath)\\$(MSBuildToolsVersion)\\Microsoft.Common.props\" /\u003e\n        \u003cImport Project=\"$(PowerAppsTargetsPath)\\Microsoft.PowerApps.VisualStudio.Pcf.props\" Condition=\"Exists('$(PowerAppsTargetsPath)\\Microsoft.PowerApps.VisualStudio.Pcf.props')\" /\u003e\n\n        \u003cPropertyGroup\u003e\n            \u003cName\u003eDependencyControl\u003c/Name\u003e\n            \u003cProjectGuid\u003e5e30cb78-8719-4448-a674-82d41cfa6ed3\u003c/ProjectGuid\u003e\n            \u003cOutputPath\u003e$(MSBuildThisFileDirectory)out\\controls\u003c/OutputPath\u003e\n    +       \u003cPcfEnableAutoNpmInstall\u003efalse\u003c/PcfEnableAutoNpmInstall\u003e\n        \u003c/PropertyGroup\u003e\n\n        \u003cPropertyGroup\u003e\n            \u003cTargetFrameworkVersion\u003ev4.6.2\u003c/TargetFrameworkVersion\u003e\n            \u003c!--Remove TargetFramework when this is available in 16.1--\u003e\n            \u003cTargetFramework\u003enet462\u003c/TargetFramework\u003e\n            \u003cRestoreProjectStyle\u003ePackageReference\u003c/RestoreProjectStyle\u003e\n        \u003c/PropertyGroup\u003e\n\n        \u003cItemGroup\u003e\n            \u003cPackageReference Include=\"Microsoft.PowerApps.MSBuild.Pcf\" Version=\"1.*\" /\u003e\n            \u003cPackageReference Include=\"Microsoft.NETFramework.ReferenceAssemblies\" Version=\"1.0.0\" PrivateAssets=\"All\" /\u003e\n        \u003c/ItemGroup\u003e\n\n        \u003cItemGroup\u003e\n            \u003cExcludeDirectories Include=\"$(MSBuildThisFileDirectory)\\.gitignore\" /\u003e\n            \u003cExcludeDirectories Include=\"$(MSBuildThisFileDirectory)\\bin\\**\" /\u003e\n            \u003cExcludeDirectories Include=\"$(MSBuildThisFileDirectory)\\obj\\**\" /\u003e\n            \u003cExcludeDirectories Include=\"$(OutputPath)\\**\" /\u003e\n            \u003cExcludeDirectories Include=\"$(MSBuildThisFileDirectory)\\*.pcfproj\" /\u003e\n            \u003cExcludeDirectories Include=\"$(MSBuildThisFileDirectory)\\*.pcfproj.user\" /\u003e\n            \u003cExcludeDirectories Include=\"$(MSBuildThisFileDirectory)\\*.sln\" /\u003e\n            \u003cExcludeDirectories Include=\"$(MSBuildThisFileDirectory)\\node_modules\\**\" /\u003e\n        \u003c/ItemGroup\u003e\n\n        \u003cItemGroup\u003e\n            \u003cNone Include=\"$(MSBuildThisFileDirectory)\\**\" Exclude=\"@(ExcludeDirectories)\" /\u003e\n        \u003c/ItemGroup\u003e\n\n        \u003cImport Project=\"$(MSBuildToolsPath)\\Microsoft.Common.targets\" /\u003e\n        \u003cImport Project=\"$(PowerAppsTargetsPath)\\Microsoft.PowerApps.VisualStudio.Pcf.targets\" Condition=\"Exists('$(PowerAppsTargetsPath)\\Microsoft.PowerApps.VisualStudio.Pcf.targets')\" /\u003e\n\n    \u003c/Project\u003e\n\n    ```\n\n1. Open a terminal in the root folder and install the NPM packages with the following comand:\n    ```shell\n    npm i\n    ```\n\n1. Check that the two components can be built without issues. Execute the following commands in your terminal:\n    ```shell\n    cd StubLibrary\n    dotnet build -c Release\n    cd ..\n    cd DependencyControl\n    dotnet build -c Release\n    cd ..\n    ```\n\n## 2. Define the library \n\n1. You need a new declaration file (d.ts) to describe the objects and functions contained in your library. Create a new file in the root folder of your project named `StubLibrary/myLib.d.ts`.\n\n1. Write the following content to `StubLibrary/myLib.d.ts`:\n    ```typescript\n    declare module 'myLib' {\n        export function sayHello(): string;\n    }\n\n    ```\n\n1. We are going to expose our library as an UMD module, and we need to put the variable in the global scope. For this we need a new declaration file (d.ts). Create a new file in the root folder of your project named `StubLibrary/global.d.ts`.\n\n1. Write the following to `StubLibrary/global.d.ts`:\n    ```typescript\n    /* eslint-disable no-var */\n    declare global {\n        var myLib: typeof import('myLib');\n    }\n\n    export { };\n   \n    ```\n\n1. Update `StubLibrary/tsconfig.json` to allow UMD modules and javascript code as follows:\n    ```diff\n    {\n        \"extends\": \"../node_modules/pcf-scripts/tsconfig_base.json\",\n        \"compilerOptions\": {\n    +       \"allowJs\": true,\n    +       \"allowUmdGlobalAccess\": true,\n    +       \"outDir\": \"dist\",\n            \"typeRoots\": [\"../node_modules/@types\"]\n        }\n    }\n\n1. Create a new folder to contain your libraries in `StubLibrary/StubLibrary` named `libs`.\n    ```shell\n    cd StubLibrary\n    cd StubLibrary\n    mkdir libs\n    ```\n\n1. Create a JS file `myLib-v_0_0_1.js` in the `libs` folder, path `StubLibrary/StubLibrary/libs/myLib-v_0_0_1.js`.\n\n1. Write the following content to `StubLibrary/StubLibrary/libs/myLib-v_0_0_1.js`:\n   ```javascript\n   // UMD module pattern\n\n   var myLib = (function (exports) {\n      'use strict';\n   \n      function sayHello() {\n         return \"Hello from myLib\";\n      }\n   \n      exports.sayHello = sayHello;\n   \n      return exports;\n   \n   }(/** @type {import('myLib')}  */({})));\n\n   ```\n   \n1. Create a new file named `featureconfig.json` in the `StubLibrary` project.\n\n1. Write the following content to `StubLibrary/featureconfig.json`:\n\n   ```json\n   {\n     \"pcfAllowCustomWebpack\": \"on\",\n     \"pcfAllowLibraryResources\": \"on\"\n   }\n   \n   ```\n\n   [Learn more about the featureconfig.json file](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/dependent-libraries#featureconfigjson)\n\n\n1. Create a new file named `webpack.config.js` in the `StubLibrary` project.\n\n1. Write the following content to `StubLibrary/webpack.config.js`:\n\n   ```typescript\n   /* eslint-disable */\n   \"use strict\";\n\n   module.exports = {\n     externals: {\n       \"myLib\": \"myLib\"\n     },\n   }\n     \n   ```\n\n   [Learn more about the webpack.config.js file](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/dependent-libraries#webpackconfigjs)\n\n1.  Add a reference to the library under the `resources` in the `StubLibrary` control manifest. Update `StubLibrary/StubLibrary/ControlManifest.Input.xml` as follows:\n    ```diff\n    \u003c?xml version=\"1.0\" encoding=\"utf-8\" ?\u003e\n    \u003cmanifest\u003e\n        \u003ccontrol namespace=\"SampleNamespace\" constructor=\"StubLibrary\" version=\"0.0.1\" display-name-key=\"StubLibrary\" description-key=\"StubLibrary description\" control-type=\"standard\" \u003e\n            \u003c!--external-service-usage node declares whether this 3rd party PCF control is using external service or not, if yes, this control will be considered as premium and please also add the external domain it is using.\n            If it is not using any external service, please set the enabled=\"false\" and DO NOT add any domain below. The \"enabled\" will be false by default.\n            Example1:\n            \u003cexternal-service-usage enabled=\"true\"\u003e\n                \u003cdomain\u003ewww.Microsoft.com\u003c/domain\u003e\n            \u003c/external-service-usage\u003e\n            Example2:\n            \u003cexternal-service-usage enabled=\"false\"\u003e\n            \u003c/external-service-usage\u003e\n            --\u003e\n            \u003cexternal-service-usage enabled=\"false\"\u003e\n                \u003c!--UNCOMMENT TO ADD EXTERNAL DOMAINS\n                \u003cdomain\u003e\u003c/domain\u003e\n                \u003cdomain\u003e\u003c/domain\u003e\n                --\u003e\n            \u003c/external-service-usage\u003e\n            \u003c!-- property node identifies a specific, configurable piece of data that the control expects from CDS --\u003e\n            \u003cproperty name=\"sampleProperty\" display-name-key=\"Property_Display_Key\" description-key=\"Property_Desc_Key\" of-type=\"SingleLine.Text\" usage=\"bound\" required=\"true\" /\u003e\n            \u003c!--\n            Property node's of-type attribute can be of-type-group attribute.\n            Example:\n            \u003ctype-group name=\"numbers\"\u003e\n                \u003ctype\u003eWhole.None\u003c/type\u003e\n                \u003ctype\u003eCurrency\u003c/type\u003e\n                \u003ctype\u003eFP\u003c/type\u003e\n                \u003ctype\u003eDecimal\u003c/type\u003e\n            \u003c/type-group\u003e\n            \u003cproperty name=\"sampleProperty\" display-name-key=\"Property_Display_Key\" description-key=\"Property_Desc_Key\" of-type-group=\"numbers\" usage=\"bound\" required=\"true\" /\u003e\n            --\u003e\n            \u003cresources\u003e                \n                \u003clibrary name=\"myLib\" version=\"\u003e=1\" order=\"1\"\u003e \n                    \u003cpackaged_library path=\"libs/myLib-v_0_0_1.js\" version=\"0.0.1\" /\u003e \n                \u003c/library\u003e \n                \u003ccode path=\"index.ts\" order=\"2\"/\u003e\n                \u003c!-- UNCOMMENT TO ADD MORE RESOURCES\n                \u003ccss path=\"css/StubLibrary.css\" order=\"1\" /\u003e\n                \u003cresx path=\"strings/StubLibrary.1033.resx\" version=\"1.0.0\" /\u003e\n                --\u003e\n            \u003c/resources\u003e\n            \u003c!-- UNCOMMENT TO ENABLE THE SPECIFIED API\n            \u003cfeature-usage\u003e\n                \u003cuses-feature name=\"Device.captureAudio\" required=\"true\" /\u003e\n                \u003cuses-feature name=\"Device.captureImage\" required=\"true\" /\u003e\n                \u003cuses-feature name=\"Device.captureVideo\" required=\"true\" /\u003e\n                \u003cuses-feature name=\"Device.getBarcodeValue\" required=\"true\" /\u003e\n                \u003cuses-feature name=\"Device.getCurrentPosition\" required=\"true\" /\u003e\n                \u003cuses-feature name=\"Device.pickFile\" required=\"true\" /\u003e\n                \u003cuses-feature name=\"Utility\" required=\"true\" /\u003e\n                \u003cuses-feature name=\"WebAPI\" required=\"true\" /\u003e\n            \u003c/feature-usage\u003e\n            --\u003e\n        \u003c/control\u003e\n    \u003c/manifest\u003e\n\n    ```\n\n1. Add the library to the [window](https://developer.mozilla.org/docs/Web/API/Window). Update the `StubLibrary/StubLibrary/index.ts` as follows:\n    ```diff\n    +import * as myLib from 'myLib';\n    import { IInputs, IOutputs } from \"./generated/ManifestTypes\";\n\n    export class StubLibrary implements ComponentFramework.StandardControl\u003cIInputs, IOutputs\u003e {\n        /**\n        * Empty constructor.\n        */\n        constructor() {\n            // Empty\n        }\n\n        /**\n        * Used to initialize the control instance. Controls can kick off remote server calls and other initialization actions here.\n        * Data-set values are not initialized here, use updateView.\n        * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to property names defined in the manifest, as well as utility functions.\n        * @param notifyOutputChanged A callback method to alert the framework that the control has new outputs ready to be retrieved asynchronously.\n        * @param state A piece of data that persists in one session for a single user. Can be set at any point in a controls life cycle by calling 'setControlState' in the Mode interface.\n        * @param container If a control is marked control-type='standard', it will receive an empty div element within which it can render its content.\n        */\n        public init(\n            context: ComponentFramework.Context\u003cIInputs\u003e,\n            notifyOutputChanged: () =\u003e void,\n            state: ComponentFramework.Dictionary,\n            container: HTMLDivElement\n        ): void {\n            // Add control initialization code\n        }\n\n\n        /**\n        * Called when any value in the property bag has changed. This includes field values, data-sets, global values such as container height and width, offline status, control metadata values such as label, visible, etc.\n        * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions\n        */\n        public updateView(context: ComponentFramework.Context\u003cIInputs\u003e): void {\n            // Add code to update control view\n        }\n\n        /**\n        * It is called by the framework prior to a control receiving new data.\n        * @returns an object based on nomenclature defined in manifest, expecting object[s] for property marked as \"bound\" or \"output\"\n        */\n        public getOutputs(): IOutputs {\n            return {};\n        }\n\n        /**\n        * Called when the control is to be removed from the DOM tree. Controls should use this call for cleanup.\n        * i.e. cancelling any pending remote calls, removing listeners, etc.\n        */\n        public destroy(): void {\n            // Add code to cleanup control if necessary\n        }\n    }\n\n    +(function () {\n    +   window.myLib = myLib;\n    +})();\n    ```\n\n1. Push the component to your developer environment. Execute the following comamnd in your terminal:\n    ```shell\n    cd StubLibrary\n    pac pcf push\n    ```\n    `Note!` This will create the custom control using the `dev` prefix, and component can be referenced as `dev_SampleNamespace.StubLibrary`\n\n## 3. Build the Dependent control\n\n1. Since the `dev_SampleNamespace.StubLibrary` is exposed as an UMD module, we need to put the variable in the global scope. For this we need a new declaration file (d.ts). Create a new file in the root folder of your `DependencyControl` project named `global.d.ts`.\n\n1. Write the following content to `DependencyControl/global.d.ts`:\n    ```typescript\n    /* eslint-disable @typescript-eslint/triple-slash-reference */\n    /* eslint-disable no-var */\n\n    /// \u003creference path=\"../StubLibrary/myLib.d.ts\" /\u003e\n    import * as MyLib from 'myLib';\n\n    declare global {\n        var myLib: typeof MyLib;\n    }\n\n    export { };\n\n    ```\n\n1. Create a new file named `featureconfig.json` in the `DependencyControl` project.\n\n1. Write the following content to `DependencyControl/featureconfig.json`:\n    ```json\n    {\n        \"pcfResourceDependency\": \"on\"\n    } \n    ```\n\n1. Add the reference to the dependent resource library under the `resources` in the `DependencyControl` control manifest. Update `DependencyControl/DependencyControl/ControlManifest.Input.xml` as follows:\n    ```diff\n    \u003c?xml version=\"1.0\" encoding=\"utf-8\" ?\u003e\n    \u003cmanifest\u003e\n        \u003ccontrol namespace=\"SampleNamespace\" constructor=\"DependencyControl\" version=\"0.0.1\" display-name-key=\"DependencyControl\" description-key=\"DependencyControl description\" control-type=\"virtual\" \u003e\n            \u003c!--external-service-usage node declares whether this 3rd party PCF control is using external service or not, if yes, this control will be considered as premium and please also add the external domain it is using.\n            If it is not using any external service, please set the enabled=\"false\" and DO NOT add any domain below. The \"enabled\" will be false by default.\n            Example1:\n            \u003cexternal-service-usage enabled=\"true\"\u003e\n                \u003cdomain\u003ewww.Microsoft.com\u003c/domain\u003e\n            \u003c/external-service-usage\u003e\n            Example2:\n            \u003cexternal-service-usage enabled=\"false\"\u003e\n            \u003c/external-service-usage\u003e\n            --\u003e\n            \u003cexternal-service-usage enabled=\"false\"\u003e\n            \u003c!--UNCOMMENT TO ADD EXTERNAL DOMAINS\n                \u003cdomain\u003e\u003c/domain\u003e\n                \u003cdomain\u003e\u003c/domain\u003e\n            --\u003e\n            \u003c/external-service-usage\u003e\n            \u003c!-- property node identifies a specific, configurable piece of data that the control expects from CDS --\u003e\n            \u003cproperty name=\"sampleProperty\" display-name-key=\"Property_Display_Key\" description-key=\"Property_Desc_Key\" of-type=\"SingleLine.Text\" usage=\"bound\" required=\"true\" /\u003e\n            \u003c!--\n            Property node's of-type attribute can be of-type-group attribute.\n            Example:\n            \u003ctype-group name=\"numbers\"\u003e\n                \u003ctype\u003eWhole.None\u003c/type\u003e\n                \u003ctype\u003eCurrency\u003c/type\u003e\n                \u003ctype\u003eFP\u003c/type\u003e\n                \u003ctype\u003eDecimal\u003c/type\u003e\n            \u003c/type-group\u003e\n            \u003cproperty name=\"sampleProperty\" display-name-key=\"Property_Display_Key\" description-key=\"Property_Desc_Key\" of-type-group=\"numbers\" usage=\"bound\" required=\"true\" /\u003e\n            --\u003e\n            \u003cresources\u003e\n                \u003ccode path=\"index.ts\" order=\"1\"/\u003e\n    +           \u003cdependency type=\"control\" name=\"dev_SampleNamespace.StubLibrary\" order=\"2\" /\u003e\n                \u003cplatform-library name=\"React\" version=\"16.14.0\" /\u003e\n                \u003cplatform-library name=\"Fluent\" version=\"9.46.2\" /\u003e\n                \u003c!-- UNCOMMENT TO ADD MORE RESOURCES\n                \u003ccss path=\"css/DependencyControl.css\" order=\"1\" /\u003e\n                \u003cresx path=\"strings/DependencyControl.1033.resx\" version=\"1.0.0\" /\u003e\n                --\u003e\n            \u003c/resources\u003e\n            \u003c!-- UNCOMMENT TO ENABLE THE SPECIFIED API\n            \u003cfeature-usage\u003e\n                \u003cuses-feature name=\"Device.captureAudio\" required=\"true\" /\u003e\n                \u003cuses-feature name=\"Device.captureImage\" required=\"true\" /\u003e\n                \u003cuses-feature name=\"Device.captureVideo\" required=\"true\" /\u003e\n                \u003cuses-feature name=\"Device.getBarcodeValue\" required=\"true\" /\u003e\n                \u003cuses-feature name=\"Device.getCurrentPosition\" required=\"true\" /\u003e\n                \u003cuses-feature name=\"Device.pickFile\" required=\"true\" /\u003e\n                \u003cuses-feature name=\"Utility\" required=\"true\" /\u003e\n                \u003cuses-feature name=\"WebAPI\" required=\"true\" /\u003e\n            \u003c/feature-usage\u003e\n            --\u003e\n        \u003c/control\u003e\n    \u003c/manifest\u003e\n\n    ```\n\n1. Update the component `DependencyControl/DependencyControl/HelloWorld.tsx` file so that it uses a function from the dependent library. The library is loaded into the `Window` object at runtime.\n    ```diff\n    import * as React from 'react';\n    import { Label } from '@fluentui/react-components';\n\n    export interface IHelloWorldProps {\n        name?: string;\n    }\n\n    export class HelloWorld extends React.Component\u003cIHelloWorldProps\u003e {\n        public render(): React.ReactNode {\n            return (\n            \u003cLabel\u003e\n    -            Hello {this.props.name}!\n    +            { window.myLib.sayHello() + \" from Dependency\" || \"Hello World\" }\n            \u003c/Label\u003e\n            )\n        }\n    }\n\n    ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falbanian-xrm%2Fpcf-workspaces","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falbanian-xrm%2Fpcf-workspaces","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falbanian-xrm%2Fpcf-workspaces/lists"}