Start migrating to server components (breaking)

atomicdata-dev · Oct 22, 2024 · 8b31409 · 8b31409
1 parent b3986af
commit 8b31409
Show file tree

Hide file tree

Showing 25 changed files with 236 additions and 194 deletions.
diff --git a/browser/create-template/templates/nextjs-site/next.config.mjs b/browser/create-template/templates/nextjs-site/next.config.mjs
@@ -7,6 +7,9 @@ const nextConfig = {
 
     return config;
   },
+  experimental: {
+    instrumentationHook: true,
+  },
 };
 
 export default nextConfig;
diff --git a/browser/create-template/templates/nextjs-site/src/app/[...slug]/error.tsx b/browser/create-template/templates/nextjs-site/src/app/[...slug]/error.tsx
@@ -1 +1,18 @@
-"use client";
+'use client';
+
+import Container from '@/components/Layout/Container';
+
+export default function Error({
+  error,
+}: {
+  error: Error & { digest?: string };
+}) {
+  return (
+    <Container>
+      <h1>{error.name}</h1>
+      <p>
+        Go to <a href='/'>home</a>
+      </p>
+    </Container>
+  );
+}
diff --git a/browser/create-template/templates/nextjs-site/src/app/[...slug]/page.tsx b/browser/create-template/templates/nextjs-site/src/app/[...slug]/page.tsx
@@ -1,6 +1,7 @@
-import { getCurrentResource } from "@/atomic/getCurrentResource";
-import { env } from "@/env";
-import FullPageView from "@/views/FullPage/FullPageView";
+import { getCurrentResource } from '@/atomic/getCurrentResource';
+import { env } from '@/env';
+import FullPageView from '@/views/FullPage/FullPageView';
+import { notFound } from 'next/navigation';
 
 const Page = async ({
   params,
@@ -10,12 +11,12 @@ const Page = async ({
   };
 }) => {
   const resourceUrl = new URL(
-    `${env.NEXT_PUBLIC_ATOMIC_SERVER_URL}/${params.slug.join("/")}`
+    `${env.NEXT_PUBLIC_ATOMIC_SERVER_URL}/${params.slug.join('/')}`,
   );
   const resource = await getCurrentResource(resourceUrl);
 
   if (!resource) {
-    return { notFound: true };
+    return notFound();
   }
 
   return <FullPageView subject={resource.subject} />;

diff --git a/browser/create-template/templates/nextjs-site/src/app/context/CurrentSubjectContext.tsx b/browser/create-template/templates/nextjs-site/src/app/context/CurrentSubjectContext.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { env } from '@/env';
 import { createContext, useContext, useState } from 'react';
 

diff --git a/browser/create-template/templates/nextjs-site/src/app/layout.tsx b/browser/create-template/templates/nextjs-site/src/app/layout.tsx
@@ -1,15 +1,14 @@
-import type { Metadata } from "next";
-import "./globals.css";
-import ProviderWrapper from "@/components/ProviderWrapper";
-import VStack from "@/components/Layout/VStack";
-import Navbar from "@/components/Navbar";
-import styles from "./layout.module.css";
-import Footer from "@/components/Footer";
-import Container from "@/components/Layout/Container";
+import type { Metadata } from 'next';
+import './globals.css';
+import ProviderWrapper from '@/components/ProviderWrapper';
+import VStack from '@/components/Layout/VStack';
+import Navbar from '@/components/Navbar';
+import styles from './layout.module.css';
+import Footer from '@/components/Footer';
 
 export const metadata: Metadata = {
-  title: "Next.js Atomic",
-  description: "Next.js Atomic template",
+  title: 'Next.js Atomic',
+  description: 'Next.js Atomic template',
 };
 
 export default function RootLayout({
@@ -18,10 +17,10 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang='en'>
       <body>
         <ProviderWrapper>
-          <VStack align="stretch" height="100vh">
+          <VStack align='stretch' height='100vh'>
             <header>
               <Navbar />
             </header>

diff --git a/browser/create-template/templates/nextjs-site/src/app/store.ts b/browser/create-template/templates/nextjs-site/src/app/store.ts
@@ -0,0 +1,6 @@
+import { env } from '@/env';
+import { Store } from '@tomic/lib';
+
+export const store = new Store({
+  serverUrl: env.NEXT_PUBLIC_ATOMIC_SERVER_URL,
+});
diff --git a/browser/create-template/templates/nextjs-site/src/atomic/getCurrentResource.ts b/browser/create-template/templates/nextjs-site/src/atomic/getCurrentResource.ts
@@ -1,20 +1,15 @@
-import { CollectionBuilder, type Resource } from "@tomic/lib";
-import { website } from "@/ontologies/website";
-import { Store } from "@tomic/lib";
-import { env } from "@/env";
+import { CollectionBuilder, type Resource } from '@tomic/lib';
+import { website } from '@/ontologies/website';
+import { store } from '@/app/store';
 
 /**
  * Queries the server for a resource with a href property that matches the given url pathname.
  * @param url The current URL in the browser.
  * @returns Promise that resolves to the subject of the resource, or undefined if no resource was found.
  */
 export async function getCurrentResource(
-  url: URL
+  url: URL,
 ): Promise<Resource | undefined> {
-  const store = new Store({
-    serverUrl: env.NEXT_PUBLIC_ATOMIC_SERVER_URL,
-  });
-
   const path = url.pathname;
 
   // Find the resource with the current path as href.

diff --git a/browser/create-template/templates/nextjs-site/src/components/Image.tsx b/browser/create-template/templates/nextjs-site/src/components/Image.tsx
@@ -0,0 +1,7 @@
+'use client';
+
+import { Image as AtomicImage } from '@tomic/react';
+
+export const Image = ({ subject, alt }: { subject: string; alt: string }) => {
+  return <AtomicImage subject={subject} alt={alt} />;
+};
diff --git a/browser/create-template/templates/nextjs-site/src/components/Layout/HStack.tsx b/browser/create-template/templates/nextjs-site/src/components/Layout/HStack.tsx
@@ -1,30 +1,30 @@
-import React, { ReactNode } from "react";
-import clsx from "clsx";
-import styles from "./HStack.module.css";
+import React, { ReactNode } from 'react';
+import clsx from 'clsx';
+import styles from './HStack.module.css';
 
 interface HStackProps {
-  gap?: React.CSSProperties["gap"];
-  align?: React.CSSProperties["alignItems"];
-  justify?: React.CSSProperties["justifyContent"];
+  gap?: React.CSSProperties['gap'];
+  align?: React.CSSProperties['alignItems'];
+  justify?: React.CSSProperties['justifyContent'];
   fullWidth?: boolean;
   wrap?: boolean;
   children: ReactNode;
 }
 
 const HStack: React.FC<HStackProps> = ({
-  gap = "1rem",
-  align = "start",
-  justify = "start",
+  gap = '1rem',
+  align = 'start',
+  justify = 'start',
   fullWidth = false,
   wrap = false,
   children,
 }) => {
   const inlineStyles: {
-    [key: string]: string;
+    [key: string]: string | number;
   } = {
-    "--hstack-gap": gap,
-    "--hstack-align": align,
-    "--hstack-justify": justify,
+    '--hstack-gap': gap,
+    '--hstack-align': align,
+    '--hstack-justify': justify,
   };
 
   return (

diff --git a/browser/create-template/templates/nextjs-site/src/components/Navbar.tsx b/browser/create-template/templates/nextjs-site/src/components/Navbar.tsx
@@ -1,33 +1,32 @@
-'use client';
-
-import { useArray, useResource } from '@tomic/react';
+import { useResource } from '@tomic/react';
 import Container from './Layout/Container';
 import HStack from './Layout/HStack';
 import { env } from '@/env';
 import { website, Website } from '@/ontologies/website';
 import MenuItem from '@/views/MenuItem/MenuItem';
-import Loader from './Loader';
 import styles from './Navbar.module.css';
+import { store } from '@/app/store';
 
-const Navbar = () => {
-  const site = useResource<Website>(env.NEXT_PUBLIC_WEBSITE_RESOURCE);
+const Navbar = async () => {
+  // const site = useResource<Website>(env.NEXT_PUBLIC_WEBSITE_RESOURCE);
+  const site = await store.getResource<Website>(
+    env.NEXT_PUBLIC_WEBSITE_RESOURCE,
+  );
 
   return (
     <Container>
       <nav className={styles.nav}>
         <HStack align='center' justify='space-between' wrap>
-          <Loader resource={site}>
-            <a href='/' className={styles.title}>
-              {site.title}
-            </a>
-            <ul className={styles.ul}>
-              {site.props.menuItems?.map((menuItem: string) => (
-                <li key={menuItem}>
-                  <MenuItem subject={menuItem} />
-                </li>
-              ))}
-            </ul>
-          </Loader>
+          <a href='/' className={styles.title}>
+            {site.title}
+          </a>
+          <ul className={styles.ul}>
+            {site.get(website.properties.menuItems)?.map((menuItem: string) => (
+              <li key={menuItem}>
+                <MenuItem subject={menuItem} />
+              </li>
+            ))}
+          </ul>
         </HStack>
       </nav>
     </Container>

diff --git a/browser/create-template/templates/nextjs-site/src/components/ProviderWrapper.tsx b/browser/create-template/templates/nextjs-site/src/components/ProviderWrapper.tsx
@@ -1,22 +1,14 @@
 'use client';
 
-import { Store } from '@tomic/lib';
 import { StoreContext } from '@tomic/react';
-import { env } from '@/env';
-import { initOntologies } from '@/ontologies';
 import { CurrentSubjectProvider } from '@/app/context/CurrentSubjectContext';
+import { store } from '@/app/store';
 
 const ProviderWrapper = ({
   children,
 }: {
   children: Readonly<React.ReactNode>;
 }) => {
-  const store = new Store({
-    serverUrl: env.NEXT_PUBLIC_ATOMIC_SERVER_URL,
-  });
-
-  initOntologies();
-
   return (
     <StoreContext.Provider value={store}>
       <CurrentSubjectProvider>{children}</CurrentSubjectProvider>

diff --git a/browser/create-template/templates/nextjs-site/src/components/Searchbar.tsx b/browser/create-template/templates/nextjs-site/src/components/Searchbar.tsx
@@ -1,30 +1,32 @@
-import HStack from "./Layout/HStack";
-import styles from "./Searchbar.module.css";
-import FaMagnifyingGlass from "./Icons/magnifying-glass-solid.svg";
-import Image from "next/image";
+'use client';
+
+import HStack from './Layout/HStack';
+import styles from './Searchbar.module.css';
+import FaMagnifyingGlass from './Icons/magnifying-glass-solid.svg';
+import Image from 'next/image';
 
 const Searchbar = ({
   value,
   handler,
-  placeholder = "Search...",
+  placeholder = 'Search...',
 }: {
   value: string;
   handler: (event: React.ChangeEvent<HTMLInputElement>) => void;
   placeholder?: string;
 }) => {
   return (
     <div className={styles.searchBar}>
-      <HStack align="center" gap="1ch">
+      <HStack align='center' gap='1ch'>
         <Image
           priority
           width={16}
           height={16}
           src={FaMagnifyingGlass}
-          alt="search"
+          alt='search'
         />
         <input
           className={styles.input}
-          type="search"
+          type='search'
           value={value}
           onChange={handler}
           placeholder={placeholder}

diff --git a/browser/create-template/templates/nextjs-site/src/instrumentation.ts b/browser/create-template/templates/nextjs-site/src/instrumentation.ts
@@ -0,0 +1,4 @@
+export async function register() {
+  const ontologies = await import('@/ontologies');
+  ontologies.initOntologies();
+}
diff --git a/browser/create-template/templates/nextjs-site/src/views/Block/BlockView.tsx b/browser/create-template/templates/nextjs-site/src/views/Block/BlockView.tsx
@@ -1,20 +1,20 @@
-"use client";
+import { useResource } from '@tomic/react';
+import DefaultView from '../DefaultView';
+import TextBlock from './TextBlock';
+import { website } from '@/ontologies/website';
+import ImageGalleryBlock from './ImageGalleryBlock';
+import { store } from '@/app/store';
 
-import { useResource } from "@tomic/react";
-import DefaultView from "../DefaultView";
-import TextBlock from "./TextBlock";
-import { website } from "@/ontologies/website";
-import ImageGalleryBlock from "./ImageGalleryBlock";
-
-const BlockView = ({ subject }: { subject: string }) => {
-  const block = useResource(subject);
+const BlockView = async ({ subject }: { subject: string }) => {
+  // const block = useResource(subject);
+  const block = await store.getResource(subject);
 
   const Component = block.matchClass(
     {
       [website.classes.textBlock]: TextBlock,
       [website.classes.imageGalleryBlock]: ImageGalleryBlock,
     },
-    DefaultView
+    DefaultView,
   );
 
   return <Component resource={block} />;

diff --git a/browser/create-template/templates/nextjs-site/src/views/Block/ImageGalleryBlock.tsx b/browser/create-template/templates/nextjs-site/src/views/Block/ImageGalleryBlock.tsx
@@ -1,18 +1,22 @@
-import { Resource } from "@tomic/lib";
-import { Image } from "@tomic/react";
-import styles from "./ImageGalleryBlock.module.css";
+import { Resource } from '@tomic/lib';
+import { Image } from '@/components/Image';
+import styles from './ImageGalleryBlock.module.css';
+import { Suspense } from 'react';
+import { website } from '@/ontologies/website';
 
-const ImageGalleryBlock = ({ resource }: { resource: Resource }) => {
+const ImageGalleryBlock = async ({ resource }: { resource: Resource }) => {
   return (
     <>
       {resource.props.name ? <h2>{resource.props.name}</h2> : null}
 
       <div className={styles.wrapper}>
-        {resource.props.images?.map((image: string, index: number) => (
-          <div key={index} className={styles.image}>
-            <Image subject={image} alt="" />
-          </div>
-        ))}
+        {resource
+          .get(website.properties.images)
+          ?.map((image: string, index: number) => (
+            <div key={index} className={styles.image}>
+              <Image subject={image} alt='' />
+            </div>
+          ))}
       </div>
     </>
   );

diff --git a/browser/create-template/templates/nextjs-site/src/views/Block/TextBlock.tsx b/browser/create-template/templates/nextjs-site/src/views/Block/TextBlock.tsx
@@ -1,8 +1,8 @@
-import { Resource } from "@tomic/lib";
-import { remark } from "remark";
-import html from "remark-html";
-import matter from "gray-matter";
-import styles from "./TextBlock.module.css";
+import { Resource } from '@tomic/lib';
+import { remark } from 'remark';
+import html from 'remark-html';
+import matter from 'gray-matter';
+import styles from './TextBlock.module.css';
 
 const TextBlock = ({ resource }: { resource: Resource }) => {
   const matterResult = matter(resource.props.description);

diff --git a/browser/create-template/templates/nextjs-site/src/views/DefaultView.tsx b/browser/create-template/templates/nextjs-site/src/views/DefaultView.tsx
@@ -1,7 +1,9 @@
-import { Resource, useResource } from "@tomic/react";
+import { store } from '@/app/store';
+import { Resource } from '@tomic/react';
 
-const DefaultView = ({ resource }: { resource: Resource }) => {
-  const subjectResource = useResource(resource.subject);
+const DefaultView = async ({ resource }: { resource: Resource }) => {
+  // const subjectResource = useResource(resource.subject);
+  const subjectResource = await store.getResource(resource.subject);
 
   return <p>No supported view for {subjectResource.title}.</p>;
 };