Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(React router): Implemented react router dom api example (#6)
- Loading branch information
1 parent
1aa9a25
commit cb9ec2c
Showing
11 changed files
with
217 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
} |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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://*/*" | ||
] | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import { MemoryRouter } from "react-router-dom" | ||
|
||
import { Routing } from "~routes" | ||
|
||
function IndexPopup() { | ||
return ( | ||
<MemoryRouter> | ||
<Routing /> | ||
</MemoryRouter> | ||
) | ||
} | ||
|
||
export default IndexPopup |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { Route, Routes } from "react-router-dom" | ||
|
||
import { About } from "~pages/about" | ||
import { Home } from "~pages/home" | ||
|
||
export const Routing = () => ( | ||
<Routes> | ||
<Route path="/" element={<Home />} /> | ||
<Route path="/about" element={<About />} /> | ||
</Routes> | ||
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
{ | ||
"extends": "plasmo/templates/tsconfig.base", | ||
"exclude": ["node_modules"], | ||
"include": [".plasmo/**/*", "./**/*.ts", "./**/*.tsx"], | ||
"compilerOptions": { | ||
"paths": { | ||
"~*": ["./*"] | ||
}, | ||
"baseUrl": "." | ||
} | ||
} |