Multiple HTML files

[bennypowers]

Related: #278, #235

Case: Author wants to include multiple, related HTML files in a single playground. e.g.

• my-element.html
• my-element-custom-styles.html
• my-element-accessibility.html

Author wants a single playground which displays all three files as filesystem tabs. When the end user clicks on a tab, author wants the preview to display the selected tab's content. such that when end user click on the tab for my-element-custom-styles.html, the preview window shows the custom styles demo.

[jholt1]

A little hack that I have done to get this to work is:

onChange(filename) {
  this._currentFile = filename;
}

render() {
  html`
    <playground-tab-bar @click=${(event) => this.onChange(event.target._activeFileName)}></playground-tab-bar>
    <playground-file-editor @click=${(event) => this.onChange(event.target.filename)} @keydown=${(event) => this.onChange(event.target.filename)}></playground-file-editor>
    <playground-preview .htmlFile=${this._currentFile}></playground-preview>
  `;
}

In onChange you can do any logic to decide if it needs to change the current file and keydown might have been a bit excessive.