next: Svelte 5

.github/workflows/ci.yml

@@ -17,26 +17,11 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v4
-            - uses: pnpm/action-setup@v3
-              with:
-                  version: 8
-
+            - uses: pnpm/action-setup@v4
             - uses: actions/setup-node@v4
               with:
                   node-version: 20
-
-            # PNPM Store cache setup
-            - name: Get pnpm store directory
-              id: pnpm-cache
-              run: |
-                  echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
-            - name: Setup pnpm cache
-              uses: actions/cache@v4
-              with:
-                  path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
-                  key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-                  restore-keys: |
-                      ${{ runner.os }}-pnpm-store-
+                  cache: pnpm
 
             - name: Install dependencies
               run: pnpm install
@@ -49,29 +34,11 @@ jobs:
         name: Lint
         steps:
             - uses: actions/checkout@v4
-            - name: Install Node.JS
-              uses: actions/setup-node@v4
+            - uses: pnpm/action-setup@v4
+            - uses: actions/setup-node@v4
               with:
                   node-version: 20
-
-            - uses: pnpm/action-setup@v3
-              name: Install pnpm
-              id: pnpm-install
-              with:
-                  version: 8
-
-            # PNPM Store cache setup
-            - name: Get pnpm store directory
-              id: pnpm-cache
-              run: |
-                  echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
-            - name: Setup pnpm cache
-              uses: actions/cache@v4
-              with:
-                  path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
-                  key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-                  restore-keys: |
-                      ${{ runner.os }}-pnpm-store-
+                  cache: pnpm
 
             - name: Install dependencies
               run: pnpm install
@@ -82,29 +49,11 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v4
-            - name: Install Node.JS
-              uses: actions/setup-node@v4
+            - uses: pnpm/action-setup@v4
+            - uses: actions/setup-node@v4
               with:
                   node-version: 20
-
-            - uses: pnpm/action-setup@v3
-              name: Install pnpm
-              id: pnpm-install
-              with:
-                  version: 8
-
-            # PNPM Store cache setup
-            - name: Get pnpm store directory
-              id: pnpm-cache
-              run: |
-                  echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
-            - name: Setup pnpm cache
-              uses: actions/cache@v4
-              with:
-                  path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
-                  key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-                  restore-keys: |
-                      ${{ runner.os }}-pnpm-store-
+                  cache: pnpm
 
             - name: Install dependencies
               run: pnpm install

.github/workflows/docs-preview.yml

@@ -38,25 +38,11 @@ jobs:
               with:
                   ref: ${{ github.event.pull_request.head.ref }}
                   repository: ${{ github.event.pull_request.head.repo.full_name }}
-            - uses: pnpm/action-setup@v3
-              with:
-                  version: 8
+            - uses: pnpm/action-setup@v4
             - uses: actions/setup-node@v4
               with:
                   node-version: 20
-
-            # PNPM Store cache setup
-            - name: Get pnpm store directory
-              id: pnpm-cache
-              run: |
-                  echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
-            - name: Setup pnpm cache
-              uses: actions/cache@v4
-              with:
-                  path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
-                  key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-                  restore-keys: |
-                      ${{ runner.os }}-pnpm-store-
+                  cache: pnpm
 
             - name: Install dependencies
               run: pnpm install

.github/workflows/docs-production.yml

@@ -19,25 +19,11 @@ jobs:
         name: Publish to Cloudflare Pages
         steps:
             - uses: actions/checkout@v4
-            - uses: pnpm/action-setup@v3
-              with:
-                  version: 8
+            - uses: pnpm/action-setup@v4
             - uses: actions/setup-node@v4
               with:
                   node-version: 20
-
-            # PNPM Store cache setup
-            - name: Get pnpm store directory
-              id: pnpm-cache
-              run: |
-                  echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
-            - name: Setup pnpm cache
-              uses: actions/cache@v4
-              with:
-                  path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
-                  key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-                  restore-keys: |
-                      ${{ runner.os }}-pnpm-store-
+                  cache: pnpm
 
             - name: Install dependencies
               run: pnpm install

.github/workflows/preview-release.yml

