Updated templates

componentGenerator/index.mjs

@@ -69,7 +69,6 @@ async function getConfig(configPath) {
  */
 async function enquiry(prompts, cliOptions = {}) {
   const answers = await inquirer.prompt(prompts, cliOptions);
-
   return answers;
 }
 

componentGenerator/templates/tsTemplateBlock.mjs

@@ -2,16 +2,25 @@ export default function ({ kebabCase }) {
   return `import { html, render } from 'lit';
 import './${kebabCase}.scss';
 
-const template = () => {
+interface TemplateArgs {
+  heading: string;
+  text: string;
+}
+
+const template = (args: TemplateArgs) => {
+  const { heading, text } = args;
   return html\`
-    <h1>This is a heading.</h1>
-    <p>This is text.</p>
+    <h1>\${heading}</h1>
+    <p>\${text}</p>
   \`;
 };
 
 export default function decorate(block: HTMLElement) {
+  const heading: string = "This is a heading.";
+  const text: string = "This is text.";
+
   block.style.removeProperty('display');
-  render(template(), block);
+  render(template({ heading, text }), block);
 }
 `;
 }

componentGenerator/templates/tsTemplateComponent.mjs

@@ -5,6 +5,10 @@ import './${kebabCase}.scss';
 
 @customElement('${kebabCase}')
 export class ${pascalCase} extends LitElement {
+  protected createRenderRoot(): HTMLElement | DocumentFragment {
+    return this;
+  }
+
   render() {
     return html\`
       <h1>This is a heading.</h1>