fix packaging issues (typings)

ULB-Darmstadt · Nov 2, 2023 · 1663a1b · 1663a1b
1 parent 13dc39f
commit 1663a1b
Show file tree

Hide file tree

Showing 23 changed files with 565 additions and 319 deletions.
diff --git a/README.md b/README.md
@@ -13,7 +13,7 @@ An HTML5 web component for editing/viewing [RDF](https://www.w3.org/RDF/) data t
 <html>
   <head>
     <!-- load web component -->
-    <script src="https://cdn.jsdelivr.net/npm/@ulb-darmstadt/shacl-form/dist/index.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@ulb-darmstadt/shacl-form/dist/form-default.js" type="module"></script>
   </head>
   <body>
     <!--
@@ -63,7 +63,7 @@ data-language | Language to use if shapes contain langStrings, e.g. in `sh:name`
 data-loading | Text to display while the web component is initializing. Default: `"Loading..."`
 data&#x2011;ignore&#x2011;owl&#x2011;imports | By default, `owl:imports` URLs are fetched and the resulting RDF triples are added to the shapes graph. Setting this attribute to any value disables this feature
 data-mode | When set to `"view"`, turns the web component into a viewer that displays the given data graph without editing functionality
-data-collapse | When this attribute is present, `sh:group`s and properties with `sh:node` and `sh:maxCount` > 1 are displayed in a collapsible accordion-like widget to reduce visual complexity of the form. The collapsible element is initially shown closed, except when the attribute value is `"open"`
+data-collapse | When this attribute is present, `sh:group`s and properties with `sh:node` and `sh:maxCount` > 1 are displayed in a collapsible accordion-like widget to reduce visual complexity of the form. The collapsible element is initially shown closed, except when this attribute's value is `"open"`
 data-submit-button | [Only used in edit mode] Whether to add a submit button to the form. The value of this attribute is used as the button label. `submit` events will only fire after successful validation
 
 ### Element functions
@@ -101,8 +101,8 @@ Class hierarchies can be built using `rdfs:subClassOf` or `skos:broader`.
 
 Theme | Import statement
 --- | ---
-Default (custom CSS) | `import '@ulb-darmstadt/shacl-form/index.js'`
-[Bootstrap](./src/themes/bootstrap.ts) [alpha status] | `import '@ulb-darmstadt/shacl-form/bootstrap.js'`
-[Material Design](./src/themes/material.ts) [alpha status] | `import '@ulb-darmstadt/shacl-form/material.js'`
+Default (slightly customized default browser styles) | `import '@ulb-darmstadt/shacl-form/form-default.js'`
+[Bootstrap](./src/themes/bootstrap.ts) [alpha status] | `import '@ulb-darmstadt/shacl-form/form-bootstrap.js'`
+[Material Design](./src/themes/material.ts) [alpha status] | `import '@ulb-darmstadt/shacl-form/form-material.js'`
 
 Custom themes can be employed by extending class [Theme](./src/theme.ts), then calling function `setTheme()` on the `<shacl-form>` element.
diff --git a/demo/theme-bootstrap.html b/demo/theme-bootstrap.html
@@ -8,7 +8,7 @@
             }
             body { font-family: sans-serif; }
         </style>
-        <script type="module" src="https://cdn.jsdelivr.net/npm/@ulb-darmstadt/shacl-form/dist/bootstrap.js"></script>
+        <script type="module" src="https://cdn.jsdelivr.net/npm/@ulb-darmstadt/shacl-form/dist/form-bootstrap.js"></script>
     </head>
     <body>
         <shacl-form id="shacl-form" data-shapes-url="complex-example.ttl" data-submit-button></shacl-form>

diff --git a/demo/theme-default.html b/demo/theme-default.html
@@ -4,7 +4,7 @@
         <style>
             body { font-family: sans-serif; }
         </style>
-        <script type="module" src="https://cdn.jsdelivr.net/npm/@ulb-darmstadt/shacl-form/dist/index.js"></script>
+        <script type="module" src="https://cdn.jsdelivr.net/npm/@ulb-darmstadt/shacl-form/dist/form-default.js"></script>
     </head>
     <body>
         <shacl-form id="shacl-form" data-shapes-url="complex-example.ttl" data-submit-button></shacl-form>

