@grame/faust-web-component 0.2.0 → 0.2.2

package/src/faust-editor.ts

@@ -1,451 +0,0 @@
-import { icon } from "@fortawesome/fontawesome-svg-core"
-import { IFaustMonoWebAudioNode } from "@grame/faustwasm"
-import { FaustUI } from "@shren/faust-ui"
-import faustCSS from "@shren/faust-ui/dist/esm/index.css?inline"
-import Split from "split.js"
-import { faustPromise, audioCtx, compiler, svgDiagrams, mono_generator, poly_generator, getInputDevices, deviceUpdateCallbacks, accessMIDIDevice, midiInputCallback, extractMidiAndNvoices } from "./common"
-import { createEditor, setError, clearError } from "./editor"
-import { Scope } from "./scope"
-import faustSvg from "./faustText.svg"
-
-const template = document.createElement("template")
-template.innerHTML = `
-<div id="root">
-    <div id="controls">
-        <button title="Run" class="button" id="run" disabled>${icon({ prefix: "fas", iconName: "play" }).html[0]}</button>
-        <button title="Stop" class="button" id="stop" disabled>${icon({ prefix: "fas", iconName: "stop" }).html[0]}</button>
-        <a title="Open in Faust IDE" id="ide" href="https://faustide.grame.fr/" class="button" target="_blank">${icon({ prefix: "fas", iconName: "up-right-from-square" }).html[0]}</a>
-        <select id="audio-input" class="dropdown" disabled>
-            <option>Audio input</option>
-        </select>
-        <!-- TODO: MIDI input
-        <select id="midi-input" class="dropdown" disabled>
-            <option>MIDI input</option>
-        </select>
-        -->
-        <!-- TODO: volume control? <input id="volume" type="range" min="0" max="100"> -->
-        <a title="Faust website" id="faust" href="https://faust.grame.fr/" target="_blank"><img src="${faustSvg}" height="15px" /></a>
-    </div>
-    <div id="content">
-        <div id="editor"></div>
-        <div id="sidebar">
-            <div id="sidebar-buttons">
-                <button title="Controls" id="tab-ui" class="button tab" disabled>${icon({ prefix: "fas", iconName: "sliders" }).html[0]}</button>
-                <button title="Block Diagram" id="tab-diagram" class="button tab" disabled>${icon({ prefix: "fas", iconName: "diagram-project" }).html[0]}</button>
-                <button title="Scope" id="tab-scope" class="button tab" disabled>${icon({ prefix: "fas", iconName: "wave-square" }).html[0]}</button>
-                <button title="Spectrum" id="tab-spectrum" class="button tab" disabled>${icon({ prefix: "fas", iconName: "chart-line" }).html[0]}</button>
-            </div>
-            <div id="sidebar-content">
-                <div id="faust-ui"></div>
-                <div id="faust-diagram"></div>
-                <div id="faust-scope"></div>
-                <div id="faust-spectrum"></div>
-            </div>
-        </div>
-    </div>
-</div>
-<style>
-    #root {
-        border: 1px solid black;
-        border-radius: 5px;
-        box-sizing: border-box;
-    }
-
-    *, *:before, *:after {
-        box-sizing: inherit; 
-    }
-
-    #controls {
-        background-color: #384d64;
-        border-bottom: 1px solid black;
-        display: flex;
-    }
-
-    #faust {
-        margin-left: auto;
-        margin-right: 10px;
-        display: flex;
-        align-items: center;
-    }
-
-    #faust-ui {
-        width: 232px;
-        max-height: 150px;
-    }
-
-    #faust-scope, #faust-spectrum {
-        min-width: 232px;
-        min-height: 150px;
-    }
-
-    #faust-diagram {
-        max-width: 232px;
-        height: 150px;
-    }
-
-    #content {
-        display: flex;
-    }
-
-    #editor {
-        flex-grow: 1;
-        overflow-y: auto;
-    }
-
-    #editor .cm-editor {
-        height: 100%;
-    }
-
-    .cm-diagnostic {
-        font-family: monospace;
-    }
-
-    .cm-diagnostic-error {
-        background-color: #fdf2f5 !important;
-        color: #a4000f !important;
-        border-color: #a4000f !important;
-    }
-
-    #sidebar {
-        display: flex;
-        max-width: 100%;
-    }
-
-    .tab {
-        flex-grow: 1;
-    }
-
-    #sidebar-buttons .tab.active {
-        background-color: #bbb;
-    }
-
-    #sidebar-buttons {
-        background-color: #f5f5f5;
-        display: flex;
-        flex-direction: column;
-    }
-
-    #sidebar-buttons .button {
-        background-color: #f5f5f5;
-        color: #000;
-        width: 20px;
-        height: 20px;
-        padding: 4px;
-    }
-
-    #sidebar-buttons .button:hover {
-        background-color: #ddd;
-    }
-
-    #sidebar-buttons .button:active {
-        background-color: #aaa;
-    }
-
-    #sidebar-content {
-        background-color: #fff;
-        border-left: 1px solid #ccc;
-        overflow: auto;
-        flex-grow: 1;
-        max-height: 100%;
-    }
-
-    #sidebar-content > div {
-        display: none;
-    }
-
-    #sidebar-content > div.active {
-        display: block;
-    }
-
-    a.button {
-        appearance: button;
-    }
-
-    .button {
-        background-color: #384d64;
-        border: 0;
-        padding: 5px;
-        width: 25px;
-        height: 25px;
-        color: #fff;
-    }
-
-    .button:hover {
-        background-color: #4b71a1;
-    }
-
-    .button:active {
-        background-color: #373736;
-    }
-
-    .button:disabled {
-        opacity: 0.65;
-        cursor: not-allowed;
-        pointer-events: none;
-    }
-
-    #controls > .button > svg {
-        width: 15px;
-        height: 15px;
-        vertical-align: top;
-    }
-
-    .dropdown {
-        height: 19px;
-        margin: 3px 0 3px 10px;
-        border: 0;
-        background: #fff;
-    }
-
-    .gutter {
-        background-color: #f5f5f5;
-        background-repeat: no-repeat;
-        background-position: 50%;
-    }
-    
-    .gutter.gutter-horizontal {
-        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
-        cursor: col-resize;
-    }
-
-    ${faustCSS}
-</style>
-`
-
-export default class FaustEditor extends HTMLElement {
-    constructor() {
-        super()
-    }
-
-    connectedCallback() {
-        const code = this.innerHTML.replace("<!--", "").replace("-->", "").trim()
-        this.attachShadow({ mode: "open" }).appendChild(template.content.cloneNode(true))
-
-        const ideLink = this.shadowRoot!.querySelector("#ide") as HTMLAnchorElement
-        ideLink.onfocus = () => {
-            // Open current contents of editor in IDE
-            const urlParams = new URLSearchParams()
-            urlParams.set("inline", btoa(editor.state.doc.toString()).replace("+", "-").replace("/", "_"))
-            ideLink.href = `https://faustide.grame.fr/?${urlParams.toString()}`
-        }
-
-        const editorEl = this.shadowRoot!.querySelector("#editor") as HTMLDivElement
-        const editor = createEditor(editorEl, code)
-
-        const runButton = this.shadowRoot!.querySelector("#run") as HTMLButtonElement
-        const stopButton = this.shadowRoot!.querySelector("#stop") as HTMLButtonElement
-        const faustUIRoot = this.shadowRoot!.querySelector("#faust-ui") as HTMLDivElement
-        const faustDiagram = this.shadowRoot!.querySelector("#faust-diagram") as HTMLDivElement
-        const sidebar = this.shadowRoot!.querySelector("#sidebar") as HTMLDivElement
-        const sidebarContent = this.shadowRoot!.querySelector("#sidebar-content") as HTMLDivElement
-        const tabButtons = [...this.shadowRoot!.querySelectorAll(".tab")] as HTMLButtonElement[]
-        const tabContents = [...sidebarContent.querySelectorAll("div")] as HTMLDivElement[]
-
-        const split = Split([editorEl, sidebar], {
-            sizes: [100, 0],
-            minSize: [0, 20],
-            gutterSize: 7,
-            snapOffset: 150,
-            onDragEnd: () => { scope?.onResize(); spectrum?.onResize() },
-        })
-
-        faustPromise.then(() => runButton.disabled = false)
-
-        const defaultSizes = [70, 30]
-        let sidebarOpen = false
-        const openSidebar = () => {
-            if (!sidebarOpen) {
-                split.setSizes(defaultSizes)
-            }
-            sidebarOpen = true
-        }
-
-        let node: IFaustMonoWebAudioNode | undefined
-        let input: MediaStreamAudioSourceNode | undefined
-        let analyser: AnalyserNode | undefined
-        let scope: Scope | undefined
-        let spectrum: Scope | undefined
-        let gmidi = false
-        let gnvoices = -1
-
-
-        runButton.onclick = async () => {
-            if (audioCtx.state === "suspended") {
-                await audioCtx.resume()
-            }
-            await faustPromise
-            // Compile Faust code
-            const code = editor.state.doc.toString()
-            let generator = null
-            try {
-                // Compile Faust code to access JSON metadata
-                await mono_generator.compile(compiler, "main", code, "")
-                const json = mono_generator.getMeta()
-                let { midi, nvoices } = extractMidiAndNvoices(json);
-                gmidi = midi;
-                gnvoices = nvoices;
-
-                // Build the generator
-                generator = nvoices > 0 ? poly_generator : mono_generator;
-                await generator.compile(compiler, "main", code, "");
-
-            } catch (e: any) {
-                setError(editor, e)
-                return
-            }
-            // Clear any old errors
-            clearError(editor)
-
-            // Create an audio node from compiled Faust
-            if (node !== undefined) node.disconnect()
-            if (gnvoices > 0) {
-                node = (await poly_generator.createNode(audioCtx, gnvoices))!
-            } else {
-                node = (await mono_generator.createNode(audioCtx))!
-            }
-            if (node.numberOfInputs > 0) {
-                audioInputSelector.disabled = false
-                updateInputDevices(await getInputDevices())
-                await connectInput()
-            } else {
-                audioInputSelector.disabled = true
-                audioInputSelector.innerHTML = "<option>Audio input</option>"
-            }
-            node.connect(audioCtx.destination)
-            stopButton.disabled = false
-            for (const tabButton of tabButtons) {
-                tabButton.disabled = false
-            }
-
-            // Access MIDI device
-            if (gmidi) {
-                accessMIDIDevice(midiInputCallback(node))
-                    .then(() => {
-                        console.log('Successfully connected to the MIDI device.');
-                    })
-                    .catch((error) => {
-                        console.error('Error accessing MIDI device:', error.message);
-                    });
-            }
-
-            openSidebar()
-            // Clear old tab contents
-            for (const tab of tabContents) {
-                while (tab.lastChild) tab.lastChild.remove()
-            }
-            // Create scope & spectrum plots
-            analyser = new AnalyserNode(audioCtx, {
-                fftSize: Math.pow(2, 11), minDecibels: -96, maxDecibels: 0, smoothingTimeConstant: 0.85
-            })
-            node.connect(analyser)
-            scope = new Scope(tabContents[2])
-            spectrum = new Scope(tabContents[3])
-
-            // If there are UI elements, open Faust UI (controls tab); otherwise open spectrum analyzer.
-            const ui = node.getUI()
-            openTab(ui.length > 1 || ui[0].items.length > 0 ? 0 : 3)
-
-            // Create controls via Faust UI
-            const faustUI = new FaustUI({ ui, root: faustUIRoot })
-            faustUI.paramChangeByUI = (path, value) => node?.setParamValue(path, value)
-            node.setOutputParamHandler((path, value) => faustUI.paramChangeByDSP(path, value))
-
-            // Create SVG block diagram
-            setSVG(svgDiagrams.from("main", code, "")["process.svg"])
-        }
-
-        const setSVG = (svgString: string) => {
-            faustDiagram.innerHTML = svgString
-
-            for (const a of faustDiagram.querySelectorAll("a")) {
-                a.onclick = e => {
-                    e.preventDefault()
-                    const filename = (a.href as any as SVGAnimatedString).baseVal
-                    const svgString = compiler.fs().readFile("main-svg/" + filename, { encoding: "utf8" }) as string
-                    setSVG(svgString)
-                }
-            }
-        }
-
-        let animPlot: number | undefined
-        const drawScope = () => {
-            scope!.renderScope([{
-                analyser: analyser!,
-                style: "rgb(212, 100, 100)",
-                edgeThreshold: 0.09,
-            }])
-            animPlot = requestAnimationFrame(drawScope)
-        }
-
-        const drawSpectrum = () => {
-            spectrum!.renderSpectrum(analyser!)
-            animPlot = requestAnimationFrame(drawSpectrum)
-        }
-
-        const openTab = (i: number) => {
-            for (const [j, tab] of tabButtons.entries()) {
-                if (i === j) {
-                    tab.classList.add("active")
-                    tabContents[j].classList.add("active")
-                } else {
-                    tab.classList.remove("active")
-                    tabContents[j].classList.remove("active")
-                }
-            }
-            if (i === 2) {
-                scope!.onResize()
-                if (animPlot !== undefined) cancelAnimationFrame(animPlot)
-                animPlot = requestAnimationFrame(drawScope)
-            } else if (i === 3) {
-                spectrum!.onResize()
-                if (animPlot !== undefined) cancelAnimationFrame(animPlot)
-                animPlot = requestAnimationFrame(drawSpectrum)
-            } else if (animPlot !== undefined) {
-                cancelAnimationFrame(animPlot)
-                animPlot = undefined
-            }
-        }
-
-        for (const [i, tabButton] of tabButtons.entries()) {
-            tabButton.onclick = () => openTab(i)
-        }
-
-        stopButton.onclick = () => {
-            if (node !== undefined) {
-                node.disconnect()
-                node.destroy()
-                node = undefined
-                stopButton.disabled = true
-                // TODO: Maybe disable controls in faust-ui tab.
-            }
-        }
-
-        const audioInputSelector = this.shadowRoot!.querySelector("#audio-input") as HTMLSelectElement
-
-        const updateInputDevices = (devices: MediaDeviceInfo[]) => {
-            if (audioInputSelector.disabled) return
-            while (audioInputSelector.lastChild) audioInputSelector.lastChild.remove()
-            for (const device of devices) {
-                if (device.kind === "audioinput") {
-                    audioInputSelector.appendChild(new Option(device.label || device.deviceId, device.deviceId))
-                }
-            }
-        }
-        deviceUpdateCallbacks.push(updateInputDevices)
-
-        const connectInput = async () => {
-            const deviceId = audioInputSelector.value
-            const stream = await navigator.mediaDevices.getUserMedia({ audio: { deviceId, echoCancellation: false, noiseSuppression: false, autoGainControl: false } })
-            if (input) {
-                input.disconnect()
-                input = undefined
-            }
-            if (node && node.numberOfInputs > 0) {
-                input = audioCtx.createMediaStreamSource(stream)
-                input.connect(node!)
-            }
-        }
-
-        audioInputSelector.onchange = connectInput
-    }
-}

