Typescript for js

docs/events-api.md

@@ -2,7 +2,7 @@
 title: Events API reference
 ---
 
-import {Required, Optional} from '../src/js/api-helpers.js';
+import {Required, Optional} from '../src/js/api-helpers.tsx';
 
 The Plausible Events API can be used to record pageviews and custom events. This is useful when tracking Android or iOS mobile apps, or for server side tracking.
 
@@ -90,10 +90,10 @@ URL of the page where the event was triggered. If the URL contains UTM parameter
 The maximum size of the URL, excluding the domain and the query string, is 2,000 characters. Additionally, URLs using the [data URI scheme](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) are not supported by the API.
 
 :::tip The URL parameter will feel strange in a mobile app but you can manufacture something that looks like a web URL
-If you name your mobile app screens like page URLs, Plausible will know how to handle it. So for example, on your login screen you could send something like:  
+If you name your mobile app screens like page URLs, Plausible will know how to handle it. So for example, on your login screen you could send something like:
 
-event: pageview  
-url: app://localhost/login  
+event: pageview
+url: app://localhost/login
 
 The pathname (/login) is what will be shown as the page value in the Plausible dashboard
 :::

docs/sites-api.md

@@ -2,7 +2,7 @@
 title: Site provisioning API reference
 ---
 
-import {Required, Optional} from '../src/js/api-helpers.js';
+import {Required, Optional} from '../src/js/api-helpers.tsx';
 
 The Plausible Site provisioning API offers a way to create and manage sites in your Plausible account programmatically. This is useful if you run many websites or if you're [offering a web analytics dashboard powered by Plausible to your customers](https://plausible.io/white-label-web-analytics). The Site API allows these operations:
 

docs/stats-api-v2.md

@@ -4,17 +4,17 @@ toc_max_heading_level: 4
 sidebar_label: Stats API v2 reference (Beta)
 ---
 
-import ApiV2Example from '../src/js/apiv2-example.js';
-import {Required, Optional} from '../src/js/api-helpers.js';
-import Examples, { ExamplesTip } from '../src/js/examples.js';
+import ApiV2Example from '../src/js/apiv2-example.tsx';
+import {Required, Optional} from '../src/js/api-helpers.tsx';
+import Examples, { ExamplesTip } from '../src/js/examples.tsx';
 import CodeBlock from '@theme/CodeBlock';
-import { SiteContextProvider } from '../src/js/sites.js';
+import { SiteContextProvider } from '../src/js/sites.tsx';
 
 :::warning[Beta feature]
 Please be advised that this feature is currently in beta phase. It might change or break in the coming months as it is refined.
 :::
 
-Plausible Stats API v2 is a powerful single endpoint HTTP interface to **view historical and real-time stats**. In a nutshell, the endpoint `/api/v2/query` accepts both simple and complex stats queries in the POST request body and returns the metrics as JSON. 
+Plausible Stats API v2 is a powerful single endpoint HTTP interface to **view historical and real-time stats**. In a nutshell, the endpoint `/api/v2/query` accepts both simple and complex stats queries in the POST request body and returns the metrics as JSON.
 
 [Try it now for your own site!](#examples)
 

docs/stats-api.md

@@ -2,7 +2,7 @@
 title: Stats API reference
 ---
 
-import {Required, Optional} from '../src/js/api-helpers.js';
+import {Required, Optional} from '../src/js/api-helpers.tsx';
 
 The Plausible Stats API offers a way to retrieve your stats programmatically. It's a read-only interface to present historical and real-time stats only. Take a look at our [events API](events-api.md) if you want to send pageviews or custom events to our backend and our [sites API](sites-api.md) if you want to manage your sites through the API.
 

package.json

@@ -6,7 +6,8 @@
     "start": "docusaurus start",
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
-    "deploy": "docusaurus deploy"
+    "deploy": "docusaurus deploy",
+    "serve": "docusaurus serve"
   },
   "dependencies": {
     "@docusaurus/core": "^3.5.2",
@@ -31,5 +32,11 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "^3.5.2",
+    "@docusaurus/tsconfig": "^3.5.2",
+    "@docusaurus/types": "^3.5.2",
+    "typescript": "^5.5.4"
   }
 }

