From 9210b9463c6dbbbe3cafc142144c1796a7d24ba8 Mon Sep 17 00:00:00 2001 From: Lim Ding Wen Date: Sun, 12 Nov 2023 23:36:55 +0800 Subject: [PATCH 1/3] Add Typescript support --- config/build.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/config/build.json b/config/build.json index 1e674257..e4f497a8 100644 --- a/config/build.json +++ b/config/build.json @@ -4,9 +4,9 @@ "releases": "./", "release_name": "release", "manifest": "./src/manifest.json", - "js": "./src/**/*.js", + "js": "./src/**/*.[jt]s", "js_bundles": [{ - "src":"./src/**/*.js", + "src":"./src/**/*.[jt]s", "name": "script" }], "html": "./src/**/*.html", From aff2c66432a758972cf84a0e55729d265da9764e Mon Sep 17 00:00:00 2001 From: Lim Ding Wen Date: Mon, 13 Nov 2023 00:09:10 +0800 Subject: [PATCH 2/3] Add TS importing --- cli/gulpfile.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/cli/gulpfile.js b/cli/gulpfile.js index f995c7ad..784208b9 100644 --- a/cli/gulpfile.js +++ b/cli/gulpfile.js @@ -46,7 +46,11 @@ const script = ({src, name, mode}, done = _ => true) => { // match sourcemap name with configured js file name output: {filename: `${name}.js`}, // use source map with dev builds only - devtool: isProd ? undefined : 'cheap-source-map' + devtool: isProd ? undefined : 'cheap-source-map', + // allow TS importing + resolve: { + extensions: ['.ts', '...'] + }, }; return gulp.src(src) From d9468d3a8a7b5801ef0046935a96b279a5b492c7 Mon Sep 17 00:00:00 2001 From: Lim Ding Wen Date: Mon, 13 Nov 2023 00:31:20 +0800 Subject: [PATCH 3/3] Add TS loader --- cli/gulpfile.js | 15 +++++- guide/03-xt-build.md | 8 +++ package-lock.json | 123 +++++++++++++++++++++++++++++++++++++++++-- package.json | 1 + 4 files changed, 141 insertions(+), 6 deletions(-) diff --git a/cli/gulpfile.js b/cli/gulpfile.js index 784208b9..62518287 100644 --- a/cli/gulpfile.js +++ b/cli/gulpfile.js @@ -49,8 +49,21 @@ const script = ({src, name, mode}, done = _ => true) => { devtool: isProd ? undefined : 'cheap-source-map', // allow TS importing resolve: { - extensions: ['.ts', '...'] + extensions: ['.ts', '.tsx', '...'] }, + // use ts-loader to compile TS files + module: { + rules: [ + // all files with a `.ts`, `.cts`, `.mts` or `.tsx` extension will be handled by `ts-loader` + { + test: /\.([cm]?ts|tsx)$/, + loader: 'ts-loader', + options: { + configFile: 'src/tsconfig.json' + } + } + ] + } }; return gulp.src(src) diff --git a/guide/03-xt-build.md b/guide/03-xt-build.md index bb85ed92..e8c25f40 100644 --- a/guide/03-xt-build.md +++ b/guide/03-xt-build.md @@ -69,6 +69,14 @@ xt-build {-e|--env} dev {-w|--watch} xt-build --help ``` +## TypeScript notes + +You may use either TypeScript (`.ts`, `.tsx`) or JavaScript files. However, if any TypeScript is used, you must add +`tsconfig.json` to the `src` directory. + +In this config file, you do not need to add anything (unless you want to change any settings). However, without it, +compilation will fail. + ## Package.json scripts After adding Extension CLI to your project, you can run these commands from a diff --git a/package-lock.json b/package-lock.json index 77de3528..6c646926 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43,6 +43,7 @@ "sass": "1.49.9", "sinon": "13.0.1", "sinon-chrome": "3.0.1", + "ts-loader": "^9.5.0", "webpack-stream": "7.0.0", "yargs": "17.3.1" }, @@ -3674,7 +3675,6 @@ "version": "5.8.2", "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.8.2.tgz", "integrity": "sha512-F27oB3WuHDzvR2DOGNTaYy0D5o0cnrv8TeI482VM4kYgQd/FT9lUQwuNsJ0oOHtBUq7eiW5ytqzp7nBFknL+GA==", - "peer": true, "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.2.0" @@ -6664,6 +6664,17 @@ "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz", "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw=" }, + "node_modules/lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/make-dir": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz", @@ -9814,7 +9825,6 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.0.tgz", "integrity": "sha512-FBk4IesMV1rBxX2tfiK8RAmogtWn53puLOQlvO8XuwlgxcYbP4mVPS9Ph4aeamSyyVjOl24aYWAuc8U5kCVwMw==", - "peer": true, "engines": { "node": ">=6" } @@ -10123,6 +10133,47 @@ "node": ">=12" } }, + "node_modules/ts-loader": { + "version": "9.5.0", + "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.5.0.tgz", + "integrity": "sha512-LLlB/pkB4q9mW2yLdFMnK3dEHbrBjeZTYguaaIfusyojBgAGf5kF+O6KcWqiGzWqHk0LBsoolrp4VftEURhybg==", + "dependencies": { + "chalk": "^4.1.0", + "enhanced-resolve": "^5.0.0", + "micromatch": "^4.0.0", + "semver": "^7.3.4", + "source-map": "^0.7.4" + }, + "engines": { + "node": ">=12.0.0" + }, + "peerDependencies": { + "typescript": "*", + "webpack": "^5.0.0" + } + }, + "node_modules/ts-loader/node_modules/semver": { + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/ts-loader/node_modules/source-map": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz", + "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==", + "engines": { + "node": ">= 8" + } + }, "node_modules/tunnel-agent": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz", @@ -10186,6 +10237,19 @@ "is-typedarray": "^1.0.0" } }, + "node_modules/typescript": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz", + "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==", + "peer": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, "node_modules/uc.micro": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz", @@ -10872,6 +10936,11 @@ "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz", "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==" }, + "node_modules/yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" + }, "node_modules/yargs": { "version": "17.3.1", "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.3.1.tgz", @@ -13681,7 +13750,6 @@ "version": "5.8.2", "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.8.2.tgz", "integrity": "sha512-F27oB3WuHDzvR2DOGNTaYy0D5o0cnrv8TeI482VM4kYgQd/FT9lUQwuNsJ0oOHtBUq7eiW5ytqzp7nBFknL+GA==", - "peer": true, "requires": { "graceful-fs": "^4.2.4", "tapable": "^2.2.0" @@ -15994,6 +16062,14 @@ "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz", "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw=" }, + "lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "requires": { + "yallist": "^4.0.0" + } + }, "make-dir": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz", @@ -18421,8 +18497,7 @@ "tapable": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.0.tgz", - "integrity": "sha512-FBk4IesMV1rBxX2tfiK8RAmogtWn53puLOQlvO8XuwlgxcYbP4mVPS9Ph4aeamSyyVjOl24aYWAuc8U5kCVwMw==", - "peer": true + "integrity": "sha512-FBk4IesMV1rBxX2tfiK8RAmogtWn53puLOQlvO8XuwlgxcYbP4mVPS9Ph4aeamSyyVjOl24aYWAuc8U5kCVwMw==" }, "terser": { "version": "5.7.2", @@ -18667,6 +18742,33 @@ "punycode": "^2.1.1" } }, + "ts-loader": { + "version": "9.5.0", + "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.5.0.tgz", + "integrity": "sha512-LLlB/pkB4q9mW2yLdFMnK3dEHbrBjeZTYguaaIfusyojBgAGf5kF+O6KcWqiGzWqHk0LBsoolrp4VftEURhybg==", + "requires": { + "chalk": "^4.1.0", + "enhanced-resolve": "^5.0.0", + "micromatch": "^4.0.0", + "semver": "^7.3.4", + "source-map": "^0.7.4" + }, + "dependencies": { + "semver": { + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", + "requires": { + "lru-cache": "^6.0.0" + } + }, + "source-map": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz", + "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==" + } + } + }, "tunnel-agent": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz", @@ -18718,6 +18820,12 @@ "is-typedarray": "^1.0.0" } }, + "typescript": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz", + "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==", + "peer": true + }, "uc.micro": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz", @@ -19247,6 +19355,11 @@ "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz", "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==" }, + "yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" + }, "yargs": { "version": "17.3.1", "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.3.1.tgz", diff --git a/package.json b/package.json index 4e507eab..cc296520 100644 --- a/package.json +++ b/package.json @@ -102,6 +102,7 @@ "sass": "1.49.9", "sinon": "13.0.1", "sinon-chrome": "3.0.1", + "ts-loader": "9.5.0", "webpack-stream": "7.0.0", "yargs": "17.3.1" },