Upgrade to Stencil 4 and add support for Typescript 4.6+

package.json

@@ -59,12 +59,11 @@
   "devDependencies": {
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.8.0",
-    "@stencil/core": "^2.6.0",
-    "@stencil/router": "^1.0.1",
-    "@stencil/sass": "^1.4.1",
+    "@limetech/stencil-router": "^1.0.1",
+    "@stencil/core": "4.38.0",
+    "@stencil/sass": "3.2.2",
     "@types/jest": "25.2.3",
     "@types/prismjs": "^1.16.5",
-    "@types/puppeteer": "1.19.0",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
     "copyfiles": "^2.3.0",
@@ -76,12 +75,12 @@
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-sonarjs": "^0.25.1",
     "globals": "^15.9.0",
-    "jest": "^27.0.3",
-    "jest-cli": "24.9.0",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
     "prettier": "^3.3.3",
     "prismjs": "^1.20.0",
-    "puppeteer": "1.19.0",
-    "rollup-plugin-node-polyfills": "^0.2.1",
+    "puppeteer": "^22.15.0",
+    "rollup-plugin-polyfill-node": "^0.13.0",
     "tmp": "^0.1.0",
     "yargs": "^15.4.0"
   },
@@ -99,7 +98,7 @@
     "remark-parse": "^8.0.2",
     "remark-parse-yaml": "0.0.3",
     "remark-rehype": "^7.0.0",
-    "typedoc": "^0.17.8",
+    "typedoc": "^0.23.28",
     "typescript": "^4.7.4",
     "unified": "^9.0.0",
     "unist-util-flatmap": "^1.0.0",

src/components/app/app.scss

@@ -1,7 +1,7 @@
-@import '../../style/reset.scss';
-@import '../../style/variables.scss';
-@import '../../style/functions.scss';
-@import '../../style/loading.scss';
+@use '../../style/reset.scss';
+@use '../../style/variables.scss';
+@use '../../style/functions.scss';
+@use '../../style/loading.scss';
 
 :host {
     display: block;
@@ -10,24 +10,24 @@
 }
 
 main {
-    padding: pxToRem(20) pxToRem(32);
+    padding: functions.pxToRem(20) functions.pxToRem(32);
 
     margin-left: var(--width-nav-panel);
 
     kompendium-guide {
         display: block;
         width: 100%;
-        max-width: pxToRem(960);
+        max-width: functions.pxToRem(960);
     }
 }
 
