Repo restructure.

packages/json-schema/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "json-schema",
+  "version": "1.0.0",
+  "description": "Web component which validates a form against a JSON Schema.",
+  "main": "index.js",
+  "scripts": {
+    "test": "npx jest"
+  },
+  "author": "Austin Smith",
+  "license": "ISC",
+  "dependencies": {
+    "ajv": "^8.17.1",
+    "ajv-formats": "^3.0.1"
+  }
+}

packages/json-schema/src/index.ts

@@ -0,0 +1,46 @@
+/**
+ * Validates a form against a JSON Schema validated by Ajv.
+ * 
+ * Emits CustomEvents:
+ * - validationSuccess
+ * - validationFailure
+ */
+import Ajv from 'ajv';
+import addFormats from 'ajv-formats';
+
+const ajv = new Ajv();
+addFormats(ajv);
+
+export class JsonSchema extends HTMLElement {
+    static observedAttributes = [
+        'src', // url of remote schema
+        'for', // id of form the schema is applied to`
+    ]
+
+    private form: HTMLFormElement | null;
+
+    constructor() {
+        super();
+
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot!.innerHTML = '<div><slot name="schema"></slot></div>';
+        this.form = null;
+    }
+
+    async connectedCallback() {
+        const for_attr = this.getAttribute('for');
+        if (!for_attr) {
+            throw new Error('[Json-Schema] Error: "for" attribute must be defined');
+        }
+        this.form = document.getElementById(for_attr) as HTMLFormElement;
+        this.form.addEventListener('submit', () => {
+
+        });
+    }
+
+    validate() {
+
+    }
+}
+
+customElements.define('json-schema', JsonSchema);

packages/json-schema/tsconfig.json

@@ -0,0 +1,8 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "rootDir": "./src",
+        "outDir": "../../dist/json-schema"
+    },
+    "include": ["src"]
+}