-
(line2 = el)} className="line">
+
{lineContent2}
)
}
-
-export default Title
diff --git a/examples/with-gsap/package.json b/examples/with-gsap/package.json
index 37ed68998474a7b..888b6ea86dbc763 100644
--- a/examples/with-gsap/package.json
+++ b/examples/with-gsap/package.json
@@ -6,11 +6,19 @@
"start": "next start"
},
"dependencies": {
- "gsap": "^3.0.1",
+ "gsap": "^3.11.3",
"next": "latest",
"react": "^18.2.0",
"react-dom": "^18.2.0",
- "react-transition-group": "^4.3.0",
- "sass": "1.29.0"
+ "react-transition-group": "^4.4.5",
+ "sass": "^1.56.2"
+ },
+ "devDependencies": {
+ "@types/gsap": "^3.0.0",
+ "@types/node": "^18.11.12",
+ "@types/react": "^18.0.26",
+ "@types/react-dom": "^18.0.9",
+ "@types/react-transition-group": "^4.4.5",
+ "typescript": "^4.9.4"
}
}
diff --git a/examples/with-gsap/pages/_app.js b/examples/with-gsap/pages/_app.js
deleted file mode 100644
index 7b11d92cf4b6b60..000000000000000
--- a/examples/with-gsap/pages/_app.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import '../App.scss'
-
-function MyApp({ Component, pageProps }) {
- return
-}
-
-export default MyApp
diff --git a/examples/with-gsap/pages/_app.tsx b/examples/with-gsap/pages/_app.tsx
new file mode 100644
index 000000000000000..e12b69b03d7995f
--- /dev/null
+++ b/examples/with-gsap/pages/_app.tsx
@@ -0,0 +1,8 @@
+import type { AppProps } from 'next/app'
+import '../App.scss'
+
+function MyApp({ Component, pageProps }: AppProps) {
+ return
+}
+
+export default MyApp
diff --git a/examples/with-gsap/pages/_document.js b/examples/with-gsap/pages/_document.js
deleted file mode 100644
index c0219bc9e93dae6..000000000000000
--- a/examples/with-gsap/pages/_document.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Html, Head, Main, NextScript } from 'next/document'
-
-export default function Document() {
- return (
-
-
-
-
-
-
-
-
-
- )
-}
diff --git a/examples/with-gsap/pages/api/hello.js b/examples/with-gsap/pages/api/hello.js
deleted file mode 100644
index df63de88fa67cb0..000000000000000
--- a/examples/with-gsap/pages/api/hello.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-
-export default function handler(req, res) {
- res.status(200).json({ name: 'John Doe' })
-}
diff --git a/examples/with-gsap/pages/index.js b/examples/with-gsap/pages/index.tsx
similarity index 90%
rename from examples/with-gsap/pages/index.js
rename to examples/with-gsap/pages/index.tsx
index 7517015223891d9..0c38d450fa917c4 100644
--- a/examples/with-gsap/pages/index.js
+++ b/examples/with-gsap/pages/index.tsx
@@ -2,8 +2,8 @@ import { CSSTransition } from 'react-transition-group'
import { gsap } from 'gsap'
import Home from '../components/Home'
-function App() {
- const onEnter = (node) => {
+export default function HomePage() {
+ const onEnter = (node: any) => {
gsap.from(
[node.children[0].firstElementChild, node.children[0].lastElementChild],
0.6,
@@ -18,7 +18,7 @@ function App() {
}
)
}
- const onExit = (node) => {
+ const onExit = (node: any) => {
gsap.to(
[node.children[0].firstElementChild, node.children[0].lastElementChild],
0.6,
@@ -51,5 +51,3 @@ function App() {
>
)
}
-
-export default App
diff --git a/examples/with-gsap/tsconfig.json b/examples/with-gsap/tsconfig.json
new file mode 100644
index 000000000000000..99710e857874ff8
--- /dev/null
+++ b/examples/with-gsap/tsconfig.json
@@ -0,0 +1,20 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+ "exclude": ["node_modules"]
+}
diff --git a/examples/with-mqtt-js/environment.d.ts b/examples/with-mqtt-js/environment.d.ts
new file mode 100644
index 000000000000000..96efc89f4ae691a
--- /dev/null
+++ b/examples/with-mqtt-js/environment.d.ts
@@ -0,0 +1,8 @@
+declare namespace NodeJS {
+ export interface ProcessEnv {
+ readonly NEXT_PUBLIC_MQTT_URI: string
+ readonly NEXT_PUBLIC_MQTT_USERNAME: string
+ readonly NEXT_PUBLIC_MQTT_PASSWORD: string
+ readonly NEXT_PUBLIC_MQTT_CLIENTID: string
+ }
+}
diff --git a/examples/with-mqtt-js/lib/useMqtt.js b/examples/with-mqtt-js/lib/useMqtt.ts
similarity index 71%
rename from examples/with-mqtt-js/lib/useMqtt.js
rename to examples/with-mqtt-js/lib/useMqtt.ts
index 973fab6059eb8f7..8e049d4eb60ebe7 100644
--- a/examples/with-mqtt-js/lib/useMqtt.js
+++ b/examples/with-mqtt-js/lib/useMqtt.ts
@@ -1,13 +1,21 @@
+import type { MqttClient, IClientOptions } from 'mqtt'
import MQTT from 'mqtt'
import { useEffect, useRef } from 'react'
+interface useMqttProps {
+ uri: string
+ options?: IClientOptions
+ topicHandlers?: { topic: string; handler: (payload: any) => void }[]
+ onConnectedHandler?: (client: MqttClient) => void
+}
+
function useMqtt({
uri,
options = {},
topicHandlers = [{ topic: '', handler: ({ topic, payload, packet }) => {} }],
onConnectedHandler = (client) => {},
-}) {
- const clientRef = useRef(null)
+}: useMqttProps) {
+ const clientRef = useRef
(null)
useEffect(() => {
if (clientRef.current) return
@@ -23,9 +31,9 @@ function useMqtt({
const client = clientRef.current
topicHandlers.forEach((th) => {
- client.subscribe(th.topic)
+ client?.subscribe(th.topic)
})
- client.on('message', (topic, rawPayload, packet) => {
+ client?.on('message', (topic: string, rawPayload: any, packet: any) => {
const th = topicHandlers.find((t) => t.topic === topic)
let payload
try {
@@ -36,7 +44,7 @@ function useMqtt({
if (th) th.handler({ topic, payload, packet })
})
- client.on('connect', () => {
+ client?.on('connect', () => {
if (onConnectedHandler) onConnectedHandler(client)
})
diff --git a/examples/with-mqtt-js/package.json b/examples/with-mqtt-js/package.json
index 798499c254e0fb8..61613393e082a33 100644
--- a/examples/with-mqtt-js/package.json
+++ b/examples/with-mqtt-js/package.json
@@ -6,9 +6,15 @@
"start": "next start"
},
"dependencies": {
- "mqtt": "4.2.6",
+ "mqtt": "^4.3.7",
"next": "latest",
"react": "^18.2.0",
"react-dom": "^18.2.0"
+ },
+ "devDependencies": {
+ "@types/node": "^18.11.12",
+ "@types/react": "^18.0.26",
+ "@types/react-dom": "^18.0.9",
+ "typescript": "^4.9.4"
}
}
diff --git a/examples/with-mqtt-js/pages/index.js b/examples/with-mqtt-js/pages/index.tsx
similarity index 81%
rename from examples/with-mqtt-js/pages/index.js
rename to examples/with-mqtt-js/pages/index.tsx
index 6de3eedd3333474..a8cae982c1d8505 100644
--- a/examples/with-mqtt-js/pages/index.js
+++ b/examples/with-mqtt-js/pages/index.tsx
@@ -1,9 +1,10 @@
import { useState, useRef } from 'react'
+import type { MqttClient } from 'mqtt'
import useMqtt from '../lib/useMqtt'
export default function Home() {
- const [incommingMessages, setIncommingMessages] = useState([])
- const addMessage = (message) => {
+ const [incommingMessages, setIncommingMessages] = useState([])
+ const addMessage = (message: any) => {
setIncommingMessages((incommingMessages) => [...incommingMessages, message])
}
const clearMessages = () => {
@@ -13,14 +14,14 @@ export default function Home() {
const incommingMessageHandlers = useRef([
{
topic: 'topic1',
- handler: (msg) => {
+ handler: (msg: string) => {
addMessage(msg)
},
},
])
- const mqttClientRef = useRef(null)
- const setMqttClient = (client) => {
+ const mqttClientRef = useRef(null)
+ const setMqttClient = (client: MqttClient) => {
mqttClientRef.current = client
}
useMqtt({
@@ -34,7 +35,7 @@ export default function Home() {
onConnectedHandler: (client) => setMqttClient(client),
})
- const publishMessages = (client) => {
+ const publishMessages = (client: any) => {
if (!client) {
console.log('(publishMessages) Cannot publish, mqttClient: ', client)
return
diff --git a/examples/with-mqtt-js/tsconfig.json b/examples/with-mqtt-js/tsconfig.json
new file mode 100644
index 000000000000000..99710e857874ff8
--- /dev/null
+++ b/examples/with-mqtt-js/tsconfig.json
@@ -0,0 +1,20 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+ "exclude": ["node_modules"]
+}
diff --git a/examples/with-mux-video/components/button.js b/examples/with-mux-video/components/button.tsx
similarity index 78%
rename from examples/with-mux-video/components/button.js
rename to examples/with-mux-video/components/button.tsx
index b76d6e0ad3c1838..f1349302c276ffd 100644
--- a/examples/with-mux-video/components/button.js
+++ b/examples/with-mux-video/components/button.tsx
@@ -1,4 +1,8 @@
-export default function Button({ children, ...otherProps }) {
+type ButtonProps = React.ButtonHTMLAttributes & {
+ children: React.ReactNode
+}
+
+export default function Button({ children, ...otherProps }: ButtonProps) {
return (
<>
diff --git a/examples/with-mux-video/components/error-message.js b/examples/with-mux-video/components/error-message.tsx
similarity index 71%
rename from examples/with-mux-video/components/error-message.js
rename to examples/with-mux-video/components/error-message.tsx
index 75ae50f96796f6d..140de09a219efd9 100644
--- a/examples/with-mux-video/components/error-message.js
+++ b/examples/with-mux-video/components/error-message.tsx
@@ -1,4 +1,8 @@
-export default function ErrorMessage({ message }) {
+interface ErrorMessageProps {
+ message?: string
+}
+
+export default function ErrorMessage({ message }: ErrorMessageProps) {
return (
<>
{message || 'Unknown error'}
diff --git a/examples/with-mux-video/components/layout.js b/examples/with-mux-video/components/layout.tsx
similarity index 95%
rename from examples/with-mux-video/components/layout.js
rename to examples/with-mux-video/components/layout.tsx
index 76c050a15951569..3d3995190a09607 100644
--- a/examples/with-mux-video/components/layout.js
+++ b/examples/with-mux-video/components/layout.tsx
@@ -1,6 +1,16 @@
import Head from 'next/head'
import { MUX_HOME_PAGE_URL } from '../constants'
+interface LayoutProps {
+ title?: string
+ description?: string
+ metaTitle?: string
+ metaDescription?: string
+ image?: string
+ children: React.ReactNode
+ loadTwitterWidget?: boolean
+}
+
export default function Layout({
title,
description,
@@ -9,7 +19,7 @@ export default function Layout({
image = 'https://with-mux-video.vercel.app/mux-nextjs-og-image.png',
children,
loadTwitterWidget,
-}) {
+}: LayoutProps) {
return (
diff --git a/examples/with-mux-video/components/spinner.js b/examples/with-mux-video/components/spinner.tsx
similarity index 90%
rename from examples/with-mux-video/components/spinner.js
rename to examples/with-mux-video/components/spinner.tsx
index 7f8b4a11a009c64..59a861a3aac47f9 100644
--- a/examples/with-mux-video/components/spinner.js
+++ b/examples/with-mux-video/components/spinner.tsx
@@ -1,4 +1,9 @@
-export default function Spinner({ size = 6, color = '#999' }) {
+interface SpinnerProps {
+ size?: Number
+ color?: string
+}
+
+export default function Spinner({ size = 6, color = '#999' }: SpinnerProps) {
return (
<>
diff --git a/examples/with-mux-video/components/upload-form.js b/examples/with-mux-video/components/upload-form.tsx
similarity index 84%
rename from examples/with-mux-video/components/upload-form.js
rename to examples/with-mux-video/components/upload-form.tsx
index 6b9c8509a3e2395..e2b95ec21c273ce 100644
--- a/examples/with-mux-video/components/upload-form.js
+++ b/examples/with-mux-video/components/upload-form.tsx
@@ -6,7 +6,7 @@ import Button from './button'
import Spinner from './spinner'
import ErrorMessage from './error-message'
-const fetcher = (url) => {
+const fetcher = (url: string) => {
return fetch(url).then((res) => res.json())
}
@@ -14,9 +14,9 @@ const UploadForm = () => {
const [isUploading, setIsUploading] = useState(false)
const [isPreparing, setIsPreparing] = useState(false)
const [uploadId, setUploadId] = useState(null)
- const [progress, setProgress] = useState(null)
+ const [progress, setProgress] = useState
(null)
const [errorMessage, setErrorMessage] = useState('')
- const inputRef = useRef(null)
+ const inputRef = useRef(null)
const { data, error } = useSwr(
() => (isPreparing ? `/api/upload/${uploadId}` : null),
@@ -30,7 +30,6 @@ const UploadForm = () => {
if (upload && upload.asset_id) {
Router.push({
pathname: `/asset/${upload.asset_id}`,
- scroll: false,
})
}
}, [upload])
@@ -54,18 +53,25 @@ const UploadForm = () => {
}
}
- const startUpload = (evt) => {
+ const startUpload = () => {
setIsUploading(true)
+
+ const files = inputRef.current?.files
+ if (!files) {
+ setErrorMessage('An unexpected issue occurred')
+ return
+ }
+
const upload = UpChunk.createUpload({
endpoint: createUpload,
- file: inputRef.current.files[0],
+ file: files[0],
})
- upload.on('error', (err) => {
+ upload.on('error', (err: any) => {
setErrorMessage(err.detail.message)
})
- upload.on('progress', (progress) => {
+ upload.on('progress', (progress: any) => {
setProgress(Math.floor(progress.detail))
})
@@ -90,7 +96,7 @@ const UploadForm = () => {
>
) : (