Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 944762e

Browse files
nvh95nvh95
committedMar 23, 2022
build project
1 parent 0a97294 commit 944762e

21 files changed

+124
-92
lines changed
 

‎config/jest/cssTransform.js

+2-30
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,8 @@
11
"use strict";
2+
const { processCss } = require("../../dist/index.cjs");
23

3-
// This is a custom Jest transformer turning style imports into empty objects.
4-
// http://facebook.github.io/jest/docs/en/webpack.html
5-
6-
const fs = require("fs");
7-
const path = require("path");
84
module.exports = {
95
process(src, filename) {
10-
// NOTE: Jest only run process once
11-
// console.log("cssTransform");
12-
// console.log("src", src);
13-
// console.log("filename", filename);
14-
if (!fs.existsSync("./node_modules/.cache/jest-preview-dom")) {
15-
fs.mkdirSync("./node_modules/.cache/jest-preview-dom", {
16-
recursive: true,
17-
});
18-
}
19-
fs.writeFileSync(
20-
`./node_modules/.cache/jest-preview-dom/${path.basename(filename)}`,
21-
src,
22-
{
23-
flag: "w",
24-
}
25-
);
26-
return "module.exports = {};";
6+
return processCss(src, filename);
277
},
28-
// TODO: MEDIUM PRIORITY To research about getCacheKey
29-
// Reference:
30-
// - https://jestjs.io/docs/code-transformation#writing-custom-transformers
31-
// - https://github.com/swc-project/jest/blob/17cf883b46c050a485975d8ce96a05277cf6032f/index.ts#L37-L52
32-
// getCacheKey(src, filename) {
33-
// // The output is always the same.
34-
// return filename;
35-
// },
368
};

‎config/jest/fileTransform.js

+2-41
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,9 @@
11
"use strict";
22

3-
const path = require("path");
4-
const fs = require("fs");
3+
const { processFile } = require("../../dist/index.cjs");
54

6-
// This is a custom Jest transformer turning file imports into filenames.
7-
// http://facebook.github.io/jest/docs/en/webpack.html
8-
const { writeFileSync } = require("fs");
95
module.exports = {
10-
// TODO1: We can support image import by convert image to base 64
11-
// or just copy image to preview folder
12-
// Currently, we copy to preview folder. But convert to base64 might be a better idea
13-
// Since we can avoid the File I/O operations and keep images in the memory
14-
// To experiment about this idea but low priority. First, make it work.
15-
16-
// TODO2: HIGH PRIORITY What about files that are not images? e.g. pdf, doc, mp3?
17-
// I suppose it's OK. Because as I recalled, webpack still convert pdf, doc, mp3 => link (file-loader?)
186
process(src, filename) {
19-
const assetFilename = JSON.stringify(path.basename(filename));
20-
// console.log("fileTransform");
21-
// console.log("src", src);
22-
// console.log("filename", filename);
23-
// TODO: MEDIUM PRIORITY: For PoC, we only copy image file to preview folder and keep the BASENAME.
24-
// That means `assets/images/abc.png` will be copied to `./node_modules/.cache/jest-preview-dom/abc.png`
25-
// We should keep the structure. i.e: `./node_modules/.cache/jest-preview-dom/assets/images/abc.png`
26-
// The reason we need to keep the structure since there might be 2 images with the same name in 2 different folders.
27-
// E.g: `assets/images/abc.png` vs `demo/abc.png` => only 1 `abc.png`
28-
// However, we might not need to make it nested if we using hashing to differentiate.
29-
// Hash might be a better solution for 0.0.1
30-
// Same for cssTransform
31-
// assets/images/abc.png => fdsfs343r3.png
32-
// demo/abc.png => dfdfsgs.png
33-
if (!fs.existsSync("./node_modules/.cache/jest-preview-dom")) {
34-
fs.mkdirSync("./node_modules/.cache/jest-preview-dom", {
35-
recursive: true,
36-
});
37-
}
38-
fs.writeFileSync(
39-
`./node_modules/.cache/jest-preview-dom/${path.basename(filename)}`,
40-
src,
41-
{
42-
flag: "w",
43-
}
44-
);
45-
46-
return `module.exports = ${assetFilename};`;
7+
return processFile(src, filename);
478
},
489
};

‎src/App.css ‎demo/App.css

File renamed without changes.

‎src/App.tsx ‎demo/App.tsx

File renamed without changes.

‎src/App2.css ‎demo/App2.css

File renamed without changes.

‎src/__tests__/App.test.tsx ‎demo/__tests__/App.test.tsx

File renamed without changes.

‎src/assets/images/logo.svg ‎demo/assets/images/logo.svg

File renamed without changes.

‎src/favicon.svg ‎demo/favicon.svg

File renamed without changes.

‎src/index.css ‎demo/index.css

File renamed without changes.

‎src/logo.svg ‎demo/logo.svg

File renamed without changes.

‎src/main.tsx ‎demo/main.tsx

File renamed without changes.

‎src/vite-env.d.ts ‎demo/vite-env.d.ts

File renamed without changes.

‎index.html

+13-10
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite App</title>
8-
</head>
9-
<body>
10-
<div id="root"></div>
11-
<script type="module" src="/src/main.tsx"></script>
12-
</body>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<link rel="icon" type="image/svg+xml" href="/demo/favicon.svg" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Vite App</title>
9+
</head>
10+
11+
<body>
12+
<div id="root"></div>
13+
<script type="module" src="/demo/main.tsx"></script>
14+
</body>
15+
1316
</html>

‎jest.config.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
module.exports = {
2-
roots: ["<rootDir>/src"],
2+
roots: ["<rootDir>/demo"],
33
collectCoverageFrom: [
4-
"src/**/*.{js,jsx,ts,tsx}",
5-
"!src/**/*.d.ts",
6-
"!src/mocks/**",
4+
"demo/**/*.{js,jsx,ts,tsx}",
5+
"!demo/**/*.d.ts",
6+
"!demo/mocks/**",
77
],
88
coveragePathIgnorePatterns: [],
99
setupFilesAfterEnv: ["./config/jest/setupTests.js"],
1010
testEnvironment: "jsdom",
11-
modulePaths: ["<rootDir>/src"],
11+
modulePaths: ["<rootDir>/demo"],
1212
transform: {
1313
"^.+\\.(ts|js|tsx|jsx)$": "@swc/jest",
1414
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
@@ -19,7 +19,7 @@ module.exports = {
1919
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
2020
"^.+\\.module\\.(css|sass|scss)$",
2121
],
22-
modulePaths: ["<rootDir>/src"],
22+
modulePaths: ["<rootDir>/demo"],
2323
moduleNameMapper: {
2424
"^react-native$": "react-native-web",
2525
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",

‎server/previewServer.ts

+7-2
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,17 @@
33
// - https://jestjs.io/docs/puppeteer
44
// - https://jestjs.io/docs/configuration#globalsetup-string
55
// No, we can't. Since jest will terminate the express server after test finish running
6+
// TODO: Is there any simpler solution compare to express? We just need to serve a file
7+
// How vite starts a server? Can we leverage this?
8+
// http-server? http?
69
const express = require("express");
710
const app = express();
8-
const port = 3006;
11+
const port = process.env.PORT || 3336;
912

1013
const path = require("path");
1114
const { readFileSync, readdirSync } = require("fs");
1215

13-
app.get("/", (req, res) => {
16+
app.get("/", (req: any, res: any) => {
1417
const html = readFileSync(
1518
"./node_modules/.cache/jest-preview-dom/index.html",
1619
"utf8"
@@ -41,3 +44,5 @@ app.use(express.static("./node_modules/.cache/jest-preview-dom"));
4144
app.listen(port, () => {
4245
console.log(`Example app listening on port ${port}`);
4346
});
47+
48+
export {};

‎src/cssTransform.ts

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
// import fs from "fs";
2+
// import path from "path";
3+
4+
const fs = require("fs");
5+
const path = require("path");
6+
7+
export function processCss(src: string, filename: string): string {
8+
// NOTE: Jest only run process once
9+
// console.log("cssTransform");
10+
// console.log("src", src);
11+
// console.log("filename", filename);
12+
if (!fs.existsSync("./node_modules/.cache/jest-preview-dom")) {
13+
fs.mkdirSync("./node_modules/.cache/jest-preview-dom", {
14+
recursive: true,
15+
});
16+
}
17+
fs.writeFileSync(
18+
`./node_modules/.cache/jest-preview-dom/${path.basename(filename)}`,
19+
src,
20+
{
21+
flag: "w",
22+
}
23+
);
24+
return "module.exports = {};";
25+
}
26+
27+
// TODO: MEDIUM PRIORITY To research about getCacheKey
28+
// Reference:
29+
// - https://jestjs.io/docs/code-transformation#writing-custom-transformers
30+
// - https://github.com/swc-project/jest/blob/17cf883b46c050a485975d8ce96a05277cf6032f/index.ts#L37-L52
31+
// getCacheKey(src, filename) {
32+
// // The output is always the same.
33+
// return filename;
34+
// },

‎src/fileTransform.ts

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// import fs from "fs";
2+
// import path from "path";
3+
4+
const fs = require("fs");
5+
const path = require("path");
6+
// TODO1: We can support image import by convert image to base 64
7+
// or just copy image to preview folder
8+
// Currently, we copy to preview folder. But convert to base64 might be a better idea
9+
// Since we can avoid the File I/O operations and keep images in the memory
10+
// To experiment about this idea but low priority. First, make it work.
11+
12+
// TODO2: HIGH PRIORITY What about files that are not images? e.g. pdf, doc, mp3?
13+
// I suppose it's OK. Because as I recalled, webpack still convert pdf, doc, mp3 => link (file-loader?)
14+
export function processFile(src: string, filename: string): string {
15+
const assetFilename = JSON.stringify(path.basename(filename));
16+
// console.log("fileTransform");
17+
// console.log("src", src);
18+
// console.log("filename", filename);
19+
// TODO: MEDIUM PRIORITY: For PoC, we only copy image file to preview folder and keep the BASENAME.
20+
// That means `assets/images/abc.png` will be copied to `./node_modules/.cache/jest-preview-dom/abc.png`
21+
// We should keep the structure. i.e: `./node_modules/.cache/jest-preview-dom/assets/images/abc.png`
22+
// The reason we need to keep the structure since there might be 2 images with the same name in 2 different folders.
23+
// E.g: `assets/images/abc.png` vs `demo/abc.png` => only 1 `abc.png`
24+
// However, we might not need to make it nested if we using hashing to differentiate.
25+
// Hash might be a better solution for 0.0.1
26+
// Same for cssTransform
27+
// assets/images/abc.png => fdsfs343r3.png
28+
// demo/abc.png => dfdfsgs.png
29+
if (!fs.existsSync("./node_modules/.cache/jest-preview-dom")) {
30+
fs.mkdirSync("./node_modules/.cache/jest-preview-dom", {
31+
recursive: true,
32+
});
33+
}
34+
fs.writeFileSync(
35+
`./node_modules/.cache/jest-preview-dom/${path.basename(filename)}`,
36+
src,
37+
{
38+
flag: "w",
39+
}
40+
);
41+
42+
return `module.exports = ${assetFilename};`;
43+
}

‎src/index.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { processCss } from "./cssTransform";
2+
import { processFile } from "./fileTransform";
3+
4+
export { processCss, processFile };

‎tsconfig.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"target": "ESNext",
44
"useDefineForClassFields": true,
55
"lib": ["DOM", "DOM.Iterable", "ESNext"],
6-
"allowJs": false,
6+
"allowJs": true,
77
"skipLibCheck": false,
88
"esModuleInterop": false,
99
"allowSyntheticDefaultImports": true,
@@ -16,6 +16,6 @@
1616
"noEmit": true,
1717
"jsx": "react-jsx"
1818
},
19-
"include": ["src"],
19+
"include": ["demo", "src", "server"],
2020
"references": [{ "path": "./tsconfig.node.json" }]
2121
}

‎tsconfig.prod.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
22
"extends": "./tsconfig",
3-
"exclude": ["./src/__tests__/**", "./src/__mocks__/**", "./src/test-utils"]
3+
"exclude": ["./demo/__tests__/**", "./demo/__mocks__/**", "./demo/test-utils"]
44
}

‎vite.config.ts

+10
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { defineConfig, loadEnv } from "vite";
22
import react from "@vitejs/plugin-react";
33

4+
const path = require("path");
5+
46
// https://vitejs.dev/config/
57
export default defineConfig(({ mode }) => {
68
// expose .env as process.env instead of import.meta.env
@@ -24,5 +26,13 @@ export default defineConfig(({ mode }) => {
2426
// If `envWithProcessPrefix` is an empty object, `process.env` will be undefined and the app cannot be loaded
2527
// Caveat: Cannot access `process.env` in build mode, always use `process.env.VARIABLE_NAME`
2628
define: envWithProcessPrefix,
29+
build: {
30+
lib: {
31+
entry: path.resolve(__dirname, "src/index.ts"),
32+
name: "jest-preview",
33+
fileName: (format) => `index.${format}.js`,
34+
formats: ["es", "cjs"],
35+
},
36+
},
2737
};
2838
});

0 commit comments

Comments
 (0)
Please sign in to comment.