Unified Anker headless library with shared context, Shopify integration, and cart utilities
便利导出包,整合所有 Anker headless 功能。用户只需安装和导入这一个包即可使用所有功能。
``bash`
pnpm add @anker-in/lib
就这样! 所有依赖(@anker-in/shared、@anker-in/cart、@anker-in/shopify)会自动安装。
`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 (
)
}
`
`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` 导入所有内容!