build project

nvh95 · Mar 23, 2022 · 944762e · 944762e
1 parent 0a97294
commit 944762e
Show file tree

Hide file tree

Showing 21 changed files with 124 additions and 92 deletions.
diff --git a/config/jest/cssTransform.js b/config/jest/cssTransform.js
@@ -1,36 +1,8 @@
 "use strict";
+const { processCss } = require("../../dist/index.cjs");
 
-// This is a custom Jest transformer turning style imports into empty objects.
-// http://facebook.github.io/jest/docs/en/webpack.html
-
-const fs = require("fs");
-const path = require("path");
 module.exports = {
   process(src, filename) {
-    // NOTE: Jest only run process once
-    // console.log("cssTransform");
-    // console.log("src", src);
-    // console.log("filename", filename);
-    if (!fs.existsSync("./node_modules/.cache/jest-preview-dom")) {
-      fs.mkdirSync("./node_modules/.cache/jest-preview-dom", {
-        recursive: true,
-      });
-    }
-    fs.writeFileSync(
-      `./node_modules/.cache/jest-preview-dom/${path.basename(filename)}`,
-      src,
-      {
-        flag: "w",
-      }
-    );
-    return "module.exports = {};";
+    return processCss(src, filename);
   },
-  // 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
-  // getCacheKey(src, filename) {
-  //   // The output is always the same.
-  //   return filename;
-  // },
 };
diff --git a/config/jest/fileTransform.js b/config/jest/fileTransform.js
@@ -1,48 +1,9 @@
 "use strict";
 
-const path = require("path");
-const fs = require("fs");
+const { processFile } = require("../../dist/index.cjs");
 
-// This is a custom Jest transformer turning file imports into filenames.
-// http://facebook.github.io/jest/docs/en/webpack.html
-const { writeFileSync } = require("fs");
 module.exports = {
-  // TODO1: We can support image import by convert image to base 64
-  // or just copy image to preview folder
-  // Currently, we copy to preview folder. But convert to base64 might be a better idea
-  // Since we can avoid the File I/O operations and keep images in the memory
-  // To experiment about this idea but low priority. First, make it work.
-
-  // TODO2: HIGH PRIORITY What about files that are not images? e.g. pdf, doc, mp3?
-  // I suppose it's OK. Because as I recalled, webpack still convert pdf, doc, mp3 => link (file-loader?)
   process(src, filename) {
-    const assetFilename = JSON.stringify(path.basename(filename));
-    // console.log("fileTransform");
-    // console.log("src", src);
-    // console.log("filename", filename);
-    // TODO: MEDIUM PRIORITY: For PoC, we only copy image file to preview folder and keep the BASENAME.
-    // That means `assets/images/abc.png` will be copied to `./node_modules/.cache/jest-preview-dom/abc.png`
-    // We should keep the structure. i.e: `./node_modules/.cache/jest-preview-dom/assets/images/abc.png`
-    // The reason we need to keep the structure since there might be 2 images with the same name in 2 different folders.
-    // E.g: `assets/images/abc.png` vs `demo/abc.png` => only 1 `abc.png`
-    // However, we might not need to make it nested if we using hashing to differentiate.
-    // Hash might be a better solution for 0.0.1
-    // Same for cssTransform
-    // assets/images/abc.png => fdsfs343r3.png
-    // demo/abc.png  => dfdfsgs.png
-    if (!fs.existsSync("./node_modules/.cache/jest-preview-dom")) {
-      fs.mkdirSync("./node_modules/.cache/jest-preview-dom", {
-        recursive: true,
-      });
-    }
-    fs.writeFileSync(
-      `./node_modules/.cache/jest-preview-dom/${path.basename(filename)}`,
-      src,
-      {
-        flag: "w",
-      }
-    );
-
-    return `module.exports = ${assetFilename};`;
+    return processFile(src, filename);
   },
 };
diff --git a/src/App.css → demo/App.css b/src/App.css → demo/App.css
diff --git a/src/App.tsx → demo/App.tsx b/src/App.tsx → demo/App.tsx
diff --git a/src/App2.css → demo/App2.css b/src/App2.css → demo/App2.css
diff --git a/src/__tests__/App.test.tsx → demo/__tests__/App.test.tsx b/src/__tests__/App.test.tsx → demo/__tests__/App.test.tsx
diff --git a/src/assets/images/logo.svg → demo/assets/images/logo.svg b/src/assets/images/logo.svg → demo/assets/images/logo.svg
diff --git a/src/favicon.svg → demo/favicon.svg b/src/favicon.svg → demo/favicon.svg
diff --git a/src/index.css → demo/index.css b/src/index.css → demo/index.css
diff --git a/src/logo.svg → demo/logo.svg b/src/logo.svg → demo/logo.svg
diff --git a/src/main.tsx → demo/main.tsx b/src/main.tsx → demo/main.tsx
diff --git a/src/vite-env.d.ts → demo/vite-env.d.ts b/src/vite-env.d.ts → demo/vite-env.d.ts
diff --git a/index.html b/index.html
@@ -1,13 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/demo/favicon.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite App</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/demo/main.tsx"></script>
+</body>
+
 </html>
