OpenZeppelin / OpenZeppelin/openzeppelin-ui

feat(components): add TypeScript, JavaScript, and Solidity to CodeView

Open
#226 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

cla: allowlist enhancement
Dominant language
TypeScript
Stars
7
Forks
3
Avg merge
20h 20m
Merged PRs (30d)
26

Description

Summary

Extend @openzeppelin/ui-components/code-view so hosts can highlight TypeScript, JavaScript, and especially Solidity, in addition to the current closed set (rust, toml, shell, json, markdown, plaintext).

No consumer-supplied themes or color configuration — just widen the kit’s supported language union and register the grammars.

Related: preview primitives land in #225. Per-language tree-shaking: #227.

Motivation

CodeView’s language union is intentionally closed around RWA/codegen-style outputs. Wizard and other OZ apps also show Solidity, TypeScript, and JavaScript sources; those currently fall through to plaintext (or can’t be typed as CodeViewLanguage at all).

Proposed approach

Same pattern as today’s private registry in packages/components/src/components/ui/code-view/highlight.ts:

  1. Widen CodeViewLanguage / CODE_VIEW_LANGUAGES / isCodeViewLanguage.
  2. Register grammars with createLowlight({ … }).
  3. Add samples + expected hljs-* class fixtures; update docs + changeset (minor of @openzeppelin/ui-components).
TypeScript / JavaScript
  • Both ship in highlight.js 11 (highlight.js/lib/languages/typescript, javascript).
  • Low effort: static imports + union members + tests/docs.
  • Prefer two union members ('typescript' | 'javascript') rather than overloading one id.
Solidity (priority)
  • Not in highlight.js 11 core.
  • Community package highlightjs-solidity is not compatible with highlight.js 11 (open upstream issues for v11).
  • Needs either:
    • an hljs-11-ready grammar (port / fork / wait on upstream), then register with lowlight, or
    • a short design note if we temporarily ship Solidity as a documented gap.

Do not swap highlighters only for Solidity.

Acceptance criteria

  • language="typescript" | "javascript" | "solidity" type-checks and highlights representative fixtures with hljs-* classes.
  • Unsupported / invalid ids still fail soft to plaintext.
  • Docs (docs/code-view/*) list the new members and any Solidity grammar provenance.
  • Changeset: minor for @openzeppelin/ui-components.
  • Package boundary / subpath bundling unchanged: grammars still only on ./code-view, not the main entry.

Out of scope

  • Consumer-registered grammars or custom themes.
  • Per-language tree-shaking (#227).
  • Filename / auto language detection.

Notes

Adding languages grows the shared ./code-view chunk for every CodeView consumer until #227 lands. That is acceptable for this issue; call out size in the PR if the Solidity grammar is large.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in packages/components/src/components/ui/code-view/highlight.ts and inspect the current language union, registry, and validation path. Review the existing CodeView samples and fixtures, then update the relevant docs under docs/code-view and add the required changeset. Done means the three language ids type-check, representative fixtures produce hljs-* classes, invalid ids remain plaintext, and the ./code-view boundary is unchanged.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, solidity, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.