diff --git a/demo/theme-material.html b/demo/theme-material.html
@@ -5,7 +5,7 @@
             body { font-family: sans-serif; }
         </style>
         <link href=" https://cdn.jsdelivr.net/npm/[email protected]/css/fonts.min.css " rel="stylesheet">
-        <script type="module" src="https://cdn.jsdelivr.net/npm/@ulb-darmstadt/shacl-form/dist/material.js"></script>
+        <script type="module" src="https://cdn.jsdelivr.net/npm/@ulb-darmstadt/shacl-form/dist/form-material.js"></script>
     </head>
     <body>
         <shacl-form id="shacl-form" data-shapes-url="complex-example.ttl" data-submit-button></shacl-form>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,10 +1,10 @@
 {
     "name": "@ulb-darmstadt/shacl-form",
-    "version": "1.2.2",
+    "version": "1.3.0",
     "description": "SHACL form generator",
-    "main": "dist/index.js",
-    "module": "dist/index.js",
-    "types": "dist/index.d.ts",
+    "main": "dist/form-default.js",
+    "module": "dist/form-default.js",
+    "types": "dist/form-default.d.ts",
     "files": [
         "dist"
     ],
@@ -30,7 +30,11 @@
         "serve": "webpack serve --mode development"
     },
     "devDependencies": {
+        "@types/jsonld": "^1.5.11",
+        "@types/mapbox__mapbox-gl-draw": "^1.4.5",
         "@types/n3": "^1.16.0",
+        "@types/rdf-validate-shacl": "^0.4.5",
+        "@types/uuid": "^9.0.6",
         "raw-loader": "^4.0.2",
         "rimraf": "^5.0.1",
         "ts-loader": "^9.4.4",
@@ -40,13 +44,13 @@
         "webpack-dev-server": "^4.15.1"
     },
     "dependencies": {
-        "@mapbox/mapbox-gl-draw": "^1.4.2",
+        "@mapbox/mapbox-gl-draw": "^1.4.3",
         "@material/web": "^1.0.1",
         "bootstrap": "^5.3.2",
         "jsonld": "^8.3.1",
         "mapbox-gl": "^2.15.0",
-        "n3": "^1.17.0",
-        "rdf-validate-shacl": "^0.4.5",
-        "uuid": "^9.0.0"
+        "n3": "^1.17.2",
+        "rdf-validate-shacl": "^0.5.1",
+        "uuid": "^9.0.1"
     }
 }
