@chakra-ui/react-env
Advanced tools
Comparing version
interface Environment { | ||
window: Window; | ||
document: Document; | ||
getWindow: () => Window; | ||
getDocument: () => Document; | ||
} | ||
declare function useEnvironment(): Environment; | ||
declare function useEnvironment({ defer }?: { | ||
defer?: boolean; | ||
}): Environment; | ||
interface EnvironmentProviderProps { | ||
children: React.ReactNode; | ||
disabled?: boolean; | ||
environment?: Environment; | ||
@@ -9,0 +12,0 @@ } |
158
dist/env.js
@@ -27,140 +27,44 @@ "use strict"; | ||
module.exports = __toCommonJS(env_exports); | ||
var import_react_use_safe_layout_effect = require("@chakra-ui/react-use-safe-layout-effect"); | ||
var import_react = require("react"); | ||
// src/mock-document.ts | ||
var doc = { | ||
body: { | ||
classList: { | ||
add() { | ||
}, | ||
remove() { | ||
} | ||
} | ||
var import_jsx_runtime = require("react/jsx-runtime"); | ||
var EnvironmentContext = (0, import_react.createContext)({ | ||
getDocument() { | ||
return document; | ||
}, | ||
addEventListener() { | ||
}, | ||
removeEventListener() { | ||
}, | ||
activeElement: { | ||
blur() { | ||
}, | ||
nodeName: "" | ||
}, | ||
querySelector() { | ||
return null; | ||
}, | ||
querySelectorAll() { | ||
return []; | ||
}, | ||
getElementById() { | ||
return null; | ||
}, | ||
createEvent() { | ||
return { | ||
initEvent() { | ||
} | ||
}; | ||
}, | ||
createElement() { | ||
return { | ||
children: [], | ||
childNodes: [], | ||
style: {}, | ||
setAttribute() { | ||
}, | ||
getElementsByTagName() { | ||
return []; | ||
} | ||
}; | ||
getWindow() { | ||
return window; | ||
} | ||
}; | ||
var ssrDocument = doc; | ||
// src/mock-window.ts | ||
var noop = () => { | ||
}; | ||
var win = { | ||
document: ssrDocument, | ||
navigator: { | ||
userAgent: "" | ||
}, | ||
CustomEvent: function CustomEvent() { | ||
return this; | ||
}, | ||
addEventListener: noop, | ||
removeEventListener: noop, | ||
getComputedStyle() { | ||
return { | ||
getPropertyValue() { | ||
return ""; | ||
} | ||
}; | ||
}, | ||
matchMedia() { | ||
return { | ||
matches: false, | ||
addListener: noop, | ||
removeListener: noop | ||
}; | ||
}, | ||
requestAnimationFrame(callback) { | ||
if (typeof setTimeout === "undefined") { | ||
callback(); | ||
return null; | ||
} | ||
return setTimeout(callback, 0); | ||
}, | ||
cancelAnimationFrame(id) { | ||
if (typeof setTimeout === "undefined") | ||
}); | ||
EnvironmentContext.displayName = "EnvironmentContext"; | ||
function useEnvironment({ defer } = {}) { | ||
const [, forceUpdate] = (0, import_react.useReducer)((c) => c + 1, 0); | ||
(0, import_react_use_safe_layout_effect.useSafeLayoutEffect)(() => { | ||
if (!defer) | ||
return; | ||
clearTimeout(id); | ||
}, | ||
setTimeout: () => 0, | ||
clearTimeout: noop, | ||
setInterval: () => 0, | ||
clearInterval: noop | ||
}; | ||
var ssrWindow = win; | ||
// src/env.tsx | ||
var import_jsx_runtime = require("react/jsx-runtime"); | ||
var mockEnv = { | ||
window: ssrWindow, | ||
document: ssrDocument | ||
}; | ||
var defaultEnv = typeof window !== "undefined" ? { window, document } : mockEnv; | ||
var EnvironmentContext = (0, import_react.createContext)(defaultEnv); | ||
EnvironmentContext.displayName = "EnvironmentContext"; | ||
function useEnvironment() { | ||
forceUpdate(); | ||
}, [defer]); | ||
return (0, import_react.useContext)(EnvironmentContext); | ||
} | ||
function EnvironmentProvider(props) { | ||
const { children, environment: environmentProp } = props; | ||
const [node, setNode] = (0, import_react.useState)(null); | ||
const [mounted, setMounted] = (0, import_react.useState)(false); | ||
(0, import_react.useEffect)(() => setMounted(true), []); | ||
const { children, environment: environmentProp, disabled } = props; | ||
const ref = (0, import_react.useRef)(null); | ||
const context = (0, import_react.useMemo)(() => { | ||
if (environmentProp) { | ||
if (environmentProp) | ||
return environmentProp; | ||
} | ||
const doc2 = node == null ? void 0 : node.ownerDocument; | ||
const win2 = node == null ? void 0 : node.ownerDocument.defaultView; | ||
const env = doc2 ? { document: doc2, window: win2 } : defaultEnv; | ||
return env; | ||
}, [node, environmentProp]); | ||
return { | ||
getDocument: () => { | ||
var _a, _b; | ||
return (_b = (_a = ref.current) == null ? void 0 : _a.ownerDocument) != null ? _b : document; | ||
}, | ||
getWindow: () => { | ||
var _a, _b; | ||
return (_b = (_a = ref.current) == null ? void 0 : _a.ownerDocument.defaultView) != null ? _b : window; | ||
} | ||
}; | ||
}, [environmentProp]); | ||
const showSpan = !disabled || !environmentProp; | ||
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(EnvironmentContext.Provider, { value: context, children: [ | ||
children, | ||
!environmentProp && mounted && /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
"span", | ||
{ | ||
id: "__chakra_env", | ||
hidden: true, | ||
ref: (el) => { | ||
(0, import_react.startTransition)(() => { | ||
if (el) | ||
setNode(el); | ||
}); | ||
} | ||
} | ||
) | ||
showSpan && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: "__chakra_env", hidden: true, ref }) | ||
] }); | ||
@@ -167,0 +71,0 @@ } |
@@ -29,140 +29,44 @@ "use strict"; | ||
// src/env.tsx | ||
var import_react_use_safe_layout_effect = require("@chakra-ui/react-use-safe-layout-effect"); | ||
var import_react = require("react"); | ||
// src/mock-document.ts | ||
var doc = { | ||
body: { | ||
classList: { | ||
add() { | ||
}, | ||
remove() { | ||
} | ||
} | ||
var import_jsx_runtime = require("react/jsx-runtime"); | ||
var EnvironmentContext = (0, import_react.createContext)({ | ||
getDocument() { | ||
return document; | ||
}, | ||
addEventListener() { | ||
}, | ||
removeEventListener() { | ||
}, | ||
activeElement: { | ||
blur() { | ||
}, | ||
nodeName: "" | ||
}, | ||
querySelector() { | ||
return null; | ||
}, | ||
querySelectorAll() { | ||
return []; | ||
}, | ||
getElementById() { | ||
return null; | ||
}, | ||
createEvent() { | ||
return { | ||
initEvent() { | ||
} | ||
}; | ||
}, | ||
createElement() { | ||
return { | ||
children: [], | ||
childNodes: [], | ||
style: {}, | ||
setAttribute() { | ||
}, | ||
getElementsByTagName() { | ||
return []; | ||
} | ||
}; | ||
getWindow() { | ||
return window; | ||
} | ||
}; | ||
var ssrDocument = doc; | ||
// src/mock-window.ts | ||
var noop = () => { | ||
}; | ||
var win = { | ||
document: ssrDocument, | ||
navigator: { | ||
userAgent: "" | ||
}, | ||
CustomEvent: function CustomEvent() { | ||
return this; | ||
}, | ||
addEventListener: noop, | ||
removeEventListener: noop, | ||
getComputedStyle() { | ||
return { | ||
getPropertyValue() { | ||
return ""; | ||
} | ||
}; | ||
}, | ||
matchMedia() { | ||
return { | ||
matches: false, | ||
addListener: noop, | ||
removeListener: noop | ||
}; | ||
}, | ||
requestAnimationFrame(callback) { | ||
if (typeof setTimeout === "undefined") { | ||
callback(); | ||
return null; | ||
} | ||
return setTimeout(callback, 0); | ||
}, | ||
cancelAnimationFrame(id) { | ||
if (typeof setTimeout === "undefined") | ||
}); | ||
EnvironmentContext.displayName = "EnvironmentContext"; | ||
function useEnvironment({ defer } = {}) { | ||
const [, forceUpdate] = (0, import_react.useReducer)((c) => c + 1, 0); | ||
(0, import_react_use_safe_layout_effect.useSafeLayoutEffect)(() => { | ||
if (!defer) | ||
return; | ||
clearTimeout(id); | ||
}, | ||
setTimeout: () => 0, | ||
clearTimeout: noop, | ||
setInterval: () => 0, | ||
clearInterval: noop | ||
}; | ||
var ssrWindow = win; | ||
// src/env.tsx | ||
var import_jsx_runtime = require("react/jsx-runtime"); | ||
var mockEnv = { | ||
window: ssrWindow, | ||
document: ssrDocument | ||
}; | ||
var defaultEnv = typeof window !== "undefined" ? { window, document } : mockEnv; | ||
var EnvironmentContext = (0, import_react.createContext)(defaultEnv); | ||
EnvironmentContext.displayName = "EnvironmentContext"; | ||
function useEnvironment() { | ||
forceUpdate(); | ||
}, [defer]); | ||
return (0, import_react.useContext)(EnvironmentContext); | ||
} | ||
function EnvironmentProvider(props) { | ||
const { children, environment: environmentProp } = props; | ||
const [node, setNode] = (0, import_react.useState)(null); | ||
const [mounted, setMounted] = (0, import_react.useState)(false); | ||
(0, import_react.useEffect)(() => setMounted(true), []); | ||
const { children, environment: environmentProp, disabled } = props; | ||
const ref = (0, import_react.useRef)(null); | ||
const context = (0, import_react.useMemo)(() => { | ||
if (environmentProp) { | ||
if (environmentProp) | ||
return environmentProp; | ||
} | ||
const doc2 = node == null ? void 0 : node.ownerDocument; | ||
const win2 = node == null ? void 0 : node.ownerDocument.defaultView; | ||
const env = doc2 ? { document: doc2, window: win2 } : defaultEnv; | ||
return env; | ||
}, [node, environmentProp]); | ||
return { | ||
getDocument: () => { | ||
var _a, _b; | ||
return (_b = (_a = ref.current) == null ? void 0 : _a.ownerDocument) != null ? _b : document; | ||
}, | ||
getWindow: () => { | ||
var _a, _b; | ||
return (_b = (_a = ref.current) == null ? void 0 : _a.ownerDocument.defaultView) != null ? _b : window; | ||
} | ||
}; | ||
}, [environmentProp]); | ||
const showSpan = !disabled || !environmentProp; | ||
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(EnvironmentContext.Provider, { value: context, children: [ | ||
children, | ||
!environmentProp && mounted && /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
"span", | ||
{ | ||
id: "__chakra_env", | ||
hidden: true, | ||
ref: (el) => { | ||
(0, import_react.startTransition)(() => { | ||
if (el) | ||
setNode(el); | ||
}); | ||
} | ||
} | ||
) | ||
showSpan && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: "__chakra_env", hidden: true, ref }) | ||
] }); | ||
@@ -169,0 +73,0 @@ } |
{ | ||
"name": "@chakra-ui/react-env", | ||
"version": "0.0.0-dev-20230112154520", | ||
"version": "0.0.0-dev-20230113120517", | ||
"description": "Component and hook for handling window and document object in iframe or ssr environment", | ||
@@ -32,2 +32,5 @@ "keywords": [ | ||
}, | ||
"dependencies": { | ||
"@chakra-ui/react-use-safe-layout-effect": "2.0.5" | ||
}, | ||
"peerDependencies": { | ||
@@ -34,0 +37,0 @@ "react": ">=18" |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
12446
-42.41%2
100%10
-44.44%235
-68.62%1
Infinity%+ Added