New CLI discovery and build for Code Components
[#3571534]
- outdated manifest.json
- Updated canvas-manifest.json sample here: https://gist.github.com/harumijang/5fe0bebf911e75637bcfecd9fffd2c92. This removes global and components key and adds a new font key.
- Output directory structure
-
/dist/components- All components no matter where they live in the user's codebase -
/dist/local- All local imports with path structure preserved in the output in order to avoid collisions of the same file name. (e.g., 'dist/local/component/hero/utils.js', 'dist/utils/utils.js') -
/dist/vendor- All third party imports (including fonts) -
/dist/index.css- Tailwind global css -
/dist/index.js- Tailwind global js classnames /dist/canvas-manifest.json
-
- Added typescript support to CLI but we should add it here too for the Canvas code editor https://www.drupal.org/project/canvas/issues/3562289
- Discover all components — no support needed for partial builds.
- Implement support for the following imports:
-
✅ Third-party import:import { motion } from "motion/react" -
✅ Local module import- from an arbitrary shared location:
import { formatDate } from "@/lib/utils" - from a component's directory:
import { formatPrice } from "@/component/pricing/helpers"
- from an arbitrary shared location:
-
✅ Image asset import:import heroImg from '@/components/hero/hero.jpg' -
✅ SVG import as a React component using SVGR:import CartIcon from '@/components/cart/cart.svg -
✅ CSS as side-effect imports only:- local:
import '@/utils/styles/carousel.css' - third-party:
import '@fontsource/inter'
- local:
-
-
✅ Keep the compilation of the discovered Code Components the same as before. -
✅ Keep usingtailwindcss-in-browserfor building the CSS. -
✅ Introduce an optional config file (e.g.canvas.config.json) to allow configuring the followings:- directory to use as the root for resolving the import path aliases. (default to
src) - build output directory (default to
dist)
- directory to use as the root for resolving the import path aliases. (default to
-
✅ Generate and place a manifest file to the build output directory to track the path to each Code Component (JS source, CSS source, andcomponent.yml), as well as all files put in the build output directory. -
✅ Tests -
✅ Adding@drupal-canvas/vite-compatand@drupal-canvas/discoverytocli/package.json. It is using those packages but not yet in package.json. Node was complaining about the entry points of those two packages being typescript so it couldn't resolve them.
Edited by Harumi Jang