ember-prismic-dom

ember-prismic-dom

Easy Prismic rendering in Ember.js.

<Prismic::Dom @nodes={{@prismicData}} />

Compatibility

• Ember.js v4.4 or above
• Ember CLI v4.4 or above
• Node.js v18 or above
• TypeScript v5 or above

Installation

ember install ember-prismic-dom

Usage

<Prismic::Dom @nodes={{@myPrismicDoc.data.myRichText}} />

onUnknownTag

Additionally you can pass an onUnknownTag action to handle receiving data of a type Prismic::Dom can't render.

<Prismic::Dom
  @nodes={{@myPrismicDoc.data.myRichText}}
  @onUnknownTag={{this.onUnknownTag}}
/>

import Component from "@glimmer/component";
import { action } from "@ember/object";

export default class MyComponent extends Component {
  @action
  onUnknownTag(node) {
    console.error(`Could not render ${node.type}`);
  }
}

Custom Rendering

Pass a custom component name to be used to render a prismic type. For example to custom render the group-list-item and hyperlink types

<Prismic::Dom
  @group-list-item="my-list"
  @hyperlink="my-hyperlink"
  @nodes={{@myPrismicDoc.data.myRichText}}
/>

my-list.hbs

<h1>My List</h1>
<ul>{{yield}}</ul>

my-hyperlink.hbs

<a href={{@node.node.data.url}}>{{yield}}</a>

Use existing addons

For example you want to use ember-async-image

<Prismic::Dom @nodes={{@nodes}} @image='image'>

image.hbs

<AsyncImage src={{@node.node.url}} />

Migrating from prismic-dom

<Prismic::Dom/> replaces prismic-dom , please see this blog post for more information.

In place of:

import Component from "@glimmer/component";
import PrismicDOM from "prismic-dom";

export default class MyComponent extends Component {
  get html() {
    return PrismicDOM.RichText.asHtml(this.args.myPrismicDoc.data.myRichText);
  }
}

{{{this.html}}}

Use this:

<Prismic::Dom @nodes={{@myPrismicDoc.data.myRichText}} />

TypeScript usage

Each component has proper Glint types, which allow you to get strict type checking in your templates when using TypeScript.

Unless you are using strict mode templates (via first class component templates), you need to import the addon's Glint template registry entries as described in the Using Addons documentation:

// e.g. types/glint.d.ts
import "@glint/environment-ember-loose";
import type PrismicDomRegistry from "ember-prismic-dom/template-registry";

declare module "@glint/environment-ember-loose/registry" {
  export default interface Registry
    extends PrismicDomRegistry /* other addon registries */ {
    // local entries
  }
}

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

Changelog

v5.0.0-beta.0 (2023-11-28)

:boom: Breaking Change

• #115 feat: drop node v16 (@vscav)

:rocket: Enhancement

• #132 refactor: migrate test app package to TypeScript (@michelegera)
• #116 refactor: migrate addon package to TypeScript (@michelegera)
• #88 refactor: use variable assignment and bound value instead of {{component}} helper (@vscav)

:memo: Documentation

• #40 chore: remove documentation for missing pnpm test:watch command (@michelegera)

:house: Internal

• #89 feat: setup TypeScript (@vscav)
• #29 chore: add dependabot configuration (@vscav)
• #28 ci: update action-setup-pnpm to v3 (@dannycalleri)
• #27 fix: remove double pnpm installation (@vscav)
• #26 fix: remove double node installation on CI (@vscav)

Committers: 3

• Danny Calleri (@dannycalleri)
• Michele Gerarduzzi (@michelegera)
• Vincent Scavinner (@vscav)