feature(component-webaudio): a bunch of test components in relation to web audio for a more complex case

Author: Sebastian Schürmann

packages/component-webaudio/README.md

@@ -0,0 +1,47 @@
+# @vanillin/component-webaudio
+
+A collection of Web Components for creating audio control interfaces. Based on the webaudio-controls project but reimplemented in TypeScript with modern web standards.
+
+## Components
+
+- `webaudio-knob`: Rotary control for parameters
+- `webaudio-slider`: Linear slider control
+- `webaudio-switch`: Toggle or momentary switch
+- `webaudio-param`: Parameter display
+
+## Installation
+
+```bash
+npm install @vanillin/component-webaudio
+```
+
+## Usage
+
+```html
+<script type="module">
+  import { WebAudioKnob, WebAudioSlider, WebAudioSwitch, WebAudioParam } 
+    from '@vanillin/component-webaudio';
+</script>
+
+<webaudio-knob value="50" min="0" max="100"></webaudio-knob>
+<webaudio-slider value="50" min="0" max="100"></webaudio-slider>
+<webaudio-switch value="0"></webaudio-switch>
+<webaudio-param value="50"></webaudio-param>
+```
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build the package
+npm run build
+
+# Run tests
+npm test
+```
+
+## License
+
+MIT

packages/component-webaudio/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@vanillin/component-webaudio",
+  "version": "0.1.0",
+  "description": "WebAudio control components built with Vanillin.js",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "test": "node --import tsx --test ./test/*",
+    "build": "tsc"
+  },
+  "keywords": [
+    "web-components",
+    "vanillin",
+    "webaudio",
+    "audio-controls"
+  ],
+  "author": "Sebastian Schürmann",
+  "license": "MIT",
+  "dependencies": {
+    "vanillin": "file:../vanillin"
+  },
+  "devDependencies": {
+    "typescript": "5.7.2",
+    "tsx": "4.7.0"
+  }
+}

packages/component-webaudio/src/wa-knob.ts

@@ -0,0 +1,110 @@
+/**
+ * WebAudio Knob Control
+ */
+class WAKnob extends HTMLElement {
+    private _value: number = 0;
+    private _min: number = 0;
+    private _max: number = 127;
+    private _default: number = 0;
+
+    static get observedAttributes() {
+        return ['value', 'min', 'max', 'default'];
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.render();
+    }
+
+    get value() {
+        return this._value;
+    }
+
+    set value(val: number) {
+        const newValue = this.constrainValue(val);
+        if (newValue !== this._value) {
+            this._value = newValue;
+            this.setAttribute('value', newValue.toString());
+            this.render();
+        }
+    }
+
+    get min() {
+        return this._min;
+    }
+
+    set min(val: number) {
+        this._min = val;
+        this.value = this._value; // Recheck constraints
+    }
+
+    get max() {
+        return this._max;
+    }
+
+    set max(val: number) {
+        this._max = val;
+        this.value = this._value; // Recheck constraints
+    }
+
+    get default() {
+        return this._default;
+    }
+
+    set default(val: number) {
+        this._default = val;
+        if (this._value === 0) {
+            this.value = val;
+        }
+    }
+
+    private constrainValue(val: number): number {
+        return Math.min(this._max, Math.max(this._min, val));
+    }
+
+    private render() {
+        if (!this.shadowRoot) return;
+        this.shadowRoot.innerHTML = `
+            <div>Value: ${this._value} (Min: ${this._min}, Max: ${this._max})</div>
+        `;
+    }
+
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
+        if (oldValue === newValue) return;
+
+        switch (name) {
+            case 'value': {
+                const val = parseFloat(newValue || '0');
+                const constrained = this.constrainValue(val);
+                this._value = constrained;
+                this.setAttribute('value', constrained.toString());
+                this.render();
+                break;
+            }
+            case 'min':
+                this.min = parseFloat(newValue || '0');
+                break;
+            case 'max':
+                this.max = parseFloat(newValue || '127');
+                break;
+            case 'default':
+                this.default = parseFloat(newValue || '0');
+                break;
+        }
+    }
+
+    connectedCallback() {
+        // Set to default value if no value was specified
+        if (this._value === 0 && this._default !== 0) {
+            this.value = this._default;
+        }
+        this.setAttribute('value', this._value.toString());
+        this.setAttribute('default', this._default.toString());
+        this.setAttribute('min', this._min.toString());
+        this.setAttribute('max', this._max.toString());
+        this.render();
+    }
+}
+
+customElements.define('wa-knob', WAKnob);

packages/component-webaudio/test/wa-knob-defaults.test.ts

@@ -0,0 +1,42 @@
+import { describe, it, before, after } from 'node:test';
+import assert from 'node:assert';
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { TestHelper, MountContext } from 'vanillin';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const widgetPath = resolve(__dirname, '../src/wa-knob.ts');
+
+describe('wa-knob defaults', () => {
+    let mountContext: MountContext;
+    let widget: HTMLElement;
+
+    before(async () => {
+        const helper = new TestHelper();
+        mountContext = await helper.compileAndMountAsScript('wa-knob', widgetPath);
+        const { document } = mountContext;
+        widget = document.querySelector('wa-knob')!;
+    });
+
+    after(() => {
+        mountContext.jsdom.window.close();
+    });
+
+    it('should create a knob element', () => {
+        assert.ok(widget);
+    });
+
+    it('initially value is the default', () => {
+        assert.equal(widget.getAttribute('value'), '0');
+    });
+
+    it('initially min is the 0', () => {
+        assert.equal(widget.getAttribute('min'), '0');
+    });
+    
+    it('initially max is the 127', () => {
+        assert.equal(widget.getAttribute('max'), '127');
+    });
+});

packages/component-webaudio/test/wa-knob-min.test.ts

@@ -0,0 +1,45 @@
+import { describe, it, before, after } from 'node:test';
+import assert from 'node:assert';
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { TestHelper, MountContext } from 'vanillin';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const widgetPath = resolve(__dirname, '../src/wa-knob.ts');
+
+describe('wa-knob min/max', () => {
+    let mountContext: MountContext;
+    let widget: HTMLElement;
+
+    before(async () => {
+        const helper = new TestHelper();
+        mountContext = await helper.compileAndMountAsScript('wa-knob', widgetPath);
+        const { document } = mountContext;
+        widget = document.querySelector('wa-knob')!;
+    });
+
+    after(() => {
+        mountContext.jsdom.window.close();
+    });
+
+    it('setting below min  gets you a result of min', () => {
+        widget.setAttribute('value', '-1');
+        const value = widget.getAttribute('value');
+        assert.strictEqual(value, '0');
+    });
+
+    it('setting above max  gets you a result of max', () => {
+        widget.setAttribute('value', '200');
+        const value = widget.getAttribute('value');
+        assert.strictEqual(value, '127');
+    });
+
+    it('you can set max', () => {
+        widget.setAttribute('max', '200');
+        widget.setAttribute('value', '200');
+        const value = widget.getAttribute('value');
+        assert.strictEqual(value, '200');
+    });
+});

packages/component-webaudio/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "module": "ES2022",
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node",
+    "declaration": true,
+    "experimentalDecorators": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "test", "dist"]
+}