Svelte 5

.changeset/red-crabs-camp.md

@@ -0,0 +1,5 @@
+---
+'threlte-uikit': major
+---
+
+Rewrite internals in Svelte 5, removes Svelte 4 support

.github/workflows/main.yml

@@ -17,7 +17,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
 
       - name: Install and Build 🔧
         run: |

.github/workflows/pullrequest.yml

@@ -6,7 +6,7 @@ on:
       - main
 
 jobs:
-  prettier:
+  check:
     runs-on: ubuntu-latest
 
     steps:
@@ -16,13 +16,31 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
 
       - name: Install 🔧
         run: npm ci
 
-      - name: Prettier 💅
-        run: npm run prettier
+      - name: Lint 💅
+        run: npm run check
+
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Install 🔧
+        run: npm ci
+
+      - name: Lint 💅
+        run: npm run lint
 
   unit-test:
     runs-on: ubuntu-latest
@@ -34,7 +52,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
 
       - name: Install 🔧
         run: npm ci

.prettierrc

@@ -2,7 +2,7 @@
   "useTabs": false,
   "singleQuote": true,
   "trailingComma": "es5",
-  "printWidth": 100,
+  "printWidth": 90,
   "semi": false,
   "singleAttributePerLine": true,
   "plugins": ["prettier-plugin-svelte"],

README.md

@@ -1,6 +1,6 @@
 # threlte-uikit
 
-`threlte-uikit` wraps [`@pmndrs/uikit`](https://github.com/pmndrs/uikit) (the vanilla flavor) in a declarative syntax for use with [Threlte](https://threlte.xyz).
+`threlte-uikit` wraps [`@pmndrs/uikit`](https://github.com/pmndrs/uikit) in a declarative syntax for use with [Threlte](https://threlte.xyz).
 
 ```
 npm i threlte-uikit
@@ -52,9 +52,11 @@ The component internals may be accessed via the `ref` property.
 Allows overriding the default properties for all UIKit components and children components of the component in which it is called.
 
 ```ts
-provideDefaultProperties({
+let defaultProps = $state({
   margin: 10,
 })
+
+provideDefaultProperties(() => defaultProps)
 ```
 
 - `provideFontFamilies()`

eslint.config.js

@@ -1,33 +1,45 @@
 import js from '@eslint/js'
-import ts from 'typescript-eslint'
-import svelte from 'eslint-plugin-svelte'
+import { defineConfig, globalIgnores } from 'eslint/config'
 import prettier from 'eslint-config-prettier'
+import svelte from 'eslint-plugin-svelte'
 import globals from 'globals'
+import ts from 'typescript-eslint'
+import svelteConfig from './svelte.config.js'
 
-/** @type {import('eslint').Linter.FlatConfig[]} */
-export default [
+export default defineConfig([
+  globalIgnores(['dist/', '.svelte-kit/']),
+  prettier,
   js.configs.recommended,
   ...ts.configs.recommended,
-  ...svelte.configs['flat/recommended'],
-  prettier,
-  ...svelte.configs['flat/prettier'],
+  ...svelte.configs.recommended,
+  ...svelte.configs.prettier,
   {
     languageOptions: {
       globals: {
         ...globals.browser,
-        ...globals.node,
       },
     },
   },
   {
-    files: ['**/*.svelte'],
+    files: ['**/*.svelte', '**/*.svelte.js', '**/*.svelte.ts', '../*.svelte.config.ts'],
     languageOptions: {
       parserOptions: {
+        projectService: true,
+        extraFileExtensions: ['.svelte'], // Add support for additional file extensions, such as .svelte
         parser: ts.parser,
+        // Specify a parser for each language, if needed:
+        // parser: {
+        //   ts: ts.parser,
+        //   js: espree,    // Use espree for .js files (add: import espree from 'espree')
+        //   typescript: ts.parser
+        // },
+
+        // We recommend importing and specifying svelte.config.js.
+        // By doing so, some rules in eslint-plugin-svelte will automatically read the configuration and adjust their behavior accordingly.
+        // While certain Svelte settings may be statically loaded from svelte.config.js even if you don’t specify it,
+        // explicitly specifying it ensures better compatibility and functionality.
+        svelteConfig,
       },
     },
   },
-  {
-    ignores: ['build/', '.svelte-kit/', 'dist/'],
-  },
-]
+])