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

commerce/sections/Seo/SeoPDPV2.tsx

@@ -23,7 +23,8 @@ export interface Props {
 }
 
 /** @title Product details */
-export function loader(props: Props, _req: Request, ctx: AppContext) {
+export function loader(_props: Props, _req: Request, ctx: AppContext) {
+  const props = _props as Partial<Props>;
   const {
     titleTemplate = "",
     descriptionTemplate = "",
@@ -38,11 +39,11 @@ export function loader(props: Props, _req: Request, ctx: AppContext) {
 
   const title = renderTemplateString(
     titleTemplate,
-    titleProp || jsonLD?.seo?.title || "",
+    titleProp || jsonLD?.seo?.title || ctx.seo?.title || "",
   );
   const description = renderTemplateString(
     descriptionTemplate,
-    descriptionProp || jsonLD?.seo?.description || "",
+    descriptionProp || jsonLD?.seo?.description || ctx.seo?.description || "",
   );
   const image = jsonLD?.product.image?.[0]?.url;
   const canonical = jsonLD?.seo?.canonical
@@ -71,6 +72,10 @@ function Section(props: Props): SEOSection {
   return <Seo {...props} />;
 }
 
+export function LoadingFallback(props: Partial<Props>) {
+  return <Seo {...props} />;
+}
+
 export { default as Preview } from "../../../website/components/_seo/Preview.tsx";
 
 export default Section;

commerce/sections/Seo/SeoPLPV2.tsx

@@ -33,7 +33,8 @@ export interface Props {
 }
 
 /** @title Product listing */
-export function loader(props: Props, _req: Request, ctx: AppContext) {
+export function loader(_props: Props, _req: Request, ctx: AppContext) {
+  const props = _props as Partial<Props>;
   const {
     titleTemplate = "",
     descriptionTemplate = "",
@@ -43,11 +44,11 @@ export function loader(props: Props, _req: Request, ctx: AppContext) {
 
   const title = renderTemplateString(
     titleTemplate,
-    titleProp || jsonLD?.seo?.title || "",
+    titleProp || jsonLD?.seo?.title || ctx.seo?.title || "",
   );
   const description = renderTemplateString(
     descriptionTemplate,
-    descriptionProp || jsonLD?.seo?.description || "",
+    descriptionProp || jsonLD?.seo?.description || ctx.seo?.description || "",
   );
   const canonical = props.canonical
     ? props.canonical
@@ -85,6 +86,10 @@ function Section(props: Props): SEOSection {
   return <Seo {...props} />;
 }
 
+export function LoadingFallback(props: Partial<Props>) {
+  return <Seo {...props} />;
+}
+
 export { default as Preview } from "../../../website/components/_seo/Preview.tsx";
 
 export default Section;

commerce/types.ts

@@ -609,6 +609,7 @@ export interface Search {
 export interface Suggestion {
   searches?: Search[];
   products?: Product[];
+  hits?: number;
 }
 
 /** @titleBy url */

decohub/mod.ts

@@ -1,7 +1,7 @@
 import { ImportMap } from "deco/blocks/app.ts";
 import { buildImportMap } from "deco/blocks/utils.tsx";
 import { notUndefined } from "deco/engine/core/utils.ts";
-import { type App, AppModule, context, type FnContext } from "deco/mod.ts";
+import { type App, AppModule, type FnContext } from "deco/mod.ts";
 import { Markdown } from "./components/Markdown.tsx";
 import manifest, { Manifest } from "./manifest.gen.ts";
 
@@ -79,7 +79,7 @@ export default async function App(
         // build apps based on name
         ...dynamicApps,
         ...manifest.apps,
-        ...context.play || state.enableAdmin // this is an optimization to not include the admin code for everyone in case of play is not being used.
+        ...state.enableAdmin // this is an optimization to not include the admin code for everyone in case of play is not being used.
           ? {
             [ADMIN_APP]: await import(
               resolvedAdminImport
@@ -92,7 +92,7 @@ export default async function App(
       },
     } as Manifest,
     state,
-    ...(context.play || state.enableAdmin)
+    ...state.enableAdmin
       ? {
         importMap: {
           ...enhancedImportMap,

deno.json

@@ -1,15 +1,15 @@
 {
   "imports": {
-    "$fresh/": "https://denopkg.com/denoland/fresh@1.5.2/",
+    "$fresh/": "https://denopkg.com/denoland/fresh@1.6.8/",
     "preact": "https://esm.sh/preact@10.15.1",
     "preact/": "https://esm.sh/preact@10.15.1/",
     "preact-render-to-string": "https://esm.sh/*preact-render-to-string@6.2.0",
     "@preact/signals": "https://esm.sh/*@preact/signals@1.1.3",
     "@preact/signals-core": "https://esm.sh/@preact/signals-core@1.3.0",
     "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.6/",
-    "deco/": "https://denopkg.com/deco-cx/deco@1.74.0/"
+    "deco-sites/std/": "https://denopkg.com/deco-sites/std@1.26.7/",
+    "deco/": "https://cdn.jsdelivr.net/gh/deco-cx/deco@1.78.0/"
   },
   "lock": false,
   "tasks": {
@@ -36,5 +36,5 @@
     "jsx": "react-jsx",
     "jsxImportSource": "preact"
   },
-  "version": "0.49.4"
+  "version": "0.52.1"
 }

htmx/sections/Deferred.tsx

@@ -2,14 +2,16 @@ import type { Section } from "deco/blocks/section.ts";
 import { useSection } from "deco/hooks/useSection.ts";
 import { asResolved, isDeferred } from "deco/mod.ts";
 import { AppContext } from "../mod.ts";
-import { shouldForceRender } from "../../utils/deferred.ts";
+import { renderSection, shouldForceRender } from "../../utils/deferred.tsx";
 
 /**
  * @titleBy type
  * @description fires once when the element is first loaded
  */
 interface Load {
   type: "load";
+  /** @hide true */
+  delay?: number;
 }
 
 /**
@@ -32,6 +34,8 @@ interface Intersect {
 
 export interface Props {
   sections: Section[];
+  /** @hide true */
+  fallbacks?: Section[];
   trigger?: Load | Revealed | Intersect;
   loading?: "lazy" | "eager";
 }
@@ -42,7 +46,7 @@ const Deferred = (props: Props) => {
   if (loading === "eager") {
     return (
       <>
-        {sections.map(({ Component, props }) => <Component {...props} />)}
+        {sections.map(renderSection)}
       </>
     );
   }
@@ -51,14 +55,22 @@ const Deferred = (props: Props) => {
     props: { loading: "eager" },
   });
 
+  const triggerList: (string | number)[] = [trigger?.type ?? "load", "once"];
+  if (trigger?.type === "load" && trigger.delay !== undefined) {
+    triggerList.push(`delay:${trigger.delay}ms`);
+  }
+
   return (
-    <div
-      hx-get={href}
-      hx-trigger={`${trigger?.type ?? "load"} once`}
-      hx-target="closest section"
-      hx-swap="outerHTML"
-      style={{ height: "100vh" }}
-    />
+    <>
+      <div
+        hx-get={href}
+        hx-trigger={triggerList.join(" ")}
+        hx-target="closest section"
+        hx-swap="outerHTML"
+        style={{ height: "100vh" }}
+      />
+      {props.fallbacks?.map(renderSection)}
+    </>
   );
 };
 
@@ -81,6 +93,7 @@ const DEFERRED = true;
 export const onBeforeResolveProps = (props: Props) => {
   return {
     ...props,
+    fallback: null,
     sections: asResolved(props.sections, DEFERRED),
   };
 };

records/deps.ts

@@ -1,2 +1,6 @@
-export * from "npm:@libsql/client@0.6.0/node";
+import { context } from "deco/deco.ts";
 export * from "https://esm.sh/drizzle-orm@0.30.10/libsql";
+export * from "npm:@libsql/client@0.7.0";
+
+export const createLocalClient = !context.isDeploy &&
+  (await import("npm:@libsql/client@0.7.0/node")).createClient;

records/mod.ts

@@ -1,6 +1,10 @@
 import type { App, AppContext as AC } from "deco/mod.ts";
 import manifest, { Manifest } from "./manifest.gen.ts";
-import { createClient as createSQLClient, drizzle } from "./deps.ts";
+import {
+  createClient as createSQLClient,
+  createLocalClient,
+  drizzle,
+} from "./deps.ts";
 import { getSQLClientConfig, StorageConfig } from "./utils.ts";
 
 export interface Props extends StorageConfig {}
@@ -14,7 +18,11 @@ export interface Props extends StorageConfig {}
 export default function Records(
   { url, authToken, ...state }: Props,
 ) {
-  const sqlClient = createSQLClient(getSQLClientConfig({ url, authToken }));
+  const sqlClientConfig = getSQLClientConfig({ url, authToken });
+  const sqlClient =
+    sqlClientConfig.url.startsWith("file://") && createLocalClient
+      ? createLocalClient(sqlClientConfig)
+      : createSQLClient(sqlClientConfig);
 
   const appState = {
     ...state,

utils/deferred.ts → utils/deferred.tsx

@@ -1,5 +1,10 @@
+import { Section } from "deco/mod.ts";
 import { __DECO_FBT } from "../website/handlers/fresh.ts";
 
 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} />
+);

vtex/loaders/intelligentSearch/suggestions.ts

@@ -68,7 +68,7 @@ const loaders = async (
       .then((res) => res.json());
   };
 
-  const [{ searches }, { products }] = await Promise.all([
+  const [{ searches }, { products, recordsFiltered }] = await Promise.all([
     query ? suggestions() : topSearches(),
     productSearch(),
   ]);
@@ -88,6 +88,7 @@ const loaders = async (
           withIsSimilarTo(req, ctx, p)
         ),
     ),
+    hits: recordsFiltered,
   };
 };
 

website/components/Image.tsx

@@ -84,7 +84,7 @@ const optimizeVTEX = (opts: OptimizationOptions) => {
 };
 
 export const getOptimizedMediaUrl = (opts: OptimizationOptions) => {
-  const { originalSrc, width, height, factor, fit } = opts;
+  const { originalSrc, width, height, fit } = opts;
 
   if (originalSrc.startsWith("data:")) {
     return originalSrc;
@@ -120,8 +120,8 @@ export const getOptimizedMediaUrl = (opts: OptimizationOptions) => {
 
   params.set("src", originalSrc);
   params.set("fit", fit);
-  params.set("width", `${Math.trunc(factor * width)}`);
-  height && params.set("height", `${Math.trunc(factor * height)}`);
+  params.set("width", `${width}`);
+  height && params.set("height", `${height}`);
 
   return `${PATH}?${params}`;
 };
@@ -136,16 +136,19 @@ export const getSrcSet = (
 
   for (let it = 0; it < FACTORS.length; it++) {
     const factor = FACTORS[it];
+    const w = Math.trunc(factor * width);
+    const h = height && Math.trunc(factor * height);
+
     const src = getOptimizedMediaUrl({
       originalSrc,
-      width,
-      height,
+      width: w,
+      height: h,
       factor,
       fit: fit || "cover",
     });
 
     if (src) {
-      srcSet.push(`${src} ${Math.trunc(factor * width)}w`);
+      srcSet.push(`${src} ${w}w`);
     }
   }
 

website/components/_Controls.tsx

@@ -12,7 +12,6 @@ interface Live {
   page?: Page;
   site: Site;
   flags: Flag[];
-  play: boolean;
   avoidRedirectingToEditor?: boolean;
 }
 
@@ -134,7 +133,6 @@ function LiveControls(
           page,
           site,
           flags,
-          play: !!context.play,
           avoidRedirectingToEditor,
         })}
       />

website/manifest.gen.ts

@@ -49,8 +49,9 @@ 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/Seo/Seo.tsx";
-import * as $$$$$$3 from "./sections/Seo/SeoV2.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";
 
 const manifest = {
   "functions": {
@@ -85,8 +86,9 @@ const manifest = {
   "sections": {
     "website/sections/Analytics/Analytics.tsx": $$$$$$0,
     "website/sections/Rendering/Deferred.tsx": $$$$$$1,
-    "website/sections/Seo/Seo.tsx": $$$$$$2,
-    "website/sections/Seo/SeoV2.tsx": $$$$$$3,
+    "website/sections/Rendering/SingleDeferred.tsx": $$$$$$2,
+    "website/sections/Seo/Seo.tsx": $$$$$$3,
+    "website/sections/Seo/SeoV2.tsx": $$$$$$4,
   },
   "matchers": {
     "website/matchers/always.ts": $$$$$$$0,