Improving code-splitting (#1613)

* Improving code-splitting

* Fixing import

packages/framer-motion/src/motion/__tests__/static-prop.test.tsx

@@ -3,7 +3,7 @@ import { motion, useMotionValue } from "../.."
 import * as React from "react"
 import { motionValue } from "../../value"
 import { MotionConfig } from "../../components/MotionConfig"
-import { globalProjectionState } from "../../projection/node/create-projection-node"
+import { globalProjectionState } from "../../projection/node/state"
 
 describe("isStatic prop", () => {
     test("it prevents rendering of animated values", async () => {

packages/framer-motion/src/motion/features/layout/MeasureLayout.tsx

@@ -6,7 +6,7 @@ import {
     LayoutGroupContextProps,
 } from "../../../context/LayoutGroupContext"
 import { SwitchLayoutGroupContext } from "../../../context/SwitchLayoutGroupContext"
-import { globalProjectionState } from "../../../projection/node/create-projection-node"
+import { globalProjectionState } from "../../../projection/node/state"
 import { correctBorderRadius } from "../../../projection/styles/scale-border-radius"
 import { correctBoxShadow } from "../../../projection/styles/scale-box-shadow"
 import { addScaleCorrector } from "../../../projection/styles/scale-correction"

packages/framer-motion/src/projection/node/create-projection-node.ts

@@ -41,32 +41,14 @@ import { FlatTree } from "../../render/utils/flat-tree"
 import { Transition } from "../../types"
 import { resolveMotionValue } from "../../value/utils/resolve-motion-value"
 import { MotionStyle } from "../../motion/types"
+import { globalProjectionState } from "./state"
 
 /**
  * We use 1000 as the animation target as 0-1000 maps better to pixels than 0-1
  * which has a noticeable difference in spring animations
  */
 const animationTarget = 1000
 
-/**
- * This should only ever be modified on the client otherwise it'll
- * persist through server requests. If we need instanced states we
- * could lazy-init via root.
- */
-export const globalProjectionState = {
-    /**
-     * Global flag as to whether the tree has animated since the last time
-     * we resized the window
-     */
-    hasAnimatedSinceResize: true,
-
-    /**
-     * We set this to true once, on the first update. Any nodes added to the tree beyond that
-     * update will be given a `data-projection-id` attribute.
-     */
-    hasEverUpdated: false,
-}
-
 export function createProjectionNode<I>({
     attachResizeListener,
     defaultParent,

packages/framer-motion/src/projection/node/id.ts

@@ -1,5 +1,5 @@
 import { useConstant } from "../../utils/use-constant"
-import { globalProjectionState } from "./create-projection-node"
+import { globalProjectionState } from "./state"
 
 let id = 1
 export function useProjectionId(): number | undefined {

packages/framer-motion/src/projection/node/state.ts

@@ -0,0 +1,18 @@
+/**
+ * This should only ever be modified on the client otherwise it'll
+ * persist through server requests. If we need instanced states we
+ * could lazy-init via root.
+ */
+export const globalProjectionState = {
+    /**
+     * Global flag as to whether the tree has animated since the last time
+     * we resized the window
+     */
+    hasAnimatedSinceResize: true,
+
+    /**
+     * We set this to true once, on the first update. Any nodes added to the tree beyond that
+     * update will be given a `data-projection-id` attribute.
+     */
+    hasEverUpdated: false,
+}