>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3562026. --> Reported by: [wotnak](https://www.drupal.org/user/3558113) Related to !434 >>> <h3 id="overview">Overview</h3> <p>Canvas/XB started with a single JS package for UI, then CLI was added, and later more packages like <code>@drupal-canvas/create</code> or <code>@drupal-canvas/eslint-config</code>. Additional packages were added incrementally without setting up proper monorepo tooling for JS packages, and now with multiple packages that start to depend on each other, it starts to be more complicated to work with, maintain and publishing new versions (which is currently done manually).</p> <h3 id="proposed-resolution">Proposed resolution</h3> <ol> <li>Add all packages to the root project workspace. <ul> <li>It is already done for most packages other than <code>ui</code> and <code>ui/lib/astro-hydration</code>.</li> <li><code>astro-hydration</code> will be added to the root workspace in <a href="https://drupal.org/i/3560419">https://drupal.org/i/3560419</a></li> <li>For the UI package, this may be a bit more complicated since npm workspaces don't work well when one package is nested in another, like <code>ui/lib/astro-hydration</code> is currently nested in <code>ui/</code>. Maybe we could move <code>astro-hydration</code> to <code>packages/astro-hydration</code>, add it as a dependency of <code>ui</code> and adjust <code>ui</code> build script to copy dist files of <code>astro-hydration</code> to expected location in <code>ui/lib/astro-hydration/dist</code>. Adding ui to the root npm workspace will also require changes to Gitlab CI. Currently <code>ui/node_modules/</code> is shared between CI jobs as an artifact, with ui in root workspace dependencies will be in the project root node_modules, and when installed for all packages may weight more than the current artifact size limit in GItlab CI.</li> </ul> </li><li>Move <code>cli</code> into <code>packages/cli</code>, so that the only packages outside the <code>packages/</code> directory are <code>ui</code> since its path is already used in many places in PHP code, and user docs which are nested in the general <code>docs/</code> dir.</li> <li>If possible unify linting configuration. Currently packages under <code>ui/</code> have different linting configurations than the rest of the repo.</li> <li>Create base TypeScript config in the project root or in internal (not published to npm package) that all packages will extend to provide a single place for configuring base TS options.</li> <li>Configure <a href="https://turborepo.com/">Turborepo</a> for managing JS packages in the monorepo. It will simplify working with packages that depend on each other as well as provide a caching layer and parallelization for task execution, which should speed up working with multiple packages.</li> <li>Refactor Gitlab CI pipelines configuration to make use of the new monorepo setup and tooling.</li> <li>Create Gitlab CI jobs for publishing npm packges, similar to the existing <a href="https://git.drupalcode.org/project/canvas/-/blob/aebb7999852428ac22f2367d8f1fefa566741a60/.gitlab-ci.yml#L652">CLI Publish</a> job, for all packages from the repo that are published to npmjs.com. So that new versions of the packages will be automatically published to npm after tagging them in the repo.</li> </ol> <table> <thead> <tr> <th>package</th> <th>current directory</th> <th>version tag prefix</th> </tr> </thead> <tbody> <tr> <td>docs</td> <td><code>docs/user/</code></td> <td>none - package is not published separately</td> </tr> <tr> <td><a href="https://www.npmjs.com/package/@drupal-canvas/cli">@drupal-canvas/cli</a></td> <td><code>cli/</code></td> <td><code>cli-</code></td> </tr> <tr> <td><a href="https://www.npmjs.com/package/@drupal-canvas/create">@drupal-canvas/create</a></td> <td><code>packages/create/</code></td> <td><code>create-</code></td> </tr> <tr> <td><a href="https://www.npmjs.com/package/@drupal-canvas/eslint-config">@drupal-canvas/eslint-config</a></td> <td><code>packages/eslint-config/</code></td> <td><code>eslint-config-</code></td> </tr> <tr> <td><a href="https://www.npmjs.com/package/@drupal-canvas/extensions">@drupal-canvas/extensions</a></td> <td><code>packages/extensions/</code></td> <td><code>extensions-</code></td> </tr> <tr> <td>@drupal-canvas/test-utils</td> <td><code>packages/test-utils/</code></td> <td>none - package is not published separately</td> </tr> <tr> <td>@drupal-canvas/ui</td> <td><code>ui/</code></td> <td>none - package is not published separately</td> </tr> <tr> <td>@drupal-canvas/astro-hydration</td> <td><code>ui/lib/astr-hydration/</code></td> <td>none - package is not published separately</td> </tr> </tbody> </table> <p>(In <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/canvas/-/work_items/3560419" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3560419</a></span> there are two more packages in the works <code>drupal-canvas</code> and <code>@drupal-canvas/vite-plugin</code>.</p> > Related issue: [Issue #3552788](https://www.drupal.org/node/3552788)