Import of prism should be optional

[linonetwo]

The cause is these lines:

https://github.com/udecode/plate/blob/943c9c6864d034068d33d755bfc725b2bcd1196a/packages/nodes/code-block/src/decorateCodeLine.ts#L12

This will compile to an IIFE, which is a side effect that disables the tree shaking of the (nearly) entire package.

I think this file should be optional (maybe extract to a separate package like @udecode/plate-code-block-prism ? Or remove the import of this file from index.ts, and compile it to a separate prism.dist.js file in the npm)

Currently, a workaround is to copy the code to user side repo. But some plate packages require the constant ELEMENT_CODE_BLOCK from https://github.com/udecode/plate/blob/943c9c6864/packages/nodes/code-block/src/constants.ts ,

└─┬ @udecode/[email protected]
  ├─┬ @udecode/[email protected]
  │ ├─┬ @udecode/[email protected]
  │ │ └── @udecode/[email protected] deduped
  │ ├── @udecode/[email protected]
  │ └─┬ @udecode/[email protected]
  │   └── @udecode/[email protected] deduped
  └─┬ @udecode/[email protected]
    └─┬ @udecode/[email protected]
      └── @udecode/[email protected] deduped

which make it impossible to get rid of this dependency without copying lots of code. So I think it is better to avoid the import of prism somehow.

P.S. I'm using codemirror to render the codeblock and use its highlight solution.

[linonetwo]

And I also curious about why @udecode/plate-headless - @udecode/plate-serializer-md gets bundled and takes a large space, while I didn't use them.

% npm ls @udecode/plate-serializer-md               
└─┬ @udecode/[email protected]
  └─┬ @udecode/[email protected]
    └── @udecode/[email protected]

% npm ls @udecode/plate-headless                           
└─┬ @udecode/[email protected]
  ├── @udecode/[email protected]
  └─┬ @udecode/[email protected]
    └── @udecode/[email protected] deduped

Seem to be this in @udecode/plate-serializer-md

[zbeyens]

I agree with the new package proposal, to exclude from @udecode/plate

[linonetwo]

After a dig, I also found considerable things in hr

When using

import { ELEMENT_HR } from '@udecode/plate-horizontal-rule';
import { HrElement } from '@udecode/plate-ui-horizontal-rule';

We will have these things that take up 49 kb, and I think they are duplicated with other shims. (And needing shim for using process in browser in HR element is weird)

[linonetwo]

After copying the code of @udecode/plate-ui to my side and commenting out the code block and table plugins, I'm able to achieve a pleased tree shaking.

Some md parser related things are imported by @udecode/plate-headless (maybe included in some IIFE or closure so even I'm not using md syntax, they still gets bundled. So I import them from each separated packages instead to solve this.

Anyway, thank you for making this amazing ecosystem!

[zbeyens]

Thanks for reporting your investigation!

I'm planning to remove @udecode/plate-ui from @udecode/plate once the new UI is done