[Accordion] Tree shaking issues

[schmolie]

Hi!

I use rollup to bundle a component library that exports multiple components. I'm investigating the possibility to make use of radix components and started looking into the accordion.

I created AccordionFilter components which only renders @radix-ui/react-accordion components with className to add styling. When I try to bundle my package it's no longer tree shakeable when I include AccordionFilter components.

Since I'm unsure on what's happening I wanted to ask here. Maybe I'm missing something obvious?

src/index.ts

...
export { default as Checkbox } from './components/Checkbox'
export * as Select from './components/Select'
export * as AccordionFilter from './components/AccordionFilter'

rollup.config.js

import commonjs from '@rollup/plugin-commonjs'
import multi from '@rollup/plugin-multi-entry'
import resolve from '@rollup/plugin-node-resolve'
import autoprefixer from 'autoprefixer'
import peerDepsExternal from 'rollup-plugin-peer-deps-external'
import { terser } from 'rollup-plugin-terser'
import typescript from 'rollup-plugin-typescript2'
import { getBabelOutputPlugin } from '@rollup/plugin-babel'
import rollupStyles from 'rollup-plugin-styles'

import packageJSON from './package.json'

export default {
  input: 'src/index.ts',
  output: [
    {
      file: packageJSON.main,
      format: 'cjs',
      sourcemap: true
    },
    {
      file: packageJSON.module,
      format: 'esm',
      sourcemap: true
    }
  ],
  plugins: [
    peerDepsExternal(),
    resolve(),
    commonjs(),
    typescript({
      useTsconfigDeclarationDir: true,
      tsconfigOverride: {
        exclude: [
          'src/doc-pages',
          'src/enums',
          'src/utils',
          'storybook-static',
          'src/**/*.stories.tsx',
          'src/**/*.test.tsx'
        ]
      }
    }),
    getBabelOutputPlugin({
      presets: ['@babel/preset-react']
    }),
    rollupStyles({
      modules: true,
      mode: ['inject', { treeshakeable: true }],
      plugins: [autoprefixer]
    }),
    multi(),
    terser({
      mangle: false,
      format: {
        comments: /^\**!|@preserve|__PURE__|@license|@cc_on/i,
        preserve_annotations: true
      }
    })
  ]
}

Build with AccordionFilter components followed by npx agadoo

npx agadoo

'react' is imported by build/index.esm.js, but could not be resolved – treating it as an external dependency
'useLayoutEffect' and 'useReducer' are imported from external module 'react' but never used
import * as React__default from 'react';
import React__default__default, { useContext, forwardRef, Children, createElement, Fragment, isValidElement, cloneElement, createContext, useMemo, useCallback, useEffect, useState, useRef } from 'react';

