Merge branch '3508734-bundle-a-small' into '0.x'

Issue #3508734 "Bundle a small"

See merge request !697

src/Plugin/ExperienceBuilder/ComponentSource/JsComponent.php

@@ -115,6 +115,12 @@ final class JsComponent extends GeneratedFieldExplicitInputUxComponentSourceBase
         'preact' => \sprintf('%s%s/ui/lib/astro-hydration/dist/preact.module.js', $base_path, $xb_path),
         'preact/hooks' => \sprintf('%s%s/ui/lib/astro-hydration/dist/hooks.module.js', $base_path, $xb_path),
         'react/jsx-runtime' => \sprintf('%s%s/ui/lib/astro-hydration/dist/jsxRuntime.module.js', $base_path, $xb_path),
+        // @todo Remove this hard-coding and calculate it on a per component
+        // basis - see https://drupal.org/i/3500761.
+        'clsx' => \sprintf('%s%s/ui/lib/astro-hydration/dist/clsx.js', $base_path, $xb_path),
+        'class-variant-authority' => \sprintf('%s%s/ui/lib/astro-hydration/dist/class-variant-authority.js', $base_path, $xb_path),
+        'tailwind-merge' => \sprintf('%s%s/ui/lib/astro-hydration/dist/tailwind-merge.js', $base_path, $xb_path),
+        '@/lib/utils' => \sprintf('%s%s/ui/lib/astro-hydration/dist/utils.js', $base_path, $xb_path),
       ],
       // @todo Rename plugin ID in https://www.drupal.org/project/experience_builder/issues/3502982
       '#component' => $this->configuration['plugin_id'],

tests/src/Kernel/DataType/ComponentTreeHydratedTest.php

@@ -804,6 +804,10 @@ HTML,
                                 'preact' => \sprintf('%s/ui/lib/astro-hydration/dist/preact.module.js', $path),
                                 'preact/hooks' => \sprintf('%s/ui/lib/astro-hydration/dist/hooks.module.js', $path),
                                 'react/jsx-runtime' => \sprintf('%s/ui/lib/astro-hydration/dist/jsxRuntime.module.js', $path),
+                                'clsx' => \sprintf('%s/ui/lib/astro-hydration/dist/clsx.js', $path),
+                                'class-variant-authority' => \sprintf('%s/ui/lib/astro-hydration/dist/class-variant-authority.js', $path),
+                                'tailwind-merge' => \sprintf('%s/ui/lib/astro-hydration/dist/tailwind-merge.js', $path),
+                                '@/lib/utils' => \sprintf('%s/ui/lib/astro-hydration/dist/utils.js', $path),
                               ],
                               '#component' => 'my-cta',
                               '#props' => [

ui/lib/astro-hydration/astro.config.mjs

 import { defineConfig } from 'astro/config';
 import preact from '@astrojs/preact';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 // https://astro.build/config
 export default defineConfig({
   // Enable Preact to support Preact JSX components.
   integrations: [preact()],
   vite: {
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, 'src/'),
+      },
+    },
     build: {
       rollupOptions: {
         output: {
           // Filename pattern for the output files
           entryFileNames: '[name].js',
-          chunkFileNames: '[name].js',
+          chunkFileNames: (chunkInfo) => {
+            // Make sure the output chunks for dependencies have useful file
+            // names so we can easily distinguish between them.
+            const matches = {
+              clsx: 'clsx.js',
+              'class-variance-authority': 'class-variance-authority.js',
+              'tailwind-merge': 'tailwind-merge.js',
+              'lib/astro-hydration/src/lib/utils.ts': 'util.js',
+            };
+            return Object.entries(matches).reduce((carry, [key, value]) => {
+              if (chunkInfo.facadeModuleId?.includes(`node_modules/${key}`)) {
+                return value;
+              }
+              return carry;
+            }, '[name].js');
+          },
           assetFileNames: '[name][extname]',
         },
       },

ui/lib/astro-hydration/package.json

@@ -8,6 +8,9 @@
   "dependencies": {
     "@astrojs/preact": "^4.0.3",
     "astro": "^5.2.2",
-    "preact": "^10.25.4"
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "preact": "^10.25.4",
+    "tailwind-merge": "^3.0.2"
   }
 }

ui/lib/astro-hydration/src/components/Stub.jsx

@@ -8,5 +8,9 @@
 
 const { ...preactHooks } = await import('preact/hooks');
 const { jsx, jsxs, Fragment } = await import('preact/jsx-runtime');
+const { default: clsx } = await import('clsx');
+const { ...tailwindMerge } = await import('tailwind-merge');
+const { cva } = await import('class-variance-authority');
+const { cn } = await import('@/lib/utils');
 
 export default function () {}

ui/lib/astro-hydration/src/lib/utils.ts

+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import type { ClassValue } from 'clsx';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

ui/lib/astro-hydration/tsconfig.json

@@ -10,6 +10,9 @@
   ],
   "compilerOptions": {
     "jsx": "react-jsx",
-    "jsxImportSource": "preact"
+    "jsxImportSource": "preact",
+    "paths": {
+      "@/*": ["src/*"],
+    }
   }
 }

ui/package-lock.json

@@ -103,7 +103,10 @@
       "dependencies": {
         "@astrojs/preact": "^4.0.3",
         "astro": "^5.2.2",
-        "preact": "^10.25.4"
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "preact": "^10.25.4",
+        "tailwind-merge": "^3.0.2"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -8891,6 +8894,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
     "node_modules/classnames": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
@@ -17308,6 +17322,15 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.0.2.tgz",
+      "integrity": "sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss-in-browser": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/tailwindcss-in-browser/-/tailwindcss-in-browser-0.1.3.tgz",

ui/src/features/code-editor/Preview.tsx

@@ -67,6 +67,11 @@ const importMap = {
     'react/': 'https://esm.sh/preact/compat/',
     'react-dom': 'https://esm.sh/preact/compat',
     'react-dom/': 'https://esm.sh/preact/compat/',
+    // @todo Remove hardcoding and allow components to nominate their own?
+    clsx: 'https://esm.sh/clsx',
+    'class-variance-authority': 'https://esm.sh/class-variance-authority',
+    'tailwind-merge': 'https://esm.sh/tailwind-merge',
+    '@/lib/utils': `${XB_MODULE_UI_PATH}/lib/astro-hydration/dist/utils.js`,
   },
 };