@pacem/pacem-core

The runtime core of the Pacem JS CustomElements-v1 ecosystem: the @CustomElement/@Watch decorators, the base element classes, property converters, the expression engine, the element prefix configuration, and ~40 foundational custom elements — proxies (event, style, template, meta, broadcast-channel, service-worker...), animations, drag/swipe/rotate/rescale behaviors, and data-binding primitives (pacem-if, pacem-repeater, pacem-data, pacem-router...) that every other @pacem/pacem-* package builds on.

Depends on @pacem/pacem-foundation.

Part of the Pacem JS ecosystem. Install @pacem/pacem instead if you want every package bundled together.

Installation

npm install @pacem/pacem-core

Usage

As an ES module

import { Components, Behaviors, Animations, Net, Logging } from '@pacem/pacem-core';
import { CustomElement, Watch, PropertyConverters } from '@pacem/pacem-core';

@CustomElement({ tagName: 'my-element' })
class MyElement extends Components.PacemElement {
    @Watch({ reflectBack: true, converter: PropertyConverters.String }) label: string;
}

In the browser, without a bundler

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

<pacem-data id="v0" model="4"></pacem-data>
<pacem-if match="{{ #v0.model % 2 === 0 }}">
    <pacem-text text="{{ #v0.model + ' is even.' }}"></pacem-text>
</pacem-if>

TypeScript

Typings ship in typings/index.d.ts and are resolved automatically via the package's exports field — both for the ES module import style and for the ambient Pacem global used by the plain <script> include above.

Custom elements

~40 elements, covering proxies, animations, behaviors, and data-binding primitives — see @pacem/pacem's dist/vscode.html-custom.json for the full, up-to-date list with attributes and editor IntelliSense support.

License

Apache-2.0 © Pacem