Merge pull request #348 from Weaverse/paul

feat: add weaverse pixel

.npmrc

@@ -1,4 +1,4 @@
 @weaverse:registry=https://registry.npmjs.com
 progress=false
 node-linker=hoisted
-enable-pre-post-scripts=true
+enable-pre-post-scripts=true

package.json

@@ -20,29 +20,29 @@
     "preinstall": "npx only-allow pnpm"
   },
   "devDependencies": {
-    "@types/node": "^20.9.4",
-    "@types/react": "^18.2.38",
+    "@types/node": "20.9.4",
+    "@types/react": "18.2.38",
     "@types/react-dom": "18.2.17",
-    "@typescript-eslint/eslint-plugin": "^6.12.0",
-    "@typescript-eslint/parser": "^6.12.0",
-    "cross-env": "^7.0.3",
+    "@typescript-eslint/eslint-plugin": "6.12.0",
+    "@typescript-eslint/parser": "6.12.0",
+    "cross-env": "7.0.3",
     "eslint": "8.54.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-react": "^7.33.2",
-    "husky": "^8.0.3",
-    "lint-staged": "^15.1.0",
+    "eslint-config-prettier": "9.0.0",
+    "eslint-plugin-prettier": "5.0.1",
+    "eslint-plugin-react": "7.33.2",
+    "husky": "8.0.3",
+    "lint-staged": "15.1.0",
     "prettier": "3.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rimraf": "^5.0.5",
-    "tsup": "^8.0.1",
-    "turbo": "^1.10.16",
-    "typescript": "^5.3.2"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "rimraf": "5.0.5",
+    "tsup": "8.0.1",
+    "turbo": "1.10.16",
+    "typescript": "5.3.2"
   },
   "optionalDependencies": {
-    "@esbuild/darwin-x64": "^0.19.7",
-    "turbo-darwin-arm64": "^1.10.16"
+    "@esbuild/darwin-x64": "*",
+    "turbo-darwin-arm64": "*"
   },
   "engines": {
     "node": ">=18"
@@ -57,8 +57,7 @@
     ]
   },
   "lint-staged": {
-    "./**/*.{js,jsx,ts,tsx,yml,json}": [
-      "prettier --write --ignore-unknown",
+    "./**/*.{js,jsx,ts,tsx}": [
       "nr lint:fix"
     ]
   }

packages/hydrogen/src/WeaverseHydrogenRoot.tsx

@@ -13,6 +13,8 @@ import type {
   WeaverseLoaderData,
 } from './types'
 
+import { WeaversePixel } from '~/pixel'
+
 type WeaverseData = WeaverseLoaderData | Promise<WeaverseLoaderData>
 
 export let WeaverseHydrogenRoot = memo(
@@ -57,7 +59,10 @@ function RenderRoot(props: {
   let { data, components } = props
   let weaverse = createWeaverseInstance(data, components)
   useStudio(weaverse)
-  return <WeaverseRoot context={weaverse} />
+  return <>
+    <WeaverseRoot context={weaverse} />
+    <WeaversePixel context={weaverse} />
+  </>
 }
 
 export function withWeaverse(Component: React.ComponentType<any>) {

packages/hydrogen/src/pixel.tsx

@@ -0,0 +1,25 @@
+// 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<PixelProps> = ({ baseUrl, projectId, pageId }) => {
+  const url = `${baseUrl}/api/public/px?projectId=${projectId}&pageId=${pageId}`
+  return <img src={url} alt="weaverse pixel" style={{ display: 'none' }} />
+}
+
+export const WeaversePixel = ({ context }: { context: WeaverseHydrogen }) => {
+  let { projectId, pageId, weaverseHost, isDesignMode } = context
+  if (isDesignMode || !projectId || !pageId || !weaverseHost) return null
+  return <Pixel baseUrl={weaverseHost} projectId={projectId} pageId={pageId} />
+}

packages/react/src/renderer.tsx

@@ -82,9 +82,9 @@ const ItemComponent = memo(({ instance }: ItemComponentProps) => {
       rest.ref = instance.ref
     }
     let renderChildren = (
-      children.length
+      children?.length
         ? children
-        : childIds.length
+        : childIds?.length
         ? childIds.map((cid: string) => ({ id: cid }))
         : []
     ).map((item: { id: string }) => (