@spfx-extensions/package 1.4.13 → 1.4.14

package/gulpfile.js

@@ -0,0 +1,202 @@
+"use strict";
+const fs = require("fs");
+const build = require("@microsoft/sp-build-web");
+const { spawnSync } = require("child_process");
+const path = require("path");
+const isProd = process.argv.indexOf("--ship") > -1;
+const changeNameArg = "--change-name";
+const argvJoined = process.argv.join(" ");
+const changeNameArgIndex = argvJoined.indexOf(changeNameArg);
+const shouldChangeName = changeNameArgIndex > -1;
+const newNameStart = changeNameArgIndex + changeNameArg.length + 1;
+const hasMoreArgsAfterName =
+  argvJoined.substring(newNameStart).indexOf("--") > -1;
+let newName = "";
+if (shouldChangeName) {
+  if (hasMoreArgsAfterName > -1) {
+    newName = argvJoined.substring(
+      newNameStart,
+      argvJoined.length - hasMoreArgsAfterName - changeNameArg.length - 1
+    );
+  } else {
+    newName = argvJoined.substring(newNameStart);
+  }
+}
+
+build.addSuppression(
+  `Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`
+);
+
+const projectSolutionPackage = fs.readFileSync(
+  "./config/package-solution.json",
+  { encoding: "utf8" }
+);
+const projectPackage = fs.readFileSync("./package.json", { encoding: "utf8" });
+const projectPackageJson = JSON.parse(projectPackage);
+const projectSolutionPackageJson = JSON.parse(projectSolutionPackage);
+const projectVersion = `${projectPackageJson.version}.0`;
+console.log("Project Version:", projectVersion);
+projectSolutionPackageJson.solution.version = projectVersion;
+projectSolutionPackageJson.solution.features[0].version = projectVersion;
+
+fs.writeFileSync(
+  "./config/package-solution.json",
+  JSON.stringify(projectSolutionPackageJson, null, 2)
+);
+
+if (newName) {
+  const jsonPath =
+    "./src/webparts/spfxExtensionloader/SpfxExtensionloaderWebPart.manifest.json";
+  const webpartData = fs.readFileSync(jsonPath, { encoding: "utf8" });
+  const webpartDataJson = JSON.parse(webpartData);
+  const oldName = webpartDataJson.preconfiguredEntries[0].title.default;
+  console.log("Old Webpart Name:", oldName);
+  console.log("New Webpart Name:", newName);
+  webpartDataJson.preconfiguredEntries[0].title.default = newName;
+  fs.writeFileSync(
+    jsonPath,
+    JSON.stringify(webpartDataJson, null, 2)
+  );
+}
+
+// build.addSuppression(
+//   `Warning - [webpack] No webpack config has been provided. Create a webpack.config.js file or call webpack.setConfig({ configPath: null }) in your gulpfile.`
+// );
+// build.webpack.setConfig({
+//   configPath: "./webpack.config.js"
+// })
+
+build.tscCmd.executeTask = function () {
+  console.log("Overriding tscCmd.executeTask");
+  spawnSync("npx", ["tsc", "--build", "--verbose"], {
+    shell: true,
+    stdio: "inherit",
+    cwd: path.resolve(__dirname),
+  });
+  return Promise.resolve();
+};
+
+build.configureWebpack.mergeConfig({
+  //https://github.com/SharePoint/sp-dev-docs/issues/10205
+  // generateCssClassName: (name) => {
+  //   return name;
+  // },
+  additionalConfiguration: (generatedConfiguration) => {
+    // generatedConfiguration.optimization.usedExports = true;
+    //generatedConfiguration.resolve.extensions.push(".ts");
+    generatedConfiguration.output.chunkFilename = "[name]_[contenthash].js";
+    generatedConfiguration.output.environment = {
+      arrowFunction: true,
+      const: true,
+      optionalChaining: true,
+      module: true,
+      templateLiteral: true,
+      destructuring: true,
+      dynamicImport: true,
+      globalThis: true,
+      forOf: true,
+    };
+    generatedConfiguration.optimization.splitChunks = {
+      cacheGroups: {
+        defaultVendors: false,
+      },
+    };
+    // const sourceMapLoaderIndex = generatedConfiguration.module.rules.findIndex(
+    //   (l) => l.use && l.use?.loader?.indexOf("source-map-loader") > -1
+    // );
+    // if (sourceMapLoaderIndex > -1) {
+    //   generatedConfiguration.module.rules.splice(sourceMapLoaderIndex, 1);
+    //   generatedConfiguration.module.rules.push({
+    //     test: /\.js$/,
+    //     enforce: "pre",
+    //     use: [
+    //       {
+    //         loader: "source-map-loader",
+    //         options: {
+    //           filterSourceMappingUrl: (url, resourcePath) => {
+    //             const includeSourceMap =
+    //               resourcePath.indexOf("node_modules") === -1 ||
+    //               url.indexOf("__spfxCore.js") > -1 ||
+    //               url.indexOf("@spfx-extensions/core") > -1 ||
+    //               resourcePath.indexOf("@spfx-extensions/core") > -1;
+    //             return includeSourceMap;
+    //           },
+    //         },
+    //       },
+    //     ],
+    //   });
+    // }
+
+    generatedConfiguration.module.rules.push({
+      test: /__spfxCore\.js$/,
+      generator: {
+        filename: "spfx-extension-core[ext]?v=[hash]",
+      },
+      type: "asset/resource",
+    });
+    generatedConfiguration.module.rules.push({
+      test: /__spfxCoreConfigurator\.js$/,
+      generator: {
+        filename: "spfx-extension-coreconfigurator[ext]?v=[hash]",
+      },
+      type: "asset/resource",
+    });
+    generatedConfiguration.module.rules.push({
+      test: /__spfxWrapperClassic\.js$/,
+      generator: {
+        filename: "spfx-extension-wrapper[ext]?v=[hash]",
+      },
+      type: "asset/resource",
+    });
+    // generatedConfiguration.module.rules.push({
+    //   test: /__spfxCore\.js\.map$/,
+    //   generator: {
+    //     filename: "spfx-extension-core.js[ext]?[hash]",
+    //   },
+    //   type: "asset/resource",
+    // });
+    generatedConfiguration.resolve.alias["__spfxCore.js"] =
+      "@spfx-extensions/core/spfxCoreEntry";
+    generatedConfiguration.resolve.alias["__spfxCoreConfigurator.js"] =
+      "@spfx-extensions/core/configurator";
+    generatedConfiguration.resolve.alias["__spfxWrapperClassic.js"] =
+      "@spfx-extensions/core/classicWrapper";
+    // generatedConfiguration.resolve.alias["__spfxCore.js.map"] =
+    //   "@spfx-extensions/core/spfxCoreEntryMap";
+    // generatedConfiguration.resolve.alias.push({
+
+    // })
+    // generatedConfiguration.experiments = {
+    //   outputModule: true,
+    // };
+    // generatedConfiguration.output.libraryTarget = "commonjs-module";
+    // generatedConfiguration.output.library = {
+    //   type: "commonjs-module",
+    // };
+    const definePlugin = generatedConfiguration.plugins.find(
+      (p) => p.definitions
+    );
+    if (definePlugin) {
+      const date = new Date().toISOString();
+      console.log("Adding BUILD_DATE to define plugin:", date);
+      definePlugin.definitions["BUILD_DATE"] = JSON.stringify(date);
+      definePlugin.definitions["ISDEBUG"] = JSON.stringify(
+        isProd ? false : true
+      );
+    } else {
+      console.error("No define plugin found in webpack configuration.");
+    }
+    return generatedConfiguration;
+  },
+});
+
+var getTasks = build.rig.getTasks;
+build.rig.getTasks = function () {
+  var result = getTasks.call(build.rig);
+
+  result.set("serve", result.get("serve-deprecated"));
+
+  return result;
+};
+
+build.initialize(require("gulp"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spfx-extensions/package",
-  "version": "1.4.13",
+  "version": "1.4.14",
   "author": "SPWizard01",
   "access": "public",
   "repository": {
@@ -21,7 +21,17 @@
     "test": "gulp test"
   },
   "files": [
-    "dist"
+    "dist",
+    "config",
+    "sharepoint",
+    "src",
+    "teams",
+    ".npmignore",
+    ".nvmrc",
+    "gulpfile.js",
+    "LICENSE",
+    "README.md",
+    "tsconfig.json"
   ],
   "dependencies": {
     "@microsoft/decorators": "^1.21.1",

package/sharepoint/assets/ClientSideInstance.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
+    <ClientSideComponentInstance
+        Title="SpFxExtensionsCustomizer"
+        Location="ClientSideExtension.ApplicationCustomizer"
+        ComponentId="8d1029da-85e6-48cc-aaaf-37a5bbc0b9be"
+        Properties="">
+    </ClientSideComponentInstance>
+</Elements>

package/sharepoint/assets/elements.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
+    <CustomAction
+        Title="SpFxExtensionsCustomizer"
+        Location="ClientSideExtension.ApplicationCustomizer"
+        ClientSideComponentId="8d1029da-85e6-48cc-aaaf-37a5bbc0b9be"
+        ClientSideComponentProperties="">
+    </CustomAction>
+</Elements>

package/src/@types/globals.d.ts

@@ -0,0 +1,15 @@
+declare const BUILD_DATE: string;
+declare const ISDEBUG: boolean;
+declare module "__spfxCore.js" {
+    const content: string;
+    export default content;
+}
+declare module "__spfxCoreConfigurator.js" {
+    const content: string;
+    export default content;
+}
+
+declare module "__spfxWrapperClassic.js" {
+    const content: string;
+    export default content;
+}

package/src/extensions/spfxExtension/SpfxExtensionApplicationCustomizer.manifest.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-extension-manifest.schema.json",
+
+  "id": "8d1029da-85e6-48cc-aaaf-37a5bbc0b9be",
+  "alias": "SpfxExtensionApplicationCustomizer",
+  "componentType": "Extension",
+  "extensionType": "ApplicationCustomizer",
+
+  // The "*" signifies that the version should be taken from the package.json
+  "version": "*",
+  "manifestVersion": 2,
+
+  // If true, the component can only be installed on sites where Custom Script is allowed.
+  // Components that allow authors to embed arbitrary script code should set this to true.
+  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
+  "requiresCustomScript": false
+}

package/src/extensions/spfxExtension/SpfxExtensionApplicationCustomizer.ts

@@ -0,0 +1,52 @@
+import {
+  BaseApplicationCustomizer,
+  PlaceholderProvider
+} from '@microsoft/sp-application-base';
+//import * as strings from 'SpfxExtensionApplicationCustomizerStrings';
+
+/**
+ * If your command set uses the ClientSideComponentProperties JSON input,
+ * it will be deserialized into the BaseExtension.properties object.
+ * You can define an interface to describe it.
+ */
+export interface ISpfxExtensionApplicationCustomizerProperties {
+  // This is an example; replace with your own property
+  _noProps: boolean;
+}
+
+/** A Custom Action which can be run during execution of a Client Side Application */
+export default class SpfxExtensionApplicationCustomizer
+  extends BaseApplicationCustomizer<ISpfxExtensionApplicationCustomizerProperties> {
+
+  public async onInit(): Promise<void> {
+    const { initCore } = await import(/* webpackChunkName: "spfx-extension-loader" */"../../services/initCoreService");
+    //init core then do stuff
+    await initCore(
+      "SharePoint",
+      this.context.placeholderProvider,
+      this
+    );
+  }
+  protected async onPlaceholdersChanged(placeholderProvider: PlaceholderProvider) {
+    const { initCore } = await import(/* webpackChunkName: "spfx-extension-loader" */"../../services/initCoreService");
+    // this fires before onInit
+    await initCore(
+      "SharePoint",
+      this.context.placeholderProvider,
+      this
+    );
+    window.__SPFxExtensions.Apps.forEach((app) => {
+      app.instances.forEach((instance) => {
+        instance.executeListeners("onPlaceholdersChanged", placeholderProvider)
+      });
+    });
+
+  }
+  protected onDispose(): void {
+    window.__SPFxExtensions?.Apps?.forEach((app) => {
+      app.instances.forEach((instance) => {
+        instance.executeListeners("onAppCustomizerDisposed", undefined);
+      });
+    });
+  }
+}

package/src/extensions/spfxExtension/loc/en-us.js

@@ -0,0 +1,5 @@
+define([], function() {
+  return {
+    "Title": "SpfxExtensionApplicationCustomizer"
+  }
+});

package/src/extensions/spfxExtension/loc/myStrings.d.ts

@@ -0,0 +1,8 @@
+declare interface ISpfxExtensionApplicationCustomizerStrings {
+  Title: string;
+}
+
+declare module 'SpfxExtensionApplicationCustomizerStrings' {
+  const strings: ISpfxExtensionApplicationCustomizerStrings;
+  export = strings;
+}

package/src/index.ts

@@ -0,0 +1 @@
+// A file is required to be in the root of the /src directory by the TypeScript compiler

package/src/services/initCoreService.ts

@@ -0,0 +1,46 @@
+import {
+  CompatibleEnvironmentType,
+} from "@spfx-extensions/core";
+import { PlaceholderProvider } from "@microsoft/sp-application-base";
+import { ISPEventObserver } from "@microsoft/sp-core-library";
+import { SPFXPREFIX } from "../utilities/constants";
+import { loadCoreForSPFxOrClassic } from "@spfx-extensions/core/spfxLoader"
+import coreUrl from "__spfxCore.js";
+import configuratorUrl from "__spfxCoreConfigurator.js";
+import wrapperUrl from "__spfxWrapperClassic.js";
+
+let placeHolderResolved = false;
+let corePromise: Promise<void> | undefined = undefined;
+
+async function getSuggestedCoreUrl() {
+  return Promise.resolve({ coreUrl, configuratorUrl, wrapperUrl });
+}
+
+export async function initCore(
+  envType: CompatibleEnvironmentType,
+  placeHolderProvider?: PlaceholderProvider,
+  eventObserver?: ISPEventObserver
+) {
+  if (!corePromise) {
+    const buildDate = BUILD_DATE;
+    console.info(SPFXPREFIX, "Initializing Core from SPFx Built:", buildDate);
+    corePromise = loadCoreForSPFxOrClassic(getSuggestedCoreUrl, envType, true);
+  }
+  await corePromise;
+
+  //only repopulate if these were not initialized through modern context
+  if (window.__SPFxExtensions.Utils && !window.__SPFxExtensions.Utils.initializedThroughSPFX) {
+    window.__SPFxExtensions.Utils.environmentType = envType;
+    window.__SPFxExtensions.Utils.initializedThroughSPFX = true;
+  }
+  //resolve once, i.e. modern webpart was loaded before app customizer
+  if (!placeHolderResolved && placeHolderProvider && eventObserver) {
+    placeHolderResolved = true;
+    window.__SPFxExtensions.Utils.placeHolderResolver({
+      //eslint-disable-next-line @typescript-eslint/no-explicit-any
+      placeHolderProvider: placeHolderProvider as any,
+      //eslint-disable-next-line @typescript-eslint/no-explicit-any
+      eventObserver: eventObserver as any,
+    });
+  }
+}

package/src/utilities/constants.ts

@@ -0,0 +1,4 @@
+export const SELECT_WEBPART = "Select one of these web parts for this column.";
+export const EDIT_PAGE_AND_SELECT_WEBPART = "Edit page and select webpart.";
+export const APP_BUTTON_LABEL = "Webpart that loads an app of your choice.";
+export const SPFXPREFIX = "[SPFxExtensions]";

package/src/webparts/spfxExtensionloader/SpfxExtensionloaderWebPart.manifest.json

@@ -0,0 +1,35 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+  "id": "d6ca1fc2-0591-4c6d-8a25-cae3262c017b",
+  "alias": "SpfxExtensionloaderWebPart",
+  "componentType": "WebPart",
+  "version": "*",
+  "manifestVersion": 2,
+  "requiresCustomScript": false,
+  "supportedHosts": [
+    "SharePointWebPart",
+    "TeamsPersonalApp",
+    "TeamsTab",
+    "SharePointFullPage"
+  ],
+  "supportsThemeVariants": true,
+  "supportsFullBleed": true,
+  "preconfiguredEntries": [
+    {
+      "groupId": "5c03119e-3074-46fd-976b-c60198311f70",
+      "group": {
+        "default": "Advanced"
+      },
+      "title": {
+        "default": "SPFx Extension Loader"
+      },
+      "description": {
+        "default": "Allows you to add a custom developed app"
+      },
+      "officeFabricIconFontName": "Page",
+      "properties": {
+        "description": "Select an app to load from the dropdown below"
+      }
+    }
+  ]
+}

package/src/webparts/spfxExtensionloader/SpfxExtensionloaderWebPart.module.scss

@@ -0,0 +1,185 @@
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+
+.spfxExtensionloader {
+  overflow: hidden;
+  padding: 1em;
+  color: "[theme:bodyText, default: #323130]";
+  color: var(--bodyText);
+  &.teams {
+    font-family: $ms-font-family-fallbacks;
+  }
+}
+
+.welcome {
+  text-align: center;
+}
+
+.welcomeImage {
+  width: 100%;
+  max-width: 420px;
+}
+
+.links {
+  a {
+    text-decoration: none;
+    color: "[theme:link, default:#03787c]";
+    color: var(--link); // note: CSS Custom Properties support is limited to modern browsers only
+
+    &:hover {
+      text-decoration: underline;
+      color: "[theme:linkHovered, default: #014446]";
+      color: var(--linkHovered); // note: CSS Custom Properties support is limited to modern browsers only
+    }
+  }
+}
+
+.SPFxExtensionApp {
+  .loader {
+    width: 28px;
+    height: 28px;
+    border: 2px solid #003755;
+    border-bottom-color: #009fda;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+  }
+
+  @keyframes rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .buttonLoader {
+    height: 80px;
+    width: 120px;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .shimmerShine {
+    height: 80px;
+    width: 120px;
+    border: none;
+    background: #f6f7f8;
+    background-image: linear-gradient(
+      to right,
+      #f6f7f8 0%,
+      #edeef1 20%,
+      #f6f7f8 40%,
+      #f6f7f8 100%
+    );
+    background-repeat: no-repeat;
+    background-size: 200px 80px;
+    display: block;
+    position: relative;
+
+    -webkit-animation-duration: 1s;
+    -webkit-animation-fill-mode: forwards;
+    -webkit-animation-iteration-count: infinite;
+    -webkit-animation-name: placeholderShimmer;
+    -webkit-animation-timing-function: linear;
+  }
+
+  @-webkit-keyframes placeholderShimmer {
+    0% {
+      background-position: -80px 0;
+    }
+
+    100% {
+      background-position: 120px 0;
+    }
+  }
+
+  @keyframes placeholderShimmer {
+    0% {
+      background-position: -80px 0;
+    }
+
+    100% {
+      background-position: 120px 0;
+    }
+  }
+  .applicationListSection {
+    text-align: center;
+    min-height: 320px;
+    justify-content: center;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    flex-wrap: wrap;
+  }
+
+  .header {
+    color: #242424;
+    font-weight: 600;
+    letter-spacing: 1px;
+    line-height: 32px;
+    padding: 0 12px;
+  }
+
+  .icon {
+    font-size: 28px;
+    height: 28px;
+    line-height: 28px;
+    min-width: 28px;
+    width: 28px;
+    font-style: normal;
+    > svg {
+      width: 100%;
+      height: auto;
+    }
+    > img {
+      width: 100%;
+      height: auto;
+    }
+  }
+
+  .iconFont {
+    background-color: #f6f7f8;
+  }
+
+  .appButtonsContainer {
+    display: flex;
+    height: 100%;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .appButtonsWrapper {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+
+  .appButton {
+    height: 80px;
+    width: 120px;
+    border: none;
+    background-color: unset;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 14px;
+    &:hover {
+      background-color: #c8e3fa;
+    }
+  }
+}

package/src/webparts/spfxExtensionloader/SpfxExtensionloaderWebPart.module.scss.ts

@@ -0,0 +1,24 @@
+
+require("./SpfxExtensionloaderWebPart.module.css");
+const styles = {
+  spfxExtensionloader: 'spfxExtensionloader_be4e0fd1',
+  teams: 'teams_be4e0fd1',
+  welcome: 'welcome_be4e0fd1',
+  welcomeImage: 'welcomeImage_be4e0fd1',
+  links: 'links_be4e0fd1',
+  SPFxExtensionApp: 'SPFxExtensionApp_be4e0fd1',
+  loader: 'loader_be4e0fd1',
+  rotation: 'rotation_be4e0fd1',
+  buttonLoader: 'buttonLoader_be4e0fd1',
+  shimmerShine: 'shimmerShine_be4e0fd1',
+  placeholderShimmer: 'placeholderShimmer_be4e0fd1',
+  applicationListSection: 'applicationListSection_be4e0fd1',
+  header: 'header_be4e0fd1',
+  icon: 'icon_be4e0fd1',
+  iconFont: 'iconFont_be4e0fd1',
+  appButtonsContainer: 'appButtonsContainer_be4e0fd1',
+  appButtonsWrapper: 'appButtonsWrapper_be4e0fd1',
+  appButton: 'appButton_be4e0fd1'
+};
+
+export default styles;