build the package with Plate Editor

[zerosheepmoo]

Question

Why can PlateUI package work well even in NextJS environment (server-side client-side both)?
How do you handle with browser dependent code in bundled file?

Details

What I tried to do is build a wrapped editor library added some custom plugins.

The problem is the output is not valid in certain environment.
In particular, it does not work with nextjs environment.

I packaged with rollup with the configuration:

const resolveOptions = {
    extensions,
    mainFields: ["module", "main"],
    preferBuiltins: false,
    browser: true,
};

const plugins = [
    peerDepsExternal(),
    commonjs(),
    maintainedNodePolyfills(),
    nodeResolve(resolveOptions),
    typescript({
        // typescript peerDependency
        typescript: require("typescript"),
    }),
    // used by plateUI's Juice.
    json(),
];

and the output works well in CRA, but not in NextJS with following error:

ReferenceError: document is not defined
  100594 | 'tabSize', 'textIndent', // non-standard
  100595 | 'textRendering', 'textTransform', 'width', 'wordBreak'];
> 100596 | var isIE = !!document.documentElement.currentStyle;
...

I guess such code injected because of node builtins API polyfills.
I recognize that plateUI use legacy plugins, but I don't think it was not really different from new version of polyfills plugin.
How could you prevent from generating document object in bundled file?

[zbeyens]

I'd use plate-headless server-side, and both plate-headless and plate-ui client-side

[zerosheepmoo]

Awesome. Thanks for your kindness.
Could I ask two more questions?

1. Did yo use some special skills to bundle packages them separately? I did not understand how you can separate them into client-side and server-side with one rollup configs.

For example, in plate-image, you use FileReader api which cannot exists on nodejs runtime environment.
Because of that, rollup would inject some checking codes which use document namespace such as isIE I mentioned at above.
I am not sure with this, this might only happen at updated rollup plugins.

But still, when I saw your bundled file, there was no code for checking whether the environment is node or browser.
Did rollup automatically bundle for each packages without injecting checking codes where they did not need browser API?
or I might misunderstand for something in way to package.

2. Is the way you import Plate object from @udecode/plate intended?

@udecode/plate has two dependencies plate-headless and plate-ui.
And I just saw plate-headless and plate-ui and found that they have dependency plate-core for PlateEditor object in some deps. (ex: plate-headless - plate-alignment - ./transform/index - PlateEditor), but I could not find where for Plate object directly imported. I guess that the Plate came from the module plate-core that you imported at alignment because of all member exporting. In my point of view, It seems that it would be better you to explicitly import Plate object from @udecode/plate-core in @udecode/plate. However, I guess that you intended to minimize the dependency for maintenance. Am I right?

[zbeyens]

1. To be honest, I'm not a build expert. I've pulled most of the logic from other repos. Take a look at the rollup plugins here

   plate/rollup.config.js

   Line 39 in c24e0a2

   const plugins = [

2. true, Plate is from plate-core. Package splitting has been done mainly for decoupled versioning, build size not being an issue with tree-shaking nowadays.

[zerosheepmoo]

Thank you so much for reading the mess :)

By the way, I just realized that you use react-textarea-autosize package in image-plugin.
and this issue was reported.
I think it becomes including when trying to build a library wrapping with Plate.
I don't know why your pacakge does not occur this problem, anyway this is just for information.