build: babel before d.ts

.changeset/poor-beans-rhyme.md

@@ -0,0 +1,11 @@
+---
+"@hydrofoil/shaperone-core": patch
+"@hydrofoil/shaperone-hydra": patch
+"@hydrofoil/shaperone-rdf-validate-shacl": patch
+"@hydrofoil/shaperone-wc": patch
+"@hydrofoil/shaperone-wc-material": patch
+"@hydrofoil/shaperone-wc-shoelace": patch
+"@hydrofoil/shaperone-wc-vaadin": patch
+---
+
+One more build fix, where babel tried to compile `.d.ts` files

.github/workflows/build.yml

@@ -23,6 +23,7 @@ jobs:
       - run: yarn install --ci
       - run: yarn tsc --noEmit
       - run: yarn build
+      - run: yarn prerelease
 
   test:
     runs-on: ubuntu-latest

package.json

@@ -9,7 +9,9 @@
     "test": "run-p test:*",
     "test:core": "c8 --all -o coverage/core --reporter=lcov mocha --recursive 'packages/core-tests/**/*.test.ts'",
     "test:web": "web-test-runner",
-    "prerelease": "tsc --declaration --emitDeclarationOnly",
+    "build:js": "wsrun -m babel",
+    "build:dts": "tsc --declaration --emitDeclarationOnly",
+    "prerelease": "run-s build:*",
     "release": "changeset publish",
     "docs": "docsify serve ./dist",
     "typedoc": "typedoc --watch",

packages/core/package.json

@@ -9,7 +9,7 @@
     "**/*.d.ts"
   ],
   "scripts": {
-    "prepack": "babel . --out-dir . --extensions .ts --config-file ../../babel.config.json"
+    "babel": "babel . --out-dir . --extensions .ts --config-file ../../babel.config.json"
   },
   "dependencies": {
     "@captaincodeman/rdx": "^1.0.0-rc.8",

packages/hydra/package.json

@@ -9,7 +9,7 @@
     "**/*.d.ts"
   ],
   "scripts": {
-    "prepack": "babel . --out-dir . --extensions .ts --config-file ../../babel.config.json"
+    "babel": "babel . --out-dir . --extensions .ts --config-file ../../babel.config.json"
   },
   "dependencies": {
     "@hydrofoil/shaperone-core": "^0.9.8",

packages/rdf-validate-shacl/package.json

@@ -8,7 +8,7 @@
     "**/*.d.ts"
   ],
   "scripts": {
-    "prepack": "babel . --out-dir . --extensions .ts --config-file ../../babel.config.json"
+    "babel": "babel . --out-dir . --extensions .ts --config-file ../../babel.config.json"
   },
   "dependencies": {
     "rdf-validate-shacl": "zazuko/rdf-validate-shacl#bnodes-clash"

packages/wc-material/package.json

@@ -10,7 +10,7 @@
     "custom-elements.json"
   ],
   "scripts": {
-    "prepack": "babel . --out-dir . --extensions .ts --config-file ../../babel.config.json",
+    "babel": "babel . --out-dir . --extensions .ts --config-file ../../babel.config.json",
     "analyze": "run-p analyze:*",
     "analyze:wc": "wca --format json --outFile ./custom-elements.json",
     "analyze:readme": "wca --outFile ./README.md",

packages/wc-shoelace/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.13",
   "type": "module",
   "scripts": {
-    "prepack": "babel . --out-dir . --extensions .ts --config-file ../../babel.config.json",
+    "babel": "babel . --out-dir . --extensions .ts --config-file ../../babel.config.json",
     "analyze": "run-p analyze:*",
     "analyze:wc": "wca --format json --outFile ./custom-elements.json",
     "analyze:readme": "wca --outFile ./README.md",

packages/wc-vaadin/package.json

@@ -9,7 +9,7 @@
     "**/*.d.ts"
   ],
   "scripts": {
-    "prepack": "babel . --out-dir . --extensions .ts --config-file ../../babel.config.json",
+    "babel": "babel . --out-dir . --extensions .ts --config-file ../../babel.config.json",
     "analyze": "run-p analyze:*",
     "analyze:wc": "wca --format json --outFile ./custom-elements.json",
     "analyze:readme": "wca --outFile ./README.md",

packages/wc/README.md

@@ -58,3 +58,65 @@ Check the main documentation page for instructions on customizing the form's ren
 | Event     | Type               |
 |-----------|--------------------|
 | `changed` | `CustomEvent<any>` |
+
+
+# shaperone-form
+
+A custom element which renders a form element using graph description in [SHACL format](http://datashapes.org/forms.html).
+The underlying value is a graph represented using the [RDF/JS data model specification](https://rdf.js.org/data-model-spec/)
+
+## Usage
+
+This example shows the element used with the default lit renderer
+
+```typescript
+import '@hypermedia-app/shaperone-form/shaperone-form.js'
+import { html } from '@hypermedia-app/shaperone-form'
+import { Hydra } from 'alcaeus/web'
+import { dataset, blankNode } from '@rdf-esm/dataset'
+
+const shapes = await Hydra.loadResource('http://example.com/api/shape')
+const resource = clownface({
+   dataset: dataset(),
+}).blankNode()
+
+const formTemplate = html`<shaperone-form .shapes=${shapes} .resource=${resource}></shaperone-form>`
+```
+
+The above snippet assumes that shapes get loaded from a remote resource and the form value is initialized with a
+blank node without any properties.
+
+Such setup will render a very basic and unstyled form using native browser input elements and no specific layout.
+Check the main documentation page for instructions on customizing the form's rendering.
+
+**Mixins:** connect
+
+## Properties
+
+| Property            | Attribute            | Modifiers | Type                                             | Default           | Description                                      |
+|---------------------|----------------------|-----------|--------------------------------------------------|-------------------|--------------------------------------------------|
+| `components`        | `components`         | readonly  | `ComponentsState`                                |                   | Gets the state of the editor components          |
+| `editors`           | `editors`            | readonly  | `EditorsState`                                   |                   | Gets the state of the DASH editors model         |
+| `isValid`           |                      | readonly  | `boolean`                                        |                   | Gets a value indicating if there are any `sh:Violation` violation results |
+| `noEditorSwitches`  | `no-editor-switches` |           | `boolean`                                        | false             | Disables the ability to change object editors. Only the one with [highest score](http://datashapes.org/forms.html#score) will be rendered |
+| `renderer`          |                      |           | `Renderer<TemplateResult<ResultType>>`           | "DefaultRenderer" | Gets or sets the renderer implementation         |
+| `rendererOptions`   | `rendererOptions`    | readonly  | `RendererState`                                  |                   | Gets the state of the renderer                   |
+| `resource`          |                      |           | `GraphPointer<BlankNode \| NamedNode<string>, DatasetCore<Quad, Quad>> \| undefined` |                   | Gets or sets the resource graph as graph pointer |
+| `shapes`            |                      |           | `DatasetCore<Quad, Quad> \| AnyPointer<AnyContext, DatasetCore<Quad, Quad>> \| undefined` |                   | Gets or sets the shapes graph                    |
+| `state`             | `state`              |           | `FormState`                                      |                   | Gets the internal state of the form element      |
+| `validationReport`  |                      | readonly  | `GraphPointer<Term, DatasetCore<Quad, Quad>> \| undefined` |                   | Gets a graph pointer to the latest [SHACL Validation Report](https://www.w3.org/TR/shacl/#validation-report) |
+| `validationResults` |                      | readonly  | `ValidationResultState[]`                        |                   | Get all validation results found in the {@see validationReport} graph |
+| `value`             |                      | readonly  | `RdfResource<DatasetCore<Quad, Quad>> \| null`   |                   | Gets the resource as a [rdfine](https://npm.im/@tpluscode/rdfine) object |
+
+## Methods
+
+| Method      | Type                             | Description                                      |
+|-------------|----------------------------------|--------------------------------------------------|
+| `mapEvents` | `((): DispatchMap) \| undefined` |                                                  |
+| `validate`  | `(): void`                       | Triggers validation of the current resource against the shapes graph |
+
+## Events
+
+| Event     | Type               |
+|-----------|--------------------|
+| `changed` | `CustomEvent<any>` |

packages/wc/custom-elements.json

@@ -1,6 +1,113 @@
 {
   "version": "experimental",
   "tags": [
+    {
+      "name": "shaperone-form",
+      "path": "./shaperone-form.js",
+      "description": "A custom element which renders a form element using graph description in [SHACL format](http://datashapes.org/forms.html).\nThe underlying value is a graph represented using the [RDF/JS data model specification](https://rdf.js.org/data-model-spec/)\n\n## Usage\n\nThis example shows the element used with the default lit renderer\n\n```typescript\nimport '@hypermedia-app/shaperone-form/shaperone-form.js'\nimport { html } from '@hypermedia-app/shaperone-form'\nimport { Hydra } from 'alcaeus/web'\nimport { dataset, blankNode } from '@rdf-esm/dataset'\n\nconst shapes = await Hydra.loadResource('http://example.com/api/shape')\nconst resource = clownface({\n   dataset: dataset(),\n}).blankNode()\n\nconst formTemplate = html`<shaperone-form .shapes=${shapes} .resource=${resource}></shaperone-form>`\n```\n\nThe above snippet assumes that shapes get loaded from a remote resource and the form value is initialized with a\nblank node without any properties.\n\nSuch setup will render a very basic and unstyled form using native browser input elements and no specific layout.\nCheck the main documentation page for instructions on customizing the form's rendering.",
+      "attributes": [
+        {
+          "name": "editors",
+          "description": "Gets the state of the DASH editors model",
+          "type": "EditorsState"
+        },
+        {
+          "name": "components",
+          "description": "Gets the state of the editor components",
+          "type": "ComponentsState"
+        },
+        {
+          "name": "rendererOptions",
+          "description": "Gets the state of the renderer",
+          "type": "RendererState"
+        },
+        {
+          "name": "no-editor-switches",
+          "description": "Disables the ability to change object editors. Only the one with [highest score](http://datashapes.org/forms.html#score) will be rendered",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "state",
+          "description": "Gets the internal state of the form element",
+          "type": "FormState"
+        }
+      ],
+      "properties": [
+        {
+          "name": "renderer",
+          "description": "Gets or sets the renderer implementation",
+          "type": "Renderer<TemplateResult<ResultType>>",
+          "default": "\"DefaultRenderer\""
+        },
+        {
+          "name": "editors",
+          "attribute": "editors",
+          "description": "Gets the state of the DASH editors model",
+          "type": "EditorsState"
+        },
+        {
+          "name": "components",
+          "attribute": "components",
+          "description": "Gets the state of the editor components",
+          "type": "ComponentsState"
+        },
+        {
+          "name": "rendererOptions",
+          "attribute": "rendererOptions",
+          "description": "Gets the state of the renderer",
+          "type": "RendererState"
+        },
+        {
+          "name": "noEditorSwitches",
+          "attribute": "no-editor-switches",
+          "description": "Disables the ability to change object editors. Only the one with [highest score](http://datashapes.org/forms.html#score) will be rendered",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "state",
+          "attribute": "state",
+          "description": "Gets the internal state of the form element",
+          "type": "FormState"
+        },
+        {
+          "name": "value",
+          "description": "Gets the resource as a [rdfine](https://npm.im/@tpluscode/rdfine) object",
+          "type": "RdfResource<DatasetCore<Quad, Quad>> | null"
+        },
+        {
+          "name": "isValid",
+          "description": "Gets a value indicating if there are any `sh:Violation` violation results",
+          "type": "boolean"
+        },
+        {
+          "name": "validationResults",
+          "description": "Get all validation results found in the {@see validationReport} graph",
+          "type": "ValidationResultState[]"
+        },
+        {
+          "name": "validationReport",
+          "description": "Gets a graph pointer to the latest [SHACL Validation Report](https://www.w3.org/TR/shacl/#validation-report)",
+          "type": "GraphPointer<Term, DatasetCore<Quad, Quad>> | undefined"
+        },
+        {
+          "name": "shapes",
+          "description": "Gets or sets the shapes graph",
+          "type": "DatasetCore<Quad, Quad> | AnyPointer<AnyContext, DatasetCore<Quad, Quad>> | undefined"
+        },
+        {
+          "name": "resource",
+          "description": "Gets or sets the resource graph as graph pointer",
+          "type": "GraphPointer<BlankNode | NamedNode<string>, DatasetCore<Quad, Quad>> | undefined"
+        }
+      ],
+      "events": [
+        {
+          "name": "changed"
+        }
+      ]
+    },
     {
       "name": "shaperone-form",
       "path": "./shaperone-form.ts",

packages/wc/package.json

@@ -10,7 +10,7 @@
     "custom-elements.json"
   ],
   "scripts": {
-    "prepack": "babel . --out-dir . --extensions .ts",
+    "babel": "babel . --out-dir . --extensions .ts",
     "analyze": "run-p analyze:*",
     "analyze:wc": "wca --format json --outFile ./custom-elements.json",
     "analyze:readme": "wca --outFile ./README.md",