From 41202cc1184bcc46ade1812558690150e50f27f4 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Wed, 22 Feb 2023 17:16:57 -0500 Subject: [PATCH 1/5] chore(build): add TsconfigPathsPlugin to WebPack & use faster build:esm --- .github/workflows/cypress.yml | 2 +- .../webpack-demo-vanilla-bundle/package.json | 1 + .../webpack.config.js | 2 ++ pnpm-lock.yaml | 20 +++++++++++++++++++ 4 files changed, 24 insertions(+), 1 deletion(-) diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml index c2c1296ba..c6388b24b 100644 --- a/.github/workflows/cypress.yml +++ b/.github/workflows/cypress.yml @@ -42,7 +42,7 @@ jobs: - run: pnpm --version - name: TSC Build (esm) - run: pnpm build + run: pnpm build:esm - name: Website Prod Build (GitHub demo site) run: pnpm build:demo diff --git a/examples/webpack-demo-vanilla-bundle/package.json b/examples/webpack-demo-vanilla-bundle/package.json index 1ae81552a..78f0b5f10 100644 --- a/examples/webpack-demo-vanilla-bundle/package.json +++ b/examples/webpack-demo-vanilla-bundle/package.json @@ -72,6 +72,7 @@ "sass": "^1.58.1", "sass-loader": "^13.2.0", "style-loader": "^3.3.1", + "tsconfig-paths-webpack-plugin": "^4.0.0", "typescript": "^5.0.0-beta", "url-loader": "^4.1.1", "webpack": "^5.75.0", diff --git a/examples/webpack-demo-vanilla-bundle/webpack.config.js b/examples/webpack-demo-vanilla-bundle/webpack.config.js index 46d55f6d3..91b4f779b 100644 --- a/examples/webpack-demo-vanilla-bundle/webpack.config.js +++ b/examples/webpack-demo-vanilla-bundle/webpack.config.js @@ -3,6 +3,7 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const { EsbuildPlugin } = require('esbuild-loader'); const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); +const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const path = require('path'); @@ -79,6 +80,7 @@ module.exports = ({ production } = {}) => ({ poll: 1000, // Check for changes every second }, plugins: [ + new TsconfigPathsPlugin({}), new ProvidePlugin({ '$': 'jquery', 'jQuery': 'jquery', diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2cdf119a3..c5e465743 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -117,6 +117,7 @@ importers: sass: ^1.58.1 sass-loader: ^13.2.0 style-loader: ^3.3.1 + tsconfig-paths-webpack-plugin: ^4.0.0 typescript: ^5.0.0-beta url-loader: ^4.1.1 webpack: ^5.75.0 @@ -161,6 +162,7 @@ importers: sass: 1.58.1 sass-loader: 13.2.0_sass@1.58.1+webpack@5.75.0 style-loader: 3.3.1_webpack@5.75.0 + tsconfig-paths-webpack-plugin: 4.0.0 typescript: 5.0.0-dev.20230220 url-loader: 4.1.1_p5dl6emkcwslbw72e37w4ug7em webpack: 5.75.0_webpack-cli@5.0.1 @@ -10521,6 +10523,15 @@ packages: yn: 3.1.1 dev: true + /tsconfig-paths-webpack-plugin/4.0.0: + resolution: {integrity: sha512-fw/7265mIWukrSHd0i+wSwx64kYUSAKPfxRDksjKIYTxSAp9W9/xcZVBF4Kl0eqQd5eBpAQ/oQrc5RyM/0c1GQ==} + engines: {node: '>=10.13.0'} + dependencies: + chalk: 4.1.2 + enhanced-resolve: 5.10.0 + tsconfig-paths: 4.1.2 + dev: true + /tsconfig-paths/3.14.1: resolution: {integrity: sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==} dependencies: @@ -10530,6 +10541,15 @@ packages: strip-bom: 3.0.0 dev: true + /tsconfig-paths/4.1.2: + resolution: {integrity: sha512-uhxiMgnXQp1IR622dUXI+9Ehnws7i/y6xvpZB9IbUVOPy0muvdvgXeZOn88UcGPiT98Vp3rJPTa8bFoalZ3Qhw==} + engines: {node: '>=6'} + dependencies: + json5: 2.2.3 + minimist: 1.2.6 + strip-bom: 3.0.0 + dev: true + /tslib/1.14.1: resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==} dev: true From 29bcfe582854fe972ea9c24c2002da6ad2b8d00e Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Wed, 22 Feb 2023 17:21:30 -0500 Subject: [PATCH 2/5] chore: add SASS files to build esm before demo build --- .github/workflows/cypress.yml | 2 +- package.json | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml index c6388b24b..621428d1c 100644 --- a/.github/workflows/cypress.yml +++ b/.github/workflows/cypress.yml @@ -42,7 +42,7 @@ jobs: - run: pnpm --version - name: TSC Build (esm) - run: pnpm build:esm + run: pnpm build:esm:styles - name: Website Prod Build (GitHub demo site) run: pnpm build:demo diff --git a/package.json b/package.json index 391b1f061..2c4d74268 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "cypress": "cypress open --config-file test/cypress.config.ts", "cypress:ci": "cypress run --config-file test/cypress.config.ts", "build:esm": "tsc --build ./tsconfig.packages.json", + "build:esm:styles": "pnpm build:esm && pnpm run -r sass:copy", "build:watch": "tsc --build ./tsconfig.packages.json --watch", "predev": "pnpm build:esm && pnpm run -r sass:copy", "dev": "run-p dev:watch webpack:watch", From 1307aaf4591276ed76be1bdc6b41bc0bcfa91ed2 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Wed, 22 Feb 2023 17:25:29 -0500 Subject: [PATCH 3/5] chore: build SASS files & copy them when starting server --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 2c4d74268..2f24ac1d3 100644 --- a/package.json +++ b/package.json @@ -25,9 +25,9 @@ "cypress": "cypress open --config-file test/cypress.config.ts", "cypress:ci": "cypress run --config-file test/cypress.config.ts", "build:esm": "tsc --build ./tsconfig.packages.json", - "build:esm:styles": "pnpm build:esm && pnpm run -r sass:copy", + "build:esm:styles": "pnpm build:esm && pnpm run -r sass:build && pnpm run -r sass:copy", "build:watch": "tsc --build ./tsconfig.packages.json --watch", - "predev": "pnpm build:esm && pnpm run -r sass:copy", + "predev": "pnpm build:esm:styles", "dev": "run-p dev:watch webpack:watch", "dev:watch": "lerna watch --no-bail --file-delimiter=\",\" --glob=\"src/**/*.{ts,scss}\" --ignored=\"src/**/*.spec.ts\" -- cross-env-shell pnpm run -r --filter $LERNA_PACKAGE_NAME dev", "webpack:watch": "pnpm -r --parallel run webpack:dev", From 5e2d02ad5fecac19a959961e5bd111910f1c5f01 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Wed, 22 Feb 2023 17:33:06 -0500 Subject: [PATCH 4/5] chore: copy SASS files only to serve html, build CSS isn't required --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2f24ac1d3..38749b6c5 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "cypress": "cypress open --config-file test/cypress.config.ts", "cypress:ci": "cypress run --config-file test/cypress.config.ts", "build:esm": "tsc --build ./tsconfig.packages.json", - "build:esm:styles": "pnpm build:esm && pnpm run -r sass:build && pnpm run -r sass:copy", + "build:esm:styles": "pnpm build:esm && pnpm run -r sass:copy", "build:watch": "tsc --build ./tsconfig.packages.json --watch", "predev": "pnpm build:esm:styles", "dev": "run-p dev:watch webpack:watch", From e9af8b96af0e45137935c9abd3f12474bc4f210b Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Wed, 22 Feb 2023 17:37:19 -0500 Subject: [PATCH 5/5] chore: run SASS copy script only on common package --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 38749b6c5..68b488949 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "cypress": "cypress open --config-file test/cypress.config.ts", "cypress:ci": "cypress run --config-file test/cypress.config.ts", "build:esm": "tsc --build ./tsconfig.packages.json", - "build:esm:styles": "pnpm build:esm && pnpm run -r sass:copy", + "build:esm:styles": "pnpm build:esm && pnpm run -r --filter=./packages/common sass:copy", "build:watch": "tsc --build ./tsconfig.packages.json --watch", "predev": "pnpm build:esm:styles", "dev": "run-p dev:watch webpack:watch",