Improve compilation speed (and potentially bundle size) (#801)

* Ensure sideEffects: false to enable additional tree shaking

* Use granular imports of Mantine specific components

* Ensure css is marked as sideEffect (mirror mantine config)

* Made imports more specific in UI libs

---------

Co-authored-by: Matthew Lipski <matthewlipski@gmail.com>

Author: timneutkens

packages/ariakit/src/input/Form.tsx

@@ -1,12 +1,12 @@
-import * as Ariakit from "@ariakit/react";
-import { assertEmpty } from "@blocknote/core";
+import { FormProvider as AriakitFormProvider } from "@ariakit/react";
 
+import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 
 export const Form = (props: ComponentProps["Generic"]["Form"]["Root"]) => {
   const { children, ...rest } = props;
 
   assertEmpty(rest);
 
-  return <Ariakit.FormProvider>{children}</Ariakit.FormProvider>;
+  return <AriakitFormProvider>{children}</AriakitFormProvider>;
 };

packages/ariakit/src/input/TextInput.tsx

@@ -1,4 +1,7 @@
-import * as Ariakit from "@ariakit/react";
+import {
+  FormInput as AriakitFormInput,
+  FormLabel as AriakitFormLabel,
+} from "@ariakit/react";
 
 import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
@@ -26,12 +29,10 @@ export const TextInput = forwardRef<
 
   return (
     <>
-      {props.label && (
-        <Ariakit.FormLabel name={name}>{label}</Ariakit.FormLabel>
-      )}
+      {props.label && <AriakitFormLabel name={name}>{label}</AriakitFormLabel>}
       <div className="bn-ak-input-wrapper">
         {icon}
-        <Ariakit.FormInput
+        <AriakitFormInput
           className={mergeCSSClasses("bn-ak-input", className || "")}
           ref={ref}
           name={name}

packages/ariakit/src/menu/Menu.tsx

@@ -1,4 +1,13 @@
-import * as Ariakit from "@ariakit/react";
+import {
+  CheckboxCheck as AriakitCheckboxCheck,
+  Menu as AriakitMenu,
+  MenuButton as AriakitMenuButton,
+  MenuButtonArrow as AriakitMenuButtonArrow,
+  MenuGroupLabel as AriakitMenuGroupLabel,
+  MenuItem as AriakitMenuItem,
+  MenuProvider as AriakitMenuProvider,
+  MenuSeparator as AriakitMenuSeparator,
+} from "@ariakit/react";
 
 import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
@@ -16,12 +25,12 @@ export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
   assertEmpty(rest);
 
   return (
-    <Ariakit.MenuProvider
+    <AriakitMenuProvider
       placement={position}
       setOpen={onOpenChange}
       virtualFocus={true}>
       {children}
-    </Ariakit.MenuProvider>
+    </AriakitMenuProvider>
   );
 };
 
@@ -39,12 +48,12 @@ export const MenuDropdown = forwardRef<
   assertEmpty(rest);
 
   return (
-    <Ariakit.Menu
+    <AriakitMenu
       unmountOnHide={true}
       className={mergeCSSClasses("bn-ak-menu", className || "")}
       ref={ref}>
       {children}
-    </Ariakit.Menu>
+    </AriakitMenu>
   );
 });
 
@@ -59,27 +68,27 @@ export const MenuItem = forwardRef<
 
   if (subTrigger) {
     return (
-      <Ariakit.MenuButton
-        render={<Ariakit.MenuItem />}
+      <AriakitMenuButton
+        render={<AriakitMenuItem />}
         className={mergeCSSClasses("bn-ak-menu-item", className || "")}
         ref={ref}
         onClick={onClick}>
         {icon}
         {children}
-        <Ariakit.MenuButtonArrow />
-        {checked !== undefined && <Ariakit.CheckboxCheck checked={checked} />}
-      </Ariakit.MenuButton>
+        <AriakitMenuButtonArrow />
+        {checked !== undefined && <AriakitCheckboxCheck checked={checked} />}
+      </AriakitMenuButton>
     );
   }
   return (
-    <Ariakit.MenuItem
+    <AriakitMenuItem
       className={mergeCSSClasses("bn-ak-menu-item", className || "")}
       ref={ref}
       onClick={onClick}>
       {icon}
       {children}
-      {checked !== undefined && <Ariakit.CheckboxCheck checked={checked} />}
-    </Ariakit.MenuItem>
+      {checked !== undefined && <AriakitCheckboxCheck checked={checked} />}
+    </AriakitMenuItem>
   );
 });
 
