@pacem/pacem

Pacem JS is a CustomElements-v1 based ecosystem for reusable web components.

@pacem/pacem is the all-in-one bundle package: it re-exports every individual @pacem/pacem-* package under a single install, and ships pre-built browser bundles, an ESM bundle, rolled-up TypeScript typings, and an HTML editor IntelliSense data file. If you only need one or two capabilities (e.g. just ui and core), you can depend on those scoped packages directly instead — this package is the convenience wrapper around all of them.

Installation

npm install @pacem/pacem

Usage

As an ES module

import { Components } from '@pacem/pacem';

// custom element classes, grouped by originating package
const { PacemIconElement } = Components.UI;

Each capability is namespaced under its own export, so nothing collides even though every underlying package registers pacem-* custom elements globally as a side effect of being imported:

| Export | Package | |---|---| | Foundation | @pacem/pacem-foundation | | Numerical | @pacem/pacem-numerical | | Core | @pacem/pacem-core | | UI | @pacem/pacem-ui | | TwoD | @pacem/pacem-2d | | ThreeD | @pacem/pacem-3d | | Scaffolding | @pacem/pacem-scaffolding | | Charts | @pacem/pacem-charts | | Maps | @pacem/pacem-maps | | Cms | @pacem/pacem-cms | | Fx | @pacem/pacem-fx | | Media | @pacem/pacem-media | | Networking | @pacem/pacem-networking | | Plus | @pacem/pacem-plus | | Logging | @pacem/pacem-logging | | Components | every custom element class, merged from all of the above | | L10n | localization helpers (from scaffolding and plus) | | OpenApi | OpenAPI/Swagger helpers (from scaffolding and cms) |

In the browser, without a bundler

Each package also ships a self-contained, minified script under dist/browser/ that extends a shared window.Pacem global — just include the ones you need:

<script src="node_modules/@pacem/pacem/dist/browser/pacem-foundation.min.js"></script>
<script src="node_modules/@pacem/pacem/dist/browser/pacem-core.min.js"></script>
<script src="node_modules/@pacem/pacem/dist/browser/pacem-ui.min.js"></script>

<pacem-icon icon="star"></pacem-icon>

TypeScript

Typings are resolved automatically (types/exports.types point at dist/typings/index.d.ts), covering both the ES module import style and the ambient Pacem global used by the plain <script> include above:

import { Components } from '@pacem/pacem';

let el: Components.UI.PacemIconElement;   // via the module
let el2: Pacem.Components.UI.PacemIconElement; // via the ambient global, no import needed

HTML IntelliSense

dist/vscode.html-custom.json describes every <pacem-*> custom element and its attributes in the VS Code HTML custom-data format, including which @pacem/pacem-* package each one comes from. Point VS Code at it to get tag/attribute completion while editing markup:

// .vscode/settings.json
{
  "html.customData": ["./node_modules/@pacem/pacem/dist/vscode.html-custom.json"]
}

License

Apache-2.0 © Pacem