@khoaha/spek-cli 1.0.4 → 1.0.6
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/dist/commands/svg-to-vd/handler.d.ts +14 -0
- package/dist/commands/svg-to-vd/handler.d.ts.map +1 -0
- package/dist/commands/svg-to-vd/handler.js +119 -0
- package/dist/commands/svg-to-vd/handler.js.map +1 -0
- package/dist/config/manager.d.ts +18 -0
- package/dist/config/manager.d.ts.map +1 -0
- package/dist/config/manager.js +53 -0
- package/dist/config/manager.js.map +1 -0
- package/dist/directus/client.d.ts +14 -0
- package/dist/directus/client.d.ts.map +1 -0
- package/dist/directus/client.js +81 -0
- package/dist/directus/client.js.map +1 -0
- package/dist/download/handler.d.ts +6 -0
- package/dist/download/handler.d.ts.map +1 -0
- package/dist/download/handler.js +100 -0
- package/dist/download/handler.js.map +1 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +210 -0
- package/dist/index.js.map +1 -0
- package/dist/prompts/index.d.ts +14 -0
- package/dist/prompts/index.d.ts.map +1 -0
- package/dist/prompts/index.js +69 -0
- package/dist/prompts/index.js.map +1 -0
- package/dist/types/index.d.ts +67 -0
- package/dist/types/index.d.ts.map +1 -0
- package/dist/types/index.js +2 -0
- package/dist/types/index.js.map +1 -0
- package/dist/utils/file-utils.d.ts +28 -0
- package/dist/utils/file-utils.d.ts.map +1 -0
- package/dist/utils/file-utils.js +61 -0
- package/dist/utils/file-utils.js.map +1 -0
- package/dist/utils/svg-converter.d.ts +44 -0
- package/dist/utils/svg-converter.d.ts.map +1 -0
- package/dist/utils/svg-converter.js +149 -0
- package/dist/utils/svg-converter.js.map +1 -0
- package/package.json +7 -2
- package/bin/cli.js +0 -7
- package/docs/ARCHITECTURE.md +0 -286
- package/docs/PUBLISH_QUICK_REFERENCE.md +0 -135
- package/docs/SVG_TO_VECTOR_DRAWABLE.md +0 -186
- package/docs/TESTING.md +0 -429
- package/docs/USAGE_EXAMPLES.md +0 -520
- package/docs/WINDOWS_DEVELOPMENT.md +0 -487
- package/docs/WORKFLOW.md +0 -479
- package/scripts/publish.ps1 +0 -193
- package/scripts/publish.sh +0 -170
- package/src/commands/svg-to-vd/handler.ts +0 -131
- package/src/config/manager.ts +0 -58
- package/src/directus/client.ts +0 -101
- package/src/download/handler.ts +0 -116
- package/src/index.ts +0 -231
- package/src/prompts/index.ts +0 -76
- package/src/types/index.ts +0 -72
- package/src/utils/file-utils.ts +0 -69
- package/src/utils/svg-converter.ts +0 -196
- package/tsconfig.json +0 -20
|
@@ -1,487 +0,0 @@
|
|
|
1
|
-
# Windows Development Guide
|
|
2
|
-
|
|
3
|
-
## The Problem
|
|
4
|
-
|
|
5
|
-
Windows PowerShell cannot directly execute Node.js files with shebang (`#!/usr/bin/env node`). This causes the error:
|
|
6
|
-
|
|
7
|
-
```
|
|
8
|
-
Error: Invalid character
|
|
9
|
-
Code: 800A03F6
|
|
10
|
-
Source: Microsoft JScript compilation error
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
## The Solution
|
|
14
|
-
|
|
15
|
-
We've created a **Windows-compatible wrapper** at `bin/cli.js` that properly loads the compiled code.
|
|
16
|
-
|
|
17
|
-
---
|
|
18
|
-
|
|
19
|
-
## 🚀 Development Workflow for Windows
|
|
20
|
-
|
|
21
|
-
### Option 1: Using Node.js Directly (Recommended for Testing)
|
|
22
|
-
|
|
23
|
-
This is the **simplest and most reliable** method for local testing:
|
|
24
|
-
|
|
25
|
-
```powershell
|
|
26
|
-
# 1. Build the project
|
|
27
|
-
cd F:\specs-figma\cli-tool
|
|
28
|
-
npm run build
|
|
29
|
-
|
|
30
|
-
# 2. Run with Node.js directly
|
|
31
|
-
node dist/index.js --help
|
|
32
|
-
node dist/index.js -d <file-id>
|
|
33
|
-
|
|
34
|
-
# Example with real file ID
|
|
35
|
-
node dist/index.js -d 0880c1fa-7dd9-4b28-a39d-32a5ef83cc58
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
**Pros:**
|
|
39
|
-
- ✅ Works on all Windows versions
|
|
40
|
-
- ✅ No PATH configuration needed
|
|
41
|
-
- ✅ Simple and straightforward
|
|
42
|
-
- ✅ Best for development and testing
|
|
43
|
-
|
|
44
|
-
**Cons:**
|
|
45
|
-
- ❌ Longer command (need to type `node dist/index.js`)
|
|
46
|
-
|
|
47
|
-
---
|
|
48
|
-
|
|
49
|
-
### Option 2: Using npm link (For Global Testing)
|
|
50
|
-
|
|
51
|
-
Link the package globally to test as if it were installed:
|
|
52
|
-
|
|
53
|
-
```powershell
|
|
54
|
-
# 1. Build the project
|
|
55
|
-
cd F:\specs-figma\cli-tool
|
|
56
|
-
npm run build
|
|
57
|
-
|
|
58
|
-
# 2. Link globally
|
|
59
|
-
npm link
|
|
60
|
-
|
|
61
|
-
# 3. Now you can use it anywhere
|
|
62
|
-
cd C:\Users\Khoa\Downloads\spex-export
|
|
63
|
-
spek-cli -d <file-id>
|
|
64
|
-
|
|
65
|
-
# 4. When done testing, unlink
|
|
66
|
-
npm unlink -g spek-cli
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
**Pros:**
|
|
70
|
-
- ✅ Test the actual user experience
|
|
71
|
-
- ✅ Works from any directory
|
|
72
|
-
- ✅ Tests the bin wrapper
|
|
73
|
-
|
|
74
|
-
**Cons:**
|
|
75
|
-
- ❌ Requires admin privileges sometimes
|
|
76
|
-
- ❌ Can conflict with published versions
|
|
77
|
-
- ❌ Need to rebuild and relink after changes
|
|
78
|
-
|
|
79
|
-
---
|
|
80
|
-
|
|
81
|
-
### Option 3: Using npx Locally (For Package Testing)
|
|
82
|
-
|
|
83
|
-
Test the package as users would with npx:
|
|
84
|
-
|
|
85
|
-
```powershell
|
|
86
|
-
# 1. Build the project
|
|
87
|
-
cd F:\specs-figma\cli-tool
|
|
88
|
-
npm run build
|
|
89
|
-
|
|
90
|
-
# 2. Pack the package (creates .tgz file)
|
|
91
|
-
npm pack
|
|
92
|
-
|
|
93
|
-
# 3. Install globally from the .tgz
|
|
94
|
-
npm install -g .\spek-cli-1.0.0.tgz
|
|
95
|
-
|
|
96
|
-
# 4. Test it
|
|
97
|
-
cd C:\Users\Khoa\Downloads\spex-export
|
|
98
|
-
spek-cli -d <file-id>
|
|
99
|
-
|
|
100
|
-
# 5. Uninstall when done
|
|
101
|
-
npm uninstall -g spek-cli
|
|
102
|
-
```
|
|
103
|
-
|
|
104
|
-
**Pros:**
|
|
105
|
-
- ✅ Tests the complete package
|
|
106
|
-
- ✅ Most realistic user experience
|
|
107
|
-
- ✅ Tests packaging and distribution
|
|
108
|
-
|
|
109
|
-
**Cons:**
|
|
110
|
-
- ❌ Most complex workflow
|
|
111
|
-
- ❌ Need to repack after every change
|
|
112
|
-
- ❌ Creates .tgz files to clean up
|
|
113
|
-
|
|
114
|
-
---
|
|
115
|
-
|
|
116
|
-
## 📝 Recommended Development Flow
|
|
117
|
-
|
|
118
|
-
### For Active Development (Making Changes)
|
|
119
|
-
|
|
120
|
-
```powershell
|
|
121
|
-
# Terminal 1: Watch mode (auto-rebuild on changes)
|
|
122
|
-
cd F:\specs-figma\cli-tool
|
|
123
|
-
npm run dev
|
|
124
|
-
|
|
125
|
-
# Terminal 2: Test your changes
|
|
126
|
-
cd F:\specs-figma\cli-tool
|
|
127
|
-
node dist/index.js -d <file-id>
|
|
128
|
-
```
|
|
129
|
-
|
|
130
|
-
### For Testing Complete Workflow
|
|
131
|
-
|
|
132
|
-
```powershell
|
|
133
|
-
# 1. Build
|
|
134
|
-
cd F:\specs-figma\cli-tool
|
|
135
|
-
npm run build
|
|
136
|
-
|
|
137
|
-
# 2. Link globally
|
|
138
|
-
npm link
|
|
139
|
-
|
|
140
|
-
# 3. Test from different directory
|
|
141
|
-
cd C:\Users\Khoa\Downloads\test-directory
|
|
142
|
-
spek-cli -d <file-id>
|
|
143
|
-
|
|
144
|
-
# 4. Unlink when done
|
|
145
|
-
npm unlink -g spek-cli
|
|
146
|
-
```
|
|
147
|
-
|
|
148
|
-
---
|
|
149
|
-
|
|
150
|
-
## 🔧 Quick Commands Reference
|
|
151
|
-
|
|
152
|
-
### Build Commands
|
|
153
|
-
|
|
154
|
-
```powershell
|
|
155
|
-
# Build once
|
|
156
|
-
npm run build
|
|
157
|
-
|
|
158
|
-
# Watch mode (rebuild on changes)
|
|
159
|
-
npm run dev
|
|
160
|
-
|
|
161
|
-
# Clean and rebuild
|
|
162
|
-
Remove-Item -Recurse -Force dist
|
|
163
|
-
npm run build
|
|
164
|
-
```
|
|
165
|
-
|
|
166
|
-
### Testing Commands
|
|
167
|
-
|
|
168
|
-
```powershell
|
|
169
|
-
# Test with Node.js directly
|
|
170
|
-
node dist/index.js --help
|
|
171
|
-
node dist/index.js --version
|
|
172
|
-
node dist/index.js -d <file-id>
|
|
173
|
-
node dist/index.js # Interactive mode
|
|
174
|
-
|
|
175
|
-
# Test with npm link
|
|
176
|
-
npm link
|
|
177
|
-
spek-cli --help
|
|
178
|
-
spek-cli -d <file-id>
|
|
179
|
-
npm unlink -g spek-cli
|
|
180
|
-
```
|
|
181
|
-
|
|
182
|
-
### Debugging Commands
|
|
183
|
-
|
|
184
|
-
```powershell
|
|
185
|
-
# Check if build output exists
|
|
186
|
-
Get-ChildItem dist
|
|
187
|
-
|
|
188
|
-
# View compiled JavaScript
|
|
189
|
-
Get-Content dist/index.js | Select-Object -First 20
|
|
190
|
-
|
|
191
|
-
# Check Node.js version
|
|
192
|
-
node --version
|
|
193
|
-
|
|
194
|
-
# Check npm version
|
|
195
|
-
npm --version
|
|
196
|
-
```
|
|
197
|
-
|
|
198
|
-
---
|
|
199
|
-
|
|
200
|
-
## 🐛 Troubleshooting
|
|
201
|
-
|
|
202
|
-
### Error: "Invalid character" (800A03F6)
|
|
203
|
-
|
|
204
|
-
**Cause:** Trying to run the file directly in PowerShell
|
|
205
|
-
|
|
206
|
-
**Solution:** Use `node dist/index.js` instead
|
|
207
|
-
|
|
208
|
-
```powershell
|
|
209
|
-
# ❌ DON'T DO THIS
|
|
210
|
-
.\dist\index.js
|
|
211
|
-
|
|
212
|
-
# ✅ DO THIS
|
|
213
|
-
node dist/index.js
|
|
214
|
-
```
|
|
215
|
-
|
|
216
|
-
---
|
|
217
|
-
|
|
218
|
-
### Error: "Cannot find module"
|
|
219
|
-
|
|
220
|
-
**Cause:** Project not built or dependencies not installed
|
|
221
|
-
|
|
222
|
-
**Solution:**
|
|
223
|
-
```powershell
|
|
224
|
-
# Install dependencies
|
|
225
|
-
npm install
|
|
226
|
-
|
|
227
|
-
# Build the project
|
|
228
|
-
npm run build
|
|
229
|
-
```
|
|
230
|
-
|
|
231
|
-
---
|
|
232
|
-
|
|
233
|
-
### Error: "spek-cli: command not found"
|
|
234
|
-
|
|
235
|
-
**Cause:** Package not linked globally
|
|
236
|
-
|
|
237
|
-
**Solution:**
|
|
238
|
-
```powershell
|
|
239
|
-
# Link the package
|
|
240
|
-
cd F:\specs-figma\cli-tool
|
|
241
|
-
npm link
|
|
242
|
-
|
|
243
|
-
# Or use Node.js directly
|
|
244
|
-
node dist/index.js -d <file-id>
|
|
245
|
-
```
|
|
246
|
-
|
|
247
|
-
---
|
|
248
|
-
|
|
249
|
-
### Error: "Permission denied"
|
|
250
|
-
|
|
251
|
-
**Cause:** Need admin privileges for npm link
|
|
252
|
-
|
|
253
|
-
**Solution:**
|
|
254
|
-
```powershell
|
|
255
|
-
# Run PowerShell as Administrator
|
|
256
|
-
# Right-click PowerShell → "Run as Administrator"
|
|
257
|
-
|
|
258
|
-
# Then run npm link
|
|
259
|
-
npm link
|
|
260
|
-
```
|
|
261
|
-
|
|
262
|
-
---
|
|
263
|
-
|
|
264
|
-
### Build Errors
|
|
265
|
-
|
|
266
|
-
**Cause:** TypeScript compilation errors
|
|
267
|
-
|
|
268
|
-
**Solution:**
|
|
269
|
-
```powershell
|
|
270
|
-
# Check for errors
|
|
271
|
-
npm run build
|
|
272
|
-
|
|
273
|
-
# If errors, check the TypeScript files
|
|
274
|
-
# Fix any type errors shown in the output
|
|
275
|
-
```
|
|
276
|
-
|
|
277
|
-
---
|
|
278
|
-
|
|
279
|
-
## 📦 Testing with Real Directus Instance
|
|
280
|
-
|
|
281
|
-
### Step 1: Prepare Test Environment
|
|
282
|
-
|
|
283
|
-
```powershell
|
|
284
|
-
# Create test directory
|
|
285
|
-
New-Item -ItemType Directory -Path C:\Users\Khoa\Downloads\specs-test
|
|
286
|
-
cd C:\Users\Khoa\Downloads\specs-test
|
|
287
|
-
```
|
|
288
|
-
|
|
289
|
-
### Step 2: Get Test Data
|
|
290
|
-
|
|
291
|
-
1. Open Figma with SpeX plugin
|
|
292
|
-
2. Export to Directus Vault
|
|
293
|
-
3. Copy the File ID from success dialog
|
|
294
|
-
|
|
295
|
-
### Step 3: Run CLI Tool
|
|
296
|
-
|
|
297
|
-
```powershell
|
|
298
|
-
# Option A: Using Node.js directly
|
|
299
|
-
node F:\specs-figma\cli-tool\dist\index.js -d <file-id>
|
|
300
|
-
|
|
301
|
-
# Option B: Using npm link
|
|
302
|
-
cd F:\specs-figma\cli-tool
|
|
303
|
-
npm link
|
|
304
|
-
cd C:\Users\Khoa\Downloads\specs-test
|
|
305
|
-
spek-cli -d <file-id>
|
|
306
|
-
```
|
|
307
|
-
|
|
308
|
-
### Step 4: Verify Results
|
|
309
|
-
|
|
310
|
-
```powershell
|
|
311
|
-
# Check extracted files
|
|
312
|
-
Get-ChildItem
|
|
313
|
-
|
|
314
|
-
# Should see:
|
|
315
|
-
# - README.md
|
|
316
|
-
# - manifest.json
|
|
317
|
-
# - components/
|
|
318
|
-
# - icons/
|
|
319
|
-
# - images/
|
|
320
|
-
```
|
|
321
|
-
|
|
322
|
-
---
|
|
323
|
-
|
|
324
|
-
## 🔄 Complete Development Cycle
|
|
325
|
-
|
|
326
|
-
### 1. Make Changes
|
|
327
|
-
|
|
328
|
-
Edit source files in `src/`:
|
|
329
|
-
- `src/index.ts`
|
|
330
|
-
- `src/config/manager.ts`
|
|
331
|
-
- `src/prompts/index.ts`
|
|
332
|
-
- etc.
|
|
333
|
-
|
|
334
|
-
### 2. Build
|
|
335
|
-
|
|
336
|
-
```powershell
|
|
337
|
-
cd F:\specs-figma\cli-tool
|
|
338
|
-
npm run build
|
|
339
|
-
```
|
|
340
|
-
|
|
341
|
-
### 3. Test
|
|
342
|
-
|
|
343
|
-
```powershell
|
|
344
|
-
# Quick test
|
|
345
|
-
node dist/index.js --help
|
|
346
|
-
|
|
347
|
-
# Full test with file ID
|
|
348
|
-
node dist/index.js -d <file-id>
|
|
349
|
-
```
|
|
350
|
-
|
|
351
|
-
### 4. Verify
|
|
352
|
-
|
|
353
|
-
```powershell
|
|
354
|
-
# Check if files extracted
|
|
355
|
-
Get-ChildItem
|
|
356
|
-
|
|
357
|
-
# Check config created
|
|
358
|
-
Get-Content ~\.spek-cli\config.json
|
|
359
|
-
```
|
|
360
|
-
|
|
361
|
-
### 5. Iterate
|
|
362
|
-
|
|
363
|
-
Repeat steps 1-4 until satisfied.
|
|
364
|
-
|
|
365
|
-
---
|
|
366
|
-
|
|
367
|
-
## 🎯 Best Practices for Windows Development
|
|
368
|
-
|
|
369
|
-
### 1. Use PowerShell or Windows Terminal
|
|
370
|
-
|
|
371
|
-
**Recommended:**
|
|
372
|
-
- Windows Terminal (modern, better experience)
|
|
373
|
-
- PowerShell 7+ (cross-platform)
|
|
374
|
-
|
|
375
|
-
**Avoid:**
|
|
376
|
-
- Command Prompt (cmd.exe) - limited features
|
|
377
|
-
- Git Bash - may have path issues
|
|
378
|
-
|
|
379
|
-
### 2. Use Full Paths When Testing
|
|
380
|
-
|
|
381
|
-
```powershell
|
|
382
|
-
# ✅ GOOD: Full path
|
|
383
|
-
node F:\specs-figma\cli-tool\dist\index.js -d <file-id>
|
|
384
|
-
|
|
385
|
-
# ❌ RISKY: Relative path (depends on current directory)
|
|
386
|
-
node dist\index.js -d <file-id>
|
|
387
|
-
```
|
|
388
|
-
|
|
389
|
-
### 3. Use npm Scripts
|
|
390
|
-
|
|
391
|
-
```powershell
|
|
392
|
-
# ✅ GOOD: Use npm scripts
|
|
393
|
-
npm run build
|
|
394
|
-
npm run dev
|
|
395
|
-
|
|
396
|
-
# ❌ AVOID: Direct tsc commands
|
|
397
|
-
tsc
|
|
398
|
-
tsc --watch
|
|
399
|
-
```
|
|
400
|
-
|
|
401
|
-
### 4. Clean Build When in Doubt
|
|
402
|
-
|
|
403
|
-
```powershell
|
|
404
|
-
# Remove old build
|
|
405
|
-
Remove-Item -Recurse -Force dist
|
|
406
|
-
|
|
407
|
-
# Fresh build
|
|
408
|
-
npm run build
|
|
409
|
-
```
|
|
410
|
-
|
|
411
|
-
### 5. Check Node.js Version
|
|
412
|
-
|
|
413
|
-
```powershell
|
|
414
|
-
# Ensure Node.js 18+
|
|
415
|
-
node --version
|
|
416
|
-
# Should show: v18.x.x or higher
|
|
417
|
-
```
|
|
418
|
-
|
|
419
|
-
---
|
|
420
|
-
|
|
421
|
-
## 📋 Pre-Testing Checklist
|
|
422
|
-
|
|
423
|
-
Before testing with real Directus instance:
|
|
424
|
-
|
|
425
|
-
- [ ] Node.js 18+ installed
|
|
426
|
-
- [ ] Dependencies installed (`npm install`)
|
|
427
|
-
- [ ] Project built (`npm run build`)
|
|
428
|
-
- [ ] Directus instance URL ready
|
|
429
|
-
- [ ] Access token generated
|
|
430
|
-
- [ ] File ID from Vault Export ready
|
|
431
|
-
- [ ] Test directory created
|
|
432
|
-
|
|
433
|
-
---
|
|
434
|
-
|
|
435
|
-
## 🚀 Quick Start for Testing
|
|
436
|
-
|
|
437
|
-
**The fastest way to test right now:**
|
|
438
|
-
|
|
439
|
-
```powershell
|
|
440
|
-
# 1. Navigate to project
|
|
441
|
-
cd F:\specs-figma\cli-tool
|
|
442
|
-
|
|
443
|
-
# 2. Build (if not already built)
|
|
444
|
-
npm run build
|
|
445
|
-
|
|
446
|
-
# 3. Create test directory
|
|
447
|
-
New-Item -ItemType Directory -Path C:\Users\Khoa\Downloads\specs-test -Force
|
|
448
|
-
cd C:\Users\Khoa\Downloads\specs-test
|
|
449
|
-
|
|
450
|
-
# 4. Run CLI with your file ID
|
|
451
|
-
node F:\specs-figma\cli-tool\dist\index.js -d 0880c1fa-7dd9-4b28-a39d-32a5ef83cc58
|
|
452
|
-
|
|
453
|
-
# 5. Follow the prompts for first-time setup
|
|
454
|
-
```
|
|
455
|
-
|
|
456
|
-
---
|
|
457
|
-
|
|
458
|
-
## 📞 Need Help?
|
|
459
|
-
|
|
460
|
-
### Common Issues
|
|
461
|
-
|
|
462
|
-
1. **"Invalid character" error** → Use `node dist/index.js` instead of running directly
|
|
463
|
-
2. **"Cannot find module" error** → Run `npm install` and `npm run build`
|
|
464
|
-
3. **"Command not found" error** → Use full path or run `npm link`
|
|
465
|
-
4. **Permission errors** → Run PowerShell as Administrator
|
|
466
|
-
|
|
467
|
-
### Documentation
|
|
468
|
-
|
|
469
|
-
- [Main README](./README.md)
|
|
470
|
-
- [Quick Start](./QUICKSTART.md)
|
|
471
|
-
- [Testing Guide](./docs/TESTING.md)
|
|
472
|
-
- [Architecture](./docs/ARCHITECTURE.md)
|
|
473
|
-
|
|
474
|
-
---
|
|
475
|
-
|
|
476
|
-
## ✅ Summary
|
|
477
|
-
|
|
478
|
-
**For Development & Testing on Windows:**
|
|
479
|
-
|
|
480
|
-
```powershell
|
|
481
|
-
# The simplest and most reliable method:
|
|
482
|
-
cd F:\specs-figma\cli-tool
|
|
483
|
-
npm run build
|
|
484
|
-
node dist/index.js -d <file-id>
|
|
485
|
-
```
|
|
486
|
-
|
|
487
|
-
**That's it!** This works on all Windows versions and doesn't require any special setup.
|