Component is a class that should be extended for every component that's being made. It is a helper class to keep the code uniform.

This is not to be used directly, only extended

see props on how to pass in additional configuration to the constructor.

import { Component } from '@verndale/core';

class Foo extends Component {
  constructor(el: HTMLElement){
    super(el);
  }

  setupDefaults(){
    // ...defaults go here
  }

  addListeners(){
    // ...listeners go here
  }
}

// Create a new Foo component
new Foo(document.querySelector('.foo'));

class Foo extends Component {
  construction(el: HTMLElement, props: { name: string }){
    super(el, props);
  }

  setupDefaults(){
    console.log(this.props.name); // Outputs "Foo"
  }
}

// Create a new Foo component with some configuration
new Foo(document.querySelector('.foo'), {
  name: 'Foo'
});

class Foo extends Component {
  construction(el: HTMLElement){
    super(el);
  }

  setupDefaults(){
    this.dom = {
      $container: document.querySelector('.container')
    }
  }

  addListeners(){
    //DOM object is available
    console.log(this.dom.$container);
  }
}

// Create a new Foo component
new Foo(document.querySelector('.foo'));

this.dom

Creates bundles from modules that are defined in this method. This is to be used for the main entry points for your module initialization.

create() allows you to import any module(s) at runtime as long as the DOM element is on the page. This method should be used to load JavaScript chunks at runtime that you don not want in the main or common bundle and is used with the Component and render method to loop through each matched element on the page.

You must have a data-module attribute that is the same name as the JavaScript file in the HTML in order for create() to detect the component.

The JavaScript file you are importing does not have to be a class; it could be anything - ie. a single function, an object, or a collection of utility functions.

Type: {name: string, loader: function (): Promise<any>?, styles: function (): Promise<any>?, render: function (module: any, el: NodeListOf<HTMLElement>): void?, props: any?}

//'Foo' is the name of the JavaScript file
<div data-module="Foo"></div>
//'Bar' is the name of the JavaScript file
<div data-module="Bar"></div>

//create simple modules

//-- src/js/main.js
import create from '@verndale/core';

const organisms = [
  { name: 'Foo', loader: () => import('./modules/Foo') },
  { name: 'Bar', loader: () => import('./modules/global/Bar') }
];

document.addEventListener('DOMContentLoaded', () => {
  create(organisms);
}

//This will fetch the modules: `./modules/Foo.js` and `./modules/global/Bar.js`

//define some properties to the module "Bar"

//-- src/js/main.js
import create from '@verndale/core';

const organisms = [
  { name: 'Foo', loader: () => import('./modules/Foo') },
  { name: 'Bar', loader: () => import('./modules/global/Foo')
     props: {
      firstName: 'foo',
      lastName: 'bar'
    }
  }
];

document.addEventListener('DOMContentLoaded', () => {
  create(organisms);
}

//intercept the render method in case we want to bring
//in other libraries or do anything else prior to render/instantiation.

//-- src/js/main.js
import create from '@verndale/core';

//in this case, `Foo.js` is a react component
const organisms = [
  { name: 'Foo',
    loader: () => import('./modules/Foo'),
    render(Component, el){
      const React = require('react');
      const { render } = require('react-dom');

      render(<Component {...el[0].dataset} />, el[0]);
    }
  }
];

document.addEventListener('DOMContentLoaded', () => {
  create(organisms);
}

Iterates through any matched element and provides a callback to return the DOM object.

import { render } from '@verndale/core';

render(document.querySelectorAll('.foo'), $target => {
 new Foo($target);
});