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