Skip to content

Add TypeScript Renderer #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 23 commits into from
Jun 5, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions .github/workflows/build.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -24,21 +24,25 @@ jobs:
with:
python-version: "3.12"
enable-cache: true
cache-dependency-glob: "requirements.txt"
cache-dependency-glob: "python/requirements.txt"

- name: Install dependencies
working-directory: ./python
run: |
if [ -f requirements.txt ]; then uv pip install -r requirements.txt; fi
uv pip install pytest

- name: Install the package
working-directory: ./python
run: |
uv pip install .

- name: Test with pytest
working-directory: ./python
run: |
uv run pytest
PYTHONPATH=.. uv run pytest

- name: Check if the main script is installed
working-directory: ./python
run: |
uv run convert_jsondoc --help
4 changes: 4 additions & 0 deletions .github/workflows/publish.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,12 @@ jobs:
uses: astral-sh/setup-uv@v5

- name: Install dependencies
working-directory: ./python
run: |
uv pip install --system toml

- name: Extract version from tag and update pyproject.toml
working-directory: ./python
run: |
# Get the version from the tag (remove 'v' prefix)
TAG_VERSION=${GITHUB_REF#refs/tags/v}
Expand All @@ -58,11 +60,13 @@ jobs:
cat pyproject.toml | grep version

- name: Build package
working-directory: ./python
run: uv build --no-sources

- name: Publish package to PyPI
uses: pypa/[email protected]
with:
packages-dir: python/dist/
user: __token__
password: ${{ secrets.PYPI_API_TOKEN }}
verbose: true
4 changes: 3 additions & 1 deletion .github/workflows/test.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,12 @@ jobs:
uses: astral-sh/setup-uv@v5

- name: Install dependencies
working-directory: ./python
run: uv sync --all-extras --dev

- name: Run tests
working-directory: ./python
run: |
uv run pytest
PYTHONPATH=.. uv run pytest


3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,5 @@ __pycache__
build/
*.docx
*.pptx
scratch/
scratch/
dist/
12 changes: 12 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"eslint.useFlatConfig": true
}
130 changes: 130 additions & 0 deletions CLAUDE.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

JSON-DOC is a standardized format for storing structured content in JSON files, inspired by Notion's data model. It supports a wide variety of content types including paragraphs, headings, lists, tables, images, code blocks, and more.

The project consists of:
1. A JSON schema specification for the format
2. A Python implementation
3. A TypeScript implementation (in progress)
4. Converters for various formats (HTML, Markdown, etc.)

## Project Structure

- `/schema/`: JSON schemas defining the structure of JSON-DOC files
- `/python/`: Python implementation
- `/ts/`: TypeScript implementation (in progress)
- `/docs/`: Documentation
- `/examples/`: Example files showing the format
- `/tests/`: Tests for both implementations

## Development Commands

### Python Development

```bash
# Set up development environment
cd /Users/onur/tc/JSON-DOC/python
python -m pip install -e .
python -m pip install -e ".[dev]"

# Run tests
cd /Users/onur/tc/JSON-DOC/python
pytest

# Run a specific test
cd /Users/onur/tc/JSON-DOC/python
pytest tests/test_serialization.py -v

# Run validation tests
cd /Users/onur/tc/JSON-DOC/python
python tests/test_validation.py schema

# Run linting
cd /Users/onur/tc/JSON-DOC/python
ruff check .
ruff format .
```

### TypeScript Development

```bash
# Set up development environment
cd /Users/onur/tc/JSON-DOC/ts
npm install

# Build TypeScript
cd /Users/onur/tc/JSON-DOC/ts
npm run build

# Run tests
cd /Users/onur/tc/JSON-DOC/ts
npm test
```

## Architecture Overview

### JSON-DOC Schema

The JSON-DOC schema is defined in JSONSchema format, with the following primary components:

1. **Page**: The top-level container for all content
2. **Block**: Content blocks of various types (paragraph, heading, list item, etc.)
3. **Rich Text**: Text content with formatting (bold, italic, etc.)
4. **File**: External file references (images, etc.)

Each block type has specific schemas and validation rules.

### Python Implementation

The Python implementation uses Pydantic models for validation and serialization, with:

- Block types implemented as classes inheriting from a base Block class
- Rich text types implemented as classes inheriting from a base RichText class
- Serialization/deserialization functions for loading and saving JSON-DOC files
- Converters for HTML, Markdown, and other formats

Key modules:
- `jsondoc.models`: Pydantic models for JSON-DOC
- `jsondoc.serialize`: Functions for loading/saving JSON-DOC
- `jsondoc.validate`: Schema validation
- `jsondoc.convert`: Conversion between formats

### TypeScript Implementation

The TypeScript implementation is in progress, following similar architecture to the Python version:

- Type definitions for all JSON-DOC structures
- Functions for loading/saving JSON-DOC files
- Schema validation
- Converters for other formats

## Testing Strategy

- Schema validation tests ensure examples conform to schemas
- Serialization tests ensure round-trip conversion preserves data
- Conversion tests verify correct transformation between formats
- Integration tests for end-to-end workflows

## Implementation Notes

1. The project follows a modular architecture with clear separation between:
- Schema definition
- Model implementation
- Validation
- Serialization
- Conversion

2. The TypeScript implementation should follow the same patterns as the Python implementation, with appropriate adaptations for the TypeScript ecosystem.

3. The core functionality is focused on:
- Loading JSON-DOC files into typed objects
- Validating JSON-DOC files against schemas
- Converting between JSON-DOC and other formats


# Code generation guidelines
- don's assume things, if some things are clear, ask for clarification
22 changes: 22 additions & 0 deletions docs/2025-05-21-json-doc-ts-prompt.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
---
title: "Implementing JSON-DOC TypeScript parser"
author: "Onur <[email protected]>"
date: "2025-05-21"
---

A lot of coding agent products went into production recently, such as OpenAI Codex, Google Jules, Claude Code, etc. The TypeScript implementation is an ideal task, thanks to existing tests.

Below is the prompt:

```
Convert JSON Schemas into TS interfaces similar to what is in Python with datamodel-codegen. See https://github.com/bcherny/json-schema-to-typescript and https://github.com/ThomasAribart/json-schema-to-ts. Compare the two and choose the best option.

The interfaces MUST BE generated programmatically, just as how we do in Python. Understand the directory structure first, list, navigate and read files. Look at the json schema files under /schema, and compare them with the generated files in the python directory

We basically need to implement parsing of a JSON-DOC file into typed objects in typescript, similar to Python load_jsondoc() and similar functions

Note that we use uv for running python. There are example json-doc files and tests under /tests and github actions that make sure that the parsing and validation logic in python is correct

For a correct ts implementation, similar tests and checks need to be implemented. Make sure to use up-to-date typescript tooling and conventions. This library is supposed to be installed universally, keep that in mind. Do not use obscure or non-general tooling for packaging and distribution. Follow today's best practices
```

Loading
Loading