A minimal js "framework" for extending server rendered html with bits of javascript.

app_manager.js

import $ from "./query"

class AppManager {
  
  constructor(viewControllerClasses) {
    this.viewControllerClasses = viewControllerClasses
    this.assemble()
  }

  // Find html nodes for the registered view controller classes.
  // When found instantiates the view controllers with the
  // found html node
  assemble() {
    this.viewControllerClasses.forEach( (viewControllerClass) => {
      let name = viewControllerClass.getName()
      let view = $.viewControllers(name)[0]
      if (view !== undefined) {
        this[name] = new viewControllerClass(view)
      }
    })
  }
}

export default AppManager

example.html

<div data-view-controller="example">
  <button data-view="someButton">Test</button>
</div>

example_app.js

import App from "./app_manager"
import ExampleViewController from "./example_view_controller"

// Instantiate app
let app = new App([
  ExampleViewController
])

example_view_controller.js

import $ from "../query"


class ExampleViewController {

  static getName() { return "example" }

  constructor(view) {
    this.view = view
    this.setupView()
  }

  setupView() {
    let someButton = $.views(this.view, "someButton")[0]
    someButton.addEventListener("click", (event) => {
      // ...
    }) 
  }
}


export default ExampleViewController

query.js

class QueryHelper {

    // Finds html nodes acting as views
    static views(parent, name) {
        if (arguments.length > 1) {
            return this._query(arguments[0], "view", arguments[1])
        } else {
            return this._query(document, "view", arguments[0])
        }
    }

    // Finds html nodes acting as view controllers
    static viewControllers(parent, name) {
        if (arguments.length > 1) {
            return this._query(arguments[0], "view-controller", arguments[1])
        } else {
            return this._query(document, "view-controller", arguments[0])
        }
    }

    static _query(parent, key, value) {
        return Array.from(parent.querySelectorAll("[data-" + key + "=\"" + value + "\"]"))
    }
}


export default QueryHelper