Skip to content

Commit 3b8c38e

Browse files
Copilothotlong
Copilot
and
hotlong
committed
Add VSCode extension icon, publishing guide, and update main README
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
1 parent b518c88 commit 3b8c38e

6 files changed

Lines changed: 1501 additions & 25 deletions

File tree

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -200,11 +200,15 @@ Object UI is a modular monorepo with packages designed for specific use cases:
200200
| **[@object-ui/components](./packages/components)** | Standard UI components (Tailwind + Shadcn) | 50KB |
201201
| **[@object-ui/designer](./packages/designer)** | Visual drag-and-drop schema editor | 80KB |
202202
| **[@object-ui/data-objectql](./packages/data-objectql)** | ObjectQL API adapter for data integration | 15KB |
203+
| **[vscode-extension](./packages/vscode-extension)** | VSCode extension for schema development | 32KB |
203204

204205
**Plugins** (lazy-loaded):
205206
- `@object-ui/plugin-charts` - Chart components (Chart.js)
206207
- `@object-ui/plugin-editor` - Rich text editor components
207208

209+
**Developer Tools**:
210+
- **[VSCode Extension](./packages/vscode-extension)** - IntelliSense, live preview, validation, and snippets for Object UI schemas
211+
208212
## 🔌 Data Integration
209213

210214
Object UI is designed to work with any backend through its universal DataSource interface:

‎packages/vscode-extension/ICON.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# Extension Icon
2+
3+
The `icon.svg` file is the extension's icon shown in the VSCode marketplace and extension manager.
4+
5+
## Current Icon
6+
7+
A gradient background (indigo → purple → pink) with a large "O" representing Object UI, and small rectangles suggesting UI components.
8+
9+
## To Convert to PNG (for marketplace compatibility)
10+
11+
If you need a PNG version for the marketplace:
12+
13+
```bash
14+
# Using ImageMagick
15+
convert -background none -resize 128x128 icon.svg icon.png
16+
17+
# Using rsvg-convert
18+
rsvg-convert -w 128 -h 128 icon.svg > icon.png
19+
20+
# Using Inkscape
21+
inkscape icon.svg --export-type=png --export-filename=icon.png -w 128 -h 128
22+
```
23+
24+
Then update `package.json` to reference `icon.png` instead of `icon.svg`.
25+
26+
## Design Guidelines
27+
28+
- Size: 128x128 pixels
29+
- Format: PNG or SVG
30+
- Transparent background or solid color
31+
- Simple, recognizable design
32+
- Works well at small sizes

‎packages/vscode-extension/PUBLISHING.md‎

