Merge pull request #22 from marko-js/improve-marko-5-support

feat: improve marko 5 support

BREAKING CHANGE: drops support for Marko 3

.github/workflows/ci.yml

@@ -27,4 +27,4 @@ jobs:
       - name: Run tests
         run: npm run ci:test
       - name: Report code coverage
-        run: npm run ci:report
+        uses: codecov/codecov-action@v2

babel.config.json

@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/typescript"],
+  "plugins": ["@babel/transform-modules-commonjs"]
+}

jest.config.js

@@ -1,6 +1,6 @@
 const common = {
   transform: {
-    "\\.ts$": "esbuild-jest",
+    "\\.[cm]?[jt]s$": "babel-jest",
     "\\.css$": "jest-transform-css",
   },
 };

package.json

@@ -10,33 +10,36 @@
     "merge-source-map": "^1.1.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^12.1.4",
-    "@commitlint/config-conventional": "^12.1.4",
-    "@jest/transform": "^27.0.2",
-    "@types/enhanced-resolve": "^3.0.6",
-    "@types/jest": "^26.0.23",
-    "@types/node": "^15.6.2",
-    "@typescript-eslint/eslint-plugin": "^4.26.0",
-    "@typescript-eslint/parser": "^4.26.0",
-    "codecov": "^3.8.2",
-    "esbuild": "^0.12.5",
-    "esbuild-jest": "^0.5.0",
-    "esbuild-register": "^2.5.0",
-    "eslint": "^7.27.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jest": "^24.3.6",
-    "eslint-plugin-prettier": "^3.4.0",
+    "@babel/core": "^7.19.3",
+    "@babel/plugin-transform-modules-commonjs": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@commitlint/cli": "^17.1.2",
+    "@commitlint/config-conventional": "^17.1.0",
+    "@jest/transform": "^29.1.0",
+    "@types/enhanced-resolve": "^3.0.7",
+    "@types/jest": "^29.0.3",
+    "@types/node": "^18.7.23",
+    "@typescript-eslint/eslint-plugin": "^5.38.1",
+    "@typescript-eslint/parser": "^5.38.1",
+    "babel-jest": "^29.1.0",
+    "esbuild": "^0.15.9",
+    "esbuild-register": "^3.3.3",
+    "eslint": "^8.24.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-jest": "^27.0.4",
+    "eslint-plugin-prettier": "^4.2.1",
     "fixpack": "^4.0.0",
-    "husky": "^6.0.0",
-    "jest": "^26.6.3",
-    "jest-config": "^26.6.3",
-    "jest-transform-css": "^2.1.0",
-    "lint-staged": "^11.0.0",
-    "marko": "^5.10.4",
-    "prettier": "^2.3.0",
-    "standard-version": "^9.3.0",
+    "husky": "^8.0.1",
+    "jest": "^29.1.1",
+    "jest-config": "^29.1.1",
+    "jest-environment-jsdom": "^29.1.1",
+    "jest-transform-css": "^5.0.0",
+    "lint-staged": "^13.0.3",
+    "marko": "^5.21.9",
+    "prettier": "^2.7.1",
+    "standard-version": "^9.5.0",
     "tiny-glob": "^0.2.9",
-    "typescript": "^4.3.2"
+    "typescript": "^4.8.4"
   },
   "files": [
     "dist/preset",
@@ -53,15 +56,14 @@
   "license": "MIT",
   "main": "transform/node.js",
   "peerDependencies": {
-    "jest-config": "23 - 28"
+    "jest-config": "23 - 29"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/marko-js/jest"
   },
   "scripts": {
     "build": "tsc && node build.js",
-    "ci:report": "codecov",
     "ci:test": "npm run jest -- --ci --coverage",
     "format": "npm run lint:eslint -- --fix && npm run lint:prettier -- --write && (fixpack || true)",
     "jest": "node -r esbuild-register $(which jest) --runInBand",

src/transform/create-transform.ts

@@ -1,20 +1,18 @@
 import fs from "fs";
-import path from "path";
-import crypto from "crypto";
-import { Buffer } from "buffer";
-import compiler from "marko/compiler";
 import mergeMaps from "merge-source-map";
 import ConcatMap from "concat-with-sourcemaps";
 import type { Transformer } from "@jest/transform";
-const THIS_FILE = fs.readFileSync(__filename);
-const MARKO_OPTIONS: Record<string, any> = {
-  writeVersionComment: false,
-  requireTemplates: true,
-  writeToDisk: false,
-  sourceOnly: false,
-  sourceMaps: true,
-  modules: "cjs",
-};
+import { version as markoVersion } from "marko/package.json";
+
+const isMarko4 = /^4\./.test(markoVersion);
+const htmlOutput = "html";
+const domOutput = isMarko4 ? "vdom" : "dom";
+const compiler = isMarko4
+  ? require("marko/compiler")
+  : require("@marko/compiler");
+const taglib = isMarko4 ? compiler.taglibFinder : compiler.taglib;
+const compileSync = isMarko4 ? compiler.compile : compiler.compileSync;
+const cache = new Map();
 let configuredGlobals = false;
 
 // Allows for resolving `.marko` files during compilation.
@@ -24,73 +22,53 @@ if (!(".marko" in require.extensions)) {
 
 export default ({ browser }: { browser: boolean }) => {
   const transformer: Transformer = {
-    getCacheKey(
-      sourceText,
-      sourcePath,
-      transformOptions,
-      config = transformOptions.config
-    ) {
-      return crypto
-        .createHash("md5")
-        .setEncoding("utf-8")
-        .update(THIS_FILE)
-        .update("\0")
-        .update(sourceText)
-        .update("\0")
-        .update(path.relative(config.rootDir, sourcePath))
-        .update("\0")
-        .update(
-          transformOptions.instrument || (config as any).instrument
-            ? "instrument"
-            : ""
-        )
-        .update("\0")
-        .update(process.env.NODE_ENV || "")
-        .update("\0")
-        .update(process.env.MARKO_DEBUG || "")
-        .digest("hex");
-    },
     process(src, filename, transformOptions) {
       const config = transformOptions.config || transformOptions;
-      const markoConfig = config.globals.marko as any;
-
-      if (!configuredGlobals && markoConfig) {
-        configuredGlobals = true;
-
-        for (const key in markoConfig) {
-          if (key !== "taglib") {
-            MARKO_OPTIONS[key] = markoConfig[key];
+      const globalMarkoConfig = config.globals.marko as any;
+      const output = browser ? domOutput : htmlOutput;
+      const markoConfig: Record<string, any> = isMarko4
+        ? {
+            requireTemplates: true,
+            writeToDisk: false,
+            sourceOnly: false,
+            output,
           }
-        }
-
-        const taglibConfig = markoConfig.taglib;
-        if (taglibConfig) {
-          const excludeDirs = taglibConfig.excludeDirs;
-          if (excludeDirs) {
-            for (const name of excludeDirs) {
-              compiler.taglibFinder.excludeDir(name);
+        : {
+            fileSystem: createVirtualFS(transformOptions.cacheFS),
+            sourceMaps: true,
+            modules: "cjs",
+            output,
+            cache,
+          };
+
+      if (globalMarkoConfig) {
+        const { taglib: taglibConfig, ...compilerConfig } = globalMarkoConfig;
+        Object.assign(markoConfig, compilerConfig);
+
+        if (!configuredGlobals) {
+          configuredGlobals = true;
+
+          if (taglibConfig) {
+            const excludeDirs = taglibConfig.excludeDirs;
+            if (excludeDirs) {
+              for (const name of excludeDirs) {
+                taglib.excludeDir(name);
+              }
             }
-          }
 
-          const excludePackages = taglibConfig.excludePackages;
-          if (excludePackages) {
-            for (const name of excludePackages) {
-              compiler.taglibFinder.excludePackage(name);
+            const excludePackages = taglibConfig.excludePackages;
+            if (excludePackages) {
+              for (const name of excludePackages) {
+                taglib.excludePackage(name);
+              }
             }
           }
         }
       }
 
-      const result = compiler[
-        (browser || (config as any).browser) &&
-        compiler.compileForBrowser /** Only Marko 4 supports compileForBrowser, otherwise use compile */
-          ? "compileForBrowser"
-          : "compile"
-      ](src, filename, MARKO_OPTIONS);
-
-      let code = typeof result === "string" ? result : result.code; // Marko 3 does not support sourceOnly: false
-      let map = result.map;
+      const result = compileSync(src, filename, markoConfig);
       const deps = browser && result.meta && result.meta.deps;
+      let { code, map } = result;
 
       if (deps && deps.length) {
         const concatMap = new ConcatMap(true, "", ";");
@@ -149,15 +127,26 @@ export default ({ browser }: { browser: boolean }) => {
         map = concatMap.sourceMap;
       }
 
-      if (map) {
-        code += `\n//# sourceMappingURL=data:application/json;base64,${Buffer.from(
-          typeof map === "string" ? map : JSON.stringify(map)
-        ).toString("base64")}`;
-      }
-
-      return { code };
+      return { code, map: map && JSON.stringify(map) };
     },
   };
 
   return transformer;
 };
+
+function createVirtualFS(map: Map<string, string> | undefined) {
+  if (!map) return fs;
+
+  return {
+    ...fs,
+    readFileSync(...args: Parameters<typeof fs["readFileSync"]>) {
+      const path = args[0] as any;
+      const source = map.get(path);
+      if (source !== undefined) {
+        return source;
+      }
+
+      return fs.readFileSync(...args);
+    },
+  };
+}

test/browser.test.ts

@@ -29,15 +29,15 @@ test("transforms templates in node_modules", async () => {
   const result = await Project.render({});
   result.appendTo(document.body).getComponent();
   expect(document.body.innerHTML).toMatchInlineSnapshot(
-    `"<div class=\\"direct\\"><div class=\\"indirect\\">Hello World</div></div>"`
+    `"<div class="direct"><div class="indirect">Hello World</div></div>"`
   );
 });
 
 test("includes inline styles in jsdom", async () => {
   const result = await StyledInline.render({});
   result.appendTo(document.body).getComponent();
   expect(document.body.innerHTML).toMatchInlineSnapshot(
-    `"<div class=\\"inline\\">Hello world</div>"`
+    `"<div class="inline">Hello world</div>"`
   );
 
   expect(
@@ -49,7 +49,7 @@ test("includes external styles in jsdom", async () => {
   const result = await StyledExternal.render({});
   result.appendTo(document.body).getComponent();
   expect(document.body.innerHTML).toMatchInlineSnapshot(
-    `"<div class=\\"external\\">Hello world</div>"`
+    `"<div class="external">Hello world</div>"`
   );
 
   expect(

tsconfig.json

@@ -10,6 +10,7 @@
     "sourceMap": false,
     "incremental": true,
     "declaration": true,
+    "skipLibCheck": true,
     "stripInternal": true,
     "resolveJsonModule": true,
     "moduleResolution": "node",