@@ -0,0 +1,29 @@
+name: Publish Preview Release
+on:
+    pull_request:
+        types: [ready_for_review, synchronize, opened, labeled]
+        paths: [packages/**]
+
+jobs:
+    preview-release:
+        if: github.repository == 'huntabyte/bits-ui' && contains(github.event.pull_request.labels.*.name, 'publish:preview')
+        timeout-minutes: 5
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+            - uses: pnpm/action-setup@v4
+
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: 20
+                  cache: pnpm
+
+            - name: install dependencies
+              run: pnpm install
+
+            - name: build
+              run: pnpm build:packages
+
+            - name: publish preview
+              run: |
+                  pnpx pkg-pr-new@0.0 publish --pnpm --compact './packages/*'

.github/workflows/release.yml

@@ -16,34 +16,17 @@ jobs:
         name: Release
         runs-on: ubuntu-latest
         steps:
-            - name: Checkout Repo
-              uses: actions/checkout@v4
+            - uses: actions/checkout@v4
               with:
-                  # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
                   fetch-depth: 0
-            - uses: pnpm/action-setup@v3
-              with:
-                  version: 8
-            - name: Setup Node.js
-              uses: actions/setup-node@v4
+            - uses: pnpm/action-setup@v4
+            - uses: actions/setup-node@v4
               with:
                   node-version: 20
-
-            # PNPM Store cache setup
-            - name: Get pnpm store directory
-              id: pnpm-cache
-              run: |
-                  echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
-            - name: Setup pnpm cache
-              uses: actions/cache@v4
-              with:
-                  path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
-                  key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-                  restore-keys: |
-                      ${{ runner.os }}-pnpm-store-
+                  cache: pnpm
 
             - name: Install dependencies
-              run: pnpm install --frozen-lockfile
+              run: pnpm install
 
             - name: Create Release Pull Request or Publish to npm
               id: changesets

.nvmrc

@@ -1 +1 @@
-v18.18.2
+v20.15.1

.prettierrc

@@ -3,6 +3,7 @@
 	"tabWidth": 4,
 	"singleQuote": false,
 	"trailingComma": "es5",
+	"semi": true,
 	"printWidth": 100,
 	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
 	"overrides": [

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
 	// Enable the ESlint flat config support
-	"eslint.experimental.useFlatConfig": true,
+	"eslint.useFlatConfig": true,
 
 	// Auto fix
 	"editor.codeActionsOnSave": {

NOTES.md

@@ -0,0 +1,40 @@
+Svelte 5 Related Notes:
+
+-   Determine how we're going to handle the `name` prop for the date field & date range field. Currently, it's passed to the root of the date field, but to the individual inputs for the date range field. It should probably be consistent across both components, opting to pass it to the input.
+
+---
+
+Determine how to handle validation for the various date components. My initial thought is we'll have a `validate` prop that gets called each time the user changes the date value of the component. This gives the user maximum flexibility to handle validation, but we'll need to ensure it's done so in an accessible manner.
+
+Perhaps we can provide a `Validation` component that can be used to display validation messages. Whatever is returned from the `validate` function could be rendered in the `Validation` component as a fallback, or the user can provide their own message within its children. With this approach, we also need to determine how to then handle the cases of `minValue`, `maxValue`, and `isDateUnavailable` being set. Something to think about.
+
+We could have some sort of `Validation` object that gets passed to an `onInvalid` callback prop that is called when the date value is invalid. It could look something like this:
+
+```ts
+type InvalidResult = {
+	type: "min" | "max" | "unavailable" | "custom";
+	message?: string;
+};
+```
+
+Then the user can handle this in their own way, such as displaying a validation message in a `Validation` component, or calling a function that does whatever they need to do to handle the validation. Need to think more on this one.
+
+---
+
+We need to determine the ideal approach for managing the `data-<component>` attributes. We've decided to use a `data-<component>-root` attribute for the root component, and `data-<component>-<part>` for each part.
+
+Since other components depend on these attributes for selectors, we'll need to put them in a place where they can be easily accessed and if changed, those changes will propagate to everywhere the attribute is used.
+
+They also need to be flexible enough to allow for reusing the same component while swapping the `data-component` prefix, for example, in the menus we have `data-menubar-*`, `data-dropdown-menu-*`, `data-context-menu-*`, etc. The easy button is of course to just consolidate these into just a single `data-menu` attribute, but that's not ideal and hinders the ability to apply different styles on a global level to the different components.
+
+---
+
+Should we embrace the [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) API? Something to think about.
+
+---
+
+We need to expose the different `open` states via snippet props for all the `forceMount`-able components to work with Svelte and other transition/animation libs.
+
+---
+
+We need to handle `invalid` state for the `DateRangeField` component.

NOTICE.txt

@@ -0,0 +1,35 @@
+Bits UI
+=================
+The following is a list of sources from which code was used/modified in this codebase.
+
+-------------------------------------------------------------------------------
+This codebase contains a modified portion of code from Adobe which can be obtained at:
+  * SOURCE:
+    * https://www.npmjs.com/package/@react-aria/utils
+  * LICENSE (Apache 2.0):
+    * https://unpkg.com/@react-aria/utils@3.24.1/LICENSE
+
+  * SOURCE:
+    * https://www.npmjs.com/package/react-stately
+  * LICENSE (Apache 2.0):
+    * https://unpkg.com/react-stately@3.31.1/LICENSE
+
+-------------------------------------------------------------------------------
+
+This codebase contains a modified portion of code from Melt UI which can be obtained at:
+  * SOURCE:
+    * https://www.npmjs.com/package/@melt-ui/svelte
+  * LICENSE (MIT):
+    * https://unpkg.com/@melt-ui/svelte@0.76.2/LICENSE
+
+-------------------------------------------------------------------------------
+
+This codebase contains a modified portion of code from Radix UI which can be obtained at:
+  * SOURCE:
+    * https://www.npmjs.com/package/@radix-ui/react-scroll-area
+    * https://www.npmjs.com/package/@radix-ui/react-select
+    * https://www.npmjs.com/package/@radix-ui/react-navigation-menu
+  * LICENSE (MIT):
+    * https://github.com/radix-ui/primitives/blob/main/LICENSE
+
+-------------------------------------------------------------------------------

eslint.config.js

@@ -2,4 +2,27 @@ import config, { DEFAULT_IGNORES } from "@huntabyte/eslint-config";
 
 const ignores = ["**/extended-types"];
 
-export default config({ svelte: true, ignores: [...DEFAULT_IGNORES, ...ignores] });
+export default config({ svelte: true, ignores: [...DEFAULT_IGNORES, ...ignores] })
+	.override("antfu/typescript/rules", {
+		rules: {
+			"ts/consistent-type-definitions": "off",
+			"unused-imports/no-unused-imports": "off",
+			"unused-imports/no-unused-vars": "off",
+			"ts/no-unused-expressions": "off",
+			"no-unused-expressions": "off",
+			"ts/no-empty-object-type": "off",
+		},
+	})
+	.override("antfu/javascript/rules", {
+		rules: {
+			"no-unused-expressions": "off",
+			"unused-imports/no-unused-imports": "off",
+		},
+	})
+	.override("huntabyte/svelte/rules", {
+		rules: {
+			"svelte/no-at-html-tags": "off",
+			"unused-imports/no-unused-imports": "off",
+			"unused-imports/no-unused-vars": "off",
+		},
+	});

package.json

@@ -7,7 +7,7 @@
 		"build:packages": "pnpm -F \"./packages/**\" --parallel build",
 		"check": "pnpm build:packages && pnpm -r check",
 		"ci:publish": "pnpm build:packages && changeset publish",
-		"dev": "pnpm -r --parallel dev",
+		"dev": "pnpm -F \"./packages/**\" svelte-kit sync && pnpm -r --parallel --reporter append-only --color dev",
 		"format": "prettier --write .",
 		"lint": "prettier --check . && eslint .",
 		"lint:fix": "eslint --fix .",
@@ -18,21 +18,23 @@
 	"license": "MIT",
 	"devDependencies": {
 		"@changesets/cli": "^2.27.1",
-		"@huntabyte/eslint-config": "^0.1.1",
+		"@huntabyte/eslint-config": "^0.3.2",
+		"@huntabyte/eslint-plugin": "^0.1.0",
 		"@svitejs/changesets-changelog-github-compact": "^1.1.0",
-		"eslint": "^8.56.0",
-		"eslint-plugin-svelte": "^2.35.1",
+		"eslint": "^9.0.0",
+		"eslint-plugin-svelte": "^2.37.0",
 		"prettier": "^3.2.5",
 		"prettier-plugin-svelte": "^3.2.2",
 		"prettier-plugin-tailwindcss": "0.5.13",
-		"svelte": "^4.2.9",
-		"svelte-eslint-parser": "^0.33.1",
+		"svelte": "5.0.0-next.199",
+		"svelte-eslint-parser": "^0.41.0",
 		"wrangler": "^3.44.0"
 	},
 	"type": "module",
 	"engines": {
 		"pnpm": ">=8.7.0",
 		"node": ">=18"
 	},
+	"packageManager": "pnpm@9.6.0",
 	"private": true
 }