Weaverse v3.4.0

.github/workflows/check.yml

@@ -11,7 +11,6 @@ on:
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
 
 permissions:
   actions: write
@@ -40,7 +39,7 @@ jobs:
       - name: ⎔ Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 22
 
       - name: 📥 Install pnpm
         uses: pnpm/action-setup@v3

.lefthook/pre-commit

@@ -50,7 +50,7 @@ call_lefthook()
       mint run csjones/lefthook-plugin "$@"
     elif command -v npx >/dev/null 2>&1
     then
-      npx lefthook-${osArch}-${cpuArch} "$@"
+      npx lefthook "$@"
     else
       echo "Can't find lefthook in PATH"
     fi

.lefthook/prepare-commit-msg

@@ -50,7 +50,7 @@ call_lefthook()
       mint run csjones/lefthook-plugin "$@"
     elif command -v npx >/dev/null 2>&1
     then
-      npx lefthook-${osArch}-${cpuArch} "$@"
+      npx lefthook "$@"
     else
       echo "Can't find lefthook in PATH"
     fi

docs/advanced/custom-page.md

@@ -0,0 +1,34 @@
+---
+title: Custom Pages
+description: Create Hydrogen custom pages with Weaverse.
+publishedAt: July 29, 2024
+updatedAt: July 29, 2024
+order: 0
+published: false
+---
+
+## Overview
+
+Custom pages are a powerful feature that allows you to create custom routes for your Hydrogen storefront. With Weaverse, you can easily create custom pages that are tailored to your specific needs and branding.
+
+In this guide, we will walk you through the process of creating a custom page in Weaverse. We will cover the following topics:
+
+- Setting up a custom page in Weaverse
+- Set up the Hydrogen catch-all route
+- Customizing the page in Weaverse
+- Adding custom components to the page
+
+By the end of this guide, you will have a custom page in Weaverse that is fully customizable and responsive.
+
+## Setting up a custom page in Weaverse
+
+To create a custom page in Weaverse, follow these steps:
+
+1. Open the Weaverse Studio and in the top bar, click on to the Page navigation Dropdown.
+2. Now you will see a Create custom page option. Click on it to create a new page.
+![Create custom page](https://cdn.shopify.com/s/files/1/0838/0052/3057/files/create_custom_page.png?v=1719822975)
+3. Give your page a name and handle and click on Create custom page.
+
+![Create custom page 2](https://cdn.shopify.com/s/files/1/0838/0052/3057/files/create_custom_page.png?v=1719822975)
+
+4.

docs/advanced/custom-routing.md

@@ -0,0 +1,8 @@
+---
+title: Custom Routing
+description: Learn how to create custom routing for your Hydrogen storefront with Weaverse.
+publishedAt: July 29, 2024
+updatedAt: July 29, 2024
+order: 0
+published: false
+---

docs/advanced/custom-template.md

@@ -0,0 +1,8 @@
+---
+title: Custom Templates
+description: Create custom templates for your Hydrogen storefront with Weaverse.
+publishedAt: July 29, 2024
+updatedAt: July 29, 2024
+order: 0
+published: false
+---

docs/advanced/index.md

@@ -0,0 +1,5 @@
+---
+title: Advanced
+description: Advanced features & set up guides for Weaverse Hydrogen.
+order: 5
+---

package.json

@@ -14,7 +14,7 @@
     "build": "turbo run build --filter=./packages/*",
     "build:graph": "turbo run build --graph=repo-graph.svg",
     "prepare": "npm run build",
-    "postinstall": "lefthook install -f",
+    "postinstall": "lefthook install",
     "changeset": "changeset",
     "typecheck": "turbo typecheck --parallel",
     "biome": "biome check --diagnostic-level=error",
@@ -26,21 +26,21 @@
   "devDependencies": {
     "@biomejs/biome": "1.8.3",
     "@changesets/cli": "^2.27.7",
-    "@types/node": "20.14.10",
+    "@types/node": "22.2.0",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "cross-env": "7.0.3",
-    "lefthook": "^1.7.2",
+    "lefthook": "^1.7.12",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "rimraf": "5.0.8",
-    "tsup": "8.1.0",
-    "turbo": "2.0.9",
-    "typescript": "5.5.3"
+    "rimraf": "6.0.1",
+    "tsup": "8.2.4",
+    "turbo": "2.0.12",
+    "typescript": "5.5.4"
   },
   "optionalDependencies": {
     "@esbuild/darwin-x64": "^0.23.0",
-    "turbo-darwin-arm64": "^2.0.7"
+    "turbo-darwin-arm64": "^2.0.12"
   },
   "engines": {
     "node": ">=18"

packages/biome/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @weaverse/biome
+
+## 1.1.0
+
+### Minor Changes
+
+- Update using latest Shopify Hydrogen API

packages/biome/biome.json

@@ -34,7 +34,8 @@
       "a11y": {
         "noSvgWithoutTitle": "warn",
         "useMediaCaption": "warn",
-        "useKeyWithClickEvents": "off"
+        "useKeyWithClickEvents": "off",
+        "useButtonType": "warn"
       }
     }
   },

packages/biome/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weaverse/biome",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Biome configuration for Weaverse",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

packages/cli/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @weaverse/cli
 
+## 1.3.0
+
+### Minor Changes
+
+- Update using latest Shopify Hydrogen API
+
 ## 1.2.0
 
 ### Minor Changes

packages/cli/index.js

@@ -98,7 +98,9 @@ Options:
     if (template) {
       const outputPath = `./${toKebabCase(argv['project-name'])}`
 
-      await downloadAndExtractTemplate(template, outputPath)
+      await downloadAndExtractTemplate(template, outputPath).catch(
+        console.error,
+      )
       await createEnvFile(outputPath, argv['project-id'])
 
       if (!argv['no-install']) {

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weaverse/cli",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "CLI for Weaverse projects",
   "main": "index.js",
   "bin": {

packages/core/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @weaverse/core
 
+## 3.4.0
+
+### Minor Changes
+
+- Update using latest Shopify Hydrogen API
+
 ## 3.3.1
 
 ### Patch Changes

packages/core/package.json

@@ -2,7 +2,7 @@
   "name": "@weaverse/core",
   "author": "Weaverse Team",
   "description": "Weaverse Core",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/core/src/core.ts

@@ -206,3 +206,5 @@ export class Weaverse extends EventEmitter {
     this.initProject()
   }
 }
+
+export { EventEmitter }

packages/hydrogen/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @weaverse/hydrogen
 
+## 3.4.0
+
+### Minor Changes
+
+- Update using latest Shopify Hydrogen API
+
+### Patch Changes
+
+- Updated dependencies
+  - @weaverse/[email protected]
+
 ## 3.3.1
 
 ### Patch Changes

packages/hydrogen/package.json

@@ -2,7 +2,7 @@
   "name": "@weaverse/hydrogen",
   "author": "Weaverse Team",
   "description": "Components, hooks, and utilities for building Shopify Hydrogen websites with Weaverse",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -41,7 +41,7 @@
     ]
   },
   "dependencies": {
-    "@weaverse/react": "3.3.1",
+    "@weaverse/react": "3.4.0",
     "react-error-boundary": "^4.0.13"
   },
   "peerDependencies": {

packages/hydrogen/src/hooks/use-studio.ts

@@ -34,4 +34,18 @@ export function useStudio(weaverse: WeaverseHydrogen) {
         .catch(console.error)
     }
   }, [pathname, search, navigation.state])