@@ -92,11 +101,11 @@ export const MenuLabel = forwardRef<
   assertEmpty(rest);
 
   return (
-    <Ariakit.MenuGroupLabel
+    <AriakitMenuGroupLabel
       className={mergeCSSClasses("bn-ak-group-label", className || "")}
       ref={ref}>
       {children}
-    </Ariakit.MenuGroupLabel>
+    </AriakitMenuGroupLabel>
   );
 });
 
@@ -111,7 +120,7 @@ export const MenuTrigger = (
     return children;
   }
 
-  return <Ariakit.MenuButton render={children as any}></Ariakit.MenuButton>;
+  return <AriakitMenuButton render={children as any}></AriakitMenuButton>;
 };
 
 export const MenuDivider = forwardRef<
@@ -123,7 +132,7 @@ export const MenuDivider = forwardRef<
   assertEmpty(rest);
 
   return (
-    <Ariakit.MenuSeparator
+    <AriakitMenuSeparator
       className={mergeCSSClasses("bn-ak-separator", className || "")}
       ref={ref}
     />

packages/ariakit/src/panel/Panel.tsx

@@ -1,4 +1,9 @@
-import * as Ariakit from "@ariakit/react";
+import {
+  Tab as AriakitTab,
+  TabList as AriakitTabList,
+  TabPanel as AriakitTabPanel,
+  TabProvider as AriakitTabProvider,
+} from "@ariakit/react";
 
 import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
@@ -17,14 +22,13 @@ export const Panel = forwardRef<
     loading, // TODO: implement loading
     ...rest
   } = props;
-
   assertEmpty(rest);
 
   return (
     <div
       className={mergeCSSClasses("bn-ak-wrapper", className || "")}
       ref={ref}>
-      <Ariakit.TabProvider
+      <AriakitTabProvider
         defaultSelectedId={defaultOpenTab}
         selectedId={openTab}
         setActiveId={(activeId) => {
@@ -34,22 +38,22 @@ export const Panel = forwardRef<
         }}>
         {/*{loading && <LoadingOverlay visible={loading} />}*/}
 
-        <Ariakit.TabList className={"bn-ak-tab-list"}>
+        <AriakitTabList className={"bn-ak-tab-list"}>
           {tabs.map((tab) => (
-            <Ariakit.Tab className={"bn-ak-tab"} id={tab.name} key={tab.name}>
+            <AriakitTab className={"bn-ak-tab"} id={tab.name} key={tab.name}>
               {tab.name}
-            </Ariakit.Tab>
+            </AriakitTab>
           ))}
-        </Ariakit.TabList>
+        </AriakitTabList>
 
         <div className={"bn-ak-panels"}>
           {tabs.map((tab) => (
-            <Ariakit.TabPanel tabId={tab.name} key={tab.name}>
+            <AriakitTabPanel tabId={tab.name} key={tab.name}>
               {tab.tabPanel}
-            </Ariakit.TabPanel>
+            </AriakitTabPanel>
           ))}
         </div>
-      </Ariakit.TabProvider>
+      </AriakitTabProvider>
     </div>
   );
 });

packages/ariakit/src/panel/PanelButton.tsx

@@ -1,4 +1,4 @@
-import * as Ariakit from "@ariakit/react";
+import { Button as AriakitButton } from "@ariakit/react";
 
 import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
@@ -13,12 +13,12 @@ export const PanelButton = forwardRef<
   assertEmpty(rest);
 
   return (
-    <Ariakit.Button
+    <AriakitButton
       className={mergeCSSClasses("bn-ak-button", className || "")}
       onClick={onClick}
       aria-label={label}
       ref={ref}>
       {children}
-    </Ariakit.Button>
+    </AriakitButton>
   );
 });

packages/ariakit/src/panel/PanelFileInput.tsx

@@ -1,6 +1,9 @@
-import * as Ariakit from "@ariakit/react";
-import { assertEmpty } from "@blocknote/core";
+import {
+  FormInput as AriakitFormInput,
+  FormProvider as AriakitFormProvider,
+} from "@ariakit/react";
 
