Skip to content
BranchesTags

Repository files navigation

remote-ui

remote-ui allows you to create custom component APIs in JavaScript that can be used to render UI from a context other than the UI thread, like a web worker. This technique can be a powerful performance optimization by isolating application code on a background thread, leaving only the platform-native components on the UI thread. It can also be used as a way for third party code to generate UI in a safe, dynamic, and highly-performant way, without relying on iframes.

Navigating remote-ui

remote-ui is a collection of projects that work together to provide the capability of remotely rendering UI:

  • @remote-ui/core gives you the tools to create a “remote root”: a root for a tree of component nodes that can communicate operations (adding or removing children, changing properties of components) through a tiny wire format suitable for postMessage communication. This remote root can enforce validations, like restricting the available components, their children, and their allowed properties. Finally, this library offers some helpful utilities for implementing “hosts” of a remote root; that is, code running on the UI thread that can transform the communication format of a remote root into platform-native components.
  • @remote-ui/rpc is a small wrapper for postMessage-like interfaces. Its key feature is flexible support for serializing functions (implemented via message passing), with additional helper functions to help with the memory management concerns of serializing functions. While not strictly necessary, passing functions as component properties (e.g., onPress of a Button component) is often very useful, and so all libraries in this project assume the use of this rpc library in order to provide seamless handling of function component properties.
  • @remote-ui/web-workers makes it easy to use remote-ui to offload application code to a web worker. It does so through small runtime utilities and a collection of build tool integrations that allow you to author web workers with all the comfort of your existing tools and libraries.

The main API of remote-ui, provided by @remote-ui/core, is small, and similar to the DOM. This makes it well-suited as a target for other libraries, which can provide different tradeoffs of performance and developer ergonomics for code executing in the remote environment. The “host” side is also meant to be flexible, allowing you to map the simple “tree of components” structure from the remote environment into many different UI libraries on the main thread. This repo provides bindings to the host and/ or remote parts of remote-ui for a few popular libraries:

Legend:

Host 🌎: provides a host layer that can map remote-ui components to UI components

Remote 🛰️: provides a way to manage the tree of remote-ui components in the remote context

LibraryHost 🌎Remote 🛰️
@remote-ui/mini-react❌✅
@remote-ui/react✅✅
@remote-ui/vue✅✅
@remote-ui/dom✅❌
@remote-ui/htm❌✅

Finally, this repo also contains a number of utility libraries for working with remote-ui:

Learn more

We’ve prepared some guides for getting the most out of remote-ui:

Examples

We have created an example project, bootstrapped with Create React App, that shows how you can incorporate the different parts of remote-ui into a simple React codebase.

Want to learn even more? Read through the comprehensive example, a written guide that documents a fully-featured implementation of remote-ui across both the host (browser) and remote (web worker) environments.

Want to contribute?

Check out our contributing guide.

License

MIT © Shopify, see LICENSE.md for details.

Shopify

About

No description, website, or topics provided.

Resources

Readme
License

Code of conduct

Code of conduct

Contributing

Contributing
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
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;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - instantcommerce/remote-ui · GitHub
Skip to content
BranchesTags
Repository files navigation
remote-ui
remote-ui allows you to create custom component APIs in JavaScript that can be used to render UI from a context other than the UI thread, like a web worker. This technique can be a powerful performance optimization by isolating application code on a background thread, leaving only the platform-native components on the UI thread. It can also be used as a way for third party code to generate UI in a safe, dynamic, and highly-performant way, without relying on iframes.
Navigating remote-ui
remote-ui is a collection of projects that work together to provide the capability of remotely rendering UI:
  • @remote-ui/core gives you the tools to create a “remote root”: a root for a tree of component nodes that can communicate operations (adding or removing children, changing properties of components) through a tiny wire format suitable for postMessage communication. This remote root can enforce validations, like restricting the available components, their children, and their allowed properties. Finally, this library offers some helpful utilities for implementing “hosts” of a remote root; that is, code running on the UI thread that can transform the communication format of a remote root into platform-native components.
  • @remote-ui/rpc is a small wrapper for postMessage-like interfaces. Its key feature is flexible support for serializing functions (implemented via message passing), with additional helper functions to help with the memory management concerns of serializing functions. While not strictly necessary, passing functions as component properties (e.g., onPress of a Button component) is often very useful, and so all libraries in this project assume the use of this rpc library in order to provide seamless handling of function component properties.
  • @remote-ui/web-workers makes it easy to use remote-ui to offload application code to a web worker. It does so through small runtime utilities and a collection of build tool integrations that allow you to author web workers with all the comfort of your existing tools and libraries.
