🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
@chakra-ui/react-env
Advanced tools
@chakra-ui/react-env - npm Package Compare versions
Comparing version 0.0.0-dev-20230112154520 to 0.0.0-dev-20230113120517
| 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
New alerts
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
Worsened metrics
- Total package byte prevSize
12446
-42.41%- Dependency count
2
100%- Number of package files
10
-44.44%- Lines of code
235
-68.62%- Number of medium supply chain risk alerts
1
Infinity%Dependency changes
+ Added
@chakra-ui/react-use-safe-layout-effect@2.0.5(transitive)