feat: build server only components for RSC

.gitignore

@@ -89,6 +89,7 @@ out
 
 # production
 build
+hydrate
 
 # Nuxt.js build / generate output
 .nuxt

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;
   },
 };

packages/app/package.json

@@ -30,8 +30,8 @@
     "@webcomponents/template-shadowroot": "^0.2.1",
     "abc-web-components-react-wrapper": "^0.0.0",
     "next": "14.1.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@smartive/eslint-config": "4.0.1",

packages/app/src/app/page.tsx

@@ -1,12 +1,40 @@
-import { Accordion } from '@/components/accordion';
-import { Button } from '@/components/button';
-import { Dropdown } from '@/components/dropdown';
+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' }}>
-    <Button />
-    <Dropdown />
-    <Accordion />
+    <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>
 );
 

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>
+);

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>
+);

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>} />;
+};

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>
+);

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>
+);

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.',
+  },
+];

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>
+);

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>
+);

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>
+);

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>
+);

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' },
+];

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>
+);

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}
+  />
+);

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>
+);

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>
+);

packages/web-components-react-wrapper/.gitignore

@@ -1,3 +1,4 @@
 dist/
 node_modules/
 *.tgz
+.npmrc