extendable app templates

[thescientist13]

Type of Change

• New Feature Request
• Documentation / Website
• Improvement / Suggestion
• Bug
• Other (please clarify below)

Summary

As evidenced in the PR for code splitting there are some rough developer ergonomics around having to extend app-template.js, in that you have recreate (copy / paste) the entire file. Even if all you want to make is a little change like this

<!-- current template -->
<div class='wrapper'>
  MYROUTES
  <lit-route><h1>404 Not found</h1></lit-route>
</div>

<!-- just to add a heater and a footer -->
<div class='wrapper'>
  <eve-header></eve-header>
  MYROUTES
  <lit-route><h1>404 Not found</h1></lit-route>
  <eve-footer></eve-footer>
</div>

Details

I wonder if there's a way to do one of the following?

Extend

Simple extend the component and override the render method

import { html } from 'lit-html';
import { AppComponent } from `@greenwood/cli/src/templates/app-component';

class GreenwoodAppComponent extends AppComponent {

  render() {
    return html`
      <div class='wrapper'>
        <eve-header></eve-header>
        MYROUTES
        <lit-route><h1>404 Not found</h1></lit-route>
        <eve-footer></eve-footer>
      </div>
    `;
  }
}

Note I tried this and was getting errors that /index.index.js couldn't be resolved, likely because the app-template is in the user directory, not CLI directory?

Slots

Maybe allow users to project / slot content into the `?

import { html } from 'lit-html';
import `@greenwood/cli/src/templates/app-component';

class GreenwoodAppComponent {

  render() {
    return html`
      <app-template>
        <div class='wrapper'>
          <eve-header></eve-header>
          MYROUTES
          <lit-route><h1>404 Not found</h1></lit-route>
          <eve-footer></eve-footer>
        </div>
      </app-template>
    `;
  }
}