flems.io

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

@@ -0,0 +1,148 @@
+---
+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`.