Merge kb-build-js-file-2184 into production

knowledge-base/common-remove-components-from-telerik-blazor-js.md

@@ -0,0 +1,67 @@
+---
+title: Remove Components from telerik-blazor.js
+description: Learn 
+type: how-to
+page_title: How to Build the telerik-blazor.js File Without Some Components
+slug: common-kb-remove-components-from-telerik-blazor-js
+position: 
+tags: telerik, blazor
+ticketid: 1652093, 1632300
+res_type: kb
+---
+
+## Environment
+
+<table>
+    <tbody>
+        <tr>
+            <td>Product</td>
+            <td>
+                UI for Blazor, <br />
+                PDF Viewert for Blazor, <br />
+                Spreadsheet for Blazor
+            </td>
+        </tr>
+    </tbody>
+</table>
+
+
+## Description
+
+This KB article answers the following questions:
+
+* How to build the `telerik-blazor.js` file without some of the components?
+* How to exclude components from the Telerik Blazor JSInterop file and rebuild `telerik-blazor.js`?
+* How to remove components from the client-side code of Telerik UI for Blazor?
+* How to remove the Spreadsheet component from `telerik-blazor.js` in order to achieve [strict Content Security Policy compliance]({%slug troubleshooting-csp%})?
+* How to remove the PDF Viewer component from `telerik-blazor.js` in order to avoid conflicts with other third-party tools that depend on PDF.js?
+* How to reduce the file size of the Telerik Blazor JavaScript asset?
+
+
+## Solution
+
+Here are the required steps to exclude Telerik UI for Blazor components from `telerik-blazor.js` and rebuild the Telerik JSInterop file.
+
+1. Login to your [Telerik account](https://www.telerik.com/account/).
+1. [Download the source code of Telerik UI for Blazor](https://www.telerik.com/account/downloads/product-download?product=BLAZOR).
+1. Read the `Readme.txt` in the root folder of the downloaded ZIP archive. It provides information about JavaScript build pre-requisites and where to find the newly built file.
+1. Delete the unwanted component folder from `/javascript/src/`, for example:
+    * `pdf-viewer` for the PDF Viewer
+    * `spreadsheet` for the Spreadsheet
+1. Remove the `export` statement for the unwanted component from `/javascript/src/main.ts`, for example:
+    * `export * from './pdf-viewer/main';` for the PDF Viewer
+    * `export * from './spreadsheet/main';` for the Spreadsheet
+1. Remove any existing dependencies for the unwanted component from `/javascript/package.json`, for example:
+    * `@progress/kendo-pdfviewer-common` for the PDF Viewer
+    * `@progress/kendo-spreadsheet-common` for the Spreadsheet
+1. Delete `/javascript/package-lock.json`
+1. Run `npm install` in the `javascript` folder.
+1. Run `gulp build-cdn` in the `javascript` folder.
+1. Copy the generated `telerik-blazor.js` file to the `wwwroot` folder or your Blazor app.
+1. Remove the existing `telerik-blazor.js` file registration as a [static asset]({%slug getting-started/what-you-need%}#javascript-file) or [CDN URL]({%slug common-features-cdn%}#javascript-urls). Register the custom `telerik-blazor.js` from `wwwroot`.
+
+> Repeat the above steps and rebuild `telerik-blazor.js` after every [version update of Telerik UI for Blazor]({%slug upgrade-tutorial%}).
+
+## See Also
+
+* [Adding Telerik UI for Blazor to a Blazor app]({%slug getting-started/what-you-need%})

troubleshooting/csp.md

@@ -28,7 +28,7 @@ Telerik UI for Blazor components need the following exceptions to strict CSP. So
 
 * Allow inline styles (`'unsafe-inline'`) to use component parameters such as `Width`, `Height`, `RowHeight`, `ItemHeight`, `Top`, `Left`, etc. In addition, some components rely on inline styles for their rich functionality and UX.
 * Allow data URIs (`data:`) for images that are embedded in the [CSS themes]({%slug general-information/themes%}). These images are used for styled checkboxes and radio buttons, Slider ticks, and others.
-* *(starting from version 6.0.0)* Allow script evaluation (`'unsafe-eval'`), which is required by the [Spreadsheet]({%slug spreadsheet-overview%}) for cell validation.
+* *(starting from version 6.0.0)* Allow script evaluation (`'unsafe-eval'`), which is required by the [Spreadsheet]({%slug spreadsheet-overview%}) for cell validation and formula compilation. If you don't use the Spreadsheet component in your Blazor app, then check section [Build CSP Compliant telerik-blazor.js](#build-csp-compliant-telerik-blazorjs) below.
 * Allow `https://blazor.cdn.telerik.com` as a source when using [the Telerik CDN]({%slug common-features-cdn%}) for styles or scripts.
 
 The following items concern older product versions:
@@ -52,3 +52,7 @@ The CSP policy directives below ensure that the Telerik Blazor components work a
       font-src 'self' https://blazor.cdn.telerik.com;
 " />
 ````
+
+## Build CSP Compliant telerik-blazor.js
+
+If strict CSP compliance is a hard requirement and your Blazor app is not using the Spreadsheet component, then you can [rebuild the `telerik-blazor.js` file without the Spreadsheet component]({%slug common-kb-remove-components-from-telerik-blazor-js%}).