Theo's Typesafe CultTTC
Theo's Typesafe Cult•3y ago•
1 reply
Paul

Tree Shaking with Good DX

I'm trying to see if there's a solution where I can have a great developer experience (DX) (Ability to call elements as children of the parent like <Table.Row>) but also tree shake my primitive UI components.

Given the following code...
const _Table = ({children}) => React.createElement("Table", {children});
const Head = ({children}) => React.createElement("Head", {children});
const Header = ({children}) => React.createElement("Th", {children});
const Body = ({children}) => React.createElement("TBody", {children});
// etc.

const Table = {Table: _Table, Head, Header, Body}
export default Table;


When importing, I'd like to use it like so... (best DX)
return (
  <Table.Table>
    <Table.Head>
    </Table.Head>
  </Table.Table>
)


My understanding is that importing it as the default won't tree-shake unused elements since I'm importing the whole Table object
import Table from "./Table";


But I also don't want to do something like this where I have to import all the elements at the top. This optimizes tree-shaking but decreases developer experience
import {TableTable, TableHead} from "./Table"

return (
  <TableTable>
    <TableHead>
    </TableHead>
  <TableTable>
)


The only alternative I can think of is...
// Table.tsx
// define the elements

const Table = {
  Table: _Table, 
  Head, 
  Header, 
  Body, 
  TableRoot: _Table,
  TableHead: Head,
  TableHeader: Header,
  TableBody: Body,
} 
export const Table;


Then when using it... you can choose to import it all or if you only need a small portion you can only import that element. But I think this somewhat defeats the whole tree shaking thing as it makes it much bigger in size when importing it all.
import Table from "./Table" // <- this makes it even bigger in size now I think
// or
import {TableRoot, TableHead} from "./Table"


Open to different people's ideas and thoughts on what the best approach is.
Was this page helpful?