fully working rsc approach

migros · Feb 7, 2024 · de53057 · de53057
1 parent 3aa5795
commit de53057
Show file tree

Hide file tree

Showing 30 changed files with 462 additions and 251 deletions.
diff --git a/packages/app/next.config.js b/packages/app/next.config.js
@@ -8,10 +8,10 @@ const nextConfig = {
     // disabled to speed up build time for this example project
     ignoreBuildErrors: true,
   },
-  webpack: (config, { isServer }) => {
-    if (isServer) {
-      config.resolve.fallback = { canvas: false };
-    }
+  webpack: (config) => {
+    // Fixes dependency issues with `canvas` and `perf_hooks` of linkedom
+    config.resolve.fallback = { canvas: false, perf_hooks: false };
+
     return config;
   },
 };

diff --git a/packages/app/src/app/layout.tsx b/packages/app/src/app/layout.tsx
@@ -8,6 +8,8 @@ export const metadata: Metadata = {
 };
 
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  await import('abc-web-components-react-wrapper/server');
+
   return (
     <html lang="en">
       <body

diff --git a/packages/app/src/app/page.tsx b/packages/app/src/app/page.tsx
@@ -1,12 +1,40 @@
-import { ClientButton } from '@/components/client-button';
-import { AbcButtonSSR } from 'abc-web-components-react-wrapper';
+import { AccordionClientOnly } from '@/components/accordion/accordion-client-only';
+import { AccordionRSC } from '@/components/accordion/accordion-rsc';
+import { AccordionWithWrapper } from '@/components/accordion/accordion-with-wrapper';
+import { ButtonClientOnly } from '@/components/button/button-client-only';
+import { ButtonRSC } from '@/components/button/button-rsc';
+import { ButtonWithWrapper } from '@/components/button/button-with-wrapper';
+import { DropdownClientOnly } from '@/components/dropdown/dropdown-client-only';
+import { DropdownRSC } from '@/components/dropdown/dropdown-rsc';
+import { DropdownWithWrapper } from '@/components/dropdown/dropdown-with-wrapper';
+import { Section } from './section';
 
 const Page = () => (
   <main style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
-    <AbcButtonSSR variant="primary" size="md" as="link" href="https://smartive.ch">
-      Test
-    </AbcButtonSSR>
-    <ClientButton>Button</ClientButton>
+    <Section
+      title="Buttons"
+      variants={[
+        { title: 'RSC', children: <ButtonRSC>Button</ButtonRSC> },
+        { title: 'Wrapper', children: <ButtonWithWrapper>Button</ButtonWithWrapper> },
+        { title: 'Client Only', children: <ButtonClientOnly>Button</ButtonClientOnly> },
+      ]}
+    />
+    <Section
+      title="Accordion"
+      variants={[
+        { title: 'RSC', children: <AccordionRSC /> },
+        { title: 'Wrapper', children: <AccordionWithWrapper /> },
+        { title: 'Client Only', children: <AccordionClientOnly /> },
+      ]}
+    />
+    <Section
+      title="Dropdown"
+      variants={[
+        { title: 'RSC', children: <DropdownRSC text="Dropdown" hint="Hint" label="Label" /> },
+        { title: 'Wrapper', children: <DropdownWithWrapper text="Dropdown" hint="Hint" label="Label" /> },
+        { title: 'Client Only', children: <DropdownClientOnly text="Dropdown" hint="Hint" label="Label" /> },
+      ]}
+    />
   </main>
 );
 

diff --git a/packages/app/src/app/section.tsx b/packages/app/src/app/section.tsx
@@ -0,0 +1,22 @@
+import { FC, ReactNode } from 'react';
+
+export const Section: FC<{ title: string; variants: { title: string; children: ReactNode }[] }> = ({ title, variants }) => (
+  <section style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+    <h2>{title}</h2>
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+        gap: '2rem',
+      }}
+    >
+      {variants.map(({ title, children }) => (
+        <div key={title}>
+          <h3>{title}</h3>
+          {children}
+        </div>
+      ))}
+    </div>
+    <hr style={{ width: '100%' }} />
+  </section>
+);
diff --git a/packages/app/src/components/accordion.tsx b/packages/app/src/components/accordion.tsx
diff --git a/packages/app/src/components/accordion/accordion-client-only.tsx b/packages/app/src/components/accordion/accordion-client-only.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import { AbcAccordion, AbcAccordionGroup } from 'abc-web-components-react-wrapper';
+import { FC } from 'react';
+import { data } from './data';
+
+export const AccordionClientOnly: FC = () => (
+  <AbcAccordionGroup onAccordionChange={(event) => console.info(event.detail)}>
+    {data.map(({ item, summary, details }) => (
+      <AbcAccordion
+        key={item}
+        slot="accordions"
+        item={item}
+        summary={summary}
+        variant="white"
+        onAccordionClick={({ detail }) => console.info(detail)}
+      >
+        <span slot="details">{details}</span>
+      </AbcAccordion>
+    ))}
+  </AbcAccordionGroup>
+);
diff --git a/packages/app/src/components/accordion/accordion-rsc.tsx b/packages/app/src/components/accordion/accordion-rsc.tsx
@@ -0,0 +1,14 @@
+import { AbcAccordionGroupServerOnly, staticAbcAccordionHtmlServerOnly } from 'abc-web-components-react-wrapper';
+import { FC } from 'react';
+import { AccordionWithRSC } from './accordion-with-rsc';
+import { data } from './data';
+
+export const AccordionRSC: FC = async () => {
+  const accordions = await Promise.all(
+    data.map(({ item, summary }) =>
+      staticAbcAccordionHtmlServerOnly({ slot: 'accordions', item, summary, variant: 'white' }),
+    ),
+  );
+
+  return <AccordionWithRSC rsc={<AbcAccordionGroupServerOnly>{accordions.join('')}</AbcAccordionGroupServerOnly>} />;
+};
diff --git a/packages/app/src/components/accordion/accordion-with-rsc.tsx b/packages/app/src/components/accordion/accordion-with-rsc.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import { WithRSCFallback } from 'abc-web-components-react-wrapper/client';
+import { ComponentProps, FC } from 'react';
+import { AccordionClientOnly } from './accordion-client-only';
+
+export const AccordionWithRSC: FC<ComponentProps<typeof WithRSCFallback>> = ({ rsc }) => (
+  <WithRSCFallback rsc={rsc}>
+    <AccordionClientOnly />
+  </WithRSCFallback>
+);
diff --git a/packages/app/src/components/accordion/accordion-with-wrapper.tsx b/packages/app/src/components/accordion/accordion-with-wrapper.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import { AbcWrapper } from 'abc-web-components-react-wrapper/client';
+import { FC } from 'react';
+import { AccordionClientOnly } from './accordion-client-only';
+
+export const AccordionWithWrapper: FC = () => (
+  <AbcWrapper>
+    <AccordionClientOnly />
+  </AbcWrapper>
+);
diff --git a/packages/app/src/components/accordion/data.ts b/packages/app/src/components/accordion/data.ts
@@ -0,0 +1,20 @@
+export const data = [
+  {
+    item: 'first',
+    summary: 'Placeholder 1',
+    details:
+      'Sint officia sunt nulla deserunt. Eu tempor veniam Lorem laboris reprehenderit culpa esse anim aliquip minim. Est do minim ipsum fugiat incididunt.',
+  },
+  {
+    item: 'second',
+    summary: 'Placeholder 2',
+    details:
+      'Commodo ipsum ut qui nostrud mollit ex esse duis consequat pariatur commodo do. Consequat consequat ad ut sit dolor exercitation magna ex pariatur Lorem consequat elit duis. Irure minim eiusmod irure do elit. Officia culpa eiusmod do est sunt exercitation esse id fugiat ut.',
+  },
+  {
+    item: 'third',
+    summary: 'Placeholder 3',
+    details:
+      'Deserunt commodo consectetur nostrud minim sint amet. Voluptate incididunt mollit aliqua id ipsum. Quis pariatur commodo et qui officia sit eiusmod minim elit commodo excepteur commodo. Nisi deserunt nisi aute elit nulla est proident non cillum reprehenderit pariatur ad. Elit ad qui magna nulla esse.',
+  },
+];
diff --git a/packages/app/src/components/button.tsx b/packages/app/src/components/button.tsx
diff --git a/packages/app/src/components/button/button-client-only.tsx b/packages/app/src/components/button/button-client-only.tsx
@@ -0,0 +1,10 @@
+'use client';
+
+import { AbcButton } from 'abc-web-components-react-wrapper';
+import { FC, PropsWithChildren } from 'react';
+
+export const ButtonClientOnly: FC<PropsWithChildren> = ({ children }) => (
+  <AbcButton variant="primary" size="md" as="button" onClick={(event) => console.info(event)}>
+    {children}
+  </AbcButton>
+);
diff --git a/packages/app/src/components/button/button-rsc.tsx b/packages/app/src/components/button/button-rsc.tsx
@@ -0,0 +1,7 @@
+import { AbcButtonServerOnly } from 'abc-web-components-react-wrapper';
+import { FC, PropsWithChildren } from 'react';
+import { ButtonWithRSC } from './button-with-rsc';
+
+export const ButtonRSC: FC<PropsWithChildren> = ({ children }) => (
+  <ButtonWithRSC rsc={<AbcButtonServerOnly>{children}</AbcButtonServerOnly>}>{children}</ButtonWithRSC>
+);
diff --git a/packages/app/src/components/button/button-with-rsc.tsx b/packages/app/src/components/button/button-with-rsc.tsx
@@ -0,0 +1,13 @@
+'use client';
+
+import { AbcButton } from 'abc-web-components-react-wrapper';
+import { WithRSCFallback } from 'abc-web-components-react-wrapper/client';
+import { ComponentProps, FC, PropsWithChildren } from 'react';
+
+type Props = PropsWithChildren<ComponentProps<typeof WithRSCFallback>>;
+
+export const ButtonWithRSC: FC<Props> = ({ rsc, children }) => (
+  <WithRSCFallback rsc={rsc}>
+    <AbcButton onClick={(event) => console.info(event)}>{children}</AbcButton>
+  </WithRSCFallback>
+);
diff --git a/packages/app/src/components/button/button-with-wrapper.tsx b/packages/app/src/components/button/button-with-wrapper.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import { AbcWrapper } from 'abc-web-components-react-wrapper/client';
+import { FC, PropsWithChildren } from 'react';
+import { ButtonClientOnly } from './button-client-only';
+
+export const ButtonWithWrapper: FC<PropsWithChildren> = ({ children }) => (
+  <AbcWrapper>
+    <ButtonClientOnly>{children}</ButtonClientOnly>
+  </AbcWrapper>
+);
diff --git a/packages/app/src/components/client-button.tsx b/packages/app/src/components/client-button.tsx
diff --git a/packages/app/src/components/dropdown.tsx b/packages/app/src/components/dropdown.tsx
diff --git a/packages/app/src/components/dropdown/data.ts b/packages/app/src/components/dropdown/data.ts
@@ -0,0 +1,5 @@
+export const data = [
+  { item: 'first', label: 'Placeholder 1' },
+  { item: 'second', label: 'Placeholder 2' },
+  { item: 'third', label: 'Placeholder 3' },
+];
diff --git a/packages/app/src/components/dropdown/dropdown-client-only.tsx b/packages/app/src/components/dropdown/dropdown-client-only.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import { AbcDropdown, AbcFlyout, AbcFlyoutItem } from 'abc-web-components-react-wrapper';
+import { ComponentProps, FC } from 'react';
+import { data } from './data';
+
+type Props = ComponentProps<typeof AbcDropdown>;
+
+export const DropdownClientOnly: FC<Props> = ({ text, hint, label }) => (
+  <AbcDropdown text={text} hint={hint} label={label} onDropdownChange={(event) => console.info(event.detail)}>
+    <AbcFlyout>
+      {data.map(({ item, label }) => (
+        <AbcFlyoutItem key={item} item={item} label={label} />
+      ))}
+    </AbcFlyout>
+  </AbcDropdown>
+);
diff --git a/packages/app/src/components/dropdown/dropdown-rsc.tsx b/packages/app/src/components/dropdown/dropdown-rsc.tsx
@@ -0,0 +1,14 @@
+import { AbcDropdownServerOnly } from 'abc-web-components-react-wrapper';
+import { ComponentProps, FC } from 'react';
+import { DropdownWithRSC } from './dropdown-with-rsc';
+
+type Props = ComponentProps<typeof AbcDropdownServerOnly>;
+
+export const DropdownRSC: FC<Props> = async ({ text, hint, label }) => (
+  <DropdownWithRSC
+    rsc={<AbcDropdownServerOnly text={text} hint={hint} label={label} />}
+    text={text}
+    hint={hint}
+    label={label}
+  />
+);
diff --git a/packages/app/src/components/dropdown/dropdown-with-rsc.tsx b/packages/app/src/components/dropdown/dropdown-with-rsc.tsx
@@ -0,0 +1,14 @@
+'use client';
+
+import { AbcDropdownServerOnly } from 'abc-web-components-react-wrapper';
+import { WithRSCFallback } from 'abc-web-components-react-wrapper/client';
+import { ComponentProps, FC } from 'react';
+import { DropdownClientOnly } from './dropdown-client-only';
+
+type Props = ComponentProps<typeof WithRSCFallback> & ComponentProps<typeof AbcDropdownServerOnly>;
+
+export const DropdownWithRSC: FC<Props> = ({ rsc, text, hint, label }) => (
+  <WithRSCFallback rsc={rsc}>
+    <DropdownClientOnly text={text} hint={hint} label={label} />
+  </WithRSCFallback>
+);
diff --git a/packages/app/src/components/dropdown/dropdown-with-wrapper.tsx b/packages/app/src/components/dropdown/dropdown-with-wrapper.tsx
@@ -0,0 +1,14 @@
+'use client';
+
+import { AbcWrapper } from 'abc-web-components-react-wrapper/client';
+import { ComponentProps, FC } from 'react';
+import { DropdownClientOnly } from './dropdown-client-only';
+import { AbcDropdownServerOnly } from 'abc-web-components-react-wrapper';
+
+type Props = ComponentProps<typeof AbcDropdownServerOnly>;
+
+export const DropdownWithWrapper: FC<Props> = ({ text, hint, label }) => (
+  <AbcWrapper>
+    <DropdownClientOnly text={text} hint={hint} label={label} />
+  </AbcWrapper>
+);