Update to Stencil 4.28.2, TypeScript 5.8.2 and Vite 6.2.1

package.json

@@ -49,7 +49,7 @@
   "devDependencies": {
     "@rollup/plugin-terser": "^0.4.4",
     "@stencil-community/eslint-plugin": "~0.7.1",
-    "@stencil/core": "~4.16.0",
+    "@stencil/core": "~4.28.2",
     "@stencil/react-output-target": "~0.5.3",
     "@stencil/sass": "~3.0.11",
     "@types/hast": "^3.0.4",
@@ -70,8 +70,8 @@
     "lint-staged": "~13.0.0",
     "prettier": "~2.8.8",
     "puppeteer": "~22.6.5",
-    "typescript": "~5.4.5",
-    "vite": "^5.2.10"
+    "typescript": "~5.8.2",
+    "vite": "~6.2.1"
   },
   "husky": {
     "hooks": {

src/common/utils.ts

@@ -142,7 +142,7 @@ export const inBetween = (x: number, y: number, z: number) => x <= y && y <= z;
 
 let resetDragImage;
 
-/* @__PURE__ */ if (!window.Image) {
+if (!window.Image) {
   resetDragImage = "test";
 }
 

src/fix-broken-hydrate-on-load.ts

@@ -0,0 +1,15 @@
+// This is a WA to fix a breaking change that StencilJS did in the patch tag: 4.25.2
+// https://github.com/stenciljs/core/issues/6091
+window.addEventListener(
+  "appload",
+  () => {
+    // Ensure we are not in a server environment
+    if (typeof window !== "undefined") {
+      // Wait until the next frame to perform the layout update
+      requestAnimationFrame(() =>
+        document.documentElement.classList.add("hydrated")
+      );
+    }
+  },
+  { once: true }
+);

stencil.config.optimized-dev.ts

@@ -7,6 +7,7 @@ const buildReact = argv.includes("--react");
 
 export const config: Config = {
   namespace: defaultConfig.namespace,
+  globalScript: "src/fix-broken-hydrate-on-load.ts",
   outputTargets: defaultConfig.outputTargets!.filter(
     output => output.type === "www" || buildReact
   ),

stencil.config.optimized-test-watch.ts

@@ -7,6 +7,7 @@ const buildReact = argv.includes("--react");
 
 export const config: Config = {
   namespace: defaultConfig.namespace,
+  globalScript: "src/fix-broken-hydrate-on-load.ts",
   outputTargets: defaultConfig.outputTargets!.filter(
     output => output.type === "www" || buildReact
   ),

stencil.config.ts

@@ -41,6 +41,7 @@ export const config: Config = {
   namespace: "chameleon",
   outputTargets,
   plugins: [sass()],
+  globalScript: "src/fix-broken-hydrate-on-load.ts",
   extras: {
     // Enabling this flag will allow downstream projects that consume a Stencil
     // library and use a bundler such as Vite to lazily load the Stencil
@@ -50,7 +51,7 @@ export const config: Config = {
   testing: {
     browserArgs: ["--no-sandbox", "--disable-setuid-sandbox"],
     verbose: true,
-    browserHeadless: "new",
+    browserHeadless: "shell",
     testPathIgnorePatterns: [
       "node_modules/",
       "src/testing/constants.e2e.ts",

tsconfig-optimized-dev.json

@@ -38,11 +38,11 @@
     "src/deprecated-components/suggest/",
     "src/deprecated-components/test/",
     "src/deprecated-components/tree/",
-    "src/deprecated-components/tree-item/"
+    "src/deprecated-components/tree-item/",
     // "src/deprecated-components/window/"
 
     // "src/components/code-editor/",
     // "src/components/code-diff-editor/",
-    // "src/components/gx-grid/"
+    "src/components/gx-grid/"
   ]
 }