From aed333817d73479337124e8eed4b5aab9ecc67cc Mon Sep 17 00:00:00 2001 From: OneNail <31649110+OneNail@users.noreply.github.com> Date: Thu, 24 Jun 2021 20:28:25 +0800 Subject: [PATCH] chore(playground): text util (#3851) --- packages/playground/data-uri/index.html | 8 ++++++-- packages/playground/legacy/main.js | 20 ++++++++++--------- .../playground/optimize-deps/cjs-dynamic.js | 8 ++++++-- packages/playground/optimize-deps/cjs.js | 8 ++++++-- packages/playground/optimize-deps/index.html | 18 +++++++++-------- packages/playground/worker/index.html | 12 +++++++---- 6 files changed, 47 insertions(+), 27 deletions(-) diff --git a/packages/playground/data-uri/index.html b/packages/playground/data-uri/index.html index 80e0fc6fcc6c17..32cc458940e60c 100644 --- a/packages/playground/data-uri/index.html +++ b/packages/playground/data-uri/index.html @@ -3,8 +3,12 @@ diff --git a/packages/playground/legacy/main.js b/packages/playground/legacy/main.js index c337989413a081..78322d69455af0 100644 --- 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 index dceffd811772d7..4d3856d8f69a92 100644 --- 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 index 196d395edc30a2..9dc613c4b3ba71 100644 --- 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 index 1bf9be5ca2d2e2..7310ab759f4249 100644 --- a/packages/playground/optimize-deps/index.html +++ b/packages/playground/optimize-deps/index.html @@ -48,26 +48,28 @@

Dep with changes from esbuild plugin

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 + } diff --git a/packages/playground/worker/index.html b/packages/playground/worker/index.html index 3203fb0a98874e..5d22e25b7e5804 100644 --- 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 + }