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

title	date	draft	tags
💼 JS/HTML/CSS selfhosted песочница в одном файле	2022-12-28T00:05:00+03:00	false	development javascript web

Flems

На GitHub porsager разрабатывает JavaScript песочницу, которая представляет из себя один HTML файл и имя ей Flems.
Посмотреть, как это работает можно на сайте проекта Flems.io.

Flems — представляет из себя статическое веб-приложение.
Он отлично подходит для документации, примеров, презентаций, вопросов и многого другого.

Начало работы

Необходимо скачать единственный файл flems.html и установить его в качестве скрипта JavaScript.

Для чего?
Ответ: Чтобы ты мог использовать Flems только с одним требуемым файлом, JavaScript и HTML код были объединены в flems.html.

Flems работает, имея код JavaScript, содержащийся в комментариях HTML, и код HTML, содержащийся в комментариях JavaScript.
Таким образом, если Flems загружается как JavaScript, HTML игнорируется, а при загрузке как HTML игнорируется часть JavaScript.

Смотри standalone.js.

<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 — массив файлов

{
    name        : String, 
    compiler    : String | Function,
    content     : String
}

Нижеперечисленные расширения обрабатываются для файлов (другие игнорируются).

• .html - Используется только первый HTML-файл (остальные игнорируются)
• .js
• .css
• .ts - Будет скомпилирован с помощью TypeScript
• .ls - Будет скомпилирован с помощью LiveScript

Следующие компиляторы в настоящее время доступны только для файлов *.js:

• ts (TypeScript)
• ls (LiveScript)
• babel

Также можно предоставить функцию, которая получает файл и возвращает Promise, который возвращает объект с кодом и картой, например:

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 — массив ссылок

{
    name        : String,
    type        : String, // js | css
    url         : String
}

Если URL-адрес поддерживает CORS, Flems будет открывать файлы короче 200 000 символов в редакторе, в противном случае они будут просто линкованы.

Опции

Flems настраивается, если тебе не нужна панель инструментов или не нужен вывод консоли, можно легко скрыть их.
Доступны следующие параметры со значениями по умолчанию:

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