Add files via upload

samples/react-soccer-highlights/README.md

@@ -13,11 +13,11 @@
 
 ### Usage
 
-1) Deploy the package to SharePoint Online App Catalog.
+**1) Deploy the package to SharePoint Online App Catalog.
 
-2) Add the Web Part to Page, Configure the web Part, provide Title and Page Size.**
+**2) Add the Web Part to Page, Configure the web Part, provide Title and Page Size.**
 
-3) Double click on Pager to move Pages. **
+**3) Double click on Pager to move Pages. **
 
 ## Used SharePoint Framework Version
 

samples/react-soccer-highlights/gulpfile.js

@@ -0,0 +1,58 @@
+'use strict';
+
+// check if gulp dist was called
+if (process.argv.indexOf('dist') !== -1) {
+    // add ship options to command call
+    process.argv.push('--ship');
+}
+
+const path = require('path');
+const gulp = require('gulp');
+const build = require('@microsoft/sp-build-web');
+const gulpSequence = require('gulp-sequence');
+
+build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
+
+// Create clean distrubution package
+gulp.task('dist', gulpSequence('clean', 'bundle', 'package-solution'));
+// Create clean development package
+gulp.task('dev', gulpSequence('clean', 'bundle', 'package-solution'));
+
+
+
+
+/**
+ * Custom Framework Specific gulp tasks
+ */
+
+
+const argv = build.rig.getYargs().argv;
+const useCustomServe = argv['custom-serve'];
+const fs = require("fs");
+const workbenchApi = require("@microsoft/sp-webpart-workbench/lib/api");
+
+if (useCustomServe) {
+  build.tslintCmd.enabled = false;
+  
+  const ensureWorkbenchSubtask = build.subTask('ensure-workbench-task', function (gulp, buildOptions, done) {
+    this.log('Creating workbench.html file...');
+    try {
+      workbenchApi.default["/workbench"]();
+    } catch (e) { }
+
+    done();
+  });
+
+  build.rig.addPostBuildTask(build.task('ensure-workbench', ensureWorkbenchSubtask));
+
+  build.configureWebpack.mergeConfig({
+    additionalConfiguration: (generatedConfiguration) => {
+      fs.writeFileSync("./temp/_webpack_config.json", JSON.stringify(generatedConfiguration, null, 2));
+      return generatedConfiguration;
+    }
+  });
+
+}
+
+build.initialize(require('gulp'));
+

samples/react-soccer-highlights/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "react-spfx",
+  "version": "0.0.1",
+  "private": true,
+  "main": "lib/index.js",
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "scripts": {
+    "build": "gulp bundle",
+    "clean": "gulp clean",
+    "test": "gulp test",
+    "preversion": "node ./tools/pre-version.js",
+    "postversion": "gulp dist",
+    "serve": "cross-env NODE_OPTIONS=--max_old_space_size=4096 gulp bundle --custom-serve && cross-env NODE_OPTIONS=--max_old_space_size=4096 webpack-dev-server --mode development --config ./webpack.js --env.env=dev"
+  },
+  "dependencies": {
+    "@microsoft/sp-core-library": "1.11.0",
+    "@microsoft/sp-lodash-subset": "1.11.0",
+    "@microsoft/sp-office-ui-fabric-core": "1.11.0",
+    "@microsoft/sp-property-pane": "1.11.0",
+    "@microsoft/sp-webpart-base": "1.11.0",
+    "@pnp/pnpjs": "^2.0.6",
+    "@pnp/spfx-controls-react": "2.1.0",
+    "axios": "^0.20.0",
+    "bootstrap": "^4.5.3",
+    "office-ui-fabric-react": "6.214.0",
+    "react": "16.8.5",
+    "react-dom": "16.8.5",
+    "react-markdown": "^5.0.2",
+    "react-paging": "^0.2.1"
+  },
+  "devDependencies": {
+    "@microsoft/rush-stack-compiler-3.3": "0.3.5",
+    "@microsoft/sp-build-web": "1.11.0",
+    "@microsoft/sp-module-interfaces": "1.11.0",
+    "@microsoft/sp-tslint-rules": "1.11.0",
+    "@microsoft/sp-webpart-workbench": "1.11.0",
+    "@types/chai": "3.4.34",
+    "@types/es6-promise": "0.0.33",
+    "@types/mocha": "2.2.38",
+    "@types/react": "16.8.8",
+    "@types/react-dom": "16.8.3",
+    "@types/webpack-env": "1.13.1",
+    "ajv": "~5.2.2",
+    "gulp": "~3.9.1",
+    "gulp-sequence": "1.0.0",
+    "css-loader": "3.4.2",
+    "css-modules-typescript-loader": "4.0.0",
+    "fork-ts-checker-webpack-plugin": "4.1.0",
+    "node-sass": "4.13.1",
+    "sass-loader": "8.0.2",
+    "style-loader": "1.1.3",
+    "ts-loader": "6.2.1",
+    "webpack": "4.42.0",
+    "webpack-cli": "3.3.11",
+    "webpack-dev-server": "3.10.3",
+    "del": "5.1.0",
+    "cross-env": "7.0.2"
+  }
+}

