diff --git a/packages/hydrogen/src/WeaverseHydrogenRoot.tsx b/packages/hydrogen/src/WeaverseHydrogenRoot.tsx index cec1c154..5e9665c6 100644 --- a/packages/hydrogen/src/WeaverseHydrogenRoot.tsx +++ b/packages/hydrogen/src/WeaverseHydrogenRoot.tsx @@ -3,8 +3,7 @@ import { WeaverseRoot } from '@weaverse/react' import React, { memo, Suspense } from 'react' import { ErrorBoundary } from 'react-error-boundary' -import { ThemeProvider, createWeaverseInstance } from './context' -import { useStudio } from './hooks/use-studio' +import { createWeaverseInstance, ThemeProvider } from './context' import { ThemeSettingsStore } from './hooks/use-theme-settings' import type { HydrogenComponent, @@ -12,8 +11,7 @@ import type { WeaverseHydrogenRootProps, WeaverseLoaderData, } from './types' - -import { WeaversePixel } from '~/pixel' +import { WeaverseEffect } from '~/effect' type WeaverseData = WeaverseLoaderData | Promise @@ -58,11 +56,12 @@ function RenderRoot(props: { }) { let { data, components } = props let weaverse = createWeaverseInstance(data, components) - useStudio(weaverse) - return <> - - - + return ( + <> + + + + ) } export function withWeaverse(Component: React.ComponentType) { diff --git a/packages/hydrogen/src/effect.tsx b/packages/hydrogen/src/effect.tsx new file mode 100644 index 00000000..1865abda --- /dev/null +++ b/packages/hydrogen/src/effect.tsx @@ -0,0 +1,17 @@ +// create a pixel Component that will be used to track page views +// /api/public/weaverse-pixel?projectId=xxx&pageId=xxx +// The pixel will be removed from the DOM after it is loaded + +import { memo } from 'react' + +import type { WeaverseHydrogen } from './index' +import { useStudio } from '~/hooks/use-studio' +import { usePixel } from '~/hooks/use-pixel' + +export let WeaverseEffect = memo( + ({ context }: { context: WeaverseHydrogen }) => { + useStudio(context) + usePixel(context) + return null + }, +) diff --git a/packages/hydrogen/src/hooks/use-pixel.ts b/packages/hydrogen/src/hooks/use-pixel.ts new file mode 100644 index 00000000..ad8f5009 --- /dev/null +++ b/packages/hydrogen/src/hooks/use-pixel.ts @@ -0,0 +1,21 @@ +/* eslint-disable react-hooks/exhaustive-deps */ +import type {WeaverseHydrogen} from '~/index' +import {useEffect} from 'react' +import {useLocation} from '@remix-run/react' +let fetchingKey = '' +export let usePixel = (context: WeaverseHydrogen) => { + // TODO: create a post xhr request to the pixel endpoint + let { projectId, pageId, weaverseHost, isDesignMode } = context + const location = useLocation(); + useEffect(() => { + if (isDesignMode || !projectId || !pageId || !weaverseHost) return + let currentKey = `${projectId}-${pageId}-${location.pathname}` + if (fetchingKey === currentKey) return + fetchingKey = currentKey + let url = `${weaverseHost}/api/public/px` + let xhr = new XMLHttpRequest() + xhr.open('POST', url, true) + xhr.setRequestHeader('Content-Type', 'application/json') + xhr.send(JSON.stringify({ projectId, pageId })) + }, [location]) +} diff --git a/packages/hydrogen/src/hooks/use-studio.ts b/packages/hydrogen/src/hooks/use-studio.ts index 34b3236d..8a3f14e8 100644 --- a/packages/hydrogen/src/hooks/use-studio.ts +++ b/packages/hydrogen/src/hooks/use-studio.ts @@ -12,7 +12,6 @@ export function useStudio(weaverse: WeaverseHydrogen) { let themeSettingsStore = useThemeContext() let { isDesignMode, weaverseHost, weaverseVersion } = weaverse let isStudio = isIframe && isDesignMode && weaverseHost && weaverseVersion - useEffect(() => { if (isStudio) { weaverse.internal = { diff --git a/packages/hydrogen/src/pixel.tsx b/packages/hydrogen/src/pixel.tsx deleted file mode 100644 index bd68e5a5..00000000 --- a/packages/hydrogen/src/pixel.tsx +++ /dev/null @@ -1,25 +0,0 @@ -// create a pixel Component that will be used to track page views -// /api/public/weaverse-pixel?projectId=xxx&pageId=xxx -// The pixel will be removed from the DOM after it is loaded - -import type { FC } from 'react' -import React from 'react' - -import type { WeaverseHydrogen } from './index' - -export interface PixelProps { - baseUrl: string - projectId: string - pageId: string -} - -export const Pixel: FC = ({ baseUrl, projectId, pageId }) => { - const url = `${baseUrl}/api/public/px?projectId=${projectId}&pageId=${pageId}` - return weaverse pixel -} - -export const WeaversePixel = ({ context }: { context: WeaverseHydrogen }) => { - let { projectId, pageId, weaverseHost, isDesignMode } = context - if (isDesignMode || !projectId || !pageId || !weaverseHost) return null - return -} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9b28d5f6..fd4265e9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -105,10 +105,10 @@ importers: dependencies: '@remix-run/react': specifier: ^2.1.0 - version: 2.3.1(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.2) + version: 2.1.0(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.2) '@shopify/hydrogen': specifier: ^2023.10.2 - version: 2023.10.2(@remix-run/react@2.3.1)(@types/react@18.2.38)(react-dom@18.2.0)(react@18.2.0) + version: 2023.10.2(@remix-run/react@2.1.0)(@types/react@18.2.38)(react-dom@18.2.0)(react@18.2.0) '@weaverse/react': specifier: 2.7.4 version: link:../react @@ -2539,7 +2539,7 @@ packages: graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 dependencies: graphql: 16.8.1 - tslib: 2.6.2 + tslib: 2.5.3 dev: false /@graphql-tools/prisma-loader@8.0.2(@types/node@20.9.4)(graphql@16.8.1): @@ -2584,7 +2584,7 @@ packages: '@ardatan/relay-compiler': 12.0.0(graphql@16.8.1) '@graphql-tools/utils': 10.0.11(graphql@16.8.1) graphql: 16.8.1 - tslib: 2.6.2 + tslib: 2.5.3 transitivePeerDependencies: - encoding - supports-color @@ -3850,8 +3850,8 @@ packages: typescript: 5.2.2 dev: false - /@remix-run/react@2.3.1(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.2): - resolution: {integrity: sha512-7NozlZtbL5jtRGJhSrMydUGJGVp8kSjnv7APcsDojLbRHZJsLw8B0eXlVqKDg2M+WfRcBkuTI/ipgwIyLPRRyw==} + /@remix-run/react@2.1.0(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.2): + resolution: {integrity: sha512-DeYgfsvNxHqNn29sGA3XsZCciMKo2EFTQ9hHkuVPTsJXC4ipHr6Dja1j6UzZYPe/ZuKppiuTjueWCQlE2jOe1w==} engines: {node: '>=18.0.0'} peerDependencies: react: ^18.0.0 @@ -3861,11 +3861,11 @@ packages: typescript: optional: true dependencies: - '@remix-run/router': 1.13.0 - '@remix-run/server-runtime': 2.3.1(typescript@5.3.2) + '@remix-run/router': 1.10.0 + '@remix-run/server-runtime': 2.1.0(typescript@5.3.2) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - react-router-dom: 6.20.0(react-dom@18.2.0)(react@18.2.0) + react-router-dom: 6.17.0(react-dom@18.2.0)(react@18.2.0) typescript: 5.3.2 dev: false @@ -3873,11 +3873,6 @@ packages: resolution: {integrity: sha512-Lm+fYpMfZoEucJ7cMxgt4dYt8jLfbpwRCzAjm9UgSLOkmlqo9gupxt6YX3DY0Fk155NT9l17d/ydi+964uS9Lw==} engines: {node: '>=14.0.0'} - /@remix-run/router@1.13.0: - resolution: {integrity: sha512-5dMOnVnefRsl4uRnAdoWjtVTdh8e6aZqgM4puy9nmEADH72ck+uXwzpJLEKE9Q6F8ZljNewLgmTfkxUrBdv4WA==} - engines: {node: '>=14.0.0'} - dev: false - /@remix-run/server-runtime@2.1.0(typescript@5.2.2): resolution: {integrity: sha512-Uz69yF4Gu6F3VYQub3JgDo9godN8eDMeZclkadBTAWN7bYLonu0ChR/GlFxS35OLeF7BDgudxOSZob0nE1WHNg==} engines: {node: '>=18.0.0'} @@ -3895,8 +3890,8 @@ packages: source-map: 0.7.4 typescript: 5.2.2 - /@remix-run/server-runtime@2.3.1(typescript@5.3.2): - resolution: {integrity: sha512-ym1nfuYJKn5Vd4bqGIJbZMR1wh/A/qXSzOwqCrZxjdsAmb4YLUBnUAJFIoCRBrvcge92kXq/lXjGOFYf+qidZg==} + /@remix-run/server-runtime@2.1.0(typescript@5.3.2): + resolution: {integrity: sha512-Uz69yF4Gu6F3VYQub3JgDo9godN8eDMeZclkadBTAWN7bYLonu0ChR/GlFxS35OLeF7BDgudxOSZob0nE1WHNg==} engines: {node: '>=18.0.0'} peerDependencies: typescript: ^5.1.0 @@ -3904,10 +3899,10 @@ packages: typescript: optional: true dependencies: - '@remix-run/router': 1.13.0 - '@types/cookie': 0.5.4 + '@remix-run/router': 1.10.0 + '@types/cookie': 0.4.1 '@web3-storage/multipart-parser': 1.0.0 - cookie: 0.5.0 + cookie: 0.4.2 set-cookie-parser: 2.6.0 source-map: 0.7.4 typescript: 5.3.2 @@ -4390,7 +4385,7 @@ packages: - xstate dev: false - /@shopify/hydrogen@2023.10.2(@remix-run/react@2.3.1)(@types/react@18.2.38)(react-dom@18.2.0)(react@18.2.0): + /@shopify/hydrogen@2023.10.2(@remix-run/react@2.1.0)(@types/react@18.2.38)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-p5nhX/k2RebxvA800mX8C/C7yG+yWnNAynOF1/601JePeLjhOlnHd4F8x+duj9fNu1yVbjPM+erUUvuJHij2sg==} peerDependencies: '@remix-run/react': ^2.1.0 @@ -4402,7 +4397,7 @@ packages: '@remix-run/server-runtime': optional: true dependencies: - '@remix-run/react': 2.3.1(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.2) + '@remix-run/react': 2.1.0(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.2) '@shopify/hydrogen-react': 2023.10.0(@types/react@18.2.38)(react-dom@18.2.0)(react@18.2.0) content-security-policy-builder: 2.1.1 react: 18.2.0 @@ -4607,22 +4602,18 @@ packages: /@types/better-sqlite3@7.6.8: resolution: {integrity: sha512-ASndM4rdGrzk7iXXqyNC4fbwt4UEjpK0i3j4q4FyeQrLAthfB6s7EF135ZJE0qQxtKIMFwmyT6x0switET7uIw==} dependencies: - '@types/node': 20.10.0 + '@types/node': 20.9.4 dev: false /@types/cli-progress@3.11.5: resolution: {integrity: sha512-D4PbNRbviKyppS5ivBGyFO29POlySLmA2HyUFE4p5QGazAMM3CwkKWcvTl8gvElSuxRh6FPKL8XmidX873ou4g==} dependencies: - '@types/node': 20.10.0 + '@types/node': 20.9.4 dev: false /@types/cookie@0.4.1: resolution: {integrity: sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==} - /@types/cookie@0.5.4: - resolution: {integrity: sha512-7z/eR6O859gyWIAjuvBWFzNURmf2oPBmJlfVWkwehU5nzIyjwBsTh7WMmEEV4JFnHuQ3ex4oyTvfKzcyJVDBNA==} - dev: false - /@types/debug@4.1.12: resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==} dependencies: @@ -4683,11 +4674,6 @@ packages: /@types/ms@0.7.34: resolution: {integrity: sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==} - /@types/node@20.10.0: - resolution: {integrity: sha512-D0WfRmU9TQ8I9PFx9Yc+EBHw+vSpIub4IDvQivcp26PtPrdMGAq5SDcpXEo/epqa/DXotVpekHiLNTg3iaKXBQ==} - dependencies: - undici-types: 5.26.5 - /@types/node@20.9.4: resolution: {integrity: sha512-wmyg8HUhcn6ACjsn8oKYjkN/zUzQeNtMy44weTJSM6p4MMzEOuKbA3OjJ267uPCOW7Xex9dyrNTful8XTQYoDA==} dependencies: @@ -4724,7 +4710,7 @@ packages: /@types/readdir-glob@1.1.5: resolution: {integrity: sha512-raiuEPUYqXu+nvtY2Pe8s8FEmZ3x5yAH4VkLdihcPdalvsHltomrRC9BzuStrJ9yk06470hS0Crw0f1pXqD+Hg==} dependencies: - '@types/node': 20.10.0 + '@types/node': 20.9.4 dev: false /@types/scheduler@0.16.8: @@ -4748,7 +4734,7 @@ packages: /@types/ws@8.5.10: resolution: {integrity: sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==} dependencies: - '@types/node': 20.10.0 + '@types/node': 20.9.4 dev: false /@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0)(eslint@8.51.0)(typescript@5.2.2): @@ -7745,7 +7731,7 @@ packages: resolution: {integrity: sha512-EzV94NYKoO09GLXGjXj9JIlXijVck4ONSr5wiCWDvhsvj5jxSrzTmRU/9C1DyB6uToszLs8aifA6NQ7lEQdvFw==} engines: {node: '>= 0.8'} dependencies: - '@types/node': 20.10.0 + '@types/node': 20.9.4 require-like: 0.1.2 /event-target-shim@5.0.1: @@ -11929,19 +11915,6 @@ packages: react-router: 6.17.0(react@18.2.0) dev: false - /react-router-dom@6.20.0(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-CbcKjEyiSVpA6UtCHOIYLUYn/UJfwzp55va4yEfpk7JBN3GPqWfHrdLkAvNCcpXr8QoihcDMuk0dzWZxtlB/mQ==} - engines: {node: '>=14.0.0'} - peerDependencies: - react: '>=16.8' - react-dom: '>=16.8' - dependencies: - '@remix-run/router': 1.13.0 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - react-router: 6.20.0(react@18.2.0) - dev: false - /react-router@6.17.0(react@18.2.0): resolution: {integrity: sha512-YJR3OTJzi3zhqeJYADHANCGPUu9J+6fT5GLv82UWRGSxu6oJYCKVmxUcaBQuGm9udpWmPsvpme/CdHumqgsoaA==} engines: {node: '>=14.0.0'} @@ -11952,16 +11925,6 @@ packages: react: 18.2.0 dev: false - /react-router@6.20.0(react@18.2.0): - resolution: {integrity: sha512-pVvzsSsgUxxtuNfTHC4IxjATs10UaAtvLGVSA1tbUE4GDaOSU1Esu2xF5nWLz7KPiMuW8BJWuPFdlGYJ7/rW0w==} - engines: {node: '>=14.0.0'} - peerDependencies: - react: '>=16.8' - dependencies: - '@remix-run/router': 1.13.0 - react: 18.2.0 - dev: false - /react-star-rate@0.2.0(csstype@3.1.2)(react@18.2.0): resolution: {integrity: sha512-t5LNriqbQH8gcRdWolSkDc+Iox68UKyS3olbKDKXcg07PRmYxF96Q0sDot1M2hmDDv9iR0Cm74DMbAGvLTMdag==} engines: {node: '>=10'} diff --git a/templates/pilot b/templates/pilot index 1dbd3109..bb978ec0 160000 --- a/templates/pilot +++ b/templates/pilot @@ -1 +1 @@ -Subproject commit 1dbd31092d2f58adb2cce29bf4148d338614cf5b +Subproject commit bb978ec0fb0ecf8bfbce68f3c847f015e7bcc089