npm - @grame/faust-web-component - Versions diffs - 0.2.0 → 0.2.2 - Mend

@grame/faust-web-component 0.2.0 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/dist/faust-web-component.js +1912 -0
package/package.json +4 -1
package/index.html +0 -68
package/public/vite.svg +0 -1
package/src/common.ts +0 -114
package/src/editor.ts +0 -88
package/src/faust-editor.ts +0 -451
package/src/faust-widget.ts +0 -226
package/src/faustText.svg +0 -2
package/src/main.ts +0 -5
package/src/scope.ts +0 -205
package/src/vite-env.d.ts +0 -1
package/tsconfig.json +0 -23
package/vite.config.js +0 -13

package/package.json CHANGED Viewed

@@ -1,6 +1,9 @@
 {
     "name": "@grame/faust-web-component",
-    "version": "0.2.0",
+    "description": "Web component embedding the Faust Compiler",
+    "version": "0.2.2",
+    "module": "dist/faust-web-component.js",
+    "files": ["dist/faust-web-component.js"],
     "type": "module",
     "scripts": {
         "dev": "vite",

package/index.html DELETED Viewed

@@ -1,68 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Vite + TS</title>
-        <script type="module" src="/src/main.ts"></script>
-        <style>
-            #content {
-                width: 50%;
-                margin: auto;
-            }
-        </style>
-    </head>
-    <body>
-        <div id="content">
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
-            <faust-editor>
-import("stdfaust.lib");
-process = no.noise;
-            </faust-editor>
-            <p>Nostrum, id deserunt inventore ut veritatis iusto autem soluta officia debitis omnis, dolor sint cum, illo quam dignissimos fuga quod optio nesciunt.</p>
-<!-- Need to comment below example due to occurrence of `<`. -->
-            <faust-editor>
-<!--
-import("stdfaust.lib");
-ctFreq = 500;
-q = 5;
-gain = 1;
-process = no.noise : _ <: fi.resonlp(ctFreq,q,gain),fi.resonlp(ctFreq,q,gain);
--->
-            </faust-editor>
-            <p>Ex velit voluptates, laudantium laboriosam est quis veniam temporibus tempore minima aspernatur, modi labore molestiae provident adipisci voluptatem dolorem voluptatibus asperiores possimus.</p>
-            <faust-editor>
-<!--
-import("stdfaust.lib");
-ctFreq = hslider("cutoffFrequency",500,50,10000,0.01);
-q = hslider("q",5,1,30,0.1);
-gain = hslider("gain",1,0,1,0.01);
-process = no.noise : fi.resonlp(ctFreq,q,gain);
--->
-            </faust-editor>
-            <p>Nam tempora officiis sunt nisi cupiditate expedita magnam atque. Unde, itaque.</p>
-            <faust-editor>
-                <!--
-import("stdfaust.lib");
-process =
-    dm.cubicnl_demo : // distortion
-    dm.wah4_demo <: // wah pedal
-    dm.phaser2_demo : // stereo phaser
-    dm.compressor_demo : // stereo compressor
-    dm.zita_light; // stereo reverb
-                -->
-            </faust-editor>
-            <p>Minus, ducimus consequuntur? Corrupti animi aut magni nihil, dolor eos tenetur, autem deserunt et iure culpa, suscipit minus quia velit laudantium asperiores.</p>
-            <faust-widget>
-<!--
-import("stdfaust.lib");
-ctFreq = hslider("cutoffFrequency",500,50,10000,0.01);
-q = hslider("q",5,1,30,0.1);
-gain = hslider("gain",1,0,1,0.01);
-process = no.noise : fi.resonlp(ctFreq,q,gain);
--->
-            </faust-widget>
-        </div>
-    </body>
-</html>

package/public/vite.svg DELETED Viewed

@@ -1 +0,0 @@

- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/common.ts DELETED Viewed

@@ -1,114 +0,0 @@
-import { FaustCompiler, FaustMonoDspGenerator, FaustPolyDspGenerator, FaustSvgDiagrams, LibFaust, instantiateFaustModuleFromFile } from "@grame/faustwasm"
-import jsURL from "@grame/faustwasm/libfaust-wasm/libfaust-wasm.js?url"
-import dataURL from "@grame/faustwasm/libfaust-wasm/libfaust-wasm.data?url"
-import wasmURL from "@grame/faustwasm/libfaust-wasm/libfaust-wasm.wasm?url"
-import { library } from "@fortawesome/fontawesome-svg-core"
-import { faPlay, faStop, faUpRightFromSquare, faSquareCaretLeft, faAnglesLeft, faAnglesRight, faSliders, faDiagramProject, faWaveSquare, faChartLine, faPowerOff } from "@fortawesome/free-solid-svg-icons"
-for (const icon of [faPlay, faStop, faUpRightFromSquare, faSquareCaretLeft, faAnglesLeft, faAnglesRight, faSliders, faDiagramProject, faWaveSquare, faChartLine, faPowerOff]) {
-    library.add(icon)
-}
-export let compiler: FaustCompiler
-export let svgDiagrams: FaustSvgDiagrams
-export const mono_generator = new FaustMonoDspGenerator() // TODO: Support polyphony
-export const poly_generator = new FaustPolyDspGenerator() // TODO: Support polyphony
-async function loadFaust() {
-    // Setup Faust
-    const module = await instantiateFaustModuleFromFile(jsURL, dataURL, wasmURL)
-    const libFaust = new LibFaust(module)
-    compiler = new FaustCompiler(libFaust)
-    svgDiagrams = new FaustSvgDiagrams(compiler)
-}
-export const faustPromise = loadFaust()
-export const audioCtx = new AudioContext()
-export const deviceUpdateCallbacks: ((d: MediaDeviceInfo[]) => void)[] = []
-let devices: MediaDeviceInfo[] = []
-async function _getInputDevices() {
-    if (navigator.mediaDevices) {
-        navigator.mediaDevices.ondevicechange = _getInputDevices
-        try {
-            await navigator.mediaDevices.getUserMedia({ audio: true })
-        } catch (e) { }
-        devices = await navigator.mediaDevices.enumerateDevices()
-        for (const callback of deviceUpdateCallbacks) {
-            callback(devices)
-        }
-    }
-}
-let getInputDevicesPromise: Promise<void> | undefined
-export async function getInputDevices() {
-    if (getInputDevicesPromise === undefined) {
-        getInputDevicesPromise = _getInputDevices()
-    }
-    await getInputDevicesPromise
-    return devices
-}
-export async function accessMIDIDevice(
-    onMIDIMessage: (data) => void
-): Promise<void> {
-    return new Promise<void>((resolve, reject) => {
-        if (navigator.requestMIDIAccess) {
-            navigator
-                .requestMIDIAccess()
-                .then((midiAccess) => {
-                    const inputDevices = midiAccess.inputs.values();
-                    let midiInput: WebMidi.MIDIInput | null = null;
-                    for (const midiInput of inputDevices) {
-                        midiInput.onmidimessage = (event) => {
-                            onMIDIMessage(event.data);
-                        };
-                        resolve();
-                    }
-                })
-                .catch((error) => {
-                    reject(error);
-                });
-        } else {
-            reject(new Error('Web MIDI API is not supported by this browser.'));
-        }
-    });
-}
-// Set up MIDI input callback
-export const midiInputCallback = (node: IFaustPolyWebAudioNode | undefined) => {
-    return (data) => {
-        const cmd = data[0] >> 4;
-        const channel = data[0] & 0xf;
-        const data1 = data[1];
-        const data2 = data[2];
-        if (channel === 9) return;
-        else if (cmd === 8 || (cmd === 9 && data2 === 0)) node.keyOff(channel, data1, data2);
-        else if (cmd === 9) node.keyOn(channel, data1, data2);
-        else if (cmd === 11) node.ctrlChange(channel, data1, data2);
-        else if (cmd === 14) node.pitchWheel(channel, (data2 * 128.0 + data1));
-    }
-}
-// Analyze the metadata of a Faust JSON file extract the [midi:on] and [nvoices:n] options
-export function extractMidiAndNvoices(jsonData: JSONData): { midi: boolean, nvoices: number } {
-    const optionsMetadata = jsonData.meta.find(meta => meta.options);
-    if (optionsMetadata) {
-        const options = optionsMetadata.options;
-        const midiRegex = /\[midi:(on|off)\]/;
-        const nvoicesRegex = /\[nvoices:(\d+)\]/;
-        const midiMatch = options.match(midiRegex);
-        const nvoicesMatch = options.match(nvoicesRegex);
-        const midi = midiMatch ? midiMatch[1] === "on" : false;
-        const nvoices = nvoicesMatch ? parseInt(nvoicesMatch[1]) : -1;
-        return { midi, nvoices };
-    } else {
-        return { midi: false, nvoices: -1 };
-    }
-}

package/src/editor.ts DELETED Viewed

@@ -1,88 +0,0 @@
-import {EditorView} from "codemirror"
-// Most of the basic CodeMirror setup, sans folds.
-import {lineNumbers, highlightActiveLineGutter, highlightSpecialChars, drawSelection, dropCursor, rectangularSelection, crosshairCursor, highlightActiveLine, keymap} from "@codemirror/view"
-import {history, defaultKeymap, historyKeymap} from "@codemirror/commands"
-import {indentOnInput, syntaxHighlighting, defaultHighlightStyle, bracketMatching} from "@codemirror/language"
-import {highlightSelectionMatches, searchKeymap} from "@codemirror/search"
-import {closeBrackets, autocompletion, closeBracketsKeymap, completionKeymap} from "@codemirror/autocomplete"
-import {EditorState} from "@codemirror/state"
-// Custom CodeMirror setup
-import {StreamLanguage} from "@codemirror/language"
-import {clike} from "@codemirror/legacy-modes/mode/clike"
-import {lintKeymap, setDiagnostics, openLintPanel, closeLintPanel} from "@codemirror/lint"
-const keywords = "process component import library declare with environment route waveform soundfile"
-const atoms = "mem prefix int float rdtable rwtable select2 select3 ffunction fconstant fvariable button checkbox vslider hslider nentry vgroup hgroup tgroup vbargraph hbargraph attach acos asin atan atan2 cos sin tan exp log log10 pow sqrt abs min max fmod remainder floor ceil rint"
-function words(str: string) {
-    const obj: {[key: string]: true} = {}
-    const words = str.split(" ")
-    for (let i = 0; i < words.length; i++) obj[words[i]] = true
-    return obj
-}
-const faustLanguage = StreamLanguage.define(clike({
-    name: "clike",
-    multiLineStrings: true,
-    keywords: words(keywords),
-    atoms: words(atoms),
-    hooks: {
-        "@": () => "meta",
-        "'": () => "meta",
-    }
-}))
-export function createEditor(parent: HTMLElement, doc: string) {
-    return new EditorView({
-        parent,
-        doc,
-        extensions: [
-            lineNumbers(),
-            highlightActiveLineGutter(),
-            highlightSpecialChars(),
-            history(),
-            // foldGutter(),
-            drawSelection(),
-            dropCursor(),
-            EditorState.allowMultipleSelections.of(true),
-            indentOnInput(),
-            syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
-            bracketMatching(),
-            closeBrackets(),
-            autocompletion(),
-            rectangularSelection(),
-            crosshairCursor(),
-            highlightActiveLine(),
-            highlightSelectionMatches(),
-            keymap.of([
-                ...closeBracketsKeymap,
-                ...defaultKeymap,
-                ...searchKeymap,
-                ...historyKeymap,
-                ...completionKeymap,
-                ...lintKeymap
-            ]),
-            faustLanguage,
-        ],
-    })
-}
-export function setError(editor: EditorView, error: Error) {
-    // Extract line number if available
-    const rawMessage = error.message.trim()
-    const match = rawMessage.match(/^main : (\d+) : (.*)$/)
-    const message = match ? match[2] : rawMessage
-    const { from, to } = match ? editor.state.doc.line(+match[1]) : { from: 0, to: 0 }
-    // Show error in editor
-    editor.dispatch(setDiagnostics(editor.state, [{
-        from, to,
-        severity: "error",
-        message,
-    }]))
-    openLintPanel(editor)
-}
-export function clearError(editor: EditorView) {
-    editor.dispatch(setDiagnostics(editor.state, []))
-    closeLintPanel(editor)
-}