Skip to content

Commit

Permalink
Add full TypeScript support
Browse files Browse the repository at this point in the history 
Closes #194.
  • Loading branch information
@niksy
niksy committed Jul 23, 2021
1 parent 5504256 commit 1270fdd
Show file tree
Hide file tree
Showing 12 changed files with 106 additions and 64 deletions.
37 changes: 25 additions & 12 deletions generators/app/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -491,8 +491,7 @@ module.exports = class extends Generator {
},
{
name: 'Full support',
value: 'full',
disabled: true
value: 'full'
}
],
when: (answers) => answers.typescript
Expand Down Expand Up @@ -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),
Expand Down Expand Up @@ -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, {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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(
Expand All @@ -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');
Expand All @@ -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');
Expand All @@ -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',
Expand All @@ -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 {
Expand Down
43 changes: 24 additions & 19 deletions generators/app/templates/_package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) { %>,
Expand Down Expand Up @@ -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 || (typescript && typescriptMode === 'full') ) { %>.{js,<% if (typescript && typescriptMode === 'full') { %>,ts<% } %><% if (vanillaJsWidget) { %>,svelte<% } %>}<% } else { %>.js<% } %>'<% } else { %>eslint '{<% if ( complexTranspile ) { %>src/index,src/lib/**/*<% if ( cli ) { %>,src/cli<% } %><% } else { %>index,lib/**/*<% if ( cli ) { %>,cli<% } %><% } %>}<% if ( vanillaJsWidget || (typescript && typescriptMode === 'full') ) { %>.{js,<% if (typescript && typescriptMode === 'full') { %>,ts<% } %><% if (vanillaJsWidget) { %>,svelte<% } %>}<% } else { %>.js<% } %>'<% } %><% if ( browserModule && styles ) { %> && stylelint 'index.css'<% } %>"<% } else if ( sassModule ) { %>
"lint": "<% if ( automatedTests ) { %>eslint 'test/**/*<% if ( typescript && typescriptMode === 'full' ) { %>.{js,ts}<% } else { %>.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/**/*}<% if ( typescript && typescriptMode === 'full' ) { %>.{js,ts}<% } else { %>.js<% } %>'<% } else { %>eslint '{<% if ( complexTranspile ) { %>src/index,src/lib/**/*<% if ( cli ) { %>,src/cli<% } %><% } else { %>index,lib/**/*<% if ( cli ) { %>,cli<% } %><% } %>}<% if ( typescript && typescriptMode === 'full' ) { %>.{js,ts}<% } else { %>.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<% } %>"<% } %>
},
Expand All @@ -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",
Expand Down Expand Up @@ -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"<% } %>,
Expand All @@ -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' ) { %>,
Expand All @@ -139,17 +142,19 @@
"@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/plugin-babel": "^5.2.1"<% } %><% } %><% if ( bundlingTool === 'rollup' ) { %>,
"@rollup/plugin-node-resolve": "^9.0.0",
"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' || (transpile && typescript && typescriptMode === 'full') ) { %>,
"@rollup/plugin-node-resolve": "^9.0.0"<% } %><% if ( bundlingTool === 'rollup' ) { %>,
"@rollup/plugin-commonjs": "^15.1.0",
"rollup-plugin-node-builtins": "^2.1.2",
"rollup-plugin-node-globals": "^1.4.0"<% } %><% if ( vanillaJsWidget ) { %>,
"eslint-plugin-html": "^6.0.0",
"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"<% } %><% } %>
Expand Down
3 changes: 2 additions & 1 deletion generators/app/templates/babelrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion generators/app/templates/eslintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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++ ) { %>
Expand Down
Loading

0 comments on commit 1270fdd

Please sign in to comment.