Lines changed: 270 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,270 @@
1+
# Publishing the Object UI VSCode Extension
2+
3+
This guide covers how to publish the extension to the Visual Studio Code Marketplace.
4+
5+
## Prerequisites
6+
7+
1. **Microsoft Account**: You need a Microsoft account to create a publisher
8+
2. **Azure DevOps Organization**: Required for publishing
9+
3. **Personal Access Token (PAT)**: For authentication
10+
11+
## Setup
12+
13+
### 1. Create a Publisher
14+
15+
1. Go to [Visual Studio Marketplace Publisher Management](https://marketplace.visualstudio.com/manage)
16+
2. Sign in with your Microsoft account
17+
3. Click "Create Publisher"
18+
4. Fill in the details:
19+
- Publisher ID: `objectui` (must match `publisher` in package.json)
20+
- Display name: Object UI
21+
- Description: Official publisher for Object UI
22+
23+
### 2. Get a Personal Access Token
24+
25+
1. Go to [Azure DevOps](https://dev.azure.com/)
26+
2. Click on your profile → Personal Access Tokens
27+
3. Click "New Token"
28+
4. Settings:
29+
- Name: "VSCode Marketplace - Object UI"
30+
- Organization: All accessible organizations
31+
- Expiration: Custom (1 year recommended)
32+
- Scopes: **Marketplace** → **Manage**
33+
5. Copy the token (you won't see it again!)
34+
35+
### 3. Configure vsce
36+
37+
```bash
38+
# Install vsce globally (if not already installed)
39+
npm install -g @vscode/vsce
40+
41+
# Login with your publisher
42+
vsce login objectui
43+
# Enter your Personal Access Token when prompted
44+
```
45+
46+
## Build and Test
47+
48+
### 1. Build the Extension
49+
50+
```bash
51+
cd packages/vscode-extension
52+
53+
# Install dependencies
54+
pnpm install
55+
56+
# Build
57+
pnpm build
58+
```
59+
60+
### 2. Test Locally
61+
62+
```bash
63+
# Package the extension (creates .vsix file)
64+
pnpm package
65+
66+
# Install in VSCode for testing
67+
code --install-extension object-ui-0.1.0.vsix
68+
69+
# Test the extension
70+
# 1. Open a .objectui.json file
71+
# 2. Try auto-completion
72+
# 3. Open preview
73+
# 4. Test all commands
74+
```
75+
76+
### 3. Validate
77+
78+
```bash
79+
# Verify the package
80+
vsce ls
81+
82+
# Should list all files that will be included
83+
# Make sure no unnecessary files are included
84+
```
85+
86+
## Publishing
87+
88+
### First Release
89+
90+
```bash
91+
# From packages/vscode-extension directory
92+
93+
# Publish to marketplace
94+
pnpm publish
95+
96+
# Or manually with vsce
97+
vsce publish
98+
```
99+
100+
This will:
101+
1. Run `vscode:prepublish` script (builds the extension)
102+
2. Package the extension
103+
3. Upload to the marketplace
104+
4. Make it available within a few minutes
105+
106+
### Subsequent Releases
107+
108+
1. **Update version** in `package.json`:
109+
```bash
110+
# Patch version (0.1.0 → 0.1.1)
111+
vsce publish patch
112+
113+
# Minor version (0.1.0 → 0.2.0)
114+
vsce publish minor
115+
116+
# Major version (0.1.0 → 1.0.0)
117+
vsce publish major
118+
```
119+
120+
2. **Update CHANGELOG.md** with changes
121+
122+
3. **Commit changes**:
123+
```bash
124+
git add .
125+
git commit -m "Release v0.1.1"
126+
git push
127+
```
128+
129+
4. **Create GitHub Release**:
130+
- Go to GitHub releases
131+
- Create new release
132+
- Tag version: `vscode-extension-v0.1.1`
133+
- Attach the `.vsix` file
134+
- Document changes
135+
136+
## Pre-release Versions
137+
138+
For beta testing:
139+
140+
```bash
141+
# Publish as pre-release
142+
vsce publish --pre-release
143+
```
144+
145+
Users can opt-in to pre-release versions in VSCode.
146+
147+
## Unpublishing
148+
149+
**Warning**: This removes the extension from the marketplace.
150+
151+
```bash
152+
# Unpublish a specific version
153+
vsce unpublish objectui.object-ui@0.1.0
154+
155+
# Unpublish all versions (careful!)
156+
vsce unpublish objectui.object-ui
157+
```
158+
159+
## Post-Publishing
160+
161+
### 1. Verify on Marketplace
162+
163+
- Visit: https://marketplace.visualstudio.com/items?itemName=objectui.object-ui
164+
- Check that all information displays correctly
165+
- Test installation from marketplace
166+
167+
### 2. Update Repository
168+
169+
Add marketplace badge to README:
170+
171+
```markdown
172+
[![VSCode Marketplace](https://img.shields.io/vscode-marketplace/v/objectui.object-ui.svg)](https://marketplace.visualstudio.com/items?itemName=objectui.object-ui)
173+
```
174+
175+
### 3. Announce
176+
177+
- Update main Object UI README
178+
- Post on GitHub Discussions
179+
- Share on social media
180+
- Update documentation
181+
182+
## Troubleshooting
183+
184+
### Issue: "Publisher not found"
185+
186+
**Solution**: Make sure the `publisher` field in package.json matches your publisher ID.
187+
188+
### Issue: "Missing icon.png"
189+
190+
**Solution**: Either:
191+
1. Convert icon.svg to icon.png (see ICON.md)
192+
2. Remove the `icon` field from package.json (not recommended)
193+
194+
### Issue: "Package size too large"
195+
196+
**Solution**: Check `.vscodeignore` to exclude unnecessary files:
197+
- Source files (src/)
198+
- Test files
199+
- Configuration files (tsconfig.json, etc.)
200+
- node_modules is already excluded by default
201+
202+
### Issue: "Build fails during publish"
203+
204+
**Solution**: Test the build locally first:
205+
```bash
206+
pnpm build
207+
pnpm package
208+
```
209+
210+
## Automated Publishing (CI/CD)
211+
212+
For automated releases via GitHub Actions:
213+
214+
```yaml
215+
# .github/workflows/publish-vscode.yml
216+
name: Publish VSCode Extension
217+
218+
on:
219+
push:
220+
tags:
221+
- 'vscode-extension-v*'
222+
223+
jobs:
224+
publish:
225+
runs-on: ubuntu-latest
226+
steps:
227+
- uses: actions/checkout@v3
228+
229+
- uses: pnpm/action-setup@v2
230+
with:
231+
version: 9
232+
233+
- uses: actions/setup-node@v3
234+
with:
235+
node-version: 18
236+
cache: 'pnpm'
237+
238+
- run: pnpm install
239+
240+
- name: Publish to Marketplace
241+
working-directory: packages/vscode-extension
242+
run: pnpm publish
243+
env:
244+
VSCE_PAT: ${{ secrets.VSCE_PAT }}
245+
```
246+
247+
Add `VSCE_PAT` secret to your GitHub repository settings.
248+
249+
## Best Practices
250+
251+
1. **Test thoroughly** before publishing
252+
2. **Update CHANGELOG.md** with every release
253+
3. **Use semantic versioning** (major.minor.patch)
254+
4. **Keep icon simple** and recognizable at small sizes
255+
5. **Write clear descriptions** in package.json
256+
6. **Respond to user feedback** and issues promptly
257+
7. **Maintain backward compatibility** when possible
258+
259+
## Resources
260+
261+
- [VSCode Extension Publishing Guide](https://code.visualstudio.com/api/working-with-extensions/publishing-extension)
262+
- [Extension Manifest Reference](https://code.visualstudio.com/api/references/extension-manifest)
263+
- [Marketplace Publisher Portal](https://marketplace.visualstudio.com/manage)
264+
- [vsce CLI Documentation](https://github.com/microsoft/vscode-vsce)
265+
266+
## Support
267+
268+
For issues related to publishing, contact:
269+
- VSCode Marketplace Support: https://aka.ms/vsmarketplace-help
270+
- Object UI Team: hello@objectui.org

‎packages/vscode-extension/icon.svg‎

Lines changed: 13 additions & 0 deletions
Loading

‎packages/vscode-extension/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"description": "VSCode extension for Object UI - Schema-driven UI development with IntelliSense, validation, and live preview",
55
"version": "0.1.0",
66
"publisher": "objectui",
7-
"icon": "icon.png",
7+
"icon": "icon.svg",
88
"engines": {
99
"vscode": "^1.85.0"
1010
},

0 commit comments

Comments
 (0)