Fix magento

utils/graphql.ts

@@ -1,6 +1,9 @@
 // deno-lint-ignore-file no-explicit-any
+import { DecoRequestInit } from "./fetch.ts";
 import { createHttpClient, HttpClientOptions } from "./http.ts";
 
+const decoCacheArgLength = 55;
+
 interface GraphqlClientOptions extends Omit<HttpClientOptions, "base"> {
   endpoint: string;
 }
@@ -10,24 +13,33 @@ interface GraphQLResponse<D> {
   errors: unknown[];
 }
 
-type GraphQLAPI<D = unknown> = Record<string, {
-  response: GraphQLResponse<D>;
-  body: {
-    query: string;
-    variables?: Record<string, unknown>;
-    operationName?: string;
-  };
-}>;
+type GraphQLAPI<D = unknown> = Record<
+  string,
+  {
+    response: GraphQLResponse<D>;
+    body?: {
+      query: string;
+      variables?: Record<string, unknown>;
+      operationName?: string;
+    };
+  }
+>;
+
+interface GraphQLQueryProps<V> {
+  query: string;
+  fragments?: string[];
+  variables?: V;
+  operationName?: string;
+}
 
 export const gql = (query: TemplateStringsArray, ...fragments: string[]) =>
   query.reduce((a, c, i) => `${a}${fragments[i - 1]}${c}`);
 
