[Site] Fix React/Svelte/Vue demo

ux.symfony.com/assets/react/build/.gitignore

@@ -0,0 +1,3 @@
+.yarn
+yarn.lock
+node_modules

ux.symfony.com/assets/react/src/package.json → ux.symfony.com/assets/react/build/package.json

@@ -7,6 +7,6 @@
     "license": "MIT",
     "private": true,
     "scripts": {
-        "build": "../build/node_modules/.bin/babel ../. --out-dir ../../build/react --presets=@babel/preset-react"
+        "build": "babel ../src/ --out-dir ../dist/ --presets=@babel/preset-react --no-babelrc"
     }
 }

ux.symfony.com/assets/react/dist/components/PackageList.js

@@ -1,31 +1,24 @@
 import React from 'react';
 export default function (props) {
   if (props.packages.length === 0) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "alert alert-info"
-    }, "Sad trombone... we haven't built any components that match this search yet!");
+    return 'No packages found';
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: "row"
-  }, props.packages.map(item => /*#__PURE__*/React.createElement("a", {
-    key: item.name,
-    href: item.url,
-    className: "col-12 col-md-4 col-lg-3 mb-2"
+    className: "PackageList"
+  }, props.packages.map(item => /*#__PURE__*/React.createElement("div", {
+    className: "PackageListItem",
+    key: item.id
   }, /*#__PURE__*/React.createElement("div", {
-    className: "components-container p-2"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "d-flex"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "live-component-img d-flex justify-content-center align-items-center",
+    className: "PackageListItem__icon",
     style: {
-      background: item.gradient
+      '--gradient': item.gradient
     }
   }, /*#__PURE__*/React.createElement("img", {
-    width: "17px",
-    height: "17px",
     src: item.imageUrl,
     alt: `Image for the ${item.humanName} UX package`
-  })), /*#__PURE__*/React.createElement("h4", {
-    className: "ubuntu-title ps-2 align-self-center"
-  }, item.humanName))))));
+  })), /*#__PURE__*/React.createElement("h3", {
+    className: "PackageListItem__label"
+  }, /*#__PURE__*/React.createElement("a", {
+    href: item.url
+  }, item.humanName)))));
 }

ux.symfony.com/assets/react/src/components/PackageList.jsx

@@ -1,20 +1,22 @@
 import React from 'react';
 
 export default function (props) {
-    if (props.packages.length === 0) {
-        return 'No packages found';
-    }
+  if (props.packages.length === 0) {
+    return 'No packages found';
+  }
 
-    return (
-        props.packages.map(item => (
-                <div class="PackageListItem">
-                    <div class="PackageListItem__icon" style={`--gradient: ${item.gradient}`}>
-                        <img src={item.imageUrl} alt={`Image for the ${item.humanName} UX package`} />
-                    </div>
-                    <h3 class="PackageListItem__title">
-                        <a href={item.url}>{item.humanName}</a>
-                    </h3>
-                </div>
-        ))
-    );
+  return (
+    <div className="PackageList">
+      {props.packages.map(item => (
+        <div className="PackageListItem" key={item.id}>
+          <div className="PackageListItem__icon" style={{'--gradient': item.gradient}}>
+            <img src={item.imageUrl} alt={`Image for the ${item.humanName} UX package`}/>
+          </div>
+          <h3 className="PackageListItem__label">
+            <a href={item.url}>{item.humanName}</a>
+          </h3>
+        </div>
+      ))}
+    </div>
+  );
 }

ux.symfony.com/assets/svelte/build/.gitignore

@@ -0,0 +1,3 @@
+.yarn
+yarn.lock
+node_modules

ux.symfony.com/assets/svelte/src/build.js → ux.symfony.com/assets/svelte/build/build.js

