feat: vite 4, example updates, shadow dom tailwind css (#53)

* chore: update vite version to 4

* chore: update @crxjs/vite-plugin to version 2.0.0-beta with esm changes

* chore: update react-redux and redux-toolkit to the latest version

* fix: react-redux v8 bug with webext-redux

* fix: @crxjs/chrome-extension-tools vite ws bug

* chore: remove commitlint and stylelint setup

* refactor: src paths removing in the page url

* chore: package.json scripts and ci changes, mini doc changes

* chore: update eslint config and esm fixes

* refactor: manifest v2 build

* feat: manifest name dev prefix

* chore: update deps

* feat: refactored structure, popup counter, shadow dom in content

* chore: disable version pinning

* ci: update ci

.eslintrc.json

@@ -1,67 +1,34 @@
 {
   "env": {
-    "es2020": true
+    "es2020": true,
+    "browser": true
   },
   "extends": [
     "eslint:recommended",
-    "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:prettier/recommended",
-    "react-app",
-    "react-app/jest"
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "prettier"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "sourceType": "module",
     "ecmaVersion": 2020,
     "ecmaFeatures": { "jsx": true }
   },
-  "plugins": [
-    "import",
-    "simple-import-sort",
-    "react",
-    "react-hooks",
-    "@typescript-eslint",
-    "prettier"
-  ],
+  "plugins": ["@typescript-eslint", "prettier", "react", "react-hooks"],
   "rules": {
-    "no-unused-expressions": "off",
-    "@typescript-eslint/no-unused-expressions": 2,
-    "@typescript-eslint/triple-slash-reference": "off",
-    "simple-import-sort/imports": "error",
-    "simple-import-sort/exports": "error"
+    "react/react-in-jsx-scope": "off",
+    "prettier/prettier": 0
   },
-
   "overrides": [
     {
-      "files": [".*rc.js", "*.config.js"],
+      "files": [".*rc.js", ".*rc.cjs", "*.config.js", "*.config.cjs"],
       "env": {
         "node": true
       }
-    },
-    {
-      "files": ["*.js", "*.jsx", "*.ts", "*.tsx"],
-      "rules": {
-        "simple-import-sort/imports": [
-          "warn",
-          {
-            "groups": [
-              // Packages `react` related packages come first.
-              ["^react", "^@?\\w"],
-              // Internal packages.
-              ["^(@|components)(/.*|$)"],
-              // Side effect imports.
-              ["^\\u0000"],
-              // Parent imports. Put `..` last.
-              ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
-              // Other relative imports. Put same-folder imports and `.` last.
-              ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
-              // Style imports.
-              ["^.+\\.?(css)$"]
-            ]
-          }
-        ]
-      }
     }
-  ]
+  ],
+  "ignorePatterns": ["dist/**", "dist-firefox-v2"]
 }

.github/workflows/ci.yml

@@ -38,43 +38,20 @@ jobs:
         run: rm -rf node_modules && yarn install --frozen-lockfile
 
       - name: Lint
-        run: yarn ci:test:lint
+        run: yarn lint
 
-  typecheck:
+  test:
     runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16.x
-          cache: 'yarn'
-
-      - name: Install dependencies
-        run: rm -rf node_modules && yarn install --frozen-lockfile
-
-      - name: Test types
-        run: yarn ci:test:types
-
-  unit:
-    runs-on: ${{ matrix.os }}
-
-    strategy:
-      matrix:
-        node-version: [14.x, 16.x]
-        os: [ubuntu-latest]
-      fail-fast: false
-
     steps:
       - uses: actions/checkout@v3
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node-version }}
-          registry-url: https://registry.npmjs.org/
+          node-version: 16.x
           cache: yarn
 
       - name: Install dependencies
         run: rm -rf node_modules && yarn install --frozen-lockfile
 
       - name: Unit test
-        run: yarn ci:test:unit
+        run: yarn ci:test

.gitignore

@@ -10,7 +10,7 @@ lerna-debug.log*
 node_modules
 dist
 dist-ssr
-dist_firefox
+dist-firefox-v2
 *.local
 
 # Editor directories and files

.nano-staged.json

@@ -1,5 +1,4 @@
 {
   "**/*": "prettier --ignore-unknown --ignore-path .gitignore --write",
-  "**/*.{js,ts,tsx}": "eslint --fix",
-  "**/*.{css}": "stylelint --fix"
+  "**/*.{js,ts,tsx}": "eslint --fix"
 }

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Sinan Bekar
+Copyright (c) 2023 Sinan Bekar
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -44,7 +44,6 @@
 - Manifest V2 support (beta)
 - Dynamic manifest.json
 - Includes ESLint configured to work with TypeScript and Prettier
-- Includes stylelint and commitlint configured
 - Includes tests with Jest
 
 #### Built with
@@ -57,13 +56,10 @@
 - Jest
 - ESLint
 - Prettier
-- stylelint
-- commitlint
-- commitizen
 - simple-git-hooks (lightweight husky alternative)
 - nano-staged
 
-[^1]: While fully supported and stable in most cases, rarely hard reloading is recommended.
+[^1]: While it is fully supported and stable in most cases, hard reloading is rarely recommended.
 
 ## Browser Support
 
@@ -73,11 +69,9 @@
 
 ## Quick Start
 
-> **Warning** **Please see [Important Notes](#important-notes) before start using.**
-
 Ensure you have
 
-- [Node.js](https://nodejs.org) 14 or later installed
+- [Node.js](https://nodejs.org) 16 or later installed
 - [Yarn](https://yarnpkg.com) installed
 
 ### Use the Template
@@ -106,41 +100,32 @@ Then run the following:
 - `yarn dev` to start the development server.
 - `yarn build` to build an unpacked extension.
 
-- **Load extension in Chrome (Chromium)**
+- **Load extension in Chrome (Chromium, Manifest V3)**
 
   - Go to the browser address bar and type `chrome://extensions`
   - Check the `Developer Mode` button to enable it.
   - Click on the `Load Unpacked Extension` button.
   - Select your `dist` folder in the project root.
 
-- **Load extension in Firefox**
+- **Load extension in Firefox (Manifest V2)**
 
   - Go to the browser address bar and type `about://debugger`
   - Click on the `Load Temporary Add-on` button.
-  - Select your `dist_firefox` folder in the project root.
+  - Select your `dist-firefox-v2` folder in the project root.
 
 ### Available Commands
 
 - `yarn clean` to remove dist folder. `dev` and `build` commands call this command.
-- `yarn ci:test` to run lint & unit test & type checking in ci environment. `ci:test:lint`, `ci:test:style`, `ci:test:unit` commands also available.
-- `yarn format` to fix code with eslint, prettier and stylelint.
-- `yarn lint` to call ESLint, Prettier and stylelint.
+- `yarn format` to fix code with eslint and prettier.
+- `yarn lint` to call ESLint and Prettier.
 - `yarn test` for testing.
 
-## Important Notes
-
-This starter includes experimental packages and is currently in development. You can see changes in this repo often for now.
+### Redux
 
-Please use with caution.
+You can use redux (redux-toolkit) as state manager between popus, background, content and custom pages. Read the documentation for more.
 
 #### [@eduardoac-skimlinks/webext-redux](https://github.com/eduardoacskimlinks/webext-redux)
 
-> **Note** It is a fork of [webext-redux](https://github.com/tshaddix/webext-redux) with Manifest V3 support and is currently in release candidate (RC).
->
-> Please see https://github.com/tshaddix/webext-redux/pull/282
->
-> **Warning** Do not update to react-redux version 8.x, it is not supported for now and is **break** your application.
-
 ### Bundling
 
 #### [@crxjs/vite-plugin](https://github.com/crxjs/chrome-extension-tools)