update(docs): fix view height

docs/app.vue

@@ -1,6 +1,6 @@
 <template>
   <Header />
-  <div class="flex h-full">
+  <div id="app" class="flex">
     <Sidebar />
     <div id="vue-flow-docs" class="flex-1">
       <NuxtPage />
@@ -10,4 +10,8 @@
 <style>
 @import 'assets/index.css';
 @import 'node_modules/@braks/vue-flow/dist/style.css';
+
+#app {
+  height: calc(100% - 92px);
+}
 </style>

docs/assets/index.css

@@ -13,9 +13,10 @@ html,
 body,
 #root,
 #__nuxt {
+  height: 100vh;
   margin: 0;
-  height: 100%;
   color: #111;
+  overflow: hidden;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;

docs/components/Flow.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Flow, { Background, Connection, Elements, Edge, removeElements, addEdge } from '@braks/vue-flow'
+import { Flow, Background, Connection, Elements, Edge, removeElements, addEdge } from '@braks/vue-flow'
 const initialElements: Elements = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, class: 'light' },
   { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, class: 'light' },

docs/components/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="flex items-center py-4 px-8 text-white">
+  <header class="flex items-center py-4 px-8 text-white h-[92px]">
     <div class="flex flex-col">
       <a class="logo text-xl" href="https://github.com/bcakmakoglu/vue-flow"> Vue Flow </a>
       <span class="text-xs text-gray-800 mt-2"

docs/nuxt.config.ts

@@ -5,7 +5,8 @@ export default defineNuxtConfig({
     title: 'Vue Flow',
     description: 'Vue Flow Documentation',
   },
-  target: 'client',
-  ssr: false,
+  router: {
+    base: '/',
+  },
   buildModules: ['nuxt-windicss'],
 })

docs/package.json

@@ -11,6 +11,7 @@
     "localforage": "^1.10.0"
   },
   "devDependencies": {
+    "@nuxt/nitro": "^0.10.0",
     "@types/dagre": "^0.7.46",
     "nuxt-windicss": "^2.0.4",
     "nuxt3": "latest"

docs/pages/examples/basic.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   MiniMap,
   Controls,
   Background,
@@ -26,12 +27,9 @@ const elements = ref<Elements>([
 ])
 const rfInstance = ref<FlowInstance | null>(null)
 const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
-const onConnect = (params: Edge | Connection) => {
-  elements.value = addEdge(params, elements.value)
-  console.log(params)
-}
+const onConnect = (params: Edge | Connection) => (elements.value = addEdge(params, elements.value))
 const onLoad = (flowInstance: FlowInstance) => {
-  flowInstance.fitView({ padding: 0.1 })
+  flowInstance?.fitView({ padding: 0.1 })
   rfInstance.value = flowInstance
 }
 

docs/pages/examples/button-edge.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   addEdge,
   Background,
   Connection,

docs/pages/examples/custom-connectionline.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Flow, { removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '@braks/vue-flow'
+import { Flow, removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '@braks/vue-flow'
 import CustomConnectionLine from '../../components/CustomConnectionLine.vue'
 
 const elements = ref<Elements>([

docs/pages/examples/custom-node.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   isEdge,
   removeElements,
   addEdge,

docs/pages/examples/drag-n-drop.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   addEdge,
   removeElements,
   Controls,

docs/pages/examples/edge-types.vue

@@ -2,7 +2,8 @@
 /**
  * Example for checking the different edge types and source and target positions
  */
-import Flow, {
+import {
+  Flow,
   removeElements,
   addEdge,
   MiniMap,

docs/pages/examples/edges.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   MiniMap,
   Controls,
   Background,

docs/pages/examples/empty.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import Flow, {
+import {
+  Flow,
   MiniMap,
   Controls,
   Background,

docs/pages/examples/hidden.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Flow, { MiniMap, Controls, Connection, Edge, Elements, addEdge } from '@braks/vue-flow'
+import { Flow, MiniMap, Controls, Connection, Edge, Elements, addEdge } from '@braks/vue-flow'
 
 const initialElements: Elements = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },

docs/pages/examples/index.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import Flow, {
+import {
+  Flow,
   removeElements,
   addEdge,
   MiniMap,

docs/pages/examples/interaction.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   addEdge,
   MiniMap,
   Controls,

docs/pages/examples/layouting.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import dagre from 'dagre'
-import Flow, {
+import {
+  Flow,
   Controls,
   addEdge,
   ConnectionMode,

docs/pages/examples/node-type-change.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import Flow, { addEdge, Connection, Edge, Elements, isEdge, FlowInstance, Position } from '@braks/vue-flow'
+import { Flow, addEdge, Connection, Edge, Elements, isEdge, FlowInstance, Position } from '@braks/vue-flow'
 
 const initialElements: Elements = [
   {

docs/pages/examples/node-types-id-change.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import Flow, { Elements, Position, NodeType, Connection, Edge, addEdge } from '@braks/vue-flow'
+import { Flow, Elements, Position, NodeType, Connection, Edge, addEdge } from '@braks/vue-flow'
 import NodeA from '../../components/NodeA.vue'
 import NodeB from '../../components/NodeB.vue'
 

docs/pages/examples/provider.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   addEdge,
   removeElements,
   Controls,

docs/pages/examples/save-restore.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Flow, { addEdge, Connection, Node, Edge, Elements, FlowInstance, removeElements } from '@braks/vue-flow'
+import { Flow, addEdge, Connection, Node, Edge, Elements, FlowInstance, removeElements } from '@braks/vue-flow'
 import Controls from '../../components/SaveControls.vue'
 
 const initialElements: Elements = [

docs/pages/examples/stress.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import Flow, {
+import {
+  Flow,
   removeElements,
   addEdge,
   MiniMap,

docs/pages/examples/switch.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Flow, { removeElements, addEdge, Node, FlowElement, Elements, Connection, Edge } from '@braks/vue-flow'
+import { Flow, removeElements, addEdge, Node, FlowElement, Elements, Connection, Edge } from '@braks/vue-flow'
 
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node)
 const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)

docs/pages/examples/unidirectional.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   NodeType,
   addEdge,
   useZoomPanHelper,

docs/pages/examples/updatable-edge.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   Controls,
   updateEdge,
   addEdge,

docs/pages/examples/update-node-internals.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import Flow, {
+import {
+  Flow,
   NodeType,
   addEdge,
   useZoomPanHelper,

docs/pages/examples/update-node.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Flow, { Elements } from '@braks/vue-flow'
+import { Flow, Elements } from '@braks/vue-flow'
 
 const initialElements: Elements = [
   { id: '1', data: { label: '-' }, position: { x: 100, y: 100 } },

docs/pages/examples/validation.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   addEdge,
   Handle,
   Connection,

docs/pages/examples/zoom-pan-helper.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   removeElements,
   addEdge,
   Background,

docs/yarn.lock

@@ -369,6 +369,11 @@
     unctx "^1.0.2"
     untyped "^0.2.9"
 
+"@nuxt/nitro@^0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@nuxt/nitro/-/nitro-0.10.0.tgz#e2157be377f6131ec72484153d56908da8704094"
+  integrity sha512-3ffdZMD0WK7UNgrkBhOyPr3fyOfmy2nPMxDOaX6eUCamr5NuY7cHQhWnum/BwSm1vIOm4b9/rnd/cgYcg9qiag==
+
 "@nuxt/nitro@npm:@nuxt/nitro-edge@3.0.0-27249044.7d918e1":
   version "3.0.0-27249044.7d918e1"
   resolved "https://registry.yarnpkg.com/@nuxt/nitro-edge/-/nitro-edge-3.0.0-27249044.7d918e1.tgz#340dc19a58d295a0009add91ca2467a2598d8072"

package.json

@@ -40,7 +40,8 @@
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0",
     "fast-deep-equal": "^3.1.3",
-    "pinia": "^2.0.0-rc.14"
+    "pinia": "^2.0.0-rc.14",
+    "ssr-window": "^4.0.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.9.0",

src/additional-components/MiniMap/MiniMap.vue

@@ -2,7 +2,7 @@
 import { HTMLAttributes } from 'vue'
 import { getBoundsofRects, getRectOfNodes } from '../../utils'
 import { Node } from '../../types'
-import { useStore } from '../../composables'
+import { useStore, useWindow } from '../../composables'
 import MiniMapNode from './MiniMapNode.vue'
 
 type StringFunc = (node: Node) => string
@@ -27,6 +27,7 @@ const props = withDefaults(defineProps<MiniMapProps>(), {
 })
 
 const attrs: any = useAttrs()
+const window = useWindow()
 
 const defaultWidth = 200
 const defaultHeight = 150
@@ -41,8 +42,7 @@ const nodeStrokeColorFunc: StringFunc =
 
 const nodeClassNameFunc = props.nodeClassName instanceof Function ? props.nodeClassName : () => props.nodeClassName as StringFunc
 
-const shapeRendering: ShapeRendering =
-  (window && typeof window === 'undefined') || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
+const shapeRendering: ShapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
 
 const viewBox = computed(() => {
   const bb = getRectOfNodes(store.nodes)

src/auto-imports.d.ts

@@ -17,8 +17,11 @@ declare global {
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
+  const effectScope: typeof import('vue')['effectScope']
+  const EffectScope: typeof import('vue')['EffectScope']
   const extendRef: typeof import('@vueuse/core')['extendRef']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
   const h: typeof import('vue')['h']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
@@ -39,6 +42,7 @@ declare global {
   const onMounted: typeof import('vue')['onMounted']
   const onRenderTracked: typeof import('vue')['onRenderTracked']
   const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
   const onServerPrefetch: typeof import('vue')['onServerPrefetch']
   const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
   const onUnmounted: typeof import('vue')['onUnmounted']

src/composables/index.ts

@@ -3,6 +3,6 @@ export { default as useHooks } from './useHooks'
 export * from './useHooks'
 export { default as useKeyPress } from './useKeyPress'
 export { default as useUpdateNodeInternals } from './useUpdateNodeInternals'
-export { default as useZoom } from './useZoom'
 export { default as useZoomPanHelper } from './useZoomPanHelper'
 export { default as useStore } from './useStore'
+export { default as useWindow } from './useWindow'

src/composables/useKeyPress.ts

@@ -1,9 +1,11 @@
 import { Ref } from 'vue'
 import { onKeyDown, onKeyPressed, onKeyUp } from '@vueuse/core'
 import { KeyCode } from '../types'
+import useWindow from './useWindow'
 
 // todo cancel keypress for input dom nodes
 export default (keyCode: KeyCode, onChange?: (keyPressed: boolean) => void): Ref<boolean> => {
+  const window = useWindow()
   const isPressed = controlledRef<boolean>(false, {
     onBeforeChange(val, oldVal) {
       if (val === oldVal) return false
@@ -37,11 +39,9 @@ export default (keyCode: KeyCode, onChange?: (keyPressed: boolean) => void): Ref
     },
   )
 
-  if (window && typeof window !== 'undefined') {
-    useEventListener(window, 'blur', () => {
-      isPressed.value = false
-    })
-  }
+  useEventListener(window, 'blur', () => {
+    isPressed.value = false
+  })
 
   if (onChange && typeof onChange === 'function') onChange(isPressed.value)
 

src/composables/useWindow.ts

@@ -0,0 +1,6 @@
+import { ssrWindow } from 'ssr-window'
+
+export default (): Window & typeof globalThis & { chrome?: any } => {
+  if (typeof window !== 'undefined') return window
+  else return ssrWindow as any
+}

src/composables/useZoom.ts

@@ -1,174 +0,0 @@
-import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom'
-import { pointer, select } from 'd3-selection'
-import { Ref } from 'vue'
-import { get } from '@vueuse/core'
-import { FlowTransform, PanOnScrollMode, UseZoom, UseZoomOptions } from '../types'
-import { clamp } from '../utils'
-import useKeyPress from './useKeyPress'
-import useHooks from './useHooks'
-import useStore from './useStore'
-
-const viewChanged = (prevTransform: FlowTransform, eventTransform: ZoomTransform): boolean =>
-  prevTransform.x !== eventTransform.x || prevTransform.y !== eventTransform.y || prevTransform.zoom !== eventTransform.k
-
-const eventToFlowTransform = (eventTransform: ZoomTransform): FlowTransform => ({
-  x: eventTransform.x,
-  y: eventTransform.y,
-  zoom: eventTransform.k,
-})
-
-export default (el: Ref<HTMLDivElement>, options: UseZoomOptions): UseZoom => {
-  const {
-    selectionKeyCode = 'Shift',
-    zoomActivationKeyCode = 'Meta',
-    defaultZoom = 1,
-    defaultPosition = [0, 0],
-    zoomOnScroll = true,
-    zoomOnPinch = true,
-    zoomOnDoubleClick = true,
-    panOnScroll = false,
-    panOnScrollSpeed = 0.5,
-    panOnScrollMode = PanOnScrollMode.Free,
-    paneMoveable = true,
-  } = options
-  const hooks = useHooks()
-  const store = useStore()
-  const prevTransform = ref<FlowTransform>({ x: 0, y: 0, zoom: 0 })
-
-  const clampedX = clamp(defaultPosition[0], store.translateExtent[0][0], store.translateExtent[1][0])
-  const clampedY = clamp(defaultPosition[1], store.translateExtent[0][1], store.translateExtent[1][1])
-  const clampedZoom = clamp(defaultZoom, store.minZoom, store.maxZoom)
-  const transform = ref({ x: clampedX, y: clampedY, zoom: clampedZoom })
-  biSyncRef(transform, prevTransform)
-
-  const d3Zoom = ref(
-    zoom<HTMLDivElement, any>().scaleExtent([store.minZoom, store.maxZoom]).translateExtent(store.translateExtent),
-  )
-  const d3Selection = ref()
-
-  until(el)
-    .toBeTruthy()
-    .then(() => {
-      const d3z = get(d3Zoom)!
-      d3Selection.value = select(el.value).call(d3z)
-      const d3s = get(d3Selection)!
-      const d3ZoomHandler = d3s.on('wheel.zoom')
-
-      const updatedTransform = zoomIdentity.translate(clampedX, clampedY).scale(clampedZoom)
-      d3z.transform(d3s, updatedTransform)
-      store.initD3Zoom({ d3Zoom: d3z, d3Selection: d3s, d3ZoomHandler })
-      store.transform = [updatedTransform.x, updatedTransform.y, updatedTransform.k]
-
-      const applyZoomHandlers = () => {
-        d3z.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
-          if (viewChanged(prevTransform.value, event.transform)) {
-            const flowTransform = eventToFlowTransform(event.transform)
-            prevTransform.value = flowTransform
-
-            hooks.moveStart.trigger(flowTransform)
-          }
-        })
-
-        d3z.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
-          if (viewChanged(prevTransform.value, event.transform)) {
-            const flowTransform = eventToFlowTransform(event.transform)
-            prevTransform.value = flowTransform
-
-            hooks.moveEnd.trigger(flowTransform)
-          }
-        })
-
-        useKeyPress(selectionKeyCode, (keyPress) => {
-          if (keyPress) {
-            d3z.on('zoom', null)
-          } else {
-            d3z.on('zoom', (event: D3ZoomEvent<HTMLDivElement, any>) => {
-              const flowTransform = eventToFlowTransform(event.transform)
-              prevTransform.value = flowTransform
-
-              hooks.move.trigger(flowTransform)
-            })
-          }
-        })
-
-        useKeyPress(zoomActivationKeyCode, (keyPress) => {
-          if (panOnScroll && keyPress) {
-            d3s
-              ?.on('wheel', (event: WheelEvent) => {
-                event.preventDefault()
-                event.stopImmediatePropagation()
-
-                const currentZoom = d3s?.property('__zoom').k || 1
-
-                if (event.ctrlKey && zoomOnPinch) {
-                  const point = pointer(event)
-                  // taken from https://github.com/d3/d3-zoom/blob/master/src/zoom.js
-                  const pinchDelta = -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002) * 10
-                  const zoom = currentZoom * Math.pow(2, pinchDelta)
-                  if (d3s) d3z.scaleTo(d3s, zoom, point)
-
-                  return
-                }
-
-                // increase scroll speed in firefox
-                // firefox: deltaMode === 1; chrome: deltaMode === 0
-                const deltaNormalize = event.deltaMode === 1 ? 20 : 1
-                const deltaX = panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize
-                const deltaY = panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize
-
-                if (d3s && panOnScrollSpeed)
-                  d3z?.translateBy(d3s, -(deltaX / currentZoom) * panOnScrollSpeed, -(deltaY / currentZoom) * panOnScrollSpeed)
-              })
-              .on('wheel.zoom', null)
-          } else if (typeof d3ZoomHandler !== 'undefined') {
-            d3s?.on('wheel', null).on('wheel.zoom', d3ZoomHandler)
-          }
-        })
-      }
-
-      const applyZoomFilter = () => {
-        const keyPress = useKeyPress(selectionKeyCode)
-        d3z.filter((event: MouseEvent) => {
-          const zoomScroll = zoomOnScroll
-          const pinchZoom = zoomOnPinch && event.ctrlKey
-
-          // if all interactions are disabled, we prevent all zoom events
-          if (!paneMoveable && !zoomScroll && !panOnScroll && !zoomOnDoubleClick && !zoomOnPinch) return false
-
-          // during a selection we prevent all other interactions
-          if (keyPress.value) return false
-
-          // if zoom on double click is disabled, we prevent the double click event
-          if (!zoomOnDoubleClick && event.type === 'dblclick') return false
-
-          if ((event.target as Element).closest('.nowheel') && event.type === 'wheel') return false
-
-          // when the target element is a node, we still allow zooming
-          if (
-            ((event.target as Element).closest('.vue-flow__node') || (event.target as Element).closest('.vue-flow__edge')) &&
-            event.type !== 'wheel'
-          )
-            return false
-
-          // when the target element is a node selection, we still allow zooming
-          if ((event.target as Element).closest('.vue-flow__nodesselection') && event.type !== 'wheel') return false
-
-          if (!zoomOnPinch && event.ctrlKey && event.type === 'wheel') return false
-
-          // when there is no scroll handling enabled, we prevent all wheel events
-          if (!zoomScroll && !panOnScroll && !pinchZoom && event.type === 'wheel') return false
-
-          // if the pane is not movable, we prevent dragging it with mousestart or touchstart
-          if (!paneMoveable && (event.type === 'mousedown' || event.type === 'touchstart')) return false
-
-          // default filter for d3-zoom
-          return (!event.ctrlKey || event.type === 'wheel') && !event.button
-        })
-      }
-
-      applyZoomHandlers()
-      applyZoomFilter()
-    })
-
-  return { transform, d3Zoom, d3Selection }
-}

src/index.ts

@@ -1,4 +1,4 @@
-export { default } from './container/Flow/Flow.vue'
+export { default as Flow } from './container/Flow/Flow.vue'
 export { default as Handle } from './components/Handle/Handle.vue'
 export { default as EdgeText } from './components/Edges/EdgeText.vue'
 export { getBezierPath, getSmoothStepPath, getMarkerEnd, getCenter as getEdgeCenter } from './components/Edges/utils'

src/utils/graph.ts

@@ -13,6 +13,7 @@ import {
   Dimensions,
   FlowStore,
 } from '../types'
+import { useWindow } from '../composables'
 
 export const isInputDOMNode = (e: KeyboardEvent | MouseEvent): boolean => {
   const target = e.target as HTMLElement
@@ -33,6 +34,8 @@ export const clampPosition = (position: XYPosition, extent: NodeExtent): XYPosit
 
 export const getHostForElement = (element: HTMLElement): Document => {
   const doc = element.getRootNode() as Document
+  const window = useWindow()
+
   if ('getElementFromPoint' in doc) return doc
   else return window.document
 }

yarn.lock

@@ -4815,6 +4815,11 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
+ssr-window@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-4.0.0.tgz#4ee82fc360c5f88a022f321740bcfec59ada1a61"
+  integrity sha512-qCg6wJNeGNTVcPK2KFNfwtHU1gA3UZDZdxogu+Ys5+Ue5PMOENxUb7sscpAWWo4mWOBkJRCwQ50IlyA7qZ0hxw==
+
 stable@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"