Refactor: tsc compile improvements

demo/src/App.tsx

@@ -1,8 +1,8 @@
-import { Demo } from "p2p-media-loader-demo";
+import { DemoComponent } from "p2p-media-loader-demo";
 import "./app.css";
 
 function App() {
-  return <Demo debugToolsEnabled={false} />;
+  return <DemoComponent debugToolsEnabled={false} />;
 }
 
 export default App;

packages/p2p-media-loader-demo/package.json

@@ -37,7 +37,8 @@
     "types": "lib/index.d.ts"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "pnpm clean && tsc && pnpm copy-css",
+    "copy-css": "cpy \"src/**/*.css\" \"./lib/\" --parents",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "type-check": "tsc --noEmit",
     "clean": "rimraf lib dist build p2p-media-loader-demo-*.tgz",
@@ -54,6 +55,7 @@
     "@types/dplayer": "^1.25.5",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
+    "cpy-cli": "^5.0.0",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",

packages/p2p-media-loader-demo/src/components/Demo.tsx

@@ -28,7 +28,7 @@ type DemoProps = {
   debugToolsEnabled?: boolean;
 };
 
-export const Demo = ({ debugToolsEnabled }: DemoProps) => {
+export const DemoComponent = ({ debugToolsEnabled }: DemoProps) => {
   const data = useRef<DownloadStats>({
     httpDownloaded: 0,
     p2pDownloaded: 0,
@@ -103,7 +103,7 @@ export const Demo = ({ debugToolsEnabled }: DemoProps) => {
 
   return (
     <>
-      <div className="container">
+      <div className="demo-container">
         <div className="column-1">
           {renderPlayer()}
           <DownloadStatsChart downloadStatsRef={data} />

packages/p2p-media-loader-demo/src/components/debugTools/DebugTools.tsx

@@ -2,7 +2,7 @@ import { DebugSelector } from "./DebugSelector";
 
 export const DebugTools = () => {
   return (
-    <div className="container dev-container">
+    <div className="demo-container dev-container">
       <DebugSelector />
       <a href="modules-demo/index.html">ES modules demo</a>
     </div>

packages/p2p-media-loader-demo/src/components/demo.css

@@ -1,5 +1,5 @@
 @media (max-width: 575px) {
-  .container {
+  .demo-container {
     max-width: 100%;
     min-width: 320px;
     flex-wrap: wrap;
@@ -12,7 +12,7 @@
 }
 
 @media (min-width: 576px) {
-  .container {
+  .demo-container {
     max-width: 540px;
     flex-wrap: wrap;
   }
@@ -23,7 +23,7 @@
 }
 
 @media (min-width: 768px) {
-  .container {
+  .demo-container {
     max-width: 720px;
     flex-wrap: nowrap;
   }
@@ -34,7 +34,7 @@
 }
 
 @media (min-width: 992px) {
-  .container {
+  .demo-container {
     max-width: 960px;
     flex-wrap: nowrap;
   }
@@ -45,7 +45,7 @@
 }
 
 @media (min-width: 1200px) {
-  .container {
+  .demo-container {
     max-width: 1140px;
     flex-wrap: nowrap;
   }
@@ -55,11 +55,10 @@
   }
 }
 
-.container {
+.demo-container {
   display: flex;
-  margin: 0 auto;
+  margin: 50px auto;
   padding: 0 15px;
-  margin-top: 50px;
 }
 
 .playback-options {

packages/p2p-media-loader-demo/src/index.ts

@@ -1 +1 @@
-export { Demo } from "./components/Demo";
+export { DemoComponent } from "./components/Demo";

packages/p2p-media-loader-demo/tsconfig.json

@@ -1,6 +1,10 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
+    "module": "ESNext",
+    "target": "ESNext",
+    "moduleResolution": "node",
+    "declaration": true,
     "outDir": "lib",
     "rootDir": "src",
     "tsBuildInfoFile": "./build/.tsbuildinfo",