Update packages (#816)

* Update packages

* Test

* Lint fixes.

Dockerfile

@@ -36,7 +36,7 @@ RUN dotnet publish --no-restore src/Squidex/Squidex.csproj --output /build/ --co
 #
 # Stage 2, Build Frontend
 #
-FROM buildkite/puppeteer:5.2.1 as frontend
+FROM buildkite/puppeteer:10.0.0 as frontend
 
 WORKDIR /src
 

frontend/.stylelintrc.json

@@ -1,12 +1,13 @@
 {
-    "extends": "stylelint-config-standard",
+    "extends": "stylelint-config-standard-scss",
     "plugins": [
         "stylelint-scss"
     ],
     "rules": {
         "at-rule-empty-line-before": null,
         "at-rule-no-unknown": null,
-        "selector-class-pattern": "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
+        "color-function-notation": null,
+        "declaration-block-no-redundant-longhand-properties": null,
         "declaration-empty-line-before": null,
         "indentation": 4,
         "no-duplicate-selectors": null,
@@ -15,6 +16,9 @@
         "no-missing-end-of-source-newline": null,
         "number-leading-zero": "never",
         "scss/at-rule-no-unknown": true,
+        "scss/comment-no-empty": null,
+        "scss/no-global-function-names": null,
+        "selector-class-pattern": "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
         "selector-pseudo-element-no-unknown": [
             true,
             {
@@ -22,7 +26,8 @@
                     "ng-deep"
                 ]
             }
-        ]
+        ],
+        "string-quotes": "single"
     },
     "ignoreFiles": [
         "**/*.cs",

frontend/app-config/webpack.config.js

@@ -53,7 +53,7 @@ module.exports = function calculateConfig(env) {
     const configFile = isTests ? 'tsconfig.spec.json' : 'tsconfig.app.json';
 
     // eslint-disable-next-line no-console
-    console.log(`Use ${configFile}, Production: ${!!isProduction}`);
+    console.log(`Use ${configFile}, Production: ${!!isProduction}, DevServer: ${isDevServer}`);
 
     const config = {
         mode: isProduction ? 'production' : 'development',
@@ -128,6 +128,11 @@ module.exports = function calculateConfig(env) {
                     loader: 'ignore-loader',
                 }],
                 include: [/node_modules/],
+            }, {
+                test: /\.html$/,
+                use: [{
+                    loader: 'raw-loader',
+                }],
             }, {
                 test: /\.(woff|woff2|ttf|eot)(\?.*$|$)/,
                 use: [{
@@ -427,7 +432,7 @@ module.exports = function calculateConfig(env) {
         config.module.rules.push({
             test: /\.[jt]sx?$/,
             use: [{
-                loader: 'istanbul-instrumenter-loader',
+                loader: '@jsdevtools/coverage-istanbul-loader',
                 options: {
                     esModules: true,
                 },

frontend/app/features/apps/pages/onboarding-dialog.component.scss

@@ -1,6 +1,5 @@
 $size-width: 825px;
 $size-height: 576px;
-
 $size-image: 476px;
 
 h1 {

frontend/app/features/content/pages/content/inspecting/content-inspection.component.scss

@@ -1,4 +1,3 @@
-
 :host,
 .inner-main {
     display: flex;

frontend/app/features/content/shared/forms/stock-photo-editor.component.scss

@@ -1,6 +1,5 @@
-$color-user-background: rgba(0, 0, 0, .5);
+$color-user-background: rgba(0, 0, 0, 50%);
 $color-background: #000;
-
 $height: 300px;
 
 .col-image {

frontend/app/features/schemas/pages/schema/fields/field.component.scss

@@ -1,6 +1,5 @@
 $field-header: #e7ebef;
 $field-line: #c7cfd7;
-
 $padding: 1rem;
 
 .table-items-row-details {

frontend/app/framework/angular/forms/editors/tag-editor.component.scss

@@ -1,6 +1,5 @@
 $focus-color: #b3d3ff;
-$focus-shadow: rgba(51, 137, 255, .25);
-
+$focus-shadow: rgba(51, 137, 255, 25%);
 $inner-height: 1.75rem;
 
 /* stylelint-disable no-descending-specificity */

frontend/app/framework/angular/markdown.directive.ts

@@ -6,7 +6,7 @@
  */
 
 import { Directive, ElementRef, Input, OnChanges, Renderer2 } from '@angular/core';
-import marked from 'marked';
+import { marked } from 'marked';
 
 const RENDERER_DEFAULT = new marked.Renderer();
 const RENDERER_INLINE = new marked.Renderer();

frontend/app/framework/angular/modals/onboarding-tooltip.component.scss

@@ -1,4 +1,4 @@
-$hide-shadow: rgba(0, 0, 0, .5);
+$hide-shadow: rgba(0, 0, 0, 50%);
 
 :host {
     display: none;

frontend/app/framework/angular/pipes/markdown.pipe.ts

@@ -6,7 +6,7 @@
  */
 
 import { Pipe, PipeTransform } from '@angular/core';
-import marked from 'marked';
+import { marked } from 'marked';
 
 const renderer = new marked.Renderer();
 

frontend/app/shared/components/forms/markdown-editor.component.ts

@@ -8,7 +8,7 @@
 import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, forwardRef, Input, Renderer2, ViewChild } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ApiUrlConfig, AssetDto, AssetUploaderState, DialogModel, ResourceLoaderService, StatefulControlComponent, Types, UploadCanceled } from '@app/shared/internal';
-import marked from 'marked';
+import { marked } from 'marked';
 
 declare const SimpleMDE: any;
 

frontend/app/shared/components/help/help-markdown.pipe.ts

@@ -6,7 +6,7 @@
  */
 
 import { Pipe, PipeTransform } from '@angular/core';
-import marked from 'marked';
+import { marked } from 'marked';
 
 const renderer = new marked.Renderer();
 

frontend/app/shared/services/workflows.service.ts

@@ -20,7 +20,7 @@ export class WorkflowDto extends Model<WorkflowDto> {
     public readonly displayName: string;
 
     constructor(
-        links: ResourceLinks = {},
+        links: ResourceLinks,
         public readonly id: string,
         public readonly name: string | null = null,
         public readonly initial: string | null = null,

frontend/app/shell/pages/internal/apps-menu.component.scss

@@ -1,6 +1,5 @@
 $color-apps-border: #65a6ff;
-
-$color-nav-shadow: rgba(26, 93, 184, .26);
+$color-nav-shadow: rgba(26, 93, 184, 25%);
 
 .dropdown {
     &-button {

frontend/app/theme/_bootstrap-vars.scss

@@ -1,5 +1,7 @@
-@import '_mixins.scss';
-@import '_vars.scss';
+@import 'mixins';
+@import 'vars';
+
+/* stylelint-disable */
 
 //
 // GENERAL

frontend/app/theme/_bootstrap.scss

@@ -1,7 +1,7 @@
-@import '_mixins';
-@import '_vars';
+@import 'mixins';
+@import 'vars';
 
-@import './../../node_modules/bootstrap/scss/mixins/_buttons';
+@import './../../node_modules/bootstrap/scss/mixins/buttons';
 
 /* stylelint-disable */
 

frontend/app/theme/_common.scss

@@ -1,5 +1,5 @@
-@import '_mixins';
-@import '_vars';
+@import 'mixins';
+@import 'vars';
 
 /* stylelint-disable */
 

frontend/app/theme/_forms.scss

@@ -1,5 +1,5 @@
-@import '_mixins';
-@import '_vars';
+@import 'mixins';
+@import 'vars';
 
 /* stylelint-disable */
 

frontend/app/theme/_lists.scss

@@ -1,5 +1,5 @@
-@import '_mixins';
-@import '_vars';
+@import 'mixins';
+@import 'vars';
 
 /* stylelint-disable */
 

frontend/app/theme/_static.scss

@@ -1,5 +1,5 @@
-@import '_mixins';
-@import '_vars';
+@import 'mixins';
+@import 'vars';
 
 //
 // Noscript element with warning, when javascript is disabled.

frontend/app/theme/_vars.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable */
+
 $color-background:          #f5f6f9;
 
 $color-border:              #dedfe3;

frontend/app/theme/theme.scss

@@ -1,20 +1,20 @@
-@import '_bootstrap-vars.scss';
+@import 'bootstrap-vars';
 
 // Bootstrap
-@import '~bootstrap/scss/bootstrap.scss';
+@import '~bootstrap/scss/bootstrap';
 
 // Pikaday
 @import '~pikaday/css/pikaday.css';
 
 // Bootstrap Overrides
-@import '_bootstrap.scss';
+@import 'bootstrap';
 
 // icomoon
 @import './icomoon/style.css';
 
 // Custom files
-@import '_common';
-@import '_panels2';
-@import '_forms';
-@import '_lists';
-@import '_static';
+@import 'common';
+@import 'panels2';
+@import 'forms';
+@import 'lists';
+@import 'static';

frontend/package.json

@@ -5,11 +5,12 @@
   "license": "MIT",
   "repository": "https://github.com/SebastianStehle/Squidex",
   "scripts": {
-    "start": "webpack serve --config app-config/webpack.config.js --inline --port 3000 --hot --https --pfx ../dev/squidex-dev.pfx --pfx-passphrase password",
+    "start": "webpack serve --config app-config/webpack.config.js --port 3000 --hot --server-type https --https-pfx ../dev/squidex-dev.pfx --https-passphrase password --env WEBPACK_SERVE",
     "test": "karma start",
     "test:coverage": "karma start karma.coverage.conf.js",
     "test:clean": "rimraf _test-output",
-    "lint": "eslint app/**/*.ts",
+    "lint:scripts": "eslint app/**/*.ts",
+    "lint:style": "stylelint app/**/*.scss",
     "build": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js --config app-config/webpack.config.js --env production",
     "build:clean": "rimraf wwwroot/build",
     "build:analyze": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js --config app-config/webpack.config.js --env production --env analyze",
@@ -17,28 +18,28 @@
     "ngcc": "ngcc"
   },
   "dependencies": {
-    "@angular/animations": "12.1.2",
-    "@angular/cdk": "12.1.2",
-    "@angular/cdk-experimental": "12.1.2",
-    "@angular/common": "12.1.2",
-    "@angular/core": "12.1.2",
-    "@angular/forms": "12.1.2",
-    "@angular/localize": "12.1.2",
-    "@angular/platform-browser": "12.1.2",
-    "@angular/platform-browser-dynamic": "12.1.2",
-    "@angular/platform-server": "12.1.2",
-    "@angular/router": "12.1.2",
+    "@angular/animations": "13.1.1",
+    "@angular/cdk": "13.1.1",
+    "@angular/cdk-experimental": "13.1.1",
+    "@angular/common": "13.1.1",
+    "@angular/core": "13.1.1",
+    "@angular/forms": "13.1.1",
+    "@angular/localize": "13.1.1",
+    "@angular/platform-browser": "13.1.1",
+    "@angular/platform-browser-dynamic": "13.1.1",
+    "@angular/platform-server": "13.1.1",
+    "@angular/router": "13.1.1",
     "@egjs/hammerjs": "2.0.17",
-    "ace-builds": "1.4.12",
+    "ace-builds": "1.4.13",
     "angular-gridster2": "11.2.0",
     "angular-mentions": "1.4.0",
     "angular2-chartjs": "0.5.1",
     "babel-polyfill": "6.26.0",
-    "bootstrap": "5.0.2",
+    "bootstrap": "5.1.3",
     "codemirror-graphql": "1.0.2",
-    "core-js": "3.15.2",
+    "core-js": "3.20.1",
     "cropperjs": "2.0.0-alpha.1",
-    "date-fns": "2.22.1",
+    "date-fns": "2.28.0",
     "font-awesome": "4.7.0",
     "graphiql": "1.4.2",
     "graphql": "15.5.1",
@@ -46,69 +47,70 @@
     "keycharm": "0.4.0",
     "leaflet": "1.7.1",
     "leaflet-control-geocoder": "2.3.0",
-    "marked": "2.1.3",
+    "marked": "4.0.8",
     "mersenne-twister": "1.1.0",
     "mousetrap": "1.6.5",
     "ngx-color-picker": "11.0.0",
-    "ngx-doc-viewer": "2.0.4",
+    "ngx-doc-viewer": "2.0.5",
     "oidc-client": "1.11.5",
     "pikaday": "1.8.2",
     "progressbar.js": "1.1.0",
-    "prop-types": "15.7.2",
+    "prop-types": "15.8.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "rxjs": "7.2.0",
+    "rxjs": "7.5.1",
     "simplemde": "1.11.2",
-    "slugify": "1.6.0",
-    "tinymce": "5.8.2",
-    "tslib": "2.3.0",
-    "tui-calendar": "^1.13.1",
-    "video.js": "7.13.3",
+    "slugify": "1.6.4",
+    "tinymce": "5.10.2",
+    "tslib": "2.3.1",
+    "tui-calendar": "^1.15.1",
+    "video.js": "7.17.0",
     "vis-data": "7.1.2",
-    "vis-network": "9.0.4",
+    "vis-network": "9.1.0",
     "vis-util": "5.0.2",
     "zone.js": "0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-optimizer": "0.1201.2",
-    "@angular/compiler": "12.1.2",
-    "@angular/compiler-cli": "12.1.2",
-    "@ngtools/webpack": "12.1.2",
+    "@angular-devkit/build-optimizer": "0.1301.2",
+    "@angular/cli": "^13.1.2",
+    "@angular/compiler": "13.1.1",
+    "@angular/compiler-cli": "13.1.1",
+    "@jsdevtools/coverage-istanbul-loader": "^3.0.5",
+    "@ngtools/webpack": "13.1.2",
     "@types/codemirror": "0.0.108",
-    "@types/core-js": "2.5.4",
-    "@types/jasmine": "3.8.1",
-    "@types/marked": "2.0.4",
+    "@types/core-js": "2.5.5",
+    "@types/jasmine": "3.10.2",
+    "@types/marked": "4.0.1",
     "@types/mersenne-twister": "1.1.2",
-    "@types/mousetrap": "1.6.8",
-    "@types/node": "16.3.2",
-    "@types/react": "17.0.14",
-    "@types/react-dom": "17.0.9",
+    "@types/mousetrap": "1.6.9",
+    "@types/node": "17.0.6",
+    "@types/react": "17.0.38",
+    "@types/react-dom": "17.0.11",
     "@types/simplemde": "1.11.8",
     "@types/tapable": "2.2.2",
     "@types/tinymce": "4.6.4",
-    "@types/ws": "7.4.6",
-    "@typescript-eslint/eslint-plugin": "4.28.3",
-    "@typescript-eslint/parser": "4.28.3",
-    "browserslist": "4.16.6",
-    "caniuse-lite": "1.0.30001245",
+    "@types/ws": "8.2.2",
+    "@typescript-eslint/eslint-plugin": "5.8.1",
+    "@typescript-eslint/parser": "5.8.1",
+    "browserslist": "4.19.1",
+    "caniuse-lite": "1.0.30001294",
     "circular-dependency-plugin": "5.2.2",
     "codelyzer": "6.0.2",
-    "copy-webpack-plugin": "9.0.1",
-    "css-loader": "5.2.6",
-    "cssnano": "5.0.6",
-    "entities": "2.2.0",
-    "eslint": "7.30.0",
-    "eslint-config-airbnb-typescript": "12.3.1",
-    "eslint-plugin-import": "2.23.4",
-    "eslint-plugin-jsx-a11y": "6.4.1",
-    "eslint-webpack-plugin": "2.5.4",
+    "copy-webpack-plugin": "10.2.0",
+    "css-loader": "6.5.1",
+    "cssnano": "5.0.14",
+    "entities": "3.0.1",
+    "eslint": "8.6.0",
+    "eslint-config-airbnb-typescript": "16.1.0",
+    "eslint-plugin-import": "2.25.3",
+    "eslint-plugin-jsx-a11y": "6.5.1",
+    "eslint-webpack-plugin": "3.1.1",
     "file-loader": "6.2.0",
     "html-loader": "2.1.2",
-    "html-webpack-plugin": "5.3.2",
+    "html-webpack-plugin": "5.5.0",
     "ignore-loader": "0.1.2",
-    "istanbul-instrumenter-loader": "3.0.1",
-    "jasmine-core": "3.8.0",
-    "karma": "6.3.4",
+    "jasmine-core": "3.10.1",
+    "karma": "6.3.9",
     "karma-chrome-launcher": "3.1.0",
     "karma-cli": "2.0.0",
     "karma-coverage-istanbul-reporter": "3.0.3",
@@ -118,33 +120,34 @@
     "karma-mocha-reporter": "2.2.5",
     "karma-sourcemap-loader": "0.3.8",
     "karma-webpack": "5.0.0",
-    "mini-css-extract-plugin": "2.1.0",
+    "mini-css-extract-plugin": "2.4.5",
     "optimize-css-assets-webpack-plugin": "6.0.1",
     "postcss-import": "14.0.2",
-    "postcss-loader": "6.1.1",
-    "postcss-preset-env": "6.7.0",
+    "postcss-loader": "6.2.1",
+    "postcss-preset-env": "7.1.0",
     "raw-loader": "4.0.2",
     "resize-observer-polyfill": "1.5.1",
     "rimraf": "3.0.2",
-    "sass": "1.35.2",
-    "sass-loader": "12.1.0",
-    "style-loader": "3.1.0",
-    "stylelint": "13.13.1",
-    "stylelint-config-standard": "22.0.0",
-    "stylelint-scss": "3.19.0",
-    "stylelint-webpack-plugin": "2.2.2",
+    "sass": "1.45.2",
+    "sass-loader": "12.4.0",
+    "style-loader": "3.3.1",
+    "stylelint": "14.2.0",
+    "stylelint-config-standard": "24.0.0",
+    "stylelint-config-standard-scss": "^3.0.0",
+    "stylelint-scss": "4.1.0",
+    "stylelint-webpack-plugin": "3.1.0",
     "sugarss": "4.0.1",
-    "terser": "5.7.1",
-    "terser-webpack-plugin": "5.1.4",
-    "ts-loader": "9.2.3",
-    "tsconfig-paths-webpack-plugin": "3.5.1",
+    "terser": "5.10.0",
+    "terser-webpack-plugin": "5.3.0",
+    "ts-loader": "9.2.6",
+    "tsconfig-paths-webpack-plugin": "3.5.2",
     "typemoq": "2.1.0",
-    "typescript": "4.3.5",
-    "underscore": "1.13.1",
-    "webpack": "5.38.1",
-    "webpack-bundle-analyzer": "4.4.2",
-    "webpack-cli": "4.7.2",
-    "webpack-dev-server": "3.11.2",
+    "typescript": "4.5.4",
+    "underscore": "1.13.2",
+    "webpack": "5.65.0",
+    "webpack-bundle-analyzer": "4.5.0",
+    "webpack-cli": "4.9.1",
+    "webpack-dev-server": "4.7.2",
     "webpack-filter-warnings-plugin": "1.2.1"
   }
 }