Tern Demo

This editor is hooked up to Tern. The drop-down in the top right corner lists the commands and keyboard shortcuts available. Output and function argument hints will appear in the bar below the editor.

// Use ctrl-space to complete something
co
document.body.a

// Put the cursor in or after an expression, press ctrl-i to
// find its type

var foo = ["array", "of", "strings"]
var bar = foo.slice(0, 2).join("").split("a")[0]

// Works for locally defined types too.

function CTor() { this.size = 10 }
CTor.prototype.hallo = "hallo"

var baz = new CTor
baz.

// You can press ctrl-q when the cursor is on a variable
// name to rename it. Try it with CTor...

// When the cursor is in an argument list, the arguments
// are shown below the editor.

[1].reduce(  )

// A simple set of three modules, connected with requirejs

requirejs(["text_util", "output"], function(text, output) {
  window.addEventListener("load", function() {
    // Pressing alt-. on `garble` jumps to the module
    var word = text.capitalize(text.garble(prompt("Hi", "")))
    output.write(word)
  })
})

// Trivial requirejs-style module

define(function() {
  return {
    // Capitalize a string
    capitalize: function(word) {
      return word.charAt(0).toUpperCase() + word.slice(1)
    },

    // Garble the vowels in a string
    garble: function(word) {
      return word.replace(/[auiyoe]/g, function() {
        return "auiyoe".charAt(Math.floor(Math.random() * 6))
      })
    }
  }
})

// This one is written using a multi-module-loader wrapper
//
// If Tern's requirejs plugin is loaded, it'll pick up the
// call to define. Alternatively, when its commonjs plugin
// is loaded, that'll handle the require calls.

(function(root, mod) {
  if (typeof exports == "object" && typeof module == "object")
    mod(exports, require("jquery")) // CommonJS
  else if (typeof define == "function" && define.amd)
    define(["exports", "jquery"], mod) // AMD
  else
    mod(root.output = {}, root.$) // Plain browser env
})(this, function(exports, $) {

  // Write some text to the bottom of the document
  exports.write = function(text) {
    $("body").append($("").text(text))
  }

})



// Tern can do ECMAScript 6 (2015) too!

// Imports and exports work. You can complete module names, and
// jump to the definition of things defined in modules.

// (Press alt-. on `List` to jump to the class definition)
import {List} from "./list"

import * as myMath from "./mymath"

const l = List.of(3, 4, 5)
for (let elt of l.map(x => x * 2)) {
  // Tern knows that `elt` is a number!
  let output = myMath.halve(elt)
  console.log(output)
}

// Raw template string
let raw = String.raw`\n`

// Default arguments
Array.of(1, 2, 3, 4).find(x => x % 3 == 0)


export class List {
  constructor(head, tail) {
    this.head = head
    this.tail = tail
  }

  static of(...elements) {
    let result = null
    for (let i = elements.length - 1; i >= 0; i--)
      result = new List(elements[i], result)
    return result
  }

  map(f) {
    return new List(f(this.head), this.tail && this.tail.map(f))
  }

  *[Symbol.iterator]() {
    for (let pos = this; pos; pos = pos.tail)
      yield pos.head
  }
}


export const PI = 3

export const halve = x => x / 2

Tern demo