refactor: improve Product cmp

module-federation · Sep 27, 2024 · d55efd0 · d55efd0
1 parent 2e0a7df
commit d55efd0
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 201 deletions.
diff --git a/examples/vite-webpack-rspack/host/src/components/Footer.tsx b/examples/vite-webpack-rspack/host/src/components/Footer.tsx
@@ -5,9 +5,7 @@ const year = new Date().getFullYear();
 export const Footer: React.FC = () => {
   return (
     <footer aria-labelledby="footer-heading">
-      <h2 id="footer-heading" className="sr-only">
-        Footer
-      </h2>
+      <h2 className="sr-only">Footer</h2>
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <div className="border-t border-gray-200 py-20">
           <div className="grid grid-cols-1 md:grid-flow-col md:auto-rows-min md:grid-cols-12 md:gap-x-8 md:gap-y-16">
@@ -146,7 +144,6 @@ export const Footer: React.FC = () => {
               <form className="mt-2 flex sm:max-w-md">
                 <label className="sr-only">Email address</label>
                 <input
-                  id="email-address"
                   type="text"
                   auto-complete="email"
                   className="w-full min-w-0 appearance-none rounded-md border border-gray-300 bg-white px-4 py-2 text-base text-gray-900 placeholder-gray-500 shadow-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500"

diff --git a/examples/vite-webpack-rspack/remote/src/Product.jsx b/examples/vite-webpack-rspack/remote/src/Product.jsx
@@ -1,160 +1,44 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './App.css';
+import ProductHeader from './ProductHeader';
+import ProductImage from './ProductImage';
 
 export default () => {
+  const [size, setSize] = useState('M');
   return (
     <div className="lg:grid lg:auto-rows-min lg:grid-cols-12 lg:gap-x-8">
-      <div className="lg:col-span-5 lg:col-start-8">
-        <div className="flex justify-between">
-          <h1 className="text-xl font-medium text-gray-900">Basic Tee</h1>
-          <p className="text-xl font-medium text-gray-900">35 €</p>
-        </div>
-        <div className="mt-4">
-          <h2 className="sr-only">Reviews</h2>
-          <div className="flex items-center">
-            <p className="text-sm text-gray-700">
-              3.9<span className="sr-only"> out of 5 stars</span>
-            </p>
-            <div className="ml-1 flex items-center">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-                aria-hidden="true"
-                data-slot="icon"
-                className="text-yellow-400 h-5 w-5 flex-shrink-0"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
-                  clipRule="evenodd"
-                ></path>
-              </svg>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-                aria-hidden="true"
-                data-slot="icon"
-                className="text-yellow-400 h-5 w-5 flex-shrink-0"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
-                  clipRule="evenodd"
-                ></path>
-              </svg>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-                aria-hidden="true"
-                data-slot="icon"
-                className="text-yellow-400 h-5 w-5 flex-shrink-0"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
-                  clipRule="evenodd"
-                ></path>
-              </svg>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-                aria-hidden="true"
-                data-slot="icon"
-                className="text-yellow-400 h-5 w-5 flex-shrink-0"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
-                  clipRule="evenodd"
-                ></path>
-              </svg>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-                aria-hidden="true"
-                data-slot="icon"
-                className="text-gray-200 h-5 w-5 flex-shrink-0"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
-                  clipRule="evenodd"
-                ></path>
-              </svg>
-            </div>
-            <div aria-hidden="true" className="ml-4 text-sm text-gray-300">
-              ·
-            </div>
-            <div className="ml-4 flex">
-              <a href="#" className="text-sm font-medium text-slate-600 hover:text-slate-500">
-                See all 512 reviews
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="mt-8 lg:col-span-7 lg:col-start-1 lg:row-span-3 lg:row-start-1 lg:mt-0">
-        <h2 className="sr-only">Images</h2>
-        <div className="grid grid-cols-1 lg:grid-cols-2 lg:gap-8">
-          <img
-            alt="Back of women's Basic Tee in black."
-            loading="lazy"
-            width="1392"
-            height="2088"
-            decoding="async"
-            data-nimg="1"
-            className="lg:col-span-2 lg:row-span-2 rounded-lg"
-            style={{ color: 'transparent' }}
-            src="http://localhost:4001/product.webp"
-          />
-        </div>
-      </div>
+      <ProductHeader />
+      <ProductImage />
       <div className="mt-8 lg:col-span-5">
         <form>
           <div>
             <h2 className="text-sm font-medium text-gray-900">Color</h2>
             <div
               className="mt-2"
-              id="headlessui-radiogroup-:R29r4v5uba:"
               role="radiogroup"
               aria-labelledby="headlessui-label-:R1m9r4v5uba:"
             >
-              <label className="sr-only" id="headlessui-label-:R1m9r4v5uba:" role="none">
+              <label className="sr-only" role="none">
                 Choose a color
               </label>
               <div className="flex items-center space-x-3" role="none">
                 <div
                   className="ring-gray-900 ring-2 relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 focus:outline-none"
-                  id="headlessui-radiogroup-option-:R6m9r4v5uba:"
                   role="radio"
                   aria-checked="true"
-                  data-headlessui-state="checked"
-                  aria-labelledby="headlessui-label-:R1mm9r4v5uba:"
                 >
-                  <span className="sr-only" id="headlessui-label-:R1mm9r4v5uba:">
-                    Black
-                  </span>
+                  <span className="sr-only">Black</span>
                   <span
                     aria-hidden="true"
                     className="bg-gray-900 h-8 w-8 rounded-full border border-black border-opacity-10"
                   ></span>
                 </div>
                 <div
                   className="ring-gray-400 relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 focus:outline-none"
-                  id="headlessui-radiogroup-option-:Ram9r4v5uba:"
                   role="radio"
                   aria-checked="false"
-                  data-headlessui-state=""
-                  aria-labelledby="headlessui-label-:R1qm9r4v5uba:"
                 >
-                  <span className="sr-only" id="headlessui-label-:R1qm9r4v5uba:">
-                    Heather Grey
-                  </span>
+                  <span className="sr-only">Heather Grey</span>
                   <span
                     aria-hidden="true"
                     className="bg-gray-400 h-8 w-8 rounded-full border border-black border-opacity-10"
@@ -172,75 +56,24 @@ export default () => {
             </div>
             <div
               className="mt-2"
-              id="headlessui-radiogroup-:R2hr4v5uba:"
               role="radiogroup"
               aria-labelledby="headlessui-label-:R1mhr4v5uba:"
             >
-              <label className="sr-only" id="headlessui-label-:R1mhr4v5uba:" role="none">
+              <label className="sr-only" role="none">
                 Choose a size
               </label>
               <div className="grid grid-cols-3 gap-3 sm:grid-cols-6" role="none">
-                <div
-                  className="cursor-pointer focus:outline-none border-gray-200 bg-white text-gray-900 hover:bg-gray-50 flex items-center justify-center rounded-md border py-3 px-3 text-sm font-medium uppercase sm:flex-1"
-                  id="headlessui-radiogroup-option-:R6mhr4v5uba:"
-                  role="radio"
-                  aria-checked="false"
-                  data-headlessui-state=""
-                  aria-labelledby="headlessui-label-:R16mhr4v5uba:"
-                >
-                  <span id="headlessui-label-:R16mhr4v5uba:">XXS</span>
-                </div>
-                <div
-                  className="cursor-pointer focus:outline-none border-gray-200 bg-white text-gray-900 hover:bg-gray-50 flex items-center justify-center rounded-md border py-3 px-3 text-sm font-medium uppercase sm:flex-1"
-                  id="headlessui-radiogroup-option-:Ramhr4v5uba:"
-                  role="radio"
-                  aria-checked="false"
-                  data-headlessui-state=""
-                  aria-labelledby="headlessui-label-:R1amhr4v5uba:"
-                >
-                  <span id="headlessui-label-:R1amhr4v5uba:">XS</span>
-                </div>
-                <div
-                  className="cursor-pointer focus:outline-none border-transparent bg-slate-600 text-white hover:bg-slate-700 flex items-center justify-center rounded-md border py-3 px-3 text-sm font-medium uppercase sm:flex-1"
-                  id="headlessui-radiogroup-option-:Remhr4v5uba:"
-                  role="radio"
-                  aria-checked="true"
-                  data-headlessui-state="checked"
-                  aria-labelledby="headlessui-label-:R1emhr4v5uba:"
-                >
-                  <span id="headlessui-label-:R1emhr4v5uba:">S</span>
-                </div>
-                <div
-                  className="cursor-pointer focus:outline-none border-gray-200 bg-white text-gray-900 hover:bg-gray-50 flex items-center justify-center rounded-md border py-3 px-3 text-sm font-medium uppercase sm:flex-1"
-                  id="headlessui-radiogroup-option-:Rimhr4v5uba:"
-                  role="radio"
-                  aria-checked="false"
-                  data-headlessui-state=""
-                  aria-labelledby="headlessui-label-:R1imhr4v5uba:"
-                >
-                  <span id="headlessui-label-:R1imhr4v5uba:">M</span>
-                </div>
-                <div
-                  className="cursor-pointer focus:outline-none border-gray-200 bg-white text-gray-900 hover:bg-gray-50 flex items-center justify-center rounded-md border py-3 px-3 text-sm font-medium uppercase sm:flex-1"
-                  id="headlessui-radiogroup-option-:Rmmhr4v5uba:"
-                  role="radio"
-                  aria-checked="false"
-                  data-headlessui-state=""
-                  aria-labelledby="headlessui-label-:R1mmhr4v5uba:"
-                >
-                  <span id="headlessui-label-:R1mmhr4v5uba:">L</span>
-                </div>
-                <div
-                  className="cursor-not-allowed opacity-25 border-gray-200 bg-white text-gray-900 hover:bg-gray-50 flex items-center justify-center rounded-md border py-3 px-3 text-sm font-medium uppercase sm:flex-1"
-                  id="headlessui-radiogroup-option-:Rqmhr4v5uba:"
-                  role="radio"
-                  aria-checked="false"
-                  aria-disabled="true"
-                  data-headlessui-state="disabled"
-                  aria-labelledby="headlessui-label-:R1qmhr4v5uba:"
-                >
-                  <span id="headlessui-label-:R1qmhr4v5uba:">XL</span>
-                </div>
+                {['XS', 'S', 'M', 'L', 'XL', 'XXL'].map((s, i) => (
+                  <div
+                    key={i}
+                    className={`cursor-pointer focus:outline-none ${s === size ? 'border-transparent bg-slate-600 text-white hover:bg-slate-700' : 'border-gray-200 bg-white text-gray-900 hover:bg-gray-50'} flex items-center justify-center rounded-md border py-3 px-3 text-sm font-medium uppercase sm:flex-1`}
+                    role="radio"
+                    aria-checked={s === size}
+                    onClick={() => setSize(s)}
+                  >
+                    <span>{s}</span>
+                  </div>
+                ))}
               </div>
             </div>
           </div>

diff --git a/examples/vite-webpack-rspack/remote/src/ProductHeader.jsx b/examples/vite-webpack-rspack/remote/src/ProductHeader.jsx
@@ -0,0 +1,42 @@
+export default () => (
+  <div className="lg:col-span-5 lg:col-start-8">
+    <div className="flex justify-between">
+      <h1 className="text-xl font-medium text-gray-900">Basic Tee</h1>
+      <p className="text-xl font-medium text-gray-900">35 €</p>
+    </div>
+    <div className="mt-4">
+      <h2 className="sr-only">Reviews</h2>
+      <div className="flex items-center">
+        <p className="text-sm text-gray-700">
+          3.9<span className="sr-only"> out of 5 stars</span>
+        </p>
+        <div className="ml-1 flex items-center">
+          {[...new Array(5)].map((_, i) => (
+            <svg
+              key={i}
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              aria-hidden="true"
+              className={`${i === 4 ? 'text-gray-200' : 'text-yellow-400'} h-5 w-5 flex-shrink-0`}
+            >
+              <path
+                fillRule="evenodd"
+                d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
+                clipRule="evenodd"
+              ></path>
+            </svg>
+          ))}
+        </div>
+        <div aria-hidden="true" className="ml-4 text-sm text-gray-300">
+          ·
+        </div>
+        <div className="ml-4 flex">
+          <a href="#" className="text-sm font-medium text-slate-600 hover:text-slate-500">
+            See all 512 reviews
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+);
diff --git a/examples/vite-webpack-rspack/remote/src/ProductImage.jsx b/examples/vite-webpack-rspack/remote/src/ProductImage.jsx
@@ -0,0 +1,18 @@
+export default () => (
+  <div className="mt-8 lg:col-span-7 lg:col-start-1 lg:row-span-3 lg:row-start-1 lg:mt-0">
+    <h2 className="sr-only">Image</h2>
+    <div className="grid grid-cols-1 lg:grid-cols-2 lg:gap-8">
+      <img
+        alt="Back of women's Basic Tee in black."
+        loading="lazy"
+        width="1392"
+        height="2088"
+        decoding="async"
+        data-nimg="1"
+        className="lg:col-span-2 lg:row-span-2 rounded-lg"
+        style={{ color: 'transparent' }}
+        src="http://localhost:4001/product.webp"
+      />
+    </div>
+  </div>
+);
diff --git a/examples/vite-webpack-rspack/rspack/src/Reviews.tsx b/examples/vite-webpack-rspack/rspack/src/Reviews.tsx
@@ -3,26 +3,25 @@ import React from 'react';
 export default () => {
   return (
     <section aria-labelledby="reviews-heading" className="mt-16 sm:mt-24">
-      <h2 id="reviews-heading" className="text-lg font-medium text-gray-900">
-        Recent reviews
-      </h2>
+      <h2 className="text-lg font-medium text-gray-900">Recent reviews</h2>
       <div className="mt-6 space-y-10 divide-y divide-gray-200 border-b border-t border-gray-200 pb-10">
         <div className="pt-10 lg:grid lg:grid-cols-12 lg:gap-x-8">
           <div className="lg:col-span-8 lg:col-start-5 xl:col-span-9 xl:col-start-4 xl:grid xl:grid-cols-3 xl:items-start xl:gap-x-8">
             <div className="flex items-center xl:col-span-1">
               <div className="flex items-center">
-                {[...new Array(5)].map(() => (
+                {[...new Array(5)].map((_, i) => (
                   <svg
+                    key={i}
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 24 24"
                     fill="currentColor"
                     aria-hidden="true"
                     className="text-yellow-400 h-5 w-5 flex-shrink-0"
                   >
                     <path
-                      fill-rule="evenodd"
+                      fillRule="evenodd"
                       d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
-                      clip-rule="evenodd"
+                      clipRule="evenodd"
                     ></path>
                   </svg>
                 ))}

diff --git a/examples/vite-webpack-rspack/webpack/src/Related.tsx b/examples/vite-webpack-rspack/webpack/src/Related.tsx
@@ -3,9 +3,7 @@ import React from 'react';
 export default () => {
   return (
     <section aria-labelledby="related-heading" className="mt-16 sm:mt-24">
-      <h2 id="related-heading" className="text-lg font-medium text-gray-900">
-        Customers also purchased
-      </h2>
+      <h2 className="text-lg font-medium text-gray-900">Customers also purchased</h2>
       <div className="mt-6 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8 text-left">
         <div className="group relative">
           <div className="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-md lg:aspect-none group-hover:opacity-75 lg:h-80">