plugins.md

Latest commit

History

History
115 lines (73 loc) · 4.48 KB

plugins.md

File metadata and controls

115 lines (73 loc) · 4.48 KB
Raw

Plugins

Plugin is a JavaScript package that extends built-in React Native CLI features. It can provide an array of additional commands to run or platforms to target.

For example, react-native-windows package is a plugin that provides run-windows command and windows platform.

Details of this particular integration as well as how to provide an additional platform for React Native were described in a dedicated section about platforms.

How does it work?

Except for React Native dependencies, where configuration is implicit, each package needs to have a react-native.config.js at the root folder in order to be discovered by the CLI as a plugin.

module.exports={commands: [{name: 'foo-command',func: ()=>console.log('It worked'),},],};

Above is an example of a plugin that exports a command named foo-command that can be executed with npx react-native foo-command and logs "It worked" and exits.

At the startup, React Native CLI reads configuration from all dependencies listed in package.json and reduces them into a single configuration.

At the end, an array of commands concatenated from all plugins is passed on to the CLI to be loaded after built-in commands.

Also, you can provide your own configuration by creating a react-native.config.js file in the root of the project, which overrides the configuration from plugins.

See healthChecks for information on how plugins can provide additional health checks for npx react-native doctor.

Command interface

typeCommand={name: string;description?: string;func: (argv: Array<string>,config: ConfigT,args: Object)=> ?Promise<void>;options?: Array<{name: string;description?: string;parse?: (val: string)=>any;default?:
|string|boolean|number|((config: ConfigT)=>string|boolean|number);}>;examples?: Array<{desc: string;cmd: string;}>;};

Note: ConfigT is described in configuration section

name

A name that will be used in order to run the command.

Note: If you want your command to accept additional arguments, make sure to include them in the name.

For example, my-command <argument> will require an argument to be provided and will throw a validation error otherwise. Alternatively, my-command [argument] will accept an argument, but will not throw when run without it. In that case, make sure to check for its presence.

func

Function that will be run when this command is executed. Receives an array of arguments, in order they were provided, a config object (see configuration section) and options, that were passed to your command.

You can return a Promise if your command is async.

All errors are handled by the built-in logger. Prefer throwing instead of implementing your own logging mechanism.

options

An array of options that your command accepts.

options.name

Name of the option.

For example, a --reset-cache option will result in a resetCache: true or resetCache: false present in the options object - passed to a command function as a last argument.

Just like with a command name, your option can require a value (e.g. --port <port>) or accept an optional one (e.g. --host [host]). In this case, you may find default value useful.

Note: Almost all names are accepted, but there's an exception for --version, we consider it a reserved word and do not guarantee that it will work as expected, so avoid using it. (see this for further details)

options.description

Optional description of your option. When provided, will be used to output a better help information.

options.parse

Parsing function that can be used to transform a raw (string) option as passed by the user into a format expected by your function.

options.default

Default value for the option when not provided. Can be either a primitive value or a function, that receives a configuration and returns a primitive.

Useful when you want to use project settings as default value for your option.

examples

An array of example usage of the command to be printed to the user.

examples.desc

String that describes this particular usage.

examples.cmd

