@anker-in/lib

便利导出包，整合所有 Anker headless 功能。用户只需安装和导入这一个包即可使用所有功能。

安装

pnpm add @anker-in/lib

就这样！ 所有依赖（@anker-in/shared、@anker-in/cart、@anker-in/shopify）会自动安装。

快速开始

1. 设置 HeadlessProvider

import { HeadlessProvider } from '@anker-in/lib'

const headlessConfig = {
  storefrontToken: 'your-token',
  storeDomain: 'your-store.myshopify.com',
  locale: 'en-US',
  comboMetafieldsNamespace: 'custom',
  cartIdCookieName: 'cart_id',
  brand: 'Anker',
  appName: 'My App'
}

function App() {
  return (
    <HeadlessProvider headlessConfig={headlessConfig}>
      <YourApp />
    </HeadlessProvider>
  )
}

2. 使用所有功能（从一个包导入！）

import {
  // Context
  useHeadlessContext,
  
  // Shopify 功能
  useProduct,
  createCart,
  
  // Cart 功能
  useBuyNow,
  useAddToCart,
  useUpdateCartLines
} from '@anker-in/lib'

function ProductPage() {
  const { storefrontToken, storeDomain } = useHeadlessContext()
  const product = useProduct(productId)
  const { trigger: buyNow } = useBuyNow()
  
  const handleBuyNow = () => {
    buyNow({
      lineItems: [
        {
          variant: { id: product.variants[0].id },
          quantity: 1
        }
      ]
    })
  }
  
  return (
    <div>
      <h1>{product?.title}</h1>
      <button onClick={handleBuyNow}>立即购买</button>
    </div>
  )
}

架构设计

为了避免循环依赖，采用了分层架构：

          ┌──────────────┐
          │   shared     │ (基础包：Context + Types)
          └──────┬───────┘
                 │
         ┌───────┼────────┐
         │       │        │
         ↓       ↓        ↓
    ┌────────┬──────┬─────────┐
    │  lib   │ cart │ shopify │
    └────┬───┴──────┴────┬────┘
         │               │
         └───────┬───────┘
                 ↓
         (lib 重新导出所有)

包职责

• @anker-in/shared: 基础包，提供 HeadlessProvider 和 HeadlessConfig
• @anker-in/shopify: Shopify API 集成和 hooks
• @anker-in/cart: 购物车功能和 hooks
• @anker-in/lib: 便利导出包，重新导出所有功能 + 自己的工具函数

为什么这样设计？

问题： 如果 lib 包含 Context，而 cart 使用 lib 的 Context，那么 lib 就不能导出 cart（会形成循环）。

解决： 将 Context 提取到独立的 shared 包，这样：

• ✅ cart 依赖 shared（获取 Context）
• ✅ lib 依赖 shared（获取 Context）
• ✅ lib 依赖 cart（重新导出）
• ✅ 完全消除循环依赖！

API

HeadlessProvider

提供全局配置的 Context Provider。

<HeadlessProvider headlessConfig={config}>
  {children}
</HeadlessProvider>

useHeadlessContext

获取 Headless 配置的 Hook。

const { storefrontToken, storeDomain, locale, ... } = useHeadlessContext()

HeadlessConfig

type HeadlessConfig = {
  storefrontToken: string        // Shopify Storefront API token
  storeDomain: string            // 店铺域名
  locale: string                 // 语言环境
  comboMetafieldsNamespace: string
  cartIdCookieName: string       // 购物车 ID 的 cookie 名称
  brand: string                  // 品牌名称
  appName: string                // 应用名称
}

导出内容

从 @anker-in/lib 可以导入：

• ✅ Shared: HeadlessProvider, useHeadlessContext, HeadlessConfig
• ✅ Shopify: 所有 Shopify 功能和 hooks
• ✅ Cart: 所有购物车功能和 hooks
• ✅ Lib 自己的工具: math 等工具函数

简单来说，你只需要从 @anker-in/lib 导入所有内容！