refactor!: move demo types to api-demo package (#131)

Author: web-padawan

.changeset/neat-poets-thank.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
+---
+
+Move demo types to api-demo package

packages/api-common/src/manifest.ts

@@ -26,13 +26,6 @@ export {
   Slot
 };
 
-export type CssCustomPropertyValue = CssCustomProperty & { value?: string };
-
-export interface SlotValue {
-  name: string;
-  content: string;
-}
-
 export function hasCustomElements(
   manifest?: Package | null
 ): manifest is Package {

packages/api-demo/src/controllers/events-controller.ts

@@ -3,7 +3,7 @@ import {
   AbstractController,
   AbstractControllerHost
 } from './abstract-controller.js';
-import { HasKnobs } from '../ui/knobs.js';
+import { HasKnobs } from '../types.js';
 
 export class EventsController extends AbstractController<CustomEvent> {
   constructor(

packages/api-demo/src/controllers/slots-controller.ts

@@ -1,4 +1,4 @@
-import { Slot, SlotValue } from '@api-viewer/common/lib/index.js';
+import { Slot } from '@api-viewer/common/lib/index.js';
 import {
   hasTemplate,
   TemplateTypes
@@ -7,6 +7,7 @@ import {
   AbstractController,
   AbstractControllerHost
 } from './abstract-controller.js';
+import { SlotValue } from '../types.js';
 
 const capitalize = (name: string): string =>
   name[0].toUpperCase() + name.slice(1);

packages/api-demo/src/controllers/styles-controller.ts

@@ -1,12 +1,9 @@
-import {
-  CssCustomProperty,
-  CssCustomPropertyValue,
-  unquote
-} from '@api-viewer/common/lib/index.js';
+import { CssCustomProperty, unquote } from '@api-viewer/common/lib/index.js';
 import {
   AbstractController,
   AbstractControllerHost
 } from './abstract-controller.js';
+import { CssCustomPropertyValue } from '../types.js';
 
 export class StylesController extends AbstractController<CssCustomPropertyValue> {
   constructor(

packages/api-demo/src/layout.ts

@@ -17,21 +17,15 @@ import { SlotsController } from './controllers/slots-controller.js';
 import { StylesController } from './controllers/styles-controller.js';
 import { renderEvents } from './ui/events.js';
 import { renderSnippet } from './ui/snippet.js';
-import {
-  ComponentWithProps,
-  getCustomKnobs,
-  getInitialKnobs,
-  getKnobs,
-  Knob,
-  KnobValue
-} from './ui/knobs.js';
+import { getCustomKnobs, getInitialKnobs, getKnobs } from './ui/knobs.js';
 import { renderer } from './ui/renderer.js';
 import {
   cssPropRenderer,
   propRenderer,
   renderKnobs,
   slotRenderer
 } from './ui/controls.js';
+import { ComponentWithProps, Knob, KnobValue, PropertyKnob } from './types.js';
 
 class ApiDemoLayout extends LitElement {
   @property() copyBtnText = 'copy';
@@ -55,13 +49,13 @@ class ApiDemoLayout extends LitElement {
   @property({ type: Number }) vid?: number;
 
   @property({ attribute: false })
-  customKnobs!: Knob<ClassField>[];
+  customKnobs!: PropertyKnob[];
 
   @property({ attribute: false })
   knobs!: Record<string, Knob>;
 
   @property({ attribute: false })
-  propKnobs!: Knob<ClassField>[];
+  propKnobs!: PropertyKnob[];
 
   private _whenDefined: Record<string, Promise<unknown>> = {};
 
@@ -310,15 +304,15 @@ class ApiDemoLayout extends LitElement {
   }
 
   getKnob(name: string): {
-    knob: Knob<ClassField>;
+    knob: PropertyKnob;
     custom?: boolean;
   } {
-    const isMatch = (prop: Knob<ClassField>): boolean =>
+    const isMatch = (prop: PropertyKnob): boolean =>
       prop.name === name || prop.attribute === name;
     let knob = this.propKnobs.find(isMatch);
     let custom = false;
     if (!knob) {
-      knob = this.customKnobs.find(isMatch) as Knob<ClassField>;
+      knob = this.customKnobs.find(isMatch) as PropertyKnob;
       custom = true;
     }
     return { knob, custom };
@@ -342,7 +336,7 @@ class ApiDemoLayout extends LitElement {
     };
   }
 
-  syncKnob(component: Element, changed: Knob<ClassField>): void {
+  syncKnob(component: Element, changed: PropertyKnob): void {
     const { name, knobType, attribute } = changed;
     const value = (component as unknown as ComponentWithProps)[name];
 

packages/api-demo/src/types.ts

@@ -0,0 +1,32 @@
+import { CssCustomProperty, ClassField } from '@api-viewer/common/lib/index.js';
+
+export type CssCustomPropertyValue = CssCustomProperty & { value?: string };
+
+export interface SlotValue {
+  name: string;
+  content: string;
+}
+
+export type KnobValue = string | number | boolean | null | undefined;
+
+export type ComponentWithProps = {
+  [key: string]: KnobValue;
+};
+
+export type Knobable = unknown | (CssCustomProperty | ClassField | SlotValue);
+
+export type Knob<T extends Knobable = unknown> = T & {
+  attribute: string | undefined;
+  value: KnobValue;
+  custom?: boolean;
+  options?: string[];
+  knobType: string;
+  content?: string;
+};
+
+export type PropertyKnob = Knob<ClassField>;
+
+export interface HasKnobs {
+  getKnob(name: string): { knob: PropertyKnob; custom?: boolean };
+  syncKnob(component: Element, changed: PropertyKnob): void;
+}

packages/api-demo/src/ui/controls.ts

@@ -1,10 +1,10 @@
 import { html, TemplateResult } from 'lit';
 import {
-  ClassField,
   CssCustomPropertyValue,
+  Knobable,
+  PropertyKnob,
   SlotValue
-} from '@api-viewer/common/lib/index.js';
-import { Knob, Knobable } from './knobs.js';
+} from '../types.js';
 
 type InputRenderer = (item: Knobable, id: string) => TemplateResult;
 
@@ -29,7 +29,7 @@ export const propRenderer: InputRenderer = (
   knob: Knobable,
   id: string
 ): TemplateResult => {
-  const { name, knobType, value, options } = knob as Knob<ClassField>;
+  const { name, knobType, value, options } = knob as PropertyKnob;
   let input;
   if (knobType === 'select' && Array.isArray(options)) {
     input = html`
@@ -90,7 +90,7 @@ export const renderKnobs = (
   renderer: InputRenderer
 ): TemplateResult => {
   const rows = items.map((item: Knobable) => {
-    const { name, content } = item as Knob<ClassField>;
+    const { name, content } = item as PropertyKnob;
     const id = `${type}-${name || 'default'}`;
     const label = type === 'slot' ? content : name;
     return html`

packages/api-demo/src/ui/events.ts

@@ -1,11 +1,7 @@
 import { html, nothing, TemplateResult } from 'lit';
-import { KnobValue } from './knobs.js';
+import { KnobValue } from '../types.js';
 
-interface EventDetail {
-  value: KnobValue;
-}
-
-const renderDetail = (detail: EventDetail): string => {
+const renderDetail = (detail: { value: KnobValue }): string => {
   const result = detail;
   const undef = 'undefined';
   if ('value' in detail && detail.value === undefined) {

packages/api-demo/src/ui/knobs.ts

@@ -1,38 +1,12 @@
-import {
-  ClassField,
-  CssCustomProperty,
-  SlotValue,
-  unquote
-} from '@api-viewer/common/lib/index.js';
+import { ClassField, unquote } from '@api-viewer/common/lib/index.js';
 import {
   getTemplateNode,
   getTemplates,
   TemplateTypes
 } from '@api-viewer/common/lib/templates.js';
+import { ComponentWithProps, KnobValue, PropertyKnob } from '../types.js';
 
-export type KnobValue = string | number | boolean | null | undefined;
-
-export type ComponentWithProps = {
-  [key: string]: KnobValue;
-};
-
-export type Knobable = unknown | (CssCustomProperty | ClassField | SlotValue);
-
-export type Knob<T extends Knobable = unknown> = T & {
-  attribute: string | undefined;
-  value: KnobValue;
-  custom?: boolean;
-  options?: string[];
-  knobType: string;
-  content?: string;
-};
-
-export interface HasKnobs {
-  getKnob(name: string): { knob: Knob<ClassField>; custom?: boolean };
-  syncKnob(component: Element, changed: Knob<ClassField>): void;
-}
-
-const getDefault = (prop: Knob<ClassField>): KnobValue => {
+const getDefault = (prop: PropertyKnob): KnobValue => {
   const { knobType, default: value } = prop;
   switch (knobType) {
     case 'boolean':
@@ -75,12 +49,12 @@ export const getKnobs = (
   tag: string,
   props: ClassField[],
   exclude = ''
-): Knob<ClassField>[] => {
+): PropertyKnob[] => {
   // Exclude getters and specific properties
   let propKnobs = props.filter(
     ({ name }) =>
       !exclude.includes(name) && !isGetter(customElements.get(tag), name)
-  ) as Knob<ClassField>[];
+  ) as PropertyKnob[];
 
   // Set knob types and default knobs values
   propKnobs = propKnobs.map((prop) => {
@@ -99,10 +73,7 @@ export const getKnobs = (
   return propKnobs;
 };
 
-export const getCustomKnobs = (
-  tag: string,
-  vid?: number
-): Knob<ClassField>[] => {
+export const getCustomKnobs = (tag: string, vid?: number): PropertyKnob[] => {
   return getTemplates(vid as number, tag, TemplateTypes.KNOB)
     .map((template) => {
       const { attr, type } = template.dataset;
@@ -134,15 +105,15 @@ export const getCustomKnobs = (
           };
         }
       }
-      return result as Knob<ClassField>;
+      return result as PropertyKnob;
     })
     .filter(Boolean);
 };
 
 export const getInitialKnobs = (
-  propKnobs: Knob<ClassField>[],
+  propKnobs: PropertyKnob[],
   component: HTMLElement
-): Knob<ClassField>[] => {
+): PropertyKnob[] => {
   return propKnobs.filter((prop) => {
     const { name, knobType } = prop;
     const defaultValue = getDefault(prop);