const r$1=React__default["useId".toString()]||(()=>{});function composeRefs(...o){return e=>o.forEach((o=>function(o,e){"function"==typeof o?o(e):null!=o&&(o.current=e);}(o,e)))}function useComposedRefs(...e){return useCallback(composeRefs(...e),e)}function _extends(){return _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key]);}return target},_extends.apply(this,arguments)}const Slot=/*#__PURE__*/forwardRef(((e,o)=>{const{children:a,...s}=e;return Children.toArray(a).some(l)?/*#__PURE__*/createElement(Fragment,null,Children.map(a,(e=>l(e)?/*#__PURE__*/createElement(n,_extends({},s,{ref:o}),e.props.children):e))):/*#__PURE__*/createElement(n,_extends({},s,{ref:o}),a)}));Slot.displayName="Slot";const n=/*#__PURE__*/forwardRef(((r,n)=>{const{children:l,...a}=r;/*#__PURE__*/
return isValidElement(l)?/*#__PURE__*/cloneElement(l,{...o(a,l.props),ref:composeRefs(n,l.ref)}):Children.count(l)>1?Children.only(null):null}));n.displayName="SlotClone";const Slottable=({children:e})=>/*#__PURE__*/createElement(Fragment,null,e);function l(e){/*#__PURE__*/
return isValidElement(e)&&e.type===Slottable}function o(e,t){const r={...t};for(const n in t){const l=e[n],o=t[n];/^on[A-Z]/.test(n)?r[n]=(...e)=>{null==o||o(...e),null==l||l(...e);}:"style"===n?r[n]={...l,...o}:"className"===n&&(r[n]=[l,o].filter(Boolean).join(" "));}return {...e,...r}}const Primitive=["a","button","div","h2","h3","img","li","nav","ol","p","span","svg","ul"].reduce(((o,i)=>({...o,[i]:/*#__PURE__*/forwardRef(((o,m)=>{const{asChild:a,...s}=o,n=a?Slot:i;return useEffect((()=>{window[Symbol.for("radix-ui")]=!0;}),[]),/*#__PURE__*/createElement(n,_extends({},s,{ref:m}))}))})),{});function useCallbackRef(r){const t=useRef(r);return useEffect((()=>{t.current=r;})),useMemo((()=>(...e)=>{var r;return null===(r=t.current)||void 0===r?void 0:r.call(t,...e)}),[])}function useControllableState({prop:o,defaultProp:r,onChange:n=(()=>{})}){const[a,u]=function({defaultProp:o,onChange:r}){const n=useState(o),[a]=n,u=useRef(a),c=useCallbackRef(r);return useEffect((()=>{u.current!==a&&(c(a),u.current=a);}),[a,u,c]),n}({defaultProp:r,onChange:n}),c=void 0!==o,f=c?o:a,l=useCallbackRef(n);return [f,useCallback((e=>{if(c){const t=e,r="function"==typeof e?t(o):e;r!==o&&l(r);}else u(e);}),[c,o,u,l])]}function createContextScope(n,o=[]){let r=[];const c=()=>{const t=r.map((t=>/*#__PURE__*/createContext(t)));return function(o){const r=(null==o?void 0:o[n])||t;return useMemo((()=>({[`__scope${n}`]:{...o,[n]:r}})),[o,r])}};return c.scopeName=n,[function(t,o){const c=/*#__PURE__*/createContext(o),u=r.length;function s(t){const{scope:o,children:r,...s}=t,i=(null==o?void 0:o[n][u])||c,a=useMemo((()=>s),Object.values(s));/*#__PURE__*/
return createElement(i.Provider,{value:a},r)}return r=[...r,o],s.displayName=t+"Provider",[s,function(r,s){const i=(null==s?void 0:s[n][u])||c,a=useContext(i);if(a)return a;if(void 0!==o)return o;throw new Error(`\`${r}\` must be used within \`${t}\``)}]},t(c,...o)]}function t(...t){const n=t[0];if(1===t.length)return n;const o=()=>{const o=t.map((e=>({useScope:e(),scopeName:e.scopeName})));return function(t){const r=o.reduce(((e,{useScope:n,scopeName:o})=>({...e,...n(t)[`__scope${o}`]})),{});return useMemo((()=>({[`__scope${n.scopeName}`]:r})),[r])}};return o.scopeName=n.scopeName,o}function composeEventHandlers(e,n,{checkForDefaultPrevented:t=!0}={}){return function(r){if(null==e||e(r),!1===t||!r.defaultPrevented)return null==n?void 0:n(r)}}const [p,d]=createContextScope("Collapsible"),[u$1,m$1]=p("Collapsible");const s=["Home","End","ArrowDown","ArrowUp"],[u,m,f]=function(c){const n=c+"CollectionProvider",[l,i]=createContextScope(n),[f,a]=l(n,{collectionRef:{current:null},itemMap:new Map}),m=c+"CollectionSlot",s=/*#__PURE__*/React__default__default.forwardRef(((t,c)=>{const{scope:n,children:l}=t,f=useComposedRefs(c,a(m,n).collectionRef);/*#__PURE__*/
return React__default__default.createElement(Slot,{ref:f},l)})),p=c+"CollectionItemSlot",d="data-radix-collection-item",R=/*#__PURE__*/React__default__default.forwardRef(((t,c)=>{const{scope:n,children:l,...i}=t,f=React__default__default.useRef(null),u=useComposedRefs(c,f),m=a(p,n);return React__default__default.useEffect((()=>(m.itemMap.set(f,{ref:f,...i}),()=>{m.itemMap.delete(f);}))),/*#__PURE__*/React__default__default.createElement(Slot,{[d]:"",ref:u},l)}));return [{Provider:e=>{const{scope:r,children:t}=e,c=React__default__default.useRef(null),n=React__default__default.useRef(new Map).current;/*#__PURE__*/
return React__default__default.createElement(f,{scope:r,itemMap:n,collectionRef:c},t)},Slot:s,ItemSlot:R},function(e){const r=a(c+"CollectionConsumer",e);return React__default__default.useCallback((()=>{const e=r.collectionRef.current;if(!e)return [];const t=Array.from(e.querySelectorAll(`[${d}]`));return Array.from(r.itemMap.values()).sort(((e,r)=>t.indexOf(e.ref.current)-t.indexOf(r.ref.current)))}),[r.collectionRef,r.itemMap])},i]}("Accordion"),[A,g]=createContextScope("Accordion",[f,d]),b=d(),Accordion$1=/*#__PURE__*/React__default__default.forwardRef(((e,o)=>{const{type:r,...t}=e,c=t,n=t;/*#__PURE__*/
return React__default__default.createElement(u.Provider,{scope:e.__scopeAccordion},"multiple"===r?/*#__PURE__*/React__default__default.createElement(I,_extends({},n,{ref:o})):/*#__PURE__*/React__default__default.createElement(y,_extends({},c,{ref:o})))}));Accordion$1.propTypes={type(e){const o=e.value||e.defaultValue;return e.type&&!["single","multiple"].includes(e.type)?new Error("Invalid prop `type` supplied to `Accordion`. Expected one of `single | multiple`."):"multiple"===e.type&&"string"==typeof o?new Error("Invalid prop `type` supplied to `Accordion`. Expected `single` when `defaultValue` or `value` is type `string`."):"single"===e.type&&Array.isArray(o)?new Error("Invalid prop `type` supplied to `Accordion`. Expected `multiple` when `defaultValue` or `value` is type `string[]`."):null}};const [x,v]=A("Accordion"),[E,w]=A("Accordion",{collapsible:!1}),y=/*#__PURE__*/React__default__default.forwardRef(((e,o)=>{const{value:r,defaultValue:t,onValueChange:n=(()=>{}),collapsible:i=!1,...a}=e,[l,s]=useControllableState({prop:r,defaultProp:t,onChange:n});/*#__PURE__*/
return React__default__default.createElement(x,{scope:e.__scopeAccordion,value:l?[l]:[],onItemOpen:s,onItemClose:React__default__default.useCallback((()=>i&&s("")),[i,s])},/*#__PURE__*/React__default__default.createElement(E,{scope:e.__scopeAccordion,collapsible:i},/*#__PURE__*/React__default__default.createElement(C,_extends({},a,{ref:o}))))})),I=/*#__PURE__*/React__default__default.forwardRef(((e,o)=>{const{value:r,defaultValue:t,onValueChange:n=(()=>{}),...i}=e,[a=[],l]=useControllableState({prop:r,defaultProp:t,onChange:n}),s=React__default__default.useCallback((e=>l(((o=[])=>[...o,e]))),[l]),u=React__default__default.useCallback((e=>l(((o=[])=>o.filter((o=>o!==e))))),[l]);/*#__PURE__*/
return React__default__default.createElement(x,{scope:e.__scopeAccordion,value:a,onItemOpen:s,onItemClose:u},/*#__PURE__*/React__default__default.createElement(E,{scope:e.__scopeAccordion,collapsible:!0},/*#__PURE__*/React__default__default.createElement(C,_extends({},i,{ref:o}))))})),[_,h]=A("Accordion"),C=/*#__PURE__*/React__default__default.forwardRef(((e,o)=>{const{__scopeAccordion:r,disabled:c,...a}=e,f=useComposedRefs(React__default__default.useRef(null),o),A=m(r),g=composeEventHandlers(e.onKeyDown,(e=>{var o;if(!s.includes(e.key))return;const r=e.target,t=A().filter((e=>{var o;return !(null!==(o=e.ref.current)&&void 0!==o&&o.disabled)})),c=t.findIndex((e=>e.ref.current===r)),n=t.length;if(-1===c)return;e.preventDefault();let i=c;switch(e.key){case"Home":i=0;break;case"End":i=n-1;break;case"ArrowDown":i=c+1;break;case"ArrowUp":i=c-1,i<0&&(i=n-1);}null===(o=t[i%n].ref.current)||void 0===o||o.focus();}));/*#__PURE__*/
return React__default__default.createElement(_,{scope:r,disabled:c},/*#__PURE__*/React__default__default.createElement(u.Slot,{scope:r},/*#__PURE__*/React__default__default.createElement(Primitive.div,_extends({},a,{ref:f,onKeyDown:c?void 0:g}))))})),[R,k]=A("AccordionItem");

