[build] [sourcemap] Add external sourcemap for easier production debu…

…gging.
Freemius · Sep 17, 2024 · 5041b9f · 5041b9f
1 parent 9dd2062
commit 5041b9f
Show file tree

Hide file tree

Showing 12 changed files with 94 additions and 76 deletions.
diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
@@ -17,16 +17,17 @@ jobs:
       - uses: ./.github/actions/setup-node
       - name: 🏗 Build
         run: npm run build:lib
-      - name: ✏️ Rename files
-        run: mv lib/adapter/checkout.js lib/adapter/adapter.js && mv lib/global/checkout.js lib/global/global.js
-        shell: bash
-      - name: 📦 Package adapter.js
-        run: gh release upload ${{ github.event.release.tag_name }} lib/adapter/adapter.js --clobber
+      - name: 📦 Package checkout.adapter.js
+        run: |
+          gh release upload ${{ github.event.release.tag_name }} lib/adapter/checkout.adapter.js --clobber
+          gh release upload ${{ github.event.release.tag_name }} lib/adapter/checkout.adapter.js.map --clobber
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         shell: bash
-      - name: 📦 Package global.js
-        run: gh release upload ${{ github.event.release.tag_name }} lib/global/global.js --clobber
+      - name: 📦 Package checkout.global.js
+        run: |
+          gh release upload ${{ github.event.release.tag_name }} lib/global/checkout.global.js --clobber
+          gh release upload ${{ github.event.release.tag_name }} lib/global/checkout.global.js.map --clobber
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         shell: bash
diff --git a/.gitignore b/.gitignore
@@ -191,3 +191,6 @@ $RECYCLE.BIN/
 
 # Windows shortcuts
 *.lnk
+
+# Cypres screenshots and videos
+cypress/screenshots
diff --git a/cypress/pages/adapter/index.html b/cypress/pages/adapter/index.html
@@ -8,7 +8,7 @@
         />
         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
         <title>E2E Test for the Checkout Adapter Library</title>
-        <script src="/lib/adapter/checkout.js" async defer></script>
+        <script src="/lib/adapter/checkout.adapter.js" async defer></script>
         <script src="main.ts" type="module"></script>
     </head>
     <body>

diff --git a/cypress/pages/global/index.html b/cypress/pages/global/index.html
@@ -8,7 +8,7 @@
         />
         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
         <title>E2E Test for the Checkout Adapter Library</title>
-        <script src="/lib/global/checkout.js" async defer></script>
+        <script src="/lib/global/checkout.global.js" async defer></script>
         <script src="main.ts" type="module"></script>
     </head>
     <body>

