-
-
Notifications
You must be signed in to change notification settings - Fork 19
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Implement options page to persist Prettier config #56
Merged
Merged
Changes from all commits
Commits
Show all changes
40 commits
Select commit
Hold shift + click to select a range
8ebbda8
Generate a new React app for the options page
nickmccurdy 12deda1
Fix issues loading options page in extension
nickmccurdy 8231626
Merge branch 'master' into options
nickmccurdy f40c39d
Remove CRA features we don't need
nickmccurdy d2fae29
Add initial options based on Code Sandbox
nickmccurdy f3cf1e5
Set initial values based on default options
nickmccurdy 41c4a62
Upgrade Formik to fix initial values of checkboxes
nickmccurdy e32c6c6
Persist options with chrome.storage.sync
nickmccurdy 76ddfad
Replace Formik with custom form handling
nickmccurdy ebb4d42
Use options for formatting
nickmccurdy bb80a9e
Fix number options being saved as strings
nickmccurdy 8064e58
Merge branch 'master' into options
nickmccurdy 9fe5a41
Fix ESLint for CRA files
nickmccurdy 8d52005
Use recommended config from eslint-plugin-react
nickmccurdy 735f598
Remove setOptions from dependencies
nickmccurdy 1728726
Add eslint-plugin-react-hooks (used by CRA)
nickmccurdy fd15bff
Merge branch 'master' into options
nickmccurdy cd3442c
Update dependency version syntax
nickmccurdy cba3015
Remove old and unused options.html
nickmccurdy cc961b3
Add React app to original webpack config
nickmccurdy ba0e327
Move options page into extension/src/options
nickmccurdy a86a9c8
Rename main.js to content.js
nickmccurdy aef9f04
Load CSS directly from HTML (not JS/webpack)
nickmccurdy 18f9e91
Merge App.js into index.js
nickmccurdy 0be7bd8
Error on exhaustive-deps
nickmccurdy a7b312c
Configure react-devtools
nickmccurdy 2bf6862
Revert "Configure react-devtools"
nickmccurdy 963090f
Import react-devtools directly
nickmccurdy fd8150a
Disable source maps to fix CSP in development
nickmccurdy 7b64d57
Merge branch 'master' into options
nickmccurdy d0d1f36
Add React devtools usage to readme
nickmccurdy ce0a44d
Hide require.extensions warning
nickmccurdy f357b7d
Make installs faster by not building automatically
nickmccurdy 6e7f43e
Remove extra whitespace in script
nickmccurdy 11ee886
Only minimize code in production for performance
nickmccurdy 755268a
Only import react-devtools in development
nickmccurdy fdc53fa
Merge branch 'master' into options
nickmccurdy d0ded2f
Replace window.chrome with just chrome
nickmccurdy 2c37194
Scope options page storage to an options property
nickmccurdy 111660e
Credit the Code Sandbox source in a comment
nickmccurdy File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
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
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
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
This file was deleted.
Oops, something went wrong.
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
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 @@ | ||
body { | ||
margin: 0; | ||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", | ||
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", | ||
sans-serif; | ||
-webkit-font-smoothing: antialiased; | ||
-moz-osx-font-smoothing: grayscale; | ||
} | ||
|
||
code { | ||
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", | ||
monospace; | ||
} |
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 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8" /> | ||
<title>Prettier Options</title> | ||
<link rel="stylesheet" href="index.css" /> | ||
</head> | ||
<body> | ||
<noscript>You need to enable JavaScript to run this app.</noscript> | ||
<div id="root"></div> | ||
<script src="../../dist/options.js"></script> | ||
</body> | ||
</html> |
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,142 @@ | ||
import React, { useEffect, useState } from "react"; | ||
import ReactDOM from "react-dom"; | ||
|
||
const defaultOptions = { | ||
arrowParens: "avoid", | ||
bracketSpacing: true, | ||
jsxBracketSameLine: false, | ||
printWidth: 80, | ||
semi: true, | ||
singleQuote: false, | ||
tabWidth: 2, | ||
trailingComma: "none", | ||
useTabs: false | ||
}; | ||
|
||
function App() { | ||
const [options, setOptions] = useState(); | ||
|
||
useEffect(() => { | ||
chrome.storage.sync.get(items => { | ||
setOptions({ ...defaultOptions, ...items.options }); | ||
}); | ||
}, []); | ||
|
||
useEffect(() => { | ||
chrome.storage.sync.set({ options }); | ||
}, [options]); | ||
|
||
function handleChange({ target: { checked, name, type, value } }) { | ||
setOptions({ | ||
...options, | ||
[name]: | ||
type === "checkbox" | ||
? checked | ||
: type === "number" | ||
? parseInt(value) | ||
: value | ||
}); | ||
} | ||
|
||
// Form based on https://github.com/codesandbox/codesandbox-client/blob/master/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/Prettier/index.tsx | ||
return options ? ( | ||
<> | ||
<h1> | ||
<a href="https://prettier.io/docs/en/options.html">Prettier Options</a> | ||
</h1> | ||
<hr /> | ||
<label>Print width</label> | ||
<input | ||
type="number" | ||
name="printWidth" | ||
value={options.printWidth} | ||
onChange={handleChange} | ||
/> | ||
<p>Specify the line length that the printer will wrap on.</p> | ||
<hr /> | ||
<label>Tab width</label> | ||
<input | ||
type="number" | ||
name="tabWidth" | ||
value={options.tabWidth} | ||
onChange={handleChange} | ||
/> | ||
<p>Specify the number of spaces per indentation-level.</p> | ||
<hr /> | ||
<label>Use tabs</label> | ||
<input | ||
type="checkbox" | ||
name="useTabs" | ||
checked={options.useTabs} | ||
onChange={handleChange} | ||
/> | ||
<p>Indent lines with tabs instead of spaces.</p> | ||
<hr /> | ||
<label>Semicolons</label> | ||
<input | ||
type="checkbox" | ||
name="semi" | ||
checked={options.semi} | ||
onChange={handleChange} | ||
/> | ||
<p>Print semicolons at the ends of statements.</p> | ||
<hr /> | ||
<label>Use single quotes</label> | ||
<input | ||
type="checkbox" | ||
name="singleQuote" | ||
checked={options.singleQuote} | ||
onChange={handleChange} | ||
/> | ||
<p> | ||
Use {"'"}single{"'"} quotes instead of {'"'}double{'"'} quotes. | ||
</p> | ||
<hr /> | ||
<label>Trailing commas</label> | ||
<select | ||
name="trailingComma" | ||
value={options.trailingComma} | ||
onChange={handleChange} | ||
> | ||
<option>none</option> | ||
<option>es5</option> | ||
<option>all</option> | ||
</select> | ||
<p>Print trailing commas wherever possible.</p> | ||
<hr /> | ||
<label>Bracket spacing</label> | ||
<input | ||
type="checkbox" | ||
name="bracketSpacing" | ||
checked={options.bracketSpacing} | ||
onChange={handleChange} | ||
/> | ||
<p>Print spaces between brackets in object literals.</p> | ||
<hr /> | ||
<label>JSX Brackets</label> | ||
<input | ||
type="checkbox" | ||
name="jsxBracketSameLine" | ||
checked={options.jsxBracketSameLine} | ||
onChange={handleChange} | ||
/> | ||
<p> | ||
Put the `{">"}` of a multi-line JSX element at the end of the last line | ||
instead of being alone on the next line. | ||
</p> | ||
<hr /> | ||
<label>Arrow Function Parentheses</label> | ||
<select | ||
name="arrowParens" | ||
value={options.arrowParens} | ||
onChange={handleChange} | ||
> | ||
<option>avoid</option> | ||
<option>always</option> | ||
</select> | ||
<p>Include parentheses around a sole arrow function parameter.</p> | ||
</> | ||
) : null; | ||
} | ||
|
||
ReactDOM.render(<App />, document.getElementById("root")); |
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
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
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This isn't necessarily a blocker (we can fix this later if need be), but this only runs when the page is loaded, correct? One use case this might not handle very gracefully is when a GitHub/StackOverflow tab is open and someone goes and changes the settings (they wouldn't go into effect until the page is reloaded).
We could probably fix this by reading from chrome storage each time Prettier formats (again, does not need to be a blocker to land this, just want to make sure it's commented here for posterity).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I forgot to implement this, but we should be able to use
chrome.storage.onChanged.addListener
to subscribe to option updates in the content script.