[WC-1415]: Update momentjs in calendar web

packages/customWidgets/calendar-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+-   Update moment.js to version 2.29.4
+
 ## [1.0.13] - 2021-06-24
 
 ### Removed

packages/customWidgets/calendar-web/package.json

@@ -1,55 +1,73 @@
 {
   "name": "calendar-web",
   "widgetName": "Calendar",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "Display and manage calendar events",
   "copyright": "© Mendix Technology BV 2022. All rights reserved.",
+  "license": "Apache-2.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/mendix/web-widgets.git"
   },
-  "testProject": {
-    "githubUrl": "https://github.com/mendix/testProjects",
-    "branchName": "calendar-web"
+  "mxpackage": {
+    "name": "Calendar",
+    "type": "widget",
+    "mpkName": "Calendar.mpk"
   },
-  "license": "Apache-2.0",
   "marketplace": {
     "minimumMXVersion": "7.14.1",
-    "appNumber": 107954
+    "appNumber": 107954,
+    "appName": "Calendar"
+  },
+  "testProject": {
+    "githubUrl": "https://github.com/mendix/testProjects",
+    "branchName": "calendar-web"
   },
+  "packagePath": "com.mendix.widget.custom",
   "scripts": {
-    "start": "utils-react-widgets start",
-    "dev": "utils-react-widgets dev",
-    "format": "prettier --config \"../../prettier.config.js\" --write \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
-    "test": "npm run test:unit",
-    "test:unit": "jest --config ../../../scripts/test/jest.web.config.js",
-    "pretest:e2e": "npm run release && node ../../../scripts/test/updateAtlas.js --latest-atlas",
-    "test:e2e": "pluggable-widgets-tools test:e2e:web:cypress --remove-atlas-files",
-    "test:e2e:local": "pluggable-widgets-tools test:e2e:web:cypress:local -- --config-file ../../../configs/e2e/cypress/cypress.json",
+    "build": "ts-node --project scripts/tsconfig.json scripts/build.ts development",
+    "create-gh-release": "rui-create-gh-release",
+    "format": "pluggable-widgets-tools format",
     "lint": "eslint --config ../../../.eslintrc.js --ext .jsx,.js,.ts,.tsx src/",
-    "lint:fix": "npm run lint -- --fix",
-    "build": "utils-react-widgets build",
-    "release": "utils-react-widgets release"
+    "publish-marketplace": "rui-publish-marketplace",
+    "release": "ts-node --project scripts/tsconfig.json scripts/build.ts production",
+    "update-changelog": "rui-update-changelog-widget",
+    "verify": "rui-verify-package-format"
   },
   "config": {
     "mendixHost": "http://localhost:8080",
     "developmentPort": 3000
   },
   "devDependencies": {
-    "@mendix/custom-widgets-utils-internal": "workspace:*",
-    "@mendix/pluggable-widgets-tools": ">=9.0.0",
-    "@types/classnames": "^2.2.6",
+    "@babel/core": "^7.20.2",
+    "@mendix/pluggable-widgets-tools": "^9.18.0",
+    "@mendix/release-utils-internal": "workspace:*",
     "@types/date-arithmetic": "^3.1.2",
+    "@types/react": "^17.0.52",
     "@types/react-big-calendar": "0.20.20",
-    "@types/react-dnd": "^3.0.2",
-    "@types/react-dnd-html5-backend": "^3.0.2",
+    "@types/react-dom": "^17.0.18",
+    "babel-loader": "^8.2.1",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.7.2",
     "eslint": "^7.20.0",
-    "jest": "^26.6.1"
+    "fork-ts-checker-webpack-plugin": "^7.2.13",
+    "jest": "^26.6.1",
+    "mendix-client": "^7.15.8",
+    "react": "~17.0.2",
+    "react-dom": "~17.0.2",
+    "sass": "^1.56.1",
+    "sass-loader": "^13.2.0",
+    "style-loader": "^3.3.1",
+    "to-string-loader": "^1.1.6",
+    "ts-loader": "^9.4.1",
+    "typescript": "4.5.4",
+    "webpack": "^5.3.2",
+    "webpack-cli": "^4.1.0"
   },
   "dependencies": {
     "classnames": "^2.2.6",
     "date-arithmetic": "^3.1.0",
-    "moment": "^2.24.0",
+    "moment": "^2.29.4",
     "react-big-calendar": "0.19.2",
     "react-dnd": "2.6.0",
     "react-dnd-html5-backend": "^5.0.1"

packages/customWidgets/calendar-web/scripts/build.ts

@@ -0,0 +1,42 @@
+import { cp, mkdir, zip, exec } from "@mendix/release-utils-internal/shell";
+import { logStep, removeDist, runWidgetSteps, WidgetStepParams } from "@mendix/release-utils-internal/steps";
+import { dirname, join } from "node:path";
+
+const [, , env] = process.argv;
+const isProd = env === "production";
+const copyToProject = !isProd && process.env.MX_PROJECT_PATH;
+
+async function createMPK({ config }: WidgetStepParams): Promise<void> {
+    logStep("Create mpk");
+    const { paths, output } = config;
+    mkdir("-p", dirname(output.files.mpk));
+    await zip(join(paths.tmp, "widgets"), output.files.mpk);
+}
+
+async function main(): Promise<void> {
+    await runWidgetSteps({
+        packagePath: process.cwd(),
+        steps: [
+            removeDist,
+            async () => {
+                logStep("Bundling");
+                const wpc = isProd ? "webpack.config.prod.js" : "webpack.config.dev.js";
+                await exec(`webpack -c ${wpc}`);
+            },
+            createMPK,
+            async ({ config }) => {
+                if (copyToProject) {
+                    logStep("Copy widget to targetProject");
+                    const dir = join(config.paths.targetProject, "widgets");
+                    mkdir("-p", dir);
+                    cp(config.output.files.mpk, dir);
+                }
+            }
+        ]
+    });
+}
+
+main().catch(err => {
+    console.error(err);
+    process.exit(1);
+});

packages/customWidgets/calendar-web/scripts/tsconfig.json

@@ -0,0 +1,3 @@
+{
+    "extends": "@mendix/release-utils-internal/tsconfig"
+}

packages/customWidgets/calendar-web/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Calendar2" version="1.0.13" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Calendar2" version="1.0.14" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Calendar.xml" />
         </widgetFiles>

packages/customWidgets/calendar-web/tsconfig.json

@@ -1,9 +1,33 @@
 {
-    "extends": "@mendix/custom-widgets-utils-internal/configs/tsconfig.json",
+    "include": ["./src", "./typings"],
     "compilerOptions": {
+        "noEmitOnError": true,
+        "sourceMap": true,
+        "module": "amd",
+        "target": "es5",
+        "lib": ["es2015", "dom"],
+        "types": ["mendix-client", "jest"],
+        "moduleResolution": "node",
+        "declaration": false,
+        "removeComments": true,
+        "noLib": false,
+        "watch": false,
+        "forceConsistentCasingInFileNames": true,
+        "noFallthroughCasesInSwitch": true,
+        "noImplicitAny": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "skipLibCheck": true,
+        "strictNullChecks": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "jsx": "react",
+        "jsxFactory": "createElement",
+        "allowSyntheticDefaultImports": true,
+        "esModuleInterop": true,
         "baseUrl": ".",
         "rootDir": "./",
         "outDir": "dist/tsc/"
     },
-    "exclude": ["dist/", "tests/", "**/*.spec.ts", "node_modules/"]
+    "exclude": ["dist/", "tests/", "**/*.spec.ts", "**/*.specs.ts", "node_modules/"]
 }

packages/customWidgets/calendar-web/webpack.base.dev.js

@@ -0,0 +1,175 @@
+const webpack = require("webpack");
+const { join, resolve } = require("path");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
+const cwd = process.cwd();
+
+const package = require(join(cwd, "package.json"));
+const widgetName = package.widgetName;
+const name = widgetName !== "RangeSlider" ? widgetName.toLowerCase() : widgetName;
+
+const packageName = name;
+const mxHost = "http://localhost:8080";
+const developmentPort = "3000";
+
+const widgetConfig = {
+    context: cwd,
+    entry: join(cwd, `src/components/${widgetName}Container.ts`),
+    output: {
+        path: resolve(cwd, "dist/tmp"),
+        filename: chunkData => {
+            const fileName = chunkData.chunk.name === "main" ? widgetName : "[name]";
+            return `widgets/com/mendix/widget/custom/${name}/${fileName}.js`;
+        },
+        libraryTarget: "umd",
+        publicPath: "/"
+    },
+    devServer: {
+        compress: true,
+        port: developmentPort,
+        hot: true,
+        proxy: [
+            {
+                target: mxHost,
+                context: [`!/widgets/com/mendix/widget/custom/${name}/${widgetName}.ts`],
+                onError(err, req, res) {
+                    if (res && res.writeHead) {
+                        res.writeHead(500, {
+                            "Content-Type": "text/plain"
+                        });
+                        if (err.code === "ECONNREFUSED") {
+                            res.end(
+                                "Please make sure that the Mendix server is running at " +
+                                    mxHost +
+                                    " or change the configuration \n " +
+                                    "> npm config set " +
+                                    packageName +
+                                    ":mendixhost http://host:port"
+                            );
+                        } else {
+                            res.end("Error connecting to Mendix server" + "\n " + JSON.stringify(err, null, 2));
+                        }
+                    }
+                }
+            }
+        ],
+        stats: "errors-only"
+    },
+    resolve: {
+        extensions: [".ts", ".js", ".tsx", ".jsx"],
+        alias: {
+            tests: resolve(cwd, "./tests")
+        }
+    },
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                exclude: /node_modules/,
+                use: [
+                    {
+                        loader: "ts-loader",
+                        options: {
+                            transpileOnly: true
+                        }
+                    }
+                ]
+            },
+            {
+                test: /\.jsx?$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: "babel-loader",
+                    options: {
+                        cacheDirectory: true,
+                        presets: ["@babel/preset-env", "@babel/preset-react"],
+                        plugins: [
+                            ["@babel/plugin-proposal-class-properties", { loose: true }],
+                            ["@babel/plugin-transform-react-jsx", { pragma: "createElement" }]
+                        ]
+                    }
+                }
+            },
+            {
+                test: /\.(sa|sc|c)ss$/,
+                use: [
+                    "style-loader",
+                    "css-loader",
+                    {
+                        loader: "sass-loader",
+                        options: {
+                            implementation: require("sass"),
+                            sassOptions: {
+                                fiber: false
+                            }
+                        }
+                    }
+                ]
+            }
+        ]
+    },
+    mode: "development",
+    devtool: "source-map",
+    externals: ["react", "react-dom"],
+    plugins: [
+        new webpack.HotModuleReplacementPlugin(),
+        new ForkTsCheckerWebpackPlugin(),
+        new CopyWebpackPlugin({
+            patterns: [
+                {
+                    from: join(cwd, "src/**/*.xml").replace(/\\/g, "/"),
+                    toType: "template",
+                    to: "widgets/[name][ext]"
+                }
+            ]
+        })
+    ]
+};
+
+const previewConfig = {
+    entry: resolve(cwd, `./src/${widgetName}.webmodeler.ts`),
+    output: {
+        path: resolve(cwd, "dist/tmp"),
+        filename: `widgets/${widgetName}.webmodeler.js`,
+        libraryTarget: "commonjs"
+    },
+    resolve: {
+        extensions: [".ts", ".js", ".tsx", ".jsx"]
+    },
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                loader: "ts-loader",
+                options: {
+                    compilerOptions: {
+                        module: "CommonJS"
+                    }
+                }
+            },
+            {
+                test: /\.jsx?$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: "babel-loader",
+                    options: {
+                        cacheDirectory: true,
+                        presets: ["@babel/preset-env", "@babel/preset-react"],
+                        plugins: [
+                            ["@babel/plugin-proposal-class-properties", { loose: true }],
+                            ["@babel/plugin-transform-react-jsx", { pragma: "createElement" }]
+                        ]
+                    }
+                }
+            },
+            {
+                test: /\.(sa|sc|c)ss$/,
+                use: ["to-string-loader", "css-loader", "sass-loader"]
+            }
+        ]
+    },
+    mode: "development",
+    externals: ["react", "react-dom"]
+};
+
+module.exports = [widgetConfig, previewConfig];

packages/customWidgets/calendar-web/webpack.config.dev.js

@@ -1,5 +1,5 @@
 const { merge } = require("webpack-merge");
-const baseConfig = require("@mendix/custom-widgets-utils-internal/configs/webpack.config.dev");
+const baseConfig = require("./webpack.base.dev");
 
 const overridingConfig = {
     module: {

packages/customWidgets/calendar-web/webpack.config.prod.js

@@ -1,5 +1,5 @@
 const { merge } = require("webpack-merge");
-const baseConfig = require("@mendix/custom-widgets-utils-internal/configs/webpack.config.dev");
+const baseConfig = require("./webpack.base.dev");
 
 const overridingConfig = {
     module: {