Failed to tree-shake build/index.esm.js

Build without AccordionFilter components.

npx agadoo

'react' is imported by build/index.esm.js, but could not be resolved – treating it as an external dependency
'createElement' is imported from external module 'react' but never used
import 'react';

Success! build/index.esm.js is fully tree-shakeable

Thanks for taking the time and for an awesome library!

[benoitgrelard]

Hi @schmolie,

I am not familiar with agadoo, and I'm not sure what the output should look like or how to validate what's working or not.
What do you mean by "it's not longer tree-shakeable"?
What isn't?
Compared to what?

[schmolie]

Hi! @benoitgrelard

Thanks for your reply!

agadoo is a library that I use to check if my library is tree-shakeable. I also verify this in a create react app where I import components from my library, build the app and confirm that only code that is needed is included in the create react app's build.

// Select does not render `@radix-ui/accordion-react` components
// AccordionFilter renders `@radix-ui/accordion-react` components

import {
  Select,
  // AccordionFilter
} from  '@my-library' 

function App() {
  return (
    <Select.Root name="department">
      <Select.Option value="option-1">Option 1</Select.Option>
      <Select.Option value="option-2">Option 2</Select.Option>
    </Select.Root>
  )
}

export default App

I mean that when I import a component from my library that does not render any @radix-ui/accordion-react components (like the example above) code from radix is included in the create react app's main.js build file.

I can see that you annotate pure functions they just don't seem to be dropped when they are not imported. With that being said, I could be missing something in my rollup config maybe it does something with your code that it shouldn't when I build my library.

If you don't have an idea I will continue investigating.

[benoitgrelard]

Unfortunately I am not sure I can help with regards to all the build tooling as it's not my one of my strongest skills.
As far as I can tell, our lib is tree-shakeable, so it might be something to do with the way you are bundling yours.
Hopefully others can help!

✌️

[PedroAugustoRamalhoDuarte]

Hello @schmolie, did you resolve this issue? I have a similar issue with headlessui and I cannot make my component library tree-shakeable