@ulb-darmstadt/shacl-form 1.6.0 → 1.6.2

package/README.md

@@ -22,9 +22,9 @@ HTML5 web component for editing/viewing [RDF](https://www.w3.org/RDF/) data that
       or can be loaded by setting attribute 'data-shapes-url'
     -->
     <shacl-form data-shapes="
-      @prefix sh: <http://www.w3.org/ns/shacl#> .
-      @prefix rdfs:    <http://www.w3.org/2000/01/rdf-schema#> .
-      @prefix ex: <http://example.org#> .
+      @prefix sh:   <http://www.w3.org/ns/shacl#> .
+      @prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .
+      @prefix ex:   <http://example.org#> .
 
       ex:ExampleShape
         a sh:NodeShape, rdfs:Class ;
@@ -74,16 +74,15 @@ data-show-node-ids | When this attribute is set, shacl node shapes will have the
 
 ### Element functions
 
+<a id="toRDF"></a>
 ```typescript
 toRDF(graph?: Store): Store
 ```
-
 Adds the form values as RDF triples to the given graph. If no graph object is provided, creates a new [N3 Store](https://github.com/rdfjs/N3.js#storing).
 
 ```typescript
 serialize(format?: string, graph?: Store): string
 ```
-
 Serializes the given RDF graph to the given format. If no graph object is provided, this function calls toRDF() (see above) to construct the form data graph. <a name="formats"></a>Supported formats:  `text/turtle` (default), `application/ld+json`, `application/n-triples`, `application/n-quads`, `application/trig`.
 
 ```typescript
@@ -100,14 +99,16 @@ Register a [plugin](./src/plugin.ts) to customize editing/viewing certain proper
 setTheme(theme: Theme)
 ```
 Set a design theme to use for rendering. See section [Theming](#Theming).
+
 ```typescript
 setClassInstanceProvider((className: string) => Promise<string>)
 ```
-Sets a callback function that is called when a SHACL property has an `sh:class` definition. The expected return value is a string (e.g. in format `text/turtle`) that contains RDF class instance definitions of the given class. Instances can be defined e.g. like:
-- `example:Instance a example:Class`
-- `example:Instance a owl:NamedIndividual; skos:broader example:Class`
+Sets a callback function that is invoked when a SHACL property has an `sh:class` definition to retrieve class instances. See [below](#classInstanceProvider) for more information.
 
-Class hierarchies can be built using `rdfs:subClassOf` or `skos:broader`.
+```typescript
+setSharedShapesGraph(graph: Store)
+```
+Set an externally managed shapes graph to use. This improves performance When using multiple instances of `shacl-form` on the same page.
 
 ## Features
 
@@ -126,7 +127,7 @@ In edit mode, `<shacl-form>` validates the constructed data graph using the libr
 ### Providing additional data to the shapes graph
 
 Apart from setting the element attributes `data-shapes` or `data-shapes-url`, there are two ways of adding RDF data to the shapes graph:
-1. While parsing the triples of the shapes graph, any encountered `owl:imports` predicate that has a valid HTTP URL value will tried to be fetched with the HTTP Accept header set to all of the [supported](#formats) MIME types. A successful response will be parsed and added to the shapes graph. The [example shapes graph](https://ulb-darmstadt.github.io/shacl-form/#example) contains the following triples:
+1. While parsing the triples of the shapes graph, any encountered `owl:imports` predicate that has a valid HTTP URL value will be tried to fetch with the HTTP Accept header set to all of the [supported](#formats) MIME types. A successful response will be parsed and added to the shapes graph. The [example shapes graph](https://ulb-darmstadt.github.io/shacl-form/#example) contains the following triples:
     ```
     example:Attribution
       owl:imports <https://w3id.org/nfdi4ing/metadata4ing/> ;
@@ -138,7 +139,7 @@ Apart from setting the element attributes `data-shapes` or `data-shapes-url`, th
     ```
     In this case, the URL references an ontology which among other things defines instances of class `prov:Role` that are then used to populate the "Role" dropdown in the form.
 
-2. The `<shacl-form>` element has a function `setClassInstanceProvider((className: string) => Promise<string>)` that registers a callback function which is invoked when a SHACL property has
+2. <a id="classInstanceProvider"></a>The `<shacl-form>` element has a function `setClassInstanceProvider((className: string) => Promise<string>)` that registers a callback function which is invoked when a SHACL property has
 an `sh:class` predicate. The expected return value is a (promise of a) string (e.g. in format `text/turtle`) that contains RDF class instance definitions of the given class. Instances can be defined e.g. like:
     - `example:Instance a example:Class`
     - `example:Instance a owl:NamedIndividual; skos:broader example:Class`
@@ -218,7 +219,7 @@ Apart from grouped properties, all properties having an `sh:node` predicate and
 
 ### Use with Solid Pods
 
-`<shacl-form>` can easily be integrated with [Solid Pods](https://solidproject.org/about). The output of `toRDF()` being a RDFJS N3 Store, as explained above, it can be presented to `solid-client`s `fromRdfJsDataset()` function, which converts the RDF Graph into a Solid Dataset. The following example, based on Inrupt's basic [Solid Pod Example](https://docs.inrupt.com/developer-tools/javascript/client-libraries/tutorial/getting-started/) shows how to merge data from a `<shacl-form>` with a Solid Data Resource at `readingListDataResourceURI`:
+`<shacl-form>` can easily be integrated with [Solid Pods](https://solidproject.org/about). The output of `toRDF()` being a RDF/JS N3 Store, as explained [above](#toRDF), it can be presented to `solid-client`s `fromRdfJsDataset()` function, which converts the RDF graph into a Solid Dataset. The following example, based on Inrupt's basic [Solid Pod example](https://docs.inrupt.com/developer-tools/javascript/client-libraries/tutorial/getting-started/) shows how to merge data from a `<shacl-form>` with a Solid data resource at `readingListDataResourceURI`:
  
 ```js
   // Authentication is assumed, resulting in a fetch able to read and write into the Pod
@@ -226,7 +227,7 @@ Apart from grouped properties, all properties having an `sh:node` predicate and
     // Get data out of the shacl-form
     const form = document.querySelector('shacl-form')
 
-    // Extract the RDF Graph from the form
+    // Extract the RDF graph from the form
     const shaclFormGraphStore = await form.toRDF()
 
     // Convert RDF store into a Solid dataset
@@ -235,7 +236,7 @@ Apart from grouped properties, all properties having an `sh:node` predicate and
     // First get the current dataset
     myReadingList = await getSolidDataset(readingListDataResourceURI, { fetch: fetch })
 
-    // get all Things from the shaclFormDataset
+    // get all things from the shaclFormDataset
     const shaclFormThings = getThingAll(shaclFormDataset)
 
     // add the things from ShaclForm to the existing set

package/dist/exports.d.ts

@@ -1,5 +1,5 @@
 export { Theme, InputListEntry, Editor } from './theme';
-export { Loader } from './loader';
+export { Loader, setSharedShapesGraph } from './loader';
 export { Config } from './config';
 export { Plugin, registerPlugin } from './plugin';
 export { ShaclPropertyTemplate } from './property-template';