-export const createGraphqlClient = (
-  { endpoint, ...rest }: GraphqlClientOptions,
-) => {
+export const createGraphqlClient = ({
+  endpoint,
+  ...rest
+}: GraphqlClientOptions) => {
   const url = new URL(endpoint);
-  const key = `POST ${url.pathname}`;
-
   const defaultHeaders = new Headers(rest.headers);
   defaultHeaders.set("content-type", "application/json");
   defaultHeaders.set("accept", "application/json");
@@ -40,21 +52,24 @@ export const createGraphqlClient = (
 
   return {
     query: async <D, V>(
-      { query = "", fragments = [], variables, operationName }: {
-        query: string;
-        fragments?: string[];
-        variables?: V;
-        operationName?: string;
-      },
-      init?: RequestInit,
+      {
+        query = "",
+        fragments = [],
+        variables,
+        operationName,
+      }: GraphQLQueryProps<V>,
+      init?: DecoRequestInit,
     ): Promise<D> => {
-      const { data, errors } = await http[key as any]({}, {
-        ...init,
-        body: {
-          query: [query, ...fragments].join("\n"),
-          variables: variables as any,
-          operationName,
-        },
+      const { key, props } = getMethodAndProps<V>({
+        query,
+        fragments,
+        variables,
+        operationName,
+        url,
+      });
+      const { searchParams, body } = getParamsAndBody({ key, props, init });
+      const { data, errors } = await http[key as any](searchParams, {
+        ...body,
       }).then((res) => res.json());
 
       if (Array.isArray(errors) && errors.length > 0) {
@@ -65,3 +80,100 @@ export const createGraphqlClient = (
     },
   };
 };
+
+const getMethodAndProps = <V>({
+  query,
+  fragments,
+  url,
+  operationName,
+  variables,
+}: GraphQLQueryProps<V> & { url: URL }) => {
+  const fullQuery = joinQueryArgs({
+    query,
+    fragments,
+  });
+  const stringfiedVariables = stringfyVariables<V>({ variables });
+  const minifiedQuery = minifyString(fullQuery);
+  const postMethodBool = isPostMethodRequired(
+    url.href,
+    minifiedQuery,
+    stringfiedVariables,
+    operationName,
+  );
+
+  const { key, executableQuery, executableVariables } = postMethodBool
+    ? {
+      key: `POST ${url.pathname}`,
+      executableQuery: fullQuery,
+      executableVariables: variables,
+    }
+    : {
+      key: `GET ${url.pathname}`,
+      executableQuery: minifiedQuery,
+      executableVariables: stringfiedVariables,
+    };
+
+  return {
+    key,
+    props: {
+      query: executableQuery,
+      variables: executableVariables,
+      operationName,
+    },
+  };
+};
+
+const getParamsAndBody = ({
+  key,
+  props,
+  init,
+}: ReturnType<typeof getMethodAndProps> & { init?: DecoRequestInit }) => {
+  if (key.startsWith("POST")) {
+    return { searchParams: {}, body: { body: props, ...init } };
+  }
+  return { searchParams: { ...props }, body: { ...init } };
+};
+
+const minifyString = (s: string): string => {
+  s = s.replace(
+    /\{([^{}]*)\}/g,
+    (_, p1) => `{${p1.replace(/\s+/g, " ").trim()}}`,
+  );
+  s = s
+    .replace(/[\r\n]+/g, " ")
+    .replace(/\s+/g, " ")
+    .replace(/\s*{\s*/g, "{")
+    .replace(/\s*}\s*/g, "}")
+    .replace(/\s*:\s*/g, ":")
+    .replace(/\s*\(\s*/g, "(")
+    .replace(/\s*\)\s*/g, ")");
+  return s.trim();
+};
+
+const joinQueryArgs = ({
+  query,
+  fragments = [],
+}: Pick<GraphQLQueryProps<any>, "query" | "fragments">) =>
+  [query, ...fragments].join("\n");
+
+const stringfyVariables = <V>({
+  variables,
+}: Pick<GraphQLQueryProps<V>, "variables">) => JSON.stringify(variables);
+
+const isPostMethodRequired = (
+  href: string,
+  query: string,
+  variables: string,
+  operationName?: string,
+): boolean => {
+  if (query.startsWith("mutation")) {
+    return true;
+  }
+
+  const urlLength = `${href}?query=${encodeURI(query)}&variables=${
+    encodeURI(
+      variables,
+    )
+  }&operationname=${operationName}`;
+  return urlLength.length + decoCacheArgLength > 2000;
+};

website/components/Image.tsx

@@ -101,6 +101,20 @@ const optimizeVTEX = (opts: OptimizationOptions) => {
   return src.href;
 };
 
+const optimizeMagento = (opts: OptimizationOptions) => {
+  const { originalSrc, width, height } = opts;
+
+  const url = new URL(originalSrc);
+  url.searchParams.set("width", `${width}`);
+  url.searchParams.set("height", `${height}`);
+  url.searchParams.set("canvas", `${width}:${height}`);
+  url.searchParams.set("optimize", "low");
+  url.searchParams.set("fit", opts.fit === "cover" ? "" : "bounds");
+
+  return url.href;
+};
+
+
 export const getOptimizedMediaUrl = (opts: OptimizationOptions) => {
   const { originalSrc, width, height, fit } = opts;
 
@@ -109,6 +123,10 @@ export const getOptimizedMediaUrl = (opts: OptimizationOptions) => {
   }
 
   if (!isImageOptmizationEnabled()) {
+    if (originalSrc.includes("media/catalog/product")) {
+      return optimizeMagento(opts);
+    }
+
     if (originalSrc.startsWith("https://cdn.vnda.")) {
       return optmizeVNDA(opts);
     }

website/components/OneDollarStats.tsx

@@ -27,6 +27,10 @@ declare global {
   }
 }
 
+export const trackerOriginal = `(function() {
+  "use strict";function g(t){let e={};return["utm_campaign","utm_source","utm_medium","utm_term","utm_content"].forEach(n=>{let o=t.get(n);o&&(e[n]=o)}),e}function p(t){if(!t)return;let e=t.split(";"),n={};for(let o of e){let r=o.split("=").map(s=>s.trim());r.length!==2||r[0]===""||r[1]===""||(n[r[0]]=r[1])}return Object.keys(n).length===0?void 0:n}window.stonks={event:y,view:S};var l=document.currentScript,h=l?.getAttribute("data-hash-routing")!==null,m={isLocalhost:/^localhost$|^127(\.[0-9]+){0,2}\.[0-9]+$|^\[::1?\]$/.test(location.hostname)||location.protocol==="file:",isHeadlessBrowser:!!(window._phantom||window.__nightmare||window.navigator.webdriver||window.Cypress)};async function w(t){let e=l?.getAttribute("data-url")||"https://collector.onedollarstats.com/events",n=new URL(location.href);n.search="","path"in t&&t.path&&(n.pathname=t.path);let o=n.href.replace(/\\/$/,""),r=t.referrer??void 0;if(!r){let i=new URL(location.href),c=document.referrer&&document.referrer!=="null"?document.referrer:void 0;if(c){let u=new URL(c);u.hostname!==i.hostname&&(r=u.href)}}let s={u:o,e:[{t:t.type,h,r,p:t.props}]};t.utm&&Object.keys(t.utm).length>0&&(s.qs=t.utm),!(navigator.sendBeacon!==void 0&&navigator.sendBeacon(e,JSON.stringify(s)))&&fetch(e,{body:JSON.stringify(s),headers:{"Content-Type":"application/json"},keepalive:!0,method:"POST"}).catch(i=>console.error("fetch() failed:"))}async function y(t,e,n){if(d())return;let o={};typeof e=="string"?(o.path=e,n&&(o.props=n)):typeof e=="object"&&(o.props=e);let r=o?.path||void 0;if(!r){let s=document.body?.getAttribute("data-s:path")||document.querySelector('meta[name="stonks-path"]')?.getAttribute("content");s&&(r=s)}w({type:t,props:o?.props,path:r})}function A(t){if(t.type==="auxclick"&&t.button!==1)return;let e=t.target,n=e.getAttribute("data-s:event");if(!n)return;let o=e.getAttribute("data-s:event-props"),r=o?p(o):void 0,s=e.getAttribute("data-s:event-path")||void 0;y(n,s,r)}async function S(t,e){let n={};typeof t=="string"?(n.path=t,e&&(n.props=e)):typeof t=="object"&&(n.props=t),b({path:n?.path,props:n?.props},!1)}async function b(t,e=!0){if(e&&d())return;let n=new URLSearchParams(location.search),o=g(n),r=t?.path||void 0;if(!r){let i=document.body?.getAttribute("data-s:path")||document.querySelector('meta[name="stonks-path"]')?.getAttribute("content");i&&(r=i)}let s=t.props||void 0;if(!s){let i=l?.getAttribute("data-props"),c=i?p(i)||{}:{},u=document.querySelectorAll("[data-s\\:view-props]");for(let v of Array.from(u)){let f=v.getAttribute("data-s:view-props");if(!f)continue;let P=p(f);Object.assign(c,P)}s=c}w({type:"PageView",props:Object.keys(s).length>0?s:void 0,path:r,utm:o})}async function a(){let t=document.querySelector('meta[name="stonks-collect"]')?.getAttribute("content"),e=document.body?.getAttribute("data-s:collect");if(t==="false"||e==="false"){a.lastPage=null;return}if(!(l?.getAttribute("data-autocollect")!=="false")&&t!=="true"&&e!=="true"){a.lastPage=null;return}if(!h&&a.lastPage===location.pathname){console.warn("Ignoring event PageView - pathname has not changed");return}if(d())return;a.lastPage=location.pathname;let o=l?.getAttribute("data-props"),r=o?p(o)||{}:{},s=document.querySelectorAll("[data-s\\:view-props]");for(let i of Array.from(s)){let c=i.getAttribute("data-s:view-props");if(!c)continue;let u=p(c);Object.assign(r,u)}b({props:Object.keys(r).length>0?r:void 0},!1)}(e=>e.lastPage=null)(a||={});function d(){return!!(m.isLocalhost&&l?.getAttribute("data-allow-localhost")!=="true"||m.isHeadlessBrowser)}if(window.history.pushState){let t=window.history.pushState;window.history.pushState=function(e,n,o){t.apply(this,[e,n,o]),window.requestAnimationFrame(()=>{a()})},window.addEventListener("popstate",()=>{window.requestAnimationFrame(()=>{a()})})}document.visibilityState!=="visible"?document.addEventListener("visibilitychange",()=>{!a.lastPage&&document.visibilityState==="visible"&&a()}):a();document.addEventListener("click",A);
+  })();`;
+
 const oneDollarSnippet = () => {
   // Flags and additional dimentions
   const props: Record<string, string> = {};

website/functions/requestToPathname.ts

@@ -0,0 +1,28 @@
+import type { FunctionContext, LoaderFunction } from "@deco/deco";
+import { RequestURLParam } from "./requestToParam.ts";
+
+export interface Props {
+  /**
+   * @description Path name to remove from the URL - Stringfied regex. Example: "/product/" transform "/product/my-sku" in "my-sku". "/product/|/store" transform "/product/my-sku/store" in "my-sku"
+   * @format dynamic-options
+   */
+  pathname?: string;
+}
+
+/**
+ * @title Get params from request pathname.
+ * @description Set a pathname to remove from url and extract a slug
+ */
+const requestToParam: LoaderFunction<
+  Props,
+  RequestURLParam,
+  FunctionContext
+> = (req, ctx) => {
+  const url = new URL(req.url);
+  const regex = new RegExp("(" + ctx.state.$live.pathname + ")", "g");
+  return {
+    data: url.pathname.toString().replace(regex, ""),
+  };
+};
+
+export default requestToParam;

website/handlers/router.ts

@@ -26,6 +26,12 @@ const rankRoute = (pattern: string): number =>
   pattern
     .split("/")
     .reduce((acc, routePart) => {
+      if (routePart.startsWith("}?")) {
+        if (routePart.includes("*")) {
+          return acc - 2;
+        }
+        return acc - 1;
+      }
       if (routePart === "*") {
         return acc;
       }
@@ -79,17 +85,20 @@ export const router = (
     }
     for (const { pathTemplate: routePath, handler } of routes) {
       const pattern = urlPatternCache[routePath] ??= (() => {
-        let url;
         if (URL.canParse(routePath)) {
-          url = new URL(routePath);
-        } else {
-          url = new URL(routePath, "http://localhost:8000");
+          return new URLPattern(routePath);
         }
+        const patternWithDefaultOrigin = new URLPattern(
+          routePath,
+          "http://localhost:8000",
+        );
+
         return new URLPattern({
-          pathname: url.pathname,
-          ...(url.search ? { search: url.search } : {}),
+          pathname: patternWithDefaultOrigin.pathname,
+          search: patternWithDefaultOrigin.search || "*",
         });
       })();
+
       const res = pattern.exec(req.url);
       const groups = res?.pathname.groups ?? {};
       if (res !== null) {
@@ -151,6 +160,7 @@ const prepareRoutes = (audiences: Routes[], ctx: AppContext) => {
     ((highPriorityA ? HIGH_PRIORITY_ROUTE_RANK_BASE_VALUE : 0) +
       rankRoute(routeStringA))
   );
+
   return {
     routes: builtRoutes.map((route) => ({
       pathTemplate: route[0],

website/manifest.gen.ts

@@ -12,6 +12,7 @@ import * as $$$$$$$$5 from "./flags/multivariate/message.ts";
 import * as $$$$$$$$6 from "./flags/multivariate/page.ts";
 import * as $$$$$$$$7 from "./flags/multivariate/section.ts";
 import * as $0 from "./functions/requestToParam.ts";
+import * as $1 from "./functions/requestToPathname.ts";
 import * as $$$$0 from "./handlers/fresh.ts";
 import * as $$$$1 from "./handlers/proxy.ts";
 import * as $$$$2 from "./handlers/redirect.ts";
@@ -60,6 +61,7 @@ import * as $$$$$$5 from "./sections/Seo/SeoV2.tsx";
 const manifest = {
   "functions": {
     "website/functions/requestToParam.ts": $0,
+    "website/functions/requestToPathname.ts": $1,
   },
   "loaders": {
     "website/loaders/analyticsScript.ts": $$$0,