From 1ba1c8aa0cf02eb7ab728b92e61c2aa3e132a366 Mon Sep 17 00:00:00 2001 From: guitavano Date: Tue, 5 Mar 2024 09:48:08 -0300 Subject: [PATCH 1/8] add req and device to section props to avoid inline loaders --- components/section.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/components/section.tsx b/components/section.tsx index a061a8c54..792023ef8 100644 --- a/components/section.tsx +++ b/components/section.tsx @@ -11,6 +11,7 @@ import { ComponentFunc } from "../engine/block.ts"; import { FieldResolver } from "../engine/core/resolver.ts"; import { logger } from "../observability/otel/config.ts"; import { PartialProps } from "$fresh/src/runtime/Partial.tsx"; +import { Device, deviceOf } from "deco/utils/userAgent.ts"; export interface SectionContext extends HttpContext { renderSalt?: string; @@ -144,8 +145,17 @@ export const withSection = ( const idPrefix = getSectionID(ctx.resolveChain); const debugEnabled = ctx.context?.state?.debugEnabled; const renderSaltFromState = ctx.context?.state?.renderSalt; + const req = ctx.request; + let device: Device | null = null; + return { - props, + props: { + req, + get device() { + return device ??= deviceOf(ctx.request); + }, + ...props, + }, Component: (props: TProps) => { // if parent salt is not defined it means that we are at the root level, meaning that we are the first partial in the rendering tree. const parentRenderSalt = useContext(SectionContext)?.renderSalt; From 03f97c02fe7adcc1d9fc55b08236d8469c076029 Mon Sep 17 00:00:00 2001 From: guitavano Date: Tue, 5 Mar 2024 10:02:25 -0300 Subject: [PATCH 2/8] create hooks --- blocks/section.ts | 3 ++- components/section.tsx | 14 ++++++-------- hooks/useDevice.ts | 8 ++++++++ hooks/useRequest.ts | 9 +++++++++ 4 files changed, 25 insertions(+), 9 deletions(-) create mode 100644 hooks/useDevice.ts create mode 100644 hooks/useRequest.ts diff --git a/blocks/section.ts b/blocks/section.ts index 8bd1e6290..44b17bc1d 100644 --- a/blocks/section.ts +++ b/blocks/section.ts @@ -18,6 +18,7 @@ import { Resolver } from "../engine/core/resolver.ts"; import { AppManifest, FunctionContext } from "../types.ts"; import { PartialProps } from "$fresh/src/runtime/Partial.tsx"; import { HttpError } from "../engine/errors.ts"; +import { Device } from "deco/utils/userAgent.ts"; /** * @widget none @@ -120,7 +121,7 @@ export const createSectionBlock = ( TConfig, HttpContext > => { - const componentFunc = wrapper( + const componentFunc = wrapper( resolver, mod.default, mod.LoadingFallback, diff --git a/components/section.tsx b/components/section.tsx index 792023ef8..309494a68 100644 --- a/components/section.tsx +++ b/components/section.tsx @@ -15,6 +15,7 @@ import { Device, deviceOf } from "deco/utils/userAgent.ts"; export interface SectionContext extends HttpContext { renderSalt?: string; + device: Device; } export const SectionContext = createContext< @@ -147,15 +148,9 @@ export const withSection = ( const renderSaltFromState = ctx.context?.state?.renderSalt; const req = ctx.request; let device: Device | null = null; - + return { - props: { - req, - get device() { - return device ??= deviceOf(ctx.request); - }, - ...props, - }, + props, Component: (props: TProps) => { // if parent salt is not defined it means that we are at the root level, meaning that we are the first partial in the rendering tree. const parentRenderSalt = useContext(SectionContext)?.renderSalt; @@ -170,6 +165,9 @@ export const withSection = ( diff --git a/hooks/useDevice.ts b/hooks/useDevice.ts new file mode 100644 index 000000000..8312dec51 --- /dev/null +++ b/hooks/useDevice.ts @@ -0,0 +1,8 @@ +import { useContext } from "preact/hooks"; +import { SectionContext } from "deco/components/section.tsx"; + +export const useDevice = () => { + const ctx = useContext(SectionContext); + + return ctx?.device; +} \ No newline at end of file diff --git a/hooks/useRequest.ts b/hooks/useRequest.ts new file mode 100644 index 000000000..6e067c6cc --- /dev/null +++ b/hooks/useRequest.ts @@ -0,0 +1,9 @@ +import { useContext } from "preact/hooks"; +import { SectionContext } from "deco/components/section.tsx"; + +export const useRequest = () => { + const ctx = useContext(SectionContext); + console.log(ctx?.request) + + return ctx?.request; +} \ No newline at end of file From 853ffc722ef2bb169c9f825f4931df8986f083aa Mon Sep 17 00:00:00 2001 From: guitavano Date: Tue, 5 Mar 2024 10:03:04 -0300 Subject: [PATCH 3/8] back old changes --- blocks/section.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/section.ts b/blocks/section.ts index 44b17bc1d..0eef41fd7 100644 --- a/blocks/section.ts +++ b/blocks/section.ts @@ -121,7 +121,7 @@ export const createSectionBlock = ( TConfig, HttpContext > => { - const componentFunc = wrapper( + const componentFunc = wrapper( resolver, mod.default, mod.LoadingFallback, From f22fc34be3540c9f0ec622b8c8cc4eec85b60d61 Mon Sep 17 00:00:00 2001 From: guitavano Date: Tue, 5 Mar 2024 10:03:24 -0300 Subject: [PATCH 4/8] remove unused imports --- blocks/section.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/blocks/section.ts b/blocks/section.ts index 0eef41fd7..8bd1e6290 100644 --- a/blocks/section.ts +++ b/blocks/section.ts @@ -18,7 +18,6 @@ import { Resolver } from "../engine/core/resolver.ts"; import { AppManifest, FunctionContext } from "../types.ts"; import { PartialProps } from "$fresh/src/runtime/Partial.tsx"; import { HttpError } from "../engine/errors.ts"; -import { Device } from "deco/utils/userAgent.ts"; /** * @widget none From c23cb0bda82d00a7fc465d646bfecef0cef2e1d3 Mon Sep 17 00:00:00 2001 From: guitavano Date: Tue, 5 Mar 2024 10:04:31 -0300 Subject: [PATCH 5/8] remove req --- components/section.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/section.tsx b/components/section.tsx index 309494a68..cbf45935e 100644 --- a/components/section.tsx +++ b/components/section.tsx @@ -146,7 +146,6 @@ export const withSection = ( const idPrefix = getSectionID(ctx.resolveChain); const debugEnabled = ctx.context?.state?.debugEnabled; const renderSaltFromState = ctx.context?.state?.renderSalt; - const req = ctx.request; let device: Device | null = null; return { From b1f3c8dd5d30ca3fbf91da522a56f7ca775ad5b8 Mon Sep 17 00:00:00 2001 From: guitavano Date: Tue, 5 Mar 2024 10:07:17 -0300 Subject: [PATCH 6/8] remove useRequest because we have usePageContext --- hooks/useRequest.ts | 9 --------- 1 file changed, 9 deletions(-) delete mode 100644 hooks/useRequest.ts diff --git a/hooks/useRequest.ts b/hooks/useRequest.ts deleted file mode 100644 index 6e067c6cc..000000000 --- a/hooks/useRequest.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { useContext } from "preact/hooks"; -import { SectionContext } from "deco/components/section.tsx"; - -export const useRequest = () => { - const ctx = useContext(SectionContext); - console.log(ctx?.request) - - return ctx?.request; -} \ No newline at end of file From 885bac12198dfb3864b2065226461a3ca2d2d46d Mon Sep 17 00:00:00 2001 From: guitavano Date: Tue, 5 Mar 2024 10:12:08 -0300 Subject: [PATCH 7/8] change order --- components/section.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/section.tsx b/components/section.tsx index cbf45935e..c605462f8 100644 --- a/components/section.tsx +++ b/components/section.tsx @@ -164,10 +164,10 @@ export const withSection = ( From 2adcd6303866e1647fe379394480652ffc514451 Mon Sep 17 00:00:00 2001 From: guitavano Date: Tue, 5 Mar 2024 10:12:22 -0300 Subject: [PATCH 8/8] fmt --- hooks/useDevice.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/hooks/useDevice.ts b/hooks/useDevice.ts index 8312dec51..7f525098f 100644 --- a/hooks/useDevice.ts +++ b/hooks/useDevice.ts @@ -2,7 +2,7 @@ import { useContext } from "preact/hooks"; import { SectionContext } from "deco/components/section.tsx"; export const useDevice = () => { - const ctx = useContext(SectionContext); + const ctx = useContext(SectionContext); - return ctx?.device; -} \ No newline at end of file + return ctx?.device; +};