149 lines
5.2 KiB
Markdown
149 lines
5.2 KiB
Markdown
---
|
||
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`.
|