firstly 0.0.10 → 0.0.12

package/esm/mail/index.d.ts

@@ -1,30 +1,2 @@
-import type * as typeNodemailer from 'nodemailer';
-import type JSONTransport from 'nodemailer/lib/json-transport';
-import type Mail from 'nodemailer/lib/mailer';
-import type SendmailTransport from 'nodemailer/lib/sendmail-transport';
-import type SESTransport from 'nodemailer/lib/ses-transport';
-import type SMTPPool from 'nodemailer/lib/smtp-pool';
-import type SMTPTransport from 'nodemailer/lib/smtp-transport';
-import type StreamTransport from 'nodemailer/lib/stream-transport';
-import type { ComponentProps, ComponentType, SvelteComponent } from 'svelte';
-import { DefaultMail } from '../';
-export type TransportTypes = SMTPTransport | SMTPTransport.Options | string | SMTPPool | SMTPPool.Options | SendmailTransport | SendmailTransport.Options | StreamTransport | StreamTransport.Options | JSONTransport | JSONTransport.Options | SESTransport | SESTransport.Options | typeNodemailer.Transport<any> | typeNodemailer.TransportOptions;
-export type DefaultOptions = SMTPTransport.Options | SMTPPool.Options | SendmailTransport.Options | StreamTransport.Options | JSONTransport.Options | SESTransport.Options | typeNodemailer.TransportOptions;
-export type MailOptions<ComponentTemplateDefault extends SvelteComponent> = {
-    from?: Mail.Options['from'];
-    template?: {
-        component?: ComponentType<ComponentTemplateDefault>;
-        brandColor?: string;
-    };
-    transport?: TransportTypes;
-    defaults?: DefaultOptions;
-    apiUrl?: Parameters<typeof typeNodemailer.createTestAccount>[0];
-};
-declare let transporter: ReturnType<typeof typeNodemailer.createTransport>;
-export declare const mailInit: (nodemailer: typeof typeNodemailer, o?: MailOptions<SvelteComponent>) => void;
-export declare const sendMail: <ComponentTemplateDefault extends SvelteComponent = DefaultMail>(
-/** usefull for logs, it has NO impact on the mail itself */
-topic: string, mailOptions: Parameters<typeof transporter.sendMail>[0] & {
-    templateProps?: ComponentProps<ComponentTemplateDefault> | undefined;
-}) => ReturnType<typeof transporter.sendMail>;
-export {};
+import { default as DefaultMail } from './templates/DefaultMail.svelte';
+export { DefaultMail };

package/esm/mail/index.js

