Refactor to ES modules

.github/workflows/build.yml

@@ -10,9 +10,7 @@ jobs:
               with:
                   node-version: "22.x"
 
-            - name: Install Yarn
-              run: npm install --global yarn
             - name: Install dependencies
-              run: yarn install
+              run: npm install
             - name: Build
-              run: gulp build
+              run: npm run build

.github/workflows/test.yml

@@ -0,0 +1,41 @@
+name: test-ci
+on: push
+
+jobs:
+    test:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: "22.x"
+            - uses: nick-fields/retry@v3
+              with:
+                timeout_minutes: 20
+                max_attempts: 2
+                retry_on: error
+                command: npm install &&npm run test-ci
+
+    test-storage:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: "22.x"
+            - uses: nick-fields/retry@v3
+              with:
+                timeout_minutes: 20
+                max_attempts: 2
+                retry_on: error
+                command: npm install &&npm run test-storage
+            - uses: actions/upload-artifact@v4
+              with:
+                name: test-storage-screenshots
+                path: ./tmp/*.jpg
+                if-no-files-found: ignore
+                retention-days: 7
+                compression-level: 3
+
+
+

.gitignore

@@ -10,3 +10,5 @@ coverage
 .cache
 .todo
 site/
+__pycache__
+tmp/

gulpfile.mjs

@@ -13,56 +13,24 @@ import fs from "fs";
 import zip from "gulp-zip";
 import { v4 as uuidv4 } from "uuid";
 import include from "gulp-include";
+import { spawn } from "child_process";
 // import debug from "gulp-debug";
 
-function popupJS() {
-    return (
-        src([
-            "src/popup/js/handlers.js",
-            "src/popup/js/templates.js",
-            "src/popup/js/memory.js",
-            "src/popup/js/popup.js",
-        ])
-            .pipe(concat("popup.js"))
-            // .pipe(
-            //     minifyJSTemplate({
-            //         minifyOptions: { minifyCSS: false, collapseWhitespace: true },
-            //         shouldMinify: (template) => true,
-            //     })
-            // )
-            .pipe(uglify({ mangle: true }))
-            .pipe(rename({ suffix: ".min" }))
-            .pipe(dest("src/popup/min/"))
-    );
+// Helper function to build ES modules using Rollup
+function buildESModules() {
+    return new Promise((resolve, reject) => {
+        const rollup = spawn("npx", ["rollup", "-c"], { stdio: "inherit" });
+        rollup.on("close", (code) => {
+            if (code === 0) {
+                resolve();
+            } else {
+                reject(new Error(`Rollup build failed with code ${code}`));
+            }
+        });
+    });
 }
 
-function utilsJS() {
-    return (
-        src([
-            "src/shared/js/utils/octokit.bundle.js",
-            "src/shared/js/utils/miniquery.js",
-            "src/shared/js/utils/config.js",
-            "src/shared/js/utils/bibtexParser.js",
-            "src/shared/js/utils/functions.js",
-            "src/shared/js/utils/sync.js",
-            "src/shared/js/utils/data.js",
-            "src/shared/js/utils/paper.js",
-            "src/shared/js/utils/state.js",
-            "src/shared/js/utils/parsers.js",
-        ])
-            // .pipe(debug())
-            .pipe(concat("utils.js"))
-            // .pipe(
-            //     minifyJSTemplate({
-            //         minifyOptions: { minifyCSS: false, collapseWhitespace: true },
-            //         shouldMinify: (template) => true,
-            //     })
-            // )
-            .pipe(uglify({ mangle: true }))
-            .pipe(rename({ suffix: ".min" }))
-            .pipe(dest("src/shared/min"))
-    );
-}
+// Note: popupJS() and utilsJS() tasks removed - now handled by Rollup
 
 function themeJS() {
     return src(["src/shared/js/theme.js"])
@@ -101,6 +69,7 @@ function popupCSS() {
         .pipe(rename({ suffix: ".min" }))
         .pipe(dest("src/popup/min/"));
 }
+
 function popupDarkCSS() {
     return src(["src/popup/css/dark.css"])
         .pipe(cleanCss())
@@ -109,16 +78,34 @@ function popupDarkCSS() {
 }
 
 function watchFiles() {
-    gwatch("src/popup/js/*.js", popupJS);
+    // Watch theme.js (still processed by Gulp)
     gwatch("src/shared/js/theme.js", themeJS);
+
+    // Watch CSS files
     gwatch(
         ["src/popup/css/*.css", "src/shared/css/*.css"],
         parallel(popupCSS, popupDarkCSS)
     );
+
+    // Watch HTML files
     gwatch("src/popup/*.html", popupHTMLDev);
     gwatch("src/popup/html/modals/*.html", popupHTMLDev);
     gwatch("src/popup/html/svgs/*.html", popupHTMLDev);
-    gwatch("src/shared/js/utils/*", utilsJS);
+
+    // Watch for ES module changes (handled by Rollup)
+    gwatch(
+        [
+            "src/shared/js/utils/*",
+            "src/popup/js/*.js",
+            "src/content_scripts/*.js",
+            "src/background/*.js",
+            "src/options/*.js",
+            "src/bibMatcher/*.js",
+            "src/fullMemory/*.js",
+            "!**/*.bundle.js",
+        ],
+        buildESModules
+    );
 }
 
 function createArchive(cb) {
@@ -157,26 +144,27 @@ function createArchive(cb) {
         .pipe(dest(archiveFolder));
 }
 
+// Updated build tasks - removed redundant JS bundling
 export const build = parallel(
-    popupJS,
     themeJS,
-    utilsJS,
     popupCSS,
     popupDarkCSS,
-    popupHTML
+    popupHTML,
+    buildESModules
 );
 
 export const dev = parallel(
-    popupJS,
     themeJS,
-    utilsJS,
     popupCSS,
     popupDarkCSS,
-    popupHTMLDev
+    popupHTMLDev,
+    buildESModules
 );
 
 export const watch = series(dev, watchFiles);
 
 export const archive = series(build, createArchive);
 
 export const html = series(popupHTMLDev);
+
+export const modules = buildESModules;

jsconfig.json

@@ -1,9 +1,21 @@
 {
     "compilerOptions": {
-        "module": "commonjs",
-        "target": "es6"
+        "target": "ES2020",
+        "module": "ESNext",
+        "moduleResolution": "node",
+        "allowSyntheticDefaultImports": true,
+        "baseUrl": ".",
+        "paths": {
+            "@pm/*": ["src/*"],
+            "@pmu/*": ["src/shared/js/utils/*"]
+        }
     },
     "include": [
         "src/**/*"
+    ],
+    "exclude": [
+        "node_modules",
+        "dist",
+        "build"
     ]
 }

loader.mjs

@@ -0,0 +1,29 @@
+import { resolve as pathResolve } from "path";
+import { fileURLToPath, pathToFileURL } from "url";
+
+const baseURL = pathToFileURL(process.cwd() + "/").href;
+
+export async function resolve(specifier, context, defaultResolve) {
+    // Handle @pmu/* imports
+    if (specifier.startsWith("@pmu/")) {
+        const relativePath = specifier.replace("@pmu/", "src/shared/js/utils/");
+        const resolved = new URL(relativePath, baseURL).href;
+        return {
+            url: resolved,
+            shortCircuit: true,
+        };
+    }
+
+    // Handle @pm/* imports
+    if (specifier.startsWith("@pm/")) {
+        const relativePath = specifier.replace("@pm/", "src/");
+        const resolved = new URL(relativePath, baseURL).href;
+        return {
+            url: resolved,
+            shortCircuit: true,
+        };
+    }
+
+    // Fall back to the default resolver for all other imports
+    return defaultResolve(specifier, context);
+}

manifest.json

@@ -11,7 +11,7 @@
         "extension_pages": "script-src 'self'; object-src 'self'"
     },
     "background": {
-        "service_worker": "src/background/background.js"
+        "service_worker": "src/background/background.bundle.js"
     },
     "action": {
         "default_icon": "icons/favicon-192x192.png",
@@ -64,20 +64,7 @@
             "run_at": "document_start",
             "js": [
                 "src/shared/min/jquery.min.js",
-                "src/shared/js/utils/logTrace.js",
-                "src/shared/js/utils/miniquery.js",
-                "src/shared/js/utils/config.js",
-                "src/shared/js/utils/functions.js",
-                "src/shared/js/utils/octokit.bundle.js",
-                "src/shared/js/utils/sync.js",
-                "src/shared/js/utils/data.js",
-                "src/shared/js/utils/paper.js",
-                "src/shared/js/utils/state.js",
-                "src/shared/js/utils/bibtexParser.js",
-                "src/shared/js/utils/parsers.js",
-                "src/popup/js/handlers.js",
-                "src/popup/js/memory.js",
-                "src/content_scripts/content_script.js"
+                "src/content_scripts/content.bundle.js"
             ],
             "css": [
                 "src/shared/css/loader.css",

package.json

@@ -2,28 +2,24 @@
     "name": "papermemory",
     "version": "1.1.0",
     "description": "N/A",
+    "type": "module",
     "main": "gulpfile.js",
     "moduleDirectories": [
         "node_modules",
         "src"
     ],
     "scripts": {
-        "pretest": "echo 'Make sure to be in dev mode ($gulp dev)'",
-        "test": "./node_modules/.bin/mocha test/test-*.js",
-        "pretest-cov": "echo 'Make sure to be in dev mode ($gulp dev)'",
-        "test-cov": "./node_modules/.bin/nyc --reporter=text ./node_modules/.bin/mocha test/test-*.js",
-        "pretest-storage": "echo 'Make sure to be in dev mode ($gulp dev)'",
-        "test-storage": "./node_modules/.bin/mocha test/test-storage.js",
-        "pretest-duplicates": "echo 'Make sure to be in dev mode ($gulp dev)'",
-        "test-duplicates": "./node_modules/.bin/mocha test/test-duplicates.js",
-        "pretest-sync": "echo 'Make sure to be in dev mode ($gulp dev)'",
-        "test-sync": "./node_modules/.bin/mocha test/test-sync.js",
-        "pretest-no-browser": "echo 'Make sure to be in dev mode ($gulp dev)'",
-        "test-no-browser": "./node_modules/.bin/mocha 'test/test-!(storage|duplicates|sync)*.js'",
-        "pretest-no-browser-cov": "echo 'Make sure to be in dev mode ($gulp dev)'",
-        "test-no-browser-cov": "./node_modules/.bin/nyc --reporter=text ./node_modules/.bin/mocha 'test/test-!(storage|duplicates|sync)*.js'",
-        "prescreenshots": "echo 'Make sure to be in dev mode ($gulp dev)'",
-        "screenshots": "./node_modules/.bin/mocha test/screenshots.js"
+        "pretest": "echo 'Make sure to be in dev mode (npm run dev)'",
+        "test": "node --import ./register.mjs ./node_modules/.bin/mocha test/test-*.js",
+        "pretest-ci": "npm run dev",
+        "test-ci": "node --import ./register.mjs ./node_modules/.bin/mocha test/test-*.js --exclude test/test-storage.js --exclude test/test-duplicates.js --exclude test/test-sync.js --exit",
+        "pretest-storage": "npm run dev",
+        "test-storage": "node --import ./register.mjs ./node_modules/.bin/mocha test/test-storage.js --exit",
+        "pretest-cov": "echo 'Make sure to be in dev mode (npm run dev)'",
+        "test-cov": "node --import ./register.mjs ./node_modules/.bin/nyc --reporter=text ./node_modules/.bin/mocha test/test-*.js",
+        "dev": "rollup -c",
+        "dev:watch": "rollup -c -w",
+        "build": "NODE_ENV=production rollup -c"
     },
     "repository": {
         "type": "git",
@@ -35,29 +31,31 @@
         "url": "https://github.com/vict0rsch/PaperMemory/issues"
     },
     "homepage": "https://github.com/vict0rsch/PaperMemory",
+    "dependencies": {
+        "@octokit/request": "^8.1.6"
+    },
     "devDependencies": {
-        "@octokit/request": "^8.1.6",
-        "browserify": "^17.0.0",
-        "esmify": "^2.1.1",
+        "@babel/core": "^7.0.0",
+        "@rollup/plugin-alias": "^5.1.1",
+        "@rollup/plugin-babel": "^6.0.4",
+        "@rollup/plugin-commonjs": "^28.0.6",
+        "@rollup/plugin-node-resolve": "^16.0.1",
+        "@rollup/plugin-replace": "^6.0.2",
+        "@rollup/plugin-terser": "^0.4.4",
         "expect": "^29.7.0",
         "glob": "^10.3.10",
-        "gulp": "^4.0.0",
-        "gulp-clean-css": "^4.3.0",
-        "gulp-concat": "^2.6.1",
-        "gulp-debug": "^5.0.1",
-        "gulp-html-minifier-terser": "^7.1.0",
-        "gulp-include": "^2.4.1",
-        "gulp-preprocess": "^4.0.2",
-        "gulp-rename": "^2.0.0",
-        "gulp-uglify": "^3.0.2",
-        "gulp-zip": "^6.0.0",
         "heap": "^0.2.7",
         "jsdom": "^23.0.1",
         "mocha": "^10.2.0",
         "nyc": "^15.1.0",
         "ora": "^5.4.1",
-        "puppeteer": "^18.2.1",
+        "postcss": "^8.5.6",
+        "puppeteer": "^24.16.0",
         "readline-sync": "^1.4.10",
+        "rollup": "^4.45.0",
+        "rollup-plugin-copy": "^3.5.0",
+        "rollup-plugin-delete": "^3.0.1",
+        "rollup-plugin-postcss": "^4.0.2",
         "uuid": "^9.0.1",
         "yaml": "^2.3.4"
     }

register.mjs

@@ -0,0 +1,4 @@
+import { register } from "node:module";
+import { pathToFileURL } from "node:url";
+
+register("./loader.mjs", pathToFileURL("./"));