feat!: prepare for v4

[brc-dd]

closes #538 closes #424 closes #541

TODO:

• [ ] extendable nuxt config

[netlify[bot]]

✅ Deploy Preview for sefirot-docs ready!

Name	Link
🔨 Latest commit	d81fdf64d7fecf1d545fb117ddbb3ba00a125063
🔍 Latest deploy log	https://app.netlify.com/sites/sefirot-docs/deploys/669ccf72fe44060008eeb86c
😎 Deploy Preview	https://deploy-preview-539--sefirot-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for sefirot-story ready!

Name	Link
🔨 Latest commit	d81fdf64d7fecf1d545fb117ddbb3ba00a125063
🔍 Latest deploy log	https://app.netlify.com/sites/sefirot-story/deploys/669ccf72c064780008c8c584
😎 Deploy Preview	https://deploy-preview-539--sefirot-story.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[brc-dd]

Posting migration guide as comments, please unsubscribe for sanity 😂

[brc-dd]

Icon changes

Replace @iconify-icons/x to corresponding @iconify-json/x

-    "@iconify-icons/mdi": "^1.2.48",
-    "@iconify-icons/ph": "^1.2.5",
-    "@iconify-icons/ri": "^1.2.10",
-    "@iconify/vue": "^4.1.2",
+    "@iconify-json/mdi": "^1.1.67",
+    "@iconify-json/ph": "^1.1.13",
+    "@iconify-json/ri": "^1.1.21",

Since we are now using unplugin-icons and it doesn't have strict enough type defs, it is recommended to use Iconfiy Intellisense.

Change in imports:

replace

from '@iconify-icons/

with

from '~icons/

Although most of our projects are using aliases, so it will be something like this:

from 'icons/

with

from '~icons/ph/

---

from 'icons-

with

from '~icons/

Remove unnecessary paths from tsconfig:

-      "icons/*": ["node_modules/@iconify-icons/ph/*"],
-      "icons-mdi/*": ["node_modules/@iconify-icons/mdi/*"],
-      "icons-ri/*": ["node_modules/@iconify-icons/ri/*"]

@iconify/vue/ is removed:

replace

import { type IconifyIcon } from '@iconify/vue/dist/offline'

with

import { type Component } from 'vue'`

(also update the props, etc. where IconifyIcon was used)

Add triple slash reference for unplugin-icons in env.d.ts/global.d.ts file (not needed in nuxt):

/// <reference types="vite/client" />
/// <reference types="unplugin-icons/types/vue3" />

See "Removed components" section too.

Install gb's fork of unplugin-icons till next unplugin-icons version:

pnpm add -D unplugin-icons@npm:@globalbrain/unplugin-icons

[brc-dd]

ESM-only

Add "type": "module" to client's package.json. Likely will be already present in all vite 5 projects. Might also rename .mjs files to just .js (example postcssrc) and any js using cjs syntax to .cjs (example eslintrc)

[brc-dd]

New base config

 import { fileURLToPath } from 'node:url'
+import { defineConfig } from '@globalbrain/sefirot/config/vite'
 import vue from '@vitejs/plugin-vue'
-import { defineConfig, loadEnv } from 'vite'
+import { loadEnv } from 'vite'

 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), '')
   ...

   return {
-    optimizeDeps: {
-      include: [
-        ...
-      ]
-    },
-
     resolve: {
       alias: {
-        '@/': fileURLToPath(new URL('./src/', import.meta.url)),
-        'sefirot/': fileURLToPath(new URL('./node_modules/@globalbrain/sefirot/lib/', import.meta.url)),
-        'icons/': fileURLToPath(new URL('./node_modules/@iconify-icons/ph/', import.meta.url)),
-        'icons-mdi/': fileURLToPath(new URL('./node_modules/@iconify-icons/mdi/', import.meta.url)),
-        'icons-ri/': fileURLToPath(new URL('./node_modules/@iconify-icons/ri/', import.meta.url))
-      },
-
-      dedupe: [
-       ...
-      ]
+        '@/': fileURLToPath(new URL('./src/', import.meta.url))
+      }
     },

[brc-dd]

Removed utils

• isNullish -> == null / != null (note non-strict comparison)
• isArray -> Array.isArray (search using /(?<!Array\.)isArray/)
• isFunction -> typeof x === 'function' (other projects are not using it)

[brc-dd]

Removed components and props

• SSheet* (mixin is also removed)

• SIcon - directly use the component or <component :is="IconX" /> (avoid using icon dictionaries, just use v-if/v-else)

• SCardFooter*/SCardHeader* - use SControl* instead

• text from SActionListItem - (search for ActionList and check if they are all using label not text)

[brc-dd]

Removed composables

• composables/Data, composables/Form, composables/Validation - use useD/useV instead:

  const { data, validation, init, validateAndNotify } = useForm({
  data: {
    image: null as File | null
  },
  rules: {
    image: {
      maxFileSize: maxFileSize('500kb')
    }
  }
  })
  
  to
  
  const { data, init } = useD({
  image: null as File | null
  })
  
  const { validation, validateAndNotify } = useV(data, {
  image: {
    maxFileSize: maxFileSize('500kb')
  }
  })

[brc-dd]

Added utils

• isFetchError (from http/Http)
• refer docs

[brc-dd]

Table changes

Rewrite everything if using legacy code 🫠

• reset and actions are removed, use corresponding SControl elements.
• Some types may no longer accept generic parameters. To migrate just leave them and run vue-tsc, it should give error in those files.
• Individual properties of cells no longer accept getter functions, instead make the whole cell a function.

[brc-dd]

Props changes

• Search for ActionList and replace text in items to label.
• Search for <SCardBlock([^<]|\n)*?space and replace space with utility classes. (This wasn't working even in older versions.)
• Search for <SPill([^<]|\n)*?tag and replace tag with as.