chore(playground): text util (#3851)

vitejs · Jun 24, 2021 · aed3338 · aed3338
1 parent 5d45768
commit aed3338
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 27 deletions.
diff --git a/packages/playground/data-uri/index.html b/packages/playground/data-uri/index.html
@@ -3,8 +3,12 @@
 
 <script type="module">
   import msg from "data:text/javascript, export default 'hi'"
-  document.querySelector('.plain').textContent = msg
+  text('.plain', msg)
 
   import base64Msg from 'data:text/javascript;base64, ZXhwb3J0IGRlZmF1bHQgJ2hpJw=='
-  document.querySelector('.base64').textContent = base64Msg
+  text('.base64', base64Msg)
+
+  function text(el, text) {
+    document.querySelector(el).textContent = text
+  }
 </script>
diff --git a/packages/playground/legacy/main.js b/packages/playground/legacy/main.js
@@ -14,17 +14,19 @@ if (import.meta.env.LEGACY) {
   if (import.meta.env.LEGACY === false) isLegacy = false
 }
 
-document.getElementById('env').textContent = `is legacy: ${isLegacy}`
+text('#env', `is legacy: ${isLegacy}`)
 
 // Iterators
-
-document.getElementById('iterators').textContent = [...new Set(['hello'])].join(
-  ''
-)
+text('#iterators', [...new Set(['hello'])].join(''))
 
 // babel-helpers
-
-document.getElementById('babel-helpers').textContent =
-  // Using `String.raw` to inject `@babel/plugin-transform-template-literals`
-  // helpers.
+// Using `String.raw` to inject `@babel/plugin-transform-template-literals`
+// helpers.
+text(
+  '#babel-helpers',
   String.raw`exposed babel helpers: ${window._templateObject != null}`
+)
+
+function text(el, text) {
+  document.querySelector(el).textContent = text
+}
diff --git a/packages/playground/optimize-deps/cjs-dynamic.js b/packages/playground/optimize-deps/cjs-dynamic.js
@@ -8,12 +8,12 @@
 
   const clip = await import('clipboard')
   if (typeof clip.default === 'function') {
-    document.querySelector('.cjs-dynamic-clipboard').textContent = 'ok'
+    text('.cjs-dynamic-clipboard', 'ok')
   }
 
   const { Socket } = await import('phoenix')
   if (typeof Socket === 'function') {
-    document.querySelector('.cjs-dynamic-phoenix').textContent = 'ok'
+    text('.cjs-dynamic-phoenix', 'ok')
   }
 
   function App() {
@@ -34,4 +34,8 @@
     React.createElement(App),
     document.querySelector('.cjs-dynamic')
   )
+
+  function text(el, text) {
+    document.querySelector(el).textContent = text
+  }
 })()
diff --git a/packages/playground/optimize-deps/cjs.js b/packages/playground/optimize-deps/cjs.js
@@ -7,11 +7,11 @@ import { Socket } from 'phoenix'
 import clip from 'clipboard'
 
 if (typeof clip === 'function') {
-  document.querySelector('.cjs-clipboard').textContent = 'ok'
+  text('.cjs-clipboard', 'ok')
 }
 
 if (typeof Socket === 'function') {
-  document.querySelector('.cjs-phoenix').textContent = 'ok'
+  text('.cjs-phoenix', 'ok')
 }
 
 function App() {
@@ -29,3 +29,7 @@ function App() {
 }
 
 ReactDOM.render(React.createElement(App), document.querySelector('.cjs'))
+
+function text(el, text) {
+  document.querySelector(el).textContent = text
+}
diff --git a/packages/playground/optimize-deps/index.html b/packages/playground/optimize-deps/index.html
@@ -48,26 +48,28 @@ <h2>Dep with changes from esbuild plugin</h2>
   const globbed = import.meta.globEager('./glob/*.js')
 
   import { camelCase } from 'dep-linked'
-  document.querySelector('.deps-linked').textContent = camelCase('foo-bar-baz')
+  text('.deps-linked', camelCase('foo-bar-baz'))
 
   import { msg, VueSFC } from 'dep-linked-include'
-  document.querySelector('.force-include').textContent = msg
-  document.querySelector('.plugin').textContent = VueSFC.render()
+  text('.force-include', msg)
+  text('.plugin', VueSFC.render())
 
   import * as linked from 'dep-linked-include'
   const keys = Object.keys(linked)
   if (keys.length) {
-    document.querySelector('.import-star').textContent = `[success] ${keys.join(
-      ', '
-    )}`
+    text('.import-star', `[success] ${keys.join(', ')}`)
   }
 
   import { createApp } from 'vue'
   import { createStore } from 'vuex'
   if (typeof createApp === 'function' && typeof createStore === 'function') {
-    document.querySelector('.vue').textContent = '[success]'
+    text('.vue', '[success]')
   }
 
   import { hello } from 'dep-esbuild-plugin-transform'
-  document.querySelector('.esbuild-plugin').textContent = hello()
+  text('.esbuild-plugin', hello())
+
+  function text(el, text) {
+    document.querySelector(el).textContent = text
+  }
 </script>
diff --git a/packages/playground/worker/index.html b/packages/playground/worker/index.html
@@ -19,8 +19,8 @@
 
   const worker = new Worker()
   worker.addEventListener('message', (e) => {
-    document.querySelector('.pong').textContent = e.data.msg
-    document.querySelector('.mode').textContent = e.data.mode
+    text('.pong', e.data.msg)
+    text('.mode', e.data.mode)
   })
 
   document.querySelector('.ping').addEventListener('click', () => {
@@ -29,7 +29,7 @@
 
   const inlineWorker = new InlineWorker()
   inlineWorker.addEventListener('message', (e) => {
-    document.querySelector('.pong-inline').textContent = e.data.msg
+    text('.pong-inline', e.data.msg)
   })
 
   document.querySelector('.ping-inline').addEventListener('click', () => {
@@ -42,8 +42,12 @@
   })
 
   sharedWorker.port.addEventListener('message', (event) => {
-    document.querySelector('.tick-count').textContent = event.data
+    text('.tick-count', event.data)
   })
 
   sharedWorker.port.start()
+
+  function text(el, text) {
+    document.querySelector(el).textContent = text
+  }
 </script>