Convert with-gsap, with-mqtt-js, with-mux-video examples to Typ…

…escript (#43874)

Converted three more examples to TypeScript.

Changes to individual examples pushed as separate commits.

## Documentation / Examples

- [X] Make sure the linting passes by running `pnpm build && pnpm lint`
- [X] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

examples/with-gsap/components/Content.js → examples/with-gsap/components/Content.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useRef } from 'react'
 import { gsap } from 'gsap'
 
-const Content = () => {
+export default function Content() {
   let line1 = useRef(null)
+
   useEffect(() => {
-    gsap.from([line1], 0.6, {
+    gsap.from([line1.current], 0.6, {
       delay: 0.9,
       ease: 'power3.out',
       y: 24,
@@ -15,7 +16,7 @@ const Content = () => {
   }, [line1])
 
   return (
-    <p ref={(el) => (line1 = el)} className="line">
+    <p ref={line1} className="line">
       A Simple example using{' '}
       <a
         href="https://greensock.com/gsap/"
@@ -33,5 +34,3 @@ const Content = () => {
     </p>
   )
 }
-
-export default Content

examples/with-gsap/components/Home.js → examples/with-gsap/components/Home.tsx

@@ -1,7 +1,7 @@
 import Title from './Title'
 import Content from './Content'
 
-const Home = () => {
+export default function Home() {
   return (
     <div className="inner">
       <Title lineContent="With-GSAP" lineContent2="Using NEXT" />
@@ -15,5 +15,3 @@ const Home = () => {
     </div>
   )
 }
-
-export default Home

examples/with-gsap/components/Title.js → examples/with-gsap/components/Title.tsx

@@ -1,11 +1,17 @@
 import { useEffect, useRef } from 'react'
 import { gsap } from 'gsap'
 
-const Title = ({ lineContent, lineContent2 }) => {
+type TitleProps = {
+  lineContent: string
+  lineContent2: string
+}
+
+export default function Title({ lineContent, lineContent2 }: TitleProps) {
   let line1 = useRef(null)
   let line2 = useRef(null)
+
   useEffect(() => {
-    gsap.from([line1, line2], 0.8, {
+    gsap.from([line1.current, line2.current], 0.8, {
       delay: 0.8,
       ease: 'power3.out',
       y: 64,
@@ -14,20 +20,19 @@ const Title = ({ lineContent, lineContent2 }) => {
       },
     })
   }, [line1, line2])
+
   return (
     <h1 className="page-title">
       <div className="line-wrap">
-        <div ref={(el) => (line1 = el)} className="line">
+        <div ref={line1} className="line">
           {lineContent}
         </div>
       </div>
       <div className="line-wrap">
-        <div ref={(el) => (line2 = el)} className="line">
+        <div ref={line2} className="line">
           {lineContent2}
         </div>
       </div>
     </h1>
   )
 }
-
-export default Title

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"
   }
 }

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 <Component {...pageProps} />
+}
+
+export default MyApp

examples/with-gsap/pages/index.js → 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

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"]
+}

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
+  }
+}

examples/with-mqtt-js/lib/useMqtt.js → 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<MqttClient | null>(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)
     })
 

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"
   }
 }

examples/with-mqtt-js/pages/index.js → 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<any[]>([])
+  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<MqttClient | null>(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

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"]
+}

examples/with-mux-video/components/button.js → examples/with-mux-video/components/button.tsx

@@ -1,4 +1,8 @@
-export default function Button({ children, ...otherProps }) {
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  children: React.ReactNode
+}
+
+export default function Button({ children, ...otherProps }: ButtonProps) {
   return (
     <>
       <button {...otherProps}>{children}</button>

examples/with-mux-video/components/error-message.js → 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 (
     <>
       <div className="message">{message || 'Unknown error'}</div>

examples/with-mux-video/components/layout.js → 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 (
     <div className="container">
       <Head>

examples/with-mux-video/components/spinner.js → 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 (
     <>
       <div className="spinner" />