feat: update weaverse client

package.json

@@ -4,7 +4,7 @@
   "description": "Weaverse SDKs monorepo.",
   "license": "MIT",
   "scripts": {
-    "preinstall": "command -v git >/dev/null 2>&1 && git config core.hooksPath .git-hooks || true",
+    "preinstall": "command -v git >/dev/null 2>&1 && git config core.hooksPath .git-hooks",
     "dev": "npm run dev:pkg -- --filter=./templates/pilot",
     "dev:pkg": "cross-env LOCAL_DEV=true turbo dev --no-daemon --parallel --filter=./packages/*",
     "clean": "bash ./scripts/clean.sh",
@@ -49,6 +49,7 @@
   "engines": {
     "node": ">=18"
   },
+  "packageManager": "[email protected]",
   "prettier": {
     "semi": false,
     "singleQuote": true,

packages/hydrogen/src/Effect.tsx

@@ -1,18 +1,10 @@
 import { memo } from 'react'
-import { usePixel } from '~/hooks/use-pixel'
 import { useStudio } from '~/hooks/use-studio'
 import type { WeaverseHydrogen } from './index'
 
-/*
-  Create a pixel component that is used to track page views.
-  The pixel will be removed from the DOM after it is loaded.
-  API: /api/public/weaverse-pixel?projectId=xxx&pageId=xxx
-*/
-
 export let WeaverseEffect = memo(
   ({ context }: { context: WeaverseHydrogen }) => {
     useStudio(context)
-    usePixel(context)
     return null
   },
 )

packages/hydrogen/src/weaverse-client.ts

@@ -8,6 +8,7 @@ import type {
   FetchProjectRequestBody,
   FetchWithCacheOptions,
   HydrogenComponentData,
+  HydrogenPageData,
   LoadPageParams,
   WeaverseClientArgs,
   WeaverseLoaderData,
@@ -151,6 +152,21 @@ export class WeaverseClient {
     }
   }
 
+  generateFallbackPage = (message: string): HydrogenPageData => {
+    return {
+      id: 'fallback' + Date.now(),
+      rootId: 'root',
+      name: 'Error',
+      items: [
+        {
+          type: 'main',
+          id: 'main',
+          data: { dangerouslySetInnerHTML: { __html: message } },
+        },
+      ],
+    }
+  }
+
   loadPage = async (
     params: LoadPageParams = {},
   ): Promise<WeaverseLoaderData | null> => {
@@ -192,7 +208,10 @@ export class WeaverseClient {
           throw new Error(`Weaverse project not found. Id: ${projectId}`)
         }
         if (!page) {
-          throw new Error(`No Weaverse page assigned to this url.`)
+          page = this.generateFallbackPage(
+            `No Weaverse page assigned to this url.1`,
+          )
+          // throw new Error(`No Weaverse page assigned to this url.`)
         }
         if (page?.items) {
           let items = page.items

packages/react/src/hooks.ts

@@ -1,5 +1,5 @@
 import type { Weaverse, WeaverseItemStore } from '@weaverse/core'
-import { useContext } from 'react'
+import { useContext, useEffect } from 'react'
 
 import { WeaverseContext, WeaverseItemContext } from '~/context'
 
@@ -38,3 +38,22 @@ export let useChildInstances = (id?: string) => {
     return itemInstances.get(id)
   }) as WeaverseItemStore[]
 }
+
+let fetchingKey = ''
+
+export function usePixel(context: Weaverse) {
+  // @ts-expect-error
+  let { projectId, pageId, weaverseHost } = context
+
+  useEffect(() => {
+    if (!projectId || !pageId || !weaverseHost) return
+    let currentKey = `${projectId}-${pageId}-${globalThis.location.pathname}`
+    if (fetchingKey === currentKey) return
+    fetchingKey = currentKey
+    let url = `${weaverseHost}/api/public/px`
+    let xhr = new XMLHttpRequest()
+    xhr.open('POST', url, true)
+    xhr.send(JSON.stringify({ projectId, pageId }))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+}

packages/react/src/renderer.tsx

@@ -8,7 +8,7 @@ import { WeaverseContextProvider, WeaverseItemContext } from './context'
 import type { ItemComponentProps, WeaverseRootPropsType } from './types'
 import { generateItemClassName } from './utils/css'
 
-import { useItemInstance, useWeaverse } from '~/hooks'
+import { useItemInstance, usePixel, useWeaverse } from '~/hooks'
 
 export let WeaverseRoot = memo(({ context }: WeaverseRootPropsType) => {
   let [, setData] = useState<WeaverseProjectDataType | unknown>(context.data)
@@ -19,6 +19,7 @@ export let WeaverseRoot = memo(({ context }: WeaverseRootPropsType) => {
     context.contentRootElement = rootRef?.current || null
     return context.subscribe(renderRoot)
   }, [context])
+  usePixel(context)
 
   let eventHandlers = context?.studioBridge?.eventHandlers || {}
   let themeClass = context.stitchesInstance.theme.className