diff --git a/.gitignore b/.gitignore index 1770f20d..38443a48 100644 --- a/.gitignore +++ b/.gitignore @@ -23,3 +23,7 @@ dist-ssr *.sln *.sw? .npmrc + +build +presets +transforms 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/README.md b/README.md index e085d6f7..2e062830 100644 --- a/README.md +++ b/README.md @@ -75,47 +75,22 @@ 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'); - -module.exports = { - process(src, filename) { - return processCss(src, filename); - }, -}; -``` - -```javascript -// config/jest/fileTransform.js -'use strict'; - -const { processFile } = 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 processFile(src, filename); - }, -}; -``` +Update `jest.config.js`: -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 -// jest.config.js +```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 +104,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 +188,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..2fe33beb 100644 --- a/examples/create-react-app/README.md +++ b/examples/create-react-app/README.md @@ -8,18 +8,20 @@ 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`: - -- 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: +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, 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/fileCRA" + } +} +``` -```javascript -// config/jest/fileTransform.js -const { processFileCRA } = require('jest-preview'); +## Caveats -module.exports = { - process(src, filename) { - return processFileCRA(src, filename); - }, -}; -``` +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. 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/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/jest.config.js b/jest.config.js index e9eae3f1..7f11b062 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-lock.json b/package-lock.json index fb7cf505..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": { @@ -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 869c803b..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", @@ -23,21 +23,24 @@ }, "files": [ "dist", - "server" + "server", + "transforms" ], "scripts": { "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", + "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", "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", @@ -53,6 +56,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..466b63f6 --- /dev/null +++ b/rollup.config.js @@ -0,0 +1,24 @@ +import { defineConfig } from 'rollup'; +import typescript from 'rollup-plugin-typescript2'; + +function makeBundle({ filePath, dir = 'dist' }) { + return { + input: filePath, + output: { + dir: dir, + 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', + }), +]); diff --git a/src/preconfigTransform/css.ts b/src/preconfigTransform/css.ts new file mode 100644 index 00000000..8bb1edee --- /dev/null +++ b/src/preconfigTransform/css.ts @@ -0,0 +1,8 @@ +'use strict'; + +import { processCss } from '../transform'; + +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 };