Last active
October 13, 2023 11:08
-
-
Save Rendez/1dd55882e9b850dd3990feefc9d6e177 to your computer and use it in GitHub Desktop.
Rendering Downshift in a ShadowRoot
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 check is borrowed from react | |
const isProxySupported = | |
typeof Proxy === 'function' && | |
// https://github.com/facebook/react/issues/12011 | |
!Object.isSealed(new Proxy({}, {})); | |
function createProxyEnvironment(shadowRoot) { | |
const doc = shadowRoot.ownerDocument; | |
const properties = { | |
document: doc, | |
addEventListener: doc.addEventListener.bind(shadowRoot), | |
removeEventListener: doc.removeEventListener.bind(shadowRoot), | |
}; | |
// check if Proxy is supported because of IE and older Safari versions | |
if (isProxySupported) { | |
return new Proxy(shadowRoot, { | |
get: (_, prop) => properties[prop], | |
}) | |
} | |
// fallback for es5-compatible environments (can be removed if it's unnecessary) | |
return Object.create(shadowRoot, Object.keys(properties).reduce((res, key) => { | |
res[key] = { | |
get: () => properties[key], | |
}; | |
return res; | |
}, {})); | |
} |
Hi! I am preparing a PR to address the updates for environment in downshift v8. downshift-js/downshift#1463
Looking at all the changes and usages for the environment prop, the propType should be more like this:
environment: PropTypes.shape({
addEventListener: PropTypes.func.isRequired,
removeEventListener: PropTypes.func.isRequired,
document: PropTypes.shape({
createElement: PropTypes.func.isRequired,
getElementById: PropTypes.func.isRequired,
activeElement: PropTypes.any.isRequired,
body: PropTypes.any.isRequired,
}).isRequired,
Node: PropTypes.func.isRequired,
}),
Can you review the changes and help us fix this properly in v8? Thanks!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Looks like we need to simply add field
Node
toproperties
// this check is borrowed from react const isProxySupported = typeof Proxy === 'function' && // https://github.com/facebook/react/issues/12011 !Object.isSealed(new Proxy({}, {})); function createProxyEnvironment(shadowRoot) { const doc = shadowRoot.ownerDocument; const properties = { document: doc, addEventListener: doc.addEventListener.bind(shadowRoot), removeEventListener: doc.removeEventListener.bind(shadowRoot), + Node }; // check if Proxy is supported because of IE and older Safari versions if (isProxySupported) { return new Proxy(shadowRoot, { get: (_, prop) => properties[prop], }) } // fallback for es5-compatible environments (can be removed if it's unnecessary) return Object.create(shadowRoot, Object.keys(properties).reduce((res, key) => { res[key] = { get: () => properties[key], }; return res; }, {})); }