component-essentials v0.0.0

Component Essentials

This package is to be used to create derivative components.

THIS IS IN EARLY STAGES, BACKWARDS COMPATABILITY NOT GUARANTEED!

Example use:

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.

follow me on twitter?