Add full TypeScript support

Closes #194.
niksy · Jul 21, 2021 · fa3af79 · fa3af79
1 parent 5504256
commit fa3af79
Show file tree

Hide file tree

Showing 12 changed files with 88 additions and 54 deletions.
diff --git a/generators/app/index.js b/generators/app/index.js
@@ -491,8 +491,7 @@ module.exports = class extends Generator {
 					},
 					{
 						name: 'Full support',
-						value: 'full',
-						disabled: true
+						value: 'full'
 					}
 				],
 				when: (answers) => answers.typescript
@@ -563,6 +562,10 @@ module.exports = class extends Generator {
 		const browserSupport = getMinimumSupportedBrowserVersions(
 			browserVersion
 		);
+		const extension =
+			answers.typescript && answers.typescriptMode === 'full'
+				? 'ts'
+				: null;
 
 		const tpl = {
 			moduleName: preparePackageName(answers.name),
@@ -611,7 +614,8 @@ module.exports = class extends Generator {
 			bundleCjs: answers.bundleCjs,
 			cloudBrowsersToTest: answers.cloudBrowsersToTest,
 			typescript: answers.typescript,
-			typescriptMode: answers.typescriptMode
+			typescriptMode: answers.typescriptMode,
+			extension: extension
 		};
 
 		this.tpl = Object.assign({}, tpl, {
@@ -662,11 +666,11 @@ module.exports = class extends Generator {
 		if (answers.sassModule) {
 			cp('_index.scss', '_index.scss');
 		} else if (answers.cli) {
-			cp('cli.js', 'cli.js');
+			cp('cli.js', `cli.${extension || 'js'}`);
 		} else if (answers.complexTranspile) {
-			cp('index.js', 'src/index.js');
+			cp('index.js', `src/index.${extension || 'js'}`);
 		} else {
-			cp('index.js', 'index.js');
+			cp('index.js', `index.${extension || 'js'}`);
 		}
 
 		if (answers.browserModule) {
@@ -697,8 +701,10 @@ module.exports = class extends Generator {
 						`test/${automatedTestsDirectory}fixtures`
 					);
 					cp(
-						'test/automated/index.js',
-						`test/${automatedTestsDirectory}index.js`
+						`test/automated/index.${extension || 'js'}`,
+						`test/${automatedTestsDirectory}index.${
+							extension || 'js'
+						}`
 					);
 					if (answers.bundlingTool === 'webpack') {
 						cp(
@@ -708,11 +714,11 @@ module.exports = class extends Generator {
 					}
 					cp('karma.conf.js', 'karma.conf.js');
 				} else {
-					cp('test/index.js', 'test/index.js');
+					cp('test/index.js', `test/index.${extension || 'js'}`);
 					cp('test/index.scss', 'test/index.scss');
 				}
 			} else {
-				cp('test/index.js', 'test/index.js');
+				cp('test/index.js', `test/index.${extension || 'js'}`);
 			}
 			if (answers.codeCoverage && !answers.sassModule) {
 				cp('nycrc', '.nycrc');
@@ -721,6 +727,7 @@ module.exports = class extends Generator {
 			rm('.travis.yml');
 			rm('.github');
 			rm('test/index.js');
+			rm('test/index.ts');
 			rm('test/automated');
 			rm('karma.conf.js');
 			rm('.nycrc');
@@ -730,7 +737,10 @@ module.exports = class extends Generator {
 		if (answers.manualTests || answers.integrationTests) {
 			cp('test/manual/index.html', 'test/manual/index.html');
 			cp('test/manual/index.css', 'test/manual/index.css');
-			cp('test/manual/index.js', 'test/manual/index.js');
+			cp(
+				'test/manual/index.js',
+				`test/manual/index.${extension || 'js'}`
+			);
 			if (answers.bundlingTool === 'webpack') {
 				cp(
 					'test/manual/webpack.config.js',
@@ -750,7 +760,10 @@ module.exports = class extends Generator {
 		}
 
 		if (answers.integrationTests) {
-			cp('test/integration/index.js', 'test/integration/index.js');
+			cp(
+				'test/integration/index.js',
+				`test/integration/index.${extension || 'js'}`
+			);
 			cp('test/integration/eslintrc', 'test/integration/.eslintrc');
 			cp('wdio.conf.js', 'wdio.conf.js');
 		} else {

diff --git a/generators/app/templates/_package.json b/generators/app/templates/_package.json
@@ -2,8 +2,8 @@
   "name": "<%= moduleName %>",
   "version": "<% if ( version ) { %><%= version %><% } else { %>0.0.0<% } %>",
   "description": "<%= moduleDescription %>",<% if ( !cli ) { %>
-  "main": "<% if ( sassModule ) { %>_index.scss<% } else if ( cssModule ) { %>index.css<% } else { %><% if ( useDistDirectory ) { %>dist/<% } %><% if ( esModules ) { %><% if ( bundleCjs ) { %>cjs/<% } else { %>esm/<% } %><% } %>index.js<% } %>",<% if ( esModules ) { %>
-  "module": "<% if ( useDistDirectory ) { %>dist/<% } %><% if ( esModules ) { %>esm/<% } %>index.js",
+  "main": "<% if ( sassModule ) { %>_index.scss<% } else if ( cssModule ) { %>index.css<% } else { %><% if ( useDistDirectory ) { %>dist/<% } %><% if ( esModules ) { %><% if ( bundleCjs ) { %>cjs/<% } else { %>esm/<% } %><% } %>index.js<% } %>",<% if ( esModules ) { %>
+  "module": "<% if ( useDistDirectory ) { %>dist/<% } %><% if ( esModules ) { %>esm/<% } %>index.js",
   "exports": {
     ".": {
       "import": "./esm/index.js"<% if ( bundleCjs ) { %>,
@@ -37,24 +37,24 @@
     "release": "np --no-release-draft",<% if ( changelog ) { %>
     "version": "if [ $(git rev-parse --abbrev-ref HEAD) == 'master' ]; then version-changelog CHANGELOG.md && changelog-verify CHANGELOG.md && git add CHANGELOG.md; else echo; fi"<% if ( githubRelease ) { %>,
     "postpublish": "GITHUB_TOKEN=$GITHUB_RELEASE_TOKEN github-release-from-changelog"<% } %>,<% } %><% if ( (automatedTests && browserModule && !sassModule) || manualTests || integrationTests ) { %>
-    "lint": "<% if ( automatedTests || integrationTests ) { %>eslint '{<% if ( complexTranspile ) { %>src/index,src/lib/**/*<% if ( cli ) { %>,src/cli<% } %><% } else { %>index,lib/**/*<% if ( cli ) { %>,cli<% } %><% } %>,test/**/*}<% if ( vanillaJsWidget ) { %>.{js,svelte}<% } else { %>.js<% } %>'<% } else { %>eslint '{<% if ( complexTranspile ) { %>src/index,src/lib/**/*<% if ( cli ) { %>,src/cli<% } %><% } else { %>index,lib/**/*<% if ( cli ) { %>,cli<% } %><% } %>}<% if ( vanillaJsWidget ) { %>.{js,svelte}<% } else { %>.js<% } %>'<% } %><% if ( browserModule && styles ) { %> && stylelint 'index.css'<% } %>"<% } else if ( sassModule ) { %>
-    "lint": "<% if ( automatedTests ) { %>eslint 'test/**/*.js' && stylelint '{_index,test/**/*}.scss'<% } else { %>stylelint '_index.scss'<% } %>"<% } else { %>
-    "lint": "<% if ( automatedTests ) { %>eslint '{<% if ( complexTranspile ) { %>src/index,src/lib/**/*<% if ( cli ) { %>,src/cli<% } %><% } else { %>index,lib/**/*<% if ( cli ) { %>,cli<% } %><% } %>,test/**/*}.js'<% } else { %>eslint '{<% if ( complexTranspile ) { %>src/index,src/lib/**/*<% if ( cli ) { %>,src/cli<% } %><% } else { %>index,lib/**/*<% if ( cli ) { %>,cli<% } %><% } %>}.js'<% } %><% if ( browserModule && styles ) { %> && stylelint 'index.css'<% } %>"<% } %><% if ( typescript ) { %>,
+    "lint": "<% if ( automatedTests || integrationTests ) { %>eslint '{<% if ( complexTranspile ) { %>src/index,src/lib/**/*<% if ( cli ) { %>,src/cli<% } %><% } else { %>index,lib/**/*<% if ( cli ) { %>,cli<% } %><% } %>,test/**/*}<% if ( vanillaJsWidget ) { %>.{<%= extension || 'js' %>,svelte}<% } else { %>.<%= extension || 'js' %><% } %>'<% } else { %>eslint '{<% if ( complexTranspile ) { %>src/index,src/lib/**/*<% if ( cli ) { %>,src/cli<% } %><% } else { %>index,lib/**/*<% if ( cli ) { %>,cli<% } %><% } %>}<% if ( vanillaJsWidget ) { %>.{<%= extension || 'js' %>,svelte}<% } else { %>.<%= extension || 'js' %><% } %>'<% } %><% if ( browserModule && styles ) { %> && stylelint 'index.css'<% } %>"<% } else if ( sassModule ) { %>
+    "lint": "<% if ( automatedTests ) { %>eslint 'test/**/*.<%= extension || 'js' %>' && stylelint '{_index,test/**/*}.scss'<% } else { %>stylelint '_index.scss'<% } %>"<% } else { %>
+    "lint": "<% if ( automatedTests ) { %>eslint '{<% if ( complexTranspile ) { %>src/index,src/lib/**/*<% if ( cli ) { %>,src/cli<% } %><% } else { %>index,lib/**/*<% if ( cli ) { %>,cli<% } %><% } %>,test/**/*}.<%= extension || 'js' %>'<% } else { %>eslint '{<% if ( complexTranspile ) { %>src/index,src/lib/**/*<% if ( cli ) { %>,src/cli<% } %><% } else { %>index,lib/**/*<% if ( cli ) { %>,cli<% } %><% } %>}.<%= extension || 'js' %>'<% } %><% if ( browserModule && styles ) { %> && stylelint 'index.css'<% } %>"<% } %><% if ( typescript ) { %>,
     "lint:types": "tsc"<% } %><% if ( automatedTests && browserModule && !sassModule ) { %>,
-    "test:automated": "<% if ( transpile ) { %>BABEL_ENV=test <% } %>karma start",
+    "test:automated": "<% if ( transpile ) { %>BABEL_ENV=test <% } %>karma start",
     "test:automated:watch": "npm run test:automated -- --auto-watch --no-single-run"<% } %><% if ( manualTests || integrationTests ) { %>,
-    "test:generate-static-site": "<% if ( transpile ) { %>BABEL_ENV=test <% } %><% if ( bundlingTool === 'webpack' ) { %>webpack --config ./test/manual/webpack.config.js<% } %><% if ( bundlingTool === 'rollup' ) { %>rollup --config ./test/manual/rollup.config.js<% } %>",
-    "test:generate-static-site:watch": "<% if ( transpile ) { %>BABEL_ENV=test <% } %><% if ( bundlingTool === 'webpack' ) { %>webpack serve --config ./test/manual/webpack.config.js<% } %><% if ( bundlingTool === 'rollup' ) { %>rollup --config ./test/manual/rollup.config.js --watch<% } %>"<% if ( integrationTests ) { %>,
+    "test:generate-static-site": "<% if ( transpile ) { %>BABEL_ENV=test <% } %><% if ( bundlingTool === 'webpack' ) { %>webpack --config ./test/manual/webpack.config.js<% } %><% if ( bundlingTool === 'rollup' ) { %>rollup --config ./test/manual/rollup.config.js<% } %>",
+    "test:generate-static-site:watch": "<% if ( transpile ) { %>BABEL_ENV=test <% } %><% if ( bundlingTool === 'webpack' ) { %>webpack serve --config ./test/manual/webpack.config.js<% } %><% if ( bundlingTool === 'rollup' ) { %>rollup --config ./test/manual/rollup.config.js --watch<% } %>"<% if ( integrationTests ) { %>,
     "test:integration": "npm run test:generate-static-site && wdio",
     "test:integration:watch": "npm run test:generate-static-site:watch & wdio"<% } %><% } %><% if ( manualTests ) { %>,
     "test:manual": "npm run test:generate-static-site:watch"<% } %><% if ( (automatedTests && browserModule && !sassModule) || manualTests || integrationTests ) { %>,
     "test": "npm run lint<% if ( automatedTests && browserModule && !sassModule ) { %> && npm run test:automated<% } %><% if ( integrationTests ) { %> && npm run test:integration<% } %>"<% } else if ( sassModule ) { %>,
-    "test": "npm run lint<% if ( automatedTests ) { %> && mocha 'test/**/*.js'<% } %>"<% if ( automatedTests ) { %>,
+    "test": "npm run lint<% if ( automatedTests ) { %> && mocha 'test/**/*.<%= extension || 'js' %>'<% } %>"<% if ( automatedTests ) { %>,
     "test:watch": "npm test -- --watch"<% } %><% } else { %>,
-    "test": "<% if ( codeCoverage ) { %>([ -z $WATCH_TEST ] && npm run lint || echo)<% } else { %>npm run lint<% } %><% if ( automatedTests ) { %> && <% if ( codeCoverage ) { %><% if ( transpile ) { %>BABEL_ENV=test <% } %>nyc mocha<% } else { %>mocha<% } %><% if ( transpile ) { %> --require @babel/register<% } %><% if ( esModules ) { %> --require esm<% } %> 'test/**/*.js'<% if ( codeCoverage ) { %> && nyc check-coverage<% } %><% } else { %><% } %>"<% if ( automatedTests ) { %>,
-    "test:watch": "<% if ( codeCoverage ) { %>WATCH_TEST=1 nodemon --exec npm test<% } else { %>npm test -- --watch<% } %>"<% } %><% if ( codeCoverageService ) { %>,
+    "test": "<% if ( codeCoverage ) { %>([ -z $WATCH_TEST ] && npm run lint || echo)<% } else { %>npm run lint<% } %><% if ( automatedTests ) { %> && <% if ( codeCoverage ) { %><% if ( transpile ) { %>BABEL_ENV=test <% } %>nyc mocha<% } else { %>mocha<% } %><% if ( transpile ) { %> --require @babel/register<% } %><% if ( esModules ) { %> --require esm<% } %><% if ( !transpile && typescript && typescriptMode === 'full' ) { %> --require ts-node/register --extension ts<% } %> 'test/**/*.<%= extension || 'js' %>'<% if ( codeCoverage ) { %> && nyc check-coverage<% } %><% } else { %><% } %>"<% if ( automatedTests ) { %>,
+    "test:watch": "<% if ( codeCoverage ) { %>WATCH_TEST=1 nodemon<% if ( typescript && typescriptMode === 'full' ) { %> --ext js,json,ts<% } %> --exec npm test<% } else { %>npm test -- --watch<% } %>"<% } %><% if ( codeCoverageService ) { %>,
     "posttest:ci": "cat ./coverage/lcov.info | coveralls"<% } %><% } %><% if ( transpile || esModules ) { %>,
-    "build": "<% if ( esModules ) { %>rollup --config rollup.config.js<% } else { %>babel <% if ( complexTranspile ) { %>src<% } else { %>'{index,lib/**/*}.js'<% } %> --out-dir <% if ( complexTranspile ) { %>./<% } else { %>dist/<% } %><% if ( sourceMaps ) { %> --source-maps true<% } %><% } %>",<% if ( esModules ) { %>
+    "build": "<% if ( esModules ) { %>rollup --config rollup.config.js<% } else { %>babel <% if ( complexTranspile ) { %>src<% } else { %>'{index,lib/**/*}.<%= extension || 'js' %>'<% } %> --out-dir <% if ( complexTranspile ) { %>./<% } else { %>dist/<% } %><% if ( sourceMaps ) { %> --source-maps true<% } %><% } %>",<% if ( esModules ) { %>
     "module-check": "<% if ( bundleCjs ) { %>node -e 'require(\"<%= moduleName %>\");' && <% } %>node --input-type=module -e 'import \"<%= moduleName %>\";'",<% } %>
     "prepublishOnly": "npm run build<% if ( typescript ) { %> && npm run lint:types<% } %><% if ( esModules ) { %> && npm run module-check<% } %>"<% } %>
   },
@@ -66,7 +66,8 @@
     "eslint": "^7.31.0",
     "eslint-config-niksy": "^10.0.0",
     "eslint-plugin-import": "^2.23.4",
-    "eslint-plugin-jsdoc": "^33.3.0"<% if ( automatedTests ) { %>,
+    "eslint-plugin-jsdoc": "^33.3.0"<% if ( typescript && typescriptMode === 'full' ) { %>,
+    "@typescript-eslint/parser": "^4.28.4"<% } %><% if ( automatedTests ) { %>,
     "eslint-plugin-mocha": "^8.0.0"<% } %>,
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.1.0",
@@ -116,7 +117,8 @@
     "postcss-preset-env": "^6.7.0",
     "suitcss-components-test": "^1.0.0"<% } %><% if ( (manualTests || integrationTests) && browserModule && !sassModule && bundlingTool === 'rollup' ) { %>,
     "minimist": "^1.2.0"<% } %><% if ( (manualTests || integrationTests) || ((browserModule && !sassModule) && (transpile || automatedTests)) ) { %><% if ( bundlingTool === 'webpack' ) { %>,
-    "webpack": "^5.2.0",
+    "webpack": "^5.2.0",<% if ( typescript && typescriptMode === 'full' ) { %>
+    "ts-loader": "^9.2.3",<% } %>
     "node-libs-browser": "^2.2.1"<% } %><% } %><% if ( sassModule ) { %>,
     "sass-true": "^2.1.3"<% } %><% if ( integrationTests ) { %><% if ( cloudBrowsers ) { %>,
     "@wdio/browserstack-service": "^6.6.7"<% } %>,
@@ -130,7 +132,8 @@
     "@babel/core": "^7.2.2",
     "@babel/cli": "^7.2.3",
     "core-js": "^2.6.5",
-    "@babel/preset-env": "^7.12.1"<% if ( browserModule && browserSupport.ie <= 11 ) { %>,
+    "@babel/preset-env": "^7.12.1"<% if ( typescript && typescriptMode === 'full' ) { %>,
+    "@babel/preset-typescript": "^7.14.5"<% } %><% if ( browserModule && browserSupport.ie <= 11 ) { %>,
     "@babel/plugin-transform-member-expression-literals": "^7.12.1",
     "@babel/plugin-transform-property-literals": "^7.12.1",
     "@babel/plugin-transform-object-assign": "^7.2.0"<% } %><% if ( browserModule && !sassModule ) { %><% if ( bundlingTool === 'webpack' ) { %>,
@@ -139,7 +142,8 @@
     "@babel/runtime": "^7.2.0"<% } %><% if ( automatedTests ) { %><% if ( !browserModule || (browserModule && integrationTests) ) { %>,
     "@babel/register": "^7.0.0"<% } %><% if ( codeCoverage ) { %><% if ( !browserModule && !sassModule ) { %>,
     "babel-plugin-istanbul": "^6.0.0"<% } %><% } %><% } %><% } %><% if ( esModules ) { %>,
-    "rollup": "^2.32.1"<% if ( transpile ) { %>,
+    "rollup": "^2.32.1"<% if ( !transpile && typescript && typescriptMode === 'full' ) { %>,
+    "@rollup/plugin-typescript": "^8.2.3"<% } %><% if ( transpile ) { %>,
     "@rollup/plugin-babel": "^5.2.1"<% } %><% } %><% if ( bundlingTool === 'rollup' ) { %>,
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-commonjs": "^15.1.0",
@@ -149,7 +153,8 @@
     "rollup-plugin-svelte": "^6.1.0",
     "svelte": "^2.16.1"<% } %><% if ( typescript ) { %>,
     "typescript": "^4.3.5",
-    "execa": "^5.1.1",<% if ( browserModule ) { %>
+    "execa": "^5.1.1",<% if ( !transpile && typescriptMode === 'full' && (!browserModule || (browserModule && integrationTests)) ) { %>
+    "ts-node": "^10.1.0",<% } %><% if ( browserModule ) { %>
     "@types/karma-fixture": "^0.2.5",<% } %>
     "@types/node": "^16.3.0"<% if ( automatedTests || integrationTests ) { %>,
     "@types/mocha": "^8.2.3"<% } %><% } %>

diff --git a/generators/app/templates/babelrc b/generators/app/templates/babelrc
@@ -6,7 +6,8 @@
 			"targets": {
 				"node": "<%= nodeEngineVersion %>"
 			}
-		}]<% } %>
+		}]<% } %><% if ( typescript && typescriptMode === 'full' ) { %>,
+		"@babel/preset-typescript"<% } %>
 	]<% if ( browserModule && browserSupport.ie <= 11 ) { %>,
 	"plugins": [
 		"@babel/plugin-transform-member-expression-literals",

diff --git a/generators/app/templates/eslintrc b/generators/app/templates/eslintrc
@@ -23,7 +23,7 @@ files.push("rollup.config.js"); } %>{
 	"settings": {
 		"html/html-extensions": [".svelte"],
 		"html/indent": "0"
-	}<% } %><% if ( browserModule ) { %>,
+	}<% } %><% if ( browserModule || (!browserModule && esModules) ) { %>,
 	"overrides": [
 		{
 			<% if ( files.length !== 0 ) { %>"files": [<% for ( var i = 0, filesLength = files.length; i < filesLength; i++ ) { %>

diff --git a/generators/app/templates/karma.conf.js b/generators/app/templates/karma.conf.js
@@ -60,13 +60,13 @@ module.exports = function ( baseConfig ) {
 		files: [
 			'test/<% if ( manualTests || integrationTests ) { %>automated/<% } %>**/*.html',<% if ( bundlingTool === 'webpack' ) { %>
 			'test/<% if ( manualTests || integrationTests ) { %>automated/<% } %>**/.webpack.js'<% } %><% if ( bundlingTool === 'rollup' ) { %>
-			{ pattern: 'test/<% if ( manualTests || integrationTests ) { %>automated/<% } %><% if ( vanillaJsWidget ) { %>index<% } else { %>**/*<% } %>.js', watched: false }<% } %>
+			{ pattern: 'test/<% if ( manualTests || integrationTests ) { %>automated/<% } %><% if ( vanillaJsWidget ) { %>index<% } else { %>**/*<% } %>.<%= extension || 'js' %>', watched: false }<% } %>
 		],
 		exclude: [],
 		preprocessors: {
 			'test/<% if ( manualTests || integrationTests ) { %>automated/<% } %>**/*.html': ['html2js'],<% if ( bundlingTool === 'webpack' ) { %>
 			'test/<% if ( manualTests || integrationTests ) { %>automated/<% } %>**/.webpack.js': ['webpack', 'sourcemap']<% } %><% if ( bundlingTool === 'rollup' ) { %>
-			'test/<% if ( manualTests || integrationTests ) { %>automated/<% } %><% if ( vanillaJsWidget ) { %>index<% } else { %>**/*<% } %>.js': ['rollup', 'sourcemap']<% } %>
+			'test/<% if ( manualTests || integrationTests ) { %>automated/<% } %><% if ( vanillaJsWidget ) { %>index<% } else { %>**/*<% } %>.<%= extension || 'js' %>': ['rollup', 'sourcemap']<% } %>
 		},
 		reporters: ['mocha'<% if ( codeCoverage ) { %>, 'coverage'<% } %>],
 		port: port,
@@ -92,14 +92,14 @@ module.exports = function ( baseConfig ) {
 			module: {
 				rules: [<% if ( transpile ) { %>
 					{
-						test: /\.js$/,
+						test: /\.<%= extension || 'js' %>$/,
 						exclude: /node_modules/,
 						use: [{
 							loader: 'babel-loader'
 						}]
 					}<% } %><% if ( transpile && codeCoverage ) { %>,<% } %><% if ( codeCoverage ) { %>
 					{
-						test: /\.js$/,
+						test: /\.<%= extension || 'js' %>$/,
 						exclude: /(node_modules|test)/,
 						enforce: 'post',
 						use: [{
@@ -115,7 +115,7 @@ module.exports = function ( baseConfig ) {
 		rollupPreprocessor: {
 			plugins: [<% if ( codeCoverage ) { %>
 				istanbul({
-					exclude: ['test/<% if ( manualTests || integrationTests ) { %>automated/<% } %>**/*.js', 'node_modules/**/*']
+					exclude: ['test/<% if ( manualTests || integrationTests ) { %>automated/<% } %>**/*.<%= extension || 'js' %>', 'node_modules/**/*']
 				}),<% } %>
 				nodeBuiltins()<% if ( transpile ) { %>,
 				babel({
@@ -136,7 +136,7 @@ module.exports = function ( baseConfig ) {
 				...rollupConfig.plugins<% if ( transpile || esModules || typescript ) { %>.filter(({ name }) => ![<% if ( transpile ) { %>'babel'<% } %><% if ( esModules ) { %>, 'package-type'<% } %><% if ( typescript ) { %>, 'types'<% } %>].includes(name))<% } %><% if ( vanillaJsWidget ) { %>,
 				babel({
 					exclude: 'node_modules/**',
-					extensions: ['.js', '.svelte'],
+					extensions: ['.<%= extension || 'js' %>', '.svelte'],
 					babelHelpers: 'runtime'
 				}),
 				babel({

diff --git a/generators/app/templates/lintstagedrc b/generators/app/templates/lintstagedrc
@@ -1,5 +1,5 @@
 {
-	"*<% if ( vanillaJsWidget ) { %>.{js,svelte}<% } else { %>.js<% } %>": ["eslint --fix"],<% if (browserModule && styles) { %>
+	"*<% if ( vanillaJsWidget ) { %>.{<%= extension || 'js' %>,svelte}<% } else { %>.<%= extension || 'js' %><% } %>": ["eslint --fix"],<% if (browserModule && styles) { %>
 	"*<% if (sassModule) { %>.{css,scss}<% } else { %>.css<% } %>": ["stylelint --fix"],<% } %>
 	"*.md": ["prettier --ignore-path .gitignore --write"],
 	".!(npm<% if (browserModule) { %>|browserslist<% } %>)*rc": [