Build improvements (#649)

* Improve PWA capabilities

* Invert background_color theme logic

* Revert build changes

* Revert "Revert build changes"

This reverts commit 1ab640fda1.

* update

* revert svelte component changes

.dockerignore

@@ -13,7 +13,7 @@
 !/package-lock.json
 !/requirements.dev.txt
 !/requirements.txt
-!/rollup.config.js
+!/rollup.config.mjs
 !/supervisord.conf
 !/uwsgi.ini
 !/version.txt

.github/workflows/main.yaml

@@ -7,17 +7,18 @@ jobs:
     name: Unit Tests
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Set up Python
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v5
         with:
           python-version: "3.10"
       - name: Set up Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
+          cache: 'npm'
       - name: Install Node dependencies
-        run: npm install
+        run: npm ci
       - name: Setup Python environment
         run: pip install -r requirements.txt -r requirements.dev.txt
       - name: Run tests
@@ -26,17 +27,18 @@ jobs:
     name: E2E Tests
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Set up Python
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v5
         with:
           python-version: "3.10"
       - name: Set up Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
+          cache: 'npm'
       - name: Install Node dependencies
-        run: npm install
+        run: npm ci
       - name: Setup Python environment
         run: |
           pip install -r requirements.txt -r requirements.dev.txt

bookmarks/frontend/index.js

@@ -1,16 +1,10 @@
-import TagAutoComplete from "./components/TagAutocomplete.svelte";
+import './behaviors/bookmark-page';
-import SearchAutoComplete from "./components/SearchAutoComplete.svelte";
+import './behaviors/bulk-edit';
-import { ApiClient } from "./api";
+import './behaviors/confirm-button';
-import "./behaviors/bookmark-page";
+import './behaviors/dropdown';
-import "./behaviors/bulk-edit";
+import './behaviors/modal';
-import "./behaviors/confirm-button";
+import './behaviors/global-shortcuts';
-import "./behaviors/dropdown";
+import './behaviors/tag-autocomplete';
-import "./behaviors/modal";
+export { default as TagAutoComplete } from './components/TagAutocomplete.svelte';
-import "./behaviors/global-shortcuts";
+export { default as SearchAutoComplete } from './components/SearchAutoComplete.svelte';
-import "./behaviors/tag-autocomplete";
+export { ApiClient } from './api';
-
-export default {
-  ApiClient,
-  TagAutoComplete,
-  SearchAutoComplete,
-};

docker/alpine.Dockerfile

@@ -1,8 +1,8 @@
-FROM node:18.18.0-alpine AS node-build
+FROM node:20-alpine AS node-build
 WORKDIR /etc/linkding
 # install build dependencies
-COPY rollup.config.js package.json package-lock.json ./
+COPY rollup.config.mjs package.json package-lock.json ./
-RUN npm install
+RUN npm ci
 # copy files needed for JS build
 COPY bookmarks/frontend ./bookmarks/frontend
 # run build

docker/default.Dockerfile

@@ -1,8 +1,8 @@
-FROM node:18.18.0-alpine AS node-build
+FROM node:20-alpine AS node-build
 WORKDIR /etc/linkding
 # install build dependencies
-COPY rollup.config.js package.json package-lock.json ./
+COPY rollup.config.mjs package.json package-lock.json ./
-RUN npm install
+RUN npm ci
 # copy files needed for JS build
 COPY bookmarks/frontend ./bookmarks/frontend
 # run build

package.json

@@ -13,19 +13,18 @@
   },
   "keywords": [],
   "author": "",
-  "license": "ISC",
+  "license": "MIT",
   "bugs": {
     "url": "https://github.com/sissbruecker/linkding/issues"
   },
   "homepage": "https://github.com/sissbruecker/linkding#readme",
   "dependencies": {
-    "@rollup/plugin-commonjs": "^21.0.2",
+    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@rollup/plugin-terser": "^0.4.4",
-    "rollup": "^2.70.1",
+    "rollup": "^4.13.0",
-    "rollup-plugin-svelte": "^7.1.0",
+    "rollup-plugin-svelte": "^7.2.0",
-    "rollup-plugin-terser": "^7.0.2",
     "spectre.css": "^0.5.8",
-    "svelte": "^3.49.0"
+    "svelte": "^4.0.0"
   },
   "devDependencies": {
     "prettier": "^3.0.2"

rollup.config.js

@@ -1,40 +0,0 @@
-import svelte from 'rollup-plugin-svelte';
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import { terser } from 'rollup-plugin-terser';
-
-const production = !process.env.ROLLUP_WATCH;
-
-export default {
-	input: 'bookmarks/frontend/index.js',
-	output: {
-		sourcemap: true,
-		format: 'iife',
-		name: 'linkding',
-		// Generate bundle in static folder to that it is picked up by Django static files finder
-		file: 'bookmarks/static/bundle.js'
-	},
-	plugins: [
-		svelte({
-			emitCss: false
-		}),
-
-		// If you have external dependencies installed from
-		// npm, you'll most likely need these plugins. In
-		// some cases you'll need additional configuration —
-		// consult the documentation for details:
-		// https://github.com/rollup/rollup-plugin-commonjs
-		resolve({
-			browser: true,
-			dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')
-		}),
-		commonjs(),
-
-		// If we're building for production (npm run build
-		// instead of npm run dev), minify
-		production && terser()
-	],
-	watch: {
-		clearScreen: false
-	}
-};

rollup.config.mjs

@@ -0,0 +1,37 @@
+import svelte from 'rollup-plugin-svelte';
+import resolve from '@rollup/plugin-node-resolve';
+import terser from '@rollup/plugin-terser';
+
+const production = !process.env.ROLLUP_WATCH;
+
+export default {
+  input: 'bookmarks/frontend/index.js',
+  output: {
+    sourcemap: true,
+    format: 'iife',
+    name: 'linkding',
+    // Generate bundle in static folder to that it is picked up by Django static files finder
+    file: 'bookmarks/static/bundle.js',
+  },
+  plugins: [
+    svelte({
+      emitCss: false,
+    }),
+
+    // If you have external dependencies installed from
+    // npm, you'll most likely need these plugins. In
+    // some cases you'll need additional configuration —
+    // consult the documentation for details:
+    // https://github.com/rollup/rollup-plugin-commonjs
+    resolve({
+      browser: true,
+    }),
+
+    // If we're building for production (npm run build
+    // instead of npm run dev), minify
+    production && terser(),
+  ],
+  watch: {
+    clearScreen: false,
+  },
+};