src/js/api-helpers.js → src/js/api-helpers.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-export const Required = ({children, color}) => (
+export const Required = () => (
   <span
     style={{
       color: '#ED8936',
@@ -13,7 +13,7 @@ export const Required = ({children, color}) => (
   </span>
 );
 
-export const Optional = ({children, color}) => (
+export const Optional = () => (
   <span
     style={{
       color: '#718096',

src/js/apiv2-example.js → src/js/apiv2-example.tsx

@@ -30,17 +30,17 @@ export default function ApiV2Example(props) {
     setCode(code)
     setCanReset(true)
     setResponse(null)
-  })
+  }, [])
 
   const resetCode = useCallback(() => {
     setCode(getCode(props.request, selectedSite))
     setCanReset(false)
     setResponse(null)
-  })
+  }, [])
 
   const copyCode = useCallback(() => {
     navigator.clipboard.writeText(code)
-  })
+  }, [])
 
   const runCode = useCallback(async () => {
     setResponse(null)
@@ -54,7 +54,7 @@ export default function ApiV2Example(props) {
     })
 
     setActiveTab("response")
-  })
+  }, [])
 
   return (
     <Tabs activeTab={activeTab} onTabChange={setActiveTab}>
@@ -121,9 +121,16 @@ export default function ApiV2Example(props) {
   )
 }
 
-function JsonSchemaEditor({ value, schema, onChange, readOnly }) {
+type EditorProps = {
+  value: string,
+  schema?: string,
+  onChange?: (code: string) => void,
+  readOnly?: boolean
+}
+
+function JsonSchemaEditor({ value, schema, onChange, readOnly }: EditorProps) {
   const [height, setHeight] = useState(MIN_HEIGHT)
-  const editorRef = useRef()
+  const editorRef = useRef<any>()
 
   const onMount = useCallback((editor, monaco) => {
     editorRef.current = editor
@@ -140,14 +147,14 @@ function JsonSchemaEditor({ value, schema, onChange, readOnly }) {
     }
     editor.onDidChangeModelContent(handleEditorChange)
     handleEditorChange()
-  })
+  }, [schema])
 
   const handleEditorChange = useCallback(() => {
     const editAreaHeight = editorRef.current.getContentHeight()
     if (editAreaHeight > height && height < MAX_HEIGHT) {
       setHeight(editAreaHeight)
     }
-  }, []);
+  }, [editorRef]);
 
   return (
     <Editor
@@ -164,7 +171,6 @@ function JsonSchemaEditor({ value, schema, onChange, readOnly }) {
         glyphMargin: false,
         wordWrap: 'off',
         lineNumbers: 'on',
-        tabFocusMode: false,
         overviewRulerLanes: 0,
         hideCursorInOverviewRuler: false,
         scrollBeyondLastLine: false,
@@ -198,7 +204,7 @@ async function postQuery(query) {
   }
 }
 
-function getCode(name, selectedSite) {
+function getCode(name: string, selectedSite: string | null) {
   let exampleCode = Examples[name] || ""
 
   if (selectedSite) {

src/js/examples.js → src/js/examples.tsx

@@ -44,4 +44,4 @@ export function ExamplesTip() {
   )
 }
 
-export default Object.fromEntries(examplePaths.map((path) => [path, read(path)]))
+export default Object.fromEntries(examplePaths.map((path) => [path, read(path)])) as Record<string, string | undefined>

src/js/sites.js → src/js/sites.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useEffect, useState } from 'react'
+import React, { ReactNode, createContext, useEffect, useState } from 'react'
 import BrowserOnly from '@docusaurus/BrowserOnly'
 
 export const SiteContext = createContext(null)
@@ -12,7 +12,7 @@ function NestedProvider({ children }) {
 
   const [selectedSite, setSelectedSite] = useState(localStorage.getItem("plausible_docs_site"))
 
-  function selectSite(siteDomain) {
+  function selectSite(siteDomain: string) {
     localStorage.setItem("plausible_docs_site", siteDomain)
     setSelectedSite(siteDomain)
   }
@@ -53,7 +53,7 @@ function NestedProvider({ children }) {
 }
 
 // Ensure that content requiring site data is only rendered in the browser
-export function SiteContextProvider(props) {
+export function SiteContextProvider(props: { children: ReactNode }) {
   return (
     <BrowserOnly>
       {() => (<NestedProvider>{props.children}</NestedProvider>)}

tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@docusaurus/tsconfig",
+  "compilerOptions": {
+    "baseUrl": "."
+  }
+}