Drupal 10.3 SDC compatibility

Created on 21 May 2024, about 1 month ago
Updated 26 June 2024, 1 day ago

Problem/Motivation

In Drupal 10.3 Single Directory Components module functionality was merged directly into core https://www.drupal.org/project/drupal/issues/3352256 🌱 [META] Move code from the experimental SDC module to core Active . As part of this asset libraries generated for components have new naming structure which means we need to update our sdc vite integration to support new libraries names.

Additionally in d10.3 adding `vite: true` to libraryOverrides in component definition seems to be no longer supported (exception is thrown about not allowed key) so we need to update our documentation to point to enableInAllComponents option added in https://www.drupal.org/project/vite/issues/3411117 ✨ Allow enabling vite for all components and libraries in theme/module RTBC instead.

Steps to reproduce

  • install Drupal 10.3.0-beta β†’
  • install Vite 1.1.3 β†’
  • try to enable vite support for single directory component as described in the README
  • clear cache
  • exception is thrown about not allowed `vite` key in libraryOverrides in component definition and asset library generated for component has name `core/components.[theme/module]--[component]` instead of `sdc/[theme/module]--[component]`

Proposed resolution

  • add support for new component asset library naming (without removing suuport for old one)
  • update docs to point to enableInAllComponents option instead of adding vite: true for each component
  • create followup for exploring how/if enabling vite support for single components could be added back
πŸ“Œ Task
Status

Needs review

Version

1.0

Component

Code

Created by

πŸ‡΅πŸ‡±Poland wotnak

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @wotnak
  • πŸ‡ΊπŸ‡ΈUnited States mortona2k Seattle

    Elevating the priority because this is going to be a problem for people who want to update when 10.3 comes out. Critical may be appropriate for this.

    I tried updating the code to change the paths for the new component library names, but it didn't work to change the final library definition.

    Drupal\Core\Asset\LibraryDiscoveryParser->librariesForComponents() is where it builds components.all.

    I'm looking into available hooks for overriding that - any other ideas?

  • Merge request !13Fix component ID for 10.3. β†’ (Open) created by mortona2k
  • Status changed to Needs review 11 days ago
  • πŸ‡ΊπŸ‡ΈUnited States mortona2k Seattle

    Figured it out. Just got this working, so needs some testing.

  • Pipeline finished with Failed
    11 days ago
    Total: 146s
    #200511
  • πŸ‡¦πŸ‡ΉAustria mvonfrie

    The documentation regarding the Vite configuration example needs to be updated as well.

    * in `<theme>/vite.config.ts`:
    
    ```diff
     import { defineConfig } from "vite"
     import multiInput from "rollup-plugin-multi-input"
    
     export default defineConfig({
       plugins: [multiInput.default()],
       build: {
         manifest: true,
         rollupOptions: {
           input: [
             [...]
    +        "components/**/*.pcss.css",
    +        "components/**/*.ts",
           ],
         },
       },
       [...]
     })
    ```
    

    The import multiInput from "rollup-plugin-multi-input" and then loading the plugin with multiInput.default() no longer works for me> I'm getting the following error:

    You must supply options.input to rollup

    If I change this to multiInput() as in the examples from the rollup-plugin-multi-input repo itself, I get another error:

    failed to load config from /var/www/html/vite.config.js
    error during build:
    TypeError: multiInput is not a function

    I don't have a solution for this yet.

    Version info:

    Node 18.20 or 20.14.8
    Yarn: 4.3.0
    Vite: 5.3.1
    Typescript: 5.2.2
    rollup-plugin-multi-input: 1.4.1

  • πŸ‡ΊπŸ‡ΈUnited States mortona2k Seattle

    Here's what I got:

      build: {
        outDir: "dist",
        emptyOutDir: true,
        manifest: true,
        rollupOptions: {
          watch: true,
          input: [
            ...globSync('libraries/*/*.{css,js}'), # <-- single asterisk to only include top level files in directories.
            ...globSync('components/**/*.{css,js}'),
            ...globSync('layouts/**/*.{css,js}'),
          ],
          output: {
            entryFileNames: `[name].js`,
            assetFileNames: `[name].[ext]`,
          },
        },
      },
Production build 0.69.0 2024