The main API of remote-ui, provided by @remote-ui/core, is small, and similar to the DOM. This makes it well-suited as a target for other libraries, which can provide different tradeoffs of performance and developer ergonomics for code executing in the remote environment. The “host” side is also meant to be flexible, allowing you to map the simple “tree of components” structure from the remote environment into many different UI libraries on the main thread. This repo provides bindings to the host and/ or remote parts of remote-ui for a few popular libraries:
Legend:
Host 🌎: provides a host layer that can map remote-ui components to UI components
Remote 🛰️: provides a way to manage the tree of remote-ui components in the remote context
LibraryHost 🌎Remote 🛰️
@remote-ui/mini-react❌✅
@remote-ui/react✅✅
@remote-ui/vue✅✅
@remote-ui/dom✅❌
@remote-ui/htm❌✅
Finally, this repo also contains a number of utility libraries for working with remote-ui:
Learn more
We’ve prepared some guides for getting the most out of remote-ui:
Examples
We have created an example project, bootstrapped with Create React App, that shows how you can incorporate the different parts of remote-ui into a simple React codebase.
Want to learn even more? Read through the comprehensive example, a written guide that documents a fully-featured implementation of remote-ui across both the host (browser) and remote (web worker) environments.
Want to contribute?
Check out our contributing guide.
License
MIT © Shopify, see LICENSE.md for details.
Shopify
About
No description, website, or topics provided.
Resources
Readme
License
Code of conduct
Code of conduct
Contributing
Contributing
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - instantcommerce/remote-ui · GitHub
Skip to content
BranchesTags
Repository files navigation
remote-ui
remote-ui allows you to create custom component APIs in JavaScript that can be used to render UI from a context other than the UI thread, like a web worker. This technique can be a powerful performance optimization by isolating application code on a background thread, leaving only the platform-native components on the UI thread. It can also be used as a way for third party code to generate UI in a safe, dynamic, and highly-performant way, without relying on iframes.
Navigating remote-ui
remote-ui is a collection of projects that work together to provide the capability of remotely rendering UI:
  • @remote-ui/core gives you the tools to create a “remote root”: a root for a tree of component nodes that can communicate operations (adding or removing children, changing properties of components) through a tiny wire format suitable for postMessage communication. This remote root can enforce validations, like restricting the available components, their children, and their allowed properties. Finally, this library offers some helpful utilities for implementing “hosts” of a remote root; that is, code running on the UI thread that can transform the communication format of a remote root into platform-native components.
  • @remote-ui/rpc is a small wrapper for postMessage-like interfaces. Its key feature is flexible support for serializing functions (implemented via message passing), with additional helper functions to help with the memory management concerns of serializing functions. While not strictly necessary, passing functions as component properties (e.g., onPress of a Button component) is often very useful, and so all libraries in this project assume the use of this rpc library in order to provide seamless handling of function component properties.
  • @remote-ui/web-workers makes it easy to use remote-ui to offload application code to a web worker. It does so through small runtime utilities and a collection of build tool integrations that allow you to author web workers with all the comfort of your existing tools and libraries.
