language-servers/slint
1
0
Fork 0
mirror of https://github.com/slint-ui/slint.git synced 2025-10-01 14:21:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Add a preview.html to the online code editor that only does the preview withtout the code editors

Browse source
This commit is contained in:
Olivier Goffart 2021-02-08 11:36:49 +01:00
parent a8475d062c
commit b155dbe601
3 changed files with 108 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

13
tools/online_editor/preview.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SixtyFPS Preview</title>
</head>
<body>
<div id="preview"></div>
</body>
</html>

85
tools/online_editor/preview.ts Normal file
View file

@ -0,0 +1,85 @@
/* LICENSE BEGIN
This file is part of the SixtyFPS Project -- https://sixtyfps.io
Copyright (c) 2020 Olivier Goffart <olivier.goffart@sixtyfps.io>
Copyright (c) 2020 Simon Hausmann <simon.hausmann@sixtyfps.io>
SPDX-License-Identifier: GPL-3.0-only
This file is also available under commercial licensing terms.
Please contact info@sixtyfps.io for more information.
LICENSE END */
(async function () {
console.log("HELLO");
let sixtyfps = await import("../../api/sixtyfps-wasm-interpreter/pkg/index.js");
var base_url = "";
/// Index by url. Inline documents will use the empty string.
var loaded_documents: Map<string, string> = new Map;
let main_source = `
import { SpinBox, Button, CheckBox, Slider, GroupBox } from "sixtyfps_widgets.60";
export Demo := Window {
width: 300px; // Width in logical pixels. All 'px' units are automatically scaled with screen resolution.
height: 300px;
t:= Text {
text: "Hello World";
font-size: 24px;
}
Image {
y: 50px;
source: @image-url("https://sixtyfps.io/resources/logo_scaled.png");
}
}
`
function update_preview() {
let div = document.getElementById("preview") as HTMLDivElement;
setTimeout(function () { render_or_error(main_source, base_url, div); }, 1);
}
async function render_or_error(source: string, base_url: string, div: HTMLDivElement) {
let canvas_id = 'canvas_' + Math.random().toString(36).substr(2, 9);
let canvas = document.createElement("canvas");
canvas.width = 800;
canvas.height = 600;
canvas.id = canvas_id;
div.innerHTML = "";
div.appendChild(canvas);
var markers = [];
try {
var compiled_component = await sixtyfps.compile_from_string(source, base_url, (file_name: string) => {
let u = new URL(file_name, base_url || undefined);
return u.toString();
}, async (url: string): Promise<string> => {
let file_source = loaded_documents.get(url);
if (file_source === undefined) {
const response = await fetch(url);
let doc = await response.text();
loaded_documents.set(url, doc);
return doc;
}
return file_source;
});
} catch (e) {
let text = document.createTextNode(e.message);
let p = document.createElement('pre');
p.appendChild(text);
div.innerHTML = "<pre style='color: red; background-color:#fee; margin:0'>" + p.innerHTML + "</pre>";
}
compiled_component.run(canvas_id)
}
const params = new URLSearchParams(window.location.search);
const code = params.get("snippet");
const load_url = params.get("load_url");
if (code) {
main_source = code;
} else if (load_url) {
base_url = load_url;
const response = await fetch(load_url);
main_source = await response.text();
}
update_preview();
})();

12
tools/online_editor/webpack.common.js
View file

@ -6,7 +6,8 @@ const dist = path.resolve(__dirname, "dist");
module.exports = {
entry: {
app: './index.ts',
main: './index.ts',
preview: './preview.ts',
'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
'json.worker': 'monaco-editor/esm/vs/language/json/json.worker',
'css.worker': 'monaco-editor/esm/vs/language/css/css.worker',
@ -41,7 +42,14 @@ module.exports = {
plugins: [
new HtmlWebPackPlugin({
title: 'SixtyFPS Online Editor',
template: 'index.html'
template: 'index.html',
chunks: ['main']
}),
new HtmlWebPackPlugin({
title: 'SixtyFPS Preview',
template: 'preview.html',
filename: 'preview.html',
chunks: ['preview']
}),
new WasmPackPlugin({
crateDirectory: path.resolve(__dirname, "../../api/sixtyfps-wasm-interpreter/"),