⚗️(front) conditionaly install blocknote xl packages

[lunika]

Purpose

The blocknote xl packages are licensed under AGPL v3. We want to allow a reuser to build the project without them. For this, in a first step we don't list these packages in the dependencies but install them using a postinstall script.
This script is a node script looking in every package.json files under the apps directory, look if an extraDependencies key exists and if yes hten will install the listed dependencies after prompting the user if wants or not to install them.
Also an environment variable AUTO_INSTALL_EXTRA_DEPS can be used to explicitly install all the dependencies or to explicitly not install them. This will help to build an image with and without these dependencies. Moreover we also need thisin a CI context.

Screencast.From.2025-04-06.14-17-42.webm

Proposal

• ⚗️(front) conditionaly install blocknote xl packages
• rework the dockerfile to make it works
• rework the CI to make it works
• dynamically load these dependencies in the code and act if they are not present to not display the export feature.

[bzg]

My comment are just suggestions, not requested changes.

[bzg]

I suggest install-extras.js as a more explicit name.

[bzg]

I suggest this:

Do you want to install ${dependencyToInstall}? (y/n): 
These packages are dual-licensed by the author of BlockNote under
AGPL-3.0 or a proprietary license. If you install them, you need to
fulfill your licensing obligations.

[bzg]

I'd add this comment here:

// The XL packages are dual-licensed by the author of BlockNote under
// AGPL-3.0 or a proprietary license. If you install them, you need to
// fulfill your licensing obligations.

[AntoLC]

You don't need to do that, neither to have a conditional-install I think , just by setting a env var at build time and have a conditional import, with the tree shaking the packages will be excluded from the final build.

import dynamic from 'next/dynamic';

let Component = null;

if (process.env.WITH_AGPL_PACKAGES === 'true') {
  Component = dynamic(() => import('blocknote-xl-package'));
} else {
  Component = dynamic(() => import('blocknote-packag'));
}

export default function Whatever() {
  return <Component />;
}

Then here, before the yarn build:

docs/src/frontend/Dockerfile

Lines 42 to 45 in 4019132

	ARG SW_DEACTIVATED
	ENV NEXT_PUBLIC_SW_DEACTIVATED=${SW_DEACTIVATED}
	RUN yarn build

You have to add this env var:

...
ARG SW_DEACTIVATED
ENV NEXT_PUBLIC_SW_DEACTIVATED=${SW_DEACTIVATED}

ARG WITH_AGPL_PACKAGES 
ENV WITH_AGPL_PACKAGES =${WITH_AGPL_PACKAGES }

RUN yarn build
...

---

The final code just take what is used by the app, we don't have node_modules anymore in the image:

docs/src/frontend/Dockerfile

Lines 54 to 56 in 4019132

	COPY --from=impress-builder \
	/home/frontend/apps/impress/out \
	/usr/share/nginx/html

[virgile-dev]

Looks good to me! Thanks
Will it hide the UI associated with the feature when the person doing the yarn build says no ?