vite and external material

Author: Marko Petzold

.github/workflows/build-publish.yml

@@ -3,7 +3,7 @@ name: Build and Publish to npm and unpkg
 on:
   push:
     tags:
-      - '*'
+      - "*"
 
 jobs:
   build:
@@ -16,7 +16,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: "24"
 
       - name: Install dependencies
         run: npm install --omit-dev --frozen-lockfile

package-lock.json

@@ -4,6 +4,10 @@
     "license": "MIT",
     "author": "widget-sidenav",
     "version": "1.0.10",
+    "engines": {
+        "node": ">=24.9.0",
+        "npm": ">=10.0.2"
+    },
     "type": "module",
     "main": "dist/widget-sidenav.js",
     "types": "dist/src/widget-sidenav.d.ts",
@@ -14,30 +18,28 @@
     ],
     "scripts": {
         "analyze": "cem analyze --litelement",
-        "start": "node rename-material-package.js && concurrently -k -r \"npm run watch\" \"wds\"",
-        "build": "node rename-material-package.js && rollup -c rollup.config.js",
-        "watch": "node rename-material-package.js && rollup -w -c rollup.config.js",
-        "link": "npm link && cd ../RESWARM/frontend && npm link @record-evolution/widget-sidenav",
+        "start": "vite",
+        "build": "vite build",
+        "watch": "vite build --watch",
+        "link": "npm run build && npm link && cd ../RESWARM/frontend && npm link @record-evolution/widget-sidenav",
         "unlink": "npm unlink --global && cd ../RESWARM/frontend && npm unlink @record-evolution/widget-sidenav && npm i @record-evolution/widget-sidenav",
-        "types": "cat src/definition-schema.json | json2ts > src/definition-schema.d.ts",
+        "types": "cat src/definition-schema.json | json2ts --style.tabWidth=4 > src/definition-schema.d.ts",
         "release": "npm run build && npm run types && npm version patch --tag-version-prefix='' && git push && git push --tag && npm run build"
     },
     "dependencies": {
-        "lit": "^3.3.1",
-        "@material/web": "^2.4.0"
+        "lit": "^3.3.2",
+        "tslib": "^2.8.1"
+    },
+    "peerDependencies": {
+        "@material/web": "^2.4.1"
     },
     "devDependencies": {
         "@custom-elements-manifest/analyzer": "^0.10.5",
-        "@rollup/plugin-babel": "^6.0.4",
-        "@rollup/plugin-commonjs": "^28.0.6",
-        "@rollup/plugin-node-resolve": "^16.0.1",
+        "@material/web": "^2.4.1",
         "@rollup/plugin-replace": "^6.0.2",
-        "@rollup/plugin-typescript": "^12.1.4",
-        "@web/dev-server": "^0.4.6",
-        "concurrently": "^9.2.1",
         "json-schema-to-typescript": "^15.0.4",
-        "tslib": "^2.8.1",
-        "typescript": "^5.9.2"
+        "typescript": "5.9.3",
+        "vite": "^7.3.0"
     },
     "repository": {
         "type": "git",

package.json

@@ -38,33 +38,33 @@ export type AddLeadingSlash1 = boolean;
  */
 export type AddTraillingSlash1 = boolean;
 export type NavigationItems = {
-  label?: Label;
-  iconName?: IconName;
-  route?: NavigationRoute;
-  leadingSlash?: AddLeadingSlash1;
-  trailingSlash?: AddTraillingSlash1;
-  [k: string]: unknown;
+    label?: Label;
+    iconName?: IconName;
+    route?: NavigationRoute;
+    leadingSlash?: AddLeadingSlash1;
+    trailingSlash?: AddTraillingSlash1;
+    [k: string]: unknown;
 }[];
 
 export interface InputData {
-  title?: TitleSettings;
-  route?: TitleNavigation;
-  leadingSlash?: AddLeadingSlash;
-  trailingSlash?: AddTraillingSlash;
-  style?: ItemStyle;
-  navItems?: NavigationItems;
-  [k: string]: unknown;
+    title?: TitleSettings;
+    route?: TitleNavigation;
+    leadingSlash?: AddLeadingSlash;
+    trailingSlash?: AddTraillingSlash;
+    style?: ItemStyle;
+    navItems?: NavigationItems;
+    [k: string]: unknown;
 }
 export interface ItemStyle {
-  fontSize?: FontSize;
-  fontWeight?: FontWeight;
-  color?: FontColor;
-  backgroundColor?: BackgroundColor;
-  [k: string]: unknown;
+    fontSize?: FontSize;
+    fontWeight?: FontWeight;
+    color?: FontColor;
+    backgroundColor?: BackgroundColor;
+    [k: string]: unknown;
 }
 export interface FontColor {
-  [k: string]: unknown;
+    [k: string]: unknown;
 }
 export interface BackgroundColor {
-  [k: string]: unknown;
+    [k: string]: unknown;
 }

rename-material-package.js

@@ -0,0 +1,41 @@
+import { defineConfig } from 'vite'
+import { readFileSync } from 'fs'
+import replace from '@rollup/plugin-replace'
+
+const pkg = JSON.parse(readFileSync('./package.json', 'utf-8'))
+
+export default defineConfig({
+    server: {
+        open: '/demo/',
+        port: 8000
+    },
+    resolve: {
+        alias: {
+            tslib: 'tslib/tslib.es6.js'
+        },
+        conditions: ['browser']
+    },
+    define: {
+        'process.env.NODE_ENV': JSON.stringify('production')
+    },
+    plugins: [
+        replace({
+            versionplaceholder: pkg.version,
+            preventAssignment: true
+        })
+    ],
+    build: {
+        lib: {
+            entry: 'src/widget-sidenav.ts',
+            formats: ['es'],
+            fileName: 'widget-sidenav'
+        },
+        sourcemap: true,
+        rollupOptions: {
+            external: [/^lit/, /^@lit/, /^@material\/web/],
+            output: {
+                banner: '/* @license Copyright (c) 2025 IronFlock GmbH. All rights reserved.*/'
+            }
+        }
+    }
+})