Skip to content

Commit 5a75dda

Browse files
tmr232tmr232
authored
Merge pull request #117 from tmr232/use-biome-for-svelte
Remove Prettier & Use Biome Instead
2 parents b298ae2 + 22af38c commit 5a75dda

File tree

16 files changed

+1077
-1092
lines changed

16 files changed

+1077
-1092
lines changed

‎biome.jsonc‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,25 @@
77
},
88
"files": {
99
"ignoreUnknown": false,
10-
"ignore": [
11-
"./dist",
12-
"*.svelte",
13-
"src/test/commentTestSamples",
14-
"src/demo/src/assets"
15-
]
10+
"ignore": ["./dist", "src/test/commentTestSamples", "src/demo/src/assets"]
1611
},
12+
"overrides": [
13+
{
14+
"include": ["*.svelte"],
15+
"linter": {
16+
"rules": {
17+
"style": {
18+
// I want to keep variables typed explicitly in some cases, like Svelte exports.
19+
"noInferrableTypes": "off",
20+
// Disable some checks so biome doesn't crash.
21+
// https://biomejs.dev/internals/language-support/#html-super-languages-support
22+
"useConst": "off",
23+
"useImportType": "off"
24+
}
25+
}
26+
}
27+
}
28+
],
1729
"formatter": {
1830
"enabled": true,
1931
"indentStyle": "space"

‎bun.lockb‎

-850 Bytes
Binary file not shown.

‎package.json‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,6 @@
3636
"graphology-utils": "^2.5.2",
3737
"lz-string": "^1.5.0",
3838
"oxlint": "0.13.2",
39-
"prettier": "3.3.3",
40-
"prettier-plugin-svelte": "^3.2.7",
4139
"svelte": "^4.2.19",
4240
"svelte-awesome-color-picker": "^3.1.4",
4341
"svelte-codemirror-editor": "^1.4.1",
@@ -72,10 +70,8 @@
7270
"build-webview": "bun run --cwd src/webview/ vite build",
7371
"oxlint-fix": "bunx oxlint --ignore-path=oxlint-ignore.txt --fix -D correctness -D perf -D suspicious -A no-await-in-loop",
7472
"oxlint-ci": "bunx oxlint --ignore-path=oxlint-ignore.txt -D correctness -D perf -D suspicious -A no-await-in-loop",
75-
"prettier-format": "bunx prettier **/*.svelte --write",
76-
"prettier-check": "bunx prettier **/*.svelte --check",
77-
"lint": "bunx biome check --fix && bun oxlint-fix && bun prettier-format && bunx eslint --fix && bunx tsc --noEmit && bun typedoc",
78-
"ci": "bunx biome ci && bun oxlint-ci && bun prettier-check && bunx eslint && bunx tsc --noEmit && bun typedoc",
73+
"lint": "bunx biome check --fix && bun oxlint-fix && bunx eslint --fix && bunx tsc --noEmit && bun typedoc",
74+
"ci": "bunx biome ci && bun oxlint-ci && bunx eslint && bunx tsc --noEmit && bun typedoc",
7975
"generate-parsers": "bun run ./scripts/generate-parsers.ts",
8076
"typedoc": "bunx typedoc --treatWarningsAsErrors"
8177
},

‎prettier.config.js‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎src/components/CodeSegmentation.svelte‎