diff --git a/src/config.ts b/src/config.ts
@@ -41,12 +41,13 @@ export class Config {
     }
 
     updateAttributes(elem: HTMLElement) {
-        const atts = new ElementAttributes()
-        for (const key of Object.keys(atts)) {
-            if (elem.dataset[key] !== undefined) {
-                atts[key] = elem.dataset[key]
+        const atts = new ElementAttributes();
+        (Object.keys(atts) as Array<keyof ElementAttributes>).forEach(key => {
+            const value = elem.dataset[key]
+            if (value !== undefined) {
+                atts[key] = value
             }
-        }
+        })
         this.editMode = atts.mode !== 'view'
         this.attributes = atts
     }

diff --git a/src/exports.ts b/src/exports.ts
@@ -0,0 +1,3 @@
+export { Theme, InputListEntry, Editor } from "./theme"
+export { Plugin } from './plugin'
+
diff --git a/src/form-bootstrap.ts b/src/form-bootstrap.ts
@@ -1,10 +1,12 @@
-import { ShaclForm } from "./form"
+import { ShaclForm as FormBase } from "./form"
 import { BootstrapTheme } from "./themes/bootstrap"
 
-export class ShaclFormElement extends ShaclForm {
+export * from './exports'
+
+export class ShaclForm extends FormBase {
     constructor() {
         super(new BootstrapTheme())
     }
 }
 
-window.customElements.define('shacl-form', ShaclFormElement)
+window.customElements.define('shacl-form', ShaclForm)
diff --git a/src/form-default.ts b/src/form-default.ts
@@ -0,0 +1,12 @@
+import { ShaclForm as FormBase } from "./form"
+import { DefaultTheme } from "./themes/default"
+
+export * from './exports'
+
+export class ShaclForm extends FormBase {
+    constructor() {
+        super(new DefaultTheme())
+    }
+}
+
+window.customElements.define('shacl-form', ShaclForm)
diff --git a/src/form-material.ts b/src/form-material.ts
@@ -1,10 +1,12 @@
-import { ShaclForm } from "./form"
+import { ShaclForm as FormBase } from "./form"
 import { MaterialTheme } from "./themes/material"
 
-export class ShaclFormElement extends ShaclForm {
+export * from './exports'
+
+export class ShaclForm extends FormBase {
     constructor() {
         super(new MaterialTheme())
     }
 }
 
-window.customElements.define('shacl-form', ShaclFormElement)
+window.customElements.define('shacl-form', ShaclForm)
diff --git a/src/form-native.ts b/src/form-native.ts
diff --git a/src/form.ts b/src/form.ts
@@ -157,18 +157,20 @@ export class ShaclForm extends HTMLElement {
 
         for (const result of report.results) {
             // result.path can be null, e.g. if a focus node does not contain a required property node
+            const focusNode = result.focusNode as NamedNode
             if (result.path) {
+                const path = result.path as NamedNode
                 // try to find most specific editor elements first
-                let invalidElements = this.form.querySelectorAll(`:scope [data-node-id='${result.focusNode.id}'] [data-path='${result.path.id}'] > .editor`)
+                let invalidElements = this.form.querySelectorAll(`:scope [data-node-id='${focusNode.id}'] [data-path='${path.id}'] > .editor`)
                 if (invalidElements.length === 0) {
                     // if no editors found, select respective node. this will be the case for node shape violations.
-                    invalidElements = this.form.querySelectorAll(`:scope [data-node-id='${result.focusNode.id}'] [data-path='${result.path.id}']`)
+                    invalidElements = this.form.querySelectorAll(`:scope [data-node-id='${focusNode.id}'] [data-path='${path.id}']`)
                 }
 
                 for (const invalidElement of invalidElements) {
                     if (invalidElement.classList.contains('editor')) {
                         // this is a property shape violation
-                        if (!ignoreEmptyValues || invalidElement['value']) {
+                        if (!ignoreEmptyValues || (invalidElement as Editor).value) {
                             let parent: HTMLElement | null = invalidElement.parentElement!
                             parent.classList.add('invalid')
                             parent.classList.remove('valid')
@@ -188,7 +190,7 @@ export class ShaclForm extends HTMLElement {
                     }
                 }
             } else if (!ignoreEmptyValues) {
-                this.form.querySelector(`:scope [data-node-id='${result.focusNode.id}']`)?.prepend(this.createValidationErrorDisplay(result, 'node'))
+                this.form.querySelector(`:scope [data-node-id='${focusNode.id}']`)?.prepend(this.createValidationErrorDisplay(result, 'node'))
             }
         }
         return report.conforms

diff --git a/src/loader.ts b/src/loader.ts
@@ -1,5 +1,5 @@
 import { Store, Parser, Quad, Prefixes, NamedNode } from 'n3'
-import * as jsonld from 'jsonld'
+import { toRDF } from 'jsonld'
 import { OWL_IMPORTS, SHACL_PREDICATE_CLASS, SHAPES_GRAPH } from './constants'
 import { Config } from './config'
 import { isURL } from './util'
@@ -84,7 +84,8 @@ export class Loader {
         if (input) {
             try {
                 // check if input is JSON
-                input = jsonld.toRDF(JSON.parse(input), {format: 'application/n-quads'}) as string
+                // @ts-ignore, because result of toRDF is a string and not an object
+                input = await toRDF(JSON.parse(input), {format: 'application/n-quads'}) as string
             } catch(_) {
                 // NOP, it wasn't JSON
             }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		export { Theme, InputListEntry, Editor } from "./theme"
		export { Plugin } from './plugin'