From a1673954e9cef0883ca57da7f6f881394764dbd9 Mon Sep 17 00:00:00 2001
From: yoho <panyoho@gmail.com>
Date: Fri, 11 Mar 2022 09:46:57 +0800
Subject: [PATCH] chore: nice output for worker dev

---
 .../worker/__tests__/worker.spec.ts           |  2 +-
 packages/playground/worker/classic-worker.js  |  4 +-
 packages/playground/worker/index.html         | 75 +++++++++++++------
 3 files changed, 57 insertions(+), 24 deletions(-)

diff --git a/packages/playground/worker/__tests__/worker.spec.ts b/packages/playground/worker/__tests__/worker.spec.ts
index 52451886667acd..6d205eaac2d5ec 100644
--- a/packages/playground/worker/__tests__/worker.spec.ts
+++ b/packages/playground/worker/__tests__/worker.spec.ts
@@ -64,7 +64,7 @@ if (isBuild) {
   // assert correct files
   test('inlined code generation', async () => {
     const files = fs.readdirSync(assetsDir)
-    expect(files.length).toBe(14)
+    expect(files.length).toBe(15)
     const index = files.find((f) => f.includes('index'))
     const content = fs.readFileSync(path.resolve(assetsDir, index), 'utf-8')
     const worker = files.find((f) => f.includes('my-worker'))
diff --git a/packages/playground/worker/classic-worker.js b/packages/playground/worker/classic-worker.js
index 89355b74440ba3..410e222614b23d 100644
--- a/packages/playground/worker/classic-worker.js
+++ b/packages/playground/worker/classic-worker.js
@@ -13,7 +13,7 @@ let classicWorker = new Worker(
 classicWorker = new Worker(new URL('./newUrl/classic-worker.js', import.meta.url))
 
 classicWorker.addEventListener('message', ({ data }) => {
-  text('.classic-worker', data)
+  text('.classic-worker', JSON.stringify(data))
 })
 classicWorker.postMessage('ping')
 
@@ -26,7 +26,7 @@ const classicSharedWorker = new SharedWorker(
 classicSharedWorker.port.addEventListener('message', (ev) => {
   text(
     '.classic-shared-worker',
-    ev.data
+    JSON.stringify(ev.data)
   )
 })
 classicSharedWorker.port.start()
diff --git a/packages/playground/worker/index.html b/packages/playground/worker/index.html
index 2e4f9c61d62549..fb6bdee8010b4d 100644
--- a/packages/playground/worker/index.html
+++ b/packages/playground/worker/index.html
@@ -20,21 +20,53 @@
   <span class="tick-count">0</span>
 </div>
 
-<p>new Worker(new Url('path', import.meta.url), { type: 'module' })</p>
-<div class="worker-import-meta-url"></div>
-
-<p>new SharedWorker(new Url('path', import.meta.url), { type: 'module' })</p>
-<div class="shared-worker-import-meta-url"></div>
-
-<p>nested worker</p>
-<div class="nested-worker"></div>
-<div class="nested-worker-dynamic-import"></div>
-<p>new Worker(new Url('path', import.meta.url))</p>
-<div class="classic-worker"></div>
-
-<p>new Worker(new Url('path', import.meta.url), { type: 'classic' })</p>
-<div class="classic-shared-worker"></div>
-
+<p>
+  new Worker(new Url('./newUrl/url-worker.js', import.meta.url), { type:
+  'module' })
+  <span class="classname">.worker-import-meta-url</span>
+</p>
+<code class="worker-import-meta-url"></code>
+
+<p>
+  new SharedWorker(new Url('./newUrl/url-shared-worker.js', import.meta.url), {
+  type: 'module' })
+  <span class="classname">.shared-worker-import-meta-url</span>
+</p>
+<code class="shared-worker-import-meta-url"></code>
+
+<p>
+  import NestedWorker from './worker-nested-worker?worker' - nested worker
+  <span class="classname">.nested-worker</span>
+</p>
+<code class="nested-worker"></code>
+
+<p>
+  import NestedWorker from './worker-nested-worker?worker' - nested worker
+  (after dynamic import msg)
+  <span class="classname">.nested-worker-dynamic-import</span>
+</p>
+<code class="nested-worker-dynamic-import"></code>
+
+<p>
+  new Worker(new Url('./newUrl/classic-worker.js', import.meta.url))
+  <span class="classname">.classic-worker</span>
+</p>
+<code class="classic-worker"></code>
+
+<p>
+  new SharedWorker(new Url('./newUrl/classic-shared-worker.js',
+  import.meta.url), { type: 'classic' })
+  <span class="classname">.classic-shared-worker</span>
+</p>
+<code class="classic-shared-worker"></code>
+<style>
+  p {
+    background: rgba(0, 0, 0, 0.1);
+  }
+  .classname {
+    color: green;
+  }
+</style>
 <script type="module">
   import myWorker from './my-worker?worker'
   import InlineWorker from './my-worker?worker&inline'
@@ -44,6 +76,10 @@
   import { mode } from './workerImport'
   import './classic-worker'
 
+  function text(el, text) {
+    document.querySelector(el).textContent = text
+  }
+
   document.querySelector('.mode-true').textContent = mode
 
   const worker = new myWorker()
@@ -86,9 +122,6 @@
     tsOutputWorker.postMessage('ping')
   })
 
-  function text(el, text) {
-    document.querySelector(el).textContent = text
-  }
   const workerOptions = { type: 'module' }
   // url import worker
   const w = new Worker(
@@ -96,7 +129,7 @@
     /* @vite-ignore */ workerOptions
   )
   w.addEventListener('message', (ev) =>
-    text('.worker-import-meta-url', ev.data)
+    text('.worker-import-meta-url', JSON.stringify(ev.data))
   )
 
   const genWorkerName = () => 'module'
@@ -109,7 +142,7 @@
     }
   )
   w2.port.addEventListener('message', (ev) => {
-    text('.shared-worker-import-meta-url', ev.data)
+    text('.shared-worker-import-meta-url', JSON.stringify(ev.data))
   })
   w2.port.start()
 
@@ -117,7 +150,7 @@
   nestedWorker.addEventListener('message', (ev) => {
     console.log(ev)
     if (typeof ev.data === 'string') {
-      text('.nested-worker', ev.data)
+      text('.nested-worker', JSON.stringify(ev.data))
     } else {
       text('.nested-worker-dynamic-import', JSON.stringify(ev.data))
     }