Micro-frontends approach to solve once and for all the "problem" of router/stateful components

[marcodpt]

After reading some parts of:

• This issue
• This repo
• This issue

I thought of another approach to this problem. And I wrote this router.

Let's define a component as a function with this signature:

Component(element, params) -> Promise stop?

• element: The DOM element where it should be mounted.
• params: An object with the params passed to the component.
• stop: An optional function that stops the component when it is called.

Example:

const todo = (node, {value}) => import("https://unpkg.com/hyperapp")
  .then(({h, text, app}) => {
    const AddTodo = (state) => ({
      ...state,
      value: "",
      todos: state.todos.concat(state.value),
    })

    const NewValue = (state, event) => ({
      ...state,
      value: event.target.value,
    })

    app({
      init: { todos: [], value: value || "" },
      view: ({ todos, value }) =>
        h(node.tagName.toLowerCase(), {}, [
          h("h1", {}, text("To do list")),
          h("input", { type: "text", oninput: NewValue, value }),
          h("ul", {},
            todos.map((todo) => h("li", {}, text(todo)))
          ),
          h("button", { onclick: AddTodo }, text("New!")),
        ]),
      node: node
    })
  })

This definition should handle the custom element case:

<ms-todo value="read"></ms-todo>

And it should also handle the case of the url:

#/todo?value=read

This signature is the inspiration, but if you think this idea is interesting take a look at the README.md

[marcodpt]

I simplified the router a lot.

• In the examples I combine vanilla js, superfine and hyperapp components. All using dynamics imports, all lazy-loaded.
• All routes are defined with html, with a very nice and commented example.
• It works now with hyperapp very easily. A single html file can be turned into a hash-router SPA with just a single import.