OpenZeppelin / OpenZeppelin/openzeppelin-ui
feat(components): add TypeScript, JavaScript, and Solidity to CodeView
Nobody has claimed this yet.
- 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:
- Widen
CodeViewLanguage/CODE_VIEW_LANGUAGES/isCodeViewLanguage. - Register grammars with
createLowlight({ … }). - 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-solidityis 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 withhljs-*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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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