mirror of
https://github.com/slint-ui/slint.git
synced 2025-10-01 14:21:16 +00:00
Add a preview.html to the online code editor that only does the preview withtout the code editors
This commit is contained in:
Olivier Goffart
parent
a8475d062c
commit
b155dbe601
3 changed files with 108 additions and 2 deletions
13
tools/online_editor/preview.html
Normal file
13
tools/online_editor/preview.html
Normal 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
85
tools/online_editor/preview.ts
Normal 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();
|
||||||
|
})();
|
||||||
|
|
@ -6,7 +6,8 @@ const dist = path.resolve(__dirname, "dist");
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
entry: {
|
entry: {
|
||||||
app: './index.ts',
|
main: './index.ts',
|
||||||
|
preview: './preview.ts',
|
||||||
'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
|
'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
|
||||||
'json.worker': 'monaco-editor/esm/vs/language/json/json.worker',
|
'json.worker': 'monaco-editor/esm/vs/language/json/json.worker',
|
||||||
'css.worker': 'monaco-editor/esm/vs/language/css/css.worker',
|
'css.worker': 'monaco-editor/esm/vs/language/css/css.worker',
|
||||||
|
|
@ -41,7 +42,14 @@ module.exports = {
|
||||||
plugins: [
|
plugins: [
|
||||||
new HtmlWebPackPlugin({
|
new HtmlWebPackPlugin({
|
||||||
title: 'SixtyFPS Online Editor',
|
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({
|
new WasmPackPlugin({
|
||||||
crateDirectory: path.resolve(__dirname, "../../api/sixtyfps-wasm-interpreter/"),
|
crateDirectory: path.resolve(__dirname, "../../api/sixtyfps-wasm-interpreter/"),
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue