From 4fb509ec1e6286769f4b8352b655f64061217247 Mon Sep 17 00:00:00 2001 From: Hung Viet Nguyen Date: Thu, 14 Apr 2022 08:40:40 +0700 Subject: [PATCH 01/10] feat: add cssTransform pre config --- src/preconfig/cssTransform.ts | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 src/preconfig/cssTransform.ts diff --git a/src/preconfig/cssTransform.ts b/src/preconfig/cssTransform.ts new file mode 100644 index 00000000..55194ede --- /dev/null +++ b/src/preconfig/cssTransform.ts @@ -0,0 +1,7 @@ +'use strict'; + +import { processCss } from '../transform'; + +export function process(src: string, filename: string) { + return processCss(src, filename); +} From 5291ef33893e9d5ef0919898a6bea0e17f1610a7 Mon Sep 17 00:00:00 2001 From: Hung Viet Nguyen Date: Thu, 14 Apr 2022 08:42:40 +0700 Subject: [PATCH 02/10] feat: Add rollup for multiple entries --- .gitignore | 2 + package-lock.json | 185 +++++++++++++++++++++++++++++++++++++++------- package.json | 4 + rollup.config.js | 21 ++++++ 4 files changed, 185 insertions(+), 27 deletions(-) create mode 100644 rollup.config.js diff --git a/.gitignore b/.gitignore index 1770f20d..2700b7a3 100644 --- a/.gitignore +++ b/.gitignore @@ -23,3 +23,5 @@ dist-ssr *.sln *.sw? .npmrc + +build diff --git a/package-lock.json b/package-lock.json index c5c0ffed..115dd96e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -990,7 +990,6 @@ "version": "4.2.0", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.0.tgz", "integrity": "sha512-2WUyJNRkyH5p487pGnn4tWAsxhEFKN/pT8CMgHshd5H+IXkOnKvKZwsz5ZWz+YCXkleZRAU5kwbfgF8CPfDRqA==", - "dev": true, "requires": { "estree-walker": "^2.0.1", "picomatch": "^2.2.2" @@ -1593,6 +1592,59 @@ } } }, + "@yarn-tool/resolve-package": { + "version": "1.0.46", + "resolved": "https://registry.npmjs.org/@yarn-tool/resolve-package/-/resolve-package-1.0.46.tgz", + "integrity": "sha512-RJcBGTVywUqYGRtGkPSgJC/ozf0wK/xjUy66tXkbpL35U0o1oef4S0v23euxA/CiukqBWr2fRGtGY6FidESdTg==", + "requires": { + "pkg-dir": "< 6 >= 5", + "tslib": "^2.3.1", + "upath2": "^3.1.12" + }, + "dependencies": { + "find-up": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", + "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==", + "requires": { + "locate-path": "^6.0.0", + "path-exists": "^4.0.0" + } + }, + "locate-path": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", + "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", + "requires": { + "p-locate": "^5.0.0" + } + }, + "p-limit": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", + "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==", + "requires": { + "yocto-queue": "^0.1.0" + } + }, + "p-locate": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", + "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", + "requires": { + "p-limit": "^3.0.2" + } + }, + "pkg-dir": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-5.0.0.tgz", + "integrity": "sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA==", + "requires": { + "find-up": "^5.0.0" + } + } + } + }, "abab": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz", @@ -2027,6 +2079,11 @@ "delayed-stream": "~1.0.0" } }, + "commondir": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz", + "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=" + }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -2570,8 +2627,7 @@ "estree-walker": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", - "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", - "dev": true + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==" }, "esutils": { "version": "2.0.3", @@ -2677,11 +2733,20 @@ } } }, + "find-cache-dir": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz", + "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==", + "requires": { + "commondir": "^1.0.1", + "make-dir": "^3.0.2", + "pkg-dir": "^4.1.0" + } + }, "find-up": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", - "dev": true, "requires": { "locate-path": "^5.0.0", "path-exists": "^4.0.0" @@ -2698,6 +2763,23 @@ "mime-types": "^2.1.12" } }, + "fs-extra": { + "version": "10.0.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.0.1.tgz", + "integrity": "sha512-NbdoVMZso2Lsrn/QwLXOy6rm0ufY2zEOKCDzJR/0kBsb0E6qed0P3iYK+Ath3BfvXEeu4JhEtXLgILx5psUfag==", + "requires": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + }, + "dependencies": { + "universalify": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", + "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==" + } + } + }, "fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -2712,8 +2794,7 @@ "function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", - "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", - "dev": true + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" }, "gensync": { "version": "1.0.0-beta.2", @@ -2790,14 +2871,12 @@ "graceful-fs": { "version": "4.2.9", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz", - "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==", - "dev": true + "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==" }, "has": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", - "dev": true, "requires": { "function-bind": "^1.1.1" } @@ -3013,7 +3092,6 @@ "version": "2.8.1", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz", "integrity": "sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==", - "dev": true, "requires": { "has": "^1.0.3" } @@ -4681,6 +4759,22 @@ "minimist": "^1.2.5" } }, + "jsonfile": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", + "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", + "requires": { + "graceful-fs": "^4.1.6", + "universalify": "^2.0.0" + }, + "dependencies": { + "universalify": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", + "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==" + } + } + }, "kleur": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz", @@ -4743,7 +4837,6 @@ "version": "5.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", - "dev": true, "requires": { "p-locate": "^4.1.0" } @@ -4782,7 +4875,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", - "dev": true, "requires": { "semver": "^6.0.0" } @@ -5089,7 +5181,6 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", - "dev": true, "requires": { "p-try": "^2.0.0" } @@ -5098,7 +5189,6 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", - "dev": true, "requires": { "p-limit": "^2.2.0" } @@ -5106,8 +5196,7 @@ "p-try": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", - "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", - "dev": true + "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==" }, "parse-json": { "version": "5.2.0", @@ -5135,14 +5224,21 @@ "path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", - "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", - "dev": true + "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==" }, "path-is-absolute": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=" }, + "path-is-network-drive": { + "version": "1.0.13", + "resolved": "https://registry.npmjs.org/path-is-network-drive/-/path-is-network-drive-1.0.13.tgz", + "integrity": "sha512-Hg74mRN6mmXV+gTm3INjFK40ncAmC/Lo4qoQaSZ+GT3hZzlKdWQSqAjqyPeW0SvObP2W073WyYEBWY9d3wOm3A==", + "requires": { + "tslib": "^2.3.1" + } + }, "path-key": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", @@ -5152,8 +5248,15 @@ "path-parse": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", - "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", - "dev": true + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" + }, + "path-strip-sep": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/path-strip-sep/-/path-strip-sep-1.0.10.tgz", + "integrity": "sha512-JpCy+8LAJQQTO1bQsb/84s1g+/Stm3h39aOpPRBQ/paMUGVPPZChLTOTKHoaCkc/6sKuF7yVsnq5Pe1S6xQGcA==", + "requires": { + "tslib": "^2.3.1" + } }, "path-type": { "version": "3.0.0", @@ -5196,7 +5299,6 @@ "version": "4.2.0", "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz", "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==", - "dev": true, "requires": { "find-up": "^4.0.0" } @@ -5562,7 +5664,6 @@ "version": "1.22.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz", "integrity": "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==", - "dev": true, "requires": { "is-core-module": "^2.8.1", "path-parse": "^1.0.7", @@ -5602,11 +5703,23 @@ "version": "2.70.1", "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.70.1.tgz", "integrity": "sha512-CRYsI5EuzLbXdxC6RnYhOuRdtz4bhejPMSWjsFLfVM/7w/85n2szZv6yExqUXsBdz5KT8eoubeyDUDjhLHEslA==", - "dev": true, "requires": { "fsevents": "~2.3.2" } }, + "rollup-plugin-typescript2": { + "version": "0.31.2", + "resolved": "https://registry.npmjs.org/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.31.2.tgz", + "integrity": "sha512-hRwEYR1C8xDGVVMFJQdEVnNAeWRvpaY97g5mp3IeLnzhNXzSVq78Ye/BJ9PAaUfN4DXa/uDnqerifMOaMFY54Q==", + "requires": { + "@rollup/pluginutils": "^4.1.2", + "@yarn-tool/resolve-package": "^1.0.40", + "find-cache-dir": "^3.3.2", + "fs-extra": "^10.0.0", + "resolve": "^1.20.0", + "tslib": "^2.3.1" + } + }, "safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", @@ -5641,8 +5754,7 @@ "semver": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", - "dev": true + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==" }, "shallowequal": { "version": "1.1.0", @@ -5958,8 +6070,7 @@ "supports-preserve-symlinks-flag": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", - "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", - "dev": true + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==" }, "symbol-tree": { "version": "3.2.4", @@ -6039,6 +6150,11 @@ "punycode": "^2.1.1" } }, + "tslib": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", + "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==" + }, "type-check": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz", @@ -6098,6 +6214,16 @@ "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=" }, + "upath2": { + "version": "3.1.12", + "resolved": "https://registry.npmjs.org/upath2/-/upath2-3.1.12.tgz", + "integrity": "sha512-yC3eZeCyCXFWjy7Nu4pgjLhXNYjuzuUmJiRgSSw6TJp8Emc+E4951HGPJf+bldFC5SL7oBLeNbtm1fGzXn2gxw==", + "requires": { + "path-is-network-drive": "^1.0.13", + "path-strip-sep": "^1.0.10", + "tslib": "^2.3.1" + } + }, "utils-merge": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", @@ -6335,6 +6461,11 @@ "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz", "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==", "dev": true + }, + "yocto-queue": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", + "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==" } } } diff --git a/package.json b/package.json index 7c348b51..7f50197f 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,8 @@ "build": "npm run build:only && npm run types", "build:only": "vite build", "build:watch": "vite build --watch", + "rollup": "rollup -c", + "rollup:watch": "rollup -c -w", "prepublishOnly": "npm run build", "publish:alpha": "npm publish --tag alpha", "publish:latest": "npm publish", @@ -53,6 +55,8 @@ "postcss": "^8.4.12", "postcss-modules-sync": "^1.0.0", "rimraf": "^3.0.2", + "rollup": "^2.70.1", + "rollup-plugin-typescript2": "^0.31.2", "sirv": "^2.0.2", "ws": "^8.5.0" }, diff --git a/rollup.config.js b/rollup.config.js new file mode 100644 index 00000000..10bee637 --- /dev/null +++ b/rollup.config.js @@ -0,0 +1,21 @@ +import { defineConfig } from 'rollup'; +import typescript from 'rollup-plugin-typescript2'; + +export default defineConfig([ + { + input: 'src/index.ts', + output: { + dir: 'build', + format: 'cjs', + }, + plugins: [typescript()], + }, + { + input: 'src/preconfig/cssTransform.ts', + output: { + dir: 'build', + format: 'cjs', + }, + plugins: [typescript()], + }, +]); From 6ce35ca37d6c9de5fc72b05ce433cb83b10b0538 Mon Sep 17 00:00:00 2001 From: Hung Viet Nguyen Date: Thu, 14 Apr 2022 21:19:42 +0700 Subject: [PATCH 03/10] feat: add preconfig transform --- .gitignore | 2 + cssTransform.js | 76 +++++++++++++++++++ examples/vite-react/jest.config.js | 4 +- examples/vite-react/package.json | 1 + package.json | 3 +- .../css.ts} | 3 +- src/preconfigTransform/file.ts | 8 ++ src/preconfigTransform/fileCRA.ts | 8 ++ 8 files changed, 101 insertions(+), 4 deletions(-) create mode 100644 cssTransform.js rename src/{preconfig/cssTransform.ts => preconfigTransform/css.ts} (55%) create mode 100644 src/preconfigTransform/file.ts create mode 100644 src/preconfigTransform/fileCRA.ts diff --git a/.gitignore b/.gitignore index 2700b7a3..38443a48 100644 --- a/.gitignore +++ b/.gitignore @@ -25,3 +25,5 @@ dist-ssr .npmrc build +presets +transforms diff --git a/cssTransform.js b/cssTransform.js new file mode 100644 index 00000000..1895471d --- /dev/null +++ b/cssTransform.js @@ -0,0 +1,76 @@ +'use strict'; + +Object.defineProperty(exports, '__esModule', { value: true }); + +require('path'); +require('camelcase'); + +function getRelativeFilename(filename) { + return filename.split(process.cwd())[1]; +} +function processCss(src, filename) { + if (filename.endsWith('.module.css')) { + return processCSSModules(src, filename); + } + const relativeFilename = getRelativeFilename(filename); + // Transform to a javascript module that load a tag to the page. + return `const relativeCssPath = "${relativeFilename}"; + const link = document.createElement('link'); + link.rel = 'stylesheet'; + link.href = relativeCssPath; + document.body.appendChild(link); + + module.exports = JSON.stringify(relativeCssPath);`; +} +// TODO: MEDIUM PRIORITY To research about getCacheKey +// Reference: +// - https://jestjs.io/docs/code-transformation#writing-custom-transformers +// - https://github.com/swc-project/jest/blob/17cf883b46c050a485975d8ce96a05277cf6032f/index.ts#L37-L52 +// const cacheKeyFunction = createCacheKey(); +// export function getCacheKey(src: string, filename: string, ...rest): string { +// const baseCacheKey = cacheKeyFunction(src, filename, ...rest); +// return crypto.createHash('md5').update(baseCacheKey).digest('hex'); +// } +// We cannot create async transformer if we are using CommonJS +// ( Reference: https://github.com/facebook/jest/issues/11081#issuecomment-791259034 +// https://github.com/facebook/jest/issues/11458 +// Also, there is a inconsistency in jest docs about should `process` be required +// https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object +// A transformer must be an object with at least a process function +// https://jestjs.io/docs/code-transformation#writing-custom-transformers +// As can be seen, only process or processAsync is mandatory to implement) +// We can use that if we opt-in to ESM. But it's not common use case right now (2022) +// So our approach is making CSS Modules a "CSS-in-JS" solution. +// CSS Modules will be compiled at run time then inject to the document.body +// One notable note is that `postcss-modules` is an async postcss plugin +// so we need to use `postcss-modules.sync`, with function `sync()` +function processCSSModules(src, filename) { + return ` +const postcss = require('postcss'); +const CSSModulesSync = require('postcss-modules-sync').default; +const cssSrc = ${JSON.stringify(src)}; + +let exportedTokens = {}; + +const result = postcss( + CSSModulesSync({ + getJSON: (tokens) => { + exportedTokens = tokens; + }, + }), +) +.process(cssSrc, { from: ${JSON.stringify(filename)} }) + +const style = document.createElement('style'); +style.type = 'text/css'; +style.appendChild(document.createTextNode(result.css)); +document.body.appendChild(style); + +module.exports = exportedTokens`; +} + +function process$1(src, filename) { + return processCss(src, filename); +} + +exports.process = process$1; diff --git a/examples/vite-react/jest.config.js b/examples/vite-react/jest.config.js index c88ceb95..dd4ddfe3 100644 --- a/examples/vite-react/jest.config.js +++ b/examples/vite-react/jest.config.js @@ -11,9 +11,9 @@ module.exports = { modulePaths: ['/src'], transform: { '^.+\\.(ts|js|tsx|jsx)$': '@swc/jest', - '^.+\\.css$': '/config/jest/cssTransform.js', + '^.+\\.css$': 'jest-preview/transforms/css', '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)': - '/config/jest/fileTransform.js', + 'jest-preview/transforms/file', }, transformIgnorePatterns: [ '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$', diff --git a/examples/vite-react/package.json b/examples/vite-react/package.json index 77b14e52..d205071b 100644 --- a/examples/vite-react/package.json +++ b/examples/vite-react/package.json @@ -8,6 +8,7 @@ "preview": "vite preview", "jest-preview": "jest-preview", "test": "NODE_ENV=test jest --watch", + "test:nc": "npm run test -- --no-cache", "test:debug": "npm-run-all -p test jest-preview" }, "dependencies": { diff --git a/package.json b/package.json index 7f50197f..20d5715d 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,8 @@ }, "files": [ "dist", - "server" + "server", + "transforms" ], "scripts": { "dev": "vite", diff --git a/src/preconfig/cssTransform.ts b/src/preconfigTransform/css.ts similarity index 55% rename from src/preconfig/cssTransform.ts rename to src/preconfigTransform/css.ts index 55194ede..8bb1edee 100644 --- a/src/preconfig/cssTransform.ts +++ b/src/preconfigTransform/css.ts @@ -2,6 +2,7 @@ import { processCss } from '../transform'; -export function process(src: string, filename: string) { +function process(src: string, filename: string) { return processCss(src, filename); } +export default { process }; diff --git a/src/preconfigTransform/file.ts b/src/preconfigTransform/file.ts new file mode 100644 index 00000000..236ea502 --- /dev/null +++ b/src/preconfigTransform/file.ts @@ -0,0 +1,8 @@ +'use strict'; + +import { processFile } from '../transform'; + +function process(src: string, filename: string) { + return processFile(src, filename); +} +export default { process }; diff --git a/src/preconfigTransform/fileCRA.ts b/src/preconfigTransform/fileCRA.ts new file mode 100644 index 00000000..1da04089 --- /dev/null +++ b/src/preconfigTransform/fileCRA.ts @@ -0,0 +1,8 @@ +'use strict'; + +import { processFileCRA } from '../transform'; + +function process(src: string, filename: string) { + return processFileCRA(src, filename); +} +export default { process }; From 5bdc50a3a33100fcce0ffc13f0f56cf8f10b834c Mon Sep 17 00:00:00 2001 From: Hung Viet Nguyen Date: Thu, 14 Apr 2022 21:20:25 +0700 Subject: [PATCH 04/10] feat: Use rollup to bundle code instead of Vite Library Mode The reason is Vite Library Mode does not support multiple entries well. --- package.json | 8 ++++---- rollup.config.js | 29 ++++++++++++++++------------- 2 files changed, 20 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index 20d5715d..b845320a 100644 --- a/package.json +++ b/package.json @@ -30,10 +30,10 @@ "dev": "vite", "types": "tsc src/index.ts --declaration --emitDeclarationOnly --jsx react --esModuleInterop --outDir dist", "build": "npm run build:only && npm run types", - "build:only": "vite build", - "build:watch": "vite build --watch", - "rollup": "rollup -c", - "rollup:watch": "rollup -c -w", + "build:legacy::only": "vite build", + "build:legacy:watch": "vite build --watch", + "build:only": "rollup -c", + "build:watch": "rollup -c -w", "prepublishOnly": "npm run build", "publish:alpha": "npm publish --tag alpha", "publish:latest": "npm publish", diff --git a/rollup.config.js b/rollup.config.js index 10bee637..466b63f6 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,21 +1,24 @@ import { defineConfig } from 'rollup'; import typescript from 'rollup-plugin-typescript2'; -export default defineConfig([ - { - input: 'src/index.ts', +function makeBundle({ filePath, dir = 'dist' }) { + return { + input: filePath, output: { - dir: 'build', + dir: dir, format: 'cjs', }, plugins: [typescript()], - }, - { - input: 'src/preconfig/cssTransform.ts', - output: { - dir: 'build', - format: 'cjs', - }, - plugins: [typescript()], - }, + external: ['path', 'camelcase'], + }; +} + +export default defineConfig([ + makeBundle({ filePath: 'src/index.ts' }), + makeBundle({ filePath: 'src/preconfigTransform/css.ts', dir: 'transforms' }), + makeBundle({ filePath: 'src/preconfigTransform/file.ts', dir: 'transforms' }), + makeBundle({ + filePath: 'src/preconfigTransform/fileCRA.ts', + dir: 'transforms', + }), ]); From 88c0e3bbc38c40eadf22ed7ac4ee6daf7c096693 Mon Sep 17 00:00:00 2001 From: Hung Viet Nguyen Date: Thu, 14 Apr 2022 21:48:45 +0700 Subject: [PATCH 05/10] chore: Update config to use preconfig transform --- examples/create-react-app/config/jest/cssTransform.js | 7 ------- examples/create-react-app/config/jest/fileTransform.js | 7 ------- examples/create-react-app/package.json | 5 +++-- examples/vite-react/config/jest/cssTransform.js | 9 --------- examples/vite-react/config/jest/fileTransform.js | 9 --------- jest.config.js | 5 ++--- package.json | 2 +- 7 files changed, 6 insertions(+), 38 deletions(-) delete mode 100644 examples/create-react-app/config/jest/cssTransform.js delete mode 100644 examples/create-react-app/config/jest/fileTransform.js delete mode 100644 examples/vite-react/config/jest/cssTransform.js delete mode 100644 examples/vite-react/config/jest/fileTransform.js diff --git a/examples/create-react-app/config/jest/cssTransform.js b/examples/create-react-app/config/jest/cssTransform.js deleted file mode 100644 index dbd1885d..00000000 --- a/examples/create-react-app/config/jest/cssTransform.js +++ /dev/null @@ -1,7 +0,0 @@ -const { processCss } = require('jest-preview'); - -module.exports = { - process(src, filename) { - return processCss(src, filename); - }, -}; diff --git a/examples/create-react-app/config/jest/fileTransform.js b/examples/create-react-app/config/jest/fileTransform.js deleted file mode 100644 index 87e8b25c..00000000 --- a/examples/create-react-app/config/jest/fileTransform.js +++ /dev/null @@ -1,7 +0,0 @@ -const { processFileCRA } = require('jest-preview'); - -module.exports = { - process(src, filename) { - return processFileCRA(src, filename); - }, -}; diff --git a/examples/create-react-app/package.json b/examples/create-react-app/package.json index 99427529..7df54f5a 100644 --- a/examples/create-react-app/package.json +++ b/examples/create-react-app/package.json @@ -20,6 +20,7 @@ "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", + "test:nc": "npm run test -- --no-cache", "eject": "react-scripts eject", "jest-preview": "jest-preview", "test:debug": "npm-run-all -p test jest-preview" @@ -48,8 +49,8 @@ }, "jest": { "transform": { - "^.+\\.css$": "/config/jest/cssTransform.js", - "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "/config/jest/fileTransform.js" + "^.+\\.css$": "jest-preview/transforms/css", + "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "jest-preview/transforms/fileCRA" } } } diff --git a/examples/vite-react/config/jest/cssTransform.js b/examples/vite-react/config/jest/cssTransform.js deleted file mode 100644 index c3842f3e..00000000 --- a/examples/vite-react/config/jest/cssTransform.js +++ /dev/null @@ -1,9 +0,0 @@ -'use strict'; - -const { processCss } = require('jest-preview'); - -module.exports = { - process(src, filename) { - return processCss(src, filename); - }, -}; diff --git a/examples/vite-react/config/jest/fileTransform.js b/examples/vite-react/config/jest/fileTransform.js deleted file mode 100644 index f21dd6f7..00000000 --- a/examples/vite-react/config/jest/fileTransform.js +++ /dev/null @@ -1,9 +0,0 @@ -'use strict'; - -const { processFile } = require('jest-preview'); - -module.exports = { - process(src, filename) { - return processFile(src, filename); - }, -}; diff --git a/jest.config.js b/jest.config.js index 577ca59a..80eac72c 100644 --- a/jest.config.js +++ b/jest.config.js @@ -11,9 +11,8 @@ module.exports = { modulePaths: ['/demo'], transform: { '^.+\\.(ts|js|tsx|jsx)$': '@swc/jest', - '^.+\\.css$': '/config/jest/cssTransform.js', - '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|json)$)': - '/config/jest/fileTransform.js', + '^.+\\.css$': '/transforms/css', + '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|json)$)': '/transforms/file', }, transformIgnorePatterns: [ '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$', diff --git a/package.json b/package.json index b845320a..739fc400 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "preview": "vite preview", "server": "node server/previewServer.js", "server:watch": "nodemon server/previewServer.js", - "test:only": "NODE_ENV=test jest --watch", + "test:only": "NODE_ENV=test jest --watch --no-cache", "test:ci": "NODE_ENV=test jest", "clearCache": "rimraf node_modules/.cache/jest-preview-dom && jest --clearCache", "test": "npm-run-all -p server test:only", From 907155a5e1af7ead03810defcaca12d840436e3e Mon Sep 17 00:00:00 2001 From: Hung Viet Nguyen Date: Thu, 14 Apr 2022 21:49:29 +0700 Subject: [PATCH 06/10] docs: Update README.md about pre-configured code transform --- README.md | 88 ++++++++++++++++------------- examples/create-react-app/README.md | 22 ++++---- 2 files changed, 61 insertions(+), 49 deletions(-) diff --git a/README.md b/README.md index e085d6f7..712ef163 100644 --- a/README.md +++ b/README.md @@ -75,47 +75,21 @@ yarn add --dev jest-preview pnpm install --dev jest-preview ``` -### 2. Create `cssTransform.js` and `fileTransform.js` +### 2. Configure jest's transform to transform CSS and files -```javascript -// config/jest/cssTransform.js -'use strict'; - -const { processCss } = require('jest-preview'); +`jest-preview` comes with pre-configured transformations to intercept CSS and files. This is a recommended way to configure. However, you can configure it yourself using exported transform functions as well. See [Advanced configurations](#advanced-configurations) for more -module.exports = { - process(src, filename) { - return processCss(src, filename); - }, -}; -``` - -```javascript -// config/jest/fileTransform.js -'use strict'; - -const { processFile } = require('jest-preview'); - -module.exports = { - process(src, filename) { - return processFile(src, filename); - }, -}; -``` - -For Create React App users, please use `processFileCRA` instead of `processFile`. See more at [examples/create-react-app/README.md](./examples/create-react-app/README.md#installation-and-usage) - -### 3. Configure jest's transform to intercept CSS and files - -```javascript +```json // jest.config.js transform: { - "^.+\\.css$": "/config/jest/cssTransform.js", - "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "/config/jest/fileTransform.js", + "^.+\\.css$": "jest-preview/transforms/css", + "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "jest-preview/transforms/file", }, ``` -### 4. If you use CSS Modules, make sure it doesn't get ignored +For Create React App users, please use `jest-preview/transforms/fileCRA` instead of `jest-preview/transforms/file`. See more at [examples/create-react-app/README.md](./examples/create-react-app/README.md#installation-and-usage) + +### 3. If you use CSS Modules, make sure it doesn't get ignored In most cases, CSS Modules is ignored in Jest environment. For example, Create React App default configuration ignores CSS Modules via [transformIgnorePatterns](https://github.com/facebook/create-react-app/blob/63bba07d584a769cfaf7699e0aab92ed99c3c57e/packages/react-scripts/scripts/utils/createJestConfig.js#L53) and [moduleNameMapper](https://github.com/facebook/create-react-app/blob/63bba07d584a769cfaf7699e0aab92ed99c3c57e/packages/react-scripts/scripts/utils/createJestConfig.js#L58). To make CSS Modules works with Jest Preview, we need to make sure it isn't ignored. Remove options to ignore CSS Modules or mapping using a third party library (such as [identity-obj-proxy](https://github.com/keyz/identity-obj-proxy)). @@ -129,7 +103,7 @@ moduleNameMapper: { }, ``` -### 5. (Optional) Configure external CSS +### 4. (Optional) Configure external CSS Sometimes, there are some CSS files imported outside your current test components (e.g: CSS imported in `src/index.js`, `src/main.tsx`). In this case, you can manually add those CSS files to `jest-preview` by `jestPreviewConfigure`. Notice that they should be path from root of your project. @@ -213,11 +187,49 @@ Then visit http://localhost:3336 to see the preview Preview your jest test in the browser +## Advanced configurations + +You should use [Pre-configured transformation](#2-configure-jests-transform-to-transform-css-and-files) in most cases. However, if you have existing code transformation, you can use following provided ones as follow: + +- `processCss`: Process CSS files +- `processFile`: Process files +- `processFileCRA`: Process files for Create React App + +For examples: + +````js +```javascript +// config/jest/cssTransform.js +'use strict'; + +const { processCss } = require('jest-preview'); + +module.exports = { + process(src, filename) { + return processCss(src, filename); + }, +}; +```` + +```javascript +// config/jest/fileTransform.js +'use strict'; + +const { processFile } = require('jest-preview'); +// Use processFileCRA for Create React App + +module.exports = { + process(src, filename) { + return processFile(src, filename); // Use processFileCRA for Create React App + }, +}; +``` + ## Upcoming features -- Support more `css-in-js` libraries -- Multiple preview -- [You name it](https://github.com/nvh95/jest-preview/labels/feature_request) +- Support more `css-in-js` libraries. +- Multiple preview. +- [You name it](https://github.com/nvh95/jest-preview/labels/feature_request). ## Run jest-preview locally diff --git a/examples/create-react-app/README.md b/examples/create-react-app/README.md index b221d17b..0661c08d 100644 --- a/examples/create-react-app/README.md +++ b/examples/create-react-app/README.md @@ -8,18 +8,18 @@ jest is setup with create-react-app by default, we don't need to do anything mor ## Installation and Usage -Please refer to [Installation](../../README.md#installation) and [Usage](../../README.md#usage). -Except for step 2 of installation: Create `fileTransform.js`: +Please refer to [Installation](../../README.md#installation) and [Usage](../../README.md#installation). +Except for step 2 of installation: **Configure jest's transform to transform CSS and files** -- Because `create-react-app` allows user to [use svg files as React components](https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs), `jest-preview` therefore needs to support that, so we use the below config: +- Because `create-react-app` allows user to [use svg files as React components](https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs), `jest-preview` therefore needs to support that, we update Jest's configuration in `package.json` as follow: -```javascript -// config/jest/fileTransform.js -const { processFileCRA } = require('jest-preview'); - -module.exports = { - process(src, filename) { - return processFileCRA(src, filename); +```json +transform: { + // Other transforms + "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "jest-preview/transforms/file", }, -}; ``` + +## Caveats + +Even though `jest-preview` itself supports CSS Modules, it doesn't support `create-react-app` without ejecting yet. The support will land in the next version. From c5bd7f0eb9d89db8f9657358a05b39c8d4ff9249 Mon Sep 17 00:00:00 2001 From: Hung Viet Nguyen Date: Thu, 14 Apr 2022 22:09:16 +0700 Subject: [PATCH 07/10] chore: Update README.md --- README.md | 11 +++-- cssTransform.js | 76 ----------------------------- examples/create-react-app/README.md | 6 +-- 3 files changed, 9 insertions(+), 84 deletions(-) delete mode 100644 cssTransform.js diff --git a/README.md b/README.md index 712ef163..a5c09a4e 100644 --- a/README.md +++ b/README.md @@ -77,14 +77,15 @@ pnpm install --dev jest-preview ### 2. Configure jest's transform to transform CSS and files -`jest-preview` comes with pre-configured transformations to intercept CSS and files. This is a recommended way to configure. However, you can configure it yourself using exported transform functions as well. See [Advanced configurations](#advanced-configurations) for more +`jest-preview` comes with pre-configured transformations to intercept CSS and files. This is a recommended way to configure. However, you can configure it yourself using exported transform functions as well. See [Advanced configurations](#advanced-configurations) for more. + +Update `jest.config.js`: ```json -// jest.config.js transform: { - "^.+\\.css$": "jest-preview/transforms/css", - "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "jest-preview/transforms/file", - }, + "^.+\\.css$": "jest-preview/transforms/css", + "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "jest-preview/transforms/file", +} ``` For Create React App users, please use `jest-preview/transforms/fileCRA` instead of `jest-preview/transforms/file`. See more at [examples/create-react-app/README.md](./examples/create-react-app/README.md#installation-and-usage) diff --git a/cssTransform.js b/cssTransform.js deleted file mode 100644 index 1895471d..00000000 --- a/cssTransform.js +++ /dev/null @@ -1,76 +0,0 @@ -'use strict'; - -Object.defineProperty(exports, '__esModule', { value: true }); - -require('path'); -require('camelcase'); - -function getRelativeFilename(filename) { - return filename.split(process.cwd())[1]; -} -function processCss(src, filename) { - if (filename.endsWith('.module.css')) { - return processCSSModules(src, filename); - } - const relativeFilename = getRelativeFilename(filename); - // Transform to a javascript module that load a tag to the page. - return `const relativeCssPath = "${relativeFilename}"; - const link = document.createElement('link'); - link.rel = 'stylesheet'; - link.href = relativeCssPath; - document.body.appendChild(link); - - module.exports = JSON.stringify(relativeCssPath);`; -} -// TODO: MEDIUM PRIORITY To research about getCacheKey -// Reference: -// - https://jestjs.io/docs/code-transformation#writing-custom-transformers -// - https://github.com/swc-project/jest/blob/17cf883b46c050a485975d8ce96a05277cf6032f/index.ts#L37-L52 -// const cacheKeyFunction = createCacheKey(); -// export function getCacheKey(src: string, filename: string, ...rest): string { -// const baseCacheKey = cacheKeyFunction(src, filename, ...rest); -// return crypto.createHash('md5').update(baseCacheKey).digest('hex'); -// } -// We cannot create async transformer if we are using CommonJS -// ( Reference: https://github.com/facebook/jest/issues/11081#issuecomment-791259034 -// https://github.com/facebook/jest/issues/11458 -// Also, there is a inconsistency in jest docs about should `process` be required -// https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object -// A transformer must be an object with at least a process function -// https://jestjs.io/docs/code-transformation#writing-custom-transformers -// As can be seen, only process or processAsync is mandatory to implement) -// We can use that if we opt-in to ESM. But it's not common use case right now (2022) -// So our approach is making CSS Modules a "CSS-in-JS" solution. -// CSS Modules will be compiled at run time then inject to the document.body -// One notable note is that `postcss-modules` is an async postcss plugin -// so we need to use `postcss-modules.sync`, with function `sync()` -function processCSSModules(src, filename) { - return ` -const postcss = require('postcss'); -const CSSModulesSync = require('postcss-modules-sync').default; -const cssSrc = ${JSON.stringify(src)}; - -let exportedTokens = {}; - -const result = postcss( - CSSModulesSync({ - getJSON: (tokens) => { - exportedTokens = tokens; - }, - }), -) -.process(cssSrc, { from: ${JSON.stringify(filename)} }) - -const style = document.createElement('style'); -style.type = 'text/css'; -style.appendChild(document.createTextNode(result.css)); -document.body.appendChild(style); - -module.exports = exportedTokens`; -} - -function process$1(src, filename) { - return processCss(src, filename); -} - -exports.process = process$1; diff --git a/examples/create-react-app/README.md b/examples/create-react-app/README.md index 0661c08d..97a0e173 100644 --- a/examples/create-react-app/README.md +++ b/examples/create-react-app/README.md @@ -15,9 +15,9 @@ Except for step 2 of installation: **Configure jest's transform to transform CSS ```json transform: { - // Other transforms - "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "jest-preview/transforms/file", - }, + // Other transforms + "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "jest-preview/transforms/file", +} ``` ## Caveats From eceb1c1d6487d6baae33932894ea4c0fd3cab293 Mon Sep 17 00:00:00 2001 From: Hung Viet Nguyen Date: Thu, 14 Apr 2022 22:34:41 +0700 Subject: [PATCH 08/10] chore: Update file format in READMEs --- README.md | 2 +- examples/create-react-app/README.md | 8 +++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index a5c09a4e..2e062830 100644 --- a/README.md +++ b/README.md @@ -81,7 +81,7 @@ pnpm install --dev jest-preview Update `jest.config.js`: -```json +```js transform: { "^.+\\.css$": "jest-preview/transforms/css", "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "jest-preview/transforms/file", diff --git a/examples/create-react-app/README.md b/examples/create-react-app/README.md index 97a0e173..dd521122 100644 --- a/examples/create-react-app/README.md +++ b/examples/create-react-app/README.md @@ -14,9 +14,11 @@ Except for step 2 of installation: **Configure jest's transform to transform CSS - Because `create-react-app` allows user to [use svg files as React components](https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs), `jest-preview` therefore needs to support that, we update Jest's configuration in `package.json` as follow: ```json -transform: { - // Other transforms - "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "jest-preview/transforms/file", +{ + "transform": { + // Other transforms + "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "jest-preview/transforms/file" + } } ``` From 8a3451608015972e99babf7d6bf5014a00026649 Mon Sep 17 00:00:00 2001 From: Hung Viet Nguyen Date: Fri, 15 Apr 2022 14:27:53 +0700 Subject: [PATCH 09/10] fix: Use fileCRA for CRA --- examples/create-react-app/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/create-react-app/README.md b/examples/create-react-app/README.md index dd521122..2fe33beb 100644 --- a/examples/create-react-app/README.md +++ b/examples/create-react-app/README.md @@ -17,7 +17,7 @@ Except for step 2 of installation: **Configure jest's transform to transform CSS { "transform": { // Other transforms - "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "jest-preview/transforms/file" + "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "jest-preview/transforms/fileCRA" } } ``` From d50d8fc6bacbba829e4b008db3730a8a14fb06ea Mon Sep 17 00:00:00 2001 From: Hung Viet Nguyen Date: Fri, 15 Apr 2022 15:10:09 +0700 Subject: [PATCH 10/10] chore: Release 0.1.2-alpha.0 --- CHANGELOG.md | 9 +++++++++ package-lock.json | 2 +- package.json | 2 +- 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0f0d7e37..6836d0cc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,12 @@ +# 0.1.2 + +## Features + +- Add pre-configured transformers, so users can integrate `jest-preview` to their projects easier. + - `jest-preview/transforms/css` + - `jest-preview/transforms/file` + - `jest-preview/transforms/fileCRA` + # 0.1.1 ## Features diff --git a/package-lock.json b/package-lock.json index bf13c097..9736a81a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "jest-preview", - "version": "0.1.1", + "version": "0.1.2-alpha.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index a4fe8c35..e267db2d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "jest-preview", - "version": "0.1.1", + "version": "0.1.2-alpha.0", "description": "Preview your HTML code while using Jest", "keywords": [ "testing",