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

[ambar]

Related: #364 #664 #674 #1178

Usage

import {patchMotionTags} from 'framer-motion'

patchMotionTags()

Test result:

Tool	Bundle Diff
webpack	+1070B (gzip 464B)
esbuild	+1068B (gzip 469B)

---

A less convenient solution is to rewrite export, but it will significantly increase the bundle size:

export let motion = motionProxy
// motion will always be bundled
export const patchMotion = () => {
    motion = createMotionFallback()
}

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 5b5e994:

Sandbox	Source
Framer Motion: Simple animation	Configuration
App Store UI using React and Framer Motion	Configuration
Framer Motion: Reorder animation	Configuration
Framer Motion: growing item positionTransition issue	Configuration
Framer Motion: Image lightbox	Configuration

[ppsirius]

What is the status of this?

[mattgperry]

Sorry for the delay on this but closing this out as the point of using Proxy in the first place is to avoid having to maintain a list of valid tags that has to be then included in the bundle.

[ambar]

The DOM tags in this patch would not be bundled unless you call patchMotionTags().

Right now, all other workarounds are a little pain to use:

• yarn patch requires line number of source code (unstable)
• Aliasing requires different bundler config in different projects (and also, we may need to inject a fake Proxy polyfill and then revert it)
• Re-exporting m/motion from another package (we end up with this)

[mattgperry]

They would be included though, because the bundler has no way of knowing whether patchMotionTags is going to be called by the client.