Testing new build process

wurstbonbon · Dec 7, 2021 · 57afa24 · 57afa24
1 parent d95f4a8
commit 57afa24
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 37 deletions.
diff --git a/dev/examples/ThreeBox.tsx b/dev/examples/ThreeBox.tsx
@@ -1,7 +1,6 @@
 import * as React from "react"
 import { useRef, useState } from "react"
-import { Canvas } from "@react-three/fiber"
-import { motion } from "@framer/render/three/motion"
+import { motion, MotionCanvas } from "@framer/three-entry"
 
 /**
  * An example of firing an animation onMount using the useAnimation hook
@@ -43,13 +42,12 @@ export const App = () => {
     return (
         <motion.div
             style={{ position: "fixed", inset: 0, background: "white" }}
+            whileHover="hover"
         >
-            <Canvas>
+            <MotionCanvas>
                 <ambientLight />
                 <pointLight position={[10, 10, 10]} />
                 <motion.group
-                    initial="hidden"
-                    animate="visible"
                     variants={{
                         visible: { transition: { staggerChildren: 0.1 } },
                     }}
@@ -64,7 +62,7 @@ export const App = () => {
                     <Box position={[0, -1.5, 0]} />
                     <Box position={[1.5, -1.5, 0]} />
                 </motion.group>
-            </Canvas>
+            </MotionCanvas>
         </motion.div>
     )
 }
diff --git a/dev/webpack/examples.tsx b/dev/webpack/examples.tsx
@@ -1,3 +1,4 @@
+import { Suspense } from "react"
 import * as React from "react"
 import { fileName } from "../inc/file-name"
 import { Container, Code } from "../styled"
@@ -44,8 +45,10 @@ export const Example = ({ id }: { id: string }) => {
     document.title = name
 
     return (
-        <Container>
-            <targetModule.App />
-        </Container>
+        <Suspense fallback={null}>
+            <Container>
+                <targetModule.App />
+            </Container>
+        </Suspense>
     )
 }
diff --git a/package.json b/package.json
@@ -2,18 +2,18 @@
     "name": "framer-motion",
     "version": "5.4.1",
     "description": "A simple and powerful React animation library",
-    "main": "dist/framer-motion.cjs.js",
+    "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
     "exports": {
         ".": {
-            "require": "./dist/framer-motion.cjs.js",
+            "require": "dist/cjs/index.js",
             "import": "./dist/es/index.mjs",
-            "default": "./dist/framer-motion.cjs.js"
+            "default": "dist/cjs/index.js"
         },
         "./three": {
-            "require": "./dist/framer-motion-three.cjs.js",
+            "require": "./dist/cjs/three-entry.js",
             "import": "./dist/es/three-entry.mjs",
-            "default": "./dist/framer-motion-three.cjs.js"
+            "default": "./dist/cjs/three-entry.js"
         },
         "./package.json": "./package.json"
     },

diff --git a/rollup.config.js b/rollup.config.js
@@ -69,19 +69,10 @@ const umdProd = Object.assign({}, umd, {
 })
 
 const cjs = Object.assign({}, config, {
+    input: ["lib/index.js", "lib/three-entry.js"],
     output: {
-        file: `dist/${pkg.name}.cjs.js`,
-        format: "cjs",
-        exports: "named",
-    },
-    plugins: [resolve()],
-    external,
-})
-
-const threeCjs = Object.assign({}, config, {
-    input: "lib/three-entry.js",
-    output: {
-        file: `dist/${pkg.name}-three.cjs.js`,
+        entryFileNames: `[name].js`,
+        dir: "dist/cjs",
         format: "cjs",
         exports: "named",
     },
@@ -149,14 +140,4 @@ const domMax = Object.assign({}, es, {
     external: ["react", "react-dom"],
 })
 
-export default [
-    projection,
-    umd,
-    umdProd,
-    cjs,
-    threeCjs,
-    es,
-    m,
-    domAnimation,
-    domMax,
-]
+export default [projection, umd, umdProd, cjs, es, m, domAnimation, domMax]