>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3571534. --> Reported by: [balintbrews](https://www.drupal.org/user/613760) Related to !614 >>> <p>Implement a new discovery mechanism for Code Components in local codebases that finds <code>component.yml</code> files anywhere in the directory structure &mdash; or at least anywhere within a single directory, if that turns out to be more feasible. Support the following scenarios:</p> <ol> <li>When <code>[component-name].component.yml</code> is found, look for <code>[component-name].{js,jsx,ts,tsx}</code> and <code>[component-name].css</code> in the same folder.</li> <li>When <code>component.yml</code> is found, look for <code>index.{js,jsx,ts,tsx}</code> and <code>index.css</code> in the same folder.</li> </ol> <p>Write a new build command in the CLI Tool to use <a href="https://rolldown.rs/">Rolldown</a> (and <a href="https://vite.dev/">Vite</a> if necessary) to build the entire codebase into a single output folder, unbundled, along with a generated manifest file.</p> <p>Use this proof of concept as the starting point: <a href="https://github.com/balintbrews/canvas-cc-starter/pull/2">https://github.com/balintbrews/canvas-cc-starter/pull/2</a>.</p> <ol> <li>Discover all components &mdash; no support needed for partial builds.</li> <li>Implement support for the following imports: <ol> <li>Third-party import: <code>import { motion } from "motion/react"</code></li> <li>Local module import <ol> <li>from an arbitrary shared location: <code>import { formatDate } from "@/lib/utils"</code></li> <li>from a component's directory: <code>import { formatPrice } from "@/component/pricing/helpers"</code></li> </ol> </li> <li>Image asset import: <code>import heroImg from '@/components/hero/hero.jpg'</code></li> <li>SVG import as a React component using <a href="https://react-svgr.com">SVGR</a>: <code>import CartIcon from '@/components/cart/cart.svg</code></li> <li>CSS as side-effect imports only: <ol> <li>local: <code>import '@/utils/styles/carousel.css'</code></li> <li>third-party: <code>import '@fontsource/inter'</code></li> </ol> </li> </ol> </li> <li>Keep the compilation of the discovered Code Components the same as before.</li> <li>Keep using <code>tailwindcss-in-browser</code> for building the CSS.</li> <li>Introduce an optional config file (e.g. <code>canvas.config.json</code>) to allow configuring the followings: <ol> <li>directory to use as the root for resolving the import path aliases. (default to <code>src</code>)</li> <li>build output directory (default to <code>dist</code>)</li> </ol> </li> <li>Generate and place a manifest file to the build output directory to track the path to each Code Component (JS source, CSS source, and <code>component.yml</code>), as well as all files put in the build output directory.</li> </ol> <p>Note: Relative imports should still be avoided, as it would require updating the JS compilation logic.</p> > Related issue: [Issue #3560197](https://www.drupal.org/node/3560197)