Document is undefined when building with fitbit-build

[cyberprodigy]

Can someone help me understand if it is a bug with fitbit SDK or am I doing something wrong.

When I run fitbit-build, it builds. When I run fitbit-install it runs on device but I get runtime exception 'document is undefined'.

Problem is only when I switch to TypeScript. Plain old JavaScript works.

If I transpile index.ts into index.js myself with tsc compiler, and run fitbit-build, then problem is not there. But if I allow fitbit-build to compile my TypeScript files and build, then there is this runtime exception.

Here is my full index.gui file

<svg >
  <text x="0" y="0" id="test_txt">Test text</text>
</svg>

Here is my full index.ts file

let test_txt = document.getElementById("test_txt") as any;

Here my full package.json file

{
  "fitbit": {
    "appType": "clockface",
    "appDisplayName": "SDK Moment",
    "requestedPermissions": [
      "access_activity",
      "access_heart_rate",
      "access_user_profile"
    ],
    "buildTargets": [
      "higgs",
      "meson"
    ],
    "i18n": {
      "en": {
        "name": "SDK Moment"
      }
    },
    "appUUID": "0b1567ed-372b-4a16-9950-a56fc3fd8280"
  },
  "dependencies": {
    "@fitbit/sdk": "^2.0.1",
    "@fitbit/sdk-cli": "^1.0.2",
    "@types/node": "^10.12.0"
  },
  "scripts": {
    "build": "fitbit-build"
  },
  "devDependencies": {
    "dts-gen": "^0.5.7",
    "fitbit-sdk-types": "^0.1.1"
  }
}

Here is my full widgets.gui file

<svg>
  <defs>
    <link rel="stylesheet" href="styles.css" />
    <link rel="import" href="/mnt/sysassets/widgets_common.gui" />
    <link rel="import" href="/mnt/sysassets/widgets/push_button_widget.gui" />
    <link rel="import" href="/mnt/sysassets/widgets/baseview_widget.gui"/>
    <link rel="import" href="/mnt/sysassets/widgets/tumblerview_widget.gui"/>
    <link rel="import" href="/mnt/sysassets/widgets/square_button_widget.gui" />
  </defs>
</svg>

Here is my full tsconfig.json file

{
    "compilerOptions": {
        "module": "es2015",
        "noEmitHelpers": false,
        "importHelpers": true,
        "noResolve": false,
        "noEmit": false,
        "inlineSourceMap": false,
        "moduleResolution": "node",
        "target": "es5",
        "removeComments": true,
        "allowJs": true,
        "jsx": "react",
        "jsxFactory": "createComponent",
        "noImplicitAny": true,
        "noEmitOnError": true,
        "downlevelIteration": true,
        "sourceMap": true,
        "lib": ["es5", "es2015.promise", "dom"],
        "types": [],
        "esModuleInterop": true
    },
    "include": [
        "./", 
        "../node_modules/fitbit-sdk-types/device"
    ]
}

Here is the runtime exception

[23:00:15]       App: Unhandled ReferenceError: document is not defined
  test_txt at app/index.ts:1,1

Am I missing something?

[JonFitbit]

Are you importing document before trying to use it?

import document from "document";

[cyberprodigy]

If I add the import I get compile time error

TS2307: Cannot find module 'document'.

Same thing happens on Fitbit studio web version https://studio.fitbit.com

This works with javascript but I was unable to find equivalent syntax for typescript.

[JonFitbit · Accepted solution]

Perhaps try these type definitions for typescript https://github.com/SergioMorchon/fitbit-sdk-types

[cyberprodigy]

After adding a triple slash directive it has 'document' defined.

This is how the final sample index.ts from above looks

///<reference path="../node_modules/fitbit-sdk-types/device/document.d.ts" />
import document from "document"
let test_txt = document.getElementById("test_txt") as any;

Correct me if I'm wrong but this will only work for command line interface as this is where you can install additional type definitions.

Thanks, Jon 

[Sergius]

If you want to work with TypeScript, then you can't use the fitbit studio.

Because you will need to import modules that there (in the web tool) you can't add, except copy&pasting a lot of .d.ts files.

So the best approach to work with TypeScript source code is using the fitbit cli tool.

For that, I've just updated the typings package and improved the way of working with it. Take a look at the mentioned repo https://github.com/SergioMorchon/fitbit-sdk-types to avoid the triple-slash reference and have types working within the fitbit build process.

Don't be shy, and if you have any issue with it, create it on GitHub. I'm looking for feedback!

[allan175]

The only time I've used Javascript is on Fitbit, does your types add on give classes etc?

And would you say Typescript the way to go? (I'm from a C/C++ background).

[allan175]

NOTE: I have moved over to the CLI build system.

[Sergius]

TL;DR

Yes, I'd say it's the way to go.

Eplanation

TypeScript does nothing special over Javascript except for:

• It add types to a language that does not have types (JavaScript).
• Performs a polyfill and transpilation to let you use modern language features and have them working in older machines/interpreters (web engines in this case, and specifically JerryScript for our Fitbit devices).

In summary, JavaScript as a language already have Classes, modules, fetch, async & await and all that kind of modern features. It just lacks of types, so we can add a previous step using TypeScript to add a compiler that check our code and produces plain old Javascript bits.