@c2n/components
Every c2n web component, in the one package c2n publishes for them.
npm install @c2n/components
The components are built in this repository as separate workspace packages, but only this package is published: it bundles all of them. Each entry is a separate module and what entries share sits in common chunks, so an application that imports three components ships those three and what they use. Its dependencies are what the bundle still imports: Lit, @c2n/core, @c2n/theme, the icon sets two components draw with, and the third-party libraries of a few components (Shiki, ProseMirror, d3-geo, …).
Entries
| Import | What it gives you |
|---|---|
@c2n/components/<name> | One component: its classes and types, and it registers each of its elements |
@c2n/components | Every component, registered at once |
@c2n/components/react | JSX types for every c2-* tag |
@c2n/components/vue | Volar template types for every c2-* tag |
@c2n/components/theme.css | The base theme (base.css and tokens.css separately, as in @c2n/theme) |
import '@c2n/components/theme.css'
import '@c2n/components/table'
import '@c2n/components/select'
import type { TableRow } from '@c2n/components/table'
<name> is the component's name: @c2n/components/text-field for c2-text-field, @c2n/components/chart for every chart element.
Prefer the per-component entries in an application you ship. Registering a custom element is a side effect, so no bundler can drop one that is never used: import '@c2n/components' puts every component in the bundle. The barrel suits prototypes, internal tools and a <script type="module"> from a CDN.
React and Vue
// src/c2-elements.d.ts
import '@c2n/components/react' // or '@c2n/components/vue'
These declare every tag, with props and events typed from the element classes. The rules each framework needs followed (register the elements before the first render, kebab-case attribute names in server-rendered React, the isCustomElement option in Vue) are in the Frameworks guide.
Not included
- Icon sets.
@c2n/feather-icons,@c2n/phosphor-iconsand@c2n/symbolsare one element per icon (Phosphor alone is 1,512), so they stay their own install. - Optional engines.
c2-*-chartrenders withuplotorecharts,c2-code-editorwith CodeMirror andc2-mermaid(with the diagrams inc2-markdown) withmermaid. They are optional peer dependencies: install the ones you use.
Maintaining this package
The component packages (packages/components/*, open-packages/*) are private workspaces. Everything here except this README, scripts/ and the hand-written fields of package.json (name, description, scripts, …) is generated:
npm run build -w packages/tools/framework-typeswrites the bundle inputs undersrc/(one entry per component package, the barrel, the React and Vue declarations), the three stylesheets, and theexports,files,customElements,dependencies,peerDependenciesanddevDependenciesofpackage.json. A new component package joins the next time it runs; CI fails when the committed output is stale.npm run build -w packages/umbrella(scripts/bundle.ts) buildsdist/fromsrc/with Vite, inlining the workspace packages, copies their declarations underdist/types/with@c2n/<name>specifiers rewritten to relative paths, and merges their manifests intocustom-elements.json. It fails when the bundle imports a packagepackage.jsondoes not list.prepackruns it, sonpm packandlerna publishalways ship a fresh build.
npm run type-check -w packages/umbrella compiles the bundled declarations with skipLibCheck off, which is what reports two packages exporting the same name from the barrel, and type-checks the React and Vue fixtures in test/. test/umbrella.spec.ts imports the barrel in a browser and checks that every tag in the merged manifest is registered.