Draft version: SSR enable

apps/demo/app/[...slug]/fetchSlugs.ts

@@ -1,13 +1,4 @@
-import { createClient } from '@sanity/client';
-
-const client = createClient({
-  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!,
-  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET!,
-  apiVersion: 'vX',
-  useCdn: false,
-  token: process.env.NEXT_PUBLIC_SANITY_TOKEN!,
-  perspective: 'drafts',
-});
+import { client } from './sanity-client';
 
 export async function fetchSlugs() {
   const slugs: string[] = await client.fetch(

apps/demo/app/[...slug]/page.tsx

@@ -1,10 +1,22 @@
-// import { fetchSlugs } from '@/app/[...slug]/fetchSlugs';
-import { RouteLoader } from '@vyuh/react-extension-content';
-
+import { fetchSlugs } from '@/app/[...slug]/fetchSlugs';
+import { RouteLoaderNext } from '@vyuh/react-extension-content';
+import { ContentItem, PluginDescriptor, VyuhProvider } from '@vyuh/react-core';
+import { DefaultContentPlugin } from '@vyuh/react-extension-content';
+import { client, fetchSlug } from './sanity-client';
+import { system } from '@vyuh/react-feature-system';
+import { auth } from '@vyuh/react-feature-auth';
+import { blog } from '@vyuh/react-feature-blog';
+import { marketing } from '@vyuh/react-feature-marketing';
 // Use only if you want to pre-render all routes
-// export async function generateStaticParams() {
-//   return await fetchSlugs();
-// }
+export async function generateStaticParams() {
+  return await fetchSlugs();
+}
+
+const plugins = new PluginDescriptor({
+  content: new DefaultContentPlugin(),
+});
+
+const features = () => [system, marketing];
 
 export default async function DynamicRoute({
   params,
@@ -16,5 +28,17 @@ export default async function DynamicRoute({
     ? `/${allParams.slug.join('/')}`
     : `/${allParams.slug ?? ''}`;
 
-  return <RouteLoader url={slug} allowRefresh={true} live={true} />;
+  const data: ContentItem = await fetchSlug(slug);
+  console.log('>>>>>>');
+  console.log(data);
+  return (
+    <RouteLoaderNext
+      renderContent={plugins.content.render}
+      features={features}
+      data={data}
+      url={slug}
+      allowRefresh={true}
+      live={true}
+    />
+  );
 }

apps/demo/app/[...slug]/sanity-client.ts

@@ -0,0 +1,17 @@
+import { createClient } from '@sanity/client';
+
+export const client = createClient({
+  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!,
+  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET!,
+  apiVersion: 'vX',
+  useCdn: false,
+  token: process.env.NEXT_PUBLIC_SANITY_TOKEN!,
+  perspective: 'drafts',
+});
+
+export async function fetchSlug(slug: string) {
+  const response: any = await client.fetch(
+    `*[_type == "vyuh.route" && path == "${slug}"][0]`,
+  );
+  return response;
+}

apps/demo/app/client-app.tsx

@@ -6,11 +6,11 @@ import { misc } from '@/features/misc-feature';
 import { NextNavigationPlugin } from '@/plugins/next-navigation-plugin';
 import { PluginDescriptor, VyuhProvider } from '@vyuh/react-core';
 import { DefaultContentPlugin } from '@vyuh/react-extension-content';
+import { system } from '@vyuh/react-feature-system';
 import { auth } from '@vyuh/react-feature-auth';
 import { blog } from '@vyuh/react-feature-blog';
 import { marketing } from '@vyuh/react-feature-marketing';
 
-import { system } from '@vyuh/react-feature-system';
 import { SanityContentProvider } from '@vyuh/react-plugin-content-provider-sanity';
 import { ReactNode } from 'react';
 
@@ -25,7 +25,7 @@ const sanityProvider = new SanityContentProvider({
 });
 
 const plugins = new PluginDescriptor({
-  content: new DefaultContentPlugin(sanityProvider),
+  content: new DefaultContentPlugin(),
   navigation: new NextNavigationPlugin(),
 });
 

features/auth/react-feature-auth/src/content/email-password-form/default-email-password-form-layout.tsx

@@ -1,3 +1,4 @@
+'use client';
 import {
   executeAction,
   LayoutConfiguration,

features/marketing/react-feature-marketing/src/content/accordion/components/Accordion.tsx

@@ -1,8 +1,6 @@
 import { Accordion as AccordionItem } from '@/content/Accordion/accordion';
 import { DefaultAccordionLayout } from '@/content/Accordion/default-accordion-layout';
-import { cn } from '@/shared/utils';
-import { executeAction } from '@vyuh/react-core';
-import React, { useState } from 'react';
+import React from 'react';
 
 interface AccordionProps {
   content: AccordionItem;

features/marketing/react-feature-marketing/src/content/banner/components/Banner.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { Banner as BannerItem } from '@/content/banner/banner';
 import { DefaultBannerLayout } from '@/content/banner/default-banner-layout';
 import { cn } from '@/shared/utils';

features/marketing/react-feature-marketing/src/content/header/components/Header.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { DefaultHeaderLayout } from '@/content/header/default-header-layout';
 import { Header as HeaderItem } from '@/content/header/header';
 import { cn } from '@/shared/utils';

features/marketing/react-feature-marketing/src/content/header/components/ThemeToggle.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { cn } from '@/shared/utils';
 import { Moon, Palette, Sun } from 'lucide-react';
 import React, { useEffect, useState } from 'react';

features/marketing/react-feature-marketing/src/content/pricing/components/Pricing.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { DefaultPricingLayout } from '@/content/pricing/default-pricing-layout';
 import { Pricing as PricingContent } from '@/content/pricing/pricing';
 import { Section } from '@/shared/components/Section';

packages/react-extension-content/src/default-content-plugin.tsx

@@ -18,8 +18,8 @@ import React from 'react';
  */
 export class DefaultContentPlugin extends ContentPlugin {
   private extensionBuilder?: ContentExtensionBuilder;
-  constructor(provider: ContentProvider) {
-    super('vyuh.plugin.content.default', 'Default Content Plugin', provider);
+  constructor() {
+    super('vyuh.plugin.content.default', 'Default Content Plugin', {});
   }
 
   getItem<T extends SchemaItem>(
@@ -43,8 +43,10 @@ export class DefaultContentPlugin extends ContentPlugin {
     json: Record<string, any> | ContentItem,
     options?: { layout: LayoutConfiguration },
   ): React.ReactNode {
-    const schemaType = json.schemaType ?? this.provider.schemaType(json);
-
+    console.log(json);
+    const schemaType = json.schemaType ?? 'ContentBuilder';
+    console.log('>@@@@');
+    console.log(json);
     // Wrap the renderer in an error boundary to isolate rendering errors
     return (
       <ErrorBoundary title={`Failed to render: ${schemaType}`}>
@@ -78,12 +80,12 @@ export class DefaultContentPlugin extends ContentPlugin {
 
   async dispose(): Promise<void> {
     // Dispose the content provider
-    return this.provider.dispose();
+    // return this.provider.dispose();
   }
 
   async init(): Promise<void> {
     // Initialize the content provider
-    return this.provider.init();
+    // return this.provider.init();
   }
 }
 

packages/react-extension-content/src/index.ts

@@ -1,5 +1,6 @@
 export * from './ui/document-loader';
 export * from './ui/route-loader';
+export * from './ui/route-loader-next';
 export * from './ui/async-content-container';
 
 export * from './content-builder';

packages/react-extension-content/src/ui/route-loader-next.tsx

@@ -0,0 +1,57 @@
+import { ContentItem, FeatureDescriptor } from '@vyuh/react-core';
+
+/**
+ * Props for the RouteLoader component
+ */
+export interface RouteLoaderNextProps<TContent extends ContentItem> {
+  /**
+   * The URL to fetch the route for
+   */
+  url?: string;
+
+  features: () => FeatureDescriptor[] | Promise<FeatureDescriptor[]>;
+
+  /**
+   * Custom render function for the content
+   * If not provided, uses the content plugin's render method
+   */
+  renderContent?: (
+    content: TContent,
+  ) => React.ReactNode;
+  /**
+   * Data object for conent
+   */
+  data: TContent;
+  /**
+   * The route ID to fetch the route for
+   */
+  routeId?: string;
+
+  /**
+   * Whether to allow refreshing the route
+   */
+  allowRefresh?: boolean;
+
+  /**
+   * Whether to use live updates (observable-based) instead of one-time loading
+   */
+  live?: boolean;
+}
+
+/**
+ * A component that loads and renders a route from a URL or route ID
+ */
+export async function  RouteLoaderNext({
+  url,
+  data,
+  features,
+  renderContent,
+  routeId,
+  allowRefresh = true,
+  live = false,
+}: RouteLoaderNextProps<ContentItem>) {
+  const returnFeature = await features();
+  console.log(returnFeature);
+  console.log('take'+ data);
+  return <div>{renderContent(data)}</div>;
+}