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`.
|