diff --git a/jest.config.js b/jest.config.js
@@ -1,14 +1,14 @@
 module.exports = {
-  roots: ["<rootDir>/src"],
+  roots: ["<rootDir>/demo"],
   collectCoverageFrom: [
-    "src/**/*.{js,jsx,ts,tsx}",
-    "!src/**/*.d.ts",
-    "!src/mocks/**",
+    "demo/**/*.{js,jsx,ts,tsx}",
+    "!demo/**/*.d.ts",
+    "!demo/mocks/**",
   ],
   coveragePathIgnorePatterns: [],
   setupFilesAfterEnv: ["./config/jest/setupTests.js"],
   testEnvironment: "jsdom",
-  modulePaths: ["<rootDir>/src"],
+  modulePaths: ["<rootDir>/demo"],
   transform: {
     "^.+\\.(ts|js|tsx|jsx)$": "@swc/jest",
     "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
@@ -19,7 +19,7 @@ module.exports = {
     "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
     "^.+\\.module\\.(css|sass|scss)$",
   ],
-  modulePaths: ["<rootDir>/src"],
+  modulePaths: ["<rootDir>/demo"],
   moduleNameMapper: {
     "^react-native$": "react-native-web",
     "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",

diff --git a/server/previewServer.ts b/server/previewServer.ts
@@ -3,14 +3,17 @@
 // - https://jestjs.io/docs/puppeteer
 // - https://jestjs.io/docs/configuration#globalsetup-string
 // No, we can't. Since jest will terminate the express server after test finish running
+// TODO: Is there any simpler solution compare to express? We just need to serve a file
+// How vite starts a server? Can we leverage this?
+// http-server? http?
 const express = require("express");
 const app = express();
-const port = 3006;
+const port = process.env.PORT || 3336;
 
 const path = require("path");
 const { readFileSync, readdirSync } = require("fs");
 
-app.get("/", (req, res) => {
+app.get("/", (req: any, res: any) => {
   const html = readFileSync(
     "./node_modules/.cache/jest-preview-dom/index.html",
     "utf8"
@@ -41,3 +44,5 @@ app.use(express.static("./node_modules/.cache/jest-preview-dom"));
 app.listen(port, () => {
   console.log(`Example app listening on port ${port}`);
 });
+
+export {};
diff --git a/src/cssTransform.ts b/src/cssTransform.ts
@@ -0,0 +1,34 @@
+// import fs from "fs";
+// import path from "path";
+
+const fs = require("fs");
+const path = require("path");
+
+export function processCss(src: string, filename: string): string {
+  // NOTE: Jest only run process once
+  // console.log("cssTransform");
+  // console.log("src", src);
+  // console.log("filename", filename);
+  if (!fs.existsSync("./node_modules/.cache/jest-preview-dom")) {
+    fs.mkdirSync("./node_modules/.cache/jest-preview-dom", {
+      recursive: true,
+    });
+  }
+  fs.writeFileSync(
+    `./node_modules/.cache/jest-preview-dom/${path.basename(filename)}`,
+    src,
+    {
+      flag: "w",
+    }
+  );
+  return "module.exports = {};";
+}
+
+// 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
+// getCacheKey(src, filename) {
+//   // The output is always the same.
+//   return filename;
+// },
diff --git a/src/fileTransform.ts b/src/fileTransform.ts
@@ -0,0 +1,43 @@
+// import fs from "fs";
+// import path from "path";
+
+const fs = require("fs");
+const path = require("path");
+// TODO1: We can support image import by convert image to base 64
+// or just copy image to preview folder
+// Currently, we copy to preview folder. But convert to base64 might be a better idea
+// Since we can avoid the File I/O operations and keep images in the memory
+// To experiment about this idea but low priority. First, make it work.
+
+// TODO2: HIGH PRIORITY What about files that are not images? e.g. pdf, doc, mp3?
+// I suppose it's OK. Because as I recalled, webpack still convert pdf, doc, mp3 => link (file-loader?)
+export function processFile(src: string, filename: string): string {
+  const assetFilename = JSON.stringify(path.basename(filename));
+  // console.log("fileTransform");
+  // console.log("src", src);
+  // console.log("filename", filename);
+  // TODO: MEDIUM PRIORITY: For PoC, we only copy image file to preview folder and keep the BASENAME.
+  // That means `assets/images/abc.png` will be copied to `./node_modules/.cache/jest-preview-dom/abc.png`
+  // We should keep the structure. i.e: `./node_modules/.cache/jest-preview-dom/assets/images/abc.png`
+  // The reason we need to keep the structure since there might be 2 images with the same name in 2 different folders.
+  // E.g: `assets/images/abc.png` vs `demo/abc.png` => only 1 `abc.png`
+  // However, we might not need to make it nested if we using hashing to differentiate.
+  // Hash might be a better solution for 0.0.1
+  // Same for cssTransform
+  // assets/images/abc.png => fdsfs343r3.png
+  // demo/abc.png  => dfdfsgs.png
+  if (!fs.existsSync("./node_modules/.cache/jest-preview-dom")) {
+    fs.mkdirSync("./node_modules/.cache/jest-preview-dom", {
+      recursive: true,
+    });
+  }
+  fs.writeFileSync(
+    `./node_modules/.cache/jest-preview-dom/${path.basename(filename)}`,
+    src,
+    {
+      flag: "w",
+    }
+  );
+
+  return `module.exports = ${assetFilename};`;
+}
diff --git a/src/index.ts b/src/index.ts
@@ -0,0 +1,4 @@
+import { processCss } from "./cssTransform";
+import { processFile } from "./fileTransform";
+
+export { processCss, processFile };
diff --git a/tsconfig.json b/tsconfig.json
@@ -3,7 +3,7 @@
     "target": "ESNext",
     "useDefineForClassFields": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
+    "allowJs": true,
     "skipLibCheck": false,
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
@@ -16,6 +16,6 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["src"],
+  "include": ["demo", "src", "server"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/tsconfig.prod.json b/tsconfig.prod.json
@@ -1,4 +1,4 @@
 {
   "extends": "./tsconfig",
-  "exclude": ["./src/__tests__/**", "./src/__mocks__/**", "./src/test-utils"]
+  "exclude": ["./demo/__tests__/**", "./demo/__mocks__/**", "./demo/test-utils"]
 }
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,6 +1,8 @@
 import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react";
 
+const path = require("path");
+
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   // expose .env as process.env instead of import.meta.env
@@ -24,5 +26,13 @@ export default defineConfig(({ mode }) => {
     // If `envWithProcessPrefix` is an empty object, `process.env` will be undefined and the app cannot be loaded
     // Caveat: Cannot access `process.env` in build mode, always use `process.env.VARIABLE_NAME`
     define: envWithProcessPrefix,
+    build: {
+      lib: {
+        entry: path.resolve(__dirname, "src/index.ts"),
+        name: "jest-preview",
+        fileName: (format) => `index.${format}.js`,
+        formats: ["es", "cjs"],
+      },
+    },
   };
 });