Including an external javascript library in pebble js file?

Question

Is there any way I can include an external JS library in my pebble code? Conventionally on a webpage I would do this in my head tags:

<script type='text/javascript' src='https://cdn.firebase.com/js/client/1.0.11/firebase.js'></script>

But in pebble, I am unable to do that since I am only using JS. So how can I include an external library for a JavaScript file.

Answer 1

At present, you cannot include external JS files.

If you're using CloudPebble, then the only way to do this is to copy and paste the content of the JS library files into your JS file.

If you're doing native development, you can modify the wscript file to combine multiple JS files into one at build time.

Answer 2

I think there's some confusion over Pebble.js vs PebbleKit JS (v3.8.1). Pebble.js is a fledgling SDK where eventually the programmer will be able to write pure JavaScript. It's still cooking so there's some functionality missing like the ability to draw a line or obtain the screen dimensions. The repo is a mix of C and JS sources where you can add C code to augment missing functionality but otherwise all your code lives in src/js/app.js or src/js/app/. Anyway, Pebble.js does support require.

I don't use CloudPebble but I got the impression that it either supports Pebble.js (and hence require) or is planning to. I think all this SDK boilerplate code would be hidden.

PebbleKit JS does not support require out of the box AFAIK. I've made a demo that ports require support from Pebble.js to PKJS. The summary of changes is:

1. Move your project's src/js/pebble-js-app.js to src/js/app/index.js.
2. Remove any ready event listener from src/js/app/index.js. index.js will be loaded when the ready event is emitted.
3. Add src/js/loader.js from Pebble.js.
4. Add a src/js/main.js that calls require('src/js/app') on the ready event.
5. Update your wscript with the following deltas.
6. When adding new modules, place them under src/js/app/ and require('./name') will work.

I've tried to cover this all in the demo's readme.

BTW, here's the official breakdown of all the different SDKs but it's a little confusing.

Answer 3

I am not sure if there have been changes since the above answer, but it looks like there is in fact a way to include additional resources while keeping things tidy. On the pebbleJS page, there is the following section with an some information on the subject.

---

GLOBAL NAMESPACE - require(path)

Loads another JavaScript file allowing you to write a multi-file project. Package loading loosely follows the CommonJS format. path is the path to the dependency.

---

You can then use the following code to "require" a JS library in your pebble project. This should be usable on both Cloud Pebble as well as native development.

// src/js/dependency.js
var dep = require('dependency');

You can then use this as shown below:

dep.myFunction(); // run a function from the dependency
dep.myVar = 2; // access or change variables

---

Update: After some digging into this for my own, I have successfully gotten CloudPebble to work with this functionality. It is a bit convoluted, but follows the ECMAScript 6 standards. Below I am posting a simple example of getting things set up. Additionally, I would suggest looking at this code from PebbleJS for a better reference of a complex setup.

myApp.js

var resource = require('myExtraFile');        // require additional library

console.log(resource.value);                  // logs 42

resource.functionA();                         // logs "This is working now"

myExtraFile.js

var myExtraFile = {                           // create a JSON object to export

  "value" : 42,                               // variable

  functionA : function() {                    // function
    console.log("This is working now!");
  }
};

this.exports = myExtraFile;                   // export this function for
                                              // later use