feat: add patchMotionTags for legacy browsers which don't support Proxy

framer · Jun 24, 2021 · c9e18e2 · c9e18e2
1 parent 1a0b52f
commit c9e18e2
Show file tree

Hide file tree

Showing 5 changed files with 165 additions and 0 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -1,3 +1,8 @@
+/**
+ * Proxy patch for `motion` and `m`
+ */
+export { patchMotionTags } from "./render/dom/patch-motion-tags"
+
 /**
  * Components
  */

diff --git a/src/render/dom/dom-tags.ts b/src/render/dom/dom-tags.ts
@@ -0,0 +1,138 @@
+// borrowed from react-dom-factories
+export const domTags = [
+    "a",
+    "abbr",
+    "address",
+    "area",
+    "article",
+    "aside",
+    "audio",
+    "b",
+    "base",
+    "bdi",
+    "bdo",
+    "big",
+    "blockquote",
+    "body",
+    "br",
+    "button",
+    "canvas",
+    "caption",
+    "cite",
+    "code",
+    "col",
+    "colgroup",
+    "data",
+    "datalist",
+    "dd",
+    "del",
+    "details",
+    "dfn",
+    "dialog",
+    "div",
+    "dl",
+    "dt",
+    "em",
+    "embed",
+    "fieldset",
+    "figcaption",
+    "figure",
+    "footer",
+    "form",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "head",
+    "header",
+    "hgroup",
+    "hr",
+    "html",
+    "i",
+    "iframe",
+    "img",
+    "input",
+    "ins",
+    "kbd",
+    "keygen",
+    "label",
+    "legend",
+    "li",
+    "link",
+    "main",
+    "map",
+    "mark",
+    "menu",
+    "menuitem",
+    "meta",
+    "meter",
+    "nav",
+    "noscript",
+    "object",
+    "ol",
+    "optgroup",
+    "option",
+    "output",
+    "p",
+    "param",
+    "picture",
+    "pre",
+    "progress",
+    "q",
+    "rp",
+    "rt",
+    "ruby",
+    "s",
+    "samp",
+    "script",
+    "section",
+    "select",
+    "small",
+    "source",
+    "span",
+    "strong",
+    "style",
+    "sub",
+    "summary",
+    "sup",
+    "table",
+    "tbody",
+    "td",
+    "textarea",
+    "tfoot",
+    "th",
+    "thead",
+    "time",
+    "title",
+    "tr",
+    "track",
+    "u",
+    "ul",
+    "var",
+    "video",
+    "wbr",
+    // SVG
+    "circle",
+    "clipPath",
+    "defs",
+    "ellipse",
+    "foreignObject",
+    "g",
+    "image",
+    "line",
+    "linearGradient",
+    "marker",
+    "mask",
+    "path",
+    "pattern",
+    "polygon",
+    "polyline",
+    "radialGradient",
+    "rect",
+    "stop",
+    "svg",
+    "text",
+    "tspan",
+]
diff --git a/src/render/dom/motion-proxy.ts b/src/render/dom/motion-proxy.ts
@@ -4,6 +4,7 @@ import { HTMLRenderState } from "../html/types"
 import { SVGRenderState } from "../svg/types"
 import { MotionProps } from "../../motion/types"
 import { createMotionComponent, MotionComponentConfig } from "../../motion"
+import { motionTags } from "./motion-tags"
 
 /**
  * I'd rather the return type of `custom` to be implicit but this throws
@@ -52,6 +53,17 @@ export function createMotionProxy(createConfig: CreateConfig) {
         >(createConfig(Component, customMotionComponentConfig))
     }
 
+    if (typeof Proxy === "undefined") {
+        if (motionTags.length) {
+            return motionTags.reduce(
+                (acc, tag: keyof DOMMotionComponents) =>
+                    Object.assign(acc, { [tag]: custom(tag) }),
+                {} as DOMMotionComponents
+            )
+        }
+        return custom
+    }
+
     /**
      * A cache of generated `motion` components, e.g `motion.div`, `motion.input` etc.
      * Rather than generating them anew every render.

diff --git a/src/render/dom/motion-tags.ts b/src/render/dom/motion-tags.ts
@@ -0,0 +1,2 @@
+// loaded from ./dom-tags
+export const motionTags: string[] = []
diff --git a/src/render/dom/patch-motion-tags.ts b/src/render/dom/patch-motion-tags.ts
@@ -0,0 +1,8 @@
+import { motionTags } from "./motion-tags"
+import { domTags } from "./dom-tags"
+
+// tree-shakable patch for legacy browsers which don't support Proxy
+export const patchMotionTags = (() => {
+    motionTags.push(...domTags)
+    return () => {}
+})()