-@media (max-width: $break-point-small) {
+@media (max-width: variables.$break-point-small) {
     main {
-        padding-top: pxToRem(42);
+        padding-top: functions.pxToRem(42);
         margin-left: 0;
     }
 }
 
-@media (max-width: $break-point-mini) {
+@media (max-width: variables.$break-point-mini) {
     // In case we need to add things here
 }

src/components/app/app.tsx

@@ -4,6 +4,9 @@ import { setTypes } from '../markdown/markdown-types';
 import Fuse from 'fuse.js';
 import { PropsFactory } from '../playground/playground.types';
 
+// Import router components to trigger Stencil bundling
+import '@limetech/stencil-router';
+
 @Component({
     tag: 'kompendium-app',
     styleUrl: 'app.scss',
@@ -104,15 +107,14 @@ export class App {
                     index={this.index}
                 />
                 <main role="main">
-                    <stencil-router historyType="hash">
+                    <stencil-router>
                         <stencil-route-switch scrollTopOffset={0}>
                             <stencil-route
                                 url="/"
                                 component="kompendium-markdown"
                                 componentProps={{
                                     text: this.data.readme,
                                 }}
-                                exact={true}
                             />
                             <stencil-route
                                 url="/component/:name/:section?"

src/components/code/code.scss

@@ -1,5 +1,5 @@
-@import '../../style/mixins.scss';
-@import '../../style/functions.scss';
+@use '../../style/mixins.scss';
+@use '../../style/functions.scss';
 @import '../../../node_modules/prismjs/plugins/toolbar/prism-toolbar.css';
 
 :host {
@@ -21,7 +21,7 @@ div.code-toolbar {
     height: 100%;
 
     > .toolbar {
-        padding-right: pxToRem(4);
+        padding-right: functions.pxToRem(4);
 
         .toolbar-item {
             button,
@@ -30,13 +30,13 @@ div.code-toolbar {
             }
             button {
                 cursor: pointer;
-                @include is-elevated-clickable();
+                @include mixins.is-elevated-clickable();
 
                 background-color: rgb(var(--kompendium-contrast-100));
                 color: rgb(var(--kompendium-contrast-1100));
-                padding: pxToRem(2) pxToRem(8);
-                border-radius: pxToRem(6);
-                font-size: pxToRem(12);
+                padding: functions.pxToRem(2) functions.pxToRem(8);
+                border-radius: functions.pxToRem(6);
+                font-size: functions.pxToRem(12);
             }
         }
     }
@@ -52,7 +52,7 @@ https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+cli
 code,
 pre {
     font-family: var(--kompendium-font-code);
-    font-size: pxToRem(13);
+    font-size: functions.pxToRem(13);
 }
 code[class*='language-'],
 pre[class*='language-'] {
@@ -77,12 +77,13 @@ pre[class*='language-'] {
 
 /* Code blocks */
 pre[class*='language-'] {
-    padding: pxToRem(24) pxToRem(16) pxToRem(32) pxToRem(16);
+    padding: functions.pxToRem(24) functions.pxToRem(16) functions.pxToRem(32)
+        functions.pxToRem(16);
     position: relative;
     margin: 0;
     overflow: auto;
     flex-grow: 1;
-    border-radius: pxToRem(9);
+    border-radius: functions.pxToRem(9);
 }
 
 :not(pre) > code[class*='language-'],

src/components/component/component.scss

@@ -1,9 +1,9 @@
-@import '../../style/reset.scss';
-@import '../../style/variables.scss';
-@import '../../style/mixins.scss';
-@import '../../style/functions.scss';
-@import '../../style/typography.scss';
-@import '../../style/global-layout-rules.scss';
+@use '../../style/reset.scss';
+@use '../../style/variables.scss';
+@use '../../style/mixins.scss';
+@use '../../style/functions.scss';
+@use '../../style/typography.scss';
+@use '../../style/global-layout-rules.scss';
 
 :host {
     display: block;

src/components/component/component.tsx

@@ -4,7 +4,7 @@ import {
     JsonDocsComponent,
     JsonDocsTag,
 } from '@stencil/core/internal';
-import { MatchResults } from '@stencil/router';
+import { MatchResults } from '@limetech/stencil-router';
 import { PropertyList } from './templates/props';
 import { EventList } from './templates/events';
 import { MethodList } from './templates/methods';

src/components/darkmode-switch/darkmode-switch.scss

@@ -1,5 +1,5 @@
-@import '../../style/functions.scss';
-@import '../../style/mixins.scss';
+@use '../../style/functions.scss';
+@use '../../style/mixins.scss';
 
 :host {
     --toggle-size: 1.25rem;
@@ -9,7 +9,7 @@
 }
 
 .mode-toggle {
-    margin: pxToRem(12);
+    margin: functions.pxToRem(12);
     position: relative;
     width: var(--toggle-size);
     height: var(--toggle-size);
@@ -66,8 +66,8 @@
     &:after {
         content: '';
         display: block;
-        height: pxToRem(6);
-        width: pxToRem(2);
+        height: functions.pxToRem(6);
+        width: functions.pxToRem(2);
         border-radius: var(--toggle-size);
         background-color: rgba(var(--kompendium-color-orange-light), 1);
 
@@ -78,17 +78,17 @@
     }
 
     &:before {
-        top: pxToRem(-8);
+        top: functions.pxToRem(-8);
     }
     &:after {
-        bottom: pxToRem(-8);
+        bottom: functions.pxToRem(-8);
     }
 
     &.three,
     &.four {
         &:before,
         &:after {
-            height: pxToRem(4);
+            height: functions.pxToRem(4);
         }
     }
 }
@@ -102,7 +102,7 @@ input[type='checkbox'] {
 
     cursor: pointer;
     border-radius: 0.125rem;
-    @include visualize-keyboard-focus();
+    @include mixins.visualize-keyboard-focus();
 
     &:not(:checked) {
         + .mode-visualization {
@@ -112,15 +112,20 @@ input[type='checkbox'] {
                     1
                 );
                 box-shadow:
-                    0 0 pxToRem(8) pxToRem(2)
+                    0 0 functions.pxToRem(8) functions.pxToRem(2)
                         rgba(var(--kompendium-color-orange-light), 0.8),
-                    0 0 pxToRem(4) pxToRem(3) rgb(var(--kompendium-color-white));
+                    0 0 functions.pxToRem(4) functions.pxToRem(3)
+                        rgb(var(--kompendium-color-white));
                 &:after {
                     background-color: rgba(
                         var(--kompendium-color-orange-default),
                         1
                     );
-                    transform: translate3d(pxToRem(16), pxToRem(-16), 0);
+                    transform: translate3d(
+                        functions.pxToRem(16),
+                        functions.pxToRem(-16),
+                        0
+                    );
                 }
             }
             .ray {
@@ -152,12 +157,17 @@ input[type='checkbox'] {
             .circle {
                 background-color: rgba(var(--kompendium-contrast-1700), 0.7);
                 box-shadow:
-                    0 0 pxToRem(8) pxToRem(2)
+                    0 0 functions.pxToRem(8) functions.pxToRem(2)
                         rgba(var(--kompendium-color-white), 0.4),
-                    0 0 pxToRem(4) pxToRem(2) rgb(var(--kompendium-color-black));
+                    0 0 functions.pxToRem(4) functions.pxToRem(2)
+                        rgb(var(--kompendium-color-black));
 
                 &:after {
-                    transform: translate3d(pxToRem(4), pxToRem(-4), 0);
+                    transform: translate3d(
+                        functions.pxToRem(4),
+                        functions.pxToRem(-4),
+                        0
+                    );
                     background-color: rgb(
                         var(--kompendium-contrast-400)
                     ); // same as sidebar in dark mode

src/components/debug/debug.tsx

@@ -4,7 +4,7 @@ import {
     JsonDocsComponent,
     JsonDocsTag,
 } from '@stencil/core/internal';
-import { MatchResults } from '@stencil/router';
+import { MatchResults } from '@limetech/stencil-router';
 import { PropsFactory } from '../playground/playground.types';
 
 @Component({

src/components/markdown/markdown.scss

@@ -1,6 +1,6 @@
-@import '../proplist/proplist.scss';
-@import '../../style/colors.scss';
-@import '../../style/mixins.scss';
+@use '../proplist/proplist.scss';
+@use '../../style/colors.scss';
+@use '../../style/mixins.scss';
 
 .admonition {
     --size-of-admonition-icon: 2.5rem;