SDC integration

There might be something helpful here:

https://www.drupal.org/project/sfc/issues/3205989 →
https://github.com/tanc/vite-plugin-sfc-reload

Component assets are loaded under the sdc extension with a library id EXTENSION--COMPONENT.
Asset paths are relative to the sdc module root. This code checks if it's processing a component in the currently active theme and changes the asset path to the bundle output.

I'm using unocss, so component and template twig files need to get parsed to convert the tailwind classes.

Here is a working config.

// vite.config.js
import UnoCSS from 'unocss/vite';
import { defineConfig } from 'vite';
import liveReload from 'vite-plugin-live-reload';
import glob from 'glob';
export default (({ mode }) => {
  return defineConfig({
    plugins: [
      UnoCSS(),
      liveReload(__dirname + '/**/*.(php|theme|twig|module)'),
    ],
    build: {
      assetsDir: '.',
      emptyOutDir: true,
      sourcemap: true,
      manifest: true,
      rollupOptions: {
        input: [
          './src/main.js',
          ...glob.sync('components/**/*.css')
        ],
        output: {
          entryFileNames: `[name].js`,
          assetFileNames: `[name].[ext]`,
        },
      },
      css: { devSourcemap: true },
      server: {
        host: true,
        port: 3000,
        origin: 'https://node.lndo.site',
      },
    },
  });
});

// .lando.yml
name: uno-site
recipe: drupal10
config:
  webroot: web
proxy:
  node:
    - node.mantra.lndo.site:3000
services:
  node:
    type: node:18
    ssl: true
    sslExpose: false
    port: 3000
    scanner: false
tooling:
  npm:
    service: node
    cmd: npm
  node:
    service: node
    cmd: node
  npx:
    service: node
    cmd: npx

//uno.config.js
import {
  defineConfig, presetTypography, presetUno, presetWebFonts,
} from 'unocss';

export default defineConfig({
  content: {
    pipeline: {
      include: [
        /\.(twig)($|\?)/,
      ],
    },
    filesystem: [
      'components/**/*.twig',
      'templates/**/*.twig'
    ],
  },
  presets: [
    presetUno(),
    presetTypography(),
    presetWebFonts(),
  ],
});

// theme.libraries.yml
styles:
  vite: true
  js:
    src/main.js: {}

The branch includes a fix from the related issue to automatically load bundled assets if needed.

I was getting errors in Gin when it's the active admin theme. Changing it to use the default theme for now but all the logic for checking components needs refinement. Might need an "enable components" setting.

I built a map component and needed some library dependencies. You can't add those as libraries directly to the component, so I put it in my theme and made that library a component dependency. I'd prefer to keep it all in the component to encapsulate the code better since I don't need those libraries anywhere else.

I am thinking vite could bundle the component dependencies by making a js file that includes them and my own init script. The vite module would use the manifest file to load those dependencies, but would have to respect dependency order.

There's some crossover with https://www.drupal.org/project/vite/issues/3392517 ✨ Support @vitejs/plugin-react Active but different use cases.

Committed SDC integration in https://git.drupalcode.org/project/vite/-/commit/4fee955a75ceac335adfe82.... Instructions are in the README https://git.drupalcode.org/project/vite#sdc-integration.

Basically for SDC is required the same configuration as for normal theme/module libraries, only in libraryOverrides in component definition instead of in .libraries.yml.

Available in the 1.1.1 → release.

Automatically closed - issue fixed for 2 weeks with no activity.