The main API of remote-ui, provided by @remote-ui/core, is small, and similar to the DOM. This makes it well-suited as a target for other libraries, which can provide different tradeoffs of performance and developer ergonomics for code executing in the remote environment. The “host” side is also meant to be flexible, allowing you to map the simple “tree of components” structure from the remote environment into many different UI libraries on the main thread. This repo provides bindings to the host and/ or remote parts of remote-ui for a few popular libraries:
Legend:
Host 🌎: provides a host layer that can map remote-ui components to UI components
Remote 🛰️: provides a way to manage the tree of remote-ui components in the remote context
LibraryHost 🌎Remote 🛰️
@remote-ui/mini-react❌✅
@remote-ui/react✅✅
@remote-ui/vue✅✅
@remote-ui/dom✅❌
@remote-ui/htm❌✅
Finally, this repo also contains a number of utility libraries for working with remote-ui:
Learn more
We’ve prepared some guides for getting the most out of remote-ui:
Examples
We have created an example project, bootstrapped with Create React App, that shows how you can incorporate the different parts of remote-ui into a simple React codebase.
Want to learn even more? Read through the comprehensive example, a written guide that documents a fully-featured implementation of remote-ui across both the host (browser) and remote (web worker) environments.
Want to contribute?
Check out our contributing guide.
License
MIT © Shopify, see LICENSE.md for details.
Shopify
About
No description, website, or topics provided.
Resources
Readme
License
Code of conduct
Code of conduct
Contributing
Contributing
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - instantcommerce/remote-ui · GitHub
Skip to content
BranchesTags
Repository files navigation
remote-ui
remote-ui allows you to create custom component APIs in JavaScript that can be used to render UI from a context other than the UI thread, like a web worker. This technique can be a powerful performance optimization by isolating application code on a background thread, leaving only the platform-native components on the UI thread. It can also be used as a way for third party code to generate UI in a safe, dynamic, and highly-performant way, without relying on iframes.
Navigating remote-ui
remote-ui is a collection of projects that work together to provide the capability of remotely rendering UI:
  • @remote-ui/core gives you the tools to create a “remote root”: a root for a tree of component nodes that can communicate operations (adding or removing children, changing properties of components) through a tiny wire format suitable for postMessage communication. This remote root can enforce validations, like restricting the available components, their children, and their allowed properties. Finally, this library offers some helpful utilities for implementing “hosts” of a remote root; that is, code running on the UI thread that can transform the communication format of a remote root into platform-native components.
  • @remote-ui/rpc is a small wrapper for postMessage-like interfaces. Its key feature is flexible support for serializing functions (implemented via message passing), with additional helper functions to help with the memory management concerns of serializing functions. While not strictly necessary, passing functions as component properties (e.g., onPress of a Button component) is often very useful, and so all libraries in this project assume the use of this rpc library in order to provide seamless handling of function component properties.
  • @remote-ui/web-workers makes it easy to use remote-ui to offload application code to a web worker. It does so through small runtime utilities and a collection of build tool integrations that allow you to author web workers with all the comfort of your existing tools and libraries.
