feat: change font styles (#88)

zjxxxxxxxxx · Sep 22, 2023 · 7fced3c · 7fced3c
1 parent fea275c
commit 7fced3c
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 28 deletions.
diff --git a/.changeset/nasty-forks-drop.md b/.changeset/nasty-forks-drop.md
@@ -0,0 +1,5 @@
+---
+'@open-editor/client': patch
+---
+
+change font styles
diff --git a/.changeset/tender-elephants-guess.md b/.changeset/tender-elephants-guess.md
@@ -0,0 +1,5 @@
+---
+'@open-editor/shared': patch
+---
+
+add type uilt 'isBol'
diff --git a/packages/client/src/elements/defineInspectElement.ts b/packages/client/src/elements/defineInspectElement.ts
@@ -14,7 +14,7 @@ export interface HTMLInspectElement extends HTMLElement {}
 const CSS = `
 * {
   box-sizing: content-box;
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: Menlo, Monaco, 'Courier New', monospace;
   line-height: 1.5;
   font-weight: 400;
 }

diff --git a/packages/client/src/elements/defineTooltipElement.ts b/packages/client/src/elements/defineTooltipElement.ts
@@ -30,8 +30,9 @@ const CSS = `
   will-change: visibility, top, left;
 }
 .element {
-  color: var(--element);
   font-size: 14px;
+  font-weight: 400;
+  color: var(--element);
 }
 .component {
   font-size: 16px;

diff --git a/packages/client/src/elements/defineTreeElement.ts b/packages/client/src/elements/defineTreeElement.ts
@@ -49,9 +49,9 @@ const CSS = `
 }
 .line {
   position: absolute;
-  left: 18px;
+  left: 17px;
   top: 22px;
-  opacity: 0.4;
+  opacity: 0.1;
   width: 1px;
   height: calc(100% - 44px);
   background: var(--green);
@@ -66,11 +66,14 @@ const CSS = `
 }
 .title {
   padding-bottom: 12px;
+  font-size: 16px;
+  font-weight: 500;
   color: var(--green);
 }
 .element {
-  color: var(--element);
   font-size: 14px;
+  font-weight: 400;
+  color: var(--element);
 }
 .empty {
   color: var(--red);
@@ -82,25 +85,26 @@ const CSS = `
   opacity: 1;
 }
 .tag[data-file]:hover ~ .line {
-  opacity: 0.8;
+  opacity: 0.6;
 }
 .msg {
   font-size: 14px;
   font-weight: 200;
   text-decoration: underline;
 }
 .name {
-  font-size: 14px;
+  font-size: 16px;
+  font-weight: 500;
   color: var(--green);
 }
 .file {
-  font-size: 12px;
-  font-weight: 300;
+  font-size: 14px;
+  font-weight: 200;
   color: var(--cyan);
 }
 .name,
 .file {
-  opacity: 0.6;
+  opacity: 0.3;
 }
 `;
 
@@ -231,7 +235,7 @@ export function defineTreeElement() {
       if (!withFile) {
         return `
           <div class="tag">
-            <span class="name">&lt;${name}&gt;</span>
+            <span class="name">&lt;/${name}&gt;</span>
           </div>
         `;
       }

diff --git a/packages/client/src/resolve/createVueResolver.ts b/packages/client/src/resolve/createVueResolver.ts
@@ -1,4 +1,4 @@
-import { isStr } from '@open-editor/shared';
+import { isBol, isStr } from '@open-editor/shared';
 import type { ResolveDebug } from './resolveDebug';
 import type { ElementSourceMeta } from './resolveSource';
 import { ensureFileName, isValidFileName } from './util';
@@ -19,14 +19,14 @@ export function createVueResolver<T = any>(options: VueResolverOptions<T>) {
     deep: boolean,
   ) {
     if (isVueSource(debug.originalElement)) {
-      resolveSourceFromVueSource(debug, tree, deep, options);
+      resolveVueSource(debug, tree, deep, options);
     } else {
-      resolveSourceFromInstance(debug, tree, deep, options);
+      resolveVueInstance(debug.value, tree, deep, options);
     }
   };
 }
 
-function resolveSourceFromVueSource<T = any>(
+function resolveVueSource<T = any>(
   debug: ResolveDebug<T>,
   tree: Partial<ElementSourceMeta>[],
   deep: boolean,
@@ -96,16 +96,14 @@ function resolveVueSourceAnchor<T = any>(
   return [];
 }
 
-function resolveSourceFromInstance<T = any>(
-  debug: ResolveDebug<T>,
+function resolveVueInstance<T = any>(
+  instance: T,
   tree: Partial<ElementSourceMeta>[],
   deep: boolean,
   options: VueResolverOptions,
 ) {
   const { isValid, getNext, getFile, getName } = options;
 
-  let instance = debug.value;
-
   while (isValid(instance)) {
     const __file = getFile(instance);
     if (isValidFileName(__file)) {
@@ -130,23 +128,25 @@ function parseVueSource(__source: string) {
   };
 }
 
-let hasVueSource: boolean | null = null;
+let cacheIsVueSource: boolean | undefined;
 function isVueSource(element: HTMLElement) {
-  if (hasVueSource != null) return hasVueSource;
+  if (isBol(cacheIsVueSource)) {
+    return cacheIsVueSource;
+  }
 
   while (element) {
     if (getElementVueSource(element) != null) {
-      return (hasVueSource = true);
+      return (cacheIsVueSource = true);
     }
     element = element.parentElement!;
   }
 
-  return (hasVueSource = false);
+  return (cacheIsVueSource = false);
 }
 
-const vueComponentNameRE = /([^/.]+)\.vue$/;
-export function getNameByFile(file = '') {
-  return file.match(vueComponentNameRE)?.[1];
+const nameRE = /([^/.]+)\.vue$/;
+function getNameByFile(file = '') {
+  return file.match(nameRE)?.[1];
 }
 
 function getElementVueSource(element?: HTMLElement) {

diff --git a/packages/client/src/resolve/util.ts b/packages/client/src/resolve/util.ts
@@ -10,10 +10,9 @@ export function ensureFileName(fileName: string) {
 
 export function isValidFileName(fileName?: string): fileName is string {
   if (fileName) {
-    fileName = ensureFileName(fileName);
     return (
       !fileName.startsWith('/home/runner/') &&
-      !fileName.startsWith('/node_modules/')
+      !ensureFileName(fileName).startsWith('/node_modules/')
     );
   }
   return false;

diff --git a/packages/shared/src/type.ts b/packages/shared/src/type.ts
@@ -13,3 +13,7 @@ export function isStr(value: any): value is string {
 export function isNum(value: any): value is number {
   return typeof value === 'number';
 }
+
+export function isBol(value: any): value is boolean {
+  return typeof value === 'boolean';
+}