From fa3af79d2e9da51dcdeee20a542507375399568d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Nikoli=C4=87?= Date: Wed, 21 Jul 2021 11:39:49 +0200 Subject: [PATCH] Add full TypeScript support Closes #194. --- generators/app/index.js | 37 ++++++++++++------ generators/app/templates/_package.json | 39 +++++++++++-------- generators/app/templates/babelrc | 3 +- generators/app/templates/eslintrc | 2 +- generators/app/templates/karma.conf.js | 12 +++--- generators/app/templates/lintstagedrc | 2 +- generators/app/templates/rollup.config.js | 17 ++++---- .../app/templates/test/automated/webpack.js | 2 +- .../templates/test/manual/rollup.config.js | 8 +++- .../templates/test/manual/webpack.config.js | 11 +++++- generators/app/templates/tsconfig.json | 2 +- generators/app/templates/wdio.conf.js | 7 ++-- 12 files changed, 88 insertions(+), 54 deletions(-) diff --git a/generators/app/index.js b/generators/app/index.js index 5b72a42..34ec428 100644 --- 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 index 052b151..d951aee 100644 --- 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 index dae31c6..b556ff6 100644 --- 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 index 6dee88a..b523ddb 100644 --- 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 index 379f44c..0223911 100644 --- 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 index 2df3e36..b11b444 100644 --- 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": [ diff --git a/generators/app/templates/rollup.config.js b/generators/app/templates/rollup.config.js index cac4dfc..26d091b 100644 --- a/generators/app/templates/rollup.config.js +++ b/generators/app/templates/rollup.config.js @@ -4,12 +4,13 @@ const { default: babel } = require('@rollup/plugin-babel');<% } %><% if ( vanill const path = require('path'); const svelte = require('rollup-plugin-svelte'); const babelCore = require('@babel/core');<% } %><% if ( typescript ) { %> -const execa = require('execa');<% } %> +const execa = require('execa');<% if ( !transpile && typescriptMode === 'full' ) { %> +const typescript = require('@rollup/plugin-typescript');<% } %><% } %> const path = require('path'); const { promises: fs } = require('fs'); module.exports = { - input: '<% if ( complexTranspile ) { %>src/<% } %>index.js', + input: '<% if ( complexTranspile ) { %>src/<% } %>index.<%= extension || 'js' %>', output: [<% if ( bundleCjs ) { %> { file: 'cjs/index.js', @@ -27,16 +28,16 @@ module.exports = { return { name: 'types', async writeBundle(output) { - let prefix; + let prefix;<% if ( bundleCjs ) { %> if (output.file.includes('cjs/')) { prefix = 'cjs'; - } else if (output.file.includes('esm/')) { + } else <% } %>if (output.file.includes('esm/')) { prefix = 'esm'; } if (typeof prefix !== 'undefined') { const tsconfig = { extends: './tsconfig', - exclude: ['test/**/*.js'], + exclude: ['test/**/*.<%= extension || 'js' %>'], compilerOptions: { declaration: true, declarationMap: true, @@ -89,7 +90,9 @@ module.exports = { } } } - })(),<% if ( transpile ) { %><% if ( vanillaJsWidget ) { %> + })(),<% if ( !transpile && typescript && typescriptMode === 'full' ) { %>typescript({ + target: 'esnext' + })<% } %><% if ( transpile ) { %><% if ( vanillaJsWidget ) { %> svelte({ legacy: true }), @@ -111,7 +114,7 @@ module.exports = { babel({ babelHelpers: 'bundled', exclude: 'node_modules/**'<% if ( vanillaJsWidget ) { %>, - extensions: ['.js', '.svelte']<% } %> + extensions: ['.<%= extension || 'js' %>', '.svelte']<% } %> })<% if ( vanillaJsWidget ) { %>, babel({ include: 'node_modules/svelte/shared.js', diff --git a/generators/app/templates/test/automated/webpack.js b/generators/app/templates/test/automated/webpack.js index 4c2963d..22b262c 100644 --- a/generators/app/templates/test/automated/webpack.js +++ b/generators/app/templates/test/automated/webpack.js @@ -1,2 +1,2 @@ -<% if ( transpile ) { %>const<% } else { %>var<% } %> testsContext = require.context('.', true, /^((?!(\.webpack|fixtures\/)).)*\.js$/); +<% if ( transpile ) { %>const<% } else { %>var<% } %> testsContext = require.context('.', true, /^((?!(\.webpack|fixtures\/)).)*\.<%= extension || 'js' %>$/); testsContext.keys().forEach(testsContext); diff --git a/generators/app/templates/test/manual/rollup.config.js b/generators/app/templates/test/manual/rollup.config.js index e2d8683..e1c7470 100644 --- a/generators/app/templates/test/manual/rollup.config.js +++ b/generators/app/templates/test/manual/rollup.config.js @@ -7,7 +7,8 @@ const minimist = require('minimist'); const staticSite = require('rollup-plugin-static-site'); const postcss = require('rollup-plugin-postcss'); const serve = require('rollup-plugin-serve');<% if ( transpile ) { %> -const { default: babel } = require('@rollup/plugin-babel');<% } %> +const { default: babel } = require('@rollup/plugin-babel');<% } %><% if ( !transpile && typescript && typescriptMode === 'full' ) { %> +const typescript = require('@rollup/plugin-typescript');<% } %> const atImport = require('postcss-import'); const postcssPresetEnv = require('postcss-preset-env'); @@ -32,7 +33,7 @@ const config = async () => { await del(['./test-dist']); - const files = await globby(['./test/manual/**/*.js', '!./test/manual/rollup.config.js']); + const files = await globby(['./test/manual/**/*.<%= extension || 'js' %>', '!./test/manual/rollup.config.js']); const entries = files .map(( file ) => { @@ -58,6 +59,9 @@ const config = async () => { babel({ babelHelpers: 'bundled', exclude: 'node_modules/**' + }),<% } %><% if ( !transpile && typescript && typescriptMode === 'full' ) { %> + typescript({ + target: 'esnext' }),<% } %> postcss({ extract: true, diff --git a/generators/app/templates/test/manual/webpack.config.js b/generators/app/templates/test/manual/webpack.config.js index 8876886..a3018b7 100644 --- a/generators/app/templates/test/manual/webpack.config.js +++ b/generators/app/templates/test/manual/webpack.config.js @@ -14,7 +14,7 @@ module.exports = async () => { await del(['./test-dist']); - const files = await globby(['./test/manual/**/*.js', '!./test/manual/webpack.config.js']); + const files = await globby(['./test/manual/**/*.<%= extension || 'js' %>', '!./test/manual/webpack.config.js']); const entries = files .map(( file ) => { @@ -74,11 +74,18 @@ module.exports = async () => { ], }<% if ( transpile ) { %>, { - test: /\.js$/, + test: /\.<%= extension || 'js' %>$/, exclude: /node_modules/, use: [{ loader: 'babel-loader' }] + }<% } %><% if ( !transpile && typescript && typescriptMode === 'full' ) { %>, + { + test: /\.ts$/, + exclude: /node_modules/, + use: [{ + loader: 'ts-loader' + }] }<% } %> ], }, diff --git a/generators/app/templates/tsconfig.json b/generators/app/templates/tsconfig.json index 6408e40..f20f0fe 100644 --- a/generators/app/templates/tsconfig.json +++ b/generators/app/templates/tsconfig.json @@ -16,5 +16,5 @@ "types": ["node"<% if ( automatedTests || integrationTests ) { %>, "mocha"<% } %><% if ( browserModule ) { %>, "karma-fixture"<% } %>], "isolatedModules": true }, - "include": ["<% if ( complexTranspile ) { %>src/<% } %>index.js", "<% if ( complexTranspile ) { %>src/<% } %>lib/**/*.js", "test/**/*.js"] + "include": ["<% if ( complexTranspile ) { %>src/<% } %>index.<%= extension || 'js' %>", "<% if ( complexTranspile ) { %>src/<% } %>lib/**/*.<%= extension || 'js' %>", "test/**/*.<%= extension || 'js' %>"] } diff --git a/generators/app/templates/wdio.conf.js b/generators/app/templates/wdio.conf.js index 847cf64..9975be3 100644 --- a/generators/app/templates/wdio.conf.js +++ b/generators/app/templates/wdio.conf.js @@ -52,7 +52,7 @@ if ( local ) { module.exports.config = Object.assign({ specs: [ - './test/integration/**/*.js' + './test/integration/**/*.<%= extension || 'js' %>' ], exclude: [], maxInstances: 10, @@ -61,9 +61,10 @@ module.exports.config = Object.assign({ connectionRetryTimeout: 90000, connectionRetryCount: 3, framework: 'mocha', - reporters: ['spec'],<% if ( transpile || esModules ) { %> + reporters: ['spec'],<% if ( transpile || esModules || typescript ) { %> mochaOpts: { - require: [<% if ( transpile ) { %>'@babel/register'<% } %><% if ( transpile && esModules ) { %>, <% } %><% if ( esModules ) { %>'esm'<% } %>] + require: [<% if ( transpile ) { %>'@babel/register', <% } %><% if ( esModules ) { %>'esm', <% } %><% if ( !transpile && typescript && typescriptMode === 'full' ) { %>'ts-node/register', <% } %>]<% if ( typescript && typescriptMode === 'full' ) { %>, + extension: 'ts'<% } %> },<% } %> afterTest: function ( test ) { /* globals browsers */