The main API of remote-ui, provided by @remote-ui/core, is small, and similar to the DOM. This makes it well-suited as a target for other libraries, which can provide different tradeoffs of performance and developer ergonomics for code executing in the remote environment. The “host” side is also meant to be flexible, allowing you to map the simple “tree of components” structure from the remote environment into many different UI libraries on the main thread. This repo provides bindings to the host and/ or remote parts of remote-ui for a few popular libraries:
Legend:
Host 🌎: provides a host layer that can map remote-ui components to UI components
Remote 🛰️: provides a way to manage the tree of remote-ui components in the remote context
LibraryHost 🌎Remote 🛰️
@remote-ui/mini-react❌✅
@remote-ui/react✅✅
@remote-ui/vue✅✅
@remote-ui/dom✅❌
@remote-ui/htm❌✅
Finally, this repo also contains a number of utility libraries for working with remote-ui:
Learn more
We’ve prepared some guides for getting the most out of remote-ui:
Examples
We have created an example project, bootstrapped with Create React App, that shows how you can incorporate the different parts of remote-ui into a simple React codebase.
Want to learn even more? Read through the comprehensive example, a written guide that documents a fully-featured implementation of remote-ui across both the host (browser) and remote (web worker) environments.
Want to contribute?
Check out our contributing guide.
License
MIT © Shopify, see LICENSE.md for details.
Shopify
About
No description, website, or topics provided.
Resources
Readme
License
Code of conduct
Code of conduct
Contributing
Contributing
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
GitHub - instantcommerce/remote-ui · GitHub
Skip to content
BranchesTags
Repository files navigation
remote-ui
remote-ui allows you to create custom component APIs in JavaScript that can be used to render UI from a context other than the UI thread, like a web worker. This technique can be a powerful performance optimization by isolating application code on a background thread, leaving only the platform-native components on the UI thread. It can also be used as a way for third party code to generate UI in a safe, dynamic, and highly-performant way, without relying on iframes.
Navigating remote-ui
remote-ui is a collection of projects that work together to provide the capability of remotely rendering UI:
  • @remote-ui/core gives you the tools to create a “remote root”: a root for a tree of component nodes that can communicate operations (adding or removing children, changing properties of components) through a tiny wire format suitable for postMessage communication. This remote root can enforce validations, like restricting the available components, their children, and their allowed properties. Finally, this library offers some helpful utilities for implementing “hosts” of a remote root; that is, code running on the UI thread that can transform the communication format of a remote root into platform-native components.
  • @remote-ui/rpc is a small wrapper for postMessage-like interfaces. Its key feature is flexible support for serializing functions (implemented via message passing), with additional helper functions to help with the memory management concerns of serializing functions. While not strictly necessary, passing functions as component properties (e.g., onPress of a Button component) is often very useful, and so all libraries in this project assume the use of this rpc library in order to provide seamless handling of function component properties.
  • @remote-ui/web-workers makes it easy to use remote-ui to offload application code to a web worker. It does so through small runtime utilities and a collection of build tool integrations that allow you to author web workers with all the comfort of your existing tools and libraries.
The main API of remote-ui, provided by @remote-ui/core, is small, and similar to the DOM. This makes it well-suited as a target for other libraries, which can provide different tradeoffs of performance and developer ergonomics for code executing in the remote environment. The “host” side is also meant to be flexible, allowing you to map the simple “tree of components” structure from the remote environment into many different UI libraries on the main thread. This repo provides bindings to the host and/ or remote parts of remote-ui for a few popular libraries:
Legend:
Host 🌎: provides a host layer that can map remote-ui components to UI components
Remote 🛰️: provides a way to manage the tree of remote-ui components in the remote context
LibraryHost 🌎Remote 🛰️
@remote-ui/mini-react❌✅
@remote-ui/react✅✅
@remote-ui/vue✅✅
@remote-ui/dom✅❌
@remote-ui/htm❌✅
Finally, this repo also contains a number of utility libraries for working with remote-ui:
Learn more
We’ve prepared some guides for getting the most out of remote-ui:
Examples
We have created an example project, bootstrapped with Create React App, that shows how you can incorporate the different parts of remote-ui into a simple React codebase.
Want to learn even more? Read through the comprehensive example, a written guide that documents a fully-featured implementation of remote-ui across both the host (browser) and remote (web worker) environments.
Want to contribute?
Check out our contributing guide.
License
MIT © Shopify, see LICENSE.md for details.
Shopify
About
No description, website, or topics provided.
Resources
Readme
License
Code of conduct
Code of conduct
Contributing
Contributing
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - instantcommerce/remote-ui · GitHub
Skip to content
BranchesTags
Repository files navigation
remote-ui
remote-ui allows you to create custom component APIs in JavaScript that can be used to render UI from a context other than the UI thread, like a web worker. This technique can be a powerful performance optimization by isolating application code on a background thread, leaving only the platform-native components on the UI thread. It can also be used as a way for third party code to generate UI in a safe, dynamic, and highly-performant way, without relying on iframes.
Navigating remote-ui
remote-ui is a collection of projects that work together to provide the capability of remotely rendering UI:
  • @remote-ui/core gives you the tools to create a “remote root”: a root for a tree of component nodes that can communicate operations (adding or removing children, changing properties of components) through a tiny wire format suitable for postMessage communication. This remote root can enforce validations, like restricting the available components, their children, and their allowed properties. Finally, this library offers some helpful utilities for implementing “hosts” of a remote root; that is, code running on the UI thread that can transform the communication format of a remote root into platform-native components.
  • @remote-ui/rpc is a small wrapper for postMessage-like interfaces. Its key feature is flexible support for serializing functions (implemented via message passing), with additional helper functions to help with the memory management concerns of serializing functions. While not strictly necessary, passing functions as component properties (e.g., onPress of a Button component) is often very useful, and so all libraries in this project assume the use of this rpc library in order to provide seamless handling of function component properties.
  • @remote-ui/web-workers makes it easy to use remote-ui to offload application code to a web worker. It does so through small runtime utilities and a collection of build tool integrations that allow you to author web workers with all the comfort of your existing tools and libraries.
