Merge branch 'main' of github.com:deco-cx/apps into magento

deco-cx · Jul 25, 2024 · bf22b63 · bf22b63
2 parents 9ed5b5c + 8a02e4e
commit bf22b63
Show file tree

Hide file tree

Showing 12 changed files with 236 additions and 169 deletions.
diff --git a/deno.json b/deno.json
@@ -9,7 +9,7 @@
     "std/": "https://deno.land/std@0.204.0/",
     "partytown/": "https://deno.land/x/partytown@0.4.8/",
     "deco-sites/std/": "https://denopkg.com/deco-sites/std@1.26.7/",
-    "deco/": "https://cdn.jsdelivr.net/gh/deco-cx/deco@1.78.0/"
+    "deco/": "https://cdn.jsdelivr.net/gh/deco-cx/deco@1.80.0/"
   },
   "lock": false,
   "tasks": {
@@ -36,5 +36,5 @@
     "jsx": "react-jsx",
     "jsxImportSource": "preact"
   },
-  "version": "0.52.1"
+  "version": "0.53.0"
 }
diff --git a/htmx/sections/Deferred.tsx b/htmx/sections/Deferred.tsx
@@ -1,8 +1,8 @@
 import type { Section } from "deco/blocks/section.ts";
 import { useSection } from "deco/hooks/useSection.ts";
 import { asResolved, isDeferred } from "deco/mod.ts";
+import { shouldForceRender } from "../../utils/deferred.ts";
 import { AppContext } from "../mod.ts";
-import { renderSection, shouldForceRender } from "../../utils/deferred.tsx";
 
 /**
  * @titleBy type
@@ -46,7 +46,7 @@ const Deferred = (props: Props) => {
   if (loading === "eager") {
     return (
       <>
-        {sections.map(renderSection)}
+        {sections.map((section) => <section.Component {...section.props} />)}
       </>
     );
   }
@@ -69,7 +69,9 @@ const Deferred = (props: Props) => {
         hx-swap="outerHTML"
         style={{ height: "100vh" }}
       />
-      {props.fallbacks?.map(renderSection)}
+      {props.fallbacks?.map((section) =>
+        section ? <section.Component {...section.props} /> : null
+      )}
     </>
   );
 };

diff --git a/utils/deferred.tsx → utils/deferred.ts b/utils/deferred.tsx → utils/deferred.ts
@@ -1,10 +1,5 @@
-import { Section } from "deco/mod.ts";
-import { __DECO_FBT } from "../website/handlers/fresh.ts";
+export const __DECO_FBT = "__decoFBT";
 
 export const shouldForceRender = <Ctx extends { isBot?: boolean }>(
   { ctx, searchParams }: { ctx: Ctx; searchParams: URLSearchParams },
 ): boolean => ctx.isBot || searchParams.get(__DECO_FBT) === "0";
-
-export const renderSection = ({ Component, props }: Section) => (
-  <Component {...props} />
-);
diff --git a/vtex/loaders/legacy/productDetailsPage.ts b/vtex/loaders/legacy/productDetailsPage.ts
@@ -98,7 +98,7 @@ async function loader(
       ? await withIsSimilarTo(req, ctx, page.product)
       : page.product,
     seo: {
-      title: product.productTitle,
+      title: product.productTitle || product.productName,
       description: product.metaTagDescription,
       canonical: new URL(`/${product.linkText}/p`, url.origin).href,
       noIndexing: props.indexingSkus ? false : !!skuId,

diff --git a/vtex/utils/legacy.ts b/vtex/utils/legacy.ts
@@ -132,7 +132,7 @@ export const pageTypesToSeo = (
   }
 
   return {
-    title: current.title!,
+    title: current.title || current.name || "",
     description: current.metaTagDescription!,
     noIndexing: hasMapTermOrSkuId,
     canonical: toCanonical(

diff --git a/website/handlers/fresh.ts b/website/handlers/fresh.ts
@@ -10,10 +10,9 @@ import { DecoState } from "deco/types.ts";
 import { allowCorsFor } from "deco/utils/http.ts";
 import { getSetCookies } from "std/http/cookie.ts";
 import { ConnInfo } from "std/http/server.ts";
+import { __DECO_FBT } from "../../utils/deferred.ts";
 import { AppContext } from "../mod.ts";
 
-export const __DECO_FBT = "__decoFBT";
-
 /**
  * @title Fresh Config
  */

diff --git a/website/manifest.gen.ts b/website/manifest.gen.ts
@@ -49,9 +49,10 @@ import * as $$$$$$$14 from "./matchers/userAgent.ts";
 import * as $$$$$0 from "./pages/Page.tsx";
 import * as $$$$$$0 from "./sections/Analytics/Analytics.tsx";
 import * as $$$$$$1 from "./sections/Rendering/Deferred.tsx";
-import * as $$$$$$2 from "./sections/Rendering/SingleDeferred.tsx";
-import * as $$$$$$3 from "./sections/Seo/Seo.tsx";
-import * as $$$$$$4 from "./sections/Seo/SeoV2.tsx";
+import * as $$$$$$2 from "./sections/Rendering/Lazy.tsx";
+import * as $$$$$$3 from "./sections/Rendering/SingleDeferred.tsx";
+import * as $$$$$$4 from "./sections/Seo/Seo.tsx";
+import * as $$$$$$5 from "./sections/Seo/SeoV2.tsx";
 
 const manifest = {
   "functions": {
@@ -86,9 +87,10 @@ const manifest = {
   "sections": {
     "website/sections/Analytics/Analytics.tsx": $$$$$$0,
     "website/sections/Rendering/Deferred.tsx": $$$$$$1,
-    "website/sections/Rendering/SingleDeferred.tsx": $$$$$$2,
-    "website/sections/Seo/Seo.tsx": $$$$$$3,
-    "website/sections/Seo/SeoV2.tsx": $$$$$$4,
+    "website/sections/Rendering/Lazy.tsx": $$$$$$2,
+    "website/sections/Rendering/SingleDeferred.tsx": $$$$$$3,
+    "website/sections/Seo/Seo.tsx": $$$$$$4,
+    "website/sections/Seo/SeoV2.tsx": $$$$$$5,
   },
   "matchers": {
     "website/matchers/always.ts": $$$$$$$0,

diff --git a/website/mod.ts b/website/mod.ts
@@ -1,15 +1,15 @@
 import "./utils/unhandledRejection.ts";
 
+import { Matcher } from "deco/blocks/matcher.ts";
+import { Page } from "deco/blocks/page.tsx";
 import { Section } from "deco/blocks/section.ts";
 import type { App, FnContext } from "deco/mod.ts";
 import { asResolved } from "deco/mod.ts";
 import type { Props as Seo } from "./components/Seo.tsx";
 import { Routes } from "./flags/audience.ts";
-import manifest, { Manifest } from "./manifest.gen.ts";
-import { Page } from "deco/blocks/page.tsx";
 import { TextReplace } from "./handlers/proxy.ts";
+import manifest, { Manifest } from "./manifest.gen.ts";
 import { Script } from "./types.ts";
-import { Matcher } from "deco/blocks/matcher.ts";
 
 export type AppContext = FnContext<Props, Manifest>;
 
@@ -79,21 +79,18 @@ export interface Props {
    */
   routes?: Routes[];
 
-  /** @title Seo */
-  seo?: Omit<
-    Seo,
-    "jsonLDs" | "canonical"
-  >;
-  /**
-   * @title Theme
-   */
-  theme?: Section;
   /**
    * @title Global Sections
-   * @description These sections will be included on all website/pages/Page.ts
+   * @description These sections run once on the start of the website and will be included on the start of each page
    */
   global?: Section[];
 
+  /**
+   * @title Page Sections
+   * @description These sections will be included on each page
+   */
+  pageSections?: Section[];
+
   /**
    * @title Error Page
    * @description This page will be used when something goes wrong beyond section error-boundaries when rendering a page
@@ -107,8 +104,9 @@ export interface Props {
   caching?: Caching;
 
   /**
-   * @title Async Rendering
-   * @description Async sections will be deferred to the client-side
+   * @title Global Async Rendering (Deprecated)
+   * @description Please disable this setting and enable each section individually. More info at https://deco.cx/en/blog/async-render-default
+   * @deprecated true
    * @default false
    */
   firstByteThresholdMS?: boolean;
@@ -131,6 +129,17 @@ export interface Props {
    */
   flavor?: Fresh | HTMX;
 
+  /** @title Seo */
+  seo?: Omit<
+    Seo,
+    "jsonLDs" | "canonical"
+  >;
+
+  /**
+   * @title Theme
+   */
+  theme?: Section;
+
   // We are hiding this prop because it is in testing phase
   // after that, probably we will remove this prop and default will be true
   /**
@@ -238,13 +247,21 @@ const deferPropsResolve = (routes: Routes): Routes => {
 };
 
 export const onBeforeResolveProps = <
-  T extends { routes?: Routes[]; errorPage?: Page; abTesting: AbTesting },
+  T extends {
+    routes?: Routes[];
+    errorPage?: Page;
+    abTesting: AbTesting;
+    pageSections?: Section[];
+  },
 >(
   props: T,
 ): T => {
   if (Array.isArray(props?.routes)) {
     const newRoutes: T = {
       ...props,
+      pageSections: props.pageSections?.map((section) =>
+        asResolved(section, false)
+      ),
       errorPage: props.errorPage
         ? asResolved(props.errorPage, true)
         : undefined,

diff --git a/website/pages/Page.tsx b/website/pages/Page.tsx
@@ -1,24 +1,22 @@
 import { Head } from "$fresh/runtime.ts";
-import { Section } from "deco/blocks/section.ts";
-import { ComponentMetadata } from "deco/engine/block.ts";
+import type { Page } from "deco/blocks/page.tsx";
+import { Section, SectionProps } from "deco/blocks/section.ts";
+import { ComponentFunc, ComponentMetadata } from "deco/engine/block.ts";
+import { HttpError } from "deco/engine/errors.ts";
 import { Context } from "deco/live.ts";
+import { isDeferred } from "deco/mod.ts";
+import { logger } from "deco/observability/otel/config.ts";
 import {
   usePageContext as useDecoPageContext,
   useRouterContext,
 } from "deco/runtime/fresh/routes/entrypoint.tsx";
-import { JSX } from "preact";
+import { Component, JSX } from "preact";
+import ErrorPageComponent from "../../utils/defaultErrorPage.tsx";
+import Clickhouse from "../components/Clickhouse.tsx";
 import Events from "../components/Events.tsx";
+import { SEOSection } from "../components/Seo.tsx";
 import LiveControls from "../components/_Controls.tsx";
 import { AppContext } from "../mod.ts";
-import type { Page } from "deco/blocks/page.tsx";
-import { Component } from "preact";
-import { ComponentFunc } from "deco/engine/block.ts";
-import { HttpError } from "deco/engine/errors.ts";
-import { logger } from "deco/observability/otel/config.ts";
-import { isDeferred } from "deco/mod.ts";
-import ErrorPageComponent from "../../utils/defaultErrorPage.tsx";
-import { SEOSection } from "../components/Seo.tsx";
-import Clickhouse from "../components/Clickhouse.tsx";
 
 const noIndexedDomains = ["decocdn.com", "deco.site", "deno.dev"];
 
@@ -105,12 +103,8 @@ function Page({
   unindexedDomain,
   avoidRedirectingToEditor,
   sendToClickHouse,
-}: Props & {
-  errorPage?: Page;
-  devMode: boolean;
-  avoidRedirectingToEditor?: boolean;
-  sendToClickHouse?: boolean;
-}): JSX.Element {
+  pageSections,
+}: SectionProps<typeof loader>): JSX.Element {
   const context = Context.active();
   const site = { id: context.siteId, name: context.site };
   const deco = useDeco();
@@ -147,6 +141,7 @@ function Page({
         {sendToClickHouse && (
           <Clickhouse siteId={site.id} siteName={site.name} />
         )}
+        {pageSections?.map(renderSection)}
         {sections.map(renderSection)}
       </ErrorBoundary>
     </>
@@ -165,9 +160,16 @@ export const loader = async (
     url.origin.includes(domain)
   );
 
+  const pageSections = await Promise.all(
+    (ctx.pageSections || [])?.map(async (section) => {
+      return await ctx.get(section);
+    }),
+  );
+
   return {
     ...restProps,
     sections,
+    pageSections,
     errorPage: isDeferred<Page>(ctx.errorPage)
       ? await ctx.errorPage()
       : undefined,
@@ -178,8 +180,8 @@ export const loader = async (
   };
 };
 
-export function Preview(props: Props) {
-  const { sections, seo } = props;
+export function Preview(props: SectionProps<typeof loader>) {
+  const { sections, seo, pageSections } = props;
   const deco = useDeco();
 
   return (
@@ -190,6 +192,7 @@ export function Preview(props: Props) {
 
       {seo && renderSection(seo)}
       <Events deco={deco} />
+      {pageSections?.map(renderSection)}
       {sections.map(renderSection)}
     </>
   );

diff --git a/website/sections/Rendering/Deferred.tsx b/website/sections/Rendering/Deferred.tsx
@@ -4,7 +4,7 @@ import { useScriptAsDataURI } from "deco/hooks/useScript.ts";
 import { asResolved, isDeferred } from "deco/mod.ts";
 import { useId } from "preact/hooks";
 import { AppContext } from "../../mod.ts";
-import { renderSection, shouldForceRender } from "../../../utils/deferred.tsx";
+import { shouldForceRender } from "../../../utils/deferred.ts";
 
 /** @titleBy type */
 export interface Scroll {
@@ -43,8 +43,6 @@ export interface Props {
   sections: Section[];
   display?: boolean;
   behavior?: Scroll | Intersection | Load;
-  /** @hide true */
-  fallbacks?: Section[];
 }
 
 const script = (
@@ -103,7 +101,7 @@ const Deferred = (props: Props) => {
   if (display) {
     return (
       <>
-        {sections.map(renderSection)}
+        {sections.map(({ Component, props }) => <Component {...props} />)}
       </>
     );
   }
@@ -125,7 +123,6 @@ const Deferred = (props: Props) => {
           behavior?.payload.toString() || "",
         )}
       />
-      {props.fallbacks?.map(renderSection)}
     </>
   );
 };