Blog/content/posts/2022/javascript/singlefile-sandbox.md

149 lines
5.2 KiB
Markdown
Raw Normal View History

2022-12-28 00:36:34 +03:00
---
title: "💼 JS/HTML/CSS selfhosted песочница в одном файле"
date: 2022-12-28T00:05:00+03:00
draft: false
tags: [development, javascript, web]
---
## Flems
На GitHub [porsager](https://github.com/porsager/) разрабатывает JavaScript песочницу,
которая представляет из себя один HTML файл и имя ей [Flems](https://github.com/porsager/flems).
Посмотреть, как это работает можно на сайте проекта [Flems.io](https://flems.io/).
Flems — представляет из себя статическое веб-приложение.
Он отлично подходит для документации, примеров, презентаций, вопросов и многого другого.
## Начало работы
Необходимо скачать единственный файл [flems.html](https://flems.io/flems.html)
и установить его в качестве скрипта JavaScript.
**Для чего?**
**Ответ:** Чтобы ты мог использовать Flems только с одним требуемым файлом,
JavaScript и HTML код были объединены в `flems.html`.
Flems работает, имея код JavaScript, содержащийся в комментариях HTML,
и код HTML, содержащийся в комментариях JavaScript.
Таким образом, если Flems загружается как JavaScript, HTML игнорируется,
а при загрузке как HTML игнорируется часть JavaScript.
Смотри [standalone.js](https://github.com/porsager/flems/blob/master/scripts/standalone.js).
```html
<script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script>
<script>
const flems = Flems(document.body, {
files: [{
name: 'app.js',
content: 'm.render(document.body, m("h1", "Hello world"))'
}],
links: [{
name: 'mithril',
type: 'script',
url: 'https://unpkg.com/mithril'
}]
})
</script>
```
## Настройка
Содержание песочницы добавляется массивами `files` и `links` в настройках Flems.
### `.files` — массив файлов
```javascript
{
name : String,
compiler : String | Function,
content : String
}
```
Нижеперечисленные расширения обрабатываются для файлов (другие игнорируются).
* `.html` - Используется только первый HTML-файл (остальные игнорируются)
* `.js`
* `.css`
* `.ts` - Будет скомпилирован с помощью TypeScript
* `.ls` - Будет скомпилирован с помощью LiveScript
Следующие компиляторы в настоящее время доступны только для файлов `*.js`:
* `ts` (TypeScript)
* `ls` (LiveScript)
* `babel`
Также можно предоставить функцию, которая получает файл и возвращает Promise,
который возвращает объект с кодом и картой, например:
```javascript
function compile(file) {
return new Promise(resolve => {
return {
code: file.content.replace(/var /g, 'const '), // Don't do this
map: null // The JSON for a sourcemap
}
})
}
```
### `.links` — массив ссылок
```javascript
{
name : String,
type : String, // js | css
url : String
}
```
Если URL-адрес поддерживает CORS, Flems будет открывать файлы
короче 200 000 символов в редакторе,
в противном случае они будут просто линкованы.
## Опции
Flems настраивается, если тебе не нужна панель инструментов или не нужен вывод консоли,
можно легко скрыть их.
Доступны следующие параметры со значениями по умолчанию:
```javascript
{
middle : 50,
selected : '.js',
color : 'rgb(38,50,56)',
theme : 'material', // and 'none' or 'default'
resizeable : true,
editable : true,
toolbar : true,
fileTabs : true,
linkTabs : true,
shareButton : true,
reloadButton : true,
console : true,
autoReload : true,
autoReloadDelay : 400,
autoHeight : false
}
```
## Методы
Есть несколько методов, доступных для управления средой выполнения Flems.
### `.reload()`
Перезагружает runtime страницу.
### `.focus()`
Устанавливает фокус в редакторе для текущего выбранного файла.
### `.redraw()`
Вызовите метод, если изменился размер контейнера или свойство.
Например: `display: none` to `display: block`.