The main API of remote-ui, provided by @remote-ui/core, is small, and similar to the DOM. This makes it well-suited as a target for other libraries, which can provide different tradeoffs of performance and developer ergonomics for code executing in the remote environment. The “host” side is also meant to be flexible, allowing you to map the simple “tree of components” structure from the remote environment into many different UI libraries on the main thread. This repo provides bindings to the host and/ or remote parts of remote-ui for a few popular libraries:
Legend:
Host 🌎: provides a host layer that can map remote-ui components to UI components
Remote 🛰️: provides a way to manage the tree of remote-ui components in the remote context
LibraryHost 🌎Remote 🛰️
@remote-ui/mini-react❌✅
@remote-ui/react✅✅
@remote-ui/vue✅✅
@remote-ui/dom✅❌
@remote-ui/htm❌✅
Finally, this repo also contains a number of utility libraries for working with remote-ui:
Learn more
We’ve prepared some guides for getting the most out of remote-ui:
Examples
We have created an example project, bootstrapped with Create React App, that shows how you can incorporate the different parts of remote-ui into a simple React codebase.
Want to learn even more? Read through the comprehensive example, a written guide that documents a fully-featured implementation of remote-ui across both the host (browser) and remote (web worker) environments.
Want to contribute?
Check out our contributing guide.
License
MIT © Shopify, see LICENSE.md for details.
Shopify
About
No description, website, or topics provided.
Resources
Readme
License
Code of conduct
Code of conduct
Contributing
Contributing
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - instantcommerce/remote-ui · GitHub
Skip to content
BranchesTags
Repository files navigation
remote-ui
remote-ui allows you to create custom component APIs in JavaScript that can be used to render UI from a context other than the UI thread, like a web worker. This technique can be a powerful performance optimization by isolating application code on a background thread, leaving only the platform-native components on the UI thread. It can also be used as a way for third party code to generate UI in a safe, dynamic, and highly-performant way, without relying on iframes.
Navigating remote-ui
remote-ui is a collection of projects that work together to provide the capability of remotely rendering UI:
  • @remote-ui/core gives you the tools to create a “remote root”: a root for a tree of component nodes that can communicate operations (adding or removing children, changing properties of components) through a tiny wire format suitable for postMessage communication. This remote root can enforce validations, like restricting the available components, their children, and their allowed properties. Finally, this library offers some helpful utilities for implementing “hosts” of a remote root; that is, code running on the UI thread that can transform the communication format of a remote root into platform-native components.
  • @remote-ui/rpc is a small wrapper for postMessage-like interfaces. Its key feature is flexible support for serializing functions (implemented via message passing), with additional helper functions to help with the memory management concerns of serializing functions. While not strictly necessary, passing functions as component properties (e.g., onPress of a Button component) is often very useful, and so all libraries in this project assume the use of this rpc library in order to provide seamless handling of function component properties.
  • @remote-ui/web-workers makes it easy to use remote-ui to offload application code to a web worker. It does so through small runtime utilities and a collection of build tool integrations that allow you to author web workers with all the comfort of your existing tools and libraries.
