From 7fced3c47aafee225709708cae246d06c0f78b21 Mon Sep 17 00:00:00 2001
From: zjxxxxxxxxx <43126836+zjxxxxxxxxx@users.noreply.github.com>
Date: Fri, 22 Sep 2023 14:43:02 +0800
Subject: [PATCH] feat: change font styles (#88)
---
.changeset/nasty-forks-drop.md | 5 ++++
.changeset/tender-elephants-guess.md | 5 ++++
.../src/elements/defineInspectElement.ts | 2 +-
.../src/elements/defineTooltipElement.ts | 3 +-
.../client/src/elements/defineTreeElement.ts | 22 ++++++++------
.../client/src/resolve/createVueResolver.ts | 30 +++++++++----------
packages/client/src/resolve/util.ts | 3 +-
packages/shared/src/type.ts | 4 +++
8 files changed, 46 insertions(+), 28 deletions(-)
create mode 100644 .changeset/nasty-forks-drop.md
create mode 100644 .changeset/tender-elephants-guess.md
diff --git a/.changeset/nasty-forks-drop.md b/.changeset/nasty-forks-drop.md
new file mode 100644
index 00000000..48a11e8f
--- /dev/null
+++ 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
new file mode 100644
index 00000000..a461c9ee
--- /dev/null
+++ 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
index c9cd0fd7..c06b1741 100644
--- 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
index 2d9b6f07..83b256a7 100644
--- 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
index 3849cbda..632d888d 100644
--- 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,7 +85,7 @@ const CSS = `
opacity: 1;
}
.tag[data-file]:hover ~ .line {
- opacity: 0.8;
+ opacity: 0.6;
}
.msg {
font-size: 14px;
@@ -90,17 +93,18 @@ const CSS = `
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 `
- <${name}>
+ </${name}>
`;
}
diff --git a/packages/client/src/resolve/createVueResolver.ts b/packages/client/src/resolve/createVueResolver.ts
index e311a94a..a768d9c7 100644
--- 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(options: VueResolverOptions) {
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(
+function resolveVueSource(
debug: ResolveDebug,
tree: Partial[],
deep: boolean,
@@ -96,16 +96,14 @@ function resolveVueSourceAnchor(
return [];
}
-function resolveSourceFromInstance(
- debug: ResolveDebug,
+function resolveVueInstance(
+ instance: T,
tree: Partial[],
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
index 68a7c729..6b64cab3 100644
--- 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
index 304c1c4d..5540241d 100644
--- 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';
+}