binbat · a-wing · Dec 4, 2023 · Nov 2, 2023 · Nov 2, 2023 · Nov 2, 2023
diff --git a/webcomponents/.gitignore b/webcomponents/.gitignore
@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Visual Studio cache directory
+.vs/
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/webcomponents/index.ts b/webcomponents/index.ts
@@ -0,0 +1,16 @@
+import JoyRtcComponent from './model/joy-rtc'
+import { DOMAttributes } from "react"
+
+type CustomElement<T> = Partial<T & DOMAttributes<T> & { children: any } & { style?: any }>;
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      ['joy-rtc']: CustomElement<JoyRtcComponent>;
+    }
+  }
+}
+
+
+export * from "./model/joy-rtc"
+
diff --git a/webui/src/joy-rtc.ts → webcomponents/model/joy-rtc.ts b/webui/src/joy-rtc.ts → webcomponents/model/joy-rtc.ts
@@ -1,6 +1,6 @@
 import nipplejs from "nipplejs";
 
-class JoyRtcComponent extends HTMLElement {
+export class JoyRtcComponent extends HTMLElement {
 	private ws: WebSocket | null = null;
 	private pc: RTCPeerConnection | null = null;
 	private dc: RTCDataChannel | null = null;
@@ -302,4 +302,5 @@ class JoyRtcComponent extends HTMLElement {
 }
 
 customElements.define("joy-rtc", JoyRtcComponent);
+
 export default JoyRtcComponent;
diff --git a/webcomponents/package.json b/webcomponents/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "webcomponent",
+  "version": "0.0.0",
+  "description": "joyrtc web component lib",
+  "dependencies": {
+    "nipplejs": "^0.10.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.34",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^5.2.2"
+  }
+}
diff --git a/webui/src/app.tsx b/webui/src/app.tsx
@@ -1,20 +1,8 @@
-import { DOMAttributes } from "react"
 import "./app.css"
-
-import JoyRtcComponent from './joy-rtc'
-import './joy-rtc'
+import '../../webcomponents/index'
 
 import { ProtoHttpToWs } from './util';
 
-type CustomElement<T> = Partial<T & DOMAttributes<T> & { children: any } & { style?: any }>;
-
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      ['joy-rtc']: CustomElement<JoyRtcComponent>;
-    }
-  }
-}
 
 function App() {
   return (

diff --git a/webui/vite.config.ts b/webui/vite.config.ts
@@ -11,5 +11,5 @@ export default defineConfig({
       },
     },
   },
-  plugins: [react()],
+  plugins: [react()]
 })
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,5 +11,5 @@ export default defineConfig({ @@
           },
         },
       },
-      plugins: [react()],
+      plugins: [react()]
     })