samples/react-soccer-highlights/tools/pre-version.js

@@ -0,0 +1,64 @@
+/**
+ * This script updates the package-solution version analogue to the
+ * the package.json file.
+ */
+
+if (process.env.npm_package_version === undefined) {
+
+    throw 'Package version cannot be evaluated';
+
+}
+
+// define path to package-solution file
+const solution = './config/package-solution.json',
+    teams = './teams/manifest.json';
+
+// require filesystem instance
+const fs = require('fs');
+
+// get next automated package version from process variable
+const nextPkgVersion = process.env.npm_package_version;
+
+// make sure next build version match
+const nextVersion = nextPkgVersion.indexOf('-') === -1 ?
+    nextPkgVersion : nextPkgVersion.split('-')[0];
+
+// Update version in SPFx package-solution if exists
+if (fs.existsSync(solution)) {
+
+    // read package-solution file
+    const solutionFileContent = fs.readFileSync(solution, 'UTF-8');
+    // parse file as json
+    const solutionContents = JSON.parse(solutionFileContent);
+
+    // set property of version to next version
+    solutionContents.solution.version = nextVersion + '.0';
+
+    // save file
+    fs.writeFileSync(
+        solution,
+        // convert file back to proper json
+        JSON.stringify(solutionContents, null, 2),
+        'UTF-8');
+
+}
+
+// Update version in teams manifest if exists
+if (fs.existsSync(teams)) {
+
+    // read package-solution file
+    const teamsManifestContent = fs.readFileSync(teams, 'UTF-8');
+    // parse file as json
+    const teamsContent = JSON.parse(teamsManifestContent);
+
+    // set property of version to next version
+    teamsContent.version = nextVersion;
+
+    // save file
+    fs.writeFileSync(
+        teams,
+        // convert file back to proper json
+        JSON.stringify(teamsContent, null, 2),
+        'UTF-8');
+
+}

samples/react-soccer-highlights/tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
+  "compilerOptions": {
+    "target": "es5",
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "jsx": "react",
+    "declaration": true,
+    "sourceMap": true,
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "outDir": "lib",
+    "inlineSources": false,
+    "strictNullChecks": false,
+    "noUnusedLocals": false,
+    "typeRoots": [
+      "./node_modules/@types",
+      "./node_modules/@microsoft"
+    ],
+    "types": [
+      "es6-promise",
+      "webpack-env"
+    ],
+    "lib": [
+      "es5",
+      "dom",
+      "es2015.collection"
+    ],
+    "esModuleInterop": true
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules",
+    "lib"
+  ]
+}

samples/react-soccer-highlights/tslint.json

