feat(components): separate class and template exports

src/components/test-input/src/test-input.js

@@ -0,0 +1,37 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement } from 'lit';
+import { SearchTypeaheadAPI } from '../../../services/SearchTypeahead/index.js';
+
+/**
+ * Input component using search typeahead api
+ */
+export default class testInput extends LitElement {
+  static properties = {
+    searchResults: { attribute: false },
+  };
+
+  constructor() {
+    super();
+    this.searchResults;
+  }
+
+  async getResults(searchQuery) {
+    const response = await SearchTypeaheadAPI.getResults(searchQuery);
+    return response.map((res) => res[0]);
+  }
+
+  _handleInput(event) {
+    const { value } = event.target;
+    this.getResults(value).then((res) => {
+      this.searchResults = res;
+    });
+  }
+}

src/components/test-input/src/test-input.template.js

@@ -0,0 +1,20 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { html } from 'lit';
+
+export function testInputTemplate(cls) {
+  const { _handleInput: handleInput } = cls;
+  return html`<div>
+    <label>Search typeahead</label>
+    <input type="text" @input="${handleInput}" />
+    ${cls.searchResults
+    ? cls.searchResults.map((result) => html`<p>${result}</p>`)
+    : undefined}
+  </div>`;
+}

src/components/test-input/test-input.js

@@ -8,45 +8,14 @@
  */
 
 import settings from '../../globals/settings.js';
-import { LitElement, html } from 'lit';
-import { SearchTypeaheadAPI } from '../../services/SearchTypeahead/index.js';
+import testInput from './src/test-input.js';
+import { testInputTemplate } from './src/test-input.template.js';
 
 const { stablePrefix: c4aiPrefix } = settings;
 
-/**
- * Input component using search typeahead api
- */
-export default class C4AITestInput extends LitElement {
-  static properties = {
-    searchResults: { attribute: false },
-  };
-
-  constructor() {
-    super();
-    this.searchResults;
-  }
-
-  async getResults(searchQuery) {
-    const response = await SearchTypeaheadAPI.getResults(searchQuery);
-    return response.map((res) => res[0]);
-  }
-
-  _handleInput(event) {
-    const { value } = event.target;
-    this.getResults(value).then((res) => {
-      this.searchResults = res;
-    });
-  }
-
+class C4AITestInput extends testInput {
   render() {
-    const { _handleInput: handleInput } = this;
-    return html`<div>
-      <label>Search typeahead</label>
-      <input type="text" @input="${handleInput}" />
-      ${this.searchResults
-        ? this.searchResults.map((result) => html`<p>${result}</p>`)
-        : undefined}
-    </div>`;
+    return testInputTemplate(this);
   }
 }