refactor: use vanilla custom elements for tabs (#136)

Author: web-padawan

.changeset/fifty-toes-confess.md

@@ -0,0 +1,9 @@
+---
+'@api-viewer/common': patch
+'@api-viewer/demo': patch
+'@api-viewer/docs': patch
+'@api-viewer/tabs': patch
+'api-viewer-element': patch
+---
+
+Use vanilla custom elements for tabs

.eslintrc.json

@@ -24,6 +24,7 @@
     "import/no-unresolved": "off",
     "import/prefer-default-export": "off",
     "lit/no-template-map": "off",
+    "lit/prefer-static-styles": "off",
     "class-methods-use-this": [
       "error",
       {
@@ -33,7 +34,8 @@
     "no-console": ["error", { "allow": ["error"] }],
     "no-param-reassign": "off",
     "no-plusplus": "off",
-    "no-underscore-dangle": "off"
+    "no-underscore-dangle": "off",
+    "prefer-destructuring": "off"
   },
   "overrides": [
     {

packages/api-common/src/utils.ts

@@ -2,3 +2,12 @@ export const unquote = (value?: string): string | undefined =>
   typeof value === 'string' && value.startsWith("'") && value.endsWith("'")
     ? value.slice(1, value.length - 1)
     : value;
+
+export function html(strings: TemplateStringsArray, ...values: string[]) {
+  const template = document.createElement('template');
+  template.innerHTML = values.reduce(
+    (acc, v, idx) => acc + v + strings[idx + 1],
+    strings[0]
+  );
+  return template;
+}

packages/api-demo/src/layout.ts

@@ -102,13 +102,14 @@ class ApiDemoLayout extends LitElement {
     const slots = this.slotsController?.data || [];
     const cssProps = this.stylesController?.data || [];
     const hideSlots = noSlots || hasTemplate(id, tag, TemplateTypes.SLOT);
+    const hideKnobs = noProps && noCustomKnobs;
 
     return html`
       <div part="demo-output" @rendered=${this.onRendered}>
         ${renderer({ id, tag, knobs: this.knobs })}
       </div>
       <api-viewer-tabs part="demo-tabs">
-        <api-viewer-tab heading="Source" slot="tab" part="tab"></api-viewer-tab>
+        <api-viewer-tab slot="tab" part="tab">Source</api-viewer-tab>
         <api-viewer-panel slot="panel" part="tab-panel">
           <button @click=${this._onCopyClick} part="button">
             ${this.copyBtnText}
@@ -117,15 +118,16 @@ class ApiDemoLayout extends LitElement {
             ${renderSnippet(id, tag, this.knobs, slots, cssProps)}
           </div>
         </api-viewer-panel>
-        <api-viewer-tab
-          heading="Knobs"
-          slot="tab"
-          part="tab"
-          ?hidden=${noProps && noCustomKnobs && hideSlots}
-        ></api-viewer-tab>
+        <api-viewer-tab slot="tab" part="tab" ?hidden=${hideKnobs && hideSlots}>
+          Knobs
+        </api-viewer-tab>
         <api-viewer-panel slot="panel" part="tab-panel">
           <div part="knobs">
-            <section part="knobs-column" @change=${this._onPropChanged}>
+            <section
+              ?hidden=${hideKnobs}
+              part="knobs-column"
+              @change=${this._onPropChanged}
+            >
               ${renderKnobs(this.propKnobs, 'Properties', 'prop', propRenderer)}
               ${renderKnobs(
                 this.customKnobs,
@@ -143,12 +145,9 @@ class ApiDemoLayout extends LitElement {
             </section>
           </div>
         </api-viewer-panel>
-        <api-viewer-tab
-          heading="Styles"
-          slot="tab"
-          part="tab"
-          ?hidden=${noCss}
-        ></api-viewer-tab>
+        <api-viewer-tab slot="tab" part="tab" ?hidden=${noCss}>
+          Styles
+        </api-viewer-tab>
         <api-viewer-panel slot="panel" part="tab-panel">
           <div part="knobs" ?hidden=${noCss}>
             <section part="knobs-column" @change=${this._onCssChanged}>
@@ -161,13 +160,9 @@ class ApiDemoLayout extends LitElement {
             </section>
           </div>
         </api-viewer-panel>
-        <api-viewer-tab
-          id="events"
-          heading="Events"
-          slot="tab"
-          part="tab"
-          ?hidden=${noEvents}
-        ></api-viewer-tab>
+        <api-viewer-tab id="events" slot="tab" part="tab" ?hidden=${noEvents}>
+          Events
+        </api-viewer-tab>
         <api-viewer-panel slot="panel" part="tab-panel">
           <div part="event-log" ?hidden=${noEvents}>
             <button

packages/api-docs/src/layout.ts

@@ -65,12 +65,9 @@ const renderTab = (
 ): TemplateResult => {
   const hidden = array.length === 0;
   return html`
-    <api-viewer-tab
-      heading=${heading}
-      slot="tab"
-      part="tab"
-      ?hidden=${hidden}
-    ></api-viewer-tab>
+    <api-viewer-tab slot="tab" part="tab" ?hidden=${hidden}>
+      ${heading}
+    </api-viewer-tab>
     <api-viewer-panel slot="panel" part="tab-panel" ?hidden=${hidden}>
       ${content}
     </api-viewer-panel>

packages/api-tabs/package.json

@@ -27,8 +27,7 @@
     "web-components"
   ],
   "dependencies": {
-    "lit": "^2.0.0",
-    "tslib": "^2.3.1"
+    "@api-viewer/common": "^1.0.0-pre.2"
   },
   "contributors": [
     {

packages/api-tabs/src/api-viewer-panel.ts

@@ -1,28 +1,32 @@
-import { LitElement, html, css, TemplateResult } from 'lit';
+import { html } from '@api-viewer/common/lib/utils.js';
 
 let panelIdCounter = 0;
 
-export class ApiViewerPanel extends LitElement {
-  static get styles() {
-    return css`
-      :host {
-        display: block;
-        box-sizing: border-box;
-        width: 100%;
-        overflow: hidden;
-      }
-
-      :host([hidden]) {
-        display: none !important;
-      }
-    `;
-  }
+const tpl = html`
+  <style>
+    :host {
+      display: block;
+      box-sizing: border-box;
+      width: 100%;
+      overflow: hidden;
+    }
+
+    :host([hidden]) {
+      display: none !important;
+    }
+  </style>
+  <slot></slot>
+`;
+
+export class ApiViewerPanel extends HTMLElement {
+  constructor() {
+    super();
 
-  protected render(): TemplateResult {
-    return html`<slot></slot>`;
+    const root = this.attachShadow({ mode: 'open' });
+    root.appendChild(tpl.content.cloneNode(true));
   }
 
-  protected firstUpdated(): void {
+  connectedCallback(): void {
     this.setAttribute('role', 'tabpanel');
 
     if (!this.id) {