Update to Vite 5 (#63, #64)

Co-authored-by: Antonia van Eek <[email protected]>

.changeset/gentle-spies-repair.md

@@ -0,0 +1,6 @@
+---
+"@open-pioneer/build-common": patch
+"@open-pioneer/vite-plugin-pioneer": patch
+---
+
+Update zod-validation-error to 3.x

.changeset/mean-radios-retire.md

@@ -0,0 +1,5 @@
+---
+"@open-pioneer/vite-plugin-pioneer": major
+---
+
+Switch to `type`: `module`

.changeset/nervous-tomatoes-cover.md

@@ -0,0 +1,9 @@
+---
+"@open-pioneer/tag-current-versions": patch
+"@open-pioneer/build-package-cli": patch
+"@open-pioneer/build-package": patch
+"@open-pioneer/build-common": patch
+"@open-pioneer/vite-plugin-pioneer": patch
+---
+
+Update dependencies

.changeset/seven-flies-enjoy.md

@@ -0,0 +1,5 @@
+---
+"@open-pioneer/vite-plugin-pioneer": major
+---
+
+Add support for vite 5.

.changeset/sour-jars-drive.md

@@ -0,0 +1,5 @@
+---
+"@open-pioneer/build-package": patch
+---
+
+Update postcss to 16.x

.husky/pre-commit

@@ -1,11 +1,8 @@
-#!/usr/bin/env sh
 if [ "$NO_VERIFY" ]; then
     echo 'pre-commit hook skipped' 1>&2
     exit 0
 fi
 
-. "$(dirname -- "$0")/_/husky.sh"
-
 echo '--- run linting --- '
 pnpm run lint
 

README.md

@@ -6,6 +6,22 @@ This package contains build tools required by the open pioneer framework.
 
 ## Development Notes
 
+### Running tests locally
+
+- Build all packages (or start their dev mode):
+
+  ```sh
+  # Builds all packages
+  $ pnpm run build  
+
+  # Or, in the package directory:
+  $ cd packages/...
+  $ pnpm dev
+  ```
+
+- Run `pnpm install` to link packages (and the CLI tool used by integration tests)
+- Run `pnpm test`
+
 ### Windows users
 
 If you're developing the build tools on windows, you will likely have to Window's support für symbolic links.

integration-tests/cli-tests/package.json

@@ -5,18 +5,18 @@
         "@chakra-ui/icons": "^2.1.1",
         "@open-pioneer/build-package-cli": "workspace:^",
         "@open-pioneer/build-support": "workspace:^",
-        "@open-pioneer/react-utils": "^0.1.0",
+        "@open-pioneer/react-utils": "^0.2.0",
         "@open-pioneer/vite-plugin-pioneer": "workspace:^",
         "@types/proj4": "^2.5.5",
-        "@types/react-dom": "^18.2.18",
-        "@types/uuid": "^9.0.7",
+        "@types/react-dom": "^18.3.0",
+        "@types/uuid": "^9.0.8",
         "chakra-react-select": "^4.7.6",
         "classnames": "^2.5.1",
         "fast-glob": "^3.3.2",
         "fs-extra": "^11.2.0",
-        "ol": "^8.2.0",
-        "proj4": "^2.10.0",
-        "react-dom": "^18.2.0",
+        "ol": "^9.1.0",
+        "proj4": "^2.11.0",
+        "react-dom": "^18.3.1",
         "react-select": "^5.8.0",
         "react-use": "^17.5.0",
         "uuid": "^9.0.1"

package.json

@@ -22,22 +22,22 @@
     },
     "devDependencies": {
         "@changesets/cli": "^2.27.1",
-        "@types/node": "^18.19.9",
-        "@typescript-eslint/eslint-plugin": "^6.19.1",
-        "@typescript-eslint/parser": "^6.19.1",
-        "esbuild": "^0.19.12",
-        "eslint": "^8.56.0",
+        "@types/node": "^18.19.33",
+        "@typescript-eslint/eslint-plugin": "^7.8.0",
+        "@typescript-eslint/parser": "^7.8.0",
+        "esbuild": "^0.21.2",
+        "eslint": "^8.57.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-import-resolver-typescript": "^3.6.1",
         "eslint-plugin-header": "^3.1.1",
         "eslint-plugin-import": "^2.29.1",
-        "eslint-plugin-unused-imports": "^3.0.0",
-        "husky": "^8.0.3",
-        "prettier": "^3.2.4",
-        "rimraf": "^5.0.5",
-        "typescript": "^5.3.3",
-        "vite": "^4.5.3",
-        "vitest": "^0.34.6"
+        "eslint-plugin-unused-imports": "^3.2.0",
+        "husky": "^9.0.11",
+        "prettier": "^3.2.5",
+        "rimraf": "^5.0.7",
+        "typescript": "^5.4.5",
+        "vite": "^5.2.11",
+        "vitest": "^1.6.0"
     },
     "engines": {
         "node": ">= 18",
@@ -53,6 +53,11 @@
         },
         "auditConfig": {
             "ignoreCves": []
+        },
+        "peerDependencyRules": {
+            "allowedVersions": {
+                "@open-pioneer/chakra-integration>framer-motion": ">=4.0.0"
+            }
         }
     }
 }

