feat: add typescript template for lwc (#590)

.eslintrc.json

@@ -67,5 +67,8 @@
     "@typescript-eslint/no-non-null-assertion": ["off"],
     "@typescript-eslint/no-var-requires": ["off"]
   },
-  "ignorePatterns": ["*.js"]
+  "ignorePatterns": [
+    "*.js",
+    "src/templates/lightningcomponent/lwc/typeScript/*"
+  ]
 }

src/generators/lightningComponentGenerator.ts

@@ -148,17 +148,18 @@ export default class LightningComponentGenerator extends BaseGenerator<Lightning
         )!
         .join('-')
         .toLowerCase();
+      const ext = template === 'typeScript' ? 'ts' : 'js';
 
       this.sourceRootWithPartialPath(
         path.join('lightningcomponent', 'lwc', template)
       );
       await this.render(
-        this.templatePath(`${template}.js`),
+        this.templatePath(`${template}.${ext}`),
         this.destinationPath(
           path.join(
             this.outputdir,
             camelCaseComponentName,
-            `${camelCaseComponentName}.js`
+            `${camelCaseComponentName}.${ext}`
           )
         ),
         { pascalCaseComponentName }
@@ -177,13 +178,13 @@ export default class LightningComponentGenerator extends BaseGenerator<Lightning
       );
 
       await this.render(
-        this.templatePath(path.join(`__tests__`, `${template}.test.js`)),
+        this.templatePath(path.join(`__tests__`, `${template}.test.${ext}`)),
         this.destinationPath(
           path.join(
             this.outputdir,
             camelCaseComponentName,
             `__tests__`,
-            `${camelCaseComponentName}.test.js`
+            `${camelCaseComponentName}.test.${ext}`
           )
         ),
         {
@@ -193,6 +194,16 @@ export default class LightningComponentGenerator extends BaseGenerator<Lightning
         }
       );
 
+      if (template === 'typeScript') {
+        await this.render(
+          this.templatePath('gitignore'),
+          this.destinationPath(
+            path.join(this.outputdir, camelCaseComponentName, '.gitignore')
+          ),
+          {}
+        );
+      }
+
       if (!internal) {
         const masterLabel = camelCaseToTitleCase(componentname)
           .replace(/</g, '&lt;')

src/templates/lightningcomponent/lwc/typeScript/__tests__/typeScript.test.ts

@@ -0,0 +1,25 @@
+import { createElement } from 'lwc';
+import <%= pascalCaseComponentName %> from 'c/<%= camelCaseComponentName %>';
+
+describe('c-<%= kebabCaseComponentName %>', () => {
+    afterEach(() => {
+        // The jsdom instance is shared across test cases in a single file so reset the DOM
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild);
+        }
+    });
+
+    it('TODO: test case generated by CLI command, please fill in test logic', () => {
+        // Arrange
+        const element = createElement('c-<%= kebabCaseComponentName %>', {
+            is: <%= pascalCaseComponentName %>
+        });
+
+        // Act
+        document.body.appendChild(element);
+
+        // Assert
+        // const div = element.shadowRoot.querySelector('div');
+        expect(1).toBe(1);
+    });
+});

src/templates/lightningcomponent/lwc/typeScript/gitignore

@@ -0,0 +1 @@
+*.js

src/templates/lightningcomponent/lwc/typeScript/typeScript.html

@@ -0,0 +1,3 @@
+<template>
+
+</template>

src/templates/lightningcomponent/lwc/typeScript/typeScript.js-meta.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion><%= apiVersion %></apiVersion>
+    <isExposed>false</isExposed>
+</LightningComponentBundle>

src/templates/lightningcomponent/lwc/typeScript/typeScript.ts

@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class <%= pascalCaseComponentName %> extends LightningElement {}

src/utils/types.ts

@@ -80,7 +80,11 @@ export interface LightningAppOptions extends TemplateOptions {
 
 export interface LightningComponentOptions extends TemplateOptions {
   componentname: string;
-  template: 'default' | 'analyticsDashboard' | 'analyticsDashboardWithStep';
+  template:
+    | 'default'
+    | 'analyticsDashboard'
+    | 'analyticsDashboardWithStep'
+    | 'typeScript';
   type: 'aura' | 'lwc';
   internal: boolean;
 }

test/service/templateService.test.ts

@@ -638,6 +638,34 @@ describe('TemplateService', () => {
         );
     });
 
+    it('should create LightningComponent (lwc) with TypeScript', async () => {
+      await remove(path.join('testsoutput', 'libraryCreate', 'lwc'));
+      const templateService = TemplateService.getInstance();
+      const result = await templateService.create(
+        TemplateType.LightningComponent,
+        {
+          componentname: 'LibraryCreateComponent',
+          outputdir: path.join('testsoutput', 'libraryCreate', 'lwc'),
+          template: 'typeScript',
+          type: 'lwc',
+        }
+      );
+
+      chai
+        .expect(result.created.sort())
+        .to.deep.equal(
+          [
+            'testsoutput/libraryCreate/lwc/libraryCreateComponent/libraryCreateComponent.ts',
+            'testsoutput/libraryCreate/lwc/libraryCreateComponent/libraryCreateComponent.html',
+            'testsoutput/libraryCreate/lwc/libraryCreateComponent/__tests__/libraryCreateComponent.test.ts',
+            'testsoutput/libraryCreate/lwc/libraryCreateComponent/libraryCreateComponent.js-meta.xml',
+            'testsoutput/libraryCreate/lwc/libraryCreateComponent/.gitignore',
+          ]
+            .map((p) => path.normalize(p))
+            .sort()
+        );
+    });
+
     it('should create LightningEvent', async () => {
       await remove(path.join('testsoutput', 'libraryCreate', 'aura'));
       const templateService = TemplateService.getInstance();

tsconfig.json

@@ -5,5 +5,6 @@
     "allowSyntheticDefaultImports": true,
     "skipLibCheck": true
   },
-  "include": ["./src/**/*"]
+  "include": ["./src/**/*"],
+  "exclude": ["./src/templates/lightningcomponent/lwc/typeScript/*"]
 }