+import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -13,8 +16,8 @@ export const PanelFileInput = forwardRef<
   assertEmpty(rest);
 
   return (
-    <Ariakit.FormProvider>
-      <Ariakit.FormInput
+    <AriakitFormProvider>
+      <AriakitFormInput
         className={className}
         ref={ref}
         name={"panel-input"}
@@ -24,6 +27,6 @@ export const PanelFileInput = forwardRef<
         onChange={async (e) => onChange?.(e.target.files![0])}
         placeholder={placeholder}
       />
-    </Ariakit.FormProvider>
+    </AriakitFormProvider>
   );
 });

packages/ariakit/src/panel/PanelTextInput.tsx

@@ -1,4 +1,7 @@
-import * as Ariakit from "@ariakit/react";
+import {
+  FormInput as AriakitFormInput,
+  FormProvider as AriakitFormProvider,
+} from "@ariakit/react";
 
 import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
@@ -13,8 +16,8 @@ export const PanelTextInput = forwardRef<
   assertEmpty(rest);
 
   return (
-    <Ariakit.FormProvider>
-      <Ariakit.FormInput
+    <AriakitFormProvider>
+      <AriakitFormInput
         className={mergeCSSClasses("bn-ak-input", className || "")}
         name={"panel-input"}
         value={value}
@@ -24,6 +27,6 @@ export const PanelTextInput = forwardRef<
         data-test={"embed-input"}
         ref={ref}
       />
-    </Ariakit.FormProvider>
+    </AriakitFormProvider>
   );
 });

packages/ariakit/src/popover/Popover.tsx

@@ -1,4 +1,8 @@
-import * as Ariakit from "@ariakit/react";
+import {
+  Popover as AriakitPopover,
+  PopoverDisclosure as AriakitPopoverDisclosure,
+  PopoverProvider as AriakitPopoverProvider,
+} from "@ariakit/react";
 
 import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
@@ -12,7 +16,7 @@ export const PopoverTrigger = forwardRef<
 
   assertEmpty(rest);
 
-  return <Ariakit.PopoverDisclosure render={children as any} ref={ref} />;
+  return <AriakitPopoverDisclosure render={children as any} ref={ref} />;
 });
 
 export const PopoverContent = forwardRef<
@@ -24,11 +28,11 @@ export const PopoverContent = forwardRef<
   assertEmpty(rest);
 
   return (
-    <Ariakit.Popover
+    <AriakitPopover
       className={mergeCSSClasses("bn-ak-popover", className || "")}
       ref={ref}>
       {children}
-    </Ariakit.Popover>
+    </AriakitPopover>
   );
 });
 
@@ -40,8 +44,8 @@ export const Popover = (
   assertEmpty(rest);
 
   return (
-    <Ariakit.PopoverProvider open={opened} placement={position}>
+    <AriakitPopoverProvider open={opened} placement={position}>
       {children}
-    </Ariakit.PopoverProvider>
+    </AriakitPopoverProvider>
   );
 };

packages/ariakit/src/sideMenu/SideMenu.tsx

@@ -1,6 +1,6 @@
-import * as Ariakit from "@ariakit/react";
-import { assertEmpty } from "@blocknote/core";
+import { Group as AriakitGroup } from "@ariakit/react";
 
+import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -13,8 +13,8 @@ export const SideMenu = forwardRef<
   assertEmpty(rest, false);
 
   return (
-    <Ariakit.Group className={className} ref={ref} {...rest}>
+    <AriakitGroup className={className} ref={ref} {...rest}>
       {children}
-    </Ariakit.Group>
+    </AriakitGroup>
   );
 });

packages/ariakit/src/sideMenu/SideMenuButton.tsx

@@ -1,4 +1,4 @@
-import * as Ariakit from "@ariakit/react";
+import { Button as AriakitButton } from "@ariakit/react";
 
 import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
@@ -25,7 +25,7 @@ export const SideMenuButton = forwardRef<
   assertEmpty(rest, false);
 
   return (
-    <Ariakit.Button
+    <AriakitButton
       onDragEnd={onDragEnd}
       onDragStart={onDragStart}
       draggable={draggable}
@@ -39,6 +39,6 @@ export const SideMenuButton = forwardRef<
       {...rest}>
       {icon}
       {children}
-    </Ariakit.Button>
+    </AriakitButton>
   );
 });