@anker-in/lib

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

安装

``bash
pnpm add @anker-in/lib
`

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

快速开始

$3

`tsx
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 (



)
}
`

$3

`tsx
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 (



)
}
`

架构设计

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

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

$3

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

$3

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

解决： 将 Context 提取到独立的 shared 包，这样：
- ✅ cart 依赖 shared（获取 Context）
- ✅ lib 依赖 shared（获取 Context）
- ✅ lib 依赖 cart（重新导出）
- ✅ 完全消除循环依赖！

API

$3

提供全局配置的 Context Provider。

`tsx

{children}

`

$3

获取 Headless 配置的 Hook。

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

$3

`typescript
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` 导入所有内容！