javascript - Rollup + HoCs trädskakning

Jag försöker skapa ett komponentbibliotek med typescript och rollup.

Jag har en komponent, Canary.

function Canary() {
    ...
}

export default React.memo(Canary)

Notera hur Canary är inneslutet i en HoC (React.memo).

Jag har en annan komponent, SomeComponent

function SomeComponent() {
    ...
}

export default SomeComponent

Om jag skulle bygga mitt bibliotek med bara SomeComponent exporterad,

src/index.ts

export { default as SomeComponent } from './SomeComponent'

Biblioteket är trädskakningsbart. Men om jag lägger till en komponent som är inlindad i en HoC, misslyckas trädskakningen. Oavsett hur jag importerar SomeComponent från mitt bibliotek, följer Canary med och hamnar i bundlen.

Jag använder en variant av detta för att upptäcka om något är treeshakebart eller inte, modifierad för rollup.

Jag har hittat detta, som handlar om hur man kan ge hintar till verktyg som webpack. Jag har satt upp ett testprojekt med NextJS (webpack används internt), och lagt till sideEffects: false i mitt biblioteks package.json utan framgång - Dock, jag tror inte att det är min kod som bryter tree-shaking, jag tror det är React.memo HoC. Den behöver markeras som pure i den distribuerbara filen.

d.v.s. manuellt redigera utdata raden

var index = React.memo(Canary);

export { index as Canary }

till

var index = /*#__PURE__*/memo(Canary);

och att köra om treeshaking-testet lyckas.

Fråga Vad är det rätta sättet att signalera till Rollup att du vill markera något som rent? Är jag ens på rätt spår med detta?