bug: Tree shaking is not working with React output target

[arvindanta]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

2.9

Stencil Framework Output Target

React

Stencil Framework Output Target Version

0.3.1

Current Behavior

Hi, I am using react output target to generate a tree shakable bundle of the React components. Stencil config file below.

      componentCorePackage: `@freshworks/${packageName}`, // name in the package.json should be used
      proxiesFile: './crayons-react/components.ts',
      customElementsDir: 'dist/components',
      includeImportCustomElements: true,
    }) 

Usage in the consuming app,
import { FwButton } from "@freshworks/crayons/react";

when I run npm run build, in the main script that gets bundled, I see code for all the components added and tree shaking is not working.

Expected Behavior

Tree shaking should work fine.

Steps to Reproduce

Stencil config file below.

      componentCorePackage: `@freshworks/${packageName}`, // name in the package.json should be used
      proxiesFile: './crayons-react/components.ts',
      customElementsDir: 'dist/components',
      includeImportCustomElements: true,
    })

Usage in the consuming CRA app,
import { FwButton } from "@freshworks/crayons/react";

when I run npm run build, in the main script that gets bundled, I see code for all the components added and tree shaking is not working.

Code Reproduction URL

https://github.com/freshworks/crayons/

Additional Information

The issue is because all the components are imported and exported from the same file.

export const FwAccordionBody = /*@__PURE__*/createReactComponent<JSX.FwAccordionBody, HTMLFwAccordionBodyElement>('fw-accordion-body', undefined, undefined, defineFwAccordionBody);

Fix - https://github.com/arvindanta/stencil-react-wrapper/blob/master/src/output-react.ts#L155

I had solved this by forking this repo and exported each component in a separate file and they are just imported here. Can we please check on this ?

component.ts

import { FwAccordion } from './FwAccordion'
import { FwAccordionBody } from './FwAccordionBody'

FwAccordion file

// @ts-nocheck
/* eslint-disable */
/* tslint:disable */
/* auto-generated react proxies */
import { createReactComponent } from './react-component-lib';

import type { JSX } from '@freshworks/crayons/dist/components';

import { FwAccordion as FwAccordionCmp, defineCustomElement as defineCustomElementFwAccordion } from '@freshworks/crayons/dist/components/fw-accordion.js';
export const FwAccordion = /*@__PURE__*/createReactComponent<JSX.FwAccordion, HTMLFwAccordionElement>('fw-accordion', undefined, undefined, FwAccordionCmp, defineCustomElementFwAccordion);

No response

[arvindanta]

This issue is similar to #222

[sean-perkins]

@arvindanta thanks for opening this issue and confirming that splitting the generated components into separate files resolves the issue.

I'll capture as a bug and prioritize 👍

[R-Bower]

Is this still being prioritized? I still can't get my React output to tree shake. I'd love to adopt this library and port over my components, but this is a major blocker.

Is there anything that I can do to help?

[arvindanta]

@R-Bower can you try this out -https://github.com/arvindanta/stencil-react-wrapper

I forked the react-output-target and added changes to enable tree shakability.

We are using this in @freshworks/crayons project .

@freshworks/crayons/react gives you treeshakable components.

[R-Bower]

I'll give it a shot, thanks!

[R-Bower]

@R-Bower can you try this out -https://github.com/arvindanta/stencil-react-wrapper

I forked the react-output-target and added changes to enable tree shakability.

We are using this in @freshworks/crayons project .

@freshworks/crayons/react gives you treeshakable components.

The components don't render in my docusaurus application, although it works in NextJS.