build(headless): fix large bundle size

Author: shairez

package.json

@@ -23,8 +23,8 @@
   },
   "packageManager": "[email protected]",
   "devDependencies": {
-    "@builder.io/qwik": "^1.2.12",
-    "@builder.io/qwik-city": "^1.2.12",
+    "@builder.io/qwik": "^1.2.17",
+    "@builder.io/qwik-city": "^1.2.17",
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-angular": "^17.7.0",
     "@commitlint/config-conventional": "^17.7.0",
@@ -82,7 +82,7 @@
     "eslint": "^8.48.0",
     "eslint-config-prettier": "^8",
     "eslint-plugin-cypress": "^2.14.0",
-    "eslint-plugin-qwik": "^1.2.12",
+    "eslint-plugin-qwik": "^1.2.17",
     "eslint-plugin-storybook": "^0.6.13",
     "focus-trap": "7.5.3",
     "husky": "^8.0.3",

packages/kit-headless/package.json

@@ -22,10 +22,13 @@
   "private": false,
   "scripts": {},
   "peerDependencies": {
-    "@builder.io/qwik": ">1.2.11"
+    "@builder.io/qwik": ">=1.2.17"
   },
   "dependencies": {
-    "@floating-ui/dom": "1.0.10",
+    "@qwik-ui/utils": "workspace:*",
+    "@floating-ui/dom": "^1.0.10",
+    "focus-trap": "^7.5.3",
+    "body-scroll-lock": "^4.0.0-beta.0",
     "country-list-json": "^1.1.0",
     "libphonenumber-js": "^1.10.43"
   }

packages/kit-headless/vite.config.ts

@@ -1,5 +1,4 @@
 /// <reference types="vitest" />
-
 import { qwikVite } from '@builder.io/qwik/optimizer';
 import { dirname, join } from 'path';
 import { qwikNxVite } from 'qwik-nx/plugins';
@@ -8,6 +7,11 @@ import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 import tsconfigPaths from 'vite-tsconfig-paths';
+import pkg from './package.json';
+
+const { dependencies = {}, peerDependencies = {} } = pkg as any;
+const makeRegex = (dep: any) => new RegExp(`^${dep}(/.*)?$`);
+const excludeAll = (obj: any) => Object.keys(obj).map(makeRegex);
 
 export default defineConfig({
   plugins: [
@@ -57,6 +61,11 @@ export default defineConfig({
       formats: ['es', 'cjs'],
     },
     rollupOptions: {
+      external: [
+        /^node:.*/,
+        ...excludeAll(dependencies),
+        ...excludeAll(peerDependencies),
+      ],
       output: {
         preserveModules: true,
         preserveModulesRoot: 'packages/kit-headless/src',

packages/utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qwik-ui/utils",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "Qwik UI Utils",
   "publishConfig": {
     "access": "public"
@@ -9,7 +9,13 @@
     "tailwind-merge": "^1.14.0"
   },
   "type": "module",
-  "main": "./index.js",
-  "module": "./index.mjs",
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./index.cjs"
+    }
+  },
+  "main": "./index.cjs",
+  "module": "./index.js",
   "typings": "./index.d.ts"
 }

packages/utils/vite.config.ts

@@ -1,12 +1,12 @@
 /// <reference types="vitest" />
 import { defineConfig } from 'vite';
 
-import viteTsConfigPaths from 'vite-tsconfig-paths';
-import dts from 'vite-plugin-dts';
 import * as path from 'path';
+import dts from 'vite-plugin-dts';
+import viteTsConfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
-  cacheDir: '../../node_modules/.vite/cva',
+  cacheDir: '../../node_modules/.vite/utils',
 
   plugins: [
     dts({
@@ -35,7 +35,7 @@ export default defineConfig({
     lib: {
       // Could also be a dictionary or array of multiple entry points.
       entry: 'src/index.ts',
-      name: 'cva',
+      name: 'utils',
       fileName: 'index',
       // Change this to the formats you want to support.
       // Don't forget to update your package.json as well.