move dev dependencies to main package.json, get first compiling version of test widget

- i still want to be able to get the types ambiently defined without any weird import needed
- it would be nice to be able to have a separate package.json in ./typescirpt. not sure if it's possible, I would move working on that part to the end

apps.json

@@ -4763,7 +4763,7 @@
     "tags": "widget",
         "supports": ["BANGLEJS","BANGLEJS2"],
     "storage": [
-      {"name":"widChargingStatus.wid.js","url":"widget.js"}
+      {"name":"widChargingStatus.wid.js","url":"./dist/widget.js"}
      ]
   },
   {

apps/widChargingStatus/dist/widget.js

@@ -0,0 +1,31 @@
+"use strict";
+exports.__esModule = true;
+(function () {
+    var icon = require('heatshrink').decompress(atob('ikggMAiEAgYIBmEAg4EB+EAh0AgPggEeCAIEBnwQBAgP+gEP//x///j//8f//k///H//4BYOP/4lBv4bDvwEB4EAvAEBwEAuA7DCAI7BgAQBhEAA'));
+    var iconWidth = 18;
+    function draw() {
+        g.reset();
+        if (Bangle.isCharging()) {
+            g.setColor('#FD0');
+            g.drawImage(icon, this.x + 1, this.y + 1, {
+                scale: 0.6875
+            });
+        }
+    }
+    WIDGETS.chargingStatus = {
+        area: 'tr',
+        width: Bangle.isCharging() ? iconWidth : 0,
+        draw: draw
+    };
+    Bangle.on('charging', function (charging) {
+        if (charging) {
+            Bangle.buzz();
+            WIDGETS.chargingStatus.width = iconWidth;
+        }
+        else {
+            WIDGETS.chargingStatus.width = 0;
+        }
+        Bangle.drawWidgets(); // re-layout widgets
+        g.flip();
+    });
+})();

apps/widChargingStatus/widget.ts

@@ -1,13 +1,19 @@
+import { loadGlobals } from '../../typescript/types/globals'; // TODO find a nicer way to load ambient type definitions than this
+
 (() => {
-	const icon = require("heatshrink").decompress(atob("ikggMAiEAgYIBmEAg4EB+EAh0AgPggEeCAIEBnwQBAgP+gEP//x///j//8f//k///H//4BYOP/4lBv4bDvwEB4EAvAEBwEAuA7DCAI7BgAQBhEAA"));
+  const icon = require('heatshrink').decompress(
+    atob(
+      'ikggMAiEAgYIBmEAg4EB+EAh0AgPggEeCAIEBnwQBAgP+gEP//x///j//8f//k///H//4BYOP/4lBv4bDvwEB4EAvAEBwEAuA7DCAI7BgAQBhEAA'
+    )
+  );
   const iconWidth = 18;
 
   function draw() {
     g.reset();
     if (Bangle.isCharging()) {
-			g.setColor("#FD0");
+      g.setColor('#FD0');
       g.drawImage(icon, this.x + 1, this.y + 1, {
-				scale: 0.6875
+        scale: 0.6875,
       });
     }
   }

package.json

@@ -4,12 +4,16 @@
   "author": "Gordon Williams <gw@pur3.co.uk> (http://espruino.com)",
   "version": "0.0.1",
   "devDependencies": {
-    "eslint": "7.1.0"
+    "eslint": "7.1.0",
+    "@types/node": "16.11.12",
+    "typescript": "4.5.2"
   },
   "scripts": {
     "lint-apps": "eslint ./apps --ext .js",
     "test": "node bin/sanitycheck.js && eslint ./apps --ext .js",
-    "start": "npx http-server -c-1"
+    "start": "npx http-server -c-1",
+    "build:example": "tsc ./apps/widChargingStatus/widget.ts --outDir ./apps/widChargingStatus/dist",
+    "build:types": "tsc .typescript/types/globals.d.ts"
   },
   "dependencies": {
     "acorn": "^7.2.0"

tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "module": "es2015",
+    "noImplicitAny": true,
+    "target": "es2015"
+  }
+}

typescript/.gitignore

@@ -1,2 +0,0 @@
-node_modules/
-!package-lock.json

typescript/package-lock.json

@@ -1,37 +0,0 @@
-{
-  "name": "banglets",
-  "version": "0.1.0",
-  "lockfileVersion": 2,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "banglets",
-      "version": "0.1.0",
-      "license": "MIT",
-      "devDependencies": {
-        "typescript": "^4.5.2"
-      }
-    },
-    "node_modules/typescript": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.2.tgz",
-      "integrity": "sha512-5BlMof9H1yGt0P8/WF+wPNw6GfctgGjXp5hkblpyT+8rkASSmkUKMXrxR0Xg8ThVCi/JnHQiKXeBaEwCeQwMFw==",
-      "dev": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=4.2.0"
-      }
-    }
-  },
-  "dependencies": {
-    "typescript": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.2.tgz",
-      "integrity": "sha512-5BlMof9H1yGt0P8/WF+wPNw6GfctgGjXp5hkblpyT+8rkASSmkUKMXrxR0Xg8ThVCi/JnHQiKXeBaEwCeQwMFw==",
-      "dev": true
-    }
-  }
-}