@@ -12,18 +12,27 @@ function compileDirectory(inputDir, outputDir) {
 
     for (const file of files) {
         const inputFile = path.join(inputDir, file);
+
+        // Exclude node_modules directory
+        if (inputFile.includes('node_')) {
+            continue;
+        }
+
         const stats = fs.statSync(inputFile);
-
         if (stats.isDirectory()) {
             const newOutputDir = path.join(outputDir, file);
             if (!fs.existsSync(newOutputDir)) {
                 fs.mkdirSync(newOutputDir);
             }
+            console.log('Entering', inputDir);
             compileDirectory(inputFile, newOutputDir);
-        } else if (path.extname(file) === '.svelte') {
+            continue;
+        }
+
+        if(path.extname(file) === '.svelte') {
+            console.log('Compiling', inputFile);
             const input = fs.readFileSync(inputFile, 'utf-8');
             const output = compile(input, { format: 'esm' });
-
             const outputFile = path.join(outputDir, `${path.basename(file, '.svelte')}.js`);
             fs.writeFileSync(outputFile, output.js.code);
         }

ux.symfony.com/assets/svelte/src/package.json → ux.symfony.com/assets/svelte/build/package.json

@@ -2,13 +2,11 @@
     "devDependencies": {
         "@babel/cli": "^7.25.6",
         "@babel/core": "^7.25.2",
-        "@babel/preset-react": "^7.24.7",
         "svelte": "^3.59.1"
     },
     "license": "MIT",
     "private": true,
     "scripts": {
-        "build": "yarn build-react && yarn build-svelte",
-        "build-svelte": "node bin/compile_svelte.js"
+        "build": "node build.js"
     }
 }

ux.symfony.com/assets/svelte/dist/components/PackageList.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.59.1 */
+/* generated by Svelte v3.59.2 */
 import {
 	SvelteComponent,
 	add_render_callback,
@@ -33,7 +33,7 @@ function get_each_context(ctx, list, i) {
 	return child_ctx;
 }
 
-// (13:0) {:else}
+// (11:0) {:else}
 function create_else_block(ctx) {
 	let div;
 	let each_blocks = [];
@@ -55,7 +55,7 @@ function create_else_block(ctx) {
 				each_blocks[i].c();
 			}
 
-			attr(div, "class", "row");
+			attr(div, "class", "PackageList");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -92,81 +92,72 @@ function create_else_block(ctx) {
 
 // (9:0) {#if packages.length === 0}
 function create_if_block(ctx) {
-	let div;
+	let t;
 
 	return {
 		c() {
-			div = element("div");
-			div.textContent = "Sad trombone... we haven't built any components that\n        match this search yet!";
-			attr(div, "class", "alert alert-info");
+			t = text("No packages found");
 		},
 		m(target, anchor) {
-			insert(target, div, anchor);
+			insert(target, t, anchor);
 		},
 		p: noop,
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(div);
+			if (detaching) detach(t);
 		}
 	};
 }
 
-// (15:8) {#each packages as uxPackage(uxPackage.name)}
+// (13:8) {#each packages as uxPackage(uxPackage.name)}
 function create_each_block(key_1, ctx) {
-	let a;
-	let div2;
 	let div1;
 	let div0;
 	let img;
 	let img_src_value;
 	let img_alt_value;
 	let t0;
-	let h4;
+	let h3;
+	let a;
 	let t1_value = /*uxPackage*/ ctx[1].humanName + "";
 	let t1;
-	let t2;
 	let a_href_value;
-	let a_intro;
+	let t2;
+	let div1_intro;
 	let rect;
 	let stop_animation = noop;
 
 	return {
 		key: key_1,
 		first: null,
 		c() {
-			a = element("a");
-			div2 = element("div");
 			div1 = element("div");
 			div0 = element("div");
 			img = element("img");
 			t0 = space();
-			h4 = element("h4");
+			h3 = element("h3");
+			a = element("a");
 			t1 = text(t1_value);
 			t2 = space();
-			attr(img, "width", "17");
-			attr(img, "height", "17");
 			if (!src_url_equal(img.src, img_src_value = /*uxPackage*/ ctx[1].imageUrl)) attr(img, "src", img_src_value);
-			attr(img, "alt", img_alt_value = "`Image for the " + /*uxPackage*/ ctx[1].humanName + " UX package`");
-			attr(div0, "class", "live-component-img d-flex justify-content-center align-items-center");
-			set_style(div0, "background", /*uxPackage*/ ctx[1].gradient);
-			attr(h4, "class", "ubuntu-title ps-2 align-self-center");
-			attr(div1, "class", "d-flex");
-			attr(div2, "class", "components-container p-2");
+			attr(img, "alt", img_alt_value = "Image for the " + /*uxPackage*/ ctx[1].humanName + " UX package");
+			attr(div0, "class", "PackageListItem__icon");
+			set_style(div0, "--gradient", /*uxPackage*/ ctx[1].gradient);
 			attr(a, "href", a_href_value = /*uxPackage*/ ctx[1].url);
-			attr(a, "class", "col-12 col-md-4 col-lg-3 mb-2");
-			this.first = a;
+			attr(h3, "class", "PackageListItem__label");
+			attr(div1, "class", "PackageListItem");
+			this.first = div1;
 		},
 		m(target, anchor) {
-			insert(target, a, anchor);
-			append(a, div2);
-			append(div2, div1);
+			insert(target, div1, anchor);
 			append(div1, div0);
 			append(div0, img);
 			append(div1, t0);
-			append(div1, h4);
-			append(h4, t1);
-			append(a, t2);
+			append(div1, h3);
+			append(h3, a);
+			append(a, t1);
+			append(div1, t2);
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
@@ -175,12 +166,12 @@ function create_each_block(key_1, ctx) {
 				attr(img, "src", img_src_value);
 			}
 
-			if (dirty & /*packages*/ 1 && img_alt_value !== (img_alt_value = "`Image for the " + /*uxPackage*/ ctx[1].humanName + " UX package`")) {
+			if (dirty & /*packages*/ 1 && img_alt_value !== (img_alt_value = "Image for the " + /*uxPackage*/ ctx[1].humanName + " UX package")) {
 				attr(img, "alt", img_alt_value);
 			}
 
 			if (dirty & /*packages*/ 1) {
-				set_style(div0, "background", /*uxPackage*/ ctx[1].gradient);
+				set_style(div0, "--gradient", /*uxPackage*/ ctx[1].gradient);
 			}
 
 			if (dirty & /*packages*/ 1 && t1_value !== (t1_value = /*uxPackage*/ ctx[1].humanName + "")) set_data(t1, t1_value);
@@ -190,27 +181,27 @@ function create_each_block(key_1, ctx) {
 			}
 		},
 		r() {
-			rect = a.getBoundingClientRect();
+			rect = div1.getBoundingClientRect();
 		},
 		f() {
-			fix_position(a);
+			fix_position(div1);
 			stop_animation();
 		},
 		a() {
 			stop_animation();
-			stop_animation = create_animation(a, rect, flip, { duration: transitionDuration });
+			stop_animation = create_animation(div1, rect, flip, { duration: transitionDuration });
 		},
 		i(local) {
-			if (!a_intro) {
+			if (!div1_intro) {
 				add_render_callback(() => {
-					a_intro = create_in_transition(a, fade, { duration: transitionDuration });
-					a_intro.start();
+					div1_intro = create_in_transition(div1, fade, { duration: transitionDuration });
+					div1_intro.start();
 				});
 			}
 		},
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(a);
+			if (detaching) detach(div1);
 		}
 	};
 }

ux.symfony.com/assets/svelte/dist/controllers/PackageSearch.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.59.1 */
+/* generated by Svelte v3.59.2 */
 import {
 	SvelteComponent,
 	append,

ux.symfony.com/assets/svelte/src/components/PackageList.svelte

@@ -7,33 +7,20 @@
 </script>
 
 {#if packages.length === 0}
-    <div class='alert alert-info'>Sad trombone... we haven't built any components that
-        match this search yet!
-    </div>
+    No packages found
 {:else}
-    <div class='row'>
+    <div class="PackageList">
         {#each packages as uxPackage(uxPackage.name)}
-            <a
-                href='{uxPackage.url}'
-                class='col-12 col-md-4 col-lg-3 mb-2'
+            <div class="PackageListItem"
                 animate:flip={{duration: transitionDuration}} in:fade={{duration:transitionDuration}}
             >
-                <div class='components-container p-2'>
-                    <div class='d-flex'>
-                        <div
-                            class='live-component-img d-flex justify-content-center align-items-center'
-                            style='background: {uxPackage.gradient}'>
-                            <img width='17' height='17'
-                                 src='{uxPackage.imageUrl}'
-                                 alt='`Image for the {uxPackage.humanName} UX package`'
-                            />
-                        </div>
-                        <h4 class='ubuntu-title ps-2 align-self-center'>
-                            { uxPackage.humanName }
-                        </h4>
-                    </div>
+                <div class="PackageListItem__icon" style="--gradient: {uxPackage.gradient};">
+                    <img src="{uxPackage.imageUrl}" alt="Image for the {uxPackage.humanName} UX package" />
                 </div>
-            </a>
+                <h3 class="PackageListItem__label">
+                    <a href="{uxPackage.url}">{uxPackage.humanName}</a>
+                </h3>
+            </div>
         {/each}
     </div>
 {/if}

ux.symfony.com/config/packages/asset_mapper.yaml

@@ -7,8 +7,10 @@ framework:
             - '*/assets/styles/_*.scss'
             - '*/assets/styles/**/_*.scss'
             - '*/assets/icons/**'
-            - '*/assets/react/src/**'       # Exclude React source + build files
-            - '*/assets/svelte/src/**'      # Exclude Svelte source + build files
+            - '*/assets/react/build**'     # React build dir
+            - '*/assets/react/src**'       # React sources
+            - '*/assets/svelte/build**'    # ESvelte build dir
+            - '*/assets/svelte/src**'      # Svelte source files
         importmap_polyfill: false
 
 react: