✨ History window (#14)

.config/webpack.config.cjs → .config/webpack.config.js

@@ -1,11 +1,12 @@
 // @ts-check
-const { join, resolve } = require('node:path')
-
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const WebpackLicensePlugin = require('webpack-license-plugin')
-const preprocess = require('svelte-preprocess')
-const CopyWebpackPlugin = require('copy-webpack-plugin')
+import { preprocessMeltUI } from '@melt-ui/pp'
+import CopyWebpackPlugin from 'copy-webpack-plugin'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+import { join, resolve } from 'node:path'
+import preprocess from 'svelte-preprocess'
+import sequence from 'svelte-sequential-preprocessor'
+import WebpackLicensePlugin from 'webpack-license-plugin'
 
 const HTML_TEMPLATE_FILE = './src/content/index.html'
 
@@ -19,14 +20,15 @@ const absolutePackage = (file) => resolve('node_modules', file)
  * @property {string} outFolder
  */
 
-exports.default = (env, argv) => {
+export default (env, argv) => {
   const dev = argv.mode === 'development'
 
   return sharedSettings(
     [
       { title: 'Browser', folder: 'browser', outFolder: '' },
       { title: 'Settings', folder: 'settings', outFolder: 'settings' },
       { title: 'Bookmarks', folder: 'bookmarks', outFolder: 'bookmarks' },
+      { title: 'History', folder: 'history', outFolder: 'history' },
       { title: 'Credits', folder: 'credits', outFolder: 'credits' },
       { title: 'Test runner', folder: 'tests', outFolder: 'tests' },
     ],
@@ -67,6 +69,10 @@ const sharedSettings = (contentFiles, dev) => {
         '@browser': resolve('src/content/browser'),
       },
     },
+    resolveLoader: {
+      modules: ['node_modules'],
+      extensions: ['.js', '.json'],
+    },
 
     devtool: dev ? 'inline-source-map' : 'source-map',
     devServer: {
@@ -103,7 +109,7 @@ const sharedSettings = (contentFiles, dev) => {
               },
               emitCss: !dev,
               hotReload: dev,
-              preprocess: preprocess(),
+              preprocess: sequence([preprocess(), preprocessMeltUI()]),
             },
           },
         },

package.json

@@ -13,11 +13,11 @@
     "app:start": "MOZ_ENABLE_WAYLAND=1 ./.store/rt/quark-runtime -no-remote",
     "app:startX": "./.store/rt/quark-runtime -no-remote",
     "build": "rm -rf dist && concurrently -c auto pnpm:build-*",
-    "build-content": "webpack --mode production -c ./.config/webpack.config.cjs",
+    "build-content": "webpack --mode production -c ./.config/webpack.config.js",
     "build-modules": "tsc -p ./tsconfigs/tsconfig.modules.json",
     "build-actors": "tsc -p ./tsconfigs/tsconfig.actors.json",
     "dev": "concurrently -c auto pnpm:dev-*",
-    "dev-content": "webpack serve --mode development -c ./.config/webpack.config.cjs",
+    "dev-content": "webpack serve --mode development -c ./.config/webpack.config.js",
     "dev-modules": "tsc -w -p ./tsconfigs/tsconfig.modules.json",
     "dev-actors": "tsc -w -p ./tsconfigs/tsconfig.actors.json",
     "rt:slink": "rm --force ./.store/artifact.tar.bz2 && ln -s ../../experiment-runtime/dist/experiment-runtime-1.0.0.en-US.linux-x86_64.tar.bz2 ./.store/artifact.tar.bz2",
@@ -30,6 +30,8 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@melt-ui/pp": "^0.1.4",
+    "@melt-ui/svelte": "^0.64.0",
     "@tinyhttp/app": "^2.2.1",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@tsconfig/svelte": "^5.0.2",
@@ -54,6 +56,7 @@
     "svelte": "^4.2.1",
     "svelte-loader": "^3.1.9",
     "svelte-preprocess": "^5.0.4",
+    "svelte-sequential-preprocessor": "^2.0.1",
     "ts-loader": "^9.5.0",
     "typescript": "^5.2.2",
     "webpack": "^5.89.0",
@@ -72,7 +75,9 @@
   },
   "pnpm": {
     "patchedDependencies": {
-      "[email protected]": "patches/[email protected]"
+      "[email protected]": "patches/[email protected]",
+      "[email protected]": "patches/[email protected]",
+      "@melt-ui/[email protected]": "patches/@[email protected]"
     }
   },
   "prettier": {

patches/@melt-ui__svelte@0.64.5.patch

@@ -0,0 +1,22 @@
+diff --git a/package.json b/package.json
+index 9b7faa1b796b3fd8ac90b3364450f57896d866c0..b852ad9188adb271ad2b3b07b2e61bbb6ff124a0 100644
+--- a/package.json
++++ b/package.json
+@@ -7,7 +7,8 @@
+   "exports": {
+     ".": {
+       "types": "./dist/index.d.ts",
+-      "svelte": "./dist/index.js"
++      "svelte": "./dist/index.js",
++      "import": "./dist/index.js"
+     },
+     "./internal/*": {
+       "types": "./dist/internal/*/index.d.ts",
+@@ -130,7 +131,6 @@
+   "svelte": "./dist/index.js",
+   "main": "./dist/index.js",
+   "types": "./dist/index.d.ts",
+-  "type": "module",
+   "packageManager": "[email protected]",
+   "scripts": {
+     "dev": "vite dev",

src/actors/ContextMenuChild.ts

@@ -103,6 +103,7 @@ export class ContextMenuChild extends JSWindowActorChild {
 
     const selectionInfo = lazy.SelectionUtils.getSelectionDetails(
       this.contentWindow,
+      undefined,
     )
     if (selectionInfo.fullText) {
       data.textSelection = selectionInfo.fullText

src/content/bookmarks/bookmarks.ts

@@ -4,8 +4,8 @@
 /// <reference path="../../link.d.ts" />
 import 'remixicon/fonts/remixicon.css'
 
-import '../global.css'
+import '@shared/styles/window.css'
+
 import App from './Bookmarks.svelte'
-import './bookmarks.css'
 
 new App({ target: document.body })

src/content/browser/browser.ts

@@ -4,9 +4,9 @@
 /// <reference types="gecko-types" />
 import 'remixicon/fonts/remixicon.css'
 
-import '../global.css'
+import '@shared/styles/window.css'
+
 import App from './Browser.svelte'
-import './browser.css'
 import './lib/globalApi'
 import { initializeShortcuts } from './lib/shortcuts'
 

src/content/browser/components/menus/HamburgerMenu/HamburgerMenu.svelte

@@ -29,6 +29,13 @@
     >
       Bookmarks
     </HamburgerMenuItem>
+    <HamburgerMenuItem
+      on:click={openDialogWindowAction(
+        'chrome://browser/content/history/index.html',
+      )}
+    >
+      History
+    </HamburgerMenuItem>
     <HamburgerMenuItem
       on:click={() =>
         openTab(

src/content/credits/Credits.svelte

@@ -52,3 +52,9 @@
     </div>
   {/each}
 {/await}
+
+<style>
+  :global(body) {
+    overflow: scroll;
+  }
+</style>