fervid_wasm 0.2.0

WASM bindings for the fervid project
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

import init, { compile_sync } from '../pkg/fervid_wasm.js'
import * as monaco from 'https://cdn.jsdelivr.net/npm/monaco-editor@0.41.0/esm/vs/editor/editor.main.js/+esm'

const INITIAL =
    `<template>
    <h1>
        Hello {{ name }}!
    </h1>
    <input v-model="name">
</template>

<script setup>
import { ref } from 'vue'

const name = ref('fervid')
</script>
`

// DOM
const inputElement = document.getElementById('editor'),
    outputElement = document.getElementById('output'),
    /** @type {HTMLElement} */
    outputTimeElement = document.getElementById('time'),
    /** @type {HTMLButtonElement} */
    prodToggleButton = document.getElementById('prod-toggle')

let inputEditorInstance,
    outputEditorInstance,
    value = INITIAL,
    isTimeInitial = true,
    is_prod = true

function mountEditor () {
    inputEditorInstance = monaco.editor.create(inputElement, {
        value,
        language: 'html',
        minimap: { enabled: false }
    })

    outputEditorInstance = monaco.editor.create(outputElement, {
        value: compileAndTime(),
        language: 'javascript',
        readOnly: true,
        minimap: { enabled: false }
    })

    monaco.languages.register({ id: 'vue', extensions: ['.vue'] })
    monaco.languages.register({ id: 'javascript', extensions: ['.js'] })
    monaco.languages.register({ id: 'typescript', extensions: ['.ts'] })

    function recompile () {
        value = inputEditorInstance.getValue()
        outputEditorInstance.setValue(compileAndTime())
    }

    inputEditorInstance.onDidChangeModelContent(recompile)

    prodToggleButton.onclick = () => {
        is_prod = !is_prod
        prodToggleButton.classList.toggle('prod')
        prodToggleButton.textContent = is_prod ? 'PROD' : 'DEV'
        recompile()
    }
}

function compileAndTime () {
    const start = performance.now()
    const result = compile_sync(value, is_prod)
    const end = performance.now()

    outputTimeElement.textContent = `${((end - start) * 1000).toFixed(0)}ยตs ${isTimeInitial ? '(cold)' : ''}`
    isTimeInitial = false
    return result
}

init().then(mountEditor)