Repository: bokeh/bokeh

Issue:
Add TypeScript version of extensions_putting_together.py
For reference https://groups.google.com/a/continuum.io/forum/#!topic/bokeh/BEuBfJIWjhA.



Discussion:

Resolving patch:
diff --git a/sphinx/source/docs/user_guide/examples/extensions_putting_together.py b/sphinx/source/docs/user_guide/examples/extensions_putting_together.py
deleted file mode 100644
--- a/sphinx/source/docs/user_guide/examples/extensions_putting_together.py
+++ /dev/null
@@ -1,72 +0,0 @@
-from bokeh.core.properties import String, Instance
-from bokeh.models import LayoutDOM, Slider
-
-CODE ="""
-import {div, empty} from "core/dom"
-import * as p from "core/properties"
-import {LayoutDOM, LayoutDOMView} from "models/layouts/layout_dom"
-
-export class CustomView extends LayoutDOMView
-
-  initialize: (options) ->
-    super(options)
-
-    @render()
-
-    # Set Backbone listener so that when the Bokeh slider has a change
-    # event, we can process the new data
-    @connect(@model.slider.change, () => @render())
-
-  render: () ->
-    # Backbone Views create <div> elements by default, accessible as @el.
-    # Many Bokeh views ignore this default <div>, and instead do things
-    # like draw to the HTML canvas. In this case though, we change the
-    # contents of the <div>, based on the current slider value.
-    empty(@el)
-    @el.appendChild(div({
-      style: {
-        color: '#686d8e'
-        'background-color': '#2a3153'
-      }
-    }, "#{@model.text}: #{@model.slider.value}"))
-
-export class Custom extends LayoutDOM
-
-  # If there is an associated view, this is boilerplate.
-  default_view: CustomView
-
-  # The ``type`` class attribute should generally match exactly the name
-  # of the corresponding Python class.
-  type: "Custom"
-
-  # The @define block adds corresponding "properties" to the JS model. These
-  # should basically line up 1-1 with the Python model class. Most property
-  # types have counterparts, e.g. bokeh.core.properties.String will be
-  # p.String in the JS implementation. Where the JS type system is not yet
-  # as rich, you can use p.Any as a "wildcard" property type.
-  @define {
-    text:   [ p.String ]
-    slider: [ p.Any    ]
-  }
-"""
-
-class Custom(LayoutDOM):
-
-    __implementation__ = CODE
-
-    text = String(default="Custom text")
-
-    slider = Instance(Slider)
-
-from bokeh.io import show
-
-from bokeh.layouts import column
-from bokeh.models import Slider
-
-slider = Slider(start=0, end=10, step=0.1, value=0, title="value")
-
-custom = Custom(text="Special Slider Display", slider=slider)
-
-layout = column(slider, custom)
-
-show(layout)
diff --git a/sphinx/source/docs/user_guide/examples/extensions_putting_together_ts.py b/sphinx/source/docs/user_guide/examples/extensions_putting_together_ts.py
new file mode 100644
--- /dev/null
+++ b/sphinx/source/docs/user_guide/examples/extensions_putting_together_ts.py
@@ -0,0 +1,79 @@
+from bokeh.core.properties import String, Instance
+from bokeh.models import LayoutDOM, Slider
+
+CODE ="""
+import {div, empty} from "core/dom"
+import * as p from "core/properties"
+import {LayoutDOM, LayoutDOMView} from "models/layouts/layout_dom"
+
+export class CustomView extends LayoutDOMView {
+
+  initialize(options) {
+    super.initialize(options)
+
+    this.render()
+
+    // Set BokehJS listener so that when the Bokeh slider has a change
+    // event, we can process the new data
+    this.connect(this.model.slider.change, () => this.render())
+  }
+
+  render() {
+    // BokehjS Views create <div> elements by default, accessible as
+    // ``this.el``. Many Bokeh views ignore this default <div>, and instead
+    // do things like draw to the HTML canvas. In this case though, we change
+    // the contents of the <div>, based on the current slider value.
+    empty(this.el)
+    this.el.appendChild(div({
+      style: {
+        'padding': '2px',
+        'color': '#b88d8e',
+        'background-color': '#2a3153',
+      },
+    }, `${this.model.text}: ${this.model.slider.value}`))
+  }
+}
+
+export class Custom extends LayoutDOM {
+
+  // If there is an associated view, this is typically boilerplate.
+  default_view = CustomView
+
+  // The ``type`` class attribute should generally match exactly the name
+  // of the corresponding Python class.
+  type = "Custom"
+}
+
+// The @define block adds corresponding "properties" to the JS model. These
+// should normally line up 1-1 with the Python model class. Most property
+// types have counterparts, e.g. bokeh.core.properties.String will be
+// ``p.String`` in the JS implementation. Any time the JS type system is not
+// yet as complete, you can use ``p.Any`` as a "wildcard" property type.
+Custom.define({
+  text:   [ p.String ],
+  slider: [ p.Any    ],
+})
+"""
+
+from bokeh.util.compiler import TypeScript
+
+class Custom(LayoutDOM):
+
+    __implementation__ = TypeScript(CODE)
+
+    text = String(default="Custom text")
+
+    slider = Instance(Slider)
+
+from bokeh.io import show
+
+from bokeh.layouts import column
+from bokeh.models import Slider
+
+slider = Slider(start=0, end=10, step=0.1, value=0, title="value")
+
+custom = Custom(text="Special Slider Display", slider=slider)
+
+layout = column(slider, custom)
+
+show(layout)


Test patch: