@coredna/magna NPM

Magna framework

Magna is a tree based router, plugin runner and ajax framework

Install

npm install @coredna/magna

API

import Magna, { 
  Import, 
  Node, 
  Predicate,
  Singleton,
  elementExists,
  route,
} from '@coredna/magna'

// create a plugin to add functionality to your page
class Foo extends Node {
  // set default config variables that will be merged with your plugin config
  static defaultConfig = {
    key: value 
  }
  constructor(config, childNodes = [])  {
    super(config, childNodes) 
  }
  // initialize your plugin, add events, state and modify the DOM
  init({ request, config }) {}
  // destroy your plugin, cleanup after yourself
  destroy({ request, config }) {}
  // handle navigation through ajax
  popstate({ request, response, config }) {}
}

// create a plugin that will only run once per load 
class Bar extends Singleton {
  // initialize only once per load 
  init({ request })  {
    // subscribe to a global shared state
    this.subscribe('bar.baz', state => {
      // do something when `bar.baz` changes 
    })
  }
}


class ShouldRun extends Predicate {
  static defaultConfig = {
    shouldRun: () => true 
  }
  // change the constructor api
  constructor(shouldRun) {
   super({ shouldRun });
  }
  // test something to decide whether child nodes should be initialized
  predicate({ request }) {
    return this.config.shouldRun()
  }
}

// initialize a new instance of Magna
const magna = new Magna([
  // run plugins globally on every page
  new Foo({}),
  // nest any Node
  new Foo({}, [
    new Foo({}, [
      new Foo({}) 
    ]) 
  ]),
  // run something only once with a Singleton
  new Bar({}),
  // use routing
  route('some-url', [
    // reuse plugins by passing in different config options
    new Foo({
      option: 'value'   
    })
  ]),
  // take params from the url string, all child Node's will have access through the request object
  route('some-other-url/{param:string}', [
    // reuse plugins
    new Foo({
      option: 'other-value'
    }),
    // lazily import other modules
    new Import(() => import('./some-other-module')) 
  ]),
  // make your router a decision tree by testing something
  new ShouldRun(() => true, [
    new Foo() 
  ]),
  // extend predicate to test something more specific
  elementExists('#some-element', [
    // use default params
    new Foo()
  ])
])
magna.start({
  env: 'production',
  debug: false
})