Skip to content

Commit

Permalink
Meta: Move loading logic into each feature (#1694)
Browse files Browse the repository at this point in the history
- Move loading logic (`when`, `where`) near the feature's code instead of being listed in 3 separate functions (`init`, `onDomReady`, `ajaxedPagesHandler`) in a different file (`content.js`)
- Avoids the messy content.js list of imports/uselessFunctionNames by halving the file length
- Enables us to actually list all the features in Options (not part of this PR) since they are _all_ added in `feature.add('feature-name')` on load
  • Loading branch information
fregante committed Jan 15, 2019
1 parent ed37a25 commit 7ec5717
Show file tree
Hide file tree
Showing 91 changed files with 1,491 additions and 780 deletions.
58 changes: 55 additions & 3 deletions contributing.md
Expand Up @@ -8,11 +8,63 @@ Suggestions and pull requests are highly encouraged! Have a look at the [open is
- The extension can be loaded into Chrome or Firefox manually ([See notes below](#loading-into-the-browser))
- [JSX](https://reactjs.org/docs/introducing-jsx.html) is used to create DOM elements.
- All the [latest DOM APIs](https://github.com/WebReflection/dom4#features) and JavaScript features are available because the extension only has to work in the latest Chrome and Firefox. 🎉
- Each JavaScript feature lives in its own file under [`source/features`](https://github.com/sindresorhus/refined-github/tree/master/source/features) and it's loaded on condition in [`source/content.js`](https://github.com/sindresorhus/refined-github/blob/master/source/content.js).
- Some GitHub pages are loaded via AJAX/PJAX, so some features need to be in the special `ajaxedPagesHandler` function (see it as a custom "on DOM ready").
- See what a _feature_ [looks like](https://github.com/sindresorhus/refined-github/blob/master/source/features/add-time-machine-links-to-comments.js) and [how it's loaded](https://github.com/sindresorhus/refined-github/blob/d7768508c3919558daa6b2ccc5a15aa73d081551/source/content.js#L176) (in this case it uses `observeEl` to automatically be run when new comments are loaded via AJAX)
- Each JavaScript feature lives in its own file under [`source/features`](https://github.com/sindresorhus/refined-github/tree/master/source/features) and it's imported in [`source/content.js`](https://github.com/sindresorhus/refined-github/blob/master/source/content.js).
- Some GitHub pages are loaded via AJAX/PJAX, so some features use the special `onAjaxedPages` loader (see it as a custom "on DOM ready").
- See what a _feature_ [looks like](https://github.com/sindresorhus/refined-github/blob/master/source/features/user-profile-follower-badge.js).
- If you're making changes to the README, try to match the style of the content that's already there and when in doubt, take a look at [our little style guide](https://github.com/sindresorhus/refined-github/issues/1139).

## `features.add`

The simplest usage of `feature.add` is the following. This will be run instantly on all page-loads (but not on ajax loads):

```js
import features from '../libs/features';

function init () {
console.log('');
}

features.add({
id: 'make-github-more-refined',
init
});
```

Here's an example using all of the possible `feature.add` options:


```js
import select from 'select-dom';
import features from '../libs/features';

function log() {
console.log('');
}
function init() {
select('.btn').addEventListener('click', log);
}
function deinit() {
select('.btn').removeEventListener('load', log);
}

features.add({
id: 'make-github-more-refined',
include: [
features.isUserProfile,
features.isOrganization
],
exclude: [
features.isOwnUserProfile
],
load: features.domReady, // Wait for dom-ready
// load: features.onAjaxedPages, // Or: Wait for dom-ready AND run on all ajaxed loads
// load: features.onNewComments, // Or: Wait for dom-ready AND run on all ajaxed loads AND watch for new comments
deinit, // Rarely needed
init
});
```


## Workflow

First clone:
Expand Down
34 changes: 22 additions & 12 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Expand Up @@ -20,12 +20,12 @@
"dom-chef": "^3.2.0",
"dom-loaded": "^1.0.1",
"element-ready": "^3.0.0",
"github-injection": "^1.0.1",
"github-reserved-names": "^1.1.4",
"intervalometer": "^1.0.4",
"linkify-issues": "^1.3.0",
"linkify-urls": "^2.2.0",
"onetime": "^2.0.1",
"p-is-promise": "^2.0.0",
"select-dom": "^4.1.3",
"shorten-repo-url": "^1.5.0",
"storm-textarea": "2.0.1",
Expand Down

0 comments on commit 7ec5717

Please sign in to comment.