@@ -1,79 +1,2 @@
-import { render } from 'svelty-email';
-import { cyan, green, Log, magenta, red, sleep, white } from '@kitql/helpers';
-import { DefaultMail } from '../';
-const log = new Log('firstly | mail');
-let nodemailerHolder;
-let transporter;
-let globalOptions;
-export const mailInit = async (nodemailer, o) => {
-    nodemailerHolder = nodemailer;
-    globalOptions = o;
-    if (o?.transport) {
-        transporter = nodemailerHolder.createTransport(o?.transport, o?.defaults);
-    }
-    else {
-        try {
-            nodemailer.createTestAccount(globalOptions?.apiUrl ?? '', (err, account) => {
-                if (account) {
-                    globalOptions = { ...globalOptions, from: account.user };
-                    transporter = nodemailer.createTransport({
-                        host: account.smtp.host,
-                        port: account.smtp.port,
-                        secure: account.smtp.secure,
-                        auth: {
-                            user: account.user,
-                            pass: account.pass,
-                        },
-                    });
-                }
-                else {
-                    log.error("Error nodemailer.createTestAccount() can't be done.");
-                }
-            });
-        }
-        catch (error) {
-            log.error("Error nodemailer.createTestAccount() can't be done.");
-        }
-    }
-};
-export const sendMail = async (topic, mailOptions) => {
-    // if the transporter is not ready, wait for it! (it can happen only if nothing is set...)
-    for (let i = 0; i < 30; i++) {
-        if (transporter !== undefined) {
-            break;
-        }
-        await sleep(100);
-    }
-    try {
-        if (!mailOptions.html) {
-            const template = globalOptions?.template?.component ?? DefaultMail;
-            const props = {
-                brandColor: globalOptions?.template?.brandColor ?? '#5B68DF',
-                ...mailOptions.templateProps,
-            };
-            mailOptions.text = render({ template, props, options: { plainText: true, pretty: true } });
-            mailOptions.html = render({ template, props, options: { plainText: false, pretty: true } });
-        }
-        const info = await transporter.sendMail({
-            ...mailOptions,
-            ...{ from: mailOptions.from ?? globalOptions?.from },
-        });
-        if (!globalOptions?.transport) {
-            log.error(`${magenta(`[${topic}]`)} - ⚠️  ${red(`mail not configured`)} ⚠️ 
-                 We are still nice and generated you an email preview link: 
-                 👉 ${cyan(String(nodemailerHolder.getTestMessageUrl(
-            // @ts-ignore
-            info)))}
-
-                 To really send mails, check out the doc ${white(`https://firstly.fun/modules/mail`)}. 
-      `);
-        }
-        else {
-            log.success(`${magenta(`[${topic}]`)} - Sent to ${typeof mailOptions.to === 'string' ? green(mailOptions.to) : mailOptions.to}`);
-        }
-        return info;
-    }
-    catch (error) {
-        log.error(`${magenta(`[${topic}]`)} - Error`, error);
-    }
-};
+import { default as DefaultMail } from './templates/DefaultMail.svelte';
+export { DefaultMail };

package/esm/mail/server/index.d.ts

@@ -0,0 +1,31 @@
+import type * as typeNodemailer from 'nodemailer';
+import type JSONTransport from 'nodemailer/lib/json-transport';
+import type Mail from 'nodemailer/lib/mailer';
+import type SendmailTransport from 'nodemailer/lib/sendmail-transport';
+import type SESTransport from 'nodemailer/lib/ses-transport';
+import type SMTPPool from 'nodemailer/lib/smtp-pool';
+import type SMTPTransport from 'nodemailer/lib/smtp-transport';
+import type StreamTransport from 'nodemailer/lib/stream-transport';
+import type { ComponentProps, ComponentType, SvelteComponent } from 'svelte';
+import { Module } from '../../api';
+import { default as DefaultMail } from '../templates/DefaultMail.svelte';
+export type TransportTypes = SMTPTransport | SMTPTransport.Options | string | SMTPPool | SMTPPool.Options | SendmailTransport | SendmailTransport.Options | StreamTransport | StreamTransport.Options | JSONTransport | JSONTransport.Options | SESTransport | SESTransport.Options | typeNodemailer.Transport<any> | typeNodemailer.TransportOptions;
+export type DefaultOptions = SMTPTransport.Options | SMTPPool.Options | SendmailTransport.Options | StreamTransport.Options | JSONTransport.Options | SESTransport.Options | typeNodemailer.TransportOptions;
+export type MailOptions<ComponentTemplateDefault extends SvelteComponent> = {
+    from?: Mail.Options['from'];
+    template?: {
+        component?: ComponentType<ComponentTemplateDefault>;
+        brandColor?: string;
+    };
+    transport?: TransportTypes;
+    defaults?: DefaultOptions;
+    apiUrl?: Parameters<typeof typeNodemailer.createTestAccount>[0];
+};
+declare let transporter: ReturnType<typeof typeNodemailer.createTransport>;
+export declare const sendMail: <ComponentTemplateDefault extends SvelteComponent = DefaultMail>(
+/** usefull for logs, it has NO impact on the mail itself */
+topic: string, mailOptions: Parameters<typeof transporter.sendMail>[0] & {
+    templateProps?: ComponentProps<ComponentTemplateDefault> | undefined;
+}) => ReturnType<typeof transporter.sendMail>;
+export declare const mail: (o?: MailOptions<SvelteComponent>) => Module;
+export {};

package/esm/mail/server/index.js

@@ -0,0 +1,88 @@
+import nodemailer from 'nodemailer';
+import { render } from 'svelty-email';
+import { cyan, green, magenta, red, sleep, white } from '@kitql/helpers';
+import { Module } from '../../api';
+import { default as DefaultMail } from '../templates/DefaultMail.svelte';
+let transporter;
+let globalOptions;
+const initMail = async (o) => {
+    globalOptions = o;
+    if (o?.transport) {
+        transporter = nodemailer.createTransport(o?.transport, o?.defaults);
+    }
+    else {
+        try {
+            nodemailer.createTestAccount(globalOptions?.apiUrl ?? '', (err, account) => {
+                if (account) {
+                    globalOptions = { ...globalOptions, from: account.user };
+                    transporter = nodemailer.createTransport({
+                        host: account.smtp.host,
+                        port: account.smtp.port,
+                        secure: account.smtp.secure,
+                        auth: {
+                            user: account.user,
+                            pass: account.pass,
+                        },
+                    });
+                }
+                else {
+                    mailModule.log.error("Error nodemailer.createTestAccount() can't be done.");
+                }
+            });
+        }
+        catch (error) {
+            mailModule.log.error("Error nodemailer.createTestAccount() can't be done.");
+        }
+    }
+};
+export const sendMail = async (topic, mailOptions) => {
+    // if the transporter is not ready, wait for it! (it can happen only if nothing is set...)
+    for (let i = 0; i < 30; i++) {
+        if (transporter !== undefined) {
+            break;
+        }
+        await sleep(100);
+    }
+    try {
+        if (!mailOptions.html) {
+            const template = globalOptions?.template?.component ?? DefaultMail;
+            const props = {
+                brandColor: globalOptions?.template?.brandColor ?? '#5B68DF',
+                ...mailOptions.templateProps,
+            };
+            mailOptions.text = render({ template, props, options: { plainText: true, pretty: true } });
+            mailOptions.html = render({ template, props, options: { plainText: false, pretty: true } });
+        }
+        const info = await transporter.sendMail({
+            ...mailOptions,
+            ...{ from: mailOptions.from ?? globalOptions?.from },
+        });
+        if (!globalOptions?.transport) {
+            mailModule.log.error(`${magenta(`[${topic}]`)} - ⚠️  ${red(`mail not configured`)} ⚠️ 
+                 We are still nice and generated you an email preview link: 
+                 👉 ${cyan(String(nodemailer.getTestMessageUrl(
+            // @ts-ignore
+            info)))}
+
+                 To really send mails, check out the doc ${white(`https://firstly.fun/modules/mail`)}. 
+      `);
+        }
+        else {
+            mailModule.log.success(`${magenta(`[${topic}]`)} - Sent to ${typeof mailOptions.to === 'string' ? green(mailOptions.to) : mailOptions.to}`);
+        }
+        return info;
+    }
+    catch (error) {
+        mailModule.log.error(`${magenta(`[${topic}]`)} - Error`, error);
+    }
+};
+const mailModule = new Module({
+    name: 'mail',
+    priority: -778,
+});
+export const mail = (o) => {
+    mailModule.initApi = () => {
+        initMail(o);
+    };
+    return mailModule;
+};

package/esm/storeItem.d.ts

@@ -6,7 +6,10 @@ type TheStoreItem<T> = {
     globalError?: string | undefined;
 };
 export declare const storeItem: <T>(repo: Repository<T>, initValues?: TheStoreItem<T>) => {
-    subscribe: (this: void, run: import("svelte/store").Subscriber<TheStoreItem<T>>, invalidate?: import("svelte/store").Invalidator<TheStoreItem<T>> | undefined) => import("svelte/store").Unsubscriber;
+    subscribe: {
+        (this: void, run: import("svelte/store").Subscriber<TheStoreItem<T>>, invalidate?: import("svelte/store").Invalidator<TheStoreItem<T>> | undefined): import("svelte/store").Unsubscriber;
+        (this: void, run: import("svelte/store").Subscriber<TheStoreItem<T>>, invalidate?: (() => void) | undefined): import("svelte/store").Unsubscriber;
+    };
     create: (item: Partial<T>) => void;
     set: (newItem: TheStoreItem<T>) => void;
     /**

package/esm/storeItem.js

@@ -1,6 +1,6 @@
 import { BROWSER } from 'esm-env';
 import { derived, get, writable } from 'svelte/store';
-import { Log } from '@kitql/helpers';
+import { ff_Log } from './';
 import { isError } from './helper';
 export const storeItem = (repo, initValues = {
     item: undefined,
@@ -87,6 +87,7 @@ export const storeItem = (repo, initValues = {
                 if (!s.item) {
                     return;
                 }
+                internalStore.update((s) => ({ ...s, loading: true }));
                 const item = await repo.save(s.item);
                 internalStore.update((s) => ({
                     ...s,
@@ -130,11 +131,16 @@ export const storeItem = (repo, initValues = {
         delete: async () => {
             const s = get(internalStore);
             if (!s.item) {
-                new Log('firstly').error(`To delete an item, you need set it first.`);
+                ff_Log.error(`To delete an item, you need set it first.`);
                 return;
             }
             try {
+                internalStore.update((s) => ({ ...s, loading: true }));
                 await repo.delete(s.item);
+                internalStore.update((s) => ({
+                    ...s,
+                    loading: false,
+                }));
             }
             catch (error) {
                 if (isError(error)) {

package/esm/storeList.d.ts

@@ -18,14 +18,17 @@ export type FF_FindOptions<T> = FindOptions<T> & {
  * Example
  * ```ts
  * // get the repo
- * const taskRepo = remult.repo(Task)
+ * const taskRepo = repo(Task)
  *
  * const tasks = kitStore(taskRepo, data.tasks)
  * $: browser && tasks.listen(data.options)
  * ```
  */
 export declare const storeList: <T>(repo: Repository<T>, initValues?: TheStoreList<T>) => {
-    subscribe: (this: void, run: import("svelte/store").Subscriber<TheStoreList<T>>, invalidate?: import("svelte/store").Invalidator<TheStoreList<T>> | undefined) => import("svelte/store").Unsubscriber;
+    subscribe: {
+        (this: void, run: import("svelte/store").Subscriber<TheStoreList<T>>, invalidate?: import("svelte/store").Invalidator<TheStoreList<T>> | undefined): import("svelte/store").Unsubscriber;
+        (this: void, run: import("svelte/store").Subscriber<TheStoreList<T>>, invalidate?: (() => void) | undefined): import("svelte/store").Unsubscriber;
+    };
     manualSet: (info: TheStoreList<T>) => void;
     fetch: (options?: FF_FindOptions<T>, onNewData?: (items?: T[], totalCount?: number) => void) => Promise<void>;
     listen: (options?: FF_FindOptions<T>) => Promise<void>;

package/esm/storeList.js

@@ -9,7 +9,7 @@ import { writable } from 'svelte/store';
  * Example
  * ```ts
  * // get the repo
- * const taskRepo = remult.repo(Task)
+ * const taskRepo = repo(Task)
  *
  * const tasks = kitStore(taskRepo, data.tasks)
  * $: browser && tasks.listen(data.options)

package/esm/sveltekit/server/index.d.ts

@@ -0,0 +1,11 @@
+import type { RequestEvent } from '@sveltejs/kit';
+import { Module } from '../../api';
+declare module 'remult' {
+    interface RemultContext {
+        request: RequestEvent;
+        setHeaders(headers: Record<string, string>): void;
+        setCookie(...args: Parameters<RequestEvent['cookies']['set']>): void;
+        deleteCookie(...args: Parameters<RequestEvent['cookies']['delete']>): void;
+    }
+}
+export declare const sveltekit: () => Module;

package/esm/sveltekit/server/index.js

@@ -0,0 +1,21 @@
+import { remult } from 'remult';
+import { Module } from '../../api';
+export const sveltekit = () => {
+    return new Module({
+        name: 'sveltekit',
+        priority: -779,
+        entities: [],
+        controllers: [],
+        initRequest: async (kitEvent, op) => {
+            remult.context.setHeaders = (headers) => {
+                kitEvent.setHeaders(headers);
+            };
+            remult.context.setCookie = (name, value, opts) => {
+                kitEvent.cookies.set(name, value, opts);
+            };
+            remult.context.deleteCookie = (name, opts) => {
+                kitEvent.cookies.delete(name, opts);
+            };
+        },
+    });
+};

package/esm/ui/Button.svelte

@@ -81,7 +81,7 @@ const {
     transition:fade={{ duration: 100 }}
     class="bg-base-300 z-30 rounded-lg ring-1 ring-black"
   >
-    <div {...$arrow} use:arrow />
+    <div {...$arrow} use:arrow></div>
     <div class="px-4 py-1">
       {#if $$slots.tooltip}
         <slot name="tooltip" />

package/esm/ui/Clipboardable.svelte

@@ -1,9 +1,12 @@
 <script>export let value;
 export { extraClass as class };
 let extraClass = "";
-function clip(_value) {
+async function clip(_value) {
   if (_value) {
-    navigator.clipboard.writeText(_value);
+    try {
+      await navigator.clipboard.writeText(_value);
+    } catch (error) {
+    }
   }
 }
 </script>

package/esm/ui/Field.svelte

@@ -61,6 +61,9 @@ const toInput = (_metadata, _value) => {
 };
 const fromInput = (_metadata, _value) => {
   try {
+    if (_metadata.allowNull && _value === null) {
+      return null;
+    }
     return _metadata?.valueConverter.fromInput(_value, metaType.subKind);
   } catch (error2) {
     console.error(`error fromInput w field '${_metadata.key}'`, error2);
@@ -138,7 +141,7 @@ const calcSuffix = (value2) => {
   label={cell?.header ?? cell.field?.caption ?? cell.field?.key}
   required={!cell.field?.allowNull && mode === 'edit' && metaType.subKind !== 'checkbox'}
   {error}
-  classes={{ slot: metaType.subKind === 'textarea' ? 'h-32 items-start' : '' }}
+  classes={{ slot: metaType.subKind === 'textarea' ? 'h-24 items-start' : '' }}
 >
   {@const clearableComputed =
     cell.clearable || clearable || (mode === 'filtre' && clearable === undefined)}

package/esm/ui/Loading.svelte

@@ -5,7 +5,10 @@ let extraClass = "";
 
 <!-- To fix one capa & cadb are on the same css -->
 <div
-  class={tw('skeleton bg-base-content/20 flex h-4 w-full items-center justify-center', extraClass)}
+  class={tw(
+    'skeleton bg-base-content/20 flex h-4 w-full items-center justify-center rounded-lg',
+    extraClass,
+  )}
 >
   <slot />
 </div>

package/esm/ui/Tooltip.svelte

@@ -30,12 +30,12 @@ const {
     transition:fade={{ duration: 100 }}
     class="bg-base-300 z-30 rounded-lg ring-1 ring-black"
   >
-    <div {...$arrow} use:arrow />
+    <div {...$arrow} use:arrow></div>
     <div class="px-4 py-1">
       {#if $$slots.tooltip}
         <slot name="tooltip" />
       {:else}
-        {text}
+        {@html text}
       {/if}
     </div>
   </div>

package/esm/ui/dialog/DialogForm.svelte

@@ -25,7 +25,7 @@ const onInsert = async () => {
       dialog.close(toShow.id, { success: true, item: result });
     }
   } catch (e) {
-    if (!toShow.noThrow) {
+    if (toShow.reThrow) {
       throw e;
     }
   } finally {

package/esm/ui/dialog/DialogPrimitive.svelte

@@ -37,7 +37,7 @@ function dispatchChange(_data) {
       use:$overlay.action
       class="bg-base-300/80 fixed inset-0 z-40 blur-sm"
       transition:fade={{ duration: 150 }}
-    />
+    ></div>
     <div
       class={tw(
         `border-base-content/60 bg-base-100 relative z-40 max-h-[90vh] overflow-auto rounded-xl border p-6 shadow-lg`,
@@ -69,7 +69,6 @@ function dispatchChange(_data) {
       </div>
 
       <div class="flex h-full min-w-[25rem] flex-col gap-4">
-        <!-- FIXME: ERMIN? overflow?  -->
         <!-- <div class="overflow-y-auto"> -->
         <slot />
 

package/esm/ui/dialog/dialog.d.ts

@@ -19,7 +19,7 @@ export type DialogMetaData<entityType = any> = {
     component?: new (...args: any[]) => SvelteComponent;
     props?: any;
     children?: any;
-    noThrow?: boolean;
+    reThrow?: boolean;
     wDelete?: boolean;
     focusKey?: string;
     topicPrefixText?: string;
@@ -33,7 +33,7 @@ export type DialogFormType<entityType> = {
     cells?: CellsInput<entityType>;
     defaults?: Partial<entityType>;
     classes?: DialogClasses;
-    noThrow?: boolean;
+    reThrow?: boolean;
     wDelete?: boolean;
     topicPrefixText?: string;
     focusKey?: string;
@@ -50,6 +50,9 @@ export declare const dialog: {
     show: (dialog: DialogMetaData) => Promise<ResultClose<any>>;
     close: (id: number, result: ResultClose) => void;
     closeAll: () => void;
-    subscribe: (this: void, run: import("svelte/store").Subscriber<DialogMetaDataInternal<any>[]>, invalidate?: import("svelte/store").Invalidator<DialogMetaDataInternal<any>[]> | undefined) => import("svelte/store").Unsubscriber;
+    subscribe: {
+        (this: void, run: import("svelte/store").Subscriber<DialogMetaDataInternal<any>[]>, invalidate?: import("svelte/store").Invalidator<DialogMetaDataInternal<any>[]> | undefined): import("svelte/store").Unsubscriber;
+        (this: void, run: import("svelte/store").Subscriber<DialogMetaDataInternal<any>[]>, invalidate?: (() => void) | undefined): import("svelte/store").Unsubscriber;
+    };
 };
 export {};

package/esm/ui/dialog/dialog.js

@@ -62,7 +62,7 @@ const createDialogManagement = () => {
                 cells: settings.cells ?? [],
                 defaults: settings?.defaults,
                 classes: settings?.classes,
-                noThrow: settings?.noThrow,
+                reThrow: settings?.reThrow,
                 wDelete: settings?.wDelete,
                 focusKey: settings?.focusKey,
                 topicPrefixText,

package/esm/ui/internals/FieldContainer.svelte

@@ -12,7 +12,6 @@ export let classes = {};
       {label}{required ? ' *' : ''}
     </span>
     {#if error}
-      <!-- TODO Ermin? hover popup if too long? -->
       <span class="label-text-alt text-error truncate">{error}</span>
     {/if}
   </label>

package/esm/ui/internals/Input.svelte

@@ -33,7 +33,9 @@ const handleInput = (e) => {
   const target = e.target;
   if ($$restProps.type === "number") {
     if (e.data === "." || e.data === ",") {
-      e.preventDefault();
+      value = target.value.toString().replaceAll(",", ".");
+    } else if (target.value === "") {
+      value = null;
     } else {
       value = target.value.toString().replaceAll(",", ".");
     }

package/esm/ui/internals/Textarea.svelte

@@ -2,7 +2,7 @@
 import { scrollbar } from "../../theme";
 export let name = null;
 export let id = "";
-export let rows = 6;
+export let rows = 4;
 export let placeholder = "";
 export let focus = false;
 export let value = "";
@@ -57,5 +57,5 @@ function dispatchInput(value2) {
       // @ts-ignore
       dispatchInput(e.target.value)
     }}
-  />
+  ></textarea>
 {/if}

package/esm/vite/index.js

@@ -1,34 +1,33 @@
-import { mergeConfig } from 'vite';
+import {} from 'vite';
 import { kitRoutes } from 'vite-plugin-kit-routes';
 import { stripper } from 'vite-plugin-stripper';
 // import { Log } from '@kitql/helpers'
-// const toRemove = ['oslo/password', 'oslo', '@node-rs/argon2', '@node-rs/bcrypt']
+// const toRemove = ['@node-rs/argon2', '@node-rs/bcrypt']
 // oslo needs to be in the dependencies (not devDependencies) !!
-const toRemove = ['oslo/password', 'oslo'];
+// const toRemove = ['oslo/password', 'oslo']
 export function firstly(options) {
-    // const log = new Log('firstly')
-    // console.log(`toRemove`, toRemove)
+    // @ts-ignore
     return [
-        {
-            name: 'vite-plugin-firstly',
-            enforce: 'pre',
-            config: async (a) => {
-                return mergeConfig(a, {
-                    build: {
-                        // THE ERROR:
-                        // RollupError: Unexpected character '�' or Unexpected character '\u{7f}'
-                        // This code (A) is to fix in `build` mode
-                        rollupOptions: {
-                            external: toRemove,
-                        },
-                    },
-                    // This code (B) is to fix in `dev` mode
-                    optimizeDeps: {
-                        exclude: toRemove,
-                    },
-                });
-            },
-        },
+        // {
+        //   name: 'vite-plugin-firstly',
+        //   enforce: 'pre',
+        //   config: async (a) => {
+        //     return mergeConfig(a, {
+        //       build: {
+        //         // THE ERROR:
+        //         // RollupError: Unexpected character '�' or Unexpected character '\u{7f}'
+        //         // This code (A) is to fix in `build` mode
+        //         rollupOptions: {
+        //           external: toRemove,
+        //         },
+        //       },
+        //       // This code (B) is to fix in `dev` mode
+        //       optimizeDeps: {
+        //         exclude: toRemove,
+        //       },
+        //     })
+        //   },
+        // },
         // @ts-ignore
         ...kitRoutes({
             ...(options?.kitRoutes ?? {}),