`;
+ this.setupClickEvent();
+ }
+
+ protected get dataVersion(): Version {
+ return Version.parse('1.0');
+ }
+
+ // Create a click event listener for the ImportButton Anchor element
+ public setupClickEvent(): void {
+ let btn = document.getElementById("ImportButton");
+ btn.addEventListener("click", (e:Event) => this.dynamicallyImportFunctions());
+
+ let btnjQuery = document.getElementById("ImportButtonJQuery");
+ btnjQuery.addEventListener("click", (e:Event) => this.dynamicallyImportFunctionsJQuery());
+ }
+
+ // This will setup the 'DynamicImportedFunctions.ts' to be bundled into a separate .js file.
+ protected async dynamicallyImportFunctions() {
+ const importedTS = await import(
+ './DynamicImportedFunctions'
+ )
+ importedTS.default.executeDynamicLoad();
+ }
+
+ //This will setup the 'DynamicImportedFunctionsJQuery.ts' to be bundled into a separate .js file.
+ protected async dynamicallyImportFunctionsJQuery() {
+ const importedJQueryTS = await import(
+ './DynamicImportedFunctionsJQuery'
+ )
+ importedJQueryTS.default.executeDynamicLoadJQuery();
+ importedJQueryTS.default.addToDOM(this.domElement);
+ }
+
+
+
+
+
+
+
+
+
+
+ protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+ return {
+ pages: [
+ {
+ header: {
+ description: strings.PropertyPaneDescription
+ },
+ groups: [
+ {
+ groupName: strings.BasicGroupName,
+ groupFields: [
+ PropertyPaneTextField('description', {
+ label: strings.DescriptionFieldLabel
+ })
+ ]
+ }
+ ]
+ }
+ ]
+ };
+ }
+}
diff --git a/samples/js-dynamic-bundling-libraries/src/webparts/dynamicBundlingExample/DynamicImportedFunctions.ts b/samples/js-dynamic-bundling-libraries/src/webparts/dynamicBundlingExample/DynamicImportedFunctions.ts
new file mode 100644
index 000000000..31f95aaf3
--- /dev/null
+++ b/samples/js-dynamic-bundling-libraries/src/webparts/dynamicBundlingExample/DynamicImportedFunctions.ts
@@ -0,0 +1,15 @@
+/*
+This file demonstrates how we can separate functionality that might not need to be loaded with the SPFx Web Part or Extension immediately, but be bundled into a separate .js file and loaded dynamically.
+
+This function will write a message to the console when it is dynamcially loaded.
+*/
+
+
+export default class DynamicFunctions {
+ public static executeDynamicLoad():void {
+ console.log('Dynamic Functionality has been imported');
+ }
+
+}
+
+
diff --git a/samples/js-dynamic-bundling-libraries/src/webparts/dynamicBundlingExample/DynamicImportedFunctionsJQuery.scss b/samples/js-dynamic-bundling-libraries/src/webparts/dynamicBundlingExample/DynamicImportedFunctionsJQuery.scss
new file mode 100644
index 000000000..8b38f481c
--- /dev/null
+++ b/samples/js-dynamic-bundling-libraries/src/webparts/dynamicBundlingExample/DynamicImportedFunctionsJQuery.scss
@@ -0,0 +1,6 @@
+ .injectedContent {
+ clear:both;
+ padding-top:20px;
+ margin-left:60px;
+ font-size:20px;
+ }
diff --git a/samples/js-dynamic-bundling-libraries/src/webparts/dynamicBundlingExample/DynamicImportedFunctionsJQuery.ts b/samples/js-dynamic-bundling-libraries/src/webparts/dynamicBundlingExample/DynamicImportedFunctionsJQuery.ts
new file mode 100644
index 000000000..e3b8d048f
--- /dev/null
+++ b/samples/js-dynamic-bundling-libraries/src/webparts/dynamicBundlingExample/DynamicImportedFunctionsJQuery.ts
@@ -0,0 +1,32 @@
+/*
+This file demonstrates how we can separate functionality that might not need to be loaded with the SPFx Web Part or Extension immediately, but be bundled into a separate .js file and loaded dynamically.
+
+We will be bundling jQuery in the imported .ts file.
+This demonstrates how if we have the need to bundle a third party library, such as jQuery, we can delay the loading of it as well as any additional functionality until aboslutely needed.
+
+This example will add a CSS class to the element, write a message to the console and inject some HTML letting us know that jQuery has been loaded.
+*/
+
+import * as $ from 'jquery';
+require('./DynamicImportedFunctionsJQuery.scss');
+
+export default class DynamicFunctionsJQuery {
+ public static executeDynamicLoadJQuery():void {
+ console.log('Dynamic Functionality with jQuery has been imported');
+ $('body').addClass('jQueryImported');
+
+ }
+
+ public static addToDOM(webpart:HTMLElement){
+ //console.log(webpart);
+ var item = webpart.getElementsByClassName('insertHTML')[0];
+ item.innerHTML = `
+