torjus/ministream-frontend
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: torjus:2e96de56e6c7dfb4adbaccea2fa15c85abfca4c1
Branches Tags
torjus:master
..
compare: torjus:bbd3adc4f77c29f900b23f574a891a1171e8ac4c
Branches Tags
torjus:master

No commits in common. "2e96de56e6c7dfb4adbaccea2fa15c85abfca4c1" and "bbd3adc4f77c29f900b23f574a891a1171e8ac4c" have entirely different histories.
2e96de56e6 ... bbd3adc4f7

15 changed files with 536 additions and 1699 deletions
Show Stats Expand all files Collapse all files

7
.eslintrc.cjs
View File

@ -1,7 +0,0 @@
/* eslint-env node */
module.exports = {
extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
parser: "@typescript-eslint/parser",
plugins: ["@typescript-eslint"],
root: true,
};

2
.git-blame-ignore-revs
View File

@ -1,2 +0,0 @@
# First prettier run
3fd391efc774007b6f4fb3c92a82c6bf0efce207

2
.prettierignore
View File

@ -1,2 +0,0 @@
dist/
node_modules/

1
.prettierrc
View File

@ -1 +0,0 @@
{}

1263
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -13,11 +13,7 @@
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"devDependencies": { "devDependencies": {
"@typescript-eslint/eslint-plugin": "^6.13.2",
"@typescript-eslint/parser": "^6.13.2",
"eslint": "^8.55.0",
"parcel": "^2.10.3", "parcel": "^2.10.3",
"prettier": "^3.1.0",
"process": "^0.11.10", "process": "^0.11.10",
"ts-loader": "^9.5.1", "ts-loader": "^9.5.1",
"typescript": "^5.3.2" "typescript": "^5.3.2"

2
src/css/fonts.css
View File

@ -1 +1 @@
@import url("https://fonts.googleapis.com/css2?family=Prompt:wght@300;600&display=swap"); @import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;600&display=swap');

18
src/css/style.css
View File

@ -1,10 +1,10 @@
:root { :root {
--menu-header-color: #1b1f22; --menu-header-color: #1B1F22;
--menu-header-text: #ffebf4; --menu-header-text: #FFEBF4;
--menu-background-color: #435058; --menu-background-color: #435058;
--menu-item-color: #4f5f69; --menu-item-color: #4F5F69;
--menu-item-hover: #607480; --menu-item-hover: #607480;
--menu-selected-color: #7f929f; --menu-selected-color: #7F929F;
--main-background: #121517; --main-background: #121517;
} }
@ -19,7 +19,7 @@ body {
height: 100%; height: 100%;
background-color: var(--main-background); background-color: var(--main-background);
color: var(--menu-header-text); color: var(--menu-header-text);
font-family: "Prompt", sans-serif; font-family: 'Prompt', sans-serif;
font-weight: 600; font-weight: 600;
} }
@ -83,7 +83,7 @@ ul.menu-list {
a.menu-link { a.menu-link {
padding-left: 2em; padding-left: 2em;
font-family: "Prompt", sans-serif; font-family: 'Prompt', sans-serif;
font-weight: 300; font-weight: 300;
font-size: larger; font-size: larger;
margin-right: auto; margin-right: auto;
@ -95,7 +95,7 @@ a.menu-link {
background-color: var(--menu-header-color); background-color: var(--menu-header-color);
color: var(--menu-header-text); color: var(--menu-header-text);
font-size: larger; font-size: larger;
font-family: "Prompt", sans-serif; font-family: 'Prompt', sans-serif;
font-weight: 600; font-weight: 600;
} }
@ -114,7 +114,7 @@ a.menu-heading {
} }
.menu-viewcount { .menu-viewcount {
font-family: "Prompt", sans-serif; font-family: 'Prompt', sans-serif;
font-size: larger; font-size: larger;
font-weight: 300; font-weight: 300;
color: var(--menu-header-text); color: var(--menu-header-text);
@ -134,7 +134,7 @@ li.menu-item:hover {
} }
li.menu-selected { li.menu-selected {
background-color: var(--menu-selected-color); background-color: var(--menu-selected-color)
} }
#app { #app {

2
src/index.html
View File

@ -6,7 +6,7 @@
<script src="./js/app.tsx" type="module"></script> <script src="./js/app.tsx" type="module"></script>
<link rel="stylesheet" href="./css/style.css" /> <link rel="stylesheet" href="./css/style.css" />
<link rel="stylesheet" href="./css/fonts.css" /> <link rel="stylesheet" href="./css/fonts.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>
<div id="app" /> <div id="app" />

73
src/js/api.ts
View File

@ -1,75 +1,82 @@
export interface SiteInfo { export interface SiteInfo {
siteName: string; siteName: string
} }
export interface StreamInfo { export interface StreamInfo {
streamKey: string; streamKey: string
viewCount: number; viewCount: number
} }
export class MinistreamApiClient { export class MinistreamApiClient {
ENV: string; ENV: string
constructor() { constructor() {
if (process.env.NODE_ENV) { if (process.env.NODE_ENV) {
this.ENV = process.env.NODE_ENV; this.ENV = process.env.NODE_ENV
} else { } else {
this.ENV = "production"; this.ENV = "production"
} }
} }
async listStreams(): Promise<StreamInfo[]> { async listStreams(): Promise<StreamInfo[]> {
let data: StreamInfo[] = []; var data: StreamInfo[] = [];
let url = "/whip"; var url = "/whip"
if (this.ENV !== "production") { if (this.ENV !== "production") {
url = "http://localhost:8080/whip"; url = "http://localhost:8080/whip"
} }
const resp = await fetch(url); try {
data = (await resp.json()) as unknown as StreamInfo[]; const resp = await fetch(
url,
);
data = await resp.json() as unknown as StreamInfo[];
}
catch (e) {
throw e;
}
const sortedStreams = data.sort((a, b) => { const sortedStreams = data.sort((a, b) => {
if (a.streamKey > b.streamKey) { if (a.streamKey > b.streamKey) {
return -1; return -1
} else if (a.streamKey < b.streamKey) { } else if (a.streamKey < b.streamKey) {
return 1; return 1
} }
return 0; return 0
}); })
return sortedStreams; return sortedStreams;
} }
async postOffer( async postOffer(streamKey: string, offer_sdp: RTCSessionDescription): Promise<RTCSessionDescription> {
streamKey: string, var url = "/whip/" + streamKey
offer_sdp: RTCSessionDescription,
): Promise<RTCSessionDescription> {
let url = "/whip/" + streamKey;
if (this.ENV !== "production") { if (this.ENV !== "production") {
url = "http://localhost:8080/whip/" + streamKey; url = "http://localhost:8080/whip/" + streamKey
} }
const resp = await fetch(url, { const resp = await fetch(url,
{
method: "POST", method: "POST",
body: offer_sdp.sdp, body: offer_sdp.sdp
}); })
const body = await resp.text(); const body = await resp.text()
const answer = new RTCSessionDescription({ type: "answer", sdp: body }); const answer = new RTCSessionDescription({ type: "answer", sdp: body })
return answer; return answer
} }
async siteInfo(): Promise<SiteInfo> { async siteInfo(): Promise<SiteInfo> {
let url = "/api/siteinfo"; var url = "/api/siteinfo"
if (this.ENV !== "production") { if (this.ENV !== "production") {
url = "http://localhost:8080/api/siteinfo"; url = "http://localhost:8080/api/siteinfo"
} }
const resp = await fetch(url, { const resp = await fetch(url,
{
method: "GET", method: "GET",
}); })
const data = resp.json(); const data = resp.json()
return data as unknown as SiteInfo; return data as unknown as SiteInfo
} }
} }

86
src/js/app.tsx
View File

@ -1,80 +1,82 @@
import { createRoot } from "react-dom/client"; import { createRoot } from "react-dom/client";
import { Menu } from "./menu"; import { Menu } from "./menu";
import { useEffect, useState } from "react"; import { createContext, useEffect, useState } from "react";
import { MediaContainer } from "./media"; import { MediaContainer } from "./media";
import { MinistreamApiClient, StreamInfo } from "./api"; import { MinistreamApiClient, StreamInfo } from "./api";
import React from "react"; import React from "react";
import * as Log from "./log"; import { Log } from "./log";
interface AppProps { interface AppProps {
api: MinistreamApiClient; api: MinistreamApiClient
} }
const titleKey = "ministream.title"; const titleKey = "ministream.title"
function setTitleFromLocalstorage() { function setTitleFromLocalstorage() {
const title = localStorage.getItem(titleKey); var title = localStorage.getItem(titleKey)
if (title) { if (title) {
setTitle(title); setTitle(title)
} }
} }
function setTitle(title: string) { function setTitle(title: string) {
const el = document.querySelector("title"); const el = document.querySelector('title')
if (el) { if (el) {
el.textContent = title; el.textContent = title
} }
} }
export function App({ api }: AppProps) { export function App({ api }: AppProps) {
const [streamList, setStreamList] = useState<StreamInfo[]>([]); const [streamList, setStreamList] = useState<StreamInfo[]>([])
const [selectedStream, setSelectedStream] = useState<string | null>(null); const [selectedStream, setSelectedStream] = useState<string | null>(null)
const updateSelect = (item: string | null) => { const updateSelect = (item: string | null) => {
setSelectedStream(item); setSelectedStream(item)
}; }
const updateTitle = () => { const updateTitle = () => {
api.siteInfo().then((info) => { api.siteInfo().then((info) => {
if (info.siteName != document.title) { if (info.siteName != document.title) {
setTitle(info.siteName); setTitle(info.siteName)
localStorage.setItem(titleKey, info.siteName); localStorage.setItem(titleKey, info.siteName)
} }
}); })
return; return
}; }
useEffect(() => { useEffect(() => {
const updateStreamList = () => { const updateStreamList = () => {
api.listStreams().then((list) => { api.listStreams().then((list) => {
setStreamList((current) => { setStreamList((current) => {
if (list.length != current.length) { if (list.length != current.length) {
Log.Debug("Updated streamList!"); Log.Debug("Updated streamList!")
return list; return list
} }
if ( if (!list.every((_, idx) => {
!list.every((_, idx) => { return list[idx].streamKey === current[idx].streamKey
return list[idx].streamKey === current[idx].streamKey; })) {
Log.Debug("Updated streamList..")
return list
}
return current
})
}) })
) {
Log.Debug("Updated streamList..");
return list;
}
return current;
});
});
};
updateStreamList(); }
updateStreamList()
const updateInterval = setInterval(() => { const updateInterval = setInterval(() => {
updateStreamList(); updateStreamList()
}, 10000); }, 10000)
return () => clearInterval(updateInterval); return () => clearInterval(updateInterval)
}, []); }, [])
useEffect(() => { useEffect(() => {
updateTitle(); updateTitle()
}, []); }, [])
return ( return (
<> <>
@ -85,13 +87,13 @@ export function App({ api }: AppProps) {
/> />
<MediaContainer selectedStream={selectedStream} api={api} /> <MediaContainer selectedStream={selectedStream} api={api} />
</> </>
); )
} }
const rootElement = document.getElementById("app"); const rootElement = document.getElementById("app");
setTitleFromLocalstorage(); setTitleFromLocalstorage()
if (rootElement) { if (rootElement) {
const root = createRoot(rootElement); const root = createRoot(rootElement)
const api = new MinistreamApiClient(); const api = new MinistreamApiClient()
root.render(<App api={api} />); root.render(<App api={api} />)
} }

76
src/js/log.ts
View File

@ -1,55 +1,61 @@
function levelToNumber(level: Level): number {
switch (level) {
case "DEBUG":
return 0; export namespace Log {
case "INFO": var currentLevel: Level = "INFO"
return 1;
case "ERROR": if (process.env.NODE_ENV !== 'production') {
return 2; currentLevel = "DEBUG"
case "WARN":
return 3;
}
} }
let currentLevel: Level = "INFO"; export type Level = "ERROR" | "WARN" | "INFO" | "DEBUG"
if (process.env.NODE_ENV !== "production") {
currentLevel = "DEBUG";
}
export type Level = "ERROR" | "WARN" | "INFO" | "DEBUG";
export function setLevel(level: Level) { export function setLevel(level: Level) {
currentLevel = level; currentLevel = level
} }
export interface LogArgs { export interface LogArgs {
[key: string]: string; [key: string]: string
} }
const doLog = (level: Level, message: string, extras?: LogArgs) => { export function Error(message: string, extras?: LogArgs) {
let logLine = `[${level}] ${message}`; doLog("ERROR", message, extras)
}
export function Warn(message: string, extras?: LogArgs) {
doLog("WARN", message, extras)
}
export function Info(message: string, extras?: LogArgs) {
doLog("INFO", message, extras)
}
export function Debug(message: string, extras?: LogArgs) {
doLog("DEBUG", message, extras)
}
function doLog(level: Level, message: string, extras?: LogArgs) {
var logLine = `[${level}] ${message}`
if (extras) { if (extras) {
Object.keys(extras).forEach((key) => { Object.keys(extras).forEach((key) => {
logLine = logLine + ` ${key}=${extras[key]}`; logLine = logLine + ` ${key}=${extras[key]}`
}); })
} }
if (levelToNumber(level) >= levelToNumber(currentLevel)) { if (levelToNumber(level) >= levelToNumber(currentLevel)) {
console.log(logLine); console.log(logLine)
}
} }
};
export function Error(message: string, extras?: LogArgs) { function levelToNumber(level: Level): number {
doLog("ERROR", message, extras); switch (level) {
case "DEBUG":
return 0
case "INFO":
return 1
case "ERROR":
return 2
case "WARN":
return 3
} }
export function Warn(message: string, extras?: LogArgs) {
doLog("WARN", message, extras);
} }
export function Info(message: string, extras?: LogArgs) {
doLog("INFO", message, extras);
}
export function Debug(message: string, extras?: LogArgs) {
doLog("DEBUG", message, extras);
} }

165
src/js/media.tsx
View File

@ -1,166 +1,159 @@
import { useRef, useEffect, useState } from "react"; import { ComponentProps, useRef, useEffect, useState } from "react"
import { MinistreamApiClient } from "./api"; import { MinistreamApiClient } from "./api"
import React from "react"; import { resolve } from "path"
import * as Log from "./log"; import React from "react"
import { Log } from "./log"
type MediaContainerProps = { type MediaContainerProps = {
selectedStream: string | null; selectedStream: string | null
api: MinistreamApiClient; api: MinistreamApiClient
}; }
export function MediaContainer({ selectedStream, api }: MediaContainerProps) { export function MediaContainer({ selectedStream, api }: MediaContainerProps) {
const [iceReady, setICEReady] = useState(false); const [iceReady, setICEReady] = useState(false)
const [remoteReady, setRemoteReady] = useState(false); const [remoteReady, setRemoteReady] = useState(false)
const [pc, setPC] = useState(new RTCPeerConnection()); const [pc, setPC] = useState(new RTCPeerConnection())
const [ms, setMs] = useState(new MediaStream()); const [ms, setMs] = useState(new MediaStream())
// if selected stream changed, recreate pc, and set all to not ready. // if selected stream changed, recreate pc, and set all to not ready.
useEffect(() => { useEffect(() => {
Log.Debug("Ran useEffect.", { because_state: "selectedStream" }); Log.Debug("Ran useEffect.", { "because_state": "selectedStream" })
setPC( setPC(new RTCPeerConnection({
new RTCPeerConnection({ iceServers: [{ urls: "stun:stun.l.google.com:19302" }]
iceServers: [{ urls: "stun:stun.l.google.com:19302" }], }))
}), setICEReady(false)
); setRemoteReady(false)
setICEReady(false); setMs(new MediaStream())
setRemoteReady(false);
setMs(new MediaStream()); }, [selectedStream])
}, [selectedStream]);
useEffect(() => { useEffect(() => {
Log.Debug("Ran useEffect.", { because_state: "pc" }); Log.Debug("Ran useEffect.", { "because_state": "pc" })
pc.addTransceiver("video"); pc.addTransceiver("video")
pc.addTransceiver("audio"); pc.addTransceiver("audio")
pc.ontrack = (event) => { pc.ontrack = (event) => {
event.streams.forEach((st) => event.streams.forEach((st) => st.getTracks().forEach((track) => {
st.getTracks().forEach((track) => { ms.addTrack(track)
ms.addTrack(track); }))
}), }
);
};
pc.onicecandidate = (event) => { pc.onicecandidate = (event) => {
if (!event.candidate) { if (!event.candidate) {
Log.Info("ICE gathering complete."); Log.Info("ICE gathering complete.")
setICEReady(true); setICEReady(true)
} else { } else {
Log.Debug("Adding ICE candidate.", { Log.Debug("Adding ICE candidate.", { "candidate": event.candidate.candidate })
candidate: event.candidate.candidate, }
});
} }
};
pc.oniceconnectionstatechange = () => { pc.oniceconnectionstatechange = () => {
Log.Info("ICE gathering complete."); Log.Info("ICE gathering complete.")
}; }
pc.createOffer().then((offer) => { pc.createOffer().then((offer) => {
pc.setLocalDescription(offer).then(() => { pc.setLocalDescription(offer).then(() => { Log.Debug("Local description set.") })
Log.Debug("Local description set."); })
}); }, [pc])
});
}, [pc]);
useEffect(() => { useEffect(() => {
Log.Debug("Ran useEffect", { because_state: "iceReady" }); Log.Debug("Ran useEffect", { "because_state": "iceReady" })
if (!iceReady || !selectedStream) { if (!iceReady || !selectedStream) {
return; return
} }
const localOfferSdp = pc.localDescription?.sdp; const localOfferSdp = pc.localDescription?.sdp
if (!localOfferSdp) { if (!localOfferSdp) {
Log.Error("Unable to get local description."); Log.Error("Unable to get local description.")
return; return
} }
const localOffer = new RTCSessionDescription({ const localOffer = new RTCSessionDescription({ type: "offer", sdp: localOfferSdp })
type: "offer",
sdp: localOfferSdp,
});
api.postOffer(selectedStream, localOffer).then((remote) => { api.postOffer(selectedStream, localOffer).then((remote) => {
pc.setRemoteDescription(remote).then(() => { pc.setRemoteDescription(remote).then(() => {
setRemoteReady(true); setRemoteReady(true)
}); })
}); })
}, [iceReady]); }, [iceReady])
useEffect(() => { useEffect(() => {
Log.Debug("Ran useEffect", { because_state: "remoteReady" }); Log.Debug("Ran useEffect", { "because_state": "remoteReady" })
if (!iceReady || !selectedStream || !remoteReady) { if (!iceReady || !selectedStream || !remoteReady) {
return; return
} }
}, [remoteReady]); }, [remoteReady])
const getElement = () => { const getElement = () => {
if (!selectedStream) { if (!selectedStream) {
return ( return <LoadingText spinner={true} text="Waiting for stream selection." />
<LoadingText spinner={true} text="Waiting for stream selection." />
);
} }
if (!iceReady) { if (!iceReady) {
return <LoadingText spinner={true} text="Waiting for ICE gathering." />; return <LoadingText spinner={true} text="Waiting for ICE gathering." />
} }
if (!remoteReady) { if (!remoteReady) {
return <LoadingText spinner={true} text="Waiting for remote server." />; return <LoadingText spinner={true} text="Waiting for remote server." />
} }
return ( return (
<div className="video-wrapper"> <div className="video-wrapper">
<VideoPlayer ms={ms} /> <VideoPlayer ms={ms} />
</div> </div>
); )
}; }
return ( return (
<div id="main"> <div id="main">
<main>{getElement()}</main> <main>
{getElement()}
</main>
</div> </div>
); )
} }
interface VideoPlayerProps { interface VideoPlayerProps {
ms: MediaStream; ms: MediaStream
} }
export function VideoPlayer({ ms }: VideoPlayerProps) { export function VideoPlayer({ ms }: VideoPlayerProps) {
const [ready, setReady] = useState(false); const [ready, setReady] = useState(false);
const videoRef = useRef<HTMLVideoElement>(null); const videoRef = useRef<HTMLVideoElement>(null)
useEffect(() => { useEffect(() => {
if (ready) { if (ready) {
return; return
} }
if (videoRef.current) { if (videoRef.current) {
if (videoRef.current) { if (videoRef.current) {
const ref = videoRef.current; const ref = videoRef.current
ref.srcObject = ms; ref.srcObject = ms
videoRef.current.addEventListener("loadeddata", () => { videoRef.current.addEventListener('loadeddata', () => {
ref.hidden = false; ref.hidden = false
setReady(true); setReady(true)
}); })
} }
} }
}); })
if (ready) { if (ready) {
return <video id="video" ref={videoRef} autoPlay muted controls />; return (<video id="video" ref={videoRef} autoPlay muted controls />)
} else { } else {
return ( return (
<> <>
<video id="video" ref={videoRef} hidden autoPlay muted controls /> <video id="video" ref={videoRef} hidden autoPlay muted controls />
<LoadingText text="Waiting for video data." spinner={true} /> <LoadingText text="Waiting for video data." spinner={true} />
</> </>
); )
} }
} }
interface LoadingText { interface LoadingText {
text: string; text: string
spinner?: boolean; spinner?: boolean
} }
export function LoadingText({ text, spinner = false }: LoadingText) { export function LoadingText({ text, spinner = false }: LoadingText) {
let spinnerElement = <></>; var spinnerElement = (<></>)
if (spinner) { if (spinner) {
spinnerElement = <Spinner />; spinnerElement = (<Spinner />)
} }
return ( return (
<> <>
@ -171,9 +164,9 @@ export function LoadingText({ text, spinner = false }: LoadingText) {
</div> </div>
</div> </div>
</> </>
); )
} }
export function Spinner() { export function Spinner() {
return <div className="spinner" />; return <div className="spinner" />
} }

60
src/js/menu.tsx
View File

@ -1,67 +1,53 @@
import { createRoot } from "react-dom/client";
import React from "react"; import React from "react";
import { StreamInfo } from "./api"; import { StreamInfo } from "./api";
type StreamSelectCallback = (selected: string | null) => void; type StreamSelectCallback = (selected: string | null) => void
interface MenuProps { interface MenuProps {
items: StreamInfo[]; items: StreamInfo[]
selectedItem: string | null; selectedItem: string | null
selectCallback: StreamSelectCallback; selectCallback: StreamSelectCallback
} }
export function Menu({ items, selectedItem, selectCallback }: MenuProps) { export function Menu({ items, selectedItem, selectCallback }: MenuProps) {
const title = document.title; const title = document.title
const menuitems = () => { const menuitems = () => {
return ( return (
<> <>
{items.map((value, idx) => { {items.map((value, idx) => {
if (selectedItem == value.streamKey) { if (selectedItem == value.streamKey) {
return ( return <>
<>
<li key={idx} className="menu-item menu-selected"> <li key={idx} className="menu-item menu-selected">
<a href={"#" + value} className="menu-link"> <a href={"#" + value} className="menu-link">{value.streamKey}</a>
{value.streamKey}
</a>
<p className="menu-viewcount">{value.viewCount}</p> <p className="menu-viewcount">{value.viewCount}</p>
</li> </li>
</> </>
);
} else { } else {
return ( return <>
<> <li key={idx} onClick={() => {
<li selectCallback(value.streamKey)
key={idx} }} className="menu-item">
onClick={() => { <a href={"#" + value.streamKey} className="menu-link">{value.streamKey}</a>
selectCallback(value.streamKey);
}}
className="menu-item"
>
<a href={"#" + value.streamKey} className="menu-link">
{value.streamKey}
</a>
<p className="menu-viewcount">{value.viewCount}</p> <p className="menu-viewcount">{value.viewCount}</p>
</li> </li>
</> </>
);
} }
})} })}
</> </>
); )
}; }
return ( return (
<div id="menu"> <div id="menu">
<aside> <aside>
<a <a className="menu-heading" onClick={() => {
className="menu-heading" selectCallback(null)
onClick={() => { }} href="#">{title}</a>
selectCallback(null); <ul className="menu-list">
}} {menuitems()}
href="#" </ul>
>
{title}
</a>
<ul className="menu-list">{menuitems()}</ul>
</aside> </aside>
</div> </div>
); )
} }

16
tsconfig.json
View File

@ -4,11 +4,19 @@
"jsx": "react", "jsx": "react",
"module": "esnext", "module": "esnext",
"moduleResolution": "node", "moduleResolution": "node",
"lib": ["dom", "esnext"], "lib": [
"dom",
"esnext"
],
"strict": true, "strict": true,
"sourceMap": true, "sourceMap": true,
"target": "esnext" "target": "esnext",
}, },
"exclude": ["node_modules"], "exclude": [
"include": ["src/**/*.ts", "src/**/*.tsx"] "node_modules"
],
"include": [
"src/**/*.ts",
"src/**/*.tsx"
],
} }