Skip to content

Commit

Permalink
online_editor: Tweak eslint configuration and fix reported issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@hunger
hunger committed Aug 16, 2022
1 parent d6bea15 commit 58d5491
Show file tree
Hide file tree
Showing 7 changed files with 84 additions and 64 deletions.
2 changes: 1 addition & 1 deletion .reuse/dep5
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ Files: */slint-logo-*.svg */slint-logo-*.png
Copyright: Copyright © SixtyFPS GmbH <[email protected]>
License: CC-BY-ND-4.0

Files: .clang-format .gitattributes .gitignore */.gitignore .pre-commit-config.yaml .vscode/* cspell.json rustfmt.toml .mailmap
Files: .clang-format .gitattributes .gitignore */.gitignore .pre-commit-config.yaml .vscode/* cspell.json rustfmt.toml .mailmap */.eslintrc.yml
Copyright: Copyright © SixtyFPS GmbH <[email protected]>
License: GPL-3.0-only OR LicenseRef-Slint-commercial

Expand Down
21 changes: 17 additions & 4 deletions tools/online_editor/.eslintrc.yml
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,24 @@
env:
browser: true
es2021: true
extends: standard-with-typescript
extends:
- eslint:recommended
- plugin:@typescript-eslint/recommended
overrides: []
parser: "@typescript-eslint/parser"
parserOptions:
project:
- "./tsconfig.json"
ecmaVersion: latest
sourceType: module
rules: {}
plugins:
- "@typescript-eslint"
rules:
"no-unused-vars":
- error
- "argsIgnorePattern": "^_"
"destructuredArrayIgnorePattern": "^_"
"varsIgnorePattern": "^_"
"@typescript-eslint/no-unused-vars":
- error
- "argsIgnorePattern": "^_"
"destructuredArrayIgnorePattern": "^_"
"varsIgnorePattern": "^_"
20 changes: 10 additions & 10 deletions tools/online_editor/highlighting.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export const slint_language = <monaco.languages.IMonarchLanguage>{
escapes:
/\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,

symbols: /[\#\!\%\&\*\+\-\.\/\:\;\<\=\>\@\^\|_\?,()]+/,
symbols: /[#!%&*+\-./:;<=>@^|_?,()]+/,

tokenizer: {
root: [
Expand All @@ -50,11 +50,11 @@ export const slint_language = <monaco.languages.IMonarchLanguage>{
[/@symbols/, ""],
],
inner: [
[/[a-zA-Z_][a-zA-Z0-9_\-]*\s*:=/, "variable.parameter"],
[/[a-zA-Z_][a-zA-Z0-9_\-]*\s*:\s*\{/, "variable.parameter", "@binding_1"],
[/[a-zA-Z_][a-zA-Z0-9_\-]*\s*:/, "variable.parameter", "@binding_0"],
[/[a-zA-Z_][a-zA-Z0-9_-]*\s*:=/, "variable.parameter"],
[/[a-zA-Z_][a-zA-Z0-9_-]*\s*:\s*\{/, "variable.parameter", "@binding_1"],
[/[a-zA-Z_][a-zA-Z0-9_-]*\s*:/, "variable.parameter", "@binding_0"],
[
/[a-zA-Z_][a-zA-Z0-9_\-]*/,
/[a-zA-Z_][a-zA-Z0-9_-]*/,
{
cases: {
"@inner_keywords": { token: "keyword" },
Expand All @@ -70,7 +70,7 @@ export const slint_language = <monaco.languages.IMonarchLanguage>{
[/:=/, ""],
[/<=>/, "", "@binding_0"],
[/=>\s*{/, "", "@binding_1"],
[/\</, "", "@type"],
[/</, "", "@type"],
[/\[/, "", "binding_1"],
[/@symbols/, ""],
],
Expand All @@ -88,8 +88,8 @@ export const slint_language = <monaco.languages.IMonarchLanguage>{
{ include: "@whitespace" },
{ include: "@numbers" },
[/"/, "string", "@string"],
[/\</, "", "@push"],
[/\>/, "", "@pop"],
[/</, "", "@push"],
[/>/, "", "@pop"],
[/@symbols/, ""],
],

Expand Down Expand Up @@ -146,10 +146,10 @@ export const slint_language = <monaco.languages.IMonarchLanguage>{
[/"/, "string", "@pop"],
],
comment: [
[/[^\/*]+/, "comment"],
[/[^/*]+/, "comment"],
[/\/\*/, "comment", "@push"],
["\\*/", "comment", "@pop"],
[/[\/*]/, "comment"],
[/[/*]/, "comment"],
],

numbers: [
Expand Down
77 changes: 40 additions & 37 deletions tools/online_editor/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,9 @@ import "monaco-editor/esm/vs/editor/standalone/browser/referenceSearch/standalon

import * as monaco from "monaco-editor/esm/vs/editor/editor.api";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
(self as any).MonacoEnvironment = {
getWorker(_: any, _label: any) {
getWorker(_: unknown, _label: unknown) {
return new Worker(new URL("monaco_worker.js", import.meta.url), {
type: "module",
});
Expand Down Expand Up @@ -51,7 +52,7 @@ import slint_init, * as slint from "@preview/slint_wasm_interpreter.js";
/// Index by url. Inline documents will use the empty string.
const editor_documents: Map<string, ModelAndViewState> = new Map();

let hello_world = `import { Button, VerticalBox } from "std-widgets.slint";
const hello_world = `import { Button, VerticalBox } from "std-widgets.slint";
export Demo := Window {
VerticalBox {
Text {
Expand All @@ -72,20 +73,20 @@ export Demo := Window {
fetch(url).then((x) =>
x.text().then((y) => {
base_url = url;
let model = createMainModel(y, url);
const model = createMainModel(y, url);
addTab(model, url);
})
);
}

let select = <HTMLInputElement>document.getElementById("select_combo");
const select = <HTMLInputElement>document.getElementById("select_combo");
function select_combo_changed() {
if (select.value) {
let tag = "master";
{
let found;
if (
(found = window.location.pathname.match(/releases\/([^\/]*)\/editor/))
(found = window.location.pathname.match(/releases\/([^/]*)\/editor/))
) {
tag = "v" + found[1];
}
Expand All @@ -96,25 +97,27 @@ export Demo := Window {
} else {
clearTabs();
base_url = "";
let model = createMainModel(hello_world, "");
const model = createMainModel(hello_world, "");
addTab(model);
}
}
select.onchange = select_combo_changed;

let style_combo = <HTMLInputElement>document.getElementById("style_combo");
const style_combo = <HTMLInputElement>document.getElementById("style_combo");
if (style_combo) {
style_combo.onchange = update_preview;
}

let compile_button = <HTMLButtonElement>(
const compile_button = <HTMLButtonElement>(
document.getElementById("compile_button")
);
compile_button.onclick = function () {
update_preview();
};

let auto_compile = <HTMLInputElement>document.getElementById("auto_compile");
const auto_compile = <HTMLInputElement>(
document.getElementById("auto_compile")
);
auto_compile.onchange = function () {
if (auto_compile.checked) {
update_preview();
Expand All @@ -126,8 +129,8 @@ export Demo := Window {
return "unnamed.slint";
}
try {
let parsed_url = new URL(url);
let path = parsed_url.pathname;
const parsed_url = new URL(url);
const path = parsed_url.pathname;
return path.substring(path.lastIndexOf("/") + 1);
} catch (e) {
return url;
Expand All @@ -147,10 +150,10 @@ export Demo := Window {
source: string,
url: string
): monaco.editor.ITextModel {
let model = monaco.editor.createModel(source, "slint");
const model = monaco.editor.createModel(source, "slint");
model.onDidChangeContent(function () {
let permalink = <HTMLAnchorElement>document.getElementById("permalink");
let params = new URLSearchParams();
const permalink = <HTMLAnchorElement>document.getElementById("permalink");
const params = new URLSearchParams();
params.set("snippet", editor.getModel()?.getValue() || "");
const this_url = new URL(window.location.toString());
this_url.search = params.toString();
Expand All @@ -163,14 +166,14 @@ export Demo := Window {
}

function clearTabs() {
let tab_bar = document.getElementById("tabs") as HTMLUListElement;
const tab_bar = document.getElementById("tabs") as HTMLUListElement;
tab_bar.innerHTML = "";
editor_documents.clear();
}

function addTab(_model: monaco.editor.ITextModel, url: string = "") {
let tab_bar = document.getElementById("tabs") as HTMLUListElement;
let tab = document.createElement("li");
function addTab(_model: monaco.editor.ITextModel, url = "") {
const tab_bar = document.getElementById("tabs") as HTMLUListElement;
const tab = document.createElement("li");
tab.setAttribute("class", "nav-item");
tab.dataset["url"] = url;
tab.innerHTML = `<span class="nav-link">${tabTitleFromURL(url)}</span>`;
Expand All @@ -185,13 +188,13 @@ export Demo := Window {
}

function setCurrentTab(url: string) {
let current_tab = document.querySelector(
const current_tab = document.querySelector(
`#tabs li[class~="nav-item"] span[class~="nav-link"][class~="active"]`
);
if (current_tab != undefined) {
current_tab.className = "nav-link";

let url = current_tab.parentElement?.dataset.url;
const url = current_tab.parentElement?.dataset.url;
if (url != undefined) {
const model_and_state = editor_documents.get(url);
if (model_and_state !== undefined) {
Expand All @@ -200,13 +203,13 @@ export Demo := Window {
}
}
}
let new_current = document.querySelector(
const new_current = document.querySelector(
`#tabs li[class~="nav-item"][data-url="${url}"] span[class~="nav-link"]`
);
if (new_current != undefined) {
new_current.className = "nav-link active";
}
let model_and_state = editor_documents.get(url);
const model_and_state = editor_documents.get(url);
if (model_and_state != undefined) {
editor.setModel(model_and_state.model);
if (model_and_state.view_state != null) {
Expand All @@ -217,12 +220,12 @@ export Demo := Window {
}

function update_preview() {
let main_model_and_state = editor_documents.get(base_url);
const main_model_and_state = editor_documents.get(base_url);
if (main_model_and_state === undefined) {
return;
}
let source = main_model_and_state.model.getValue();
let div = document.getElementById("preview") as HTMLDivElement;
const source = main_model_and_state.model.getValue();
const div = document.getElementById("preview") as HTMLDivElement;
setTimeout(function () {
render_or_error(source, base_url, div);
}, 1);
Expand All @@ -233,29 +236,29 @@ export Demo := Window {
base_url: string,
div: HTMLDivElement
) {
let style =
const style =
(<HTMLInputElement>document.getElementById("style_combo"))?.value ??
"fluent";

let canvas_id = "canvas_" + Math.random().toString(36).slice(2, 11);
let canvas = document.createElement("canvas");
const canvas_id = "canvas_" + Math.random().toString(36).slice(2, 11);
const canvas = document.createElement("canvas");
canvas.width = 800;
canvas.height = 600;
canvas.id = canvas_id;
div.innerHTML = "";
div.appendChild(canvas);
var markers = [];
let { component, diagnostics, error_string } =
let markers = [];
const { component, diagnostics, error_string } =
await slint.compile_from_string_with_style(
source,
base_url,
style,
async (url: string): Promise<string> => {
let model_and_state = editor_documents.get(url);
const model_and_state = editor_documents.get(url);
if (model_and_state === undefined) {
const response = await fetch(url);
let doc = await response.text();
let model = monaco.editor.createModel(doc, "slint");
const doc = await response.text();
const model = monaco.editor.createModel(doc, "slint");
model.onDidChangeContent(function () {
maybe_update_preview_automatically();
});
Expand All @@ -268,8 +271,8 @@ export Demo := Window {
);

if (error_string != "") {
let text = document.createTextNode(error_string);
let p = document.createElement("pre");
const text = document.createTextNode(error_string);
const p = document.createElement("pre");
p.appendChild(text);
div.innerHTML =
"<pre style='color: red; background-color:#fee; margin:0'>" +
Expand Down Expand Up @@ -306,14 +309,14 @@ export Demo := Window {

if (code) {
clearTabs();
let model = createMainModel(code, "");
const model = createMainModel(code, "");
addTab(model);
} else if (load_url) {
load_from_url(load_url);
} else {
clearTabs();
base_url = "";
let model = createMainModel(hello_world, "");
const model = createMainModel(hello_world, "");
addTab(model);
}
})();
5 changes: 3 additions & 2 deletions tools/online_editor/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"scripts": {
"build": "rimraf dist pkg && npx vite build",
"build:wasm_preview": "wasm-pack build --target web ../../api/wasm-interpreter",
"lint": "eslint .",
"lint": "eslint *.ts",
"start": "rimraf dist && npm run build:wasm_preview && npn start:vite",
"start:vite": "vite --open",
"syntax_check": "tsc --noemit"
Expand All @@ -19,8 +19,9 @@
"npm": "^8.9.0"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.33.0",
"@typescript-eslint/parser": "^5.33.0",
"eslint": "^8.22.0",
"eslint-config-standard-with-typescript": "^22.0.0",
"rimraf": "^3.0.2",
"typescript": "^4.7.4",
"vite": "^2.9.8"
Expand Down
Loading

0 comments on commit 58d5491

Please sign in to comment.