This package is to be used to create derivative components.
THIS IS IN EARLY STAGES, BACKWARDS COMPATABILITY NOT GUARANTEED!
const express = require("express");
const server = express();
const Component = require("component-essentials");
class Form extends Component{
constructor({action, method} = {}){
// first argument is the tag name, second is the attributes
super("form", { class: "my-special-form" });
// you can access & set the attributes any time
this.attributes = {action, method};
}
}
class Label extends Component{
constructor(text){
super("label");
// Set the innerHTML with .content
this.content = text;
}
}
class Input extends Component{
constructor(attributes){
super("input", attributes);
this.inline = true; // inline indicates a self-closing tag
}
}
class SpecialForm extends Form{
constructor({defaultUsername} = {}){
super({action: "?", method: "POST"});
// Simply push to the elements array on any component to append
this.elements.push(new Label("Special Authentication Form"));
// Below, .components() simply pushes to the current component elements array
// but it also defines the components pushed for easy access.
this.components(
["username", new Input({type: "text", placeholder: "Username"})],
["password", new Input({type: "password", placeholder: "Password"})],
["submit", new Input({type: "submit", value: "Login"})]
);
// Example of utilizing a defined component:
this.username.attributes.value = defaultUsername;
}
}
// Create a component instance of your custom form
const mySpecialForm = new SpecialForm({
defaultUsername: "Bob"
});
server.get("/", (req, res) => {
res.send(
// Rendering the component
mySpecialForm.render()
);
}).listen(8080);
Here's what the above is rendered to in the DOM:
This is a very new package, expect changes good & bad.