From 034522e87c4f00f49b500a7042a428b3af772ef0 Mon Sep 17 00:00:00 2001
From: Thimo <68739517+ThimoDEV@users.noreply.github.com>
Date: Mon, 25 Mar 2024 17:49:58 +0100
Subject: [PATCH] feat(development): added new launch.json and fixed
 breakpoints not working

---
 .vscode/launch.json               | 32 +++++++++++--------------------
 playground/vite.config.ts         |  6 ++++++
 src/composables/useSizes/index.ts | 14 +++++++++++++-
 vite.config.ts                    |  2 +-
 4 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/.vscode/launch.json b/.vscode/launch.json
index e361a4ad8..8c884b44b 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -1,28 +1,18 @@
 {
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "Attach by Process ID",
-      "processId": "${command:PickProcess}",
-      "request": "attach",
-      "skipFiles": ["<node_internals>/**"],
-      "type": "node"
-    },
-    {
-      "name": "Attach to vite",
-      "port": 5174,
-      "request": "attach",
-      "skipFiles": ["<node_internals>/**"],
-      "type": "node"
-    },
-    {
-      "name": "fe-server",
-      "type": "node",
+      "type": "chrome",
       "request": "launch",
-      "cwd": "${workspaceRoot}/packages/tres",
-      "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "dev", "--preserve-symlinks"]
+      "name": "Tres Debug mode",
+      "skipFiles": [
+        "<node_internals>/**",
+      ],
+      "resolveSourceMapLocations": [
+        "!**/node_modules/**"
+      ],
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}"
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
index 17076bef5..503b5a74f 100644
--- a/playground/vite.config.ts
+++ b/playground/vite.config.ts
@@ -41,4 +41,10 @@ export default defineConfig({
     },
     dedupe: ['three'],
   },
+  server: {
+    hmr: {
+      overlay: true,
+    },
+    port: 3000,
+  },
 })
diff --git a/src/composables/useSizes/index.ts b/src/composables/useSizes/index.ts
index 630a9eee5..5deed13d5 100644
--- a/src/composables/useSizes/index.ts
+++ b/src/composables/useSizes/index.ts
@@ -15,7 +15,19 @@ export default function useSizes(
 ) {
   const reactiveSize = toValue(windowSize)
     ? useWindowSize()
-    : useElementSize(computed(() => toValue(canvas).parentElement))
+    : useElementSize(
+      computed(
+        () => toValue(canvas).parentElement,
+      ),
+      {
+        width:
+            toValue(canvas).parentElement
+              ?.clientWidth ?? 0,
+        height:
+            toValue(canvas).parentElement
+              ?.clientHeight ?? 0,
+      },
+    )
 
   const debouncedReactiveWidth = readonly(refDebounced(reactiveSize.width, debounceMs))
   const debouncedReactiveHeight = readonly(refDebounced(reactiveSize.height, debounceMs))
diff --git a/vite.config.ts b/vite.config.ts
index 5198b18bf..ea43523da 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -22,7 +22,7 @@ console.log(`${lightGreen('▲')} ${gray('■')} ${yellow('●')} ${bold('Tres')
 // https://vitejs.dev/config/
 export default defineConfig({
   server: {
-    port: 5174,
+    port: 3000,
   },
   plugins: [
     vue({