+  usePixel(weaverse)
+}
+
+
+export function usePixel(context: WeaverseHydrogen) {
+  let { projectId, pageId, weaverseHost, isDesignMode } = context
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(() => {
+    if (!projectId || !pageId || !weaverseHost || isDesignMode) return
+    let url = `${weaverseHost}/api/public/px`
+    let img = new Image()
+    img.onload = () => {}
+    img.src = `${url}?projectId=${projectId}&pageId=${pageId}`
+  }, [])
 }

packages/hydrogen/src/hooks/use-theme-settings.ts

@@ -1,5 +1,5 @@
 import { useRouteLoaderData } from '@remix-run/react'
-import { isBrowser } from '@weaverse/react'
+import { isBrowser, EventEmitter } from '@weaverse/react'
 import { useSyncExternalStore } from 'react'
 import type {
   HydrogenThemeSchema,
@@ -9,14 +9,14 @@ import type {
   RootRouteData,
 } from '~/types'
 
-export class ThemeSettingsStore {
+export class ThemeSettingsStore extends EventEmitter{
   settings: HydrogenThemeSettings = {}
-  listeners = new Set<() => void>()
   countries?: Localizations
   schema?: HydrogenThemeSchema
   publicEnv?: PublicEnv
 
   constructor(data: RootRouteData['weaverseTheme']) {
+    super()
     let { theme, countries, schema, publicEnv } = data || {}
     this.settings = { ...theme } || {}
     this.countries = countries
@@ -32,15 +32,9 @@ export class ThemeSettingsStore {
       ...this.settings,
       ...newSettings,
     }
-    this.emitChange()
+    this.emit(this.settings)
   }
 
-  subscribe = (listener: () => void): (() => void) => {
-    this.listeners.add(listener)
-    return () => {
-      this.listeners.delete(listener)
-    }
-  }
 
   getSnapshot = () => {
     return this.settings
@@ -50,11 +44,6 @@ export class ThemeSettingsStore {
     return this.settings
   }
 
-  emitChange = () => {
-    for (let listener of this.listeners) {
-      listener()
-    }
-  }
 }
 
 export function useThemeSettingsStore() {