canvas 1.3.0

Canvas 1.3.0 enables Code Components to import third-party npm packages. The Canvas CLI now includes Vite configuration to analyze and bundle these dependencies as well as new Push and Pull commands that synchronize Code Components with all of their dependencies between the Drupal site and the local codebase. The Push and Pull commands supersede the previous Upload and Download commands. Using TypeScript within Code Components is also now supported.

Canvas 1.3.0 also includes a new Canvas Workbench JavaScript package. This provides a Storybook-like development server for previewing Code Components while developing them in a local development environment.

🚀 Key Features

• Third-Party Import Support: Code components can now import npm packages. The CLI automatically analyzes, bundles, and optimizes third-party dependencies using Vite with code splitting and minification. Currently only JavaScript imports are supported; the ability for code components to import CSS, images, SVGs, etc. is not yet supported.
• Canvas CLI Push & Pull Commands: To support third-party imports, new Push and Pull commands supersede the previous Upload and Download commands.
• Canvas Workbench: To improve the developer experience of creating and maintaining code components while doing local development, Canvas now includes a local development server, @drupal-canvas/workbench, inspired by Storybook.
• TypeScript Support: The in-browser code editor and JavaScript compiler now support TypeScript syntax, making it easier to develop type-safe code components.
• Unpublish Canvas Pages: Canvas pages can now be unpublished.
• Content Templates for View Modes: Content templates can now be created for view modes other than Full, expanding flexibility for different display contexts.
• Diagonal Scrolling: The Canvas editor now supports diagonal scrolling with touchpad gestures for improved navigation.

🐛 Bug Fixes