package/src/faust-widget.ts

@@ -1,226 +0,0 @@
-import { icon } from "@fortawesome/fontawesome-svg-core"
-import faustCSS from "@shren/faust-ui/dist/esm/index.css?inline"
-import faustSvg from "./faustText.svg"
-import { IFaustMonoWebAudioNode } from "@grame/faustwasm"
-import { IFaustPolyWebAudioNode } from "@grame/faustwasm"
-import { FaustUI } from "@shren/faust-ui"
-import { faustPromise, audioCtx, mono_generator, poly_generator, compiler, getInputDevices, deviceUpdateCallbacks, accessMIDIDevice, midiInputCallback, extractMidiAndNvoices } from "./common"
-
-const template = document.createElement("template")
-template.innerHTML = `
-<div id="root">
-    <div id="controls">
-        <button title="On/off" class="button" id="power" disabled>${icon({ prefix: "fas", iconName: "power-off" }).html[0]}</button>
-        <select id="audio-input" class="dropdown" disabled>
-            <option>Audio input</option>
-        </select>
-        <!-- TODO: MIDI input
-        <select id="midi-input" class="dropdown" disabled>
-            <option>MIDI input</option>
-        </select>
-        -->
-        <!-- TODO: volume control? <input id="volume" type="range" min="0" max="100"> -->
-        <a title="Faust website" id="faust" href="https://faust.grame.fr/" target="_blank"><img src="${faustSvg}" height="15px" /></a>
-    </div>
-    <div id="faust-ui"></div>
-</div>
-<style>
-    #root {
-        border: 1px solid black;
-        border-radius: 5px;
-        box-sizing: border-box;
-        display: inline-block;
-        background-color: #384d64;
-    }
-
-    *, *:before, *:after {
-        box-sizing: inherit; 
-    }
-
-    #controls {
-        display: flex;
-        margin-bottom: -20px;
-        position: relative;
-        z-index: 1;
-    }
-
-    #faust {
-        margin-left: auto;
-        padding-left: 10px;
-        margin-right: 10px;
-        display: flex;
-        align-items: center;
-    }
-
-    a.button {
-        appearance: button;
-    }
-
-    .button {
-        background-color: #384d64;
-        border: 0;
-        padding: 5px;
-        width: 25px;
-        height: 25px;
-        color: #fff;
-    }
-
-    .button:hover {
-        background-color: #4b71a1;
-    }
-
-    .button:active {
-        background-color: #373736;
-    }
-
-    .button:disabled {
-        opacity: 0.65;
-        cursor: not-allowed;
-        pointer-events: none;
-    }
-
-    #controls > .button > svg {
-        width: 15px;
-        height: 15px;
-        vertical-align: top;
-    }
-
-    .dropdown {
-        height: 19px;
-        margin: 3px 0 3px 10px;
-        border: 0;
-        background: #fff;
-    }
-
-    ${faustCSS}
-</style>
-`
-
-export default class FaustWidget extends HTMLElement {
-    constructor() {
-        super()
-    }
-
-    connectedCallback() {
-        const code = this.innerHTML.replace("<!--", "").replace("-->", "").trim()
-        this.attachShadow({ mode: "open" }).appendChild(template.content.cloneNode(true))
-
-        const powerButton = this.shadowRoot!.querySelector("#power") as HTMLButtonElement
-        const faustUIRoot = this.shadowRoot!.querySelector("#faust-ui") as HTMLDivElement
-
-        faustPromise.then(() => powerButton.disabled = false)
-
-        let on = false
-        let gmidi = false
-        let gnvoices = -1
-        let node: IFaustMonoWebAudioNode | IFaustPolyWebAudioNode
-        let input: MediaStreamAudioSourceNode | undefined
-        let faustUI: FaustUI
-
-        const setup = async () => {
-            await faustPromise
-            // Compile Faust code to access JSON metadata
-            await mono_generator.compile(compiler, "main", code, "")
-            const json = mono_generator.getMeta()
-            let { midi, nvoices } = extractMidiAndNvoices(json);
-            gmidi = midi;
-            gnvoices = nvoices;
-
-            // Build the generator and generate UI
-            const generator = nvoices > 0 ? poly_generator : mono_generator;
-            await generator.compile(compiler, "main", code, "");
-            const ui = generator.getUI();
-
-            faustUI = new FaustUI({ ui, root: faustUIRoot });
-            faustUIRoot.style.width = faustUI.minWidth * 1.25 + "px";
-            faustUIRoot.style.height = faustUI.minHeight * 1.25 + "px";
-            faustUI.resize();
-        }
-
-        const start = async () => {
-            if (audioCtx.state === "suspended") {
-                await audioCtx.resume()
-            }
-
-            // Create an audio node from compiled Faust
-            if (node === undefined) {
-                if (gnvoices > 0) {
-                    node = (await poly_generator.createNode(audioCtx, gnvoices))!
-                } else {
-                    node = (await mono_generator.createNode(audioCtx))!
-                }
-            }
-
-            // Access MIDI device
-            if (gmidi) {
-                accessMIDIDevice(midiInputCallback(node))
-                    .then(() => {
-                        console.log('Successfully connected to the MIDI device.');
-                    })
-                    .catch((error) => {
-                        console.error('Error accessing MIDI device:', error.message);
-                    });
-            }
-
-            faustUI.paramChangeByUI = (path, value) => node?.setParamValue(path, value)
-            node.setOutputParamHandler((path, value) => faustUI.paramChangeByDSP(path, value))
-
-            if (node.numberOfInputs > 0) {
-                audioInputSelector.disabled = false
-                updateInputDevices(await getInputDevices())
-                await connectInput()
-            } else {
-                audioInputSelector.disabled = true
-                audioInputSelector.innerHTML = "<option>Audio input</option>"
-            }
-
-            node.connect(audioCtx.destination)
-            powerButton.style.color = "#ffa500"
-        }
-
-        const stop = () => {
-            node?.disconnect()
-            powerButton.style.color = "#fff"
-        }
-
-        powerButton.onclick = () => {
-            if (on) {
-                stop()
-            } else {
-                start()
-            }
-            on = !on
-        }
-
-        const audioInputSelector = this.shadowRoot!.querySelector("#audio-input") as HTMLSelectElement
-
-        const updateInputDevices = (devices: MediaDeviceInfo[]) => {
-            if (audioInputSelector.disabled) return
-            while (audioInputSelector.lastChild) audioInputSelector.lastChild.remove()
-            for (const device of devices) {
-                if (device.kind === "audioinput") {
-                    audioInputSelector.appendChild(new Option(device.label || device.deviceId, device.deviceId))
-                }
-            }
-        }
-        deviceUpdateCallbacks.push(updateInputDevices)
-
-        const connectInput = async () => {
-            const deviceId = audioInputSelector.value
-            const stream = await navigator.mediaDevices.getUserMedia({ audio: { deviceId, echoCancellation: false, noiseSuppression: false, autoGainControl: false } })
-            if (input) {
-                input.disconnect()
-                input = undefined
-            }
-            if (node && node.numberOfInputs > 0) {
-                input = audioCtx.createMediaStreamSource(stream)
-                input.connect(node!)
-            }
-        }
-
-        audioInputSelector.onchange = connectInput
-
-        setup()
-    }
-}
-

