add developer guide, run package updates, and format

Author: terryzfeng

DEVELOPER_GUIDE.md

@@ -0,0 +1,65 @@
+# WebChucK IDE Developer Guide
+
+How to contribute to WebChucK IDE development!
+
+**NOTE**: All development is done on the `dev` branch. `main` is reserved for 
+release.
+
+## Table of Contents
+- [WebChucK IDE Developer Guide](#webchuck-ide-developer-guide)
+  - [Table of Contents](#table-of-contents)
+  - [Setup](#setup)
+  - [Development Testing](#development-testing)
+  - [Building](#building)
+  - [Deploy and Release](#deploy-and-release)
+
+## Setup
+
+Make sure you have [Git](https://git-scm.com) and [Node](https://nodejs.org) installed.
+
+Clone the repository if you haven't already. 
+
+```
+git clone https://github.com/ccrma/webchuck-ide.git
+```
+
+In the webchuck-ide repo, install npm dependencies
+
+```
+npm install
+```
+
+## Development Testing
+
+To run WebChucK IDE locally for development testing
+
+```
+npm run dev
+```
+
+## Building
+
+Build WebChucK IDE to a static site by running: 
+
+```
+npm run build
+```
+
+This will build WebChucK IDE and place all necessary files in the `./dist` folder.
+
+## Deploy and Release
+
+To package and release a new version of WebChucK IDE, make sure all changes are 
+PR'ed onto the `main` branch. From `main`, make a clean build of WebChucK IDE, 
+then tag the version for release.
+
+```
+npm run clean
+npm install
+npm run build
+npm version patch
+```
+
+Copy the `./dist/` folder to hosting destination.
+
+Talk to **@gewang** to update the [WebChucK IDE](https://chuck.stanford.edu/ide) site..

package-lock.json

@@ -4,7 +4,7 @@
     "version": "2.1.4",
     "type": "module",
     "scripts": {
-        "clean": "rm -rf dist",
+        "clean": "rm -rf dist && rm -rf node_modules",
         "dev": "vite",
         "build": "tsc && vite build",
         "preview": "vite preview",

package.json

@@ -110,15 +110,15 @@ export default class Examples {
         Examples.newExample(
             "Hello Sine GUI",
             () => {
-                loadChuckFileFromURL("examples/helloSineGUI.ck")
+                loadChuckFileFromURL("examples/helloSineGUI.ck");
                 InputPanelHeader.setNotificationPing(0, true);
             },
             guiNested
         );
         Examples.newExample(
             "FM Synthesis GUI",
             () => {
-                loadChuckFileFromURL("examples/fmGUI.ck")
+                loadChuckFileFromURL("examples/fmGUI.ck");
                 InputPanelHeader.setNotificationPing(0, true);
             },
             guiNested
@@ -134,14 +134,14 @@ export default class Examples {
             "Mouse PWM HID",
             () => {
                 loadChuckFileFromURL("examples/mouseHID.ck"),
-                InputPanelHeader.setNotificationPing(1, true);
+                    InputPanelHeader.setNotificationPing(1, true);
             },
             hidNested
         );
         Examples.newExample(
             "Keyboard Organ HID",
             () => {
-                loadChuckFileFromURL("examples/keyboardHID.ck")
+                loadChuckFileFromURL("examples/keyboardHID.ck");
                 InputPanelHeader.setNotificationPing(1, true);
             },
             hidNested

src/components/examples/examples.ts

@@ -41,7 +41,7 @@ export default class InputPanelHeader {
         InputPanelHeader.inputContainers.push(
             document.querySelector<HTMLDivElement>("#SensorContainer")!
         );
-        InputPanelHeader.inputPings.push(  
+        InputPanelHeader.inputPings.push(
             document.querySelector<HTMLSpanElement>("#SensorPing")!
         );
 
@@ -91,7 +91,9 @@ export default class InputPanelHeader {
      */
     static setNotificationPing(tabIndex: number, on: boolean) {
         for (let i = 0; i < InputPanelHeader.inputButtons.length; i++) {
-            InputPanelHeader.inputToggles[i].setNotificationPing(i == tabIndex && on);
+            InputPanelHeader.inputToggles[i].setNotificationPing(
+                i == tabIndex && on
+            );
         }
     }
 }