chore: upgrade (#124)

- general upgrade
- add `parcel-namer-rewrite` to handle dynamicly loading css file not
working anymore
- yarn start → yarn dev

.github/workflows/publish.yml

@@ -55,5 +55,5 @@ jobs:
         uses: svenstaro/upload-release-action@v2
         with:
           repo_token: ${{ secrets.GITHUB_TOKEN }}
-          file: dist/webext-prod/pile.zip
+          file: pile.zip
           tag: ${{ github.ref }}

.parcelrc

@@ -1,5 +1,6 @@
 {
   "extends": "@parcel/config-webextension",
+  "namers": ["parcel-namer-rewrite"],
   "transformers": {
     "*.svg": ["...", "@parcel/transformer-svg-react"]
   },

.postcssrc

@@ -1,5 +1,5 @@
 {
   "plugins": {
-    "tailwindcss": {}
+    "tailwindcss": true
   }
 }

README.md

@@ -25,11 +25,11 @@ In order to have your own version, you must "create a new app" in the [pocket de
 Then, add the consumer key provided by pocket in the newly created `src/env.json` file by replacing the `XXXXX-XXXXXXXXXXX` chain.
 
 Then, you either:
-- (dev) run `yarn start`
+- (dev) run `yarn dev`
   - then import the `/dist` folder into `chrome://extensions` in your browser
 - (prod) run `yarn build`
   - then import the `/dist/webext-prod` folder into `chrome://extensions` in your browser
-  - by then running `yarn zip`, you can also generates a `pile.zip` file (in that folder) that you can upload to the chrome web store
+  - by then running `yarn zip`, you can also generates a `pile.zip` file that you can upload to the chrome web store
 
 # How to add a new Service to Pile
 [see the dedicated readme](./src/services/README.md)

package.json

@@ -1,12 +1,12 @@
 {
   "name": "pile",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "author": "Emmanuel Krebs <e-krebs@users.noreply.github.com>",
   "license": "MIT",
   "scripts": {
-    "start": "parcel src/manifest.json --host localhost --target webext-dev --hmr-port 3000",
+    "dev": "parcel src/manifest.json --host localhost --target webext-dev --hmr-port 3000",
     "build": "yarn clean && parcel build src/manifest.json --target webext-prod",
-    "zip": "cd dist/webext-prod && bestzip pile.zip *",
+    "zip": "cd dist/webext-prod && bestzip ../../pile.zip *",
     "clean": "rimraf .parcel-cache dist pile.zip",
     "lint": "eslint --ext .ts,.tsx src",
     "setup-ci": "cp ./src/env.sample.json ./src/env.json"
@@ -20,51 +20,58 @@
     },
     "webext-prod": {}
   },
+  "parcel-namer-rewrite": {
+    "rules": {
+      "(.*).css": "tailwind.css"
+    }
+  },
   "dependencies": {
-    "@react-aria/checkbox": "^3.6.0",
-    "@react-aria/textfield": "^3.7.2",
-    "@react-aria/visually-hidden": "^3.5.0",
-    "@react-stately/toggle": "^3.4.2",
+    "@react-aria/checkbox": "^3.9.0",
+    "@react-aria/textfield": "^3.9.1",
+    "@react-aria/visually-hidden": "^3.8.0",
+    "@react-stately/toggle": "^3.5.1",
     "classnames": "^2.3.2",
     "date-fns": "^2.29.3",
     "extract-colors": "^3.0.0",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-feather": "^2.0.10",
-    "react-hotkeys-hook": "^3.4.7",
-    "react-query": "^3.39.2"
+    "react-hotkeys-hook": "^4.4.0",
+    "react-query": "^3.39.3"
   },
   "devDependencies": {
     "@e-krebs/react-library": "^0.0.23",
-    "@parcel/config-webextension": "^2.7.0",
-    "@parcel/core": "^2.7.0",
-    "@parcel/transformer-svg-react": "^2.7.0",
-    "@parcel/validator-typescript": "^2.7.0",
-    "@tailwindcss/typography": "^0.5.7",
-    "@types/chrome": "^0.0.199",
-    "@types/express": "^4.17.14",
+    "@parcel/config-webextension": "^2.8.3",
+    "@parcel/core": "^2.8.3",
+    "@parcel/transformer-svg-react": "^2.8.3",
+    "@parcel/validator-typescript": "^2.8.3",
+    "@tailwindcss/typography": "^0.5.9",
+    "@types/chrome": "^0.0.233",
+    "@types/express": "^4.17.17",
     "@types/lodash": "^4.14.194",
-    "@types/node": "^18.11.4",
-    "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.40.1",
-    "@typescript-eslint/parser": "^5.40.1",
+    "@types/node": "^18.16.0",
+    "@types/react": "^18.0.38",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.59.1",
+    "@typescript-eslint/parser": "^5.59.1",
     "bestzip": "^2.2.1",
-    "eslint": "^8.26.0",
-    "eslint-import-resolver-typescript": "^3.5.2",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint": "^8.39.0",
+    "eslint-import-resolver-typescript": "^3.5.5",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "parcel": "^2.7.0",
-    "postcss": "^8.4.18",
-    "prettier": "^2.7.1",
-    "prettier-plugin-tailwindcss": "^0.1.13",
+    "parcel": "^2.8.3",
+    "parcel-namer-rewrite": "^2.0.0-rc.3",
+    "postcss": "^8.4.23",
+    "prettier": "^2.8.8",
+    "prettier-plugin-tailwindcss": "^0.2.7",
+    "process": "^0.11.10",
     "querystring-es3": "^0.2.1",
-    "rimraf": "^3.0.2",
-    "tailwindcss": "^3.2.1",
-    "typescript": "^4.7.4"
+    "rimraf": "^5.0.0",
+    "tailwindcss": "^3.3.1",
+    "typescript": "^5.0.4"
   },
   "alias": {
     "components": "./src/components",
@@ -74,7 +81,8 @@
     "hooks": "./src/hooks",
     "library": "./src/library",
     "services": "./src/services",
-    "utils": "./src/utils"
+    "utils": "./src/utils",
+    "tailwind.css": "./src/tailwind.css"
   },
   "resolutions": {
     "json5": "2.2.3"

src/components/List/SearchFilter.tsx

@@ -25,18 +25,18 @@ export const SearchFilter: FC<PropsWithChildren<SearchFilterProps>> = ({
     }
   };
 
-  useHotkeys('s', (e) => {
+  useHotkeys('s', (e: KeyboardEvent) => {
     e.preventDefault();
     openSearch(true);
   });
   useHotkeys(
     'Escape',
-    (e) => {
+    (e: KeyboardEvent) => {
       e.preventDefault();
       openSearch(false);
       onSearch();
     },
-    { enableOnTags: ['INPUT'] }
+    { enableOnFormTags: ['INPUT'] }
   );
 
   return (

src/components/List/TagFilter.tsx

@@ -42,18 +42,18 @@ export const TagFilter: FC<TagFilterProps> = ({ tagOpen, openTag }) => {
     }
   };
 
-  useHotkeys('t', (e) => {
+  useHotkeys('t', (e: KeyboardEvent) => {
     e.preventDefault();
     toggleTagOpen();
   });
 
   useHotkeys(
     'Escape',
-    (e) => {
+    (e: KeyboardEvent) => {
       e.preventDefault();
       onTag();
     },
-    { enableOnTags: ['INPUT'] }
+    { enableOnFormTags: ['INPUT'] }
   );
 
   return (

src/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "pile",
   "description": "pile",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "icons": {
     "16": "./content/icons/icon-16.png",
     "48": "./content/icons/icon-48.png",
@@ -43,7 +43,7 @@
         "./pages/oauth/pocket.html",
         "./content/icons/icon-96.png",
         "./content/icons/icon-96-selected.png",
-        "./content/tailwind.css"
+        "./tailwind.css"
       ],
       "matches": [
         "<all_urls>"

src/pages/contentScript/index.tsx

@@ -8,7 +8,7 @@ document.body.appendChild(shadow);
 
 if (shadow.shadowRoot) {
   const link = document.createElement('link');
-  link.href = chrome.runtime.getURL('content/tailwind.css');
+  link.href = chrome.runtime.getURL('tailwind.css');
   link.type = 'text/css';
   link.rel = 'stylesheet';
   shadow.shadowRoot.appendChild(link);

src/pages/oauth/index.tsx

@@ -1,7 +1,7 @@
 import { createRoot } from 'react-dom/client';
 
 import { Page } from './Page';
-import 'content/tailwind.css';
+import 'tailwind.css';
 
 const container = document.getElementById('root');
 if (container) {

src/pages/options/index.tsx

@@ -1,7 +1,7 @@
 import { createRoot } from 'react-dom/client';
 
 import { Page } from './Page';
-import 'content/tailwind.css';
+import 'tailwind.css';
 
 const container = document.getElementById('root');
 if (container) {

src/pages/popup/Page.tsx

@@ -2,7 +2,7 @@ import { FC, useEffect, useState } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { ReactQueryDevtools } from 'react-query/devtools';
 
-import 'content/tailwind.css';
+import 'tailwind.css';
 import { List } from 'components/List';
 import { ConnectionStatus } from 'components/ConnectionStatus';
 import { Footer } from 'components/Footer';

src/pages/popup/index.tsx

@@ -1,7 +1,7 @@
 import { createRoot } from 'react-dom/client';
 
 import { Page } from './Page';
-import 'content/tailwind.css';
+import 'tailwind.css';
 
 const container = document.getElementById('root');
 if (container) {