Lines changed: 98 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,118 @@
11
<script lang="ts">
2-
import Parser from "web-tree-sitter";
3-
import { newCFGBuilder, type Language } from "../control-flow/cfg";
4-
import {
5-
mergeNodeAttrs,
6-
remapNodeTargets,
7-
type CFG,
8-
} from "../control-flow/cfg-defs";
9-
import { simplifyCFG, trimFor } from "../control-flow/graph-ops";
10-
import { Graphviz } from "@hpcc-js/wasm-graphviz";
11-
import {
12-
getFirstFunction,
13-
initialize as initializeUtils,
14-
type Parsers,
15-
} from "./utils";
2+
import { Graphviz } from "@hpcc-js/wasm-graphviz";
3+
import Parser from "web-tree-sitter";
4+
import { type Language, newCFGBuilder } from "../control-flow/cfg";
5+
import {
6+
type CFG,
7+
mergeNodeAttrs,
8+
remapNodeTargets,
9+
} from "../control-flow/cfg-defs";
10+
import { simplifyCFG, trimFor } from "../control-flow/graph-ops";
11+
import {
12+
type Parsers,
13+
getFirstFunction,
14+
initialize as initializeUtils,
15+
} from "./utils";
1616
17-
let parsers: Parsers;
18-
let graphviz: Graphviz;
19-
let nodeColors: NodeColors;
20-
export let simplify: boolean = true;
21-
export let trim: boolean = true;
22-
export let code: string;
23-
export let language: Language;
17+
let parsers: Parsers;
18+
let graphviz: Graphviz;
19+
let nodeColors: NodeColors;
20+
export let simplify: boolean = true;
21+
export let trim: boolean = true;
22+
export let code: string;
23+
export let language: Language;
2424
25-
async function initialize() {
26-
const utils = await initializeUtils();
27-
parsers = utils.parsers;
28-
graphviz = utils.graphviz;
29-
}
25+
async function initialize() {
26+
const utils = await initializeUtils();
27+
parsers = utils.parsers;
28+
graphviz = utils.graphviz;
29+
}
3030
31-
function withBackground(text: string, color: string): string {
32-
return `<span style="background: ${color};">${text}</span>`;
33-
}
31+
function withBackground(text: string, color: string): string {
32+
return `<span style="background: ${color};">${text}</span>`;
33+
}
3434
35-
type NodeColors = Map<string, string>;
35+
type NodeColors = Map<string, string>;
3636
37-
function createNodeColors(cfg: CFG): Map<string, string> {
38-
const nodes = new Set(cfg.offsetToNode.values());
39-
const nodeColors = new Map(
40-
[...nodes.keys()].map((node, i, { length }) => [
41-
node,
42-
`hsl(${(360 * i) / length}deg 60% 60%)`,
43-
]),
44-
);
45-
return nodeColors;
46-
}
37+
function createNodeColors(cfg: CFG): Map<string, string> {
38+
const nodes = new Set(cfg.offsetToNode.values());
39+
const nodeColors = new Map(
40+
[...nodes.keys()].map((node, i, { length }) => [
41+
node,
42+
`hsl(${(360 * i) / length}deg 60% 60%)`,
43+
]),
44+
);
45+
return nodeColors;
46+
}
4747
48-
function renderRanges(
49-
cfg: CFG,
50-
functionSyntax: Parser.SyntaxNode,
51-
sourceText: string,
52-
nodeColors: NodeColors,
53-
): string {
54-
let result = "";
55-
const funcStart = functionSyntax.startIndex;
56-
const funcEnd = functionSyntax.endIndex;
57-
for (const { start, stop, value: node } of cfg.offsetToNode) {
58-
if ((stop ?? 0) < funcStart || start > funcEnd) {
59-
continue;
60-
}
61-
result += withBackground(
62-
sourceText.slice(
63-
Math.max(start, funcStart),
64-
Math.min(funcEnd, stop ?? sourceText.length),
65-
),
66-
nodeColors.get(node) ?? "red",
67-
);
48+
function renderRanges(
49+
cfg: CFG,
50+
functionSyntax: Parser.SyntaxNode,
51+
sourceText: string,
52+
nodeColors: NodeColors,
53+
): string {
54+
let result = "";
55+
const funcStart = functionSyntax.startIndex;
56+
const funcEnd = functionSyntax.endIndex;
57+
for (const { start, stop, value: node } of cfg.offsetToNode) {
58+
if ((stop ?? 0) < funcStart || start > funcEnd) {
59+
continue;
6860
}
69-
70-
let legend = [...nodeColors.entries()]
71-
.map(([name, color]) => withBackground(name, color))
72-
.join("\n");
73-
return result + "\n\n\n" + legend;
61+
result += withBackground(
62+
sourceText.slice(
63+
Math.max(start, funcStart),
64+
Math.min(funcEnd, stop ?? sourceText.length),
65+
),
66+
nodeColors.get(node) ?? "red",
67+
);
7468
}
7569
76-
type Options = { simplify: boolean; trim: boolean };
77-
function visualizeCodeSegmentation(
78-
code: string,
79-
language: Language,
80-
options: Options,
81-
) {
82-
const { trim, simplify } = options;
83-
const tree = parsers[language].parse(code);
84-
const functionSyntax = getFirstFunction(tree, language);
85-
const builder = newCFGBuilder(language, {});
70+
let legend = [...nodeColors.entries()]
71+
.map(([name, color]) => withBackground(name, color))
72+
.join("\n");
73+
return `${result}\n\n\n${legend}`;
74+
}
8675
87-
let cfg = builder.buildCFG(functionSyntax);
76+
type Options = { simplify: boolean; trim: boolean };
77+
function visualizeCodeSegmentation(
78+
code: string,
79+
language: Language,
80+
options: Options,
81+
) {
82+
const { trim, simplify } = options;
83+
const tree = parsers[language].parse(code);
84+
const functionSyntax = getFirstFunction(tree, language);
85+
const builder = newCFGBuilder(language, {});
8886
89-
if (!cfg) return "";
90-
if (trim) cfg = trimFor(cfg);
91-
if (simplify) cfg = simplifyCFG(cfg, mergeNodeAttrs);
92-
cfg = remapNodeTargets(cfg);
93-
nodeColors = createNodeColors(cfg);
94-
return renderRanges(cfg, functionSyntax, code, nodeColors);
95-
// return renderPointRanges(cfg, functionSyntax, code, nodeColors);
96-
}
87+
let cfg = builder.buildCFG(functionSyntax);
9788
98-
function renderWrapper(code: string, language: Language, options: Options) {
99-
try {
100-
return visualizeCodeSegmentation(code, language, options);
101-
} catch (error) {
102-
console.trace(error);
103-
return `<p style='border: 2px red solid;'>${error.toString()}</p>`;
104-
}
89+
if (!cfg) return "";
90+
if (trim) cfg = trimFor(cfg);
91+
if (simplify) cfg = simplifyCFG(cfg, mergeNodeAttrs);
92+
cfg = remapNodeTargets(cfg);
93+
nodeColors = createNodeColors(cfg);
94+
return renderRanges(cfg, functionSyntax, code, nodeColors);
95+
// return renderPointRanges(cfg, functionSyntax, code, nodeColors);
96+
}
97+
98+
function renderWrapper(code: string, language: Language, options: Options) {
99+
try {
100+
return visualizeCodeSegmentation(code, language, options);
101+
} catch (error) {
102+
console.trace(error);
103+
return `<p style='border: 2px red solid;'>${error.toString()}</p>`;
105104
}
105+
}
106106
107-
function recolorNodes() {
108-
const nodes = document.querySelectorAll("svg .node");
109-
for (const node of nodes) {
110-
const color = nodeColors.get(node.id) ?? "white";
111-
for (const polygon of node.querySelectorAll("polygon")) {
112-
polygon.setAttribute("fill", color);
113-
}
107+
function recolorNodes() {
108+
const nodes = document.querySelectorAll("svg .node");
109+
for (const node of nodes) {
110+
const color = nodeColors.get(node.id) ?? "white";
111+
for (const polygon of node.querySelectorAll("polygon")) {
112+
polygon.setAttribute("fill", color);
114113
}
115114
}
115+
}
116116
</script>
117117

118118
{#await initialize() then _}

‎src/components/ColorSchemeEditor.svelte‎

Lines changed: 50 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,60 @@
11
<script lang="ts">
2-
import ColorPicker from "svelte-awesome-color-picker";
3-
import { createEventDispatcher } from "svelte";
4-
import {
5-
getLightColorList,
6-
serializeColorList,
7-
deserializeColorList,
8-
type ColorList,
9-
type Color,
10-
} from "../control-flow/colors";
11-
const dispatch = createEventDispatcher();
2+
import { createEventDispatcher } from "svelte";
3+
import ColorPicker from "svelte-awesome-color-picker";
4+
import {
5+
type Color,
6+
type ColorList,
7+
deserializeColorList,
8+
getLightColorList,
9+
serializeColorList,
10+
} from "../control-flow/colors";
11+
const dispatch = createEventDispatcher();
1212
13-
export let colorList = getLightColorList();
13+
export let colorList = getLightColorList();
1414
15-
const colorLabels = new Map([
16-
["node.default", "Default"],
17-
["node.entry", "Entry"],
18-
["node.exit", "Exit"],
19-
["node.throw", "Throw"],
20-
["node.yield", "Yield"],
21-
["node.border", "Border"],
22-
["node.highlight", "Highlight"],
23-
["edge.regular", "Regular"],
24-
["edge.consequence", "Consequence"],
25-
["edge.alternative", "Alternative"],
26-
["cluster.border", "Border"],
27-
["cluster.with", "With"],
28-
["cluster.tryComplex", "Try Complex"],
29-
["cluster.try", "Try"],
30-
["cluster.finally", "Finally"],
31-
["cluster.except", "Except"],
32-
["graph.background", "Background"],
33-
]);
15+
const colorLabels = new Map([
16+
["node.default", "Default"],
17+
["node.entry", "Entry"],
18+
["node.exit", "Exit"],
19+
["node.throw", "Throw"],
20+
["node.yield", "Yield"],
21+
["node.border", "Border"],
22+
["node.highlight", "Highlight"],
23+
["edge.regular", "Regular"],
24+
["edge.consequence", "Consequence"],
25+
["edge.alternative", "Alternative"],
26+
["cluster.border", "Border"],
27+
["cluster.with", "With"],
28+
["cluster.tryComplex", "Try Complex"],
29+
["cluster.try", "Try"],
30+
["cluster.finally", "Finally"],
31+
["cluster.except", "Except"],
32+
["graph.background", "Background"],
33+
]);
3434
35-
const groups = ["Node", "Edge", "Cluster", "Graph"] as const;
35+
const groups = ["Node", "Edge", "Cluster", "Graph"] as const;
3636
37-
function colorsFor(colors: ColorList, entity: (typeof groups)[number]) {
38-
return colors.filter(({ name }) => name.startsWith(entity.toLowerCase()));
39-
}
37+
function colorsFor(colors: ColorList, entity: (typeof groups)[number]) {
38+
return colors.filter(({ name }) => name.startsWith(entity.toLowerCase()));
39+
}
4040
41-
function onColorChange(color: Color) {
42-
return (event) => {
43-
color.hex = event.detail.hex ?? color.hex;
44-
dispatch("preview", { colors: colorList });
45-
};
46-
}
41+
function onColorChange(color: Color) {
42+
return (event) => {
43+
color.hex = event.detail.hex ?? color.hex;
44+
dispatch("preview", { colors: colorList });
45+
};
46+
}
4747
48-
async function copyList() {
49-
await navigator.clipboard.writeText(serializeColorList(colorList));
50-
}
51-
async function pasteList() {
52-
const newColors = deserializeColorList(
53-
await navigator.clipboard.readText(),
54-
);
55-
colorList = newColors;
56-
}
57-
function resetList() {
58-
colorList = getLightColorList();
59-
}
48+
async function copyList() {
49+
await navigator.clipboard.writeText(serializeColorList(colorList));
50+
}
51+
async function pasteList() {
52+
const newColors = deserializeColorList(await navigator.clipboard.readText());
53+
colorList = newColors;
54+
}
55+
function resetList() {
56+
colorList = getLightColorList();
57+
}
6058
</script>
6159

6260
<div class="wrapper">

0 commit comments

Comments
 (0)