@@ -0,0 +1,30 @@
+{
+  "extends": "@microsoft/sp-tslint-rules/base-tslint.json",
+  "rules": {
+    "class-name": false,
+    "export-name": false,
+    "forin": false,
+    "label-position": false,
+    "member-access": true,
+    "no-arg": false,
+    "no-console": false,
+    "no-construct": false,
+    "no-duplicate-variable": true,
+    "no-eval": false,
+    "no-function-expression": true,
+    "no-internal-module": true,
+    "no-shadowed-variable": true,
+    "no-switch-case-fall-through": true,
+    "no-unnecessary-semicolons": true,
+    "no-unused-expression": true,
+    "no-use-before-declare": true,
+    "no-with-statement": true,
+    "semicolon": true,
+    "trailing-comma": false,
+    "typedef": false,
+    "typedef-whitespace": false,
+    "use-named-parameter": true,
+    "variable-name": false,
+    "whitespace": false
+  }
+}

samples/react-soccer-highlights/webpack.js

@@ -0,0 +1,259 @@
+const path = require("path");
+const fs = require("fs");
+const webpack = require("webpack");
+const resolve = require("path").resolve;
+const CertStore = require("@microsoft/gulp-core-build-serve/lib/CertificateStore");
+const CertificateStore = CertStore.CertificateStore || CertStore.default;
+const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
+const del = require("del");
+const port = 4321;
+const host = "https://localhost:" + port;
+
+///
+// Transforms define("<guid>", ...) to web part specific define("<web part id_version", ...)
+// the same approach is used inside copyAssets SPFx build step
+///
+class DynamicLibraryPlugin {
+  constructor(options) {
+    this.opitons = options;
+  }
+
+  apply(compiler) {
+    compiler.hooks.emit.tap("DynamicLibraryPlugin", compilation => {
+      for (const assetId in this.opitons.modulesMap) {
+        const moduleMap = this.opitons.modulesMap[assetId];
+
+        if (compilation.assets[assetId]) {
+          const rawValue = compilation.assets[assetId].children[0]._value;
+          compilation.assets[assetId].children[0]._value = rawValue.replace(this.opitons.libraryName, moduleMap.id + "_" + moduleMap.version);
+        }
+      }
+    });
+  }
+}
+
+///
+// Removes *.module.scss.ts on the first execution in order prevent conflicts with *.module.scss.d.ts
+// generated by css-modules-typescript-loader
+///
+class ClearCssModuleDefinitionsPlugin {
+  constructor(options) {
+    this.options = options || {};
+  }
+
+  apply(compiler) {
+    compiler.hooks.done.tap("FixStylesPlugin", stats => {
+      if (!this.options.deleted) {
+
+        setTimeout(() => {
+          del.sync(["src/**/*.module.scss.ts"]);
+        }, 3000);
+
+        this.options.deleted = true;
+      }
+    });
+  }
+}
+
+let baseConfig = {
+  target: "web",
+  mode: "development",
+  devtool: "source-map",
+  resolve: {
+    extensions: [".ts", ".tsx", ".js"],
+    modules: ["node_modules"]
+  },
+  context: path.resolve(__dirname),
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        loader: "ts-loader",
+        options: {
+          transpileOnly: true,
+          compilerOptions: {
+            declarationMap: false
+          }
+        },
+        exclude: /node_modules/
+      },
+      {
+        use: [{
+          loader: "@microsoft/loader-cased-file",
+          options: {
+            name: "[name:lower]_[hash].[ext]"
+          }
+        }],
+        test: /\.(jpe?g|png|woff|eot|ttf|svg|gif|dds)$/i
+      },
+      {
+        use: [{
+          loader: "html-loader"
+        }],
+        test: /\.html$/
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: "@microsoft/loader-load-themed-styles",
+            options: {
+              async: true
+            }
+          },
+          {
+            loader: "css-loader"
+          }
+        ]
+      },
+      {
+        test: function (fileName) {
+          return fileName.endsWith(".module.scss");   // scss modules support
+        },
+        use: [
+          {
+            loader: "@microsoft/loader-load-themed-styles",
+            options: {
+              async: true
+            }
+          },
+          "css-modules-typescript-loader",
+          {
+            loader: "css-loader",
+            options: {
+              modules: {
+                localIdentName: "[local]_[hash:base64:8]"
+              }
+            }
+          }, // translates CSS into CommonJS
+          "sass-loader" // compiles Sass to CSS, using Node Sass by default
+        ]
+      },
+      {
+        test: function (fileName) {
+          return !fileName.endsWith(".module.scss") && fileName.endsWith(".scss");  // just regular .scss
+        },
+        use: [
+          {
+            loader: "@microsoft/loader-load-themed-styles",
+            options: {
+              async: true
+            }
+          },
+          "css-loader", // translates CSS into CommonJS
+          "sass-loader" // compiles Sass to CSS, using Node Sass by default
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new ForkTsCheckerWebpackPlugin({
+      tslint: true
+    }),
+    new ClearCssModuleDefinitionsPlugin(),
+    new webpack.DefinePlugin({
+      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
+      "process.env.DEBUG": JSON.stringify(true),
+      "DEBUG": JSON.stringify(true)
+    })],
+  devServer: {
+    hot: false,
+    contentBase: resolve(__dirname),
+    publicPath: host + "/dist/",
+    host: "localhost",
+    port: port,
+    disableHostCheck: true,
+    historyApiFallback: true,
+    open: true,
+    writeToDisk: false,
+    openPage: host + "/temp/workbench.html",
+    stats: {
+      preset: "errors-only",
+      colors: true,
+      chunks: false,
+      modules: false,
+      assets: false
+    },
+    proxy: { // url re-write for resources to be served directly from src folder
+      "/lib/**/loc/*.js": {
+        target: host,
+        pathRewrite: { "^/lib": "/src" },
+        secure: false
+      }
+    },
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+    },
+    https: {
+      cert: CertificateStore.instance.certificateData,
+      key: CertificateStore.instance.keyData
+    }
+  },
+}
+
+const createConfig = function () {
+  // remove old css module TypeScript definitions
+  del.sync(["dist/*.js", "dist/*.map"]);
+
+  // we need only "externals", "output" and "entry" from the original webpack config
+  let originalWebpackConfig = require("./temp/_webpack_config.json");
+  baseConfig.externals = originalWebpackConfig.externals;
+  baseConfig.output = originalWebpackConfig.output;
+
+  baseConfig.entry = getEntryPoints(originalWebpackConfig.entry);
+
+  baseConfig.output.publicPath = host + "/dist/";
+
+  const manifest = require("./temp/manifests.json");
+  const modulesMap = {};
+  const originalEntries = Object.keys(originalWebpackConfig.entry);
+
+  for (const jsModule of manifest) {
+    if (jsModule.loaderConfig
+      && jsModule.loaderConfig.entryModuleId
+      && originalEntries.indexOf(jsModule.loaderConfig.entryModuleId) !== -1) {
+      modulesMap[jsModule.loaderConfig.entryModuleId + ".js"] = {
+        id: jsModule.id,
+        version: jsModule.version
+      }
+    }
+  }
+
+  baseConfig.plugins.push(new DynamicLibraryPlugin({
+    modulesMap: modulesMap,
+    libraryName: originalWebpackConfig.output.library
+  }));
+
+  return baseConfig;
+}
+
+function getEntryPoints(entry) {
+  // fix: ".js" entry needs to be ".ts"
+  // also replaces the path form /lib/* to /src/*
+  let newEntry = {};
+  let libSearchRegexp;
+  if (path.sep === "/") {
+    libSearchRegexp = /\/lib\//gi;
+  } else {
+    libSearchRegexp = /\\lib\\/gi;
+  }
+
+  const srcPathToReplace = path.sep + "src" + path.sep;
+
+  for (const key in entry) {
+    let entryPath = entry[key];
+    if (entryPath.indexOf("bundle-entries") === -1) {
+      entryPath = entryPath.replace(libSearchRegexp, srcPathToReplace).slice(0, -3) + ".ts";
+    } else {
+      // replace paths and extensions in bundle file
+      let bundleContent = fs.readFileSync(entryPath).toString();
+      bundleContent = bundleContent.replace(libSearchRegexp, srcPathToReplace).replace(/\.js/gi, ".ts");
+      fs.writeFileSync(entryPath, bundleContent);
+    }
+    newEntry[key] = entryPath;
+  }
+
+  return newEntry;
+}
+
+module.exports = createConfig();