Rollup cannot do tree shaking on components generated via react-output-target.

[LabEG]

Rollup does not support /@PURE/ annotation for function right now.
As a result, tree shaking does not work on such a file.

But if the generated components are divided into files, 1 component per 1 file, then tree shaking works properly.

You can change the generator so that there is only one function in one file /@PURE/createReactComponent?

[sean-perkins]

Hello @LabEG thanks for bringing this issue to our attention.

So that I understand your request accurately, you would like an option on the react output target, so that when generating the react components, it would output a separate file for each component that it is defining?

i.e.:

src/components/button.ts

import { createReactComponent } from './react-component-lib';

import type { JSX } from '@myorg/package/components';

import { defineCustomElement } from '@myorg/package/components/button.js';

export const MyButton = /*@__PURE__*/createReactComponent<JSX.MyButton, HTMLMyButtonElement>('my-button', undefined, undefined, defineCustomElement);

src/components/label.ts

import { createReactComponent } from './react-component-lib';

import type { JSX } from '@myorg/package/components';

import { defineCustomElement } from '@myorg/package/components/label.js';

export const MyLabel = /*@__PURE__*/createReactComponent<JSX.MyLabel, HTMLMyLabelElement>('my-label', undefined, undefined, defineCustomElement);

If this is true, would you additionally need a global barrel file that exports each of the generated component files from a single entry point or would that be managed independently in your package?

[ionitron-bot]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of the output targets, please create a new issue and ensure the template is fully filled out.