typescript/package.json

@@ -1,19 +0,0 @@
-{
-  "name": "bangle.ts",
-  "version": "0.1.0",
-  "description": "Typescript configuration and typings for Bangle.js",
-  "main": "app.js",
-  "types": "app.d.ts",
-  "scripts": {
-    "build:example": "tsc ../apps/widChargingStatus/widget.ts --outDir ../apps/widChargingStatus/dist",
-    "build:types": "tsc ./globals.d.ts"
-  },
-  "author": {
-    "name": "Sebastian Di Luzio",
-    "email": "sebastian@diluz.io"
-  },
-  "license": "MIT",
-  "devDependencies": {
-    "typescript": "^4.5.2"
-  }
-}

typescript/tsconfig.json

@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "module": "es2015",
-    "noImplicitAny": true,
-    "target": "es2015",
-    "outDir": "../dist",
-    "isolatedModules": false
-  },
-  "include": ["./globals.d.ts"]
-}

typescript/types/globals.d.ts

@@ -1,33 +1,19 @@
 // TODO all of these globals (copied from eslintrc need to be typed at some point)
 /* "globals": {
     // Methods and Fields at https://banglejs.com/reference
-    "Array": "readonly",
-    "ArrayBuffer": "readonly",
-    "ArrayBufferView": "readonly",
-    "Bangle": "readonly",
     "BluetoothDevice": "readonly",
     "BluetoothRemoteGATTCharacteristic": "readonly",
     "BluetoothRemoteGATTServer": "readonly",
     "BluetoothRemoteGATTService": "readonly",
-    "Boolean": "readonly",
-    "console": "readonly",
     "DataView": "readonly",
-    "Date": "readonly",
     "E": "readonly",
     "Error": "readonly",
     "Flash": "readonly",
-    "Float32Array": "readonly",
-    "Float64Array": "readonly",
     "fs": "readonly",
     "Function": "readonly",
-    "Graphics": "readonly",
     "heatshrink": "readonly",
     "I2C": "readonly",
-    "Int16Array": "readonly",
-    "Int32Array": "readonly",
-    "Int8Array": "readonly",
     "InternalError": "readonly",
-    "JSON": "readonly",
     "Math": "readonly",
     "Modules": "readonly",
     "NRF": "readonly",
@@ -122,11 +108,12 @@
     "Terminal": "readonly",
     "trace": "readonly",
     "VIBRATE": "readonly",
-    // Aliases and not defined at https://banglejs.com/reference
-    "g": "readonly",
  */
 
-declare const Bangle: {
+export type loadGlobals = {};
+
+declare global {
+  const Bangle: {
     // functions
     buzz: () => void;
     drawWidgets: () => void;
@@ -134,12 +121,40 @@ declare const Bangle: {
     // events
     on(event: 'charging', listener: (charging: boolean) => void): void;
     // TODO add more
-};
+  };
 
-type Widget = {
+  type Image = {
+    width: number;
+    height: number;
+    bpp?: number;
+    buffer: ArrayBuffer | string;
+    transparent?: number;
+    palette?: Uint16Array;
+  };
+
+  type GraphicsApi = {
+    reset: () => void;
+    flip: () => void;
+    setColor: (color: string) => void; // TODO we can most likely type color more usefully than this
+    drawImage: (
+      image: string | Image | ArrayBuffer,
+      xOffset: number,
+      yOffset: number,
+      options?: {
+        rotate?: number;
+        scale?: number;
+      }
+    ) => void;
+    // TODO add more
+  };
+
+  const Graphics: GraphicsApi;
+  const g: GraphicsApi;
+
+  type Widget = {
     area: 'tr' | 'tl';
     width: number;
     draw: () => void;
-};
+  };
-
+  const WIDGETS: { [key: string]: Widget };
-declare const WIDGETS: { [key: string]: Widget };
+}