packages/build-common/package.json

@@ -32,13 +32,13 @@
     ],
     "devDependencies": {
         "@open-pioneer/build-support": "workspace:^",
-        "@types/semver": "^7.5.6",
+        "@types/semver": "^7.5.8",
         "build-tools": "workspace:*"
     },
     "dependencies": {
-        "semver": "^7.5.4",
-        "zod": "^3.22.4",
-        "zod-validation-error": "^2.1.0"
+        "semver": "^7.6.2",
+        "zod": "^3.23.8",
+        "zod-validation-error": "^3.0.0"
     },
     "engines": {
         "node": ">= 18"

packages/build-common/src/buildConfig/loadBuildConfig.test.ts

@@ -14,12 +14,12 @@ describe("loadBuildConfig", function () {
 
     it("throws an error if a config file does not exist", async function () {
         const path = resolve(TEST_DATA_DIR, "does-not-exist.mjs");
-        await expect(loadBuildConfig(path)).rejects.toMatch(/does not exist/);
+        await expect(loadBuildConfig(path)).rejects.toThrowError(/does not exist/);
     });
 
     it("throws an error if the config file does not have a default export", async function () {
         const path = resolve(TEST_DATA_DIR, "build-config-without-export.mjs");
-        await expect(loadBuildConfig(path)).rejects.toMatch(/must provide a default export/);
+        await expect(loadBuildConfig(path)).rejects.toThrowError(/must provide a default export/);
     });
 
     it("throws an error if the config file does not match the schema", async function () {

packages/build-common/src/packageMetadata/v1.test.ts

@@ -152,7 +152,7 @@ describe("packageMetadata v1", function () {
             packageFormatVersion: "1.0.9999999"
         };
         expect(() => serializePackageMetadata(metadata)).toThrowErrorMatchingInlineSnapshot(
-            "\"Invalid package metadata version '1.0.9999999': version should either be omitted or be equal to the current version.\""
+            `[Error: Invalid package metadata version '1.0.9999999': version should either be omitted or be equal to the current version.]`
         );
     });
 });

packages/build-common/src/packageMetadata/versionUtils.test.ts

@@ -28,10 +28,10 @@ describe("canParse", function () {
     it("throws for invalid versions", function () {
         // currentVersion comes from a constant and is assumed to be always valid, whereas serializedVersion comes from user input
         expect(() => canParse("1.0.0", "asd")).toThrowErrorMatchingInlineSnapshot(
-            "\"Serialized metadata version is invalid: 'asd'. Expected a valid semver.\""
+            `[Error: Serialized metadata version is invalid: 'asd'. Expected a valid semver.]`
         );
         expect(() => canParse("asd", "1.2.3")).toThrowErrorMatchingInlineSnapshot(
-            '"Internal error: invalid current version"'
+            `[Error: Internal error: invalid current version]`
         );
     });
 });

packages/build-common/src/runtimeSupport/index.test.ts

@@ -14,17 +14,17 @@ describe("parseVirtualModule", function () {
     it("throws for unknown modules under the open pioneer prefix", function () {
         expect(() =>
             RuntimeSupport.parseVirtualModule("open-pioneer:foo")
-        ).toThrowErrorMatchingInlineSnapshot("\"Unsupported module id 'open-pioneer:foo'.\"");
+        ).toThrowErrorMatchingInlineSnapshot(`[Error: Unsupported module id 'open-pioneer:foo'.]`);
     });
 });
 
 describe("generateReactHooks", function () {
     it("generates react hooks with unresolved id by default", function () {
         const code = RuntimeSupport.generateReactHooks("mypackage-name");
         expect(code).toMatchInlineSnapshot(`
-          "import { useServiceInternal, useServicesInternal, usePropertiesInternal, useIntlInternal } from \\"@open-pioneer/runtime/react-integration\\";
+          "import { useServiceInternal, useServicesInternal, usePropertiesInternal, useIntlInternal } from "@open-pioneer/runtime/react-integration";
 
-          const PACKAGE_NAME = \\"mypackage-name\\";
+          const PACKAGE_NAME = "mypackage-name";
           export const useService = /*@__PURE__*/ useServiceInternal.bind(undefined, PACKAGE_NAME);
           export const useServices = /*@__PURE__*/ useServicesInternal.bind(undefined, PACKAGE_NAME);
           export const useProperties = /*@__PURE__*/ usePropertiesInternal.bind(undefined, PACKAGE_NAME);
@@ -38,9 +38,9 @@ describe("generateReactHooks", function () {
             "custom-react-hooks-id/a/b/c"
         );
         expect(code).toMatchInlineSnapshot(`
-          "import { useServiceInternal, useServicesInternal, usePropertiesInternal, useIntlInternal } from \\"custom-react-hooks-id/a/b/c\\";
+          "import { useServiceInternal, useServicesInternal, usePropertiesInternal, useIntlInternal } from "custom-react-hooks-id/a/b/c";
 
-          const PACKAGE_NAME = \\"mypackage-name\\";
+          const PACKAGE_NAME = "mypackage-name";
           export const useService = /*@__PURE__*/ useServiceInternal.bind(undefined, PACKAGE_NAME);
           export const useServices = /*@__PURE__*/ useServicesInternal.bind(undefined, PACKAGE_NAME);
           export const useProperties = /*@__PURE__*/ usePropertiesInternal.bind(undefined, PACKAGE_NAME);

packages/build-package-cli/package.json

@@ -32,7 +32,7 @@
     "dependencies": {
         "@open-pioneer/build-package": "workspace:^",
         "chalk": "^5.3.0",
-        "commander": "^11.1.0"
+        "commander": "^12.0.0"
     },
     "devDependencies": {
         "build-tools": "workspace:*"

packages/build-package/package.json

@@ -47,11 +47,11 @@
         "@open-pioneer/build-support": "workspace:^",
         "chalk": "^5.3.0",
         "debug": "^4.3.4",
-        "esbuild": "^0.19.12",
+        "esbuild": "^0.21.2",
         "fast-glob": "^3.3.2",
         "fs-extra": "^11.2.0",
         "postcss": "^8.4.33",
-        "postcss-import": "^15.1.0",
+        "postcss-import": "^16.0.0",
         "rollup": "^4.9.6",
         "rollup-plugin-esbuild": "^6.1.1"
     },
@@ -60,11 +60,10 @@
         "@types/debug": "^4.1.12",
         "@types/fs-extra": "^11.0.4",
         "@types/postcss-import": "^14.0.3",
-        "@types/react": "^18.2.48",
+        "@types/react": "^18.3.2",
         "build-tools": "workspace:*",
-        "sass": "^1.70.0",
-        "ts-essentials": "^9.4.1",
-        "typescript": "^5.3.3"
+        "sass": "^1.77.1",
+        "typescript": "^5.4.5"
     },
     "engines": {
         "node": ">= 18"

packages/build-package/src/buildCss.test.ts

@@ -54,16 +54,16 @@ describe("buildCss", function () {
         */
         expect(readText(resolve(outputDirectory, "myStyles.css"))).toMatchInlineSnapshot(`
           "
-          @import \\"ol/ol.css\\";
-          @import \\"ol/ol.css\\";
-          @import \\"https://example.com/styles.css\\";
-          @import \\"cssrecipes-defaults\\";
-          @import \\"normalize.css\\";
-          @import \\"foo.css\\";
+          @import "ol/ol.css";
+          @import "ol/ol.css";
+          @import "https://example.com/styles.css";
+          @import "cssrecipes-defaults";
+          @import "normalize.css";
+          @import "foo.css";
           @import url(foo-1.css);
-          @import url(\\"foo-2.css\\");
-          @import \\"bar.css\\" (min-width: 25em);
-          @import \\"baz.css\\" layer(baz-layer);
+          @import url("foo-2.css");
+          @import "bar.css" (min-width: 25em);
+          @import "baz.css" layer(baz-layer);
           /* This import must not be bundled because it points to an external dependency */
           .foo {
               color: white;
@@ -141,7 +141,7 @@ describe("buildCss", function () {
               color: green;
           }
           ",
-            "@import \\"./dir/importedStyles.css\\";
+            "@import "./dir/importedStyles.css";
 
           .main {
               padding: 1;
@@ -201,14 +201,14 @@ describe("buildCss", function () {
             https://sass-lang.com/documentation/at-rules/import#plain-css-imports
         */
         expect(readText(resolve(outputDirectory, "main.css"))).toMatchInlineSnapshot(`
-          "@import \\"ol/ol.css\\";
-          @import \\"ol/ol.css\\";
-          @import \\"https://example.com/styles.css\\";
-          @import \\"normalize.css\\";
-          @import \\"foo.css\\";
+          "@import "ol/ol.css";
+          @import "ol/ol.css";
+          @import "https://example.com/styles.css";
+          @import "normalize.css";
+          @import "foo.css";
           @import url(foo-1.css);
-          @import url(\\"foo-2.css\\");
-          @import \\"bar.css\\" (min-width: 25em);
+          @import url("foo-2.css");
+          @import "bar.css" (min-width: 25em);
           .from-local-css-module {
               color: white;
           }
@@ -277,8 +277,8 @@ describe("buildCss", function () {
               height: 100%;
           }
           ",
-            "@import \\"./dir/test_module\\";
-          @import \\"./cssFile.css\\";
+            "@import "./dir/test_module";
+          @import "./cssFile.css";
 
           .a {
               .b {