Merge branch 'canary' into fix/rewrite-alias-cache

vercel · May 10, 2021 · 4cedde8 · 4cedde8
2 parents 2735ecc + 6d0150f
commit 4cedde8
Show file tree

Hide file tree

Showing 19 changed files with 584 additions and 115 deletions.
diff --git a/errors/manifest.json b/errors/manifest.json
@@ -255,6 +255,10 @@
         },
         { "title": "no-cache", "path": "/errors/no-cache.md" },
         { "title": "no-css-tags", "path": "/errors/no-css-tags.md" },
+        {
+          "title": "no-document-import-in-page",
+          "path": "/errors/no-document-import-in-page.md"
+        },
         {
           "title": "no-document-title",
           "path": "/errors/no-document-title.md"
@@ -263,6 +267,10 @@
           "title": "no-document-viewport-meta",
           "path": "/errors/no-document-viewport-meta.md"
         },
+        {
+          "title": "no-head-import-in-document",
+          "path": "/errors/no-head-import-in-document.md"
+        },
         {
           "title": "no-html-link-for-pages",
           "path": "/errors/no-html-link-for-pages.md"
@@ -271,6 +279,10 @@
           "title": "no-on-app-updated-hook",
           "path": "/errors/no-on-app-updated-hook.md"
         },
+        {
+          "title": "no-page-custom-font",
+          "path": "/errors/no-page-custom-font.md"
+        },
         {
           "title": "no-router-instance",
           "path": "/errors/no-router-instance.md"

diff --git a/errors/no-document-import-in-page.md b/errors/no-document-import-in-page.md
@@ -0,0 +1,24 @@
+# No Document Import in Page
+
+### Why This Error Occurred
+
+`next/document` was imported in a page outside of `pages/_document.js`. This can cause unexpected issues in your application.
+
+### Possible Ways to Fix It
+
+Only import and use `next/document` within `pages/_document.js` to override the default `Document` component:
+
+```jsx
+// pages/_document.js
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+class MyDocument extends Document {
+  //...
+}
+
+export default MyDocument
+```
+
+### Useful Links
+
+- [Custom Document](https://nextjs.org/docs/advanced-features/custom-document)
diff --git a/errors/no-head-import-in-document.md b/errors/no-head-import-in-document.md
@@ -0,0 +1,34 @@
+# No Head Import in Document
+
+### Why This Error Occurred
+
+`next/head` was imported in `pages/_document.js`. This can cause unexpected issues in your application.
+
+### Possible Ways to Fix It
+
+Only import and use `next/document` within `pages/_document.js` to override the default `Document` component. If you are importing `next/head` to use the `Head` component, import it from `next/document` instead in order to modify `<head>` code across all pages:
+
+```jsx
+// pages/_document.js
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    //...
+  }
+
+  render() {
+    return (
+      <Html>
+        <Head></Head>
+      </Html>
+    )
+  }
+}
+
+export default MyDocument
+```
+
+### Useful Links
+
+- [Custom Document](https://nextjs.org/docs/advanced-features/custom-document)
diff --git a/errors/no-page-custom-font.md b/errors/no-page-custom-font.md
@@ -0,0 +1,45 @@
+# No Page Custom Font
+
+### Why This Error Occurred
+
+A custom font was added to a page and not with a custom `Document`. This only adds the font to the specific page and not to the entire application.
+
+### Possible Ways to Fix It
+
+Create the file `./pages/document.js` and add the font to a custom Document:
+
+```jsx
+// pages/_document.js
+
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+class MyDocument extends Document {
+  render() {
+    return (
+      <Html>
+        <Head>
+          <link
+            href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
+            rel="stylesheet"
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default MyDocument
+```
+
+### When Not To Use It
+
+If you have a reason to only load a font for a particular page, then you can disable this rule.
+
+### Useful Links
+
+- [Custom Document](https://nextjs.org/docs/advanced-features/custom-document)
+- [Font Optimization](https://nextjs.org/docs/basic-features/font-optimization)
diff --git a/examples/blog-starter-typescript/package.json b/examples/blog-starter-typescript/package.json
@@ -8,7 +8,7 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "classnames": "2.2.6",
+    "classnames": "2.3.1",
     "date-fns": "2.10.0",
     "gray-matter": "4.0.2",
     "next": "latest",
@@ -19,7 +19,6 @@
     "typescript": "^4.0.3"
   },
   "devDependencies": {
-    "@types/classnames": "^2.2.10",
     "@types/jest": "^25.2.2",
     "@types/node": "^14.0.1",
     "@types/react": "^16.9.35",

diff --git a/examples/with-three-js/components/Bird.js b/examples/with-three-js/components/Bird.js
@@ -1,44 +1,40 @@
-import { useRef, useState, useEffect } from 'react'
-import * as THREE from 'three'
+import { useEffect } from 'react'
+import { useFrame } from '@react-three/fiber'
+import { useAnimations, useGLTF } from '@react-three/drei'
 
-import { useFrame, useLoader } from 'react-three-fiber'
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+export default function Bird({ speed, factor, url, ...props }) {
+  const { nodes, animations } = useGLTF(url)
+  const { ref, mixer } = useAnimations(animations)
 
-const Bird = ({ speed, factor, url, ...props }) => {
-  const gltf = useLoader(GLTFLoader, url)
-  const group = useRef()
-  const [mixer] = useState(() => new THREE.AnimationMixer())
-
-  useEffect(
-    () => void mixer.clipAction(gltf.animations[0], group.current).play(),
-    [gltf.animations, mixer]
-  )
+  useEffect(() => void mixer.clipAction(animations[0], ref.current).play(), [
+    mixer,
+    animations,
+    ref,
+  ])
 
   useFrame((state, delta) => {
-    group.current.rotation.y +=
+    ref.current.rotation.y +=
       Math.sin((delta * factor) / 2) * Math.cos((delta * factor) / 2) * 1.5
     mixer.update(delta * speed)
   })
 
   return (
-    <group ref={group}>
+    <group ref={ref}>
       <scene name="Scene" {...props}>
         <mesh
           name="Object_0"
-          morphTargetDictionary={gltf.nodes.Object_0.morphTargetDictionary}
-          morphTargetInfluences={gltf.nodes.Object_0.morphTargetInfluences}
+          morphTargetDictionary={nodes.Object_0.morphTargetDictionary}
+          morphTargetInfluences={nodes.Object_0.morphTargetInfluences}
           rotation={[1.5707964611537577, 0, 0]}
         >
-          <bufferGeometry attach="geometry" {...gltf.nodes.Object_0.geometry} />
+          <bufferGeometry attach="geometry" {...nodes.Object_0.geometry} />
           <meshStandardMaterial
             attach="material"
-            {...gltf.nodes.Object_0.material}
+            {...nodes.Object_0.material}
             name="Material_0_COLOR_0"
           />
         </mesh>
       </scene>
     </group>
   )
 }
-
-export default Bird
diff --git a/examples/with-three-js/components/Box.js b/examples/with-three-js/components/Box.js
@@ -0,0 +1,29 @@
+import { useRef, useState } from 'react'
+import { useFrame } from '@react-three/fiber'
+import { Box as NativeBox } from '@react-three/drei'
+
+export default function Box(props) {
+  const mesh = useRef()
+
+  const [hovered, setHover] = useState(false)
+  const [active, setActive] = useState(false)
+
+  useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01))
+
+  return (
+    <NativeBox
+      args={[1, 1, 1]}
+      {...props}
+      ref={mesh}
+      scale={active ? [6, 6, 6] : [5, 5, 5]}
+      onClick={() => setActive(!active)}
+      onPointerOver={() => setHover(true)}
+      onPointerOut={() => setHover(false)}
+    >
+      <meshStandardMaterial
+        attach="material"
+        color={hovered ? '#2b6c76' : '#720b23'}
+      />
+    </NativeBox>
+  )
+}
diff --git a/examples/with-three-js/next.config.js b/examples/with-three-js/next.config.js
diff --git a/examples/with-three-js/package.json b/examples/with-three-js/package.json
@@ -8,15 +8,12 @@
     "start": "next start"
   },
   "dependencies": {
-    "@react-three/drei": "3.8.6",
-    "next": "10.0.7",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "react-three-fiber": "5.3.19",
-    "three": "0.126.0"
-  },
-  "devDependencies": {
-    "next-transpile-modules": "6.3.0"
+    "@react-three/drei": "4.3.3",
+    "@react-three/fiber": "6.0.19",
+    "next": "10.2.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "three": "0.128.0"
   },
   "license": "MIT"
 }
diff --git a/examples/with-three-js/pages/birds.js b/examples/with-three-js/pages/birds.js
@@ -1,50 +1,45 @@
-import dynamic from 'next/dynamic'
 import { Suspense } from 'react'
-import { Canvas } from 'react-three-fiber'
+import { Canvas } from '@react-three/fiber'
 import { OrbitControls } from '@react-three/drei'
+import Bird from '../components/Bird'
 
-const Bird = dynamic(() => import('../components/Bird'), { ssr: false })
-
-const Birds = () => {
-  return new Array(5).fill().map((_, i) => {
-    const x = (15 + Math.random() * 30) * (Math.round(Math.random()) ? -1 : 1)
-    const y = -10 + Math.random() * 20
-    const z = -5 + Math.random() * 10
-    const bird = ['stork', 'parrot', 'flamingo'][Math.round(Math.random() * 2)]
-    let speed = bird === 'stork' ? 0.5 : bird === 'flamingo' ? 2 : 5
-    let factor =
-      bird === 'stork'
-        ? 0.5 + Math.random()
-        : bird === 'flamingo'
-        ? 0.25 + Math.random()
-        : 1 + Math.random() - 0.5
-
-    return (
-      <Bird
-        key={i}
-        position={[x, y, z]}
-        rotation={[0, x > 0 ? Math.PI : 0, 0]}
-        speed={speed}
-        factor={factor}
-        url={`/glb/${bird}.glb`}
-      />
-    )
-  })
-}
-
-const BirdsPage = (props) => {
+export default function BirdsPage() {
   return (
     <>
       <Canvas camera={{ position: [0, 0, 35] }}>
         <ambientLight intensity={2} />
         <pointLight position={[40, 40, 40]} />
         <OrbitControls />
         <Suspense fallback={null}>
-          <Birds />
+          {new Array(6).fill().map((_, i) => {
+            const x =
+              (15 + Math.random() * 30) * (Math.round(Math.random()) ? -1 : 1)
+            const y = -10 + Math.random() * 20
+            const z = -5 + Math.random() * 10
+            const bird = ['stork', 'parrot', 'flamingo'][
+              Math.round(Math.random() * 2)
+            ]
+            let speed = bird === 'stork' ? 0.5 : bird === 'flamingo' ? 2 : 5
+            let factor =
+              bird === 'stork'
+                ? 0.5 + Math.random()
+                : bird === 'flamingo'
+                ? 0.25 + Math.random()
+                : 1 + Math.random() - 0.5
+
+            return (
+              <Bird
+                key={i}
+                position={[x, y, z]}
+                rotation={[0, x > 0 ? Math.PI : 0, 0]}
+                speed={speed}
+                factor={factor}
+                url={`/glb/${bird}.glb`}
+              />
+            )
+          })}
         </Suspense>
       </Canvas>
     </>
   )
 }
-
-export default BirdsPage