Pass attributes set on app-route through to imported component

erikringsmuth / app-router

Router for Web Components

https://erikringsmuth.github.io/app-router/

MIT License

611 stars 83 forks source link

Pass attributes set on app-route through to imported component #18

Closed thegecko closed 9 years ago

thegecko commented 9 years ago

It would be very useful to be able to pass attributes through to the imported component. Syntactically, I envisage this could work in two ways. Using an attribute called 'title' as an example...

1 - Passing all unknown attributes on to the imported component:

<app-router>
    <app-route path="/" import="components/home-page.html" title="Welcome"></app-route>
    ...
</app-router>

2 - Allowing the route to contain an instantiated component with the attribute added:

<link rel="import" href="components/home-page.html">
...
<app-router>
    <app-route path="/">
        <home-page title="Welcome"></home-page>
    </app-route>
    ...
</app-router>

Nice component BTW!

erikringsmuth commented 9 years ago

You can achieve something close to 2 with inline templates https://github.com/erikringsmuth/app-router#inline-template.

<link rel="import" href="components/home-page.html">
...
<app-router>
  <app-route path="/" template>
    <template><home-page title="Welcome"></home-page></template>
  </app-route>
  ...
</app-router>

The template tag prevents things like the created function from being called until the route is activated.

I want to keep the router as separated from the display of the view as possible. I think the 2 way has the best separation of concerns.

thegecko commented 9 years ago

Nice, that works well. I wonder if the template attribute marker could be factored out...

Import a custom element (uses import attribute):

<app-route path="/customer/:customerId" import="/pages/customer-page.html"></app-route>

Pre-loaded custom element (uses element attribute):

<head>
    <link rel="import" href="/pages/page-bundle.html">
</head>
<app-router>
    <app-route path="/customer/:customerId" element="customer-page"></app-route>
</app-router>

Pre-loaded inline custom element (first element of content is not a template and allows further attributes):

<head>
    <link rel="import" href="/pages/page-bundle.html">
</head>
<app-router>
    <app-route path="/customer/:customerId">
        <customer-page name="bob"></customer-page>
    </app-route>
</app-router>

Import template (template attribute used for path):

<app-route path="/example" template="/pages/template-page.html"></app-route>

Inline template (first content element is 'template'):

<app-route path="/example">
    <template>
        <p>Inline template FTW!</p>
    </template>
</app-route>

Just a thought, with absolutely no consideration for how it could be implemented!

erikringsmuth commented 9 years ago

This gave me some ideas. Now I spent all morning trying to remove the template attribute and auto-detect if it's a template or custom element. I'm getting close but it's not quite working yet.

https://github.com/erikringsmuth/app-router/tree/simplify-imports

I don't think I'll be able to get the pre-loaded inline custom elements working. The template tag is necessary when you inline any code otherwise it will display right away and execute created and attached callbacks before the route is activated.

This set of changes will still take a while but I'll keep working on them over the next week.

thegecko commented 9 years ago

Thanks, I'll take a look

thegecko commented 9 years ago

I see what you mean. I think a