diff --git a/src/lib/utils/vite-plugins.ts b/src/lib/utils/vite-plugins.ts
diff --git a/src/lib/utils/vite.ts b/src/lib/utils/vite.ts
@@ -0,0 +1,69 @@
+import { PluginOption, UserConfig } from 'vite';
+import { dirname, resolve } from 'path';
+
+export const minifyInlineCSS: PluginOption = {
+    name: 'fs-minify-inline-css',
+    transform(code, id) {
+        // We are only minifying TypeScript and JavaScript files.
+        if (!/\.(ts|js)$/.test(id)) {
+            return null;
+        }
+
+        // Regex to match CSS inside template literals starting with `/*@fs-css-minify*/`.
+        const cssRegex = /\/\*@fs-css-minify\*\/\s*`([^`]+)`/g;
+
+        // Check if the code contains any CSS to minify.
+        if (cssRegex.test(code)) {
+            // Replace all the CSS inside template literals with minified CSS.
+            code = code.replace(cssRegex, (_, css) => {
+                // Just remove the new lines and spaces.
+                css = css.replace(/\s+/g, ' ').trim();
+
+                // Return the minified CSS inside a template literal.
+                return `\`${css}\``;
+            });
+        }
+
+        return {
+            code,
+            map: null,
+        };
+    },
+};
+
+export function createConfig(
+    entry: string,
+    outDir: string,
+    sourceRootDir: string
+): UserConfig {
+    const iifeName = outDir.charAt(0).toUpperCase() + outDir.slice(1);
+
+    return {
+        build: {
+            outDir: `lib/${outDir}`,
+            target: 'es2015',
+            lib: {
+                entry,
+                formats: ['iife'],
+                // @note - The build will not expose this variable because the file itself doesn't export anything, but we just need to give it a name anyway for the tooling.
+                name: `__FSCheckout${iifeName}Internal__`,
+                fileName: () => `checkout.${outDir}.js`,
+            },
+            sourcemap: true,
+            rollupOptions: {
+                output: {
+                    sourcemapPathTransform(relativeSourcePath, sourcemapPath) {
+                        // Make it start from the root.
+                        return resolve(
+                            dirname(sourcemapPath),
+                            relativeSourcePath
+                        )
+                            .replace(sourceRootDir, '')
+                            .replace('/src/', '/fs-checkout/');
+                    },
+                },
+            },
+        },
+        plugins: [minifyInlineCSS],
+    };
+}
diff --git a/tests/lib.adapter.test.ts b/tests/lib.adapter.test.ts
@@ -1,5 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/no-require-imports
-require('../lib/adapter/checkout.js');
+require('../lib/adapter/checkout.adapter.js');
 
 describe('lib.adapter', () => {
     test('exposes Checkout', () => {

diff --git a/tests/lib.global.test.ts b/tests/lib.global.test.ts
@@ -1,5 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/no-require-imports
-require('../lib/global/checkout.js');
+require('../lib/global/checkout.global.js');
 
 describe('lib.global', () => {
     test('exposes Checkout', () => {

diff --git a/tsconfig.json b/tsconfig.json
@@ -4,7 +4,7 @@
         "useDefineForClassFields": true,
         "module": "ESNext",
         "lib": ["ESNext", "DOM"],
-        "moduleResolution": "Node",
+        "moduleResolution": "Bundler",
         "strict": true,
         "sourceMap": true,
         "resolveJsonModule": true,

diff --git a/vite.adapter.config.ts b/vite.adapter.config.ts
@@ -1,19 +1,7 @@
 import { defineConfig } from 'vite';
 import { resolve } from 'path';
-import { minifyInlineCSS } from './src/lib/utils/vite-plugins';
+import { createConfig } from './src/lib/utils/vite';
 
-export default defineConfig({
-    build: {
-        outDir: 'lib/adapter',
-        target: 'es2015',
-        lib: {
-            entry: resolve(__dirname, './src/adapter.ts'),
-            formats: ['iife'],
-            // @note - The build will not expose this variable because the file itself doesn't export anything, but we just need to give it a name anyway for the tooling.
-            name: '__FSCheckoutAdapterInternal__',
-            fileName: () => `checkout.js`,
-        },
-        sourcemap: false,
-    },
-    plugins: [minifyInlineCSS],
-});
+export default defineConfig(
+    createConfig(resolve(__dirname, './src/adapter.ts'), 'adapter', __dirname)
+);
diff --git a/vite.global.config.ts b/vite.global.config.ts
@@ -1,19 +1,7 @@
 import { defineConfig } from 'vite';
 import { resolve } from 'path';
-import { minifyInlineCSS } from './src/lib/utils/vite-plugins';
+import { createConfig } from './src/lib/utils/vite';
 
-export default defineConfig({
-    build: {
-        outDir: 'lib/global',
-        target: 'es2015',
-        lib: {
-            entry: resolve(__dirname, './src/global.ts'),
-            formats: ['iife'],
-            // @note - The build will not expose this variable because the file itself doesn't export anything, but we just need to give it a name anyway for the tooling.
-            name: '__FSCheckoutGlobalInternal__',
-            fileName: () => `checkout.js`,
-        },
-        sourcemap: false,
-    },
-    plugins: [minifyInlineCSS],
-});
+export default defineConfig(
+    createConfig(resolve(__dirname, './src/global.ts'), 'global', __dirname)
+);
diff --git a/vite.module.config.ts b/vite.module.config.ts
@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite';
 import { resolve } from 'path';
 import dts from 'vite-plugin-dts';
-import { minifyInlineCSS } from './src/lib/utils/vite-plugins';
+import { minifyInlineCSS } from './src/lib/utils/vite';
 
 export default defineConfig({
     build: {