feat: add ssr support (#186)

packages/core/src/drivers/ViewportResizeDriver.ts

@@ -2,6 +2,8 @@ import { EventDriver } from '@designable/shared'
 import { Engine } from '../models/Engine'
 import { ViewportResizeEvent } from '../events'
 import { ResizeObserver } from '@juggle/resize-observer'
+import { globalThisPolyfill } from '@designable/shared'
+
 export class ViewportResizeDriver extends EventDriver<Engine> {
   request = null
 
@@ -27,7 +29,7 @@ export class ViewportResizeDriver extends EventDriver<Engine> {
   }
 
   attach() {
-    if (this.contentWindow && this.contentWindow !== window) {
+    if (this.contentWindow && this.contentWindow !== globalThisPolyfill) {
       this.addEventListener('resize', this.onResize)
     } else {
       if (this.container && this.container !== document) {
@@ -38,7 +40,7 @@ export class ViewportResizeDriver extends EventDriver<Engine> {
   }
 
   detach() {
-    if (this.contentWindow && this.contentWindow !== window) {
+    if (this.contentWindow && this.contentWindow !== globalThisPolyfill) {
       this.removeEventListener('resize', this.onResize)
     } else if (this.resizeObserver) {
       if (this.container && this.container !== document) {

packages/core/src/drivers/ViewportScrollDriver.ts

@@ -1,4 +1,4 @@
-import { EventDriver } from '@designable/shared'
+import { EventDriver, globalThisPolyfill } from '@designable/shared'
 import { Engine } from '../models/Engine'
 import { ViewportScrollEvent } from '../events'
 
@@ -7,7 +7,7 @@ export class ViewportScrollDriver extends EventDriver<Engine> {
 
   onScroll = (e: UIEvent) => {
     e.preventDefault()
-    this.request = window.requestAnimationFrame(() => {
+    this.request = globalThisPolyfill.requestAnimationFrame(() => {
       this.dispatch(
         new ViewportScrollEvent({
           scrollX: this.contentWindow.scrollX,

packages/core/src/effects/useContentEditableEffect.ts

@@ -1,5 +1,5 @@
 import { Path } from '@formily/path'
-import { requestIdle } from '@designable/shared'
+import { requestIdle, globalThisPolyfill } from '@designable/shared'
 import { Engine, TreeNode } from '../models'
 import { MouseDoubleClickEvent, MouseClickEvent } from '../events'
 
@@ -27,17 +27,17 @@ function setEndOfContenteditable(contentEditableElement: Element) {
   const range = document.createRange()
   range.selectNodeContents(contentEditableElement)
   range.collapse(false)
-  const selection = window.getSelection()
+  const selection = globalThisPolyfill.getSelection()
   selection.removeAllRanges()
   selection.addRange(range)
 }
 
 function createCaretCache(el: Element) {
-  const currentSelection = window.getSelection()
+  const currentSelection = globalThisPolyfill.getSelection()
   if (currentSelection.containsNode(el)) return
   const ranges = getAllRanges(currentSelection)
   return () => {
-    const sel = window.getSelection()
+    const sel = globalThisPolyfill.getSelection()
     const firstNode = el.childNodes[0]
     if (!firstNode) return
     sel.removeAllRanges()

packages/core/src/events/cursor/AbstractCursorEvent.ts

@@ -1,4 +1,5 @@
 import { IEngineContext } from '../../types'
+import { globalThisPolyfill } from '@designable/shared'
 
 export interface ICursorEventOriginData {
   clientX: number
@@ -28,14 +29,14 @@ export class AbstractCursorEvent {
       pageX: 0,
       pageY: 0,
       target: null,
-      view: window,
+      view: globalThisPolyfill,
     }
     this.transformCoordinates()
   }
 
   transformCoordinates() {
     const { frameElement } = this.data?.view || {}
-    if (frameElement && this.data.view !== window) {
+    if (frameElement && this.data.view !== globalThisPolyfill) {
       const frameRect = frameElement.getBoundingClientRect()
       const scale = frameRect.width / frameElement['offsetWidth']
       this.data.topClientX = this.data.clientX * scale + frameRect.x

packages/core/src/events/viewport/AbstractViewportEvent.ts

@@ -1,4 +1,5 @@
 import { IEngineContext } from '../../types'
+import { globalThisPolyfill } from '@designable/shared'
 
 export interface IViewportEventData {
   scrollX: number
@@ -16,14 +17,14 @@ export class AbstractViewportEvent {
   context: IEngineContext
   constructor(data: IViewportEventData) {
     this.data = data || {
-      scrollX: window.scrollX,
-      scrollY: window.scrollY,
-      width: window.innerWidth,
-      height: window.innerHeight,
-      innerWidth: window.innerWidth,
-      innerHeight: window.innerHeight,
-      view: window,
-      target: window,
+      scrollX: globalThisPolyfill.scrollX,
+      scrollY: globalThisPolyfill.scrollY,
+      width: globalThisPolyfill.innerWidth,
+      height: globalThisPolyfill.innerHeight,
+      innerWidth: globalThisPolyfill.innerWidth,
+      innerHeight: globalThisPolyfill.innerHeight,
+      view: globalThisPolyfill,
+      target: globalThisPolyfill,
     }
   }
 }

packages/core/src/index.ts

@@ -1,14 +1,15 @@
 import * as Core from './exports'
 export * from './exports'
+import { globalThisPolyfill } from '@designable/shared'
 
-if (window?.['Designable']?.['Core']) {
+if (globalThisPolyfill?.['Designable']?.['Core']) {
   if (module.exports) {
     module.exports = {
       __esModule: true,
-      ...window['Designable']['Core'],
+      ...globalThisPolyfill['Designable']['Core'],
     }
   }
 } else {
-  window['Designable'] = window['Designable'] || {}
-  window['Designable'].Core = Core
+  globalThisPolyfill['Designable'] = globalThisPolyfill['Designable'] || {}
+  globalThisPolyfill['Designable'].Core = Core
 }

packages/core/src/internals.ts

@@ -1,4 +1,5 @@
 import { each, isPlainObj } from '@designable/shared'
+import { globalThisPolyfill } from '@designable/shared'
 
 export const lowerSnake = (str: string) => {
   return String(str).replace(/\s+/g, '_').toLocaleLowerCase()
@@ -25,10 +26,12 @@ export const mergeLocales = (target: any, source: any) => {
 
 export const getBrowserLanguage = () => {
   /* istanbul ignore next */
-  if (!window.navigator) {
+  if (!globalThisPolyfill.navigator) {
     return 'en'
   }
   return (
-    window.navigator['browserlanguage'] || window.navigator?.language || 'en'
+    globalThisPolyfill.navigator['browserlanguage'] ||
+    globalThisPolyfill.navigator?.language ||
+    'en'
   )
 }

packages/core/src/models/Cursor.ts

@@ -1,5 +1,6 @@
 import { Engine } from './Engine'
 import { action, define, observable } from '@formily/reactive'
+import { globalThisPolyfill } from '@designable/shared'
 
 export enum CursorStatus {
   Normal = 'NORMAL',
@@ -92,7 +93,7 @@ export class Cursor {
 
   dragEndScrollOffset: IScrollOffset = DEFAULT_SCROLL_OFFSET
 
-  view: Window = window
+  view: Window = globalThisPolyfill
 
   constructor(engine: Engine) {
     this.engine = engine

packages/core/src/models/Engine.ts

@@ -4,7 +4,7 @@ import { Workbench } from './Workbench'
 import { Cursor } from './Cursor'
 import { Keyboard } from './Keyboard'
 import { Screen, ScreenType } from './Screen'
-import { Event, uid } from '@designable/shared'
+import { Event, uid, globalThisPolyfill } from '@designable/shared'
 
 /**
  * 设计器引擎
@@ -80,7 +80,7 @@ export class Engine extends Event {
   }
 
   mount() {
-    this.attachEvents(window)
+    this.attachEvents(globalThisPolyfill)
   }
 
   unmount() {

packages/core/src/models/Viewport.ts

@@ -6,6 +6,7 @@ import {
   IPoint,
   requestIdle,
   cancelIdle,
+  globalThisPolyfill,
 } from '@designable/shared'
 import { action, define, observable } from '@formily/reactive'
 import { Workspace } from './Workspace'
@@ -96,7 +97,7 @@ export class Viewport {
   }
 
   get isMaster() {
-    return this.contentWindow === window
+    return this.contentWindow === globalThisPolyfill
   }
 
   get isIframe() {
@@ -114,7 +115,10 @@ export class Viewport {
 
   get innerRect() {
     const rect = this.rect
-    return new DOMRect(0, 0, rect?.width, rect?.height)
+    return (
+      typeof DOMRect !== 'undefined' &&
+      new DOMRect(0, 0, rect?.width, rect?.height)
+    )
   }
 
   get offsetX() {
@@ -277,11 +281,14 @@ export class Viewport {
     const offsetHeight = element['offsetHeight']
       ? element['offsetHeight']
       : rect.height
-    return new DOMRect(
-      rect.x,
-      rect.y,
-      this.scale !== 1 ? offsetWidth : rect.width,
-      this.scale !== 1 ? offsetHeight : rect.height
+    return (
+      typeof DOMRect !== 'undefined' &&
+      new DOMRect(
+        rect.x,
+        rect.y,
+        this.scale !== 1 ? offsetWidth : rect.width,
+        this.scale !== 1 ? offsetHeight : rect.height
+      )
     )
   }
 
@@ -296,14 +303,20 @@ export class Viewport {
     )
     if (rect) {
       if (this.isIframe) {
-        return new DOMRect(
-          rect.x + this.offsetX,
-          rect.y + this.offsetY,
-          rect.width,
-          rect.height
+        return (
+          typeof DOMRect !== 'undefined' &&
+          new DOMRect(
+            rect.x + this.offsetX,
+            rect.y + this.offsetY,
+            rect.width,
+            rect.height
+          )
         )
       } else {
-        return new DOMRect(rect.x, rect.y, rect.width, rect.height)
+        return (
+          typeof DOMRect !== 'undefined' &&
+          new DOMRect(rect.x, rect.y, rect.width, rect.height)
+        )
       }
     }
   }
@@ -320,20 +333,26 @@ export class Viewport {
     )
     if (elementRect) {
       if (this.isIframe) {
-        return new DOMRect(
-          elementRect.x + this.contentWindow.scrollX,
-          elementRect.y + this.contentWindow.scrollY,
-          elementRect.width,
-          elementRect.height
+        return (
+          typeof DOMRect !== 'undefined' &&
+          new DOMRect(
+            elementRect.x + this.contentWindow.scrollX,
+            elementRect.y + this.contentWindow.scrollY,
+            elementRect.width,
+            elementRect.height
+          )
         )
       } else {
-        return new DOMRect(
-          (elementRect.x - this.offsetX + this.viewportElement.scrollLeft) /
-            this.scale,
-          (elementRect.y - this.offsetY + this.viewportElement.scrollTop) /
-            this.scale,
-          elementRect.width,
-          elementRect.height
+        return (
+          typeof DOMRect !== 'undefined' &&
+          new DOMRect(
+            (elementRect.x - this.offsetX + this.viewportElement.scrollLeft) /
+              this.scale,
+            (elementRect.y - this.offsetY + this.viewportElement.scrollTop) /
+              this.scale,
+            elementRect.width,
+            elementRect.height
+          )
         )
       }
     }

packages/react-sandbox/src/index.ts

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect } from 'react'
-import { isFn } from '@designable/shared'
+import { isFn, globalThisPolyfill } from '@designable/shared'
 import {
   useDesigner,
   useWorkspace,
@@ -44,8 +44,8 @@ export const useSandbox = (props: React.PropsWithChildren<ISandboxProps>) => {
       ref.current.contentWindow['__DESIGNABLE_LAYOUT__'] = layout
       ref.current.contentWindow['__DESIGNABLE_ENGINE__'] = designer
       ref.current.contentWindow['__DESIGNABLE_WORKSPACE__'] = workspace
-      ref.current.contentWindow['Formily'] = window['Formily']
-      ref.current.contentWindow['Designable'] = window['Designable']
+      ref.current.contentWindow['Formily'] = globalThisPolyfill['Formily']
+      ref.current.contentWindow['Designable'] = globalThisPolyfill['Designable']
       ref.current.contentDocument.open()
       ref.current.contentDocument.write(`
       <!DOCTYPE html>
@@ -96,15 +96,15 @@ export const useSandbox = (props: React.PropsWithChildren<ISandboxProps>) => {
   return ref
 }
 
-if (window.frameElement) {
+if (globalThisPolyfill.frameElement) {
   //解决iframe内嵌如果iframe被移除，内部React无法回收内存的问题
-  window.addEventListener('unload', () => {
+  globalThisPolyfill.addEventListener('unload', () => {
     ReactDOM.unmountComponentAtNode(document.getElementById('__SANDBOX_ROOT__'))
   })
 }
 
 export const useSandboxScope = () => {
-  return window['__DESIGNABLE_SANDBOX_SCOPE__']
+  return globalThisPolyfill['__DESIGNABLE_SANDBOX_SCOPE__']
 }
 
 export const renderSandboxContent = (render: (scope?: any) => JSX.Element) => {

packages/react-settings-form/src/shared/loadScript.ts

@@ -1,4 +1,5 @@
 import { getNpmCDNRegistry } from '../registry'
+import { globalThisPolyfill } from '@designable/shared'
 export interface ILoadScriptProps {
   package: string
   entry: string
@@ -11,24 +12,24 @@ export const loadScript = async (props: ILoadScriptProps) => {
     base: getNpmCDNRegistry(),
     ...props,
   }
-  if (window[props.root]) return window[options.root]
+  if (globalThisPolyfill[props.root]) return globalThisPolyfill[options.root]
   const path = `${options.base}/${options.package}/${options.entry}`
   return new Promise((resolve, reject) => {
     const script = document.createElement('script')
     script.type = 'text/javascript'
     script.async = false
     script.src = path
     script.onload = () => {
-      const module = window[options.root]
-      window['define'] = define
+      const module = globalThisPolyfill[options.root]
+      globalThisPolyfill['define'] = define
       resolve(module)
       script.remove()
     }
     script.onerror = (err) => {
       reject(err)
     }
-    const define = window['define']
-    window['define'] = undefined
+    const define = globalThisPolyfill['define']
+    globalThisPolyfill['define'] = undefined
     document.body.appendChild(script)
   })
 }