austin/web-components
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move JSON Schema logic to Declaform instead of making another component.

Browse Source
This commit is contained in:
Austin Smith
2025-11-18 09:25:35 -05:00
parent 0d4adef274
commit c8d52f15cc
6 changed files with 137 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/declaform/package.json
View File

@@ -10,5 +10,9 @@
"test": "npx jest"
},
"author": "Austin Smith",
"license": "ISC"
"license": "ISC",
"dependencies": {
"ajv": "^8.17.1",
"ajv-formats": "^3.0.1"
}
}

48
packages/declaform/src/index.ts
View File

@@ -1,3 +1,11 @@
import Ajv, { type ValidateFunction } from 'ajv';
import addFormats from 'ajv-formats';
const ajv = new Ajv({
coerceTypes: true,
});
addFormats(ajv);
interface FieldElement {
name: string;
type: string;
@@ -93,13 +101,17 @@ export class Declaform extends HTMLElement {
'src', // defines api endpoint used to hydrate this object
'action', // defines api endpoint used to submit this object to
'method', // defines http method to use on "action" endpoint
]
'schema', // url for a remote JSON Schema definition
];
/* The character that gets used to join multiple field values */
static joining_char = ',';
private _fields: Field[];
private _form: HTMLFormElement | null;
private _validate: ValidateFunction | undefined;
ready: Promise<void>;
private readyResolve!: () => void;
constructor() {
super();
@@ -109,6 +121,10 @@ export class Declaform extends HTMLElement {
this.shadowRoot!.innerHTML = '<slot name="form"></slot>';
this._fields = [];
this._form = null;
this._validate = undefined;
this.ready = new Promise(resolve => {
this.readyResolve = resolve;
})
}
async connectedCallback() {
@@ -151,10 +167,23 @@ export class Declaform extends HTMLElement {
this.hydrateFromEndpoint(src);
}
const schemaUrl = this.getAttribute('schema');
if (schemaUrl) {
const res = await fetch(schemaUrl);
const schema = await res.json();
this._validate = ajv.compile(schema);
}
this._form.addEventListener('submit', async (e) => {
e.preventDefault();
await this.submit();
})
const isValid = (this.hasAttribute('schema')) ?
await this.validate(e) : true;
if (isValid) {
await this.submit();
}
});
this.readyResolve();
}
get form() {
@@ -202,13 +231,24 @@ export class Declaform extends HTMLElement {
populateFields(obj, '');
}
async validate(e?: SubmitEvent) {
e?.preventDefault();
if (!this._validate) {
console.warn(`[Declaform] Warning: _validate is not defined`)
return true;
}
const obj = this.toObject();
const isValid = this._validate(obj);
return isValid;
}
private async hydrateFromEndpoint(endpoint: string): Promise<void> {
const response = await fetch(endpoint);
const obj = await response.json();
this.hydrate(obj);
}
private async submit(): Promise<void> {
async submit(): Promise<void> {
const method = this.getAttribute('method') ?? 'POST';
const endpoint = new URL(this.getAttribute('action') ?? '');
const obj = this.toObject();

150
packages/declaform/tests/declaform.test.ts
View File

@@ -1,66 +1,69 @@
import { Declaform } from '../src';
const MOVIE_FORM_NO_SRC = `
<decla-form id="form">
<form slot="form">
<div class="input-group">
<label for="name">Name</label>
<input id="name" name="name" />
</div>
<select id="genre" name="genre">
<option value="comedy">Comedy</option>
<option value="horror">Horror</option>
</select>
<fieldset>
<legend>Rating</legend>
function initTestFormWithAttributes(attributes: Record<string, any>) {
const attributeStr = Object.entries(attributes).map(x => x.join('=')).join(' ');
return `
<decla-form id="form" ${attributeStr}>
<form slot="form">
<div class="input-group">
<label for="rating-type-user">Type</label>
<input id="rating-type-user" name="rating.type" type="radio" value="user" />
<label for="name">Name</label>
<input id="name" name="name" />
</div>
<div class="input-group">
<label for="rating-type-critic">Type</label>
<input id="rating-type-critic" name="rating.type" type="radio" value="critic" />
</div>
<div class="input-group">
<label for="rating-score">Score</label>
<input id="rating-score" name="rating.score" type="number" />
</div>
</fieldset>
<button type="submit">Submit</button>
</form>
</decla-form>
`;
<select id="genre" name="genre">
<option value="comedy">Comedy</option>
<option value="horror">Horror</option>
</select>
<fieldset>
<legend>Rating</legend>
<div class="input-group">
<label for="rating-type-user">Type</label>
<input id="rating-type-user" name="rating.type" type="radio" value="user" />
</div>
<div class="input-group">
<label for="rating-type-critic">Type</label>
<input id="rating-type-critic" name="rating.type" type="radio" value="critic" />
</div>
<div class="input-group">
<label for="rating-score">Score</label>
<input id="rating-score" name="rating.score" type="number" />
</div>
</fieldset>
<button type="submit">Submit</button>
</form>
</decla-form>
`
const MOVIE_FORM_HTTP = `
<decla-form id="form" src="movie/jaws" action="movie/jaws" method="PUT">
<form slot="form">
<div class="input-group">
<label for="name">Name</label>
<input id="name" name="name" />
</div>
<select id="genre" name="genre">
<option value="comedy">Comedy</option>
<option value="horror">Horror</option>
</select>
<fieldset>
<legend>Rating</legend>
<div class="input-group">
<label for="rating-type-user">Type</label>
<input id="rating-type-user" name="rating.type" type="radio" value="user" />
</div>
<div class="input-group">
<label for="rating-type-critic">Type</label>
<input id="rating-type-critic" name="rating.type" type="radio" value="critic" />
</div>
<div class="input-group">
<label for="rating-score">Score</label>
<input id="rating-score" name="rating.score" type="number" />
</div>
</fieldset>
<button type="submit">Submit</button>
</form>
</decla-form>
`;
}
const MOVIE_SCHEMA = {
type: 'object',
properties: {
name: {
type: 'string',
minLength: 1,
},
genre: {
type: 'string',
enum: ['comedy', 'horror'],
},
rating: {
type: 'object',
properties: {
type: {
type: 'string',
enum: ['critic', 'user'],
},
score: {
type: 'number',
minimum: 0,
maximum: 5,
},
},
required: ['type', 'score'],
}
},
required: ['name', 'genre', 'rating']
}
describe('Declaform', () => {
afterEach(() => {
@@ -68,12 +71,12 @@ describe('Declaform', () => {
})
it('Should mount.', () => {
document.body.innerHTML = MOVIE_FORM_NO_SRC;
document.body.innerHTML = initTestFormWithAttributes({});
expect(document.getElementById('form')).toBeTruthy();
})
it('.toObject() should serialize form into a JS object', () => {
document.body.innerHTML = MOVIE_FORM_NO_SRC;
document.body.innerHTML = initTestFormWithAttributes({});
const form = document.getElementById('form') as Declaform;
setInputValue('name', 'Monty Python');
setInputValue('genre', 'comedy');
@@ -91,7 +94,7 @@ describe('Declaform', () => {
});
it('.hydrate() should populate input fields from a JS object', () => {
document.body.innerHTML = MOVIE_FORM_NO_SRC;
document.body.innerHTML = initTestFormWithAttributes({});
const form = document.getElementById('form') as Declaform;
form.hydrate({
name: 'Jaws',
@@ -120,7 +123,11 @@ describe('Declaform', () => {
}
})
})
document.body.innerHTML = MOVIE_FORM_HTTP;
document.body.innerHTML = initTestFormWithAttributes({
src: 'movie/123',
action: 'movie/123',
method: 'PUT',
});
await new Promise((resolve) => setTimeout(resolve, 0))
@@ -129,6 +136,25 @@ describe('Declaform', () => {
expect(getInputValue('rating-score')).toBe('5');
expect(document.getElementById('rating-type-critic')?.hasAttribute('checked')).toBe(true)
});
it('Should be able to be validated against a JSON Schema', async () => {
globalThis.fetch = jest.fn().mockResolvedValue({
status: 200,
ok: true,
json: () => Promise.resolve(MOVIE_SCHEMA),
});
document.body.innerHTML = initTestFormWithAttributes({
schema: 'movie_schema'
});
const form = document.getElementById('form') as Declaform;
await form.ready;
const isValid = await form.validate();
expect(isValid).toBe(false);
});
});
function setInputValue(id: string, value: string) {