diff --git a/src/index.ts b/src/index.ts index 2b171b2b7d..76df98239e 100644 --- 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 new file mode 100644 index 0000000000..1f59e289ae --- /dev/null +++ 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 index 096b8fb3ec..d2e81643f8 100644 --- 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,13 @@ export function createMotionProxy(createConfig: CreateConfig) { >(createConfig(Component, customMotionComponentConfig)) } + if (typeof Proxy === "undefined") { + return motionTags.reduce( + (acc, tag) => Object.assign(acc, { [tag]: custom(tag) }), + custom + ) as typeof custom & DOMMotionComponents + } + /** * 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 new file mode 100644 index 0000000000..97c940e2fb --- /dev/null +++ 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 new file mode 100644 index 0000000000..d00ba09021 --- /dev/null +++ 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 () => {} +})()