Add vtex productshelf

import_map.json

@@ -1,6 +1,7 @@
 {
   "imports": {
-    "$live/": "https://denopkg.com/deco-cx/[email protected]/",
+    "$store/": "./",
+    "$live/": "https://denopkg.com/deco-cx/live.ts@e2c8ef8e220fc55fddd779cec06a59b3ce8fe491/",
     "deco-sites/std/": "https://denopkg.com/deco-sites/[email protected]/",
     "deco-sites/fashion/": "./",
     "partytown/": "https://deno.land/x/[email protected]/",

islands/DogFacts.tsx

@@ -0,0 +1,61 @@
+import type { SectionProps } from "$live/mod.ts";
+import { onServer } from "$live/routes/live/rpc/[func].ts";
+import type { LoaderContext } from "$live/types.ts";
+import { useCallback, useState } from "preact/compat";
+
+const getEnvVar = onServer("myIslandFunc", (_, envVar: string) => {
+  return Deno.env.get(envVar);
+});
+
+export default function DogFacts(
+  { title, dogFacts }: SectionProps<typeof loader>,
+) {
+  const [value, setValue] = useState(0);
+  const increment = useCallback(() => {
+    setValue(value + 1);
+  }, [value]);
+
+  const [envVarKey, setEnvVarKey] = useState("");
+
+  const [envVarValue, setEnvVarValue] = useState<string | undefined>(undefined);
+  return (
+    <>
+      <div class="p-4">
+        <h1 class="font-bold">{title}</h1>
+        <ul>
+          {dogFacts.map((fact) => <li>{fact}</li>)}
+        </ul>
+      </div>
+      <p>Counter: {value}</p>
+      <button onClick={increment}>Click me!</button>
+      <input
+        type="text"
+        value={envVarKey}
+        onChange={(e) => setEnvVarKey(e?.currentTarget?.value ?? "")}
+      />
+      <p>EnvVar value: {envVarValue}</p>
+      <button
+        onClick={() =>
+          getEnvVar(envVarKey).then((data) => setEnvVarValue(data))}
+      >
+        Update env var
+      </button>
+    </>
+  );
+}
+
+// Props type that will be configured in deco.cx's Admin
+export interface LoaderProps {
+  title: string;
+  numberOfFacts?: number;
+}
+
+export async function loader(
+  _req: Request,
+  { state: { $live: { numberOfFacts, title } } }: LoaderContext<LoaderProps>,
+) {
+  const { facts: dogFacts } = (await fetch(
+    `https://dogapi.dog/api/facts?number=${numberOfFacts ?? 1}`,
+  ).then((r) => r.json())) as { facts: string[] };
+  return { dogFacts, title };
+}

live.gen.ts

@@ -5,6 +5,7 @@
 import config from "./deno.json" assert { type: "json" };
 import { DecoManifest } from "$live/types.ts";
 
+import * as $$$0 from "./loaders/dogApiFacts.ts";
 import * as $$$$0 from "./routes/api/[...catchall].tsx";
 import * as $$$$1 from "./routes/_app.tsx";
 import * as $$$$$0 from "./islands/ShippingSimulation.tsx";
@@ -16,22 +17,28 @@ import * as $$$$$5 from "./islands/HeaderModals.tsx";
 import * as $$$$$6 from "./islands/SliderJS.tsx";
 import * as $$$$$7 from "./islands/ProductImageZoom.tsx";
 import * as $$$$$8 from "./islands/ViewSendEvent.tsx";
-import * as $$$$$9 from "./islands/SearchControls.tsx";
+import * as $$$$$9 from "./islands/DogFacts.tsx";
+import * as $$$$$10 from "./islands/SearchControls.tsx";
 import * as $$$$$$$$0 from "./sections/LinkTree.tsx";
 import * as $$$$$$$$1 from "./sections/DesignSystem.story.tsx";
 import * as $$$$$$$$2 from "./sections/Features.tsx";
 import * as $$$$$$$$3 from "./sections/BannerPLP.tsx";
-import * as $$$$$$$$4 from "./sections/BannerGrid.tsx";
-import * as $$$$$$$$5 from "./sections/SearchResult.tsx";
-import * as $$$$$$$$6 from "./sections/ProductShelf.tsx";
-import * as $$$$$$$$7 from "./sections/Footer.tsx";
-import * as $$$$$$$$8 from "./sections/CookieConsent.tsx";
-import * as $$$$$$$$9 from "./sections/Header.tsx";
-import * as $$$$$$$$10 from "./sections/ProductDetails.tsx";
-import * as $$$$$$$$11 from "./sections/Highlights.tsx";
-import * as $$$$$$$$12 from "./sections/WhatsApp.tsx";
-import * as $$$$$$$$13 from "./sections/Carousel.tsx";
+import * as $$$$$$$$4 from "./sections/DogFacts_v2.tsx";
+import * as $$$$$$$$5 from "./sections/BannerGrid.tsx";
+import * as $$$$$$$$6 from "./sections/VtexProductShelf.tsx";
+import * as $$$$$$$$7 from "./sections/SearchResult.tsx";
+import * as $$$$$$$$8 from "./sections/ProductShelf.tsx";
+import * as $$$$$$$$9 from "./sections/Footer.tsx";
+import * as $$$$$$$$10 from "./sections/CookieConsent.tsx";
+import * as $$$$$$$$11 from "./sections/Header.tsx";
+import * as $$$$$$$$12 from "./sections/DogFacts.tsx";
+import * as $$$$$$$$13 from "./sections/ProductDetails.tsx";
+import * as $$$$$$$$14 from "./sections/Highlights.tsx";
+import * as $$$$$$$$15 from "./sections/WhatsApp.tsx";
+import * as $$$$$$$$16 from "./sections/ProductShelfGetProps.tsx";
+import * as $$$$$$$$17 from "./sections/Carousel.tsx";
 import * as $live_middleware from "$live/routes/_middleware.ts";
+import * as $live_rpc from "$live/routes/live/rpc/[func].ts";
 import * as $live_workbench from "$live/routes/live/workbench.ts";
 import * as $live_editorData from "$live/routes/live/editorData.ts";
 import * as $live_inspect from "$live/routes/live/inspect.ts";
@@ -86,10 +93,14 @@ import * as i2$$$7 from "deco-sites/std/sections/configVTEX.global.tsx";
 import * as i2$$$8 from "deco-sites/std/sections/SEOPDP.tsx";
 
 const manifest: DecoManifest = {
+  "loaders": {
+    "deco-sites/fashion/loaders/dogApiFacts.ts": $$$0,
+  },
   "routes": {
     "./routes/api/[...catchall].tsx": $$$$0,
     "./routes/_app.tsx": $$$$1,
     "./routes/_middleware.ts": $live_middleware,
+    "./routes/live/rpc/[func].ts": $live_rpc,
     "./routes/live/workbench.ts": $live_workbench,
     "./routes/live/editorData.ts": $live_editorData,
     "./routes/live/inspect.ts": $live_inspect,
@@ -107,23 +118,28 @@ const manifest: DecoManifest = {
     "./islands/SliderJS.tsx": $$$$$6,
     "./islands/ProductImageZoom.tsx": $$$$$7,
     "./islands/ViewSendEvent.tsx": $$$$$8,
-    "./islands/SearchControls.tsx": $$$$$9,
+    "./islands/DogFacts.tsx": $$$$$9,
+    "./islands/SearchControls.tsx": $$$$$10,
   },
   "sections": {
     "deco-sites/fashion/sections/LinkTree.tsx": $$$$$$$$0,
     "deco-sites/fashion/sections/DesignSystem.story.tsx": $$$$$$$$1,
     "deco-sites/fashion/sections/Features.tsx": $$$$$$$$2,
     "deco-sites/fashion/sections/BannerPLP.tsx": $$$$$$$$3,
-    "deco-sites/fashion/sections/BannerGrid.tsx": $$$$$$$$4,
-    "deco-sites/fashion/sections/SearchResult.tsx": $$$$$$$$5,
-    "deco-sites/fashion/sections/ProductShelf.tsx": $$$$$$$$6,
-    "deco-sites/fashion/sections/Footer.tsx": $$$$$$$$7,
-    "deco-sites/fashion/sections/CookieConsent.tsx": $$$$$$$$8,
-    "deco-sites/fashion/sections/Header.tsx": $$$$$$$$9,
-    "deco-sites/fashion/sections/ProductDetails.tsx": $$$$$$$$10,
-    "deco-sites/fashion/sections/Highlights.tsx": $$$$$$$$11,
-    "deco-sites/fashion/sections/WhatsApp.tsx": $$$$$$$$12,
-    "deco-sites/fashion/sections/Carousel.tsx": $$$$$$$$13,
+    "deco-sites/fashion/sections/DogFacts_v2.tsx": $$$$$$$$4,
+    "deco-sites/fashion/sections/BannerGrid.tsx": $$$$$$$$5,
+    "deco-sites/fashion/sections/VtexProductShelf.tsx": $$$$$$$$6,
+    "deco-sites/fashion/sections/SearchResult.tsx": $$$$$$$$7,
+    "deco-sites/fashion/sections/ProductShelf.tsx": $$$$$$$$8,
+    "deco-sites/fashion/sections/Footer.tsx": $$$$$$$$9,
+    "deco-sites/fashion/sections/CookieConsent.tsx": $$$$$$$$10,
+    "deco-sites/fashion/sections/Header.tsx": $$$$$$$$11,
+    "deco-sites/fashion/sections/DogFacts.tsx": $$$$$$$$12,
+    "deco-sites/fashion/sections/ProductDetails.tsx": $$$$$$$$13,
+    "deco-sites/fashion/sections/Highlights.tsx": $$$$$$$$14,
+    "deco-sites/fashion/sections/WhatsApp.tsx": $$$$$$$$15,
+    "deco-sites/fashion/sections/ProductShelfGetProps.tsx": $$$$$$$$16,
+    "deco-sites/fashion/sections/Carousel.tsx": $$$$$$$$17,
     "$live/sections/PageInclude.tsx": i2$$$9,
     "deco-sites/std/sections/configYourViews.global.tsx": i2$$$0,
     "deco-sites/std/sections/SEO.tsx": i2$$$1,

loaders/dogApiFacts.ts

@@ -0,0 +1,21 @@
+import type { LoaderContext } from "$live/types.ts";
+
+// Return type of this loader
+export interface DogFact {
+  fact: string;
+}
+
+// Props type that will be configured in deco.cx's Admin
+export interface Props {
+  numberOfFacts?: number;
+}
+
+export default async function dogApiFacts(
+  _req: Request,
+  { state: { $live: { numberOfFacts } } }: LoaderContext<Props>,
+): Promise<DogFact[]> {
+  const { facts } = (await fetch(
+    `https://dogapi.dog/api/facts?number=${numberOfFacts ?? 1}`,
+  ).then((r) => r.json())) as { facts: string[] };
+  return facts.map((fact) => ({ fact }));
+}