update to SPFx 1.13 - wip

samples/react-kanban-board/.editorconfig

@@ -1,25 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# we recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[{package,bower}.json]
-indent_style = space
-indent_size = 2

samples/react-kanban-board/.gitignore

@@ -11,6 +11,7 @@ dist
 lib
 solution
 temp
+release
 *.sppkg
 
 # Coverage directory used by tools like istanbul

samples/react-kanban-board/.npmignore

@@ -0,0 +1,16 @@
+!dist
+config
+
+gulpfile.js
+
+release
+src
+temp
+
+tsconfig.json
+tslint.json
+
+*.log
+
+.yo-rc.json
+.vscode

samples/react-kanban-board/.vscode/launch.json

@@ -4,23 +4,7 @@
    * Chrome browser: https://aka.ms/spfx-debugger-extensions
    */
   "version": "0.2.0",
-  "configurations": [{
+  "configurations": [
-      "name": "Local workbench",
-      "type": "chrome",
-      "request": "launch",
-      "url": "https://localhost:4321/temp/workbench.html",
-      "webRoot": "${workspaceRoot}",
-      "sourceMaps": true,
-      "sourceMapPathOverrides": {
-        "webpack:///.././src/*": "${webRoot}/src/*",
-        "webpack:///../../../src/*": "${webRoot}/src/*",
-        "webpack:///../../../../src/*": "${webRoot}/src/*",
-        "webpack:///../../../../../src/*": "${webRoot}/src/*"
-      },
-      "runtimeArgs": [
-        "--remote-debugging-port=9222"
-      ]
-    },
     {
       "name": "Hosted workbench",
       "type": "chrome",

samples/react-kanban-board/.yo-rc.json

@@ -2,7 +2,7 @@
   "@microsoft/generator-sharepoint": {
     "isCreatingSolution": true,
     "environment": "spo",
-    "version": "1.10.0",
+    "version": "1.13.0",
     "libraryName": "react-kanban-board",
     "libraryId": "cccbd72b-7b89-4128-9348-0a4850ded8fd",
     "packageManager": "npm",

samples/react-kanban-board/config/copy-assets.json

@@ -1,4 +0,0 @@
-{
-  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
-  "deployCdnPath": "temp/deploy"
-}

samples/react-kanban-board/config/deploy-azure-storage.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
-  "workingDir": "./temp/deploy/",
+  "workingDir": "./release/assets/",
   "account": "<!-- STORAGE ACCOUNT NAME -->",
   "container": "react-kanban-board",
   "accessKey": "<!-- ACCESS KEY -->"

samples/react-kanban-board/config/package-solution.json

@@ -6,7 +6,14 @@
         "version": "2.0.0.0",
         "includeClientSideAssets": true,
         "skipFeatureDeployment": true,
-        "isDomainIsolated": false
+        "isDomainIsolated": false,
+        "developer": {
+            "name": "",
+            "privacyUrl": "",
+            "termsOfUseUrl": "",
+            "websiteUrl": "",
+            "mpnId": ""
+          }
     },
     "paths": {
         "zippedPackage": "solution/react-kanban-board.sppkg"

samples/react-kanban-board/config/serve.json

@@ -2,9 +2,5 @@
   "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
   "port": 4321,
   "https": true,
-  "initialPage": "https://localhost:5432/workbench",
+  "initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx"
-  "api": {
-    "port": 5432,
-    "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
-  }
 }

samples/react-kanban-board/gulpfile.js

@@ -6,50 +6,13 @@ const gulp = require('gulp');
 const build = require('@microsoft/sp-build-web');
 build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
 
-// This section is inspired by Stefan Bauer's article at https://n8d.at/how-to-version-new-sharepoint-framework-projects/
+var getTasks = build.rig.getTasks;
-// Stefan rocks!
+build.rig.getTasks = function () {
-let syncVersionsSubtask = build.subTask('version-sync', function (gulp, buildOptions, done) {
+  var result = getTasks.call(build.rig);
-    this.log('Synching versions');
-
-    // import gulp utilits to write error messages
-    const gutil = require('gulp-util');
-
-    // import file system utilities form nodeJS
-    const fs = require('fs');
-
-    // read package.json
-    var pkgConfig = require('./package.json');
-
-    // read configuration of web part solution file
-    var pkgSolution = require('./config/package-solution.json');
-
-    // log old version
-    this.log('package-solution.json version:\t' + pkgSolution.solution.version);
-
-    // Generate new MS compliant version number
-    var newVersionNumber = pkgConfig.version.split('-')[0] + '.0';
-
-    if (pkgSolution.solution.version !== newVersionNumber) {
-        // assign newly generated version number to web part version
-        pkgSolution.solution.version = newVersionNumber;
-
-        // log new version
-        this.log('New package-solution.json version:\t' + pkgSolution.solution.version);
-
-        fs.writeFile('./config/package-solution.json', JSON.stringify(pkgSolution, null, 4), function (err, result) {
-            if (err) this.log('error', err);
-        });
-
-    }
-    else {
-        this.log('package-solution.json version is up-to-date');
-    }
-
-    done();
-});
-let syncVersionTask = build.task('version-sync', syncVersionsSubtask);
-build.rig.addPreBuildTask(syncVersionTask);
 
+  result.set('serve', result.get('serve-deprecated'));
 
+  return result;
+};
 
 build.initialize(gulp);

samples/react-kanban-board/package.json

@@ -3,51 +3,44 @@
   "main": "lib/index.js",
   "version": "2.0.0",
   "private": true,
-  "engines": {
+  "engines": "undefined",
-    "node": ">=0.10.0"
-  },
   "scripts": {
     "build": "gulp bundle",
     "clean": "gulp clean",
     "test": "gulp test"
   },
   "dependencies": {
-    "@microsoft/sp-core-library": "1.10.0",
+    "@microsoft/sp-core-library": "1.13.0",
-    "@microsoft/sp-lodash-subset": "1.10.0",
+    "@microsoft/sp-lodash-subset": "1.13.0",
-    "@microsoft/sp-office-ui-fabric-core": "1.10.0",
+    "@microsoft/sp-office-ui-fabric-core": "1.13.0",
-    "@microsoft/sp-property-pane": "1.10.0",
+    "@microsoft/sp-property-pane": "1.13.0",
-    "@microsoft/sp-webpart-base": "1.10.0",
+    "@microsoft/sp-webpart-base": "1.13.0",
     "@pnp/common": "^1.3.3",
     "@pnp/logging": "^1.3.3",
     "@pnp/odata": "^1.3.3",
     "@pnp/polyfill-ie11": "^2.0.2",
     "@pnp/sp": "^1.3.3",
-    "@pnp/spfx-controls-react": "1.19.0",
+    "@pnp/spfx-controls-react": "^3.5.0-beta.2d993b2",
-    "@pnp/spfx-property-controls": "1.19.0",
+    "@pnp/spfx-property-controls": "^3.3.0-beta.d48002e",
-    "@types/es6-promise": "0.0.33",
-    "@types/react": "16.8.8",
-    "@types/react-dom": "16.8.3",
-    "@types/webpack-env": "1.13.1",
     "classnames": "^2.2.6",
-    "office-ui-fabric-react": "6.214.0",
+    "office-ui-fabric-react": "7.174.1",
-    "react": "16.8.5",
+    "react": "16.13.1",
-    "react-dom": "16.8.5"
+    "react-dom": "16.13.1"
   },
   "resolutions": {
     "@types/react": "16.8.8"
   },
   "devDependencies": {
-    "@microsoft/rush-stack-compiler-2.9": "0.7.7",
+    "@microsoft/rush-stack-compiler-3.7": "0.2.3",
-    "@microsoft/rush-stack-compiler-3.3": "0.3.5",
+    "@microsoft/rush-stack-compiler-3.9": "0.4.47",
-    "@microsoft/sp-build-web": "1.10.0",
+    "@microsoft/sp-build-web": "1.13.0",
-    "@microsoft/sp-module-interfaces": "1.10.0",
+    "@microsoft/sp-module-interfaces": "1.13.0",
-    "@microsoft/sp-tslint-rules": "1.10.0",
+    "@microsoft/sp-tslint-rules": "1.13.0",
-    "@microsoft/sp-webpart-workbench": "1.10.0",
+    "@types/react": "16.9.51",
-    "@types/chai": "3.4.34",
+    "@types/webpack-env": "^1.13.1",
-    "@types/mocha": "2.2.38",
     "ajv": "~5.2.2",
     "autoprefixer": "^9.8.4",
-    "gulp": "~3.9.1",
+    "gulp": "4.0.2",
     "react-html-parser": "^2.0.2"
   }
 }

samples/react-kanban-board/src/kanban/KanbanComponent.tsx

@@ -331,6 +331,7 @@ const hasprocessIndicator = buckets.filter((b)=> b.showPercentageHeadline).lengt
     }
 
     private onDragStart(event, taskId: string, bucket: string): void {
+        console.log('onDragStart');
         const taskitem = this.props.tasks.filter(p => p.taskId === taskId);
         if (taskitem.length === 1) {
             event.dataTransfer.setData("text", taskId);
@@ -353,6 +354,7 @@ const hasprocessIndicator = buckets.filter((b)=> b.showPercentageHeadline).lengt
 
     private onDragOver(event, targetbucket: string): void {
         event.preventDefault();
+        console.log('onDragOver');
 
         if (this.dragelement.bucket !== targetbucket) {
             const index = findIndex(this.props.buckets, element => element.bucket == targetbucket);

samples/react-kanban-board/src/kanban/KanbanTaskManagedProp.tsx

@@ -67,10 +67,8 @@ export default class KanbanTaskManagedProp extends React.Component<IKanbanTaskMa
                                 size={PersonaSize.size32}
                                 hidePersonaDetails={false}
                             />))
-                            )
+                        ))
-                        )
                     }
-                  };
                 </span>);
                 break;
             case KanbanTaskMamagedPropertyType.complex:

samples/react-kanban-board/src/webparts/kanbanBoard/KanbanBoardWebPart.ts

@@ -106,7 +106,7 @@ export default class KanbanBoardWebPart extends BaseClientSideWebPart<IKanbanBoa
             disabled: false,
             onPropertyChange: this.listConfigurationChanged.bind(this),
             properties: this.properties,
-            context: this.context,
+            context: this.context as any,
             onGetErrorMessage: null,
             deferredValidationTime: 0,
             key: 'listPickerFieldId',

samples/react-kanban-board/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.9/includes/tsconfig-web.json",
   "compilerOptions": {
     "target": "es5",
     "forceConsistentCasingInFileNames": true,
@@ -19,20 +19,18 @@
       "./node_modules/@microsoft"
     ],
     "types": [
-      "es6-promise",
       "webpack-env"
     ],
     "lib": [
       "es5",
       "dom",
-      "es2015.collection"
+      "es2015.collection",
+      "es2015.promise"
     ]
   },
   "include": [
-    "src/**/*.ts", "src/webparts/kanbanBoard/components/bucketOrder.tsx"
+    "src/**/*.ts", 
+    "src/**/*.tsx"
   ],
-  "exclude": [
+  "exclude": []
-    "node_modules",
-    "lib"
-  ]
 }

samples/react-kanban-board/tslint.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@microsoft/sp-tslint-rules/base-tslint.json",
+  "extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json",
   "rules": {
     "class-name": false,
     "export-name": false,
@@ -17,7 +17,6 @@
     "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,