feat: update pixel mechanism

packages/hydrogen/src/WeaverseHydrogenRoot.tsx

@@ -3,17 +3,15 @@ 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,
   RootRouteData,
   WeaverseHydrogenRootProps,
   WeaverseLoaderData,
 } from './types'
-
-import { WeaversePixel } from '~/pixel'
+import { WeaverseEffect } from '~/effect'
 
 type WeaverseData = WeaverseLoaderData | Promise<WeaverseLoaderData>
 
@@ -58,11 +56,12 @@ function RenderRoot(props: {
 }) {
   let { data, components } = props
   let weaverse = createWeaverseInstance(data, components)
-  useStudio(weaverse)
-  return <>
-    <WeaverseRoot context={weaverse} />
-    <WeaversePixel context={weaverse} />
-  </>
+  return (
+    <>
+      <WeaverseRoot context={weaverse} />
+      <WeaverseEffect context={weaverse} />
+    </>
+  )
 }
 
 export function withWeaverse(Component: React.ComponentType<any>) {

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
+  },
+)

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])
+}

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 = {