Update dependencies (#117)

* Update dependencies

* Fix new paths / imports due to newer dependencies

* Remove bulma as a dependency, instead just use minireset.css

* run formatter

* Messed up eslint config..

* Fix eslint config

* Minor style adjustments

* Move cypress config to .mjs

* Add 1.9.6 changelog

* Remove prettier (was causing more issues than good)

* Improve Cypress github action flow?

* Use cypress cypress/browsers:latest

* Update cache

* fix firefox cypress

* Try npm set cache ~/.npm

---------

Co-authored-by: Simon Heimler <[email protected]>

.github/workflows/ci.yml

@@ -10,80 +10,103 @@ jobs:
   build:
     name: Build & Lint
     runs-on: ubuntu-latest
-
     strategy:
       matrix:
         node-version:
           - 20.x
 
     steps:
       - name: Cache node modules
-        uses: actions/cache@v3
+        id: cache-npm
+        uses: actions/cache@v4
         env:
           cache-name: cache-node-modules
         with:
+          # npm cache files are stored in `~/.npm` on Linux/macOS
           path: ~/.npm
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
-            ${{ runner.os }}-node-
-
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+      - if: ${{ steps.cache-npm.outputs.cache-hit != 'true' }}
+        name: List the state of node modules
+        continue-on-error: true
+        run: npm list
       - name: Checkout
         uses: actions/checkout@v4
-
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'npm'
-
       - name: Install Dependencies
-        run: npm ci
-
+        run: npm set cache ~/.npm && npm ci
       - name: Build
         run: npm run build
-
       - name: Lint
         run: npm run lint
+      - name: Save build folder
+        uses: actions/upload-artifact@v4
+        with:
+          name: popup
+          path: popup
+          if-no-files-found: error
 
   cypress-run-chrome:
     runs-on: ubuntu-22.04
+    container:
+      image: cypress/browsers:latest
+      options: --user 1001
     name: E2E Testing (Chrome)
+    needs: build
     steps:
       - uses: actions/checkout@v4
+      - name: Download the build folder
+        uses: actions/download-artifact@v4
+        with:
+          name: popup
+          path: popup
       - uses: cypress-io/github-action@v6
         with:
           browser: chrome
-          build: |
-            npm run build
           start: npm start
           wait-on: http://localhost:8080
 
   cypress-run-firefox:
     name: E2E Testing (Firefox)
     runs-on: ubuntu-22.04
-    # container:
-    #   # https://github.com/cypress-io/cypress-docker-images
-    #   image: cypress/browsers:node14.17.0-chrome88-ff89
-    #   options: --user 1001
+    container:
+      image: cypress/browsers:latest
+      options: --user 1001
+    needs: build
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-      - name: Increase file watches size
-        run: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
+      - name: Download the build folder
+        uses: actions/download-artifact@v4
+        with:
+          name: popup
+          path: popup
       - name: Cypress run
         uses: cypress-io/github-action@v6
         with:
           browser: firefox
-          build: npm run build
           start: npm start
           wait-on: http://localhost:8080
 
   cypress-run-edge:
     name: E2E Testing (Edge)
     runs-on: windows-latest
+    needs: build
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+      - name: Download the build folder
+        uses: actions/download-artifact@v4
+        with:
+          name: popup
+          path: popup
       - name: Cypress run
         uses: cypress-io/github-action@v6
         with:

.vscode/settings.json

@@ -30,6 +30,7 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
-  }
-}
+    "source.fixAll.eslint": "explicit"
+  },
+  "eslint.experimental.useFlatConfig": true
+}

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## [unreleased]
 
+## [v1.9.6]
+
+- **IMPROVED**: Removed Bulma CSS as dependency, instead just use [minireset.css](https://github.com/jgthms/minireset.css) for CSS reset.
+- **CHORE**: Updated dependencies and moved this project to ESM (EcmaScript Modules)
+
 ## [v1.9.5]
 
 - **FIXED**: Open result in new tab (when holding SHIFT / ALT) was not working when there are multiple browser windows

README.md

@@ -21,7 +21,7 @@ It supports two different search approaches:
 With this extension you can also **tag your bookmarks** including auto completions.
 The tags are considered when searching and can be used for navigation.
 
-The extension is very customizable (see [user options](#user-configuration)) and has a dark / light theme that is selected based on your system settings (see [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)).
+The extension is very customizable (see [user options](#user-configuration)) and has a dark / light theme that is selected based on your system settings (see [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)). It's also very lightweight (< 150kb JavaScript, including dependencies).
 
 For a list of recent changes, see [CHANGELOG.md](./CHANGELOG.md).
 
@@ -218,7 +218,7 @@ This extension makes use of the following helpful open-source projects (thanks!)
 - https://github.com/yairEO/tagify for the tag autocomplete widget
 - https://markjs.io/ for highlighting search matches
 - https://www.npmjs.com/package/js-yaml for the user options parsing
-- https://bulma.io/ for some minimal CSS base styling
+- https://github.com/jgthms/minireset.css for some minimal CSS base styling
 - https://github.com/tabler/tabler-icons for icons
 
 ## Feedback and Ideas

bin/updateLibs.sh

@@ -6,4 +6,4 @@ cat node_modules/mark.js/dist/mark.es6.min.js >> popup/lib/mark.es6.min.js
 
 # Copy over vendor dependencies that we don't bundle, because they're only loaded on demand
 cp node_modules/js-yaml/dist/js-yaml.min.js popup/lib/js-yaml.min.js
-cp node_modules/\@yaireo/tagify/dist/tagify.min.js popup/lib/tagify.min.js
+cp node_modules/\@yaireo/tagify/dist/tagify.js popup/lib/tagify.min.js

cypress.config.js → cypress.config.mjs

@@ -1,6 +1,6 @@
-const { defineConfig } = require('cypress')
+import { defineConfig } from 'cypress'
 
-module.exports = defineConfig({
+export default defineConfig({
   viewportWidth: 500,
   viewportHeight: 600,
   video: false,

eslint.config.mjs

@@ -0,0 +1,41 @@
+import js from '@eslint/js'
+import { FlatCompat } from '@eslint/eslintrc'
+const compat = new FlatCompat()
+
+export default [
+  {
+    ignores: ['popup/lib/**.*', '/reports/*'],
+  },
+  js.configs.recommended,
+  ...compat.config({
+    extends: ['plugin:cypress/recommended'],
+  }),
+  {
+    files: ['popup/js/**/*.js'],
+  },
+  {
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'module',
+      globals: {
+        'browser': true,
+        'es2021': true,
+        'webextensions': true,
+        'cypress/globals': true,
+        'commonjs': true,
+
+        'module': 'writable',
+        'ext': 'writable',
+        'Tagify': 'readonly',
+        'Mark': 'readonly',
+        'jsyaml': 'readonly',
+        'uFuzzy': 'readonly',
+      },
+    },
+    rules: {
+      'no-console': 'off',
+      'semi': ['warn', 'never'],
+      'comma-dangle': ['warn', 'only-multiline'],
+    },
+  },
+]