• Image Props: Fixed issue where default images from optional image props could not be deleted and would reappear. (#3548282)
• Component Sources: Fixed issue where new Views blocks were not available to be placed until cache clear. (#3578142)
• Internal HTTP API: Fixed inaccurate Canvas previews for Views blocks that use Views Argument handler plugins. (#3578150)
• Field Widgets: Fixed linker not appearing for type: string, format: date props. (#3577767)
• Views Support: Fixed Inaccurate Canvas previews for Views blocks that use Views Argument handler plugins (#3578150)

Contributors (56)

GURNOOR_KAUR, NarendraR, Utkarsh_33, acbramley, amateescu, aneek, attilatilman, balintbrews, bnjmnm, cadence96, catch, chandu7929, effulgentsia, filtered by relevance, flyke, goba, gurnoor kaur, gábor hojtsy, hooroomoo, importance, isholgueras, jefflogan, jessebaker, justafish, kiran.kadam911, kunal.sachdev, larowlan, lauriii, lieb, longwave, mducharme, mglaman, mherchel, mstrelan, nagwani, narendrar, naveenapj, nickolaj, pameeela, penyaskito, phenaproxima, ravi kant, rikki_iki, root_emarketing, s-jack, scontzen, scott falconer, scottfalconer, tedbow, tim.plunkett, utkarsh_33, velmir_taky, vipin.mittal18, vishalkhode, wimleers, wotnak

Changelog

Issues: 78 issues resolved.

Changes since 1.2.0 (compare):

Bug

• fix: #3572847 Add missing validation to component trees being saved into content entities in tests— and simplify `CanvasTestSetup`
• feat: #3572881 It's not possible to scroll the Canvas diagonally with touch pad
• fix: #3576096 ConfigEntityQuery::recursiveCmp() triggers "Undefined array key weight" for config entities without weight
• fix(Code): #3577071: Add override to root package.json for UI to use React 18
• fix(CLI Tool): #3577399 Detect legacy CANVAS_COMPONENT_DIR and migrate to canvas.config.json
• fix(CLI tool): #3577602 CLI tests failing in HEAD and trigger CLI job on more conditions
• feat(CLI Tool): #3577627 Add support for TypeScript syntax in @drupal-canvas/eslint-config
• fix(CLI Tool): #3577677 NPM Install Error: @drupal-canvas/discovery not found (404)
• feat: #3558448 UI must only set `value` on `StaticPropSource`s, not on `DynamicPropSource`s nor `HostEntityUrlPropSource`s
• fix: #3577767 Linker not appearing for `type: string, format: date`
• fix(Internal HTTP API): #3578094 Fix REST API violation of the Canvas Page PATCH operation: auto-save operations should be auto-save prefixed
• fix(Documentation): #3574488 Canvas-demo and the starshot demo design system should not be suggested anymore
• feat: #3548282 Cannot delete default image from an optional image: it reappears
• fix(Component sources): #3578865 Hydrating a component tree with an instance containing garbage values OutOfRangeException when component trees have inputs for non-existent props
• fix(Config management): #3575579 Incorrect ImageItemOverride::calculateDependencies() causes image Media source fields to be deleted when uninstalling Canvas
• chore(Project management): #3579731 Auto-retry for Cypress failing when test name spans multiple lines in output
• fix(Internal HTTP API): #3578150 Inaccurate Canvas previews for Views blocks that use Views Argument handler plugins
• fix(Component sources): #3578142 [upstream] New Views blocks are not available to be placed until cache clear
• chore(Component sources): #3558721 Clarify the intended and actual behavior, to simplify fixing the regression
• fix(Redux-integrated field widgets): #3562354 canvas_stark not installed when canvas installed from a recipe
• fix(CLI Tool): #3580190 Error when running the new CLI push command
• fix(CLI Tool): #3579866 Update CLI tool to consider TSX code components for pull and Tailwind build
• fix: #3579284 Coerce prop form values to schema type before validation to fix "data must be number"
• fix(CLI Tool): #3580571 Require a compatible Zod version in drupal-canvas npm package
• fix(CLI Tool): #3580581 Fix Workbench package resolution and runtime dependencies
• fix(CLI Tool): #3579802 Code Component push command does not sync deletes

Feature

• feat(Multi-Value Props): #3571917 UI Support for Multi-Value Prop Configuration for Code Components
• feat(CLI Tool): #3571534 New CLI discovery and build for Code Components
• feat: #3573096 Add Multi-Value Text Field Support (UI)
• feat(Theme builder): #3576865 Allow adding custom fonts via AssetLibrary
• feat: #3556265 Create ability to unpublish Canvas pages
• feat: #3572553 Enum validation for array props
• feat: #3554197 Content templates: support linking multiple-cardinality field widgets
• feat: #3552914 Unify import maps between backend and code editor preview
• feat(Theme builder): #3577631 Add font support in the UI within a brand kit
• feat: #3522130 Add client-side transform for daterange_default to ReduxIntegratedFieldWidgetsHooks::fieldWidgetInfoAlter
• feat(Theme builder): #3562289 Add TypeScript support to CodeMirror and the JavaScript compiler of Code Components
• feat: #3574412 Allow creation of content templates for view modes other than Full
• feat(CLI Tool): #3578246 Code Component pull command in CLI
• feat: #3576003 Add Multi-Value Integer & Number Prop Support (UI)
• feat: #3572553 Save Multi-Value Prop Configuration for Code Components
• feat(Internal HTTP API): #3575144 Add unstable (v0) external Canvas Page API endpoints
• chore(Theme builder): #3577631 add test coverage and documentation for Brand Kit
• fix(Theme builder): #3577631 Follow-up: Add upgrade path for Brand Kit OAuth Scope + upgrade path test coverage for Brand Kit itself and the new OAuth scopes
• feat(Multi-Value Props): #3577219 Add Multi-Value Image/Video Prop Support (UI)
• feat(CLI Tool): #3571536 Code Component push command in CLI
• feat(CLI Tool): #3580082 Update agent support in @drupal-canvas/create
• feat(CLI Tool): #3579801 Introduce component mocks in Workbench
• fix(CLI Tool): #3579801 Update push to new discovery function call
• fix: #3577219 race condition in Add Multi-Value Image/Video Prop Support (UI)
• feat(CLI Tool): #3580394 Polish Workbench UI
• feat(CLI Tool): #3580433 Update the eslint rules to check for the currently unsupported imports
• feat(CLI Tool): #3580420 Make the CLI pull command also pull deletions for files that have been deleted
• fix(CLI Tool): #3580302 Push command fixes - locating built global assets, output build error table on push, and ignore @/components/ when gathering imports
• feat: #3557392 Add a (Google) search preview in the 'SEO settings' of the page

Task

• chore(Project management): #3570564 PHPCS: is_string() → \is_string(), is_array() → \is_array(), etc.
• chore(Project management): #3574687 Convert `@group foo` to `#[Group(…)]` + other annotations — to restore the ability to run a subset of Canvas’ test suite, enforce it using PHPCS
• chore(Component sources): #3576578 Inform SDC/code component developers of nonsensical `type: array` prop restrictions: `maxItems <2`< /li>
• chore(Project management): #3576694 PHPStan: forbid superfluous `use SomeTrait` (when the trait contains zero private methods)
• feat: #3546760 Add e2e test for `ContentTemplates` feature
• refactor: #3555062 Simplify canvas_stark: remove semi-coupled theme engine + improve React embedding
• chore(CLI Tool): #3577343 Bump eslint-config package to 0.1.2 and update CLI to it
• feat(CLI Tool): #3577508 Update eslint rules for the more flexible component discovery
• feat: #3568264 Update code component props schema to support 'array' type
• chore(Project management): #3570560 PHPCS: in_array() → \in_array()
• fix(Documentation): #3575068 Fix links on Canvas APIs index page
• task(Component sources): #3574831 Remove GeneratedFieldExplicitInputUxComponentSourceBase's fallback field widget handling thanks to #3560005
• chore(Project management): #3578710 Adopt PHPStan architecture tester: detect architecture violations + missing test `#[Group(…)]`
• chore(PHPStan): #3579587 Fix PHPStan errors in HEAD after 2.1.41 release
• fix: #3579049 Ensure ui/package.json version updates are committed during the automated release process
• chore(Theme builder): #3580052 Improve brand kit config schema
• docs: #3572449 Extend the documentation of the release process
• docs(Extensions): #3514033 Document high-level architecture decisions for extensions API
• chore(Shape matching): #3555300 Distinguish between prop source matchers (comprehensive, objective) and suggesters (ordered by importance, filtered by relevance: subjective)
• feat: #3579181 ContentTemplateAwareViewBuilder should use auto-saved templates inside Canvas Editor
• chore(CLI Tool): #3580544 Release Canvas Workbench 0.1.0
• chore(CLI Tool): #3579725 Deprecate upload/download CLI commands and add import documentation
• chore: #3580589 Do npm audit and bump @drupal-canvas/eslint-config
• chore(CLI Tool): Bump @drupal-canvas/eslint-config version to 0.1.3
• fix(CLI Tool): Bump version of eslint-config to fix published version
• Add built assets for release 1.3.0

Change Records

• New apply_image_style Twig filter for applying image styles to Canvas images