Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP add TypeScript #7

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

WIP add TypeScript #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions .editorconfig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
# EditorConfig is awesome: http://EditorConfig.org

# top-most EditorConfig file
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
16 changes: 16 additions & 0 deletions tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"compilerOptions": {
// Use TypeScript only for type checking.
"noEmit": true,

// Run TypeScript on JS files.
"checkJs": true,
"allowJs": true,

// Strict settings to enforce the most type-safe code.
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true
},
"include": ["./wasmaudioworklet/**/*"]
}
4 changes: 2 additions & 2 deletions wasmaudioworklet/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ import { initVisualizer } from './visualizer/80sgrid.js';
import { initEditor } from './editorcontroller.js';

customElements.define('app-javascriptmusic',
class extends HTMLElement {
class JavaScriptMusic extends HTMLElement {
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Giving the class a name improves the intellisense output in editors.

constructor() {
super();

const shadowRoot = this.attachShadow({mode: 'open'});
this.shadowRoot = this.attachShadow({mode: 'open'});
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Element.shadowRoot is nullable, but by assigning to this.shadowRoot in the constructor it makes the type system not require a null check further down below because it knows it is definitely not null now (plus removed the unused variable).

this.init();
}

Expand Down
4 changes: 4 additions & 0 deletions wasmaudioworklet/audioworkletnode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@ import { stopVideoRecording, startVideoRecording } from './screenrecorder/screen

// The code in the main global scope.

/**
* @param {Node} componentRoot
*/
export function initAudioWorkletNode(componentRoot) {
/** @type {AudioWorkletNode} */
let audioworkletnode;
let playing = false;
window.recordedmidi = [];
Expand Down
16 changes: 14 additions & 2 deletions wasmaudioworklet/audioworkletpolyfill.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,21 @@
*/

if(typeof AudioContext !== 'function') {
window.AudioContext = window.webkitAudioContext;
/** @type {any} */
const win = window
window.AudioContext = win.webkitAudioContext;
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I used any here so TS won't complain about window.webkitAudioContext being a non-existent property. We don't care much about the polyfill types, the end user doesn't care about it.

}

if(typeof AudioWorkletNode !== 'function') {
console.log('No audioworklet support - using polyfill');
window.AudioWorkletNode = function(context, processorName) {

window.AudioWorkletNode = /** @type {AudioWorkletNode} */(AudioWorkletNodePolyfill)
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This syntax is a type cast. The parentheses are required here. /** @type {any} */(AudioWorkletNodePolyfill) would be shorter and would also work (we don't care much about types here anyways).


/**
* @param {any} context
* @param {any} processorName
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As a quick escape hatch, just give things type any. Then it is as if we wrote plain JS anyways.

I'm just getting it set up, I'll update the types a little later...

*/
function AudioWorkletNodePolyfill(context, processorName) {
let connected = false;
return {
context: context,
Expand Down Expand Up @@ -114,3 +123,6 @@ if(typeof AudioWorkletNode !== 'function') {
window.audioWorkletProcessors[name] = new processorClass();
}
}

// For TypeScript to recognize the file as a "module".
export {}
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Due to legacy TypeScript functionality from before ES Modules were a thing, any file without an import or export statement is not considered a module. If the file is not considered a module, the app.js file is not able to import it (type error on that import line). Adding the no-op export {} line marks the file as a module in TS eyes.