package/src/faustText.svg

@@ -1,2 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg2" xml:space="preserve" width="64.333328" height="12.414666" viewBox="0 0 64.333327 12.414666"><metadata id="metadata8"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/></cc:Work></rdf:RDF></metadata><defs id="defs6"><clipPath clipPathUnits="userSpaceOnUse" id="clipPath18"><path d="M 0,93.507 H 93.507 V 0 H 0 Z" id="path16"/></clipPath></defs><g style="fill:#ffffff" id="g10" transform="matrix(1.3333333,0,0,-1.3333333,-31.440266,68.495732)"><g id="g12" style="fill:#ffffff"><g id="g14" clip-path="url(#clipPath18)" style="fill:#ffffff"><g id="g20" transform="translate(69.0172,49.3868)" style="fill:#ffffff"><path d="M 0,0 V -7.026 H -2.017 V 0 H -4.843 V 1.747 H 2.813 V 0 Z m -8.276,-5.615 c -0.176,-0.333 -0.415,-0.62 -0.718,-0.863 -0.302,-0.243 -0.658,-0.433 -1.067,-0.569 -0.409,-0.136 -0.849,-0.204 -1.321,-0.204 -0.435,0 -0.833,0.041 -1.193,0.124 -0.361,0.082 -0.685,0.191 -0.973,0.327 -0.289,0.135 -0.548,0.29 -0.779,0.463 -0.232,0.174 -0.431,0.352 -0.598,0.534 l 1.278,1.384 c 0.115,-0.125 0.248,-0.252 0.4,-0.381 0.152,-0.129 0.321,-0.247 0.509,-0.352 0.187,-0.106 0.392,-0.191 0.614,-0.255 0.221,-0.065 0.46,-0.097 0.716,-0.097 0.15,0 0.3,0.021 0.447,0.064 0.149,0.043 0.285,0.107 0.41,0.191 0.124,0.084 0.223,0.185 0.296,0.303 0.073,0.119 0.11,0.253 0.11,0.404 0,0.327 -0.158,0.581 -0.474,0.762 -0.316,0.181 -0.817,0.36 -1.504,0.536 -0.333,0.078 -0.64,0.192 -0.922,0.342 -0.283,0.151 -0.526,0.332 -0.729,0.543 -0.204,0.211 -0.361,0.453 -0.474,0.726 -0.112,0.274 -0.169,0.578 -0.169,0.914 0,0.368 0.065,0.714 0.195,1.038 0.13,0.325 0.328,0.611 0.595,0.859 0.266,0.247 0.597,0.443 0.993,0.589 0.397,0.145 0.865,0.218 1.406,0.218 0.446,0 0.842,-0.046 1.187,-0.137 0.344,-0.092 0.637,-0.201 0.877,-0.329 0.24,-0.127 0.437,-0.258 0.591,-0.391 0.155,-0.134 0.271,-0.239 0.348,-0.316 l -1.143,-1.266 c -0.099,0.078 -0.212,0.162 -0.338,0.255 -0.127,0.093 -0.268,0.179 -0.425,0.258 -0.156,0.08 -0.33,0.147 -0.521,0.201 -0.19,0.053 -0.391,0.08 -0.601,0.08 -0.142,0 -0.28,-0.022 -0.416,-0.067 -0.135,-0.046 -0.258,-0.105 -0.367,-0.178 -0.11,-0.073 -0.198,-0.161 -0.264,-0.265 -0.066,-0.103 -0.1,-0.211 -0.1,-0.323 0,-0.301 0.159,-0.544 0.477,-0.73 0.318,-0.185 0.753,-0.34 1.307,-0.465 0.327,-0.077 0.645,-0.184 0.955,-0.319 0.311,-0.136 0.588,-0.314 0.832,-0.536 0.244,-0.222 0.441,-0.493 0.591,-0.814 0.15,-0.321 0.225,-0.711 0.225,-1.172 0,-0.392 -0.088,-0.754 -0.263,-1.086 m -10.307,1.854 c 0,-0.527 -0.086,-1.01 -0.257,-1.449 -0.172,-0.439 -0.418,-0.813 -0.74,-1.124 -0.321,-0.31 -0.71,-0.553 -1.167,-0.729 -0.456,-0.175 -0.965,-0.263 -1.526,-0.263 -0.56,0 -1.067,0.086 -1.522,0.257 -0.455,0.171 -0.841,0.414 -1.159,0.729 -0.318,0.315 -0.563,0.691 -0.734,1.13 -0.171,0.439 -0.256,0.922 -0.256,1.449 v 5.446 h 1.985 v -5.271 c 0,-0.295 0.029,-0.56 0.086,-0.795 0.058,-0.235 0.153,-0.437 0.284,-0.606 0.131,-0.169 0.304,-0.301 0.521,-0.394 0.217,-0.094 0.481,-0.14 0.795,-0.14 0.309,0 0.57,0.046 0.785,0.14 0.214,0.093 0.388,0.225 0.521,0.394 0.133,0.169 0.227,0.371 0.283,0.606 0.056,0.235 0.084,0.5 0.084,0.795 v 5.271 h 2.017 z M -30.68,-7.026 c -0.596,0 -1.078,0.482 -1.078,1.077 0,0.595 0.482,1.078 1.078,1.078 0.595,0 1.077,-0.483 1.077,-1.078 0,-0.595 -0.482,-1.077 -1.077,-1.077 m -1.702,3.551 -1.067,3.314 -1.092,-3.314 -0.054,-0.181 h -1.899 l 2.018,5.403 h 2.196 l 1.977,-5.4 -2.023,-0.005 z m -3.708,-3.551 c -0.595,0 -1.078,0.482 -1.078,1.077 0,0.595 0.483,1.078 1.078,1.078 0.595,0 1.078,-0.483 1.078,-1.078 0,-0.595 -0.483,-1.077 -1.078,-1.077 M -39.541,0 h -3.912 v -1.991 h 2.974 v -1.696 h -2.974 v -3.339 h -1.984 v 8.773 h 5.896 z" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path22"/></g></g></g></g></svg>

package/src/main.ts

@@ -1,5 +0,0 @@
-import FaustEditor from "./faust-editor"
-import FaustWidget from "./faust-widget"
-
-customElements.define("faust-editor", FaustEditor)
-customElements.define("faust-widget", FaustWidget)