From ecd69a752ec73d6ec1a2da98307d331e439226ef Mon Sep 17 00:00:00 2001
From: zjxxxxxxxxx <954270063@qq.com>
Date: Sat, 23 Sep 2023 22:17:49 +0800
Subject: [PATCH] chore: add playground

---
 README.md                                     | 147 +++++++++++++++---
 examples/rollup/src/App.vue                   |   2 +-
 examples/rollup/src/components/HelloWorld.tsx |   3 +
 examples/rollup/src/style.css                 |  40 -----
 examples/vite/src/App.vue                     |   2 +-
 examples/vite/src/components/HelloWorld.tsx   |   3 +
 examples/vite/src/style.css                   |  40 -----
 examples/webpack/src/App.vue                  |   2 +-
 .../webpack/src/components/HelloWorld.tsx     |   3 +
 examples/webpack/src/style.css                |  40 -----
 10 files changed, 135 insertions(+), 147 deletions(-)

diff --git a/README.md b/README.md
index 9886545..88967aa 100644
--- a/README.md
+++ b/README.md
@@ -40,7 +40,7 @@ jsx without
 ```tsx
 // src/App.tsx
 export default function App() {
-  return <div>hello word</div>
+  return <div>hello word</div>;
 }
 ```
 
@@ -49,7 +49,7 @@ with
 ```tsx
 // src/App.tsx
 export default function App() {
-  return <div __source="/src/App.tsx:3:9">hello word</div>
+  return <div __source="/src/App.tsx:3:9">hello word</div>;
 }
 ```
 
@@ -68,13 +68,13 @@ The bad news is that for `jsx` syntax support, you can't use it with [jsx-vue2](
 ```ts
 // main.ts
 import Vue from 'vue';
-import VueSource from "unplugin-vue-source/vue";
-import App from "./App.vue";
+import VueSource from 'unplugin-vue-source/vue';
+import App from './App.vue';
 
 Vue.use(VueSource);
 
 new Vue({
-  el: "#app",
+  el: '#app',
   render: (h) => h(App),
 });
 ```