A command with arguments and options (if applicable) that can be run in order to achieve the desired goal.

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
plugins.md
Latest commit
History
History
115 lines (73 loc) · 4.48 KB
plugins.md
File metadata and controls
115 lines (73 loc) · 4.48 KB
Raw
Plugins
Plugin is a JavaScript package that extends built-in React Native CLI features. It can provide an array of additional commands to run or platforms to target.
For example, react-native-windows package is a plugin that provides run-windows command and windows platform.
Details of this particular integration as well as how to provide an additional platform for React Native were described in a dedicated section about platforms.
How does it work?
Except for React Native dependencies, where configuration is implicit, each package needs to have a react-native.config.js at the root folder in order to be discovered by the CLI as a plugin.
module.exports={commands: [{name: 'foo-command',func: ()=>console.log('It worked'),},],};
Above is an example of a plugin that exports a command named foo-command that can be executed with npx react-native foo-command and logs "It worked" and exits.
At the startup, React Native CLI reads configuration from all dependencies listed in package.json and reduces them into a single configuration.
At the end, an array of commands concatenated from all plugins is passed on to the CLI to be loaded after built-in commands.
Also, you can provide your own configuration by creating a react-native.config.js file in the root of the project, which overrides the configuration from plugins.
See healthChecks for information on how plugins can provide additional health checks for npx react-native doctor.
Command interface
typeCommand={name: string;description?: string;func: (argv: Array<string>,config: ConfigT,args: Object)=> ?Promise<void>;options?: Array<{name: string;description?: string;parse?: (val: string)=>any;default?:
|string|boolean|number|((config: ConfigT)=>string|boolean|number);}>;examples?: Array<{desc: string;cmd: string;}>;};
Note: ConfigT is described in configuration section
name
A name that will be used in order to run the command.
Note: If you want your command to accept additional arguments, make sure to include them in the name.
For example, my-command <argument> will require an argument to be provided and will throw a validation error otherwise. Alternatively, my-command [argument] will accept an argument, but will not throw when run without it. In that case, make sure to check for its presence.
func
Function that will be run when this command is executed. Receives an array of arguments, in order they were provided, a config object (see configuration section) and options, that were passed to your command.
You can return a Promise if your command is async.
All errors are handled by the built-in logger. Prefer throwing instead of implementing your own logging mechanism.
options
An array of options that your command accepts.
options.name
Name of the option.
For example, a --reset-cache option will result in a resetCache: true or resetCache: false present in the options object - passed to a command function as a last argument.
Just like with a command name, your option can require a value (e.g. --port <port>) or accept an optional one (e.g. --host [host]). In this case, you may find default value useful.
Note: Almost all names are accepted, but there's an exception for --version, we consider it a reserved word and do not guarantee that it will
work as expected, so avoid using it. (see this for further details)
options.description
Optional description of your option. When provided, will be used to output a better help information.
options.parse
Parsing function that can be used to transform a raw (string) option as passed by the user into a format expected by your function.
options.default
Default value for the option when not provided. Can be either a primitive value or a function, that receives a configuration and returns a primitive.
Useful when you want to use project settings as default value for your option.
examples
An array of example usage of the command to be printed to the user.
examples.desc
String that describes this particular usage.
examples.cmd
A command with arguments and options (if applicable) that can be run in order to achieve the desired goal.

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
plugins.md
Latest commit
History
History
115 lines (73 loc) · 4.48 KB
plugins.md
File metadata and controls
115 lines (73 loc) · 4.48 KB
Raw
Plugins
Plugin is a JavaScript package that extends built-in React Native CLI features. It can provide an array of additional commands to run or platforms to target.
For example, react-native-windows package is a plugin that provides run-windows command and windows platform.
Details of this particular integration as well as how to provide an additional platform for React Native were described in a dedicated section about platforms.
How does it work?
Except for React Native dependencies, where configuration is implicit, each package needs to have a react-native.config.js at the root folder in order to be discovered by the CLI as a plugin.
module.exports={commands: [{name: 'foo-command',func: ()=>console.log('It worked'),},],};
Above is an example of a plugin that exports a command named foo-command that can be executed with npx react-native foo-command and logs "It worked" and exits.
At the startup, React Native CLI reads configuration from all dependencies listed in package.json and reduces them into a single configuration.
At the end, an array of commands concatenated from all plugins is passed on to the CLI to be loaded after built-in commands.
Also, you can provide your own configuration by creating a react-native.config.js file in the root of the project, which overrides the configuration from plugins.
See healthChecks for information on how plugins can provide additional health checks for npx react-native doctor.
Command interface
typeCommand={name: string;description?: string;func: (argv: Array<string>,config: ConfigT,args: Object)=> ?Promise<void>;options?: Array<{name: string;description?: string;parse?: (val: string)=>any;default?:
|string|boolean|number|((config: ConfigT)=>string|boolean|number);}>;examples?: Array<{desc: string;cmd: string;}>;};
Note: ConfigT is described in configuration section
name
A name that will be used in order to run the command.
Note: If you want your command to accept additional arguments, make sure to include them in the name.
For example, my-command <argument> will require an argument to be provided and will throw a validation error otherwise. Alternatively, my-command [argument] will accept an argument, but will not throw when run without it. In that case, make sure to check for its presence.
func
Function that will be run when this command is executed. Receives an array of arguments, in order they were provided, a config object (see configuration section) and options, that were passed to your command.
You can return a Promise if your command is async.
All errors are handled by the built-in logger. Prefer throwing instead of implementing your own logging mechanism.
options
An array of options that your command accepts.
options.name
Name of the option.
For example, a --reset-cache option will result in a resetCache: true or resetCache: false present in the options object - passed to a command function as a last argument.
Just like with a command name, your option can require a value (e.g. --port <port>) or accept an optional one (e.g. --host [host]). In this case, you may find default value useful.
Note: Almost all names are accepted, but there's an exception for --version, we consider it a reserved word and do not guarantee that it will
work as expected, so avoid using it. (see this for further details)
options.description
Optional description of your option. When provided, will be used to output a better help information.
options.parse
Parsing function that can be used to transform a raw (string) option as passed by the user into a format expected by your function.
options.default
Default value for the option when not provided. Can be either a primitive value or a function, that receives a configuration and returns a primitive.
Useful when you want to use project settings as default value for your option.
examples
An array of example usage of the command to be printed to the user.
examples.desc
String that describes this particular usage.
examples.cmd
A command with arguments and options (if applicable) that can be run in order to achieve the desired goal.

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
plugins.md
Latest commit
History
History
115 lines (73 loc) · 4.48 KB
plugins.md
File metadata and controls
115 lines (73 loc) · 4.48 KB
Raw
Plugins
Plugin is a JavaScript package that extends built-in React Native CLI features. It can provide an array of additional commands to run or platforms to target.
For example, react-native-windows package is a plugin that provides run-windows command and windows platform.
Details of this particular integration as well as how to provide an additional platform for React Native were described in a dedicated section about platforms.
How does it work?
Except for React Native dependencies, where configuration is implicit, each package needs to have a react-native.config.js at the root folder in order to be discovered by the CLI as a plugin.
module.exports={commands: [{name: 'foo-command',func: ()=>console.log('It worked'),},],};
Above is an example of a plugin that exports a command named foo-command that can be executed with npx react-native foo-command and logs "It worked" and exits.
At the startup, React Native CLI reads configuration from all dependencies listed in package.json and reduces them into a single configuration.
At the end, an array of commands concatenated from all plugins is passed on to the CLI to be loaded after built-in commands.
Also, you can provide your own configuration by creating a react-native.config.js file in the root of the project, which overrides the configuration from plugins.
See healthChecks for information on how plugins can provide additional health checks for npx react-native doctor.
Command interface
typeCommand={name: string;description?: string;func: (argv: Array<string>,config: ConfigT,args: Object)=> ?Promise<void>;options?: Array<{name: string;description?: string;parse?: (val: string)=>any;default?:
|string|boolean|number|((config: ConfigT)=>string|boolean|number);}>;examples?: Array<{desc: string;cmd: string;}>;};
Note: ConfigT is described in configuration section
name
A name that will be used in order to run the command.
Note: If you want your command to accept additional arguments, make sure to include them in the name.
For example, my-command <argument> will require an argument to be provided and will throw a validation error otherwise. Alternatively, my-command [argument] will accept an argument, but will not throw when run without it. In that case, make sure to check for its presence.
func
Function that will be run when this command is executed. Receives an array of arguments, in order they were provided, a config object (see configuration section) and options, that were passed to your command.
You can return a Promise if your command is async.
All errors are handled by the built-in logger. Prefer throwing instead of implementing your own logging mechanism.
options
An array of options that your command accepts.
options.name
Name of the option.
For example, a --reset-cache option will result in a resetCache: true or resetCache: false present in the options object - passed to a command function as a last argument.
Just like with a command name, your option can require a value (e.g. --port <port>) or accept an optional one (e.g. --host [host]). In this case, you may find default value useful.
Note: Almost all names are accepted, but there's an exception for --version, we consider it a reserved word and do not guarantee that it will
work as expected, so avoid using it. (see this for further details)
options.description
Optional description of your option. When provided, will be used to output a better help information.
options.parse
Parsing function that can be used to transform a raw (string) option as passed by the user into a format expected by your function.
options.default
Default value for the option when not provided. Can be either a primitive value or a function, that receives a configuration and returns a primitive.
Useful when you want to use project settings as default value for your option.
examples
An array of example usage of the command to be printed to the user.
examples.desc
String that describes this particular usage.
examples.cmd
A command with arguments and options (if applicable) that can be run in order to achieve the desired goal.

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
plugins.md
Latest commit
History
History
115 lines (73 loc) · 4.48 KB
plugins.md
File metadata and controls
115 lines (73 loc) · 4.48 KB
Raw
Plugins
Plugin is a JavaScript package that extends built-in React Native CLI features. It can provide an array of additional commands to run or platforms to target.
For example, react-native-windows package is a plugin that provides run-windows command and windows platform.
Details of this particular integration as well as how to provide an additional platform for React Native were described in a dedicated section about platforms.
How does it work?
Except for React Native dependencies, where configuration is implicit, each package needs to have a react-native.config.js at the root folder in order to be discovered by the CLI as a plugin.
module.exports={commands: [{name: 'foo-command',func: ()=>console.log('It worked'),},],};
Above is an example of a plugin that exports a command named foo-command that can be executed with npx react-native foo-command and logs "It worked" and exits.
At the startup, React Native CLI reads configuration from all dependencies listed in package.json and reduces them into a single configuration.
At the end, an array of commands concatenated from all plugins is passed on to the CLI to be loaded after built-in commands.
Also, you can provide your own configuration by creating a react-native.config.js file in the root of the project, which overrides the configuration from plugins.
See healthChecks for information on how plugins can provide additional health checks for npx react-native doctor.
Command interface
typeCommand={name: string;description?: string;func: (argv: Array<string>,config: ConfigT,args: Object)=> ?Promise<void>;options?: Array<{name: string;description?: string;parse?: (val: string)=>any;default?:
|string|boolean|number|((config: ConfigT)=>string|boolean|number);}>;examples?: Array<{desc: string;cmd: string;}>;};
Note: ConfigT is described in configuration section
name
A name that will be used in order to run the command.
Note: If you want your command to accept additional arguments, make sure to include them in the name.
For example, my-command <argument> will require an argument to be provided and will throw a validation error otherwise. Alternatively, my-command [argument] will accept an argument, but will not throw when run without it. In that case, make sure to check for its presence.
func
Function that will be run when this command is executed. Receives an array of arguments, in order they were provided, a config object (see configuration section) and options, that were passed to your command.
You can return a Promise if your command is async.
All errors are handled by the built-in logger. Prefer throwing instead of implementing your own logging mechanism.
options
An array of options that your command accepts.
options.name
Name of the option.
For example, a --reset-cache option will result in a resetCache: true or resetCache: false present in the options object - passed to a command function as a last argument.
Just like with a command name, your option can require a value (e.g. --port <port>) or accept an optional one (e.g. --host [host]). In this case, you may find default value useful.
Note: Almost all names are accepted, but there's an exception for --version, we consider it a reserved word and do not guarantee that it will
work as expected, so avoid using it. (see this for further details)
options.description
Optional description of your option. When provided, will be used to output a better help information.
options.parse
Parsing function that can be used to transform a raw (string) option as passed by the user into a format expected by your function.
options.default
Default value for the option when not provided. Can be either a primitive value or a function, that receives a configuration and returns a primitive.
Useful when you want to use project settings as default value for your option.
examples
An array of example usage of the command to be printed to the user.
examples.desc
String that describes this particular usage.
examples.cmd
A command with arguments and options (if applicable) that can be run in order to achieve the desired goal.

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
plugins.md
Latest commit
History
History
115 lines (73 loc) · 4.48 KB
plugins.md
File metadata and controls
115 lines (73 loc) · 4.48 KB
Raw
Plugins
Plugin is a JavaScript package that extends built-in React Native CLI features. It can provide an array of additional commands to run or platforms to target.
For example, react-native-windows package is a plugin that provides run-windows command and windows platform.
Details of this particular integration as well as how to provide an additional platform for React Native were described in a dedicated section about platforms.
How does it work?
Except for React Native dependencies, where configuration is implicit, each package needs to have a react-native.config.js at the root folder in order to be discovered by the CLI as a plugin.
module.exports={commands: [{name: 'foo-command',func: ()=>console.log('It worked'),},],};
Above is an example of a plugin that exports a command named foo-command that can be executed with npx react-native foo-command and logs "It worked" and exits.
At the startup, React Native CLI reads configuration from all dependencies listed in package.json and reduces them into a single configuration.
At the end, an array of commands concatenated from all plugins is passed on to the CLI to be loaded after built-in commands.
Also, you can provide your own configuration by creating a react-native.config.js file in the root of the project, which overrides the configuration from plugins.
See healthChecks for information on how plugins can provide additional health checks for npx react-native doctor.
Command interface
typeCommand={name: string;description?: string;func: (argv: Array<string>,config: ConfigT,args: Object)=> ?Promise<void>;options?: Array<{name: string;description?: string;parse?: (val: string)=>any;default?:
|string|boolean|number|((config: ConfigT)=>string|boolean|number);}>;examples?: Array<{desc: string;cmd: string;}>;};
Note: ConfigT is described in configuration section
name
A name that will be used in order to run the command.
Note: If you want your command to accept additional arguments, make sure to include them in the name.
For example, my-command <argument> will require an argument to be provided and will throw a validation error otherwise. Alternatively, my-command [argument] will accept an argument, but will not throw when run without it. In that case, make sure to check for its presence.
func
Function that will be run when this command is executed. Receives an array of arguments, in order they were provided, a config object (see configuration section) and options, that were passed to your command.
You can return a Promise if your command is async.
All errors are handled by the built-in logger. Prefer throwing instead of implementing your own logging mechanism.
options
An array of options that your command accepts.
options.name
Name of the option.
For example, a --reset-cache option will result in a resetCache: true or resetCache: false present in the options object - passed to a command function as a last argument.
Just like with a command name, your option can require a value (e.g. --port <port>) or accept an optional one (e.g. --host [host]). In this case, you may find default value useful.
Note: Almost all names are accepted, but there's an exception for --version, we consider it a reserved word and do not guarantee that it will
work as expected, so avoid using it. (see this for further details)
options.description
Optional description of your option. When provided, will be used to output a better help information.
options.parse
Parsing function that can be used to transform a raw (string) option as passed by the user into a format expected by your function.
options.default
Default value for the option when not provided. Can be either a primitive value or a function, that receives a configuration and returns a primitive.
Useful when you want to use project settings as default value for your option.
examples
An array of example usage of the command to be printed to the user.
examples.desc
String that describes this particular usage.
examples.cmd
A command with arguments and options (if applicable) that can be run in order to achieve the desired goal.

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
plugins.md
Latest commit
History
History
115 lines (73 loc) · 4.48 KB
plugins.md
File metadata and controls
115 lines (73 loc) · 4.48 KB
Raw
Plugins
Plugin is a JavaScript package that extends built-in React Native CLI features. It can provide an array of additional commands to run or platforms to target.
For example, react-native-windows package is a plugin that provides run-windows command and windows platform.
Details of this particular integration as well as how to provide an additional platform for React Native were described in a dedicated section about platforms.
How does it work?
Except for React Native dependencies, where configuration is implicit, each package needs to have a react-native.config.js at the root folder in order to be discovered by the CLI as a plugin.
module.exports={commands: [{name: 'foo-command',func: ()=>console.log('It worked'),},],};
Above is an example of a plugin that exports a command named foo-command that can be executed with npx react-native foo-command and logs "It worked" and exits.
At the startup, React Native CLI reads configuration from all dependencies listed in package.json and reduces them into a single configuration.
At the end, an array of commands concatenated from all plugins is passed on to the CLI to be loaded after built-in commands.
Also, you can provide your own configuration by creating a react-native.config.js file in the root of the project, which overrides the configuration from plugins.
See healthChecks for information on how plugins can provide additional health checks for npx react-native doctor.
Command interface
typeCommand={name: string;description?: string;func: (argv: Array<string>,config: ConfigT,args: Object)=> ?Promise<void>;options?: Array<{name: string;description?: string;parse?: (val: string)=>any;default?:
|string|boolean|number|((config: ConfigT)=>string|boolean|number);}>;examples?: Array<{desc: string;cmd: string;}>;};
Note: ConfigT is described in configuration section
name
A name that will be used in order to run the command.
Note: If you want your command to accept additional arguments, make sure to include them in the name.
For example, my-command <argument> will require an argument to be provided and will throw a validation error otherwise. Alternatively, my-command [argument] will accept an argument, but will not throw when run without it. In that case, make sure to check for its presence.
func
Function that will be run when this command is executed. Receives an array of arguments, in order they were provided, a config object (see configuration section) and options, that were passed to your command.
You can return a Promise if your command is async.
All errors are handled by the built-in logger. Prefer throwing instead of implementing your own logging mechanism.
options
An array of options that your command accepts.
options.name
Name of the option.
For example, a --reset-cache option will result in a resetCache: true or resetCache: false present in the options object - passed to a command function as a last argument.
Just like with a command name, your option can require a value (e.g. --port <port>) or accept an optional one (e.g. --host [host]). In this case, you may find default value useful.
Note: Almost all names are accepted, but there's an exception for --version, we consider it a reserved word and do not guarantee that it will
work as expected, so avoid using it. (see this for further details)
options.description
Optional description of your option. When provided, will be used to output a better help information.
options.parse
Parsing function that can be used to transform a raw (string) option as passed by the user into a format expected by your function.
options.default
Default value for the option when not provided. Can be either a primitive value or a function, that receives a configuration and returns a primitive.
Useful when you want to use project settings as default value for your option.
examples
An array of example usage of the command to be printed to the user.
examples.desc
String that describes this particular usage.
examples.cmd
A command with arguments and options (if applicable) that can be run in order to achieve the desired goal.

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
plugins.md
Latest commit
History
History
115 lines (73 loc) · 4.48 KB
plugins.md
File metadata and controls
115 lines (73 loc) · 4.48 KB
Raw
Plugins
Plugin is a JavaScript package that extends built-in React Native CLI features. It can provide an array of additional commands to run or platforms to target.
For example, react-native-windows package is a plugin that provides run-windows command and windows platform.
Details of this particular integration as well as how to provide an additional platform for React Native were described in a dedicated section about platforms.
How does it work?
Except for React Native dependencies, where configuration is implicit, each package needs to have a react-native.config.js at the root folder in order to be discovered by the CLI as a plugin.
module.exports={commands: [{name: 'foo-command',func: ()=>console.log('It worked'),},],};
Above is an example of a plugin that exports a command named foo-command that can be executed with npx react-native foo-command and logs "It worked" and exits.
At the startup, React Native CLI reads configuration from all dependencies listed in package.json and reduces them into a single configuration.
At the end, an array of commands concatenated from all plugins is passed on to the CLI to be loaded after built-in commands.
Also, you can provide your own configuration by creating a react-native.config.js file in the root of the project, which overrides the configuration from plugins.
See healthChecks for information on how plugins can provide additional health checks for npx react-native doctor.
Command interface
typeCommand={name: string;description?: string;func: (argv: Array<string>,config: ConfigT,args: Object)=> ?Promise<void>;options?: Array<{name: string;description?: string;parse?: (val: string)=>any;default?:
|string|boolean|number|((config: ConfigT)=>string|boolean|number);}>;examples?: Array<{desc: string;cmd: string;}>;};
Note: ConfigT is described in configuration section
name
A name that will be used in order to run the command.
Note: If you want your command to accept additional arguments, make sure to include them in the name.
For example, my-command <argument> will require an argument to be provided and will throw a validation error otherwise. Alternatively, my-command [argument] will accept an argument, but will not throw when run without it. In that case, make sure to check for its presence.
func
Function that will be run when this command is executed. Receives an array of arguments, in order they were provided, a config object (see configuration section) and options, that were passed to your command.
You can return a Promise if your command is async.
All errors are handled by the built-in logger. Prefer throwing instead of implementing your own logging mechanism.
options
An array of options that your command accepts.
options.name
Name of the option.
For example, a --reset-cache option will result in a resetCache: true or resetCache: false present in the options object - passed to a command function as a last argument.
Just like with a command name, your option can require a value (e.g. --port <port>) or accept an optional one (e.g. --host [host]). In this case, you may find default value useful.
Note: Almost all names are accepted, but there's an exception for --version, we consider it a reserved word and do not guarantee that it will
work as expected, so avoid using it. (see this for further details)
options.description
Optional description of your option. When provided, will be used to output a better help information.
options.parse
Parsing function that can be used to transform a raw (string) option as passed by the user into a format expected by your function.
options.default
Default value for the option when not provided. Can be either a primitive value or a function, that receives a configuration and returns a primitive.
Useful when you want to use project settings as default value for your option.
examples
An array of example usage of the command to be printed to the user.
examples.desc
String that describes this particular usage.
examples.cmd
A command with arguments and options (if applicable) that can be run in order to achieve the desired goal.