@snowcone-app/sdk 0.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +136 -0
- package/README.md +195 -0
- package/dist/chunk-7VO4EL2V.js +12 -0
- package/dist/chunk-HOYSZQET.js +476 -0
- package/dist/chunk-IIUCW2O4.js +457 -0
- package/dist/chunk-UJFJ7REN.js +485 -0
- package/dist/dev-fetcher.cjs +36 -0
- package/dist/dev-fetcher.d.cts +3 -0
- package/dist/dev-fetcher.d.ts +3 -0
- package/dist/dev-fetcher.js +6 -0
- package/dist/index.cjs +5055 -0
- package/dist/index.d.cts +2437 -0
- package/dist/index.d.ts +2437 -0
- package/dist/index.js +4424 -0
- package/dist/react.cjs +755 -0
- package/dist/react.d.cts +96 -0
- package/dist/react.d.ts +96 -0
- package/dist/react.js +245 -0
- package/dist/websocket-B8_XAwWx.d.cts +336 -0
- package/dist/websocket-B8_XAwWx.d.ts +336 -0
- package/dist/websocket-GXMYofWp.d.cts +330 -0
- package/dist/websocket-GXMYofWp.d.ts +330 -0
- package/package.json +72 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to the Merch SDK will be documented in this file.
|
|
4
|
+
|
|
5
|
+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
|
+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
|
+
|
|
8
|
+
## [0.1.9] - 2025-10-16
|
|
9
|
+
|
|
10
|
+
### Added
|
|
11
|
+
- **DOM-Based URL Resolution** - Intelligent URL resolution for transformed assets
|
|
12
|
+
- Added `resolveUrlFromDOM()` to find actual rendered URLs in the DOM
|
|
13
|
+
- Automatically resolves Vercel Blob Storage URLs from v0.dev
|
|
14
|
+
- Fuzzy filename matching to handle URL transformations with suffixes
|
|
15
|
+
- Perfect for environments where image URLs are transformed at runtime
|
|
16
|
+
|
|
17
|
+
### Changed
|
|
18
|
+
- **Enhanced URL Normalization** - Multi-tier resolution strategy
|
|
19
|
+
1. First attempts to find actual URL in DOM (for v0/Blob Storage)
|
|
20
|
+
2. Falls back to `window.location.origin` conversion
|
|
21
|
+
3. Warns about localhost URLs for better developer experience
|
|
22
|
+
|
|
23
|
+
### Fixed
|
|
24
|
+
- Relative URLs now work correctly in v0.dev and Vercel Blob Storage environments
|
|
25
|
+
- Mockup generation can access transformed image URLs with hash suffixes
|
|
26
|
+
|
|
27
|
+
## [0.1.8] - 2025-10-16
|
|
28
|
+
|
|
29
|
+
### Added
|
|
30
|
+
- **Automatic URL Normalization** - Relative artwork URLs are now automatically converted to absolute URLs
|
|
31
|
+
- Added `normalizeImageUrl()` utility function in `utils/url.ts`
|
|
32
|
+
- Supports `/images/art.jpg`, `./art.jpg`, `../art.jpg` patterns
|
|
33
|
+
- Browser-only conversion using `window.location.origin`
|
|
34
|
+
- SSR-safe with helpful warnings
|
|
35
|
+
|
|
36
|
+
### Changed
|
|
37
|
+
- **Design Generation** - All artwork URLs are normalized in `createDesignForPlacements()`
|
|
38
|
+
- Handles placement designs, provided images, and default URLs
|
|
39
|
+
- Single source of truth for URL normalization
|
|
40
|
+
- **Validation** - Updated `validateImageUrl()` to accept relative URLs
|
|
41
|
+
- Now allows: absolute URLs, relative URLs, protocol-relative URLs, data URLs
|
|
42
|
+
- Clear error messages for invalid formats
|
|
43
|
+
|
|
44
|
+
### Fixed
|
|
45
|
+
- Artwork URLs no longer require absolute paths - relative paths work seamlessly
|
|
46
|
+
- Better developer experience matching Next.js image patterns
|
|
47
|
+
|
|
48
|
+
## [0.1.7] - 2025-10-16
|
|
49
|
+
|
|
50
|
+
### Changed
|
|
51
|
+
- Version bump to maintain parity with @snowcone-app/ui 0.1.11
|
|
52
|
+
- No functional changes in this release
|
|
53
|
+
|
|
54
|
+
## [0.1.0] - 2025-10-10
|
|
55
|
+
|
|
56
|
+
### ⚠️ Alpha Release
|
|
57
|
+
|
|
58
|
+
This is the first alpha release of the Merch SDK. The API is functional but may change based on feedback. Breaking changes are expected before 1.0.0.
|
|
59
|
+
|
|
60
|
+
### Added
|
|
61
|
+
|
|
62
|
+
- **Product Data API**
|
|
63
|
+
- `getProduct(productId)` - Fetch single product by ID
|
|
64
|
+
- `listProducts(options)` - List products with pagination
|
|
65
|
+
- Full TypeScript type definitions for product catalog data
|
|
66
|
+
|
|
67
|
+
- **Mockup Generation**
|
|
68
|
+
- `generateMockupUrl()` - Generate real-time mockup URLs
|
|
69
|
+
- Support for artwork positioning with `ImageAlignment` types
|
|
70
|
+
- Placement-aware mockup rendering (Front, Back, Sleeve, etc.)
|
|
71
|
+
|
|
72
|
+
- **Configuration**
|
|
73
|
+
- `config()` - Global SDK configuration
|
|
74
|
+
- Environment variable support for Next.js
|
|
75
|
+
- Mock mode for development without API calls
|
|
76
|
+
|
|
77
|
+
- **React Hooks** (Optional)
|
|
78
|
+
- `useRealtimeMockup()` - React hook for mockup generation
|
|
79
|
+
- Automatic state management for mockup URLs
|
|
80
|
+
|
|
81
|
+
### Features
|
|
82
|
+
|
|
83
|
+
- **Mock Mode** - Develop without API calls using built-in mock data
|
|
84
|
+
- **TypeScript First** - Full type safety with exported types
|
|
85
|
+
- **Environment Variables** - Automatic configuration from Next.js env vars
|
|
86
|
+
- **Headless Design** - Framework-agnostic core, optional React bindings
|
|
87
|
+
|
|
88
|
+
### Development
|
|
89
|
+
|
|
90
|
+
- Monorepo structure with pnpm workspaces
|
|
91
|
+
- Example implementations in Next.js and Remix
|
|
92
|
+
- Comprehensive test coverage
|
|
93
|
+
|
|
94
|
+
### Documentation
|
|
95
|
+
|
|
96
|
+
- LLM-optimized README with clear examples
|
|
97
|
+
- Inline JSDoc comments for all public APIs
|
|
98
|
+
- TypeScript definitions for IDE autocomplete
|
|
99
|
+
|
|
100
|
+
---
|
|
101
|
+
|
|
102
|
+
**Note on Versioning**: This is a pre-1.0 release. We follow semver, but breaking changes may occur in minor versions (0.x.y) as we iterate based on real-world usage. Pin your versions or use exact version numbers during alpha.
|
|
103
|
+
|
|
104
|
+
**Migration from 0.0.14**: If you were using the previous 0.0.14 version, this is a significant refactor. Please refer to the README for updated API patterns.
|
|
105
|
+
|
|
106
|
+
---
|
|
107
|
+
|
|
108
|
+
## Development Roadmap
|
|
109
|
+
|
|
110
|
+
See [ROADMAP.md](../../ROADMAP.md) for planned features and timeline.
|
|
111
|
+
|
|
112
|
+
### Coming Soon (0.2.0)
|
|
113
|
+
|
|
114
|
+
- Advanced mockup caching strategies
|
|
115
|
+
- Batch mockup generation
|
|
116
|
+
- Product search and filtering
|
|
117
|
+
- Design/artwork management APIs
|
|
118
|
+
|
|
119
|
+
### Future Releases
|
|
120
|
+
|
|
121
|
+
- Webhooks for mockup generation
|
|
122
|
+
- Order management APIs
|
|
123
|
+
- User account integration
|
|
124
|
+
- Analytics and tracking
|
|
125
|
+
|
|
126
|
+
---
|
|
127
|
+
|
|
128
|
+
## Support
|
|
129
|
+
|
|
130
|
+
- **Issues**: [GitHub Issues](https://github.com/merch-dev/ui-components/issues)
|
|
131
|
+
- **Discussions**: [GitHub Discussions](https://github.com/merch-dev/ui-components/discussions)
|
|
132
|
+
- **Docs**: [developers.snowcone.app](https://developers.snowcone.app)
|
|
133
|
+
|
|
134
|
+
---
|
|
135
|
+
|
|
136
|
+
**Built for developers. Optimized for LLMs.** 🤖
|
package/README.md
ADDED
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
# @snowcone-app/sdk
|
|
2
|
+
|
|
3
|
+
**JavaScript/TypeScript SDK for product mockups and print-on-demand**
|
|
4
|
+
|
|
5
|
+
Merch provides a simple SDK for fetching product data and generating real-time merchandise mockups. Use it to visualize artwork on t-shirts, posters, mugs, and more.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @snowcone-app/sdk
|
|
11
|
+
# or
|
|
12
|
+
yarn add @snowcone-app/sdk
|
|
13
|
+
# or
|
|
14
|
+
pnpm add @snowcone-app/sdk
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Quick Start
|
|
18
|
+
|
|
19
|
+
```typescript
|
|
20
|
+
import { getProduct, listProducts, generateMockupUrl } from '@snowcone-app/sdk';
|
|
21
|
+
|
|
22
|
+
// Fetch a product by ID
|
|
23
|
+
const product = await getProduct('BEEB77');
|
|
24
|
+
console.log(product.name); // "Bella + Canvas 3001 Unisex Jersey Short Sleeve Tee"
|
|
25
|
+
|
|
26
|
+
// List all products
|
|
27
|
+
const products = await listProducts({ limit: 10 });
|
|
28
|
+
console.log(`Found ${products.length} products`);
|
|
29
|
+
|
|
30
|
+
// Generate a mockup URL
|
|
31
|
+
const mockupUrl = generateMockupUrl({
|
|
32
|
+
productId: 'BEEB77',
|
|
33
|
+
variantId: 'white-sm',
|
|
34
|
+
artworkUrl: 'https://example.com/artwork.png',
|
|
35
|
+
placement: 'Front',
|
|
36
|
+
alignment: 'center'
|
|
37
|
+
});
|
|
38
|
+
console.log(mockupUrl); // URL to mockup image
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Configuration
|
|
42
|
+
|
|
43
|
+
Configure the SDK to point to your Merch endpoint:
|
|
44
|
+
|
|
45
|
+
```typescript
|
|
46
|
+
import { config } from '@snowcone-app/sdk';
|
|
47
|
+
|
|
48
|
+
config({
|
|
49
|
+
endpoint: 'https://api.snowcone.app',
|
|
50
|
+
mockupUrl: 'https://mockup.snowcone.app',
|
|
51
|
+
accountId: 'your-account-id',
|
|
52
|
+
mode: 'live' // or 'mock' for development
|
|
53
|
+
});
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
**Environment Variables (Next.js):**
|
|
57
|
+
```bash
|
|
58
|
+
NEXT_PUBLIC_MERCH_ENDPOINT=https://api.snowcone.app
|
|
59
|
+
NEXT_PUBLIC_MERCH_MOCKUP_URL=https://mockup.snowcone.app
|
|
60
|
+
NEXT_PUBLIC_MERCH_ACCOUNT_ID=your-account-id
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
The SDK automatically reads these environment variables if not configured explicitly.
|
|
64
|
+
|
|
65
|
+
## Core Functions
|
|
66
|
+
|
|
67
|
+
### Product Data
|
|
68
|
+
|
|
69
|
+
```typescript
|
|
70
|
+
// Get a single product
|
|
71
|
+
const product = await getProduct(productId: string, options?: {
|
|
72
|
+
endpoint?: string;
|
|
73
|
+
mode?: 'mock' | 'live' | 'meilisearch';
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
// List products
|
|
77
|
+
const products = await listProducts(options?: {
|
|
78
|
+
limit?: number;
|
|
79
|
+
offset?: number;
|
|
80
|
+
endpoint?: string;
|
|
81
|
+
mode?: 'mock' | 'live' | 'meilisearch';
|
|
82
|
+
});
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
**Product Object Structure:**
|
|
86
|
+
```typescript
|
|
87
|
+
{
|
|
88
|
+
id: string; // Product ID (e.g., "BEEB77")
|
|
89
|
+
name: string; // Product name
|
|
90
|
+
description?: string; // Product description
|
|
91
|
+
basePrice: number; // Base price in cents
|
|
92
|
+
variants: Variant[]; // Color/size variants
|
|
93
|
+
placements: Placement[]; // Print areas (Front, Back, etc.)
|
|
94
|
+
mockup: {
|
|
95
|
+
blankUrl: string; // Blank product image URL
|
|
96
|
+
};
|
|
97
|
+
}
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
### Mockup Generation
|
|
101
|
+
|
|
102
|
+
```typescript
|
|
103
|
+
import { generateMockupUrl } from '@snowcone-app/sdk';
|
|
104
|
+
|
|
105
|
+
const url = generateMockupUrl({
|
|
106
|
+
productId: string; // Required: Product ID
|
|
107
|
+
variantId?: string; // Optional: Specific variant (color/size)
|
|
108
|
+
artworkUrl: string; // Required: URL to artwork image
|
|
109
|
+
placement?: string; // Optional: Print area (default: 'Front')
|
|
110
|
+
alignment?: ImageAlignment; // Optional: How to position artwork
|
|
111
|
+
mode?: 'mock' | 'live'; // Optional: Mock or live rendering
|
|
112
|
+
});
|
|
113
|
+
|
|
114
|
+
// ImageAlignment options:
|
|
115
|
+
// 'center' | 'top' | 'bottom' | 'left' | 'right' |
|
|
116
|
+
// 'far-left' | 'far-right' | 'far-top' | 'far-bottom'
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
### React Hooks (Optional)
|
|
120
|
+
|
|
121
|
+
For React applications, use the React-specific exports:
|
|
122
|
+
|
|
123
|
+
```typescript
|
|
124
|
+
import { useRealtimeMockup } from '@snowcone-app/sdk/react';
|
|
125
|
+
|
|
126
|
+
function MyComponent() {
|
|
127
|
+
const { mockupUrl, isGenerating } = useRealtimeMockup({
|
|
128
|
+
productId: 'BEEB77',
|
|
129
|
+
artworkUrl: artwork.src,
|
|
130
|
+
placement: 'Front',
|
|
131
|
+
alignment: 'center'
|
|
132
|
+
});
|
|
133
|
+
|
|
134
|
+
return <img src={mockupUrl} alt="Product mockup" />;
|
|
135
|
+
}
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
## TypeScript Support
|
|
139
|
+
|
|
140
|
+
Full TypeScript definitions are included. Import types:
|
|
141
|
+
|
|
142
|
+
```typescript
|
|
143
|
+
import type {
|
|
144
|
+
CatalogProduct,
|
|
145
|
+
Variant,
|
|
146
|
+
Placement,
|
|
147
|
+
ImageAlignment
|
|
148
|
+
} from '@snowcone-app/sdk';
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
## Development Mode
|
|
152
|
+
|
|
153
|
+
Use mock mode for development without API calls:
|
|
154
|
+
|
|
155
|
+
```typescript
|
|
156
|
+
config({ mode: 'mock' });
|
|
157
|
+
|
|
158
|
+
// Returns mock product data
|
|
159
|
+
const product = await getProduct('BEEB77');
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
## API Reference
|
|
163
|
+
|
|
164
|
+
See full API documentation at: [https://developers.snowcone.app/sdk](https://developers.snowcone.app/sdk)
|
|
165
|
+
|
|
166
|
+
## React Components
|
|
167
|
+
|
|
168
|
+
For pre-built React components, install `@snowcone-app/ui`:
|
|
169
|
+
|
|
170
|
+
```bash
|
|
171
|
+
npm install @snowcone-app/ui
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
See: [@snowcone-app/ui on npm](https://www.npmjs.com/package/@snowcone-app/ui)
|
|
175
|
+
|
|
176
|
+
## Examples
|
|
177
|
+
|
|
178
|
+
- [Next.js Example](https://github.com/merch-dev/ui-components/tree/main/examples/next-js)
|
|
179
|
+
- [Basic Product Display](https://github.com/merch-dev/ui-components/tree/main/examples/next-js/app/demos)
|
|
180
|
+
|
|
181
|
+
## Support
|
|
182
|
+
|
|
183
|
+
- **Issues:** [GitHub Issues](https://github.com/merch-dev/ui-components/issues)
|
|
184
|
+
- **Discussions:** [GitHub Discussions](https://github.com/merch-dev/ui-components/discussions)
|
|
185
|
+
- **Docs:** [developers.snowcone.app](https://developers.snowcone.app)
|
|
186
|
+
|
|
187
|
+
## License
|
|
188
|
+
|
|
189
|
+
MIT © [driuqzy](mailto:driuqzy@gmail.com)
|
|
190
|
+
|
|
191
|
+
---
|
|
192
|
+
|
|
193
|
+
**Built for developers. Optimized for LLMs.** 🤖
|
|
194
|
+
|
|
195
|
+
> This SDK is designed to work seamlessly with AI coding assistants like Claude, GitHub Copilot, and Cursor. Clear types, explicit examples, and predictable patterns make it easy for LLMs to generate correct code.
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
// src/dev-fetcher.ts
|
|
2
|
+
function createDevFetcher(baseUrl) {
|
|
3
|
+
return async function devFetch(input, init) {
|
|
4
|
+
const url = input.startsWith("http") ? input : `${baseUrl}${input}`;
|
|
5
|
+
const res = await fetch(url, init);
|
|
6
|
+
return res;
|
|
7
|
+
};
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export {
|
|
11
|
+
createDevFetcher
|
|
12
|
+
};
|