An HTML UI engine written in JavaScript.
Performs requires jQuery.
Server-side only:
$ npm i performs
Either server- or client-side:
var Performs = require('performs').Performs;
Let's assume the HTML document is this:
<html>
<body>
<p>Enter your details to create your new e-mail account!</p>
<form id="userPreferences">
</body>
</html>
And let's assume the URL https://example.com/options.json returns this JSON object:
{
"schema": "performs-0.2.0",
"content": [
{
"id": "givenName",
"type": "string",
"label": "Given name",
"required": true
}, {
"id": "familyName",
"type": "string",
"label": "Family name",
"required": true
}, {
"id": "phone",
"type": "string",
"label": "Contact phone number"
}, {
"id": "email",
"type": "string",
"label": "Desired e-mail address",
"required": true,
"value": "{{$givenName$familyName@example.com}}"
}, {
"id": "subscribe",
"type": "boolean",
"label": "Subscribe to the newsletter",
"value": "true"
}, {
"id": "call",
"type": "boolean",
"label": "Get a free call from our marketing departament",
"enabled": "{{@phone}}",
"value": "true"
}
]
}
We can invoke Performs like this:
var performs = new Performs();
performs.perform('https://example.com/options.json', '#userPreferences');
After Performs is done, new elements will created inside the initial (empty) form, and the resulting document will be:
<html>
<body>
<p>Enter your details to create your new e-mail account!</p>
<form id="userPreferences" class="pf-processed">
<label for="pf-givenName">Given name</label>
<input id="pf-givenName" type="text" required>
<label for="pf-familyName">Family name</label>
<input id="pf-familyName" type="text" required>
<label for="pf-phone">Contact phone number</label>
<input id="pf-phone" type="text">
<label for="pf-email">Desired e-mail address</label>
<input id="pf-email" type="text" required>
<label>
<input id="pf-subscribe" type="checkbox" checked>
Subscribe to the newsletter
</label>
<label>
<input id="pf-call" type="checkbox" checked disabled>
Get a free call from our marketing departament
</label>
</form>
</body>
</html>
…effectively translating the JSON object into an HTML form.
However, rendering a form programmatically like this wouldn't be that difficult, or particularly useful. The interesting part is that Performs understands the relations between fields. So for example, in the JSON above,
{
"id": "email",
"type": "string",
"label": "Desired e-mail address",
"required": true,
"value": "{{$givenName$familyName@example.com}}"
}
means:
email, of type «string», showing this label”givenName or the value of the field familyName change, change automatically the value of email, according to
the expression specified.”
For instance, the given name John and the family name Smith would produce the value JohnSmith@example.com for this field.To achieve this, Performs adds event listeners to all necessary fields.
Input-only fields (like givenName here) will notify other fields whenever their values change.
Performs detects cycles (circular dependencies among fields), which are forbidden for obvious reasons, and alerts the users if there are any.
There are other useful features, like:
The expressions understood by Performs, like the one above, extend regular JavaScript syntax, so in theory they can get as complex as needed, and anything is possible. The basic syntax is:
{{2020 === new Date().getFullYear()}}@ refers to the value of that field, eg {{@givenName.replace(/\s/, '') /* Remove spaces */}}The class Performs exposes the following properties and methods.
versionString'0.4.1'performjson: stream, document, file, a String containing a URL, or a String containing JSONform: jQuery-like selector that identifies one (and only one) <form> element, eg '.fields', 'form#userInput'0 if everything goes OKSyntaxError if the number of arguments is not 2$ npm t
At some point, npm run test-ui will work, too.
General documentation, introduction to the projects, and some live examples are under doc/.
Generated documentation (ie, the API reference) can be refreshed under api/ running this command:
$ npm run jsdoc
Copyright © 2014–2020 tripu (t@tripu.info, https://tripu.info)
This project is licensed under the terms of the MIT license.
FAQs
An HTML UI engine written in JavaScript
We found that performs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.