chore: update playground (#92)

README.md

@@ -3,9 +3,11 @@
 [![CI](https://github.com/zjxxxxxxxxx/open-editor/actions/workflows/ci.yml/badge.svg)](https://github.com/zjxxxxxxxxx/open-editor/actions/workflows/ci.yml)
 [![MIT](https://img.shields.io/github/license/zjxxxxxxxxx/open-editor)](https://opensource.org/licenses/MIT)
 
-A web devtools for fast find source code.
+A web devtools for fast find source code, supported in react and vue.
 
-![image](./public//demo.gif)
+If you need to switch back and forth between react and vue frequently, or if you have both react and vue in the same project, then this devtools is for you.
+
+![image](./public/demo.gif)
 
 ## Features
 
@@ -123,7 +125,6 @@ By default, you can only open to `file`, if you want to open to `line` and `colu
         </a>
       </th>
     </tr>
-    <tr></tr>
     <tr>
       <th align="left">webpack + next</th>
       <th>

package.json

@@ -5,7 +5,7 @@
     "packages/*"
   ],
   "type": "module",
-  "description": "A web devtools for fast find source code.",
+  "description": "A web devtools for fast find source code, supported in react and vue.",
   "scripts": {
     "build": "concurrently --success all -r -m 1 'turbo run build --filter @open-editor/* --log-order grouped'",
     "clean": "rimraf -g {packages/**/.turbo,node_modules/.cache}",

packages/client/src/elements/defineTooltipElement.ts

@@ -31,16 +31,15 @@ const CSS = `
 }
 .element {
   font-size: 14px;
-  font-weight: 400;
   color: var(--element);
 }
 .component {
   font-size: 16px;
   font-weight: 500;
 }
 .file {
+  margin-top: 2px;
   font-size: 14px;
-  font-weight: 200;
   text-decoration: underline;
   word-wrap: break-word;
 }

packages/client/src/elements/defineTreeElement.ts

@@ -45,11 +45,11 @@ const CSS = `
 }
 .tree {
   position: relative;
-  padding-left: 16px;
+  padding-left: 14px;
 }
 .line {
   position: absolute;
-  left: 17px;
+  left: 15px;
   top: 22px;
   opacity: 0.1;
   width: 1px;
@@ -72,7 +72,6 @@ const CSS = `
 }
 .element {
   font-size: 14px;
-  font-weight: 400;
   color: var(--element);
 }
 .empty {
@@ -88,18 +87,16 @@ const CSS = `
   opacity: 0.6;
 }
 .msg {
-  font-size: 14px;
-  font-weight: 200;
+  font-size: 12px;
   text-decoration: underline;
 }
 .name {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   color: var(--green);
 }
 .file {
-  font-size: 14px;
-  font-weight: 200;
+  font-size: 12px;
   color: var(--cyan);
 }
 .name,
@@ -186,7 +183,7 @@ export function defineTreeElement() {
         <div class="title">
           <span class="element">${
             source.element
-          } in </span> &lt;Component Tree&gt;
+          } in </span> &lt;ComponentTree&gt;
         </div>
         <span class="close">${closeIcon}</span>
         <div class="tree content">
@@ -199,7 +196,7 @@ export function defineTreeElement() {
       this.#popup.classList.add('empty');
       this.#popup.innerHTML = `
         <div class="title empty">
-          <span class="element">${source.element} in </span> &lt;Component Tree&gt;
+          <span class="element">${source.element} in </span> &lt;ComponentTree&gt;
         </div>
         <span class="close empty">${closeIcon}</span>
         <div class="msg empty">empty tree 😭.</div>

packages/client/src/resolve/createVueResolver.ts

@@ -36,6 +36,7 @@ function resolveVueSource<T = any>(
     options;
 
   let [instance, source] = resolveVueSourceAnchor(debug, options);
+  console.log(instance, source);
 
   while (isValid(instance)) {
     if (isValidNext(instance)) {

packages/rollup/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@open-editor/rollup",
   "version": "0.0.16",
-  "description": "A rollup plugin for fast find source code.",
+  "description": "A rollup plugin for fast find source code, supported in react and vue.",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

packages/vite/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@open-editor/vite",
   "version": "0.0.16",
-  "description": "A vite plugin for fast find source code.",
+  "description": "A vite plugin for fast find source code, supported in react and vue.",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

packages/webpack/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@open-editor/webpack",
   "version": "0.0.16",
-  "description": "A webpack plugin for fast find source code.",
+  "description": "A webpack plugin for fast find source code, supported in react and vue.",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

playground/rollup-react15/src/App.tsx

@@ -1,4 +1,5 @@
-import Notes from './Notes';
+import Tree from './components/tree';
+import Notes from './components/Notes';
 import './App.css';
 
 export default function App(): React.JSX.Element {
@@ -17,6 +18,7 @@ export default function App(): React.JSX.Element {
         </a>
       </div>
       <h1>Rollup + React15</h1>
+      <Tree />
       <div className="card">
         <Notes />
       </div>

playground/rollup-react15/src/Notes.tsx → playground/rollup-react15/src/components/Notes.tsx

@@ -1,5 +1,3 @@
-import Tree from './tree';
-
 export default function Notes(): React.JSX.Element {
   return (
     <div>
@@ -8,9 +6,10 @@ export default function Notes(): React.JSX.Element {
         <kbd>O</kbd>, then click the HTML element you wish to inspect.
       </p>
       <p>
-        press hotkey ⌨️ <kbd>command ⌘</kbd> + 🖱 click, show component tree.
+        press hotkey ⌨️ <kbd>option ⌥</kbd> + <kbd>command ⌘</kbd> +{' '}
+        <kbd>O</kbd>, then press hotkey ⌨️ <kbd>command ⌘</kbd> + 🖱 click, show
+        component tree.
       </p>
-      <Tree />
       <p>
         press hotkey ⌨️ <kbd>esc</kbd> or 🖱 right-click to exit inspect.
       </p>

playground/rollup-vue2/src/App.vue

@@ -1,10 +1,12 @@
 <script lang="ts">
 import Vue from 'vue';
-import HelloWorld from './components/HelloWorld.vue';
+import Tree from './components/tree/index.vue';
+import Notes from './components/Notes.vue';
 
 export default Vue.extend({
   components: {
-    HelloWorld,
+    Tree,
+    Notes,
   },
 });
 </script>
@@ -19,7 +21,16 @@ export default Vue.extend({
         <img src="../public/vue.svg" class="logo vue" alt="Vue logo" />
       </a>
     </div>
-    <HelloWorld msg="Rollup + Vue2" />
+    <h1>Rollup + Vue2</h1>
+    <Tree />
+    <div class="card">
+      <Notes />
+    </div>
+    <p class="read-the-docs">
+      <a target="_black" href="https://github.com/zjxxxxxxxxx/open-editor">
+        Github
+      </a>
+    </p>
   </div>
 </template>
 
@@ -36,4 +47,7 @@ export default Vue.extend({
 .logo.vue:hover {
   filter: drop-shadow(0 0 2em #42b883aa);
 }
+.read-the-docs {
+  color: #888;
+}
 </style>

playground/rollup-vue2/src/components/Notes.vue

@@ -1,22 +1,13 @@
-<script lang="ts">
-import Vue from 'vue';
-import Tree from './tree/index.vue';
-
-export default Vue.extend({
-  components: {
-    Tree,
-  },
-});
-</script>
-
 <template>
   <div>
     <p>
       press hotkey ⌨️ <kbd>option ⌥</kbd> + <kbd>command ⌘</kbd> + <kbd>O</kbd>,
       then click the HTML element you wish to inspect.
     </p>
-    <p>press hotkey ⌨️ <kbd>command ⌘</kbd> + 🖱 click, show component tree.</p>
-    <Tree />
+    <p>
+      press hotkey ⌨️ <kbd>option ⌥</kbd> + <kbd>command ⌘</kbd> + <kbd>O</kbd>,
+      then press hotkey ⌨️ <kbd>command ⌘</kbd> + 🖱 click, show component tree.
+    </p>
     <p>press hotkey ⌨️ <kbd>esc</kbd> or 🖱 right-click to exit inspect.</p>
   </div>
 </template>

playground/vite-react/src/App.tsx

@@ -1,4 +1,5 @@
-import Notes from './Notes';
+import Tree from './components/tree';
+import Notes from './components/Notes';
 import './App.css';
 
 export default function App() {
@@ -13,6 +14,7 @@ export default function App() {
         </a>
       </div>
       <h1>Vite + React</h1>
+      <Tree />
       <div className="card">
         <Notes />
       </div>

playground/webpack-next/src/Notes.tsx → playground/vite-react/src/components/Notes.tsx

@@ -1,19 +1,18 @@
-import Tree from './tree';
-
-export default function Notes() {
+export default function Notes(): React.JSX.Element {
   return (
-    <>
+    <div>
       <p>
         press hotkey ⌨️ <kbd>option ⌥</kbd> + <kbd>command ⌘</kbd> +{' '}
         <kbd>O</kbd>, then click the HTML element you wish to inspect.
       </p>
       <p>
-        press hotkey ⌨️ <kbd>command ⌘</kbd> + 🖱 click, show component tree.
+        press hotkey ⌨️ <kbd>option ⌥</kbd> + <kbd>command ⌘</kbd> +{' '}
+        <kbd>O</kbd>, then press hotkey ⌨️ <kbd>command ⌘</kbd> + 🖱 click, show
+        component tree.
       </p>
-      <Tree />
       <p>
         press hotkey ⌨️ <kbd>esc</kbd> or 🖱 right-click to exit inspect.
       </p>
-    </>
+    </div>
   );
 }

playground/vite-vue/src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue';
+import Tree from './components/tree/index.vue';
+import Notes from './components/Notes.vue';
 </script>
 
 <template>
@@ -11,7 +12,16 @@ import HelloWorld from './components/HelloWorld.vue';
       <img src="/vue.svg" class="logo vue" alt="Vue logo" />
     </a>
   </div>
-  <HelloWorld msg="Vite + Vue" />
+  <h1>Vite + Vue</h1>
+  <Tree />
+  <div class="card">
+    <Notes />
+  </div>
+  <p class="read-the-docs">
+    <a target="_black" href="https://github.com/zjxxxxxxxxx/open-editor">
+      Github
+    </a>
+  </p>
 </template>
 
 <style scoped>
@@ -27,4 +37,8 @@ import HelloWorld from './components/HelloWorld.vue';
 .logo.vue:hover {
   filter: drop-shadow(0 0 2em #42b883aa);
 }
+
+.read-the-docs {
+  color: #888;
+}
 </style>

playground/vite-vue/src/components/Notes.vue

@@ -1,13 +1,11 @@
-<script setup lang="ts">
-import Tree from './tree/index.vue';
-</script>
-
 <template>
   <p>
     press hotkey ⌨️ <kbd>option ⌥</kbd> + <kbd>command ⌘</kbd> + <kbd>O</kbd>,
     then click the HTML element you wish to inspect.
   </p>
-  <p>press hotkey ⌨️ <kbd>command ⌘</kbd> + 🖱 click, show component tree.</p>
-  <Tree />
+  <p>
+    press hotkey ⌨️ <kbd>option ⌥</kbd> + <kbd>command ⌘</kbd> + <kbd>O</kbd>,
+    then press hotkey ⌨️ <kbd>command ⌘</kbd> + 🖱 click, show component tree.
+  </p>
   <p>press hotkey ⌨️ <kbd>esc</kbd> or 🖱 right-click to exit inspect.</p>
 </template>