The main API of remote-ui, provided by @remote-ui/core, is small, and similar to the DOM. This makes it well-suited as a target for other libraries, which can provide different tradeoffs of performance and developer ergonomics for code executing in the remote environment. The “host” side is also meant to be flexible, allowing you to map the simple “tree of components” structure from the remote environment into many different UI libraries on the main thread. This repo provides bindings to the host and/ or remote parts of remote-ui for a few popular libraries:
Legend:
Host 🌎: provides a host layer that can map remote-ui components to UI components
Remote 🛰️: provides a way to manage the tree of remote-ui components in the remote context
LibraryHost 🌎Remote 🛰️
@remote-ui/mini-react❌✅
@remote-ui/react✅✅
@remote-ui/vue✅✅
@remote-ui/dom✅❌
@remote-ui/htm❌✅
Finally, this repo also contains a number of utility libraries for working with remote-ui:
Learn more
We’ve prepared some guides for getting the most out of remote-ui:
Examples
We have created an example project, bootstrapped with Create React App, that shows how you can incorporate the different parts of remote-ui into a simple React codebase.
Want to learn even more? Read through the comprehensive example, a written guide that documents a fully-featured implementation of remote-ui across both the host (browser) and remote (web worker) environments.
Want to contribute?
Check out our contributing guide.
License
MIT © Shopify, see LICENSE.md for details.
Shopify
About
No description, website, or topics provided.
Resources
Readme
License
Code of conduct
Code of conduct
Contributing
Contributing
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
GitHub - instantcommerce/remote-ui · GitHub
Skip to content
BranchesTags
Repository files navigation
remote-ui
remote-ui allows you to create custom component APIs in JavaScript that can be used to render UI from a context other than the UI thread, like a web worker. This technique can be a powerful performance optimization by isolating application code on a background thread, leaving only the platform-native components on the UI thread. It can also be used as a way for third party code to generate UI in a safe, dynamic, and highly-performant way, without relying on iframes.
Navigating remote-ui
remote-ui is a collection of projects that work together to provide the capability of remotely rendering UI:
  • @remote-ui/core gives you the tools to create a “remote root”: a root for a tree of component nodes that can communicate operations (adding or removing children, changing properties of components) through a tiny wire format suitable for postMessage communication. This remote root can enforce validations, like restricting the available components, their children, and their allowed properties. Finally, this library offers some helpful utilities for implementing “hosts” of a remote root; that is, code running on the UI thread that can transform the communication format of a remote root into platform-native components.
  • @remote-ui/rpc is a small wrapper for postMessage-like interfaces. Its key feature is flexible support for serializing functions (implemented via message passing), with additional helper functions to help with the memory management concerns of serializing functions. While not strictly necessary, passing functions as component properties (e.g., onPress of a Button component) is often very useful, and so all libraries in this project assume the use of this rpc library in order to provide seamless handling of function component properties.
  • @remote-ui/web-workers makes it easy to use remote-ui to offload application code to a web worker. It does so through small runtime utilities and a collection of build tool integrations that allow you to author web workers with all the comfort of your existing tools and libraries.
The main API of remote-ui, provided by @remote-ui/core, is small, and similar to the DOM. This makes it well-suited as a target for other libraries, which can provide different tradeoffs of performance and developer ergonomics for code executing in the remote environment. The “host” side is also meant to be flexible, allowing you to map the simple “tree of components” structure from the remote environment into many different UI libraries on the main thread. This repo provides bindings to the host and/ or remote parts of remote-ui for a few popular libraries:
Legend:
Host 🌎: provides a host layer that can map remote-ui components to UI components
Remote 🛰️: provides a way to manage the tree of remote-ui components in the remote context
LibraryHost 🌎Remote 🛰️
@remote-ui/mini-react❌✅
@remote-ui/react✅✅
@remote-ui/vue✅✅
@remote-ui/dom✅❌
@remote-ui/htm❌✅
Finally, this repo also contains a number of utility libraries for working with remote-ui:
Learn more
We’ve prepared some guides for getting the most out of remote-ui:
Examples
We have created an example project, bootstrapped with Create React App, that shows how you can incorporate the different parts of remote-ui into a simple React codebase.
Want to learn even more? Read through the comprehensive example, a written guide that documents a fully-featured implementation of remote-ui across both the host (browser) and remote (web worker) environments.
Want to contribute?
Check out our contributing guide.
License
MIT © Shopify, see LICENSE.md for details.
Shopify
About
No description, website, or topics provided.
Resources
Readme
License
Code of conduct
Code of conduct
Contributing
Contributing
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages