feat(React router): Implemented react router dom api example

with-jotai/.github/workflows/submit.yml

@@ -0,0 +1,27 @@
+name: "Submit to Web Store"
+on:
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Cache pnpm modules
+        uses: actions/cache@v3
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-
+      - uses: pnpm/action-setup@v2.2.1
+        with:
+          version: 7.1.0
+          run_install: true
+      - name: Build and zip extension artifact
+        run: pnpm build -- --zip
+      - name: Browser Platform Publish
+        uses: PlasmoHQ/bpp@v2
+        with:
+          keys: ${{ secrets.SUBMIT_KEYS }}
+          artifact: build/chrome-mv3-prod.zip

with-jotai/.gitignore

@@ -0,0 +1,42 @@
+
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+#cache
+.turbo
+.next
+.vercel
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+
+# local env files
+.env*
+
+out/
+build/
+dist/
+
+# plasmo - https://www.plasmo.com
+.plasmo
+
+# bpp - http://bpp.browser.market/
+keys.json
+
+# typescript
+.tsbuildinfo

with-jotai/.prettierrc.cjs

@@ -0,0 +1,17 @@
+/**
+ * @type {import('prettier').Options}
+ */
+module.exports = {
+  printWidth: 80,
+  tabWidth: 2,
+  useTabs: false,
+  semi: false,
+  singleQuote: false,
+  trailingComma: "none",
+  bracketSpacing: true,
+  bracketSameLine: true,
+  plugins: [require.resolve("@trivago/prettier-plugin-sort-imports")],
+  importOrder: ["^@plasmohq/(.*)$", "^~(.*)$", "^[./]"],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true
+}

with-jotai/counter.tsx

@@ -0,0 +1,24 @@
+import { atom, useAtom } from "jotai"
+
+const counterAtom = atom<number>(0);
+
+const CounterView = () => {
+    const [counter, setCounter] = useAtom(counterAtom);
+
+    const onIncrement = (): void => {
+        setCounter((value: number): number => value + 1);
+    }
+
+    const onDecrement = (): void => {
+        setCounter((value: number): number => value - 1);
+    }
+  return (
+    <div>
+      <div>Current count: {counter}</div>
+      <button onClick={onIncrement}>Increment counter</button>
+      <button onClick={onDecrement}>Decrement counter</button>
+    </div>
+  )
+}
+
+export default CounterView;

with-jotai/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "with-jotai",
+  "displayName": "With jotai",
+  "version": "0.0.0",
+  "description": "Plasmo extension which uses jotai library for state management",
+  "author": "yashwadhia",
+  "scripts": {
+    "dev": "plasmo dev",
+    "build": "plasmo build" 
+  },
+  "dependencies": {
+    "jotai": "1.7.2",
+    "plasmo": "latest",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@trivago/prettier-plugin-sort-imports": "3.2.0",
+    "@types/chrome": "0.0.190",
+    "@types/node": "17.0.43",
+    "@types/react": "18.0.12",
+    "@types/react-dom": "18.0.5",
+    "prettier": "2.7.0",
+    "typescript": "4.7.3"
+  },
+  "manifest": {
+    "host_permissions": [
+      "https://*/*"
+    ]
+  }
+}

with-jotai/popup.tsx

@@ -0,0 +1,13 @@
+import {Provider} from "jotai";
+
+import CounterView from "~counter";
+
+function IndexPopup() {
+  return (
+    <Provider>
+      <CounterView />
+    </Provider>
+  )
+}
+
+export default IndexPopup

with-jotai/readme.md

