mirror of
https://github.com/ZSeven-W/openpencil.git
synced 2026-06-01 03:14:29 +07:00
b4d1d2a7bb
* fix(docker): support multi-platform builds and fix monorepo paths Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * perf(renderer): cache pre-rasterized paragraph images to avoid per-frame glyph rasterization (#76) * fix(canvas): stabilize frame label size during zoom Draw frame labels in screen-space after the viewport transform restore, converting scene coords manually. Previously fontSize=12/zoom fed into Math.ceil caused integer-boundary jumps that made labels flicker during zoom. Also skip shadow rendering while actively zooming for smoother performance. * perf(renderer): cache pre-rasterized paragraph images to avoid per-frame glyph rasterization - Add paraImageCache (SkImage, 128 MB LRU limit) keyed on the same key as paraCache - Use drawImageRect instead of drawParagraph on cache hit, skipping per-frame glyph shaping and rasterization - Fall back to direct drawParagraph only when off-screen surface creation (MakeSurface) fails - Extract _dpr getter to deduplicate device-pixel-ratio resolution logic across draw paths - Evict oldest entries when cache exceeds byte limit; delete SkImage on eviction and dispose() * feat(cli): introduce OpenPencil CLI for terminal control of the design tool - Added a new CLI application under `apps/cli` to manage OpenPencil from the terminal. - Implemented commands for app control (`start`, `stop`, `status`), document operations (`open`, `save`, `get`, `selection`), and design manipulation (`design`, `import`). - Enhanced documentation with usage instructions and platform support details. - Updated build scripts to include CLI compilation and publishing processes. - Introduced a new GitHub Actions workflow for publishing the CLI to npm. - Updated existing workflows to integrate CLI build steps and ensure proper versioning across packages. * docs: update README files to include CLI tool details and multi-platform code export - Added CLI section to README files in multiple languages, detailing commands for terminal control of the design tool. - Included instructions for global installation and usage examples for the CLI. - Expanded documentation on multi-platform code export capabilities from a single `.op` file to various frameworks. - Updated CLAUDE.md to reference the new CLI documentation and its integration with the design tool. * chore(bun.lock): update package dependencies to specific versions - Removed workspace references for several packages in the bun.lock file. - Updated dependencies for `@zseven-w/pen-core`, `@zseven-w/pen-types`, `@zseven-w/pen-codegen`, `@zseven-w/pen-figma`, and `@zseven-w/pen-renderer` to version `0.5.1-beta.1`. - Ensured consistency in dependency management across the project. --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: leinaldo <60176594+leinaldo@users.noreply.github.com>
55 lines
1.4 KiB
Markdown
55 lines
1.4 KiB
Markdown
# @zseven-w/pen-codegen
|
|
|
|
Multi-platform code generators for [OpenPencil](https://github.com/nicepkg/openpencil) designs. Turn your design files into production-ready code for 8 frameworks.
|
|
|
|
## Install
|
|
|
|
```bash
|
|
npm install @zseven-w/pen-codegen
|
|
```
|
|
|
|
## Supported Platforms
|
|
|
|
| Platform | Generator | Output |
|
|
|---|---|---|
|
|
| React + Tailwind | `generateReactCode` | `.tsx` with Tailwind classes |
|
|
| HTML + CSS | `generateHTMLCode` | Vanilla HTML/CSS |
|
|
| Vue 3 | `generateVueCode` | `.vue` SFC |
|
|
| Svelte | `generateSvelteCode` | `.svelte` component |
|
|
| Flutter | `generateFlutterCode` | Dart widget |
|
|
| SwiftUI | `generateSwiftUICode` | Swift view |
|
|
| Jetpack Compose | `generateComposeCode` | Kotlin composable |
|
|
| React Native | `generateReactNativeCode` | `.tsx` with StyleSheet |
|
|
|
|
## Usage
|
|
|
|
Generate code from a single node:
|
|
|
|
```ts
|
|
import { generateReactCode } from '@zseven-w/pen-codegen'
|
|
|
|
const code = generateReactCode(node, { indent: 2 })
|
|
```
|
|
|
|
Generate from an entire document (resolves variables, computes layout):
|
|
|
|
```ts
|
|
import { generateReactFromDocument } from '@zseven-w/pen-codegen'
|
|
|
|
const code = generateReactFromDocument(document)
|
|
```
|
|
|
|
### CSS Variables
|
|
|
|
Extract design variables as CSS custom properties:
|
|
|
|
```ts
|
|
import { generateCSSVariables } from '@zseven-w/pen-codegen'
|
|
|
|
const css = generateCSSVariables(variables, themes)
|
|
// :root { --color-primary: #3b82f6; ... }
|
|
```
|
|
|
|
## License
|
|
|
|
MIT
|