From 2322913947fcd631cb19ffaa7ca23d172e5f3d7d Mon Sep 17 00:00:00 2001 From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com> Date: Fri, 4 Oct 2024 12:54:13 +0200 Subject: [PATCH] adding test logging --- app/routes/_index/route.jsx | 141 ++++++----------------- app/routes/_index/sections/hero.jsx | 170 +++++++++++++++++++++------- 2 files changed, 167 insertions(+), 144 deletions(-) diff --git a/app/routes/_index/route.jsx b/app/routes/_index/route.jsx index ade93bc..e7af7b2 100644 --- a/app/routes/_index/route.jsx +++ b/app/routes/_index/route.jsx @@ -1,117 +1,48 @@ -import { useLoaderData } from '@remix-run/react' -import { json } from '@shopify/remix-oxygen' +import React from 'react' + import { Column } from '@h2/new/Layout' import Hero from './sections/hero' -import BestSellers from './sections/best-sellers' -import Collections from './sections/collections' -import FeaturedProducts from './sections/featured-products' -import OurPromise from './sections/our-promise' -/** - * @type {MetaFunction} - */ -export const meta = () => { - return [{ title: 'Builder Supply | Home' }] -} +export default function Homepage() { + const renderCount = React.useRef(Math.random()) + renderCount.current = renderCount.current + 1 + console.log('Homepage render', renderCount.current) -/** - * @param {LoaderFunctionArgs} - */ -export async function loader({ context: { storefront } }) { - const { bestSellers } = await storefront.query( - BEST_SELLERS_QUERY, - ) + if ( + typeof performance !== 'undefined' && + typeof performance.measure !== 'undefined' + ) { + performance.measure( + `Homepage route render ${renderCount.current}`, + { + start: performance.now(), + duration: 50, + }, + ) + } - return json({ bestSellers }) -} + React.useEffect(() => { + return function cleanup() { + // we are about to unmount! + console.log('Homepage unmount', renderCount.current) + if ( + typeof performance !== 'undefined' && + typeof performance.measure !== 'undefined' + ) { + performance.measure( + `Homepage route unmount ${renderCount.current}`, + { + start: performance.now(), + duration: 50, + }, + ) + } + } + }, []) -export default function Homepage() { - /** @type {LoaderReturnData} */ - const data = useLoaderData() return ( - - - - ) } - -/* -{ - handle: 'builder-tote', - title: 'Builders Tote', - variants: { - nodes: [ - { - availableForSale: true, - price: { - amount: '38.00', - currencyCode: 'CAD', - }, - compareAtPrice: { - amount: '42.00', - currencyCode: 'CAD', - }, - image: { - id: 'gid://Shopify/placeholder/1234', - altText: 'Placeholder', - height: '600', - width: '400', - url: 'https://cdn.shopify.com/s/files/1/0657/3811/3197/files/01-DevMode-Buildertote_PDP_3_fa8b6520-484a-47e7-818d-b217b04d31e6.png', - }, - }, - ], - }, -*/ - -const BEST_SELLERS_QUERY = `#graphql -query BestSellers( -$country: CountryCode -$language: LanguageCode -) @inContext(country: $country, language: $language) { -bestSellers: collection(handle: "best-sellers") { - id - handle - title - description - products( - first: 6 - ) { - nodes { - id - title - handle - variants (first: 1) { - nodes { - availableForSale - price { - amount - currencyCode - } - compareAtPrice { - amount - currencyCode - } - image { - id - altText - height - width - url - } - } - } - } - } -} -} -` - -/** @typedef {import('@shopify/remix-oxygen').LoaderFunctionArgs} LoaderFunctionArgs */ -/** @template T @typedef {import('@remix-run/react').MetaFunction} MetaFunction */ -/** @typedef {import('storefrontapi.generated').FeaturedCollectionFragment} FeaturedCollectionFragment */ -/** @typedef {import('storefrontapi.generated').RecommendedProductsQuery} RecommendedProductsQuery */ -/** @typedef {import('@shopify/remix-oxygen').SerializeFrom} LoaderReturnData */ diff --git a/app/routes/_index/sections/hero.jsx b/app/routes/_index/sections/hero.jsx index c271242..ec84b41 100644 --- a/app/routes/_index/sections/hero.jsx +++ b/app/routes/_index/sections/hero.jsx @@ -1,49 +1,141 @@ -import { Button } from '@h2/new/Button' -import { Heading, Text } from '@h2/new/Text' -import { Image } from '@shopify/hydrogen' +import * as React from 'react' export default function Hero() { + const renderCount = React.useRef(Math.random()) + renderCount.current = renderCount.current + 1 + console.log('Hero render', renderCount.current) + + if ( + typeof performance !== 'undefined' && + typeof performance.measure !== 'undefined' + ) { + performance.measure( + `Hero render ${renderCount.current}`, + { + start: performance.now(), + duration: 50, + }, + ) + } + + React.useEffect(() => { + return function cleanup() { + // we are about to unmount! + console.log('Hero unmount', renderCount.current) + if ( + typeof performance !== 'undefined' && + typeof performance.measure !== 'undefined' + ) { + performance.measure( + `Hero unmount ${renderCount.current}`, + { + start: performance.now(), + duration: 50, + }, + ) + } + } + }, []) + return ( -
+
-
-
- - Summer 2024 - - - Building - - - Essentials - -
- +
+ Summer 2024 + Building + Essentials
-
-
-
-
-
- +
+
) } + +function Counter() { + const [clickCount, setClickCount] = React.useState(0) + const renderCount = React.useRef(0) + renderCount.current += 1 + + console.log('Counter render', renderCount.current) + + if ( + typeof performance !== 'undefined' && + typeof performance.measure !== 'undefined' + ) { + performance.measure( + `Counter render ${renderCount.current}`, + { + start: performance.now(), + duration: 50, + }, + ) + } + + React.useEffect(() => { + return function cleanup() { + // we are about to unmount! + console.log('Counter unmount', renderCount.current) + + if ( + typeof performance !== 'undefined' && + typeof performance.measure !== 'undefined' + ) { + performance.measure( + `Counter unmount ${renderCount.current}`, + { + start: performance.now(), + duration: 50, + }, + ) + } + } + }, []) + + return ( +
+
Render count:{renderCount.current}
+
+ +
+ ) +}