Possible routing middleware API

[tbranyen]

Routing should be solved in the diffHTML fashion; with a well defined api and lots of options to fulfill it.

Possible ideas:

Config defined in markup

import { use, html, innerHTML } from 'diffhtml';
import router, { ActivePage, When } from 'diffhtml-middleware-routing';

use(router());

innerHTML(document.body, html`
  <${ActivePage} router=${html`
    <${When} route="/" render=${() => html`
      <h1>Home</h1>
      <nav>
        <a href="/about">About</a>
      </nav>
    `} /> 

    <${When} route="/about" render=${() => html`
      <h1>About</h1>
      <nav>
        <a href="/">Home</a>
      </nav>
    `} /> 
  `} />
`);

Config defined in use

import { use, html, innerHTML } from 'diffhtml';
import router, { ActivePage } from 'diffhtml-middleware-routing';

use(router({
  when: {
    '/': () => html`
      <h1>Home</h1>
      <nav>
        <a href="/about">About</a>
      </nav>
    `,

    '/about': () => html`
      <h1>About</h1> 
      <nav>
        <a href="/">Home</a>
      </nav>
    `,
  },
}));

innerHTML(document.body, html`
  <${ActivePage} />
`);

Define a router object and scope to a route

import { use, html, innerHTML } from 'diffhtml';
import router, { ActivePage } from 'diffhtml-middleware-routing';

use(router({
  when: {
    '/': {
      '/': () => html`
        <h1>Home</h1>
        <nav>
          <a href="/about">About</a>
        </nav>
      `,
    
      '/about': () => html`
        <h1>About</h1> 
        <nav>
          <a href="/">Home</a>
        </nav>
      `,
    },
  },
}));

innerHTML(document.body, html`
  <${ActivePage} />
`);

Use string approach with config in use

import { use, innerHTML } from 'diffhtml';
import router from 'diffhtml-middleware-routing';

use(router({
  when: {
    '/': () => `
      <h1>Home</h1>
      <nav>
        <a href="/about">About</a>
      </nav>
    `,
  
    '/about': () => `
      <h1>About</h1> 
      <nav>
        <a href="/">Home</a>
      </nav>
    `,
  },
}));

innerHTML(document.body, `
  <ActivePage />
`);

Use string approach with config in markup

import { use, innerHTML } from 'diffhtml';
import router from 'diffhtml-middleware-routing';

use(router());

innerHTML(document.body, `
  <ActivePage>
    <When route="/">
      <h1>Home</h1>
      <nav>
        <a href="/about">About</a>
      </nav>
    </When>

    <When route="/about">
      <h1>About</h1>
      <nav>
        <a href="/">Home</a>
      </nav>
    </When>
  </ActivePage>
`);