@@ -0,0 +1,33 @@
+This is a [Plasmo extension](https://docs.plasmo.com/) project bootstrapped with [`plasmo init`](https://www.npmjs.com/package/plasmo).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+pnpm dev
+# or
+npm run dev
+```
+
+Open your browser and load the appropriate development build. For example, if you are developing for the chrome browser, using manifest v3, use: `build/chrome-mv3-dev`.
+
+You can start editing the popup by modifying `popup.tsx`. It should auto-update as you make changes. To add an options page, simply add a `options.tsx` file to the root of the project, with a react component default exported. Likewise to add a content page, add a `content.ts` file to the root of the project, importing some module and do some logic, then reload the extension on your browser.
+
+For further guidance, [visit our Documentation](https://docs.plasmo.com/)
+
+## Making production build
+
+Run the following:
+
+```bash
+pnpm build
+# or
+npm run build
+```
+
+This should create a production bundle for your extension, ready to be zipped and published to the stores.
+
+## Submit to the webstores
+
+The easiest way to deploy your Plasmo extension is to use the built-in [bpp](https://bpp.browser.market) GitHub action. Prior to using this action however, make sure to build your extension and upload the first version to the store to establish the basic credentials. Then, simply follow [this setup instruction](https://docs.plasmo.com/workflows#submit-your-extension) and you should be on your way for automated submission!

with-jotai/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "plasmo/templates/tsconfig.base",
+  "exclude": ["node_modules"],
+  "include": [".plasmo/**/*", "./**/*.ts", "./**/*.tsx"],
+  "compilerOptions": {
+    "paths": {
+      "~*": ["./*"]
+    },
+    "baseUrl": "."
+  }
+}

with-react-router/.github/workflows/submit.yml

@@ -0,0 +1,27 @@
+name: "Submit to Web Store"
+on:
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Cache pnpm modules
+        uses: actions/cache@v3
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-
+      - uses: pnpm/action-setup@v2.2.1
+        with:
+          version: 7.1.0
+          run_install: true
+      - name: Build and zip extension artifact
+        run: pnpm build -- --zip
+      - name: Browser Platform Publish
+        uses: PlasmoHQ/bpp@v2
+        with:
+          keys: ${{ secrets.SUBMIT_KEYS }}
+          artifact: build/chrome-mv3-prod.zip

with-react-router/.gitignore

@@ -0,0 +1,42 @@
+
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+#cache
+.turbo
+.next
+.vercel
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+
+# local env files
+.env*
+
+out/
+build/
+dist/
+
+# plasmo - https://www.plasmo.com
+.plasmo
+
+# bpp - http://bpp.browser.market/
+keys.json
+
+# typescript
+.tsbuildinfo

with-react-router/.prettierrc.cjs

@@ -0,0 +1,17 @@
+/**
+ * @type {import('prettier').Options}
+ */
+module.exports = {
+  printWidth: 80,
+  tabWidth: 2,
+  useTabs: false,
+  semi: false,
+  singleQuote: false,
+  trailingComma: "none",
+  bracketSpacing: true,
+  bracketSameLine: true,
+  plugins: [require.resolve("@trivago/prettier-plugin-sort-imports")],
+  importOrder: ["^@plasmohq/(.*)$", "^~(.*)$", "^[./]"],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true
+}

with-react-router/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "with-react-router",
+  "displayName": "With react router",
+  "version": "0.0.0",
+  "description": "A basic Plasmo extension.",
+  "author": "yashwadhia",
+  "scripts": {
+    "dev": "plasmo dev",
+    "build": "plasmo build"
+  },
+  "dependencies": {
+    "plasmo": "latest",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-router-dom": "6.3.0"
+  },
+  "devDependencies": {
+    "@trivago/prettier-plugin-sort-imports": "3.2.0",
+    "@types/chrome": "0.0.190",
+    "@types/node": "17.0.43",
+    "@types/react": "18.0.12",
+    "@types/react-dom": "18.0.5",
+    "prettier": "2.7.0",
+    "typescript": "4.7.3"
+  },
+  "manifest": {
+    "host_permissions": [
+      "https://*/*"
+    ]
+  }
+}

with-react-router/pages/about.tsx

@@ -0,0 +1,16 @@
+import { NavigateFunction, useNavigate } from "react-router-dom"
+
+export const About = () => {
+  const navigation: NavigateFunction = useNavigate()
+
+  const onNextPage = (): void => {
+    navigation("/")
+  }
+
+  return (
+    <div style={{ padding: 16 }}>
+      <span>About page</span>
+      <button onClick={onNextPage}>Home</button>
+    </div>
+  )
+}

with-react-router/pages/home.tsx

@@ -0,0 +1,16 @@
+import { NavigateFunction, useNavigate } from "react-router-dom"
+
+export const Home = () => {
+  const navigation: NavigateFunction = useNavigate()
+
+  const onNextPage = (): void => {
+    navigation("/about")
+  }
+
+  return (
+    <div style={{ padding: 16 }}>
+      <span>Home page</span>
+      <button onClick={onNextPage}>About</button>
+    </div>
+  )
+}

with-react-router/popup.tsx

@@ -0,0 +1,13 @@
+import { MemoryRouter } from "react-router-dom"
+
+import { Routing } from "~routes"
+
+function IndexPopup() {
+  return (
+    <MemoryRouter>
+      <Routing />
+    </MemoryRouter>
+  )
+}
+
+export default IndexPopup