@rdfjs-elements/lit-helpers

Useful utilities for using lit-html and LitElement together with RDF/JS objects.

localizedLabel directive

Use it to render resource's label of tagged literals by selecting the object matching user's preferred locale.

taggedLiteral directive

Similar to localizedLabel but its argument is a pointer to a literal and not resource pointer.

All usages in a page will use the same language setting, which be default is to select the best matching literals prioritised according to the navigator.languages property.

Usage

All examples use assume these resources

prefix sh: <http://www.w3.org/ns/shacl#>
prefix ex: <http://example.org/>
prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>

<apple>
  a ex:Apple ;
  rdfs:label "Apple"@en, "Apfel"@de, "Jabłko"@pl ;
.

<Fruit>
  a sh:NodeShape ;
  sh:property [ sh:name "name"@en, "Name"@de, "Nazwa"@pl ] ;
.

Basic usage of localizedLabel

To render the rdfs:label using the browser's default setting

import { html } from 'lit'
import { localizedLabel } from '@rdfjs-elements/lit-helpers/localizedLabel.js'
import type { GraphPointer } from 'clownface'

let apple: GraphPointer

function render() {
  // renders apple's rdfs:label property
  return html`<span>${localizedLabel(apple, { fallback: 'a fruit' })}</span>`
}

The second parameter is optional. fallback will be rendered if no label was found

Basic usage of taggedLiteral

Similar to the above but useful when only a direct literal pointer is available

import { html } from 'lit'
import { taggedLiteral } from '@rdfjs-elements/lit-helpers/taggedLiteral.js'
import type { GraphPointer } from 'clownface'

let apple: GraphPointer
let label = apple.out(rdfs.label)

function render() {
  // renders apple's rdfs:label property
  return html`<span>${taggedLiteral(label, { fallback: 'a fruit' })}</span>`
}

The second parameter is optional. fallback will be rendered if no label was found

Using localizedLabel different predicate

Pass second argument to use a different predicate

import { html } from 'lit'
import { localizedLabel } from '@rdfjs-elements/lit-helpers/localizedLabel.js'
import type { GraphPointer } from 'clownface'
import { sh } from '@tpluscode/rdf-ns-builders'

let fruit: GraphPointer

function render() {
  // renders PropertyShape's sh:name property
  return html`<span>${localizedLabel(fruit.out(sh.property), { property: sh.name })}</span>`
}

Switching language

At any point during page's lifecycle the language can be changed by calling the setLanguages function. It will automatically update all occurrences of taggedLiteral and localizedLabel directives on a page to reflect the new priority of languages.

import { html } from 'lit'
import { localizedLabel } from '@rdfjs-elements/lit-helpers/localizedLabel.js'
import { setLanguages } from '@rdfjs-elements/lit-helpers'
import type { GraphPointer } from 'clownface'

let apple: GraphPointer

function render() {
  // renders apple's rdfs:label property using current langauges
  return html`<span>${localizedLabel(apple)}</span>`
}

// switch to Swiss German or German
setLanguages('de-CH', 'de')

Using localizedLabel with rdfine objects

import { html } from 'lit'
import { localizedLabel } from '@rdfjs-elements/lit-helpers/localizedLabel.js'
import type { GraphPointer } from 'clownface'
import Environment from '@zazuko/env/Environment.js'
import RdfineEnv from '@rdfine/env'
import Shacl from '@rdfine/shacl/Factory'

const env = new Environment([Shacl], { parent: RdfineEnv })

let fruitPointer: GraphPointer
const fruit = env.rdfine.sh.NodeShape(fruitPointer)

function render() {
  // renders PropertyShape's sh:name property
  return html`<span>${localizedLabel(fruit.property[0], { property: sh.name })}</span>`
}