@@ -84,12 +84,12 @@ new Vue({
 ```ts
 // main.ts
 import { createApp } from 'vue';
-import VueSource from "unplugin-vue-source/vue";
-import App from "./App.vue";
+import VueSource from 'unplugin-vue-source/vue';
+import App from './App.vue';
 
 const app = createApp(App);
 app.use(VueSource);
-app.mount("#app");
+app.mount('#app');
 ```
 
 ## Plugins
@@ -101,11 +101,13 @@ You need to make sure that `VueSource` is executed before vue compiles the plugi
 
 ```ts
 // vite.config.ts
-import VueSource from "unplugin-vue-source/vite";
+import VueSource from 'unplugin-vue-source/vite';
 
 export default defineConfig({
   plugins: [
-    VueSource({ /* options */ }),
+    VueSource({
+      /* options */
+    }),
     // other plugins
   ],
 });
@@ -118,11 +120,13 @@ export default defineConfig({
 
 ```ts
 // rollup.config.js
-import VueSource from "unplugin-vue-source/rollup";
+import VueSource from 'unplugin-vue-source/rollup';
 
 export default {
   plugins: [
-    VueSource({ /* options */ }),
+    VueSource({
+      /* options */
+    }),
     // other plugins
   ],
 };
@@ -137,7 +141,9 @@ export default {
 // webpack.config.js
 module.exports = {
   plugins: [
-    require("unplugin-vue-source/webpack")({ /* options */ }),
+    require('unplugin-vue-source/webpack')({
+      /* options */
+    }),
     // other plugins
   ],
 };
@@ -152,7 +158,9 @@ module.exports = {
 // rspack.config.js
 module.exports = {
   plugins: [
-    require("unplugin-vue-source/rspack")({ /* options */ }),
+    require('unplugin-vue-source/rspack')({
+      /* options */
+    }),
     // other plugins
   ],
 };
@@ -168,7 +176,9 @@ module.exports = {
 module.exports = {
   configureWebpack: {
     plugins: [
-      require("unplugin-vue-source/webpack")({ /* options */ }),
+      require('unplugin-vue-source/webpack')({
+        /* options */
+      }),
       // other plugins
     ],
   },
@@ -182,20 +192,22 @@ module.exports = {
 
 ```ts
 // esbuild.config.js
-import { build } from "esbuild";
-import VueSource from "unplugin-vue-source/esbuild";
+import { build } from 'esbuild';
+import VueSource from 'unplugin-vue-source/esbuild';
 
-build({ 
+build({
   plugins: [
-    VueSource({ /* options */ }),
+    VueSource({
+      /* options */
+    }),
     // other plugins
   ],
 });
 ```
 
 <br></details>
- 
- ## Configuration
+
+## Configuration
 
 The following show the default values of the configuration
 
@@ -203,8 +215,95 @@ The following show the default values of the configuration
 VueSource({
   // source root path
   root: process.cwd(),
-  
+
   // generate sourceMap
   sourceMap: false,
-})
-```
\ No newline at end of file
+});
+```
+
+## Playground
+
+<table>
+  <tbody>
+    <tr>
+      <th align="left">Rollup + Vue2</th>
+      <th>
+        <a
+          target="_black"
+          href="https://github.com/zjxxxxxxxxx/unplugin-vue-source/tree/main/examples/rollup"
+        >
+          Source
+        </a>
+      </th>
+      <th>
+        <a
+          target="_black"
+          href="https://codesandbox.io/p/sandbox/github/zjxxxxxxxxx/unplugin-vue-source/tree/main/examples/rollup"
+        >
+          CodeSandbox
+        </a>
+      </th>
+      <th>
+        <a
+          target="_black"
+          href="https://stackblitz.com/github/zjxxxxxxxxx/unplugin-vue-source/tree/main/examples/rollup"
+        >
+          StackBlitz
+        </a>
+      </th>
+    </tr>
+    <tr>
+      <th align="left">Vite + Vue3</th>
+      <th>
+        <a
+          target="_black"
+          href="https://github.com/zjxxxxxxxxx/unplugin-vue-source/tree/main/examples/vite"
+        >
+          Source
+        </a>
+      </th>
+            <th>
+        <a
+          target="_black"
+          href="https://codesandbox.io/p/sandbox/github/zjxxxxxxxxx/unplugin-vue-source/tree/main/examples/vite"
+        >
+          CodeSandbox
+        </a>
+      </th>
+      <th>
+        <a
+          target="_black"
+          href="https://stackblitz.com/github/zjxxxxxxxxx/unplugin-vue-source/tree/main/examples/vite"
+        >
+          StackBlitz
+        </a>
+      </th>
+    </tr>
+    <tr>
+      <th align="left">Webpack + Vue3</th>
+      <th>
+        <a
+          target="_black"
+          href="https://github.com/zjxxxxxxxxx/unplugin-vue-source/tree/main/examples/webpack"
+        >
+          Source
+        </a>
+      </th>        <th>
+        <a
+          target="_black"
+          href="https://codesandbox.io/p/sandbox/github/zjxxxxxxxxx/unplugin-vue-source/tree/main/examples/webpack"
+        >
+          CodeSandbox
+        </a>
+      </th>
+      <th>
+        <a
+          target="_black"
+          href="https://stackblitz.com/github/zjxxxxxxxxx/unplugin-vue-source/tree/main/examples/webpack"
+        >
+          StackBlitz
+        </a>
+      </th>
+    </tr>
+  </tbody>
+</table>
diff --git a/examples/rollup/src/App.vue b/examples/rollup/src/App.vue
index 4793c97..9700611 100644
--- a/examples/rollup/src/App.vue
+++ b/examples/rollup/src/App.vue
@@ -19,7 +19,7 @@ export default Vue.extend({
         <img src="../public/vue.svg" class="logo vue" alt="Vue logo" />
       </a>
     </div>
-    <HelloWorld msg="Roolup + Vue" />
+    <HelloWorld msg="Roolup + Vue2" />
   </div>
 </template>
 
diff --git a/examples/rollup/src/components/HelloWorld.tsx b/examples/rollup/src/components/HelloWorld.tsx
index a45ffa4..9902618 100644
--- a/examples/rollup/src/components/HelloWorld.tsx
+++ b/examples/rollup/src/components/HelloWorld.tsx
@@ -6,6 +6,9 @@ export default defineComponent({
     return (
       <div>
         <h1>{this.msg}</h1>
+        <p>
+          Inspect the element to see the <code>__source</code>
+        </p>
         <p>
           <a
             target="_black"
diff --git a/examples/rollup/src/style.css b/examples/rollup/src/style.css
index d4804d5..f350dd7 100644
--- a/examples/rollup/src/style.css
+++ b/examples/rollup/src/style.css
@@ -34,24 +34,6 @@ h1 {
   line-height: 1.1;
 }
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #15181e;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
 .card {
   padding: 2em;
 }
@@ -63,19 +45,6 @@ button:focus-visible {
   text-align: center;
 }
 
-kbd {
-  display: inline-block;
-  padding: 3px 5px;
-  font-size: 12px;
-  line-height: 10px;
-  color: #e6edf3;
-  vertical-align: middle;
-  background-color: #161b22;
-  border: solid 1px rgba(110, 118, 129, 0.4);
-  border-radius: 6px;
-  box-shadow: inset 0 -1px 0 rgba(110, 118, 129, 0.4);
-}
-
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
@@ -84,13 +53,4 @@ kbd {
   a:hover {
     color: #747bff;
   }
-  button {
-    background-color: #f9f9f9;
-  }
-  kbd {
-    color: #1f2328;
-    background-color: #f6f8fa;
-    border: solid 1px rgba(175, 184, 193, 0.2);
-    box-shadow: inset 0 -1px 0 rgba(175, 184, 193, 0.2);
-  }
 }
diff --git a/examples/vite/src/App.vue b/examples/vite/src/App.vue
index f0b7ce2..f98d998 100644
--- a/examples/vite/src/App.vue
+++ b/examples/vite/src/App.vue
@@ -11,7 +11,7 @@ import HelloWorld from './components/HelloWorld';
       <img src="/vue.svg" class="logo vue" alt="Vue logo" />
     </a>
   </div>
-  <HelloWorld msg="Vite + Vue" />
+  <HelloWorld msg="Vite + Vue3" />
 </template>
 
 <style scoped>
diff --git a/examples/vite/src/components/HelloWorld.tsx b/examples/vite/src/components/HelloWorld.tsx
index 9b646a8..5f6c5e6 100644
--- a/examples/vite/src/components/HelloWorld.tsx
+++ b/examples/vite/src/components/HelloWorld.tsx
@@ -2,6 +2,9 @@ export default function HelloWorld({ msg }: { msg: string }) {
   return (
     <>
       <h1>{msg}</h1>
+      <p>
+        Inspect the element to see the <code>__source</code>
+      </p>
       <p>
         <a
           target="_black"
diff --git a/examples/vite/src/style.css b/examples/vite/src/style.css
index d4804d5..f350dd7 100644
--- a/examples/vite/src/style.css
+++ b/examples/vite/src/style.css
@@ -34,24 +34,6 @@ h1 {
   line-height: 1.1;
 }
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #15181e;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
 .card {
   padding: 2em;
 }
@@ -63,19 +45,6 @@ button:focus-visible {
   text-align: center;
 }
 
-kbd {
-  display: inline-block;
-  padding: 3px 5px;
-  font-size: 12px;
-  line-height: 10px;
-  color: #e6edf3;
-  vertical-align: middle;
-  background-color: #161b22;
-  border: solid 1px rgba(110, 118, 129, 0.4);
-  border-radius: 6px;
-  box-shadow: inset 0 -1px 0 rgba(110, 118, 129, 0.4);
-}
-
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
@@ -84,13 +53,4 @@ kbd {
   a:hover {
     color: #747bff;
   }
-  button {
-    background-color: #f9f9f9;
-  }
-  kbd {
-    color: #1f2328;
-    background-color: #f6f8fa;
-    border: solid 1px rgba(175, 184, 193, 0.2);
-    box-shadow: inset 0 -1px 0 rgba(175, 184, 193, 0.2);
-  }
 }
diff --git a/examples/webpack/src/App.vue b/examples/webpack/src/App.vue
index 3f6692a..85323d3 100644
--- a/examples/webpack/src/App.vue
+++ b/examples/webpack/src/App.vue
@@ -11,7 +11,7 @@ import HelloWorld from './components/HelloWorld';
       <img src="/vue.svg" class="logo vue" alt="Vue logo" />
     </a>
   </div>
-  <HelloWorld msg="Vite + Vue" />
+  <HelloWorld msg="Vite + Vue3" />
 </template>
 
 <style scoped>
diff --git a/examples/webpack/src/components/HelloWorld.tsx b/examples/webpack/src/components/HelloWorld.tsx
index 9b646a8..5f6c5e6 100644
--- a/examples/webpack/src/components/HelloWorld.tsx
+++ b/examples/webpack/src/components/HelloWorld.tsx
@@ -2,6 +2,9 @@ export default function HelloWorld({ msg }: { msg: string }) {
   return (
     <>
       <h1>{msg}</h1>
+      <p>
+        Inspect the element to see the <code>__source</code>
+      </p>
       <p>
         <a
           target="_black"
diff --git a/examples/webpack/src/style.css b/examples/webpack/src/style.css
index d4804d5..f350dd7 100644
--- a/examples/webpack/src/style.css
+++ b/examples/webpack/src/style.css
@@ -34,24 +34,6 @@ h1 {
   line-height: 1.1;
 }
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #15181e;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
 .card {
   padding: 2em;
 }
@@ -63,19 +45,6 @@ button:focus-visible {
   text-align: center;
 }
 
-kbd {
-  display: inline-block;
-  padding: 3px 5px;
-  font-size: 12px;
-  line-height: 10px;
-  color: #e6edf3;
-  vertical-align: middle;
-  background-color: #161b22;
-  border: solid 1px rgba(110, 118, 129, 0.4);
-  border-radius: 6px;
-  box-shadow: inset 0 -1px 0 rgba(110, 118, 129, 0.4);
-}
-
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
@@ -84,13 +53,4 @@ kbd {
   a:hover {
     color: #747bff;
   }
-  button {
-    background-color: #f9f9f9;
-  }
-  kbd {
-    color: #1f2328;
-    background-color: #f6f8fa;
-    border: solid 1px rgba(175, 184, 193, 0.2);
-    box-shadow: inset 0 -1px 0 rgba(175, 184, 193, 0.2);
-  }
 }