Update how icon registration works for library

example/vite.config.ts

@@ -37,4 +37,11 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
   },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern',
+      },
+    },
+  },
 });

src/components/icons/RuiIcon.vue

@@ -25,7 +25,7 @@ const path: ComputedRef<string | undefined> = computed(() => {
     console.warn(`icon ${name} must be a valid RuiIcon`);
   }
   const iconName = `ri-${name}`;
-  const found = get(registeredIcons)[iconName];
+  const found = registeredIcons[iconName];
 
   if (!found) {
     console.error(`Icons "${name}" not found. Make sure that you have register the icon when installing the RuiPlugin`);

src/composables/icons.ts

@@ -32,51 +32,68 @@ import {
   RiRadioButtonLine,
 } from '@/icons';
 import type { GeneratedIcon } from '@/types/icons';
+import type { InjectionKey } from 'vue';
 
-export const useIcons = createGlobalState(() => {
-  const requiredIcons: GeneratedIcon[] = [
-    RiAlertFill,
-    RiAlertLine,
-    RiArrowDownLine,
-    RiArrowDropDownFill,
-    RiArrowLeftDoubleLine,
-    RiArrowLeftLine,
-    RiArrowLeftSLine,
-    RiArrowRightDoubleLine,
-    RiArrowRightLine,
-    RiArrowRightSLine,
-    RiCheckLine,
-    RiCheckboxBlankCircleFill,
-    RiCheckboxBlankCircleLine,
-    RiCheckboxBlankLine,
-    RiCheckboxCircleFill,
-    RiCheckboxCircleLine,
-    RiCheckboxFill,
-    RiCheckboxIndeterminateFill,
-    RiCloseCircleLine,
-    RiCloseFill,
-    RiCloseLine,
-    RiDatabase2Line,
-    RiErrorWarningFill,
-    RiErrorWarningLine,
-    RiEyeLine,
-    RiEyeOffLine,
-    RiInformationFill,
-    RiInformationLine,
-    RiRadioButtonLine,
-    RiMoreFill,
-    RiExpandUpDownLine,
-  ];
+const requiredIcons: GeneratedIcon[] = [
+  RiAlertFill,
+  RiAlertLine,
+  RiArrowDownLine,
+  RiArrowDropDownFill,
+  RiArrowLeftDoubleLine,
+  RiArrowLeftLine,
+  RiArrowLeftSLine,
+  RiArrowRightDoubleLine,
+  RiArrowRightLine,
+  RiArrowRightSLine,
+  RiCheckLine,
+  RiCheckboxBlankCircleFill,
+  RiCheckboxBlankCircleLine,
+  RiCheckboxBlankLine,
+  RiCheckboxCircleFill,
+  RiCheckboxCircleLine,
+  RiCheckboxFill,
+  RiCheckboxIndeterminateFill,
+  RiCloseCircleLine,
+  RiCloseFill,
+  RiCloseLine,
+  RiDatabase2Line,
+  RiErrorWarningFill,
+  RiErrorWarningLine,
+  RiEyeLine,
+  RiEyeOffLine,
+  RiInformationFill,
+  RiInformationLine,
+  RiRadioButtonLine,
+  RiMoreFill,
+  RiExpandUpDownLine,
+];
+
+export interface IconsOptions {
+  registeredIcons: GeneratedIcon[];
+}
+
+export interface UseIconsReturn {
+  registeredIcons: Readonly<Record<string, string>>;
+}
+
+export const IconsSymbol: InjectionKey<UseIconsReturn> = Symbol.for('rui:icons');
 
-  const registeredIcons: Ref<Record<string, string>> = ref({});
-  const registerIcons = (iconsToAdd: GeneratedIcon[]) => {
-    set(registeredIcons, {
-      ...get(registeredIcons),
+export function createIconDefaults(options?: Partial<IconsOptions>): UseIconsReturn {
+  const iconsToAdd = options?.registeredIcons || [];
+  return {
+    registeredIcons: {
       ...Object.fromEntries(
-        [...requiredIcons, ...iconsToAdd].map(({ name, path }) => [name, path]),
+        [
+          ...requiredIcons,
+          ...iconsToAdd,
+        ].map(({ name, path }) => [name, path]),
       ),
-    });
+    },
   };
+}
 
-  return { registeredIcons, registerIcons };
-});
+export function useIcons(): UseIconsReturn {
+  const icons = inject(IconsSymbol);
+  assert(icons, 'Could not find icons injection');
+  return icons;
+}

src/index.ts

@@ -5,6 +5,7 @@ import {
   TableSymbol,
   createTableDefaults,
 } from '@/composables/defaults/table';
+import { IconsSymbol, createIconDefaults } from '@/composables/icons';
 import type { App } from 'vue';
 import type { InitThemeOptions } from '@/types/theme';
 import '@/style.scss';
@@ -38,15 +39,17 @@ export function createRui(options: RuiOptions = {}) {
   const { theme } = options;
 
   const defaults = Object.freeze({
+    icons: createIconDefaults({
+      registeredIcons: options.theme?.icons,
+    }),
     table: createTableDefaults(options.defaults?.table),
   });
 
   const install = (app: App) => {
-    const { registerIcons } = useIcons();
-    registerIcons(theme?.icons || []);
     useRotkiTheme().init({ ...theme });
 
     app.provide(TableSymbol, defaults.table);
+    app.provide(IconsSymbol, defaults.icons);
   };
 
   return {

tests/setup-files/setup.ts

@@ -1,11 +1,14 @@
 // setup.js file
 import { vi } from 'vitest';
 import { promiseTimeout } from '@vueuse/core';
+import { config } from '@vue/test-utils';
+import { IconsSymbol, createIconDefaults } from '../../src/composables/icons';
 import * as Icons from '../../src/icons';
-import { useIcons } from '../../src/composables';
 
-const { registerIcons } = useIcons();
-registerIcons(Object.values(Icons));
+// @ts-expect-error symbol cannot be used as an index.
+config.global.provide[IconsSymbol] = createIconDefaults({
+  registeredIcons: Object.values(Icons),
+});
 
 const ResizeObserverMock = vi.fn(() => ({
   observe: vi.fn(),

tsconfig.build.json

@@ -17,8 +17,5 @@
   ],
   "tsc-alias": {
     "resolveFullPaths": true
-  },
-  "vueCompilerOptions": {
-    "target": 3.4
   }
 }

vite.config.ts

@@ -3,6 +3,7 @@ import vue from '@vitejs/plugin-vue';
 import { defineConfig } from 'vitest/config';
 import AutoImport from 'unplugin-auto-import/vite';
 import fg from 'fast-glob';
+import consola from 'consola';
 
 const entryPoints = [
   'src/components/index.ts',
@@ -22,6 +23,41 @@ const entities = files.map((file) => {
 
 const entries = Object.fromEntries(entities);
 
+function manualChunks(identifier: string): string {
+  const relative = identifier.replace(__dirname, '');
+  const pathsAfterModule = relative.split('node_modules/');
+
+  if (pathsAfterModule.length > 1) {
+    return 'vendor';
+  }
+  else {
+    const pathWithoutSrc = pathsAfterModule[0].replace('/src/', '');
+    if (pathWithoutSrc.startsWith('icons')) {
+      return pathWithoutSrc.replace('.ts', '');
+    }
+    else if (pathWithoutSrc.startsWith('utils')) {
+      return 'utils/index';
+    }
+    else if (pathWithoutSrc.startsWith('composables')) {
+      return 'composables/index';
+    }
+    else if (pathWithoutSrc.startsWith('components') || pathWithoutSrc.includes('plugin-vue:export-helper')) {
+      return 'components/index';
+    }
+    else if (pathWithoutSrc.startsWith('types')) {
+      return 'types/index';
+    }
+    else if (pathWithoutSrc.endsWith('.ts')) {
+      return pathWithoutSrc.replace('.ts', '');
+    }
+    else {
+      consola.debug(pathWithoutSrc);
+    }
+
+    return 'index';
+  }
+}
+
 export default defineConfig({
   resolve: {
     alias: {
@@ -34,7 +70,10 @@ export default defineConfig({
     AutoImport({
       imports: ['vue', '@vueuse/core', { '@vueuse/shared': ['get', 'set'] }],
       dts: './auto-imports.d.ts',
-      dirs: ['src/composables/**', 'src/utils/**'],
+      dirs: [
+        'src/composables/**/!(theme.ts|icons.ts|breakpoint.ts)',
+        'src/utils/**',
+      ],
       vueTemplate: true,
     }),
   ],
@@ -47,6 +86,7 @@ export default defineConfig({
   },
   build: {
     outDir: './dist',
+    minify: true,
     lib: {
       entry: entries,
       fileName: (format, entryName) => `${entryName}.${format}.js`,
@@ -59,11 +99,13 @@ export default defineConfig({
         'tailwindcss/plugin',
         '@vueuse/core',
         '@vueuse/shared',
+        '@vueuse/math',
       ],
       output: {
         globals: {
           vue: 'vue',
         },
+        manualChunks,
       },
     },
   },