Release v5.0.7 (#3524)

* grammar update
* Release v5.0.7

.gitmodules

@@ -67,9 +67,6 @@
 [submodule "vendor/grammars/language-javascript"]
 	path = vendor/grammars/language-javascript
 	url = https://github.com/atom/language-javascript
-[submodule "vendor/grammars/language-python"]
-	path = vendor/grammars/language-python
-	url = https://github.com/atom/language-python
 [submodule "vendor/grammars/language-shellscript"]
 	path = vendor/grammars/language-shellscript
 	url = https://github.com/atom/language-shellscript
@@ -177,7 +174,7 @@
 	url = https://github.com/mokus0/Agda.tmbundle
 [submodule "vendor/grammars/Julia.tmbundle"]
 	path = vendor/grammars/Julia.tmbundle
-	url = https://github.com/nanoant/Julia.tmbundle
+	url = https://github.com/JuliaEditorSupport/Julia.tmbundle
 [submodule "vendor/grammars/ooc.tmbundle"]
 	path = vendor/grammars/ooc.tmbundle
 	url = https://github.com/nilium/ooc.tmbundle
@@ -249,7 +246,7 @@
 	url = https://github.com/textmate/d.tmbundle
 [submodule "vendor/grammars/diff.tmbundle"]
 	path = vendor/grammars/diff.tmbundle
-	url = https://github.com/kivikakk/diff.tmbundle
+	url = https://github.com/textmate/diff.tmbundle
 [submodule "vendor/grammars/dylan.tmbundle"]
 	path = vendor/grammars/dylan.tmbundle
 	url = https://github.com/textmate/dylan.tmbundle
@@ -333,7 +330,7 @@
 	url = https://github.com/textmate/php-smarty.tmbundle
 [submodule "vendor/grammars/php.tmbundle"]
 	path = vendor/grammars/php.tmbundle
-	url = https://github.com/textmate/php.tmbundle
+	url = https://github.com/brandonblack/php.tmbundle
 [submodule "vendor/grammars/postscript.tmbundle"]
 	path = vendor/grammars/postscript.tmbundle
 	url = https://github.com/textmate/postscript.tmbundle
@@ -815,3 +812,27 @@
 [submodule "vendor/grammars/language-css"]
 	path = vendor/grammars/language-css
 	url = https://github.com/atom/language-css
+[submodule "vendor/grammars/language-regexp"]
+	path = vendor/grammars/language-regexp
+	url = https://github.com/Alhadis/language-regexp
+[submodule "vendor/grammars/Terraform.tmLanguage"]
+	path = vendor/grammars/Terraform.tmLanguage
+	url = https://github.com/alexlouden/Terraform.tmLanguage
+[submodule "vendor/grammars/shaders-tmLanguage"]
+	path = vendor/grammars/shaders-tmLanguage
+	url = https://github.com/tgjones/shaders-tmLanguage
+[submodule "vendor/grammars/language-meson"]
+	path = vendor/grammars/language-meson
+	url = https://github.com/TingPing/language-meson
+[submodule "vendor/grammars/atom-language-p4"]
+	path = vendor/grammars/atom-language-p4
+	url = https://github.com/TakeshiTseng/atom-language-p4
+[submodule "vendor/grammars/language-jison"]
+	path = vendor/grammars/language-jison
+	url = https://github.com/cdibbs/language-jison
+[submodule "vendor/grammars/openscad.tmbundle"]
+	path = vendor/grammars/openscad.tmbundle
+	url = https://github.com/tbuser/openscad.tmbundle
+[submodule "vendor/grammars/marko-tmbundle"]
+	path = vendor/grammars/marko-tmbundle
+	url = https://github.com/marko-js/marko-tmbundle

.travis.yml

@@ -1,20 +1,33 @@
 language: ruby
 sudo: false
+
 addons:
   apt:
     packages:
     - libicu-dev
     - libicu48
+
 before_install: script/travis/before_install
+
 script:
   - bundle exec rake
   - script/licensed verify
+
 rvm:
-  - 2.0.0
   - 2.1
   - 2.2
+  - 2.3.3
+  - 2.4.0
+
+matrix:
+  allow_failures:
+  - rvm: 2.4.0
+
 notifications:
   disabled: true
+
 git:
   submodules: false
+  depth: 3
+
 cache: bundler

LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2011-2016 GitHub, Inc.
+Copyright (c) 2017 GitHub, Inc.
 
 Permission is hereby granted, free of charge, to any person
 obtaining a copy of this software and associated documentation

README.md

@@ -32,7 +32,7 @@ Linguist supports a number of different custom overrides strategies for language
 
 ### Using gitattributes
 
-Add a `.gitattributes` file to your project and use standard git-style path matchers for the files you want to override to set `linguist-documentation`, `linguist-language`, and `linguist-vendored`. `.gitattributes` will be used to determine language statistics, but will not be used to syntax highlight files. To manually set syntax highlighting, use [Vim or Emacs modelines](#using-emacs-or-vim-modelines).
+Add a `.gitattributes` file to your project and use standard git-style path matchers for the files you want to override to set `linguist-documentation`, `linguist-language`, and `linguist-vendored`. `.gitattributes` will be used to determine language statistics and will be used to syntax highlight files. You can also manually set syntax highlighting using [Vim or Emacs modelines](#using-emacs-or-vim-modelines).
 
 ```
 $ cat .gitattributes
@@ -71,7 +71,7 @@ See [Linguist::Generated#generated?](https://github.com/github/linguist/blob/mas
 
 ### Using Emacs or Vim modelines
 
-Alternatively, you can use Vim or Emacs style modelines to set the language for a single file. Modelines can be placed anywhere within a file and are respected when determining how to syntax-highlight a file on GitHub.com
+If you do not want to use `.gitattributes` to override the syntax highlighting used on GitHub.com, you can use Vim or Emacs style modelines to set the language for a single file. Modelines can be placed anywhere within a file and are respected when determining how to syntax-highlight a file on GitHub.com
 
 ##### Vim
 ```

github-linguist.gemspec

@@ -16,7 +16,7 @@ Gem::Specification.new do |s|
   s.add_dependency 'charlock_holmes', '~> 0.7.3'
   s.add_dependency 'escape_utils',    '~> 1.1.0'
   s.add_dependency 'mime-types',      '>= 1.19'
-  s.add_dependency 'rugged',          '0.25.0b10'
+  s.add_dependency 'rugged',          '>= 0.25.1'
 
   s.add_development_dependency 'minitest', '>= 5.0'
   s.add_development_dependency 'mocha'
@@ -26,5 +26,5 @@ Gem::Specification.new do |s|
   s.add_development_dependency 'yajl-ruby'
   s.add_development_dependency 'color-proximity', '~> 0.2.1'
   s.add_development_dependency 'licensed'
-  s.add_development_dependency 'licensee', '>= 8.6.0'
+  s.add_development_dependency 'licensee', '~> 8.8.0'
 end

grammars.yml

@@ -56,6 +56,8 @@ vendor/grammars/MQL5-sublime:
 vendor/grammars/MagicPython:
 - source.python
 - source.regexp.python
+- text.python.console
+- text.python.traceback
 vendor/grammars/Modelica:
 - source.modelica
 vendor/grammars/NSIS:
@@ -130,6 +132,8 @@ vendor/grammars/TLA:
 - source.tla
 vendor/grammars/TXL:
 - source.txl
+vendor/grammars/Terraform.tmLanguage:
+- source.terraform
 vendor/grammars/Textmate-Gosu-Bundle:
 - source.gosu.2
 vendor/grammars/UrWeb-Language-Definition:
@@ -180,6 +184,9 @@ vendor/grammars/atom-language-1c-bsl:
 - source.sdbl
 vendor/grammars/atom-language-clean:
 - source.clean
+- source.gfm.clean
+vendor/grammars/atom-language-p4:
+- source.p4
 vendor/grammars/atom-language-perl6:
 - source.meta-info
 - source.perl6fe
@@ -220,7 +227,6 @@ vendor/grammars/capnproto.tmbundle:
 vendor/grammars/carto-atom:
 - source.css.mss
 vendor/grammars/ceylon-sublimetext:
-- module.ceylon
 - source.ceylon
 vendor/grammars/chapel-tmbundle:
 - source.chapel
@@ -399,6 +405,11 @@ vendor/grammars/language-javascript:
 - source.js
 - source.js.regexp
 - source.js.regexp.replacement
+- source.jsdoc
+vendor/grammars/language-jison:
+- source.jison
+- source.jisonlex
+- source.jisonlex-injection
 vendor/grammars/language-jsoniq:
 - source.jq
 - source.xq
@@ -406,20 +417,24 @@ vendor/grammars/language-less:
 - source.css.less
 vendor/grammars/language-maxscript:
 - source.maxscript
+vendor/grammars/language-meson:
+- source.meson
 vendor/grammars/language-ncl:
 - source.ncl
 vendor/grammars/language-ninja:
 - source.ninja
 vendor/grammars/language-povray:
 - source.pov-ray sdl
-vendor/grammars/language-python:
-- text.python.console
-- text.python.traceback
+vendor/grammars/language-regexp:
+- source.regexp
+- source.regexp.extended
 vendor/grammars/language-renpy:
 - source.renpy
 vendor/grammars/language-restructuredtext:
 - text.restructuredtext
 vendor/grammars/language-roff:
+- source.ditroff
+- source.ditroff.desc
 - source.ideal
 - source.pic
 - text.roff
@@ -474,6 +489,8 @@ vendor/grammars/make.tmbundle:
 - source.makefile
 vendor/grammars/mako-tmbundle:
 - text.html.mako
+vendor/grammars/marko-tmbundle:
+- text.marko
 vendor/grammars/mathematica-tmbundle:
 - source.mathematica
 vendor/grammars/matlab.tmbundle:
@@ -511,6 +528,8 @@ vendor/grammars/ooc.tmbundle:
 - source.ooc
 vendor/grammars/opa.tmbundle:
 - source.opa
+vendor/grammars/openscad.tmbundle:
+- source.scad
 vendor/grammars/oz-tmbundle/Syntaxes/Oz.tmLanguage:
 - source.oz
 vendor/grammars/parrot:
@@ -567,6 +586,9 @@ vendor/grammars/scilab.tmbundle:
 - source.scilab
 vendor/grammars/secondlife-lsl:
 - source.lsl
+vendor/grammars/shaders-tmLanguage:
+- source.hlsl
+- source.shaderlab
 vendor/grammars/smali-sublime:
 - source.smali
 vendor/grammars/smalltalk-tmbundle:

lib/linguist.rb

@@ -15,9 +15,9 @@ class << Linguist
   #       see Linguist::LazyBlob and Linguist::FileBlob for examples
   #
   # Returns Language or nil.
-  def detect(blob)
+  def detect(blob, allow_empty: false)
     # Bail early if the blob is binary or empty.
-    return nil if blob.likely_binary? || blob.binary? || blob.empty?
+    return nil if blob.likely_binary? || blob.binary? || (!allow_empty && blob.empty?)
 
     Linguist.instrument("linguist.detection", :blob => blob) do
       # Call each strategy until one candidate is returned.

lib/linguist/classifier.rb

@@ -95,7 +95,7 @@ module Linguist
     # Returns sorted Array of result pairs. Each pair contains the
     # String language name and a Float score.
     def classify(tokens, languages)
-      return [] if tokens.nil?
+      return [] if tokens.nil? || languages.empty?
       tokens = Tokenizer.tokenize(tokens) if tokens.is_a?(String)
       scores = {}
 

lib/linguist/documentation.yml

@@ -9,11 +9,12 @@
 
 ## Documentation directories ##
 
-- ^docs?/
+- ^[Dd]ocs?/
 - (^|/)[Dd]ocumentation/
-- (^|/)javadoc/
-- ^man/
+- (^|/)[Jj]avadoc/
+- ^[Mm]an/
 - ^[Ee]xamples/
+- ^[Dd]emos?/
 
 ## Documentation files ##
 
@@ -27,4 +28,4 @@
 - (^|/)[Rr]eadme(\.|$)
 
 # Samples folders
-- ^[Ss]amples/
+- ^[Ss]amples?/

lib/linguist/generated.rb

@@ -80,7 +80,8 @@ module Linguist
       generated_jflex? ||
       generated_grammarkit? ||
       generated_roxygen2? ||
-      generated_jison?
+      generated_jison? ||
+      generated_yarn_lock?
     end
 
     # Internal: Is the blob an Xcode file?
@@ -479,5 +480,14 @@ module Linguist
       return lines[0].start_with?("/* parser generated by jison ") ||
              lines[0].start_with?("/* generated by jison-lex ")
     end
+
+    # Internal: Is the blob a generated yarn lockfile?
+    #
+    # Returns true or false.
+    def generated_yarn_lock?
+      return false unless name.match(/yarn\.lock/)
+      return false unless lines.count > 0
+      return lines[0].include?("# THIS IS AN AUTOGENERATED FILE")
+    end
   end
 end

lib/linguist/heuristics.rb

@@ -260,10 +260,12 @@ module Linguist
     end
 
     disambiguate ".md" do |data|
-      if /(^[-a-z0-9=#!\*\[|])|<\//i.match(data) || data.empty?
+      if /(^[-a-z0-9=#!\*\[|>])|<\//i.match(data) || data.empty?
         Language["Markdown"]
       elsif /^(;;|\(define_)/.match(data)
         Language["GCC machine description"]
+      else
+        Language["Markdown"]
       end
     end
 
@@ -278,7 +280,7 @@ module Linguist
     disambiguate ".mod" do |data|
       if data.include?('<!ENTITY ')
         Language["XML"]
-      elsif /MODULE\s\w+\s*;/i.match(data) || /^\s*END \w+;$/i.match(data)
+      elsif /^\s*MODULE [\w\.]+;/i.match(data) || /^\s*END [\w\.]+;/i.match(data)
         Language["Modula-2"]
       else
         [Language["Linux Kernel Module"], Language["AMPL"]]
@@ -465,5 +467,13 @@ module Linguist
         Language["Scilab"]
       end
     end
+
+    disambiguate ".tsx" do |data|
+      if /^\s*(import.+(from\s+|require\()['"]react|\/\/\/\s*<reference\s)/.match(data)
+        Language["TypeScript"]
+      elsif /^\s*<\?xml\s+version/i.match(data)
+        Language["XML"]
+      end
+    end
   end
 end

lib/linguist/languages.yml

@@ -1156,6 +1156,7 @@ Erlang:
   - ".xrl"
   - ".yrl"
   filenames:
+  - Emakefile
   - rebar.config
   - rebar.config.lock
   - rebar.lock
@@ -1587,7 +1588,7 @@ HCL:
   ace_mode: ruby
   codemirror_mode: ruby
   codemirror_mime_type: text/x-ruby
-  tm_scope: source.ruby
+  tm_scope: source.terraform
   language_id: 144
 HLSL:
   type: programming
@@ -1597,7 +1598,7 @@ HLSL:
   - ".fxh"
   - ".hlsli"
   ace_mode: text
-  tm_scope: none
+  tm_scope: source.hlsl
   language_id: 145
 HTML:
   type: markup
@@ -1605,7 +1606,7 @@ HTML:
   ace_mode: html
   codemirror_mode: htmlmixed
   codemirror_mime_type: text/html
-  color: "#e44b23"
+  color: "#e34c26"
   aliases:
   - xhtml
   extensions:
@@ -2022,6 +2023,22 @@ JavaScript:
   interpreters:
   - node
   language_id: 183
+Jison:
+  type: programming
+  group: Yacc
+  extensions:
+  - ".jison"
+  tm_scope: source.jison
+  ace_mode: text
+  language_id: 284531423
+Jison Lex:
+  type: programming
+  group: Lex
+  extensions:
+  - ".jisonlex"
+  tm_scope: source.jisonlex
+  ace_mode: text
+  language_id: 406395330
 Julia:
   type: programming
   extensions:
@@ -2291,6 +2308,8 @@ LookML:
   color: "#652B81"
   extensions:
   - ".lookml"
+  - ".model.lkml"
+  - ".view.lkml"
   tm_scope: source.yaml
   language_id: 211
 LoomScript:
@@ -2437,6 +2456,8 @@ Mako:
   language_id: 221
 Markdown:
   type: prose
+  aliases:
+  - pandoc
   ace_mode: markdown
   codemirror_mode: gfm
   codemirror_mime_type: text/x-gfm
@@ -2450,6 +2471,18 @@ Markdown:
   - ".ron"
   tm_scope: source.gfm
   language_id: 222
+Marko:
+  group: HTML
+  type: markup
+  tm_scope: text.marko
+  extensions:
+  - ".marko"
+  aliases:
+  - markojs
+  ace_mode: text
+  codemirror_mode: htmlmixed
+  codemirror_mime_type: text/html
+  language_id: 932782397
 Mask:
   type: markup
   color: "#f97732"
@@ -2534,6 +2567,15 @@ Mercury:
   - ".moo"
   tm_scope: source.mercury
   language_id: 229
+Meson:
+  type: programming
+  color: "#007800"
+  filenames:
+  - meson.build
+  - meson_options.txt
+  tm_scope: source.meson
+  ace_mode: text
+  language_id: 799141244
 Metal:
   type: programming
   color: "#8f14e9"
@@ -2902,7 +2944,7 @@ OpenSCAD:
   type: programming
   extensions:
   - ".scad"
-  tm_scope: none
+  tm_scope: source.scad
   ace_mode: scad
   language_id: 266
 OpenType Feature File:
@@ -2949,6 +2991,14 @@ Oz:
   codemirror_mode: oz
   codemirror_mime_type: text/x-oz
   language_id: 270
+P4:
+  type: programming
+  color: "#7055b5"
+  extensions:
+  - ".p4"
+  tm_scope: source.p4
+  ace_mode: text
+  language_id: 348895984
 PAWN:
   type: programming
   color: "#dbb284"
@@ -3226,6 +3276,7 @@ PowerBuilder:
   language_id: 292
 PowerShell:
   type: programming
+  color: "#012456"
   ace_mode: powershell
   codemirror_mode: powershell
   codemirror_mime_type: application/x-powershell
@@ -3368,6 +3419,7 @@ Python:
   - SConscript
   - SConstruct
   - Snakefile
+  - WORKSPACE
   - wscript
   interpreters:
   - python
@@ -3601,6 +3653,17 @@ Redcode:
   tm_scope: none
   ace_mode: text
   language_id: 321
+Regular Expression:
+  type: data
+  extensions:
+  - ".regexp"
+  - ".regex"
+  aliases:
+  - regexp
+  - regex
+  ace_mode: text
+  tm_scope: source.regexp
+  language_id: 363378884
 Ren'Py:
   type: programming
   aliases:
@@ -3689,6 +3752,7 @@ Ruby:
   extensions:
   - ".rb"
   - ".builder"
+  - ".eye"
   - ".fcgi"
   - ".gemspec"
   - ".god"
@@ -4298,6 +4362,7 @@ Text:
   - ".no"
   filenames:
   - COPYING
+  - COPYRIGHT.regex
   - FONTLOG
   - INSTALL
   - INSTALL.mysql
@@ -4597,9 +4662,9 @@ XCompose:
   type: data
   filenames:
   - ".XCompose"
-  - "XCompose"
-  - "xcompose"
-  tm_scope: 'config.xcompose'
+  - XCompose
+  - xcompose
+  tm_scope: config.xcompose
   ace_mode: text
   language_id: 225167241
 XML:
@@ -4680,6 +4745,7 @@ XML:
   - ".vcxproj"
   - ".vssettings"
   - ".vxml"
+  - ".wixproj"
   - ".wsdl"
   - ".wsf"
   - ".wxi"

lib/linguist/version.rb

@@ -1,3 +1,3 @@
 module Linguist
-  VERSION = "5.0.2"
+  VERSION = "5.0.7"
 end

samples/Erlang/filenames/Emakefile

@@ -0,0 +1,7 @@
+{"src/*", [
+   report, 
+   verbose, 
+   {i, "include"}, 
+   {outdir, "ebin"},
+   debug_info 
+]}.

samples/HCL/main.tf

@@ -0,0 +1,135 @@
+resource "aws_security_group" "elb_sec_group" {
+  description = "Allow traffic from the internet to ELB port 80"
+  vpc_id = "${var.vpc_id}"
+
+  ingress {
+      from_port = 80
+      to_port = 80
+      protocol = "tcp"
+      cidr_blocks = ["${split(",", var.allowed_cidr_blocks)}"]
+  }
+
+  egress {
+      from_port = 0
+      to_port = 0
+      protocol = "-1"
+      cidr_blocks = ["0.0.0.0/0"]
+  }
+}
+
+resource "aws_security_group" "dokku_allow_ssh_from_internal" {
+  description = "Allow git access over ssh from the private subnet"
+  vpc_id = "${var.vpc_id}"
+
+  ingress {
+      from_port = 22
+      to_port = 22
+      protocol = "tcp"
+      cidr_blocks = ["${var.private_subnet_cidr}"]
+  }
+
+  egress {
+      from_port = 0
+      to_port = 0
+      protocol = "-1"
+      cidr_blocks = ["0.0.0.0/0"]
+  }
+}
+
+resource "aws_security_group" "allow_from_elb_to_instance" {
+  description = "Allow traffic from the ELB to the private instance"
+  vpc_id = "${var.vpc_id}"
+
+  ingress {
+      security_groups = ["${aws_security_group.elb_sec_group.id}"]
+      from_port = 80
+      to_port = 80
+      protocol = "tcp"
+  }
+
+  egress {
+      from_port = 0
+      to_port = 0
+      protocol = "-1"
+      cidr_blocks = ["0.0.0.0/0"]
+  }
+}
+
+resource "aws_instance" "dokku" {
+  ami = "ami-47a23a30"
+  instance_type = "${var.instance_type}"
+  associate_public_ip_address = false
+  key_name = "${var.key_name}"
+  subnet_id = "${var.private_subnet_id}"
+  vpc_security_group_ids = [
+    "${var.bastion_sec_group_id}",
+    "${aws_security_group.allow_from_elb_to_instance.id}",
+    "${aws_security_group.dokku_allow_ssh_from_internal.id}"
+  ]
+  tags {
+    Name = "${var.name}"
+  }
+  connection {
+    user = "ubuntu"
+    private_key = "${var.private_key}"
+    bastion_host = "${var.bastion_host}"
+    bastion_port = "${var.bastion_port}"
+    bastion_user = "${var.bastion_user}"
+    bastion_private_key = "${var.bastion_private_key}"
+  }
+  provisioner "file" {
+    source = "${path.module}/../scripts/install-dokku.sh"
+    destination = "/home/ubuntu/install-dokku.sh"
+  }
+  provisioner "remote-exec" {
+    inline = [
+      "chmod +x /home/ubuntu/install-dokku.sh",
+      "HOSTNAME=${var.hostname} /home/ubuntu/install-dokku.sh"
+    ]
+  }
+}
+
+resource "aws_elb" "elb_dokku" {
+  name = "elb-dokku-${var.name}"
+  subnets = ["${var.public_subnet_id}"]
+  security_groups = ["${aws_security_group.elb_sec_group.id}"]
+
+  listener {
+    instance_port = 80
+    instance_protocol = "http"
+    lb_port = 80
+    lb_protocol = "http"
+  }
+
+  health_check {
+    healthy_threshold = 2
+    unhealthy_threshold = 2
+    timeout = 3
+    target = "HTTP:80/"
+    interval = 30
+  }
+
+  instances = ["${aws_instance.dokku.id}"]
+  cross_zone_load_balancing = false
+  idle_timeout = 400
+
+  tags {
+    Name = "elb-dokku-${var.name}"
+  }
+}
+
+resource "aws_route53_record" "dokku-deploy" {
+   zone_id = "${var.zone_id}"
+   name = "deploy.${var.hostname}"
+   type = "A"
+   ttl = "300"
+   records = ["${aws_instance.dokku.private_ip}"]
+}
+
+resource "aws_route53_record" "dokku-wildcard" {
+   zone_id = "${var.zone_id}"
+   name = "*.${var.hostname}"
+   type = "CNAME"
+   ttl = "300"
+   records = ["${aws_elb.elb_dokku.dns_name}"]
+}

samples/Jison Lex/classy.jisonlex

@@ -0,0 +1,39 @@
+digit                       [0-9]
+id                          [a-zA-Z][a-zA-Z0-9]*
+
+%%
+"//".*                      /* ignore comment */
+"main"                      return 'MAIN';
+"class"                     return 'CLASS';
+"extends"                   return 'EXTENDS';
+"nat"                       return 'NATTYPE';
+"if"                        return 'IF';
+"else"                      return 'ELSE';
+"for"                       return 'FOR';
+"printNat"                  return 'PRINTNAT';
+"readNat"                   return 'READNAT';
+"this"                      return 'THIS';
+"new"                       return 'NEW';
+"var"                       return 'VAR';
+"null"                      return 'NUL';
+{digit}+                    return 'NATLITERAL';
+{id}                        return 'ID';
+"=="                        return 'EQUALITY';
+"="                         return 'ASSIGN';
+"+"                         return 'PLUS';
+"-"                         return 'MINUS';
+"*"                         return 'TIMES';
+">"                         return 'GREATER';
+"||"                        return 'OR';
+"!"                         return 'NOT';
+"."                         return 'DOT';
+"{"                         return 'LBRACE';
+"}"                         return 'RBRACE';
+"("                         return 'LPAREN';
+")"                         return 'RPAREN';
+";"                         return 'SEMICOLON';
+\s+                         /* skip whitespace */
+"."                         throw 'Illegal character';
+<<EOF>>                     return 'ENDOFFILE';
+
+

samples/Jison Lex/lex_grammar.jisonlex

@@ -0,0 +1,29 @@
+
+%%
+\n+                         {yy.freshLine = true;}
+\s+                         {yy.freshLine = false;}
+"y{"[^}]*"}"                {yytext = yytext.substr(2, yyleng - 3); return 'ACTION';}
+[a-zA-Z_][a-zA-Z0-9_-]*     {return 'NAME';}
+'"'([^"]|'\"')*'"'          {return 'STRING_LIT';}
+"'"([^']|"\'")*"'"          {return 'STRING_LIT';}
+"|"                         {return '|';}
+"["("\]"|[^\]])*"]"         {return 'ANY_GROUP_REGEX';}
+"("                         {return '(';}
+")"                         {return ')';}
+"+"                         {return '+';}
+"*"                         {return '*';}
+"?"                         {return '?';}
+"^"                         {return '^';}
+"/"                         {return '/';}
+"\\"[a-zA-Z0]               {return 'ESCAPE_CHAR';}
+"$"                         {return '$';}
+"<<EOF>>"                   {return '$';}
+"."                         {return '.';}
+"%%"                        {return '%%';}
+"{"\d+(","\s?\d+|",")?"}"   {return 'RANGE_REGEX';}
+/"{"                        %{if (yy.freshLine) { this.input('{'); return '{'; } else { this.unput('y'); }%}
+"}"                         %{return '}';%}
+"%{"(.|\n)*?"}%"            {yytext = yytext.substr(2, yyleng - 4); return 'ACTION';}
+.                           {/* ignore bad characters */}
+<<EOF>>                     {return 'EOF';}
+

samples/Jison/ansic.jison

@@ -0,0 +1,418 @@
+%token IDENTIFIER CONSTANT STRING_LITERAL SIZEOF
+%token PTR_OP INC_OP DEC_OP LEFT_OP RIGHT_OP LE_OP GE_OP EQ_OP NE_OP
+%token AND_OP OR_OP MUL_ASSIGN DIV_ASSIGN MOD_ASSIGN ADD_ASSIGN
+%token SUB_ASSIGN LEFT_ASSIGN RIGHT_ASSIGN AND_ASSIGN
+%token XOR_ASSIGN OR_ASSIGN TYPE_NAME
+
+%token TYPEDEF EXTERN STATIC AUTO REGISTER
+%token CHAR SHORT INT LONG SIGNED UNSIGNED FLOAT DOUBLE CONST VOLATILE VOID
+%token STRUCT UNION ENUM ELLIPSIS
+
+%token CASE DEFAULT IF ELSE SWITCH WHILE DO FOR GOTO CONTINUE BREAK RETURN
+
+%nonassoc IF_WITHOUT_ELSE
+%nonassoc ELSE
+
+%start translation_unit
+%%
+
+primary_expression
+    : IDENTIFIER
+    | CONSTANT
+    | STRING_LITERAL
+    | '(' expression ')'
+    ;
+
+postfix_expression
+    : primary_expression
+    | postfix_expression '[' expression ']'
+    | postfix_expression '(' ')'
+    | postfix_expression '(' argument_expression_list ')'
+    | postfix_expression '.' IDENTIFIER
+    | postfix_expression PTR_OP IDENTIFIER
+    | postfix_expression INC_OP
+    | postfix_expression DEC_OP
+    ;
+
+argument_expression_list
+    : assignment_expression
+    | argument_expression_list ',' assignment_expression
+    ;
+
+unary_expression
+    : postfix_expression
+    | INC_OP unary_expression
+    | DEC_OP unary_expression
+    | unary_operator cast_expression
+    | SIZEOF unary_expression
+    | SIZEOF '(' type_name ')'
+    ;
+
+unary_operator
+    : '&'
+    | '*'
+    | '+'
+    | '-'
+    | '~'
+    | '!'
+    ;
+
+cast_expression
+    : unary_expression
+    | '(' type_name ')' cast_expression
+    ;
+
+multiplicative_expression
+    : cast_expression
+    | multiplicative_expression '*' cast_expression
+    | multiplicative_expression '/' cast_expression
+    | multiplicative_expression '%' cast_expression
+    ;
+
+additive_expression
+    : multiplicative_expression
+    | additive_expression '+' multiplicative_expression
+    | additive_expression '-' multiplicative_expression
+    ;
+
+shift_expression
+    : additive_expression
+    | shift_expression LEFT_OP additive_expression
+    | shift_expression RIGHT_OP additive_expression
+    ;
+
+relational_expression
+    : shift_expression
+    | relational_expression '<' shift_expression
+    | relational_expression '>' shift_expression
+    | relational_expression LE_OP shift_expression
+    | relational_expression GE_OP shift_expression
+    ;
+
+equality_expression
+    : relational_expression
+    | equality_expression EQ_OP relational_expression
+    | equality_expression NE_OP relational_expression
+    ;
+
+and_expression
+    : equality_expression
+    | and_expression '&' equality_expression
+    ;
+
+exclusive_or_expression
+    : and_expression
+    | exclusive_or_expression '^' and_expression
+    ;
+
+inclusive_or_expression
+    : exclusive_or_expression
+    | inclusive_or_expression '|' exclusive_or_expression
+    ;
+
+logical_and_expression
+    : inclusive_or_expression
+    | logical_and_expression AND_OP inclusive_or_expression
+    ;
+
+logical_or_expression
+    : logical_and_expression
+    | logical_or_expression OR_OP logical_and_expression
+    ;
+
+conditional_expression
+    : logical_or_expression
+    | logical_or_expression '?' expression ':' conditional_expression
+    ;
+
+assignment_expression
+    : conditional_expression
+    | unary_expression assignment_operator assignment_expression
+    ;
+
+assignment_operator
+    : '='
+    | MUL_ASSIGN
+    | DIV_ASSIGN
+    | MOD_ASSIGN
+    | ADD_ASSIGN
+    | SUB_ASSIGN
+    | LEFT_ASSIGN
+    | RIGHT_ASSIGN
+    | AND_ASSIGN
+    | XOR_ASSIGN
+    | OR_ASSIGN
+    ;
+
+expression
+    : assignment_expression
+    | expression ',' assignment_expression
+    ;
+
+constant_expression
+    : conditional_expression
+    ;
+
+declaration
+    : declaration_specifiers ';'
+    | declaration_specifiers init_declarator_list ';'
+    ;
+
+declaration_specifiers
+    : storage_class_specifier
+    | storage_class_specifier declaration_specifiers
+    | type_specifier
+    | type_specifier declaration_specifiers
+    | type_qualifier
+    | type_qualifier declaration_specifiers
+    ;
+
+init_declarator_list
+    : init_declarator
+    | init_declarator_list ',' init_declarator
+    ;
+
+init_declarator
+    : declarator
+    | declarator '=' initializer
+    ;
+
+storage_class_specifier
+    : TYPEDEF
+    | EXTERN
+    | STATIC
+    | AUTO
+    | REGISTER
+    ;
+
+type_specifier
+    : VOID
+    | CHAR
+    | SHORT
+    | INT
+    | LONG
+    | FLOAT
+    | DOUBLE
+    | SIGNED
+    | UNSIGNED
+    | struct_or_union_specifier
+    | enum_specifier
+    | TYPE_NAME
+    ;
+
+struct_or_union_specifier
+    : struct_or_union IDENTIFIER '{' struct_declaration_list '}'
+    | struct_or_union '{' struct_declaration_list '}'
+    | struct_or_union IDENTIFIER
+    ;
+
+struct_or_union
+    : STRUCT
+    | UNION
+    ;
+
+struct_declaration_list
+    : struct_declaration
+    | struct_declaration_list struct_declaration
+    ;
+
+struct_declaration
+    : specifier_qualifier_list struct_declarator_list ';'
+    ;
+
+specifier_qualifier_list
+    : type_specifier specifier_qualifier_list
+    | type_specifier
+    | type_qualifier specifier_qualifier_list
+    | type_qualifier
+    ;
+
+struct_declarator_list
+    : struct_declarator
+    | struct_declarator_list ',' struct_declarator
+    ;
+
+struct_declarator
+    : declarator
+    | ':' constant_expression
+    | declarator ':' constant_expression
+    ;
+
+enum_specifier
+    : ENUM '{' enumerator_list '}'
+    | ENUM IDENTIFIER '{' enumerator_list '}'
+    | ENUM IDENTIFIER
+    ;
+
+enumerator_list
+    : enumerator
+    | enumerator_list ',' enumerator
+    ;
+
+enumerator
+    : IDENTIFIER
+    | IDENTIFIER '=' constant_expression
+    ;
+
+type_qualifier
+    : CONST
+    | VOLATILE
+    ;
+
+declarator
+    : pointer direct_declarator
+    | direct_declarator
+    ;
+
+direct_declarator
+    : IDENTIFIER
+    | '(' declarator ')'
+    | direct_declarator '[' constant_expression ']'
+    | direct_declarator '[' ']'
+    | direct_declarator '(' parameter_type_list ')'
+    | direct_declarator '(' identifier_list ')'
+    | direct_declarator '(' ')'
+    ;
+
+pointer
+    : '*'
+    | '*' type_qualifier_list
+    | '*' pointer
+    | '*' type_qualifier_list pointer
+    ;
+
+type_qualifier_list
+    : type_qualifier
+    | type_qualifier_list type_qualifier
+    ;
+
+
+parameter_type_list
+    : parameter_list
+    | parameter_list ',' ELLIPSIS
+    ;
+
+parameter_list
+    : parameter_declaration
+    | parameter_list ',' parameter_declaration
+    ;
+
+parameter_declaration
+    : declaration_specifiers declarator
+    | declaration_specifiers abstract_declarator
+    | declaration_specifiers
+    ;
+
+identifier_list
+    : IDENTIFIER
+    | identifier_list ',' IDENTIFIER
+    ;
+
+type_name
+    : specifier_qualifier_list
+    | specifier_qualifier_list abstract_declarator
+    ;
+
+abstract_declarator
+    : pointer
+    | direct_abstract_declarator
+    | pointer direct_abstract_declarator
+    ;
+
+direct_abstract_declarator
+    : '(' abstract_declarator ')'
+    | '[' ']'
+    | '[' constant_expression ']'
+    | direct_abstract_declarator '[' ']'
+    | direct_abstract_declarator '[' constant_expression ']'
+    | '(' ')'
+    | '(' parameter_type_list ')'
+    | direct_abstract_declarator '(' ')'
+    | direct_abstract_declarator '(' parameter_type_list ')'
+    ;
+
+initializer
+    : assignment_expression
+    | '{' initializer_list '}'
+    | '{' initializer_list ',' '}'
+    ;
+
+initializer_list
+    : initializer
+    | initializer_list ',' initializer
+    ;
+
+statement
+    : labeled_statement
+    | compound_statement
+    | expression_statement
+    | selection_statement
+    | iteration_statement
+    | jump_statement
+    ;
+
+labeled_statement
+    : IDENTIFIER ':' statement
+    | CASE constant_expression ':' statement
+    | DEFAULT ':' statement
+    ;
+
+compound_statement
+    : '{' '}'
+    | '{' statement_list '}'
+    | '{' declaration_list '}'
+    | '{' declaration_list statement_list '}'
+    ;
+
+declaration_list
+    : declaration
+    | declaration_list declaration
+    ;
+
+statement_list
+    : statement
+    | statement_list statement
+    ;
+
+expression_statement
+    : ';'
+    | expression ';'
+    ;
+
+selection_statement
+    : IF '(' expression ')' statement %prec IF_WITHOUT_ELSE
+    | IF '(' expression ')' statement ELSE statement
+    | SWITCH '(' expression ')' statement
+    ;
+
+iteration_statement
+    : WHILE '(' expression ')' statement
+    | DO statement WHILE '(' expression ')' ';'
+    | FOR '(' expression_statement expression_statement ')' statement
+    | FOR '(' expression_statement expression_statement expression ')' statement
+    ;
+
+jump_statement
+    : GOTO IDENTIFIER ';'
+    | CONTINUE ';'
+    | BREAK ';'
+    | RETURN ';'
+    | RETURN expression ';'
+    ;
+
+translation_unit
+    : external_declaration
+    | translation_unit external_declaration
+    ;
+
+external_declaration
+    : function_definition
+    | declaration
+    ;
+
+function_definition
+    : declaration_specifiers declarator declaration_list compound_statement
+    | declaration_specifiers declarator compound_statement
+    | declarator declaration_list compound_statement
+    | declarator compound_statement
+    ;

samples/Jison/classy.jison

@@ -0,0 +1,84 @@
+
+/* description: ClassyLang grammar. Very classy. */
+/*
+  To build parser:
+
+    $ ./bin/jison examples/classy.jison examples/classy.jisonlex
+
+*/
+
+
+/* author: Zach Carter */
+
+%right ASSIGN
+%left OR
+%nonassoc EQUALITY GREATER
+%left PLUS MINUS
+%left TIMES
+%right NOT
+%left DOT
+
+%%
+
+pgm
+    : cdl MAIN LBRACE vdl el RBRACE ENDOFFILE
+    ;
+
+cdl
+    : c cdl
+    |
+    ;
+
+c
+    : CLASS id EXTENDS id LBRACE vdl mdl RBRACE
+    ;
+
+vdl
+    : VAR t id SEMICOLON vdl
+    |
+    ;
+
+mdl
+    : t id LPAREN t id RPAREN LBRACE vdl el RBRACE mdl
+    |
+    ;
+
+t
+    : NATTYPE
+    | id
+    ;
+
+id
+    : ID
+    ;
+
+el
+    : e SEMICOLON el
+    | e SEMICOLON
+    ;
+
+e
+    : NATLITERAL
+    | NUL
+    | id
+    | NEW id
+    | THIS
+    | IF LPAREN e RPAREN LBRACE el RBRACE ELSE LBRACE el RBRACE
+    | FOR LPAREN e SEMICOLON e SEMICOLON e RPAREN LBRACE el RBRACE
+    | READNAT LPAREN RPAREN
+    | PRINTNAT LPAREN e RPAREN
+    | e PLUS e
+    | e MINUS e
+    | e TIMES e
+    | e EQUALITY e
+    | e GREATER e
+    | NOT e
+    | e OR e
+    | e DOT id
+    | id ASSIGN e
+    | e DOT id ASSIGN e
+    | id LPAREN e RPAREN
+    | e DOT id LPAREN e RPAREN
+    | LPAREN e RPAREN
+    ;
+

samples/Jison/lex.jison

@@ -0,0 +1,145 @@
+
+// `%nonassoc` tells the parser compiler (JISON) that these tokens cannot occur more than once,
+// i.e. input like '//a' (tokens '/', '/' and 'a') is not a legal input while '/a' (tokens '/' and 'a')
+// *is* legal input for this grammar.
+ 
+%nonassoc '/' '/!'
+
+// Likewise for `%left`: this informs the LALR(1) grammar compiler (JISON) that these tokens
+// *can* occur repeatedly, e.g. 'a?*' and even 'a**' are considered legal inputs given this
+// grammar!
+//
+// Token `RANGE_REGEX` may seem the odd one out here but really isn't: given the `regex_base`
+// choice/rule `regex_base range_regex`, which is recursive, this grammar tells JISON that 
+// any input matching a sequence like `regex_base range_regex range_regex` *is* legal.
+// If you do not want that to be legal, you MUST adjust the grammar rule set you match your
+// actual intent.
+
+%left '*' '+' '?' RANGE_REGEX
+
+
+%% 
+
+lex 
+    : definitions include '%%' rules '%%' EOF
+        {{ $$ = {macros: $1, rules: $4};
+          if ($2) $$.actionInclude = $2;
+          return $$; }}
+    | definitions include '%%' rules EOF
+        {{ $$ = {macros: $1, rules: $4};
+          if ($2) $$.actionInclude = $2;
+          return $$; }}
+    ;
+
+include
+    : action
+    |
+    ;
+
+definitions
+    : definitions definition
+        { $$ = $1; $$.concat($2); }
+    | definition
+        { $$ = [$1]; }
+    ;
+
+definition
+    : name regex
+        { $$ = [$1, $2]; }
+    ;
+
+name
+    : NAME
+        { $$ = yytext; }
+    ;
+
+rules
+    : rules rule
+        { $$ = $1; $$.push($2); }
+    | rule
+        { $$ = [$1]; }
+    ;
+
+rule
+    : regex action
+        { $$ = [$1, $2]; }
+    ;
+
+action
+    : ACTION 
+        { $$ = yytext; }
+    ;
+
+regex
+    : start_caret regex_list end_dollar
+        { $$ = $1+$2+$3; }
+    ;
+
+start_caret
+    : '^'
+        { $$ = '^'; }
+    |
+        { $$ = ''; }
+    ;
+
+end_dollar
+    : '$'
+        { $$ = '$'; }
+    |
+        { $$ = ''; }
+    ;
+
+regex_list
+    : regex_list '|' regex_chain
+        { $$ = $1+'|'+$3; }
+    | regex_chain
+    ;
+
+regex_chain
+    : regex_chain regex_base
+        { $$ = $1+$2;}
+    | regex_base
+        { $$ = $1;}
+    ;
+
+regex_base
+    : '(' regex_list ')'
+        { $$ = '('+$2+')'; }
+    | regex_base '+'
+        { $$ = $1+'+'; }
+    | regex_base '*'
+        { $$ = $1+'*'; }
+    | regex_base '?'
+        { $$ = $1+'?'; }
+    | '/' regex_base
+        { $$ = '(?=' + $regex_base + ')'; }
+    | '/!' regex_base
+        { $$ = '(?!' + $regex_base + ')'; }
+    | name_expansion
+    | regex_base range_regex
+        { $$ = $1+$2; }
+    | any_group_regex
+    | '.'
+        { $$ = '.'; }
+    | string
+    ;
+
+name_expansion
+    : '{' name '}'
+        {{ $$ = '{'+$2+'}'; }}
+    ;
+
+any_group_regex
+    : ANY_GROUP_REGEX
+        { $$ = yytext; }
+    ;
+
+range_regex
+    : RANGE_REGEX
+        { $$ = yytext; }
+    ;
+
+string
+    : STRING_LIT
+        { $$ = yy.prepareString(yytext.substr(1, yyleng-2)); }
+    ;

samples/LookML/example.model.lkml

@@ -0,0 +1,49 @@
+- label:          'desired label name'
+- connection:     connection_name
+- include:        filename_or_pattern
+  # Possibly more include declarations
+- persist_for:    N (seconds | minutes | hours)
+- case_sensitive: true | false
+- week_start_day: monday | tuesday | wednesday | thursday | friday | saturday | sunday
+- value_formats:
+  - name: desired_format_name
+    value_format: 'excel-style formatting string'
+  # Possibly more value formats
+
+- explore: view_name
+  label:  'desired label name'
+  description: 'description string'
+  symmetric_aggregates: true | false
+  hidden: true | false
+  fields: [field_or_set, field_or_set, …]
+
+  sql_always_where: SQL WHERE condition
+  always_filter:
+    field_name: 'looker filter expression'
+  conditionally_filter:
+    field_name: 'looker filter expression'
+    unless: [field_or_set, field_or_set, …]
+  access_filter_fields: [fully_scoped_field, fully_scoped_field, …]
+
+  always_join: [view_name, view_name, …]
+  joins:
+    - join: view_name
+      type: left_outer | full_outer | inner | cross
+      relationship: one_to_one | many_to_one | one_to_many | many_to_many
+      from: view_name
+      sql_table_name: table_name
+      view_label: 'desired label name'
+      fields: [field_or_set, field_or_set, …]
+      required_joins: [view_name, view_name, …]
+      foreign_key: dimension_name
+      sql_on: SQL ON clause
+    # Possibly more join declarations
+
+  persist_for: N (seconds | minutes | hours)
+  from: view_name
+  view: view_name
+  case_sensitive: true | false
+  sql_table_name: table_name
+  cancel_grouping_fields: [fully_scoped_field, fully_scoped_field, …]
+
+# Possibly more explore declarations

samples/LookML/example.view.lkml

@@ -0,0 +1,90 @@
+- view: view_name
+  sql_table_name: table_name
+  suggestions: true | false
+
+  derived_table:
+    sql: SQL query
+    persist_for: N (seconds | minutes | hours)
+    sql_trigger_value: SQL query
+    distribution: column_name
+    distribution_style: ALL | EVEN
+    sortkeys: [column_name, column_name, …]
+    indexes: [column_name, column_name, …]
+
+  sets:
+    set_name:
+      - field_or_set
+      - field_or_set
+      - …
+    # Possibly more set declarations
+
+  fields:
+  - (dimension | dimension_group | measure | filter): field_name
+    label: 'desired label name'
+    view_label: 'desired label name'
+    group_label: 'desired label name'
+    description: 'description string'
+    hidden: true | false
+    alias: [old_field_name, old_field_name, …]
+    value_format: 'excel-style formatting string'
+    value_format_name: format_name
+    html: HTML expression using Liquid template elements
+    sql: SQL expression to generate the field value
+    required_fields: [field_name, field_name, …]
+    drill_fields: [field_or_set, field_or_set, …]
+    can_filter: true | false
+    fanout_on: repeated_record_name
+
+    # DIMENSION SPECIFIC PARAMETERS
+
+    type: dimension_field_type
+    primary_key: true | false
+    sql_case:
+      value: SQL condition
+      value: SQL condition
+      # Possibly more sql_case statements
+    alpha_sort: true | false
+    tiers: [N, N, …]
+    style: classic | interval | integer | relational
+    sql_latitude: SQL expression to generate a latitude
+    sql_longitude: SQL expression to generate a longitude
+    suggestable: true | false
+    suggest_persist_for: N (seconds | minutes | hours)
+    suggest_dimension: dimension_name
+    suggest_explore: explore_name
+    suggestions: ['suggestion string', 'suggestion string', …]
+    bypass_suggest_restrictions: true | false
+    full_suggestions: true | false
+    skip_drill_filter: true | false
+    case_sensitive: true | false
+    order_by_field: dimension_name
+    map_layer: name_of_map_layer
+    links:
+      - label: 'desired label name'
+        url: desired_url
+        icon_url: url_of_an_ico_file
+      # Possibly more links
+
+    # DIMENSION GROUP SPECIFIC PARAMETERS
+
+    timeframes: [timeframe, timeframe, …]
+    convert_tz: true | false
+    datatype: epoch | timestamp | datetime | date | yyyymmdd
+
+    # MEASURE SPECIFIC PARAMETERS
+
+    type: measure_field_type
+    direction: row | column
+    approximate: true | false
+    approximate_threshold: N
+    sql_distinct_key: SQL expression to define repeated entities
+    list_field: dimension_name
+    filters:
+      dimension_name: 'looker filter expression'
+      # Possibly more filters statements
+
+    # FILTER SPECIFIC PARAMETERS
+
+    default_value: 'desired default value'
+
+  # Possibly more dimension or measure declarations

samples/Markdown/minimal.md

@@ -0,0 +1 @@
+_This_ is a **Markdown** readme.

samples/Marko/counter.marko

@@ -0,0 +1,26 @@
+class {
+    constructor() {
+        this.state = { count:0 };
+    }
+    increment() {
+        this.state.count++;
+    }
+}
+
+style {
+    .count {
+        color:#09c;
+        font-size:3em;
+    }
+    .example-button {
+        font-size:1em;
+        padding:0.5em;
+    }
+}
+
+<div.count>
+    ${state.count}
+</div>
+<button.example-button on-click('increment')>
+    Click me!
+</button>

samples/Marko/hello.marko

@@ -0,0 +1,15 @@
+$ var name = 'Frank';
+$ var colors = ['red', 'green', 'blue'];
+
+<h1>
+    Hello ${name}!
+</h1>
+
+<ul if(colors.length)>
+    <li style={color: color} for(color in colors)>
+        ${color}
+    </li>
+</ul>
+<div else>
+    No colors!
+</div>

samples/Marko/rgb-sliders.marko

@@ -0,0 +1,36 @@
+static const colors = ['red', 'green', 'blue'];
+static const defaultColor = [255, 0, 0];
+
+class {
+	onInput(input) {
+		this.state = { color: input.color || defaultColor };
+	}
+
+	updateColor() {
+    	this.state.color = colors.map((color) => {
+        	return parseInt(this.getEl(color + 'Input').value, 10);
+        });
+    }
+
+    getStyleColor() {
+    	return 'rgb(' + this.state.color.join(',') + ')';
+    }
+}
+
+<div.rgb-sliders>
+    <div.inputs>
+    	<for(i, color in colors)>
+        	<div>
+                <label for-key=color+"Input">
+                    ${color}:
+                </label>
+                <input type="range" max="255"
+                    key=color+"Input"
+                    on-input('updateColor')
+                    value=state.color[i] >
+            </div>
+        </for>
+    </div>
+    <div.color style={backgroundColor: component.getStyleColor()}>
+    </div>
+</div>

samples/Meson/filenames/meson.build

@@ -0,0 +1,51 @@
+project('test', ['c'],
+  version: '0.1.0'
+)
+
+# This is a comment test('foo')
+
+add_global_arguments(['-foo'])
+add_global_link_arguments(['-foo'])
+
+gnome = import('gnome') # As is this
+
+gnome.do_something('test')
+
+meson.source_root()
+
+foreach foo: bar
+  foreach baz : foo
+    message(baz)
+  endforeach
+endforeach
+
+blah = '''
+afjoakjflajf  # Test
+lflkasjf
+test\'test
+test\\\\test
+test\ntest
+'''
+
+foo = ''
+foo = ''''''
+foo = 'string'
+foo = '''string2'''
+foo = 12314
+foo = 1231.1231
+foo = true
+foo = false
+foo = ['te\'st', 1, 3.3, '''test''']
+foo += 1231
+foo = '@0@'.format('test')
+foo = include_directories('foo', kwarg: 'bar', include_directories: 'foo')
+foo = true ? 'true' : 'false'
+foo = 2 - 1 + 3 % 8 / 4 * 3
+
+if true and false
+elif false or true
+elif true not false
+elif foo == 12
+elif (foo != 124) and (foo <= 200)
+else
+endif

samples/Meson/filenames/meson_options.txt

@@ -0,0 +1,3 @@
+option('with-something', type: 'boolean',
+  value: true,
+)

samples/P4/l2.p4

@@ -0,0 +1,329 @@
+/*
+Copyright 2013-present Barefoot Networks, Inc. 
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/*
+ * Layer-2 processing
+ */
+
+header_type l2_metadata_t {
+    fields {
+        lkp_pkt_type : 3;
+        lkp_mac_sa : 48;
+        lkp_mac_da : 48;
+        lkp_mac_type : 16;
+
+        l2_nexthop : 16;                       /* next hop from l2 */
+        l2_nexthop_type : 1;                   /* ecmp or nexthop */
+        l2_redirect : 1;                       /* l2 redirect action */
+        l2_src_miss : 1;                       /* l2 source miss */
+        l2_src_move : IFINDEX_BIT_WIDTH;       /* l2 source interface mis-match */
+        stp_group: 10;                         /* spanning tree group id */
+        stp_state : 3;                         /* spanning tree port state */
+        bd_stats_idx : 16;                     /* ingress BD stats index */
+        learning_enabled : 1;                  /* is learning enabled */
+        port_vlan_mapping_miss : 1;            /* port vlan mapping miss */
+        same_if_check : IFINDEX_BIT_WIDTH;     /* same interface check */
+    }
+}
+
+metadata l2_metadata_t l2_metadata;
+
+#ifndef L2_DISABLE
+/*****************************************************************************/
+/* Spanning tree lookup                                                      */
+/*****************************************************************************/
+action set_stp_state(stp_state) {
+    modify_field(l2_metadata.stp_state, stp_state);
+}
+
+table spanning_tree {
+    reads {
+        ingress_metadata.ifindex : exact;
+        l2_metadata.stp_group: exact;
+    }
+    actions {
+        set_stp_state;
+    }
+    size : SPANNING_TREE_TABLE_SIZE;
+}
+#endif /* L2_DISABLE */
+
+control process_spanning_tree {
+#ifndef L2_DISABLE
+    if (l2_metadata.stp_group != STP_GROUP_NONE) {
+        apply(spanning_tree);
+    }
+#endif /* L2_DISABLE */
+}
+
+#ifndef L2_DISABLE
+/*****************************************************************************/
+/* Source MAC lookup                                                         */
+/*****************************************************************************/
+action smac_miss() {
+    modify_field(l2_metadata.l2_src_miss, TRUE);
+}
+
+action smac_hit(ifindex) {
+    bit_xor(l2_metadata.l2_src_move, ingress_metadata.ifindex, ifindex);
+}
+
+table smac {
+    reads {
+        ingress_metadata.bd : exact;
+        l2_metadata.lkp_mac_sa : exact;
+    }
+    actions {
+        nop;
+        smac_miss;
+        smac_hit;
+    }
+    size : MAC_TABLE_SIZE;
+}
+
+/*****************************************************************************/
+/* Destination MAC lookup                                                    */
+/*****************************************************************************/
+action dmac_hit(ifindex) {
+    modify_field(ingress_metadata.egress_ifindex, ifindex);
+    bit_xor(l2_metadata.same_if_check, l2_metadata.same_if_check, ifindex);
+}
+
+action dmac_multicast_hit(mc_index) {
+    modify_field(intrinsic_metadata.mcast_grp, mc_index);
+#ifdef FABRIC_ENABLE
+    modify_field(fabric_metadata.dst_device, FABRIC_DEVICE_MULTICAST);
+#endif /* FABRIC_ENABLE */
+}
+
+action dmac_miss() {
+    modify_field(ingress_metadata.egress_ifindex, IFINDEX_FLOOD);
+#ifdef FABRIC_ENABLE
+    modify_field(fabric_metadata.dst_device, FABRIC_DEVICE_MULTICAST);
+#endif /* FABRIC_ENABLE */
+}
+
+action dmac_redirect_nexthop(nexthop_index) {
+    modify_field(l2_metadata.l2_redirect, TRUE);
+    modify_field(l2_metadata.l2_nexthop, nexthop_index);
+    modify_field(l2_metadata.l2_nexthop_type, NEXTHOP_TYPE_SIMPLE);
+}
+
+action dmac_redirect_ecmp(ecmp_index) {
+    modify_field(l2_metadata.l2_redirect, TRUE);
+    modify_field(l2_metadata.l2_nexthop, ecmp_index);
+    modify_field(l2_metadata.l2_nexthop_type, NEXTHOP_TYPE_ECMP);
+}
+
+action dmac_drop() {
+    drop();
+}
+
+table dmac {
+    reads {
+        ingress_metadata.bd : exact;
+        l2_metadata.lkp_mac_da : exact;
+    }
+    actions {
+#ifdef OPENFLOW_ENABLE
+        openflow_apply;
+        openflow_miss;
+#endif /* OPENFLOW_ENABLE */
+        nop;
+        dmac_hit;
+        dmac_multicast_hit;
+        dmac_miss;
+        dmac_redirect_nexthop;
+        dmac_redirect_ecmp;
+        dmac_drop;
+    }
+    size : MAC_TABLE_SIZE;
+    support_timeout: true;
+}
+#endif /* L2_DISABLE */
+
+control process_mac {
+#ifndef L2_DISABLE
+    apply(smac);
+    apply(dmac);
+#endif /* L2_DISABLE */
+}
+
+#ifndef L2_DISABLE
+/*****************************************************************************/
+/* MAC learn notification                                                    */
+/*****************************************************************************/
+field_list mac_learn_digest {
+    ingress_metadata.bd;
+    l2_metadata.lkp_mac_sa;
+    ingress_metadata.ifindex;
+}
+
+action generate_learn_notify() {
+    generate_digest(MAC_LEARN_RECEIVER, mac_learn_digest);
+}
+
+table learn_notify {
+    reads {
+        l2_metadata.l2_src_miss : ternary;
+        l2_metadata.l2_src_move : ternary;
+        l2_metadata.stp_state : ternary;
+    }
+    actions {
+        nop;
+        generate_learn_notify;
+    }
+    size : LEARN_NOTIFY_TABLE_SIZE;
+}
+#endif /* L2_DISABLE */
+
+control process_mac_learning {
+#ifndef L2_DISABLE
+    if (l2_metadata.learning_enabled == TRUE) {
+        apply(learn_notify);
+    }
+#endif /* L2_DISABLE */
+}
+
+
+/*****************************************************************************/
+/* Validate packet                                                           */
+/*****************************************************************************/
+action set_unicast() {
+    modify_field(l2_metadata.lkp_pkt_type, L2_UNICAST);
+}
+
+action set_unicast_and_ipv6_src_is_link_local() {
+    modify_field(l2_metadata.lkp_pkt_type, L2_UNICAST);
+    modify_field(ipv6_metadata.ipv6_src_is_link_local, TRUE);
+}
+
+action set_multicast() {
+    modify_field(l2_metadata.lkp_pkt_type, L2_MULTICAST);
+    add_to_field(l2_metadata.bd_stats_idx, 1);
+}
+
+action set_multicast_and_ipv6_src_is_link_local() {
+    modify_field(l2_metadata.lkp_pkt_type, L2_MULTICAST);
+    modify_field(ipv6_metadata.ipv6_src_is_link_local, TRUE);
+    add_to_field(l2_metadata.bd_stats_idx, 1);
+}
+
+action set_broadcast() {
+    modify_field(l2_metadata.lkp_pkt_type, L2_BROADCAST);
+    add_to_field(l2_metadata.bd_stats_idx, 2);
+}
+
+action set_malformed_packet(drop_reason) {
+    modify_field(ingress_metadata.drop_flag, TRUE);
+    modify_field(ingress_metadata.drop_reason, drop_reason);
+}
+
+table validate_packet {
+    reads {
+#ifndef __TARGET_BMV2__
+        l2_metadata.lkp_mac_sa mask 0x010000000000 : ternary;
+#else
+        l2_metadata.lkp_mac_sa : ternary;
+#endif
+        l2_metadata.lkp_mac_da : ternary;
+        l3_metadata.lkp_ip_type : ternary;
+        l3_metadata.lkp_ip_ttl : ternary;
+        l3_metadata.lkp_ip_version : ternary;
+#ifndef __TARGET_BMV2__
+        ipv4_metadata.lkp_ipv4_sa mask 0xFF000000 : ternary;
+#else
+        ipv4_metadata.lkp_ipv4_sa : ternary;
+#endif
+#ifndef IPV6_DISABLE
+#ifndef __TARGET_BMV2__
+        ipv6_metadata.lkp_ipv6_sa mask 0xFFFF0000000000000000000000000000 : ternary;
+#else
+        ipv6_metadata.lkp_ipv6_sa : ternary;
+#endif
+#endif /* IPV6_DISABLE */
+    }
+    actions {
+        nop;
+        set_unicast;
+        set_unicast_and_ipv6_src_is_link_local;
+        set_multicast;
+        set_multicast_and_ipv6_src_is_link_local;
+        set_broadcast;
+        set_malformed_packet;
+    }
+    size : VALIDATE_PACKET_TABLE_SIZE;
+}
+
+control process_validate_packet {
+    if (ingress_metadata.drop_flag == FALSE) {
+        apply(validate_packet);
+    }
+}
+
+
+/*****************************************************************************/
+/* Egress BD lookup                                                          */
+/*****************************************************************************/
+action set_egress_bd_properties() {
+}
+
+table egress_bd_map {
+    reads {
+        egress_metadata.bd : exact;
+    }
+    actions {
+        nop;
+        set_egress_bd_properties;
+    }
+    size : EGRESS_BD_MAPPING_TABLE_SIZE;
+}
+
+control process_egress_bd {
+    apply(egress_bd_map);
+}
+
+
+/*****************************************************************************/
+/* Egress VLAN decap                                                         */
+/*****************************************************************************/
+action remove_vlan_single_tagged() {
+    modify_field(ethernet.etherType, vlan_tag_[0].etherType);
+    remove_header(vlan_tag_[0]);
+}
+
+action remove_vlan_double_tagged() {
+    modify_field(ethernet.etherType, vlan_tag_[1].etherType);
+    remove_header(vlan_tag_[0]);
+    remove_header(vlan_tag_[1]);
+}
+
+table vlan_decap {
+    reads {
+        vlan_tag_[0] : valid;
+        vlan_tag_[1] : valid;
+    }
+    actions {
+        nop;
+        remove_vlan_single_tagged;
+        remove_vlan_double_tagged;
+    }
+    size: VLAN_DECAP_TABLE_SIZE;
+}
+
+control process_vlan_decap {
+    apply(vlan_decap);
+}

samples/P4/mirror_acl.p4

@@ -0,0 +1,39 @@
+// Copyright 2015, Barefoot Networks, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+action set_mirror_id(session_id) {
+    clone_ingress_pkt_to_egress(session_id);
+}
+
+table mirror_acl {
+    reads {
+        ingress_metadata.if_label : ternary;
+        ingress_metadata.bd_label : ternary;
+
+        /* ip acl */
+        ingress_metadata.lkp_ipv4_sa : ternary;
+        ingress_metadata.lkp_ipv4_da : ternary;
+        ingress_metadata.lkp_ip_proto : ternary;
+
+        /* mac acl */
+        ingress_metadata.lkp_mac_sa : ternary;
+        ingress_metadata.lkp_mac_da : ternary;
+        ingress_metadata.lkp_mac_type : ternary;
+    }
+    actions {
+        nop;
+        set_mirror_id;
+    }
+    size : INGRESS_MIRROR_ACL_TABLE_SIZE;
+}

samples/Python/filenames/WORKSPACE

@@ -0,0 +1,12 @@
+# rules for scala
+# https://github.com/bazelbuild/rules_scala#getting-started
+# pull rule definitions from git
+git_repository(
+    name = "io_bazel_rules_scala",
+    remote = "https://github.com/bazelbuild/rules_scala.git",
+    commit = "73743b830ae98d13a946b25ad60cad5fee58e6d3", # update this as needed
+)
+
+# load the desired scala rules for this workspace
+load("@io_bazel_rules_scala//scala:scala.bzl", "scala_repositories")
+scala_repositories()

samples/Regular Expression/modeline-emacs.regexp

@@ -0,0 +1,19 @@
+-\*-
+(?:
+	\s*
+	(?= [^:;\s]+ \s* -\*-)
+	|
+	(?:
+		.*?[;\s]
+		|
+		(?<=-\*-)
+	)
+	mode\s*:\s*
+)
+([^:;\s]+)
+
+(?=
+	[\s;] | (?<![-*]) -\*-
+)
+.*?
+-\*-

samples/Regular Expression/modeline-vim.regexp

@@ -0,0 +1,27 @@
+(?:
+	(?:\s|^)
+	vi
+	(?:m[<=>]?\d+|m)?
+	|
+	[\t\x20]
+	ex
+)
+(?=
+	: (?=\s* set? \s [^\n:]+ :) |
+	: (?!\s* set? \s)
+)
+
+(?:
+	(?:\s|\s*:\s*)
+	\w*
+	(?:
+		\s*=
+		(?:[^\n\\\s]|\\.)*
+	)?
+)*
+
+[\s:]
+(?:filetype|ft|syntax)
+\s*=
+(MODE_NAME_HERE)
+(?=\s|:|$)

samples/Regular Expression/ordinal.regex

@@ -0,0 +1 @@
+\b(\d*1[1-3]th|\d*0th|(?:(?!11st)\d)*1st|\d*2nd|(?:(?!13rd)\d*)3rd|\d*[4-9]th)\b

samples/Regular Expression/url.regex

@@ -0,0 +1 @@
+/^([^\/#\?]*:?\/\/)?(\/?(?:[^\/#\?]+\/)*)?([^\/#\?]+)?(?:\/(?=$))?(\?[^#]*)?(#.*)?$/

samples/Text/filenames/COPYING.regex

@@ -0,0 +1,54 @@
+$OpenBSD: COPYRIGHT,v 1.3 2003/06/02 20:18:36 millert Exp $
+
+Copyright 1992, 1993, 1994 Henry Spencer.  All rights reserved.
+This software is not subject to any license of the American Telephone
+and Telegraph Company or of the Regents of the University of California.
+
+Permission is granted to anyone to use this software for any purpose on
+any computer system, and to alter it and redistribute it, subject
+to the following restrictions:
+
+1. The author is not responsible for the consequences of use of this
+   software, no matter how awful, even if they arise from flaws in it.
+
+2. The origin of this software must not be misrepresented, either by
+   explicit claim or by omission.  Since few users ever read sources,
+   credits must appear in the documentation.
+
+3. Altered versions must be plainly marked as such, and must not be
+   misrepresented as being the original software.  Since few users
+   ever read sources, credits must appear in the documentation.
+
+4. This notice may not be removed or altered.
+
+=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+/*-
+ * Copyright (c) 1994
+ *	The Regents of the University of California.  All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ * 3. Neither the name of the University nor the names of its contributors
+ *    may be used to endorse or promote products derived from this software
+ *    without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE REGENTS AND CONTRIBUTORS ``AS IS'' AND
+ * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ * ARE DISCLAIMED.  IN NO EVENT SHALL THE REGENTS OR CONTRIBUTORS BE LIABLE
+ * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+ * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS
+ * OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
+ * HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
+ * LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY
+ * OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
+ * SUCH DAMAGE.
+ *
+ *	@(#)COPYRIGHT	8.1 (Berkeley) 3/16/94
+ */

samples/TypeScript/import.tsx

@@ -0,0 +1,384 @@
+// Fixture taken from https://github.com/graphcool/console/blob/dev/src/components/onboarding/PlaygroundCPopup/PlaygroundCPopup.tsx
+
+import * as React from 'react'
+import {withRouter} from 'react-router'
+import {connect} from 'react-redux'
+import {bindActionCreators} from 'redux'
+import {nextStep, selectExample} from '../../../actions/gettingStarted'
+import {classnames} from '../../../utils/classnames'
+import Loading from '../../Loading/Loading'
+import {GettingStartedState} from '../../../types/gettingStarted'
+import {Example} from '../../../types/types'
+const classes: any = require('./PlaygroundCPopup.scss')
+import {$p} from 'graphcool-styles'
+import * as cx from 'classnames'
+
+interface Tutorial {
+  title: string
+  description: string
+  image: string
+  link: string
+}
+
+const guides: Tutorial[] = [
+  {
+    title: 'Learnrelay.org',
+    description: 'A comprehensive, interactive introduction to Relay',
+    link: 'https://learnrelay.org/',
+    image: require('../../../assets/graphics/relay.png'),
+  },
+  {
+    title: 'GraphQL and the amazing Apollo Client',
+    description: 'Explore an Application built using React and Angular 2',
+    link: 'https://medium.com/google-developer-experts/graphql-and-the-amazing-apollo-client-fe57e162a70c',
+    image: require('../../../assets/graphics/apollo.png'),
+  },
+  {
+    title: 'Introducing Lokka',
+    description: 'A Simple JavaScript Client for GraphQL',
+    link: 'https://voice.kadira.io/introducing-lokka-a-simple-javascript-client-for-graphql-e0802695648c',
+    image: require('../../../assets/graphics/lokka.png'),
+  },
+]
+
+const examples = {
+  ReactRelay: {
+    path: 'react-relay-instagram-example',
+    description: 'React + Relay',
+  },
+  ReactApollo: {
+    path: 'react-apollo-instagram-example',
+    description: 'React + Apollo',
+  },
+  ReactNativeApollo: {
+    path: 'react-native-apollo-instagram-example',
+    description: 'React Native + Apollo',
+  },
+  AngularApollo: {
+    path: 'angular-apollo-instagram-example',
+    description: 'Angular + Apollo',
+  },
+}
+
+interface Props {
+  id: string
+  projectId: string
+  nextStep: () => Promise<void>
+  selectExample: (selectedExample: Example) => any
+  gettingStartedState: GettingStartedState
+}
+
+interface State {
+  mouseOver: boolean
+}
+
+class PlaygroundCPopup extends React.Component<Props, State> {
+
+  state = {
+    mouseOver: false,
+  }
+
+  refs: {
+    [key: string]: any
+    exampleAnchor: HTMLDivElement
+    congratsAnchor: HTMLDivElement
+    scroller: HTMLDivElement,
+  }
+
+  componentDidUpdate(prevProps: Props, prevState: State) {
+    if (prevProps.gettingStartedState.selectedExample !== this.props.gettingStartedState.selectedExample) {
+      this.refs.scroller.scrollTop += this.refs.exampleAnchor.getBoundingClientRect().top
+    }
+
+    if (prevProps.gettingStartedState.isCurrentStep('STEP5_WAITING')
+        && this.props.gettingStartedState.isCurrentStep('STEP5_DONE')) {
+      this.refs.scroller.scrollTop += this.refs.congratsAnchor.getBoundingClientRect().top
+
+      const snd = new Audio(require('../../../assets/success.mp3') as string)
+      snd.volume = 0.5
+      snd.play()
+    }
+  }
+
+  render() {
+    const {mouseOver} = this.state
+    const {selectedExample} = this.props.gettingStartedState
+    const hovering = !this.props.gettingStartedState.isCurrentStep('STEP4_CLICK_TEASER_STEP5')
+    const downloadUrl = (example) => `${__BACKEND_ADDR__}/resources/getting-started-example?repository=${examples[example].path}&project_id=${this.props.projectId}&user=graphcool-examples` // tslint:disable-line
+    return (
+      <div
+        className='flex justify-center items-start w-100 h-100'
+        style={{
+          transition: 'background-color 0.3s ease',
+          backgroundColor: hovering ? 'rgba(255,255,255,0.7)' : 'transparent',
+          width: 'calc(100% - 266px)',
+          pointerEvents: 'none',
+          overflow: 'hidden',
+        }}
+      >
+        <div
+          ref='scroller'
+          className='flex justify-center w-100'
+          style={{
+            transition: 'height 0.5s ease',
+            height: hovering ? '100%' : mouseOver ? '190%' : '210%',
+            pointerEvents: hovering ? 'all' : 'none',
+            cursor: hovering ? 'auto' : 'pointer',
+            overflow: hovering ? 'auto' : 'hidden',
+            alignItems: selectedExample ? 'flex-start' : 'center',
+          }}
+        >
+          <div
+            className='bg-white br-2 shadow-2 mv-96'
+            style={{
+              minWidth: 600,
+              maxWidth: 800,
+              pointerEvents: 'all',
+            }}
+            onMouseLeave={() => this.setState({ mouseOver: false })}
+            onMouseEnter={() => {
+              this.setState({ mouseOver: true })
+            }}
+            onMouseOver={(e: any) => {
+              if (this.props.gettingStartedState.isCurrentStep('STEP4_CLICK_TEASER_STEP5')) {
+                this.props.nextStep()
+              }
+            }}
+          >
+            <div className='ma-16 tc pb-25'>
+              <div className='fw3 ma-38 f-38'>
+                You did it! Time to run an example.
+              </div>
+              <div className='fw2 f-16 mh-96 lh-1-4'>
+                You have successfully set up your own Instagram backend.{' '}
+                When building an app with Graphcool you can easily explore queries in the{' '}
+                playground and "copy &amp; paste" selected queries into your code.{' '}
+                Of course, to do so, you need to implement the frontend first.
+              </div>
+              <div className='fw2 f-16 mh-96 lh-1-4 mt-16'>
+                <div>We put together a simple app to show and add posts</div>
+                <div>using the backend you just built, to test and run it locally.</div>
+              </div>
+            </div>
+            <div className='ma-16 tc pb-25'>
+              <div className='fw3 ma-38 f-25'>
+                Select your preferred technology to download the example.
+              </div>
+              <div className='flex justify-between items-center w-100' ref='exampleAnchor'>
+                <div
+                  className={classnames(
+                    classes.exampleButton,
+                    selectedExample === 'ReactRelay' ? classes.active : '',
+                  )}
+                  onClick={() => this.props.selectExample('ReactRelay')}
+                >
+                  React + Relay
+                </div>
+                <div
+                  className={classnames(
+                    classes.exampleButton,
+                    selectedExample === 'ReactApollo' ? classes.active : '',
+                  )}
+                  onClick={() => this.props.selectExample('ReactApollo')}
+                >
+                  React + Apollo
+                </div>
+                <div
+                  className={classnames(
+                    classes.exampleButton,
+                    selectedExample === 'ReactNativeApollo' ? classes.active : '',
+                  )}
+                  onClick={() => this.props.selectExample('ReactNativeApollo')}
+                >
+                  React Native + Apollo
+                </div>
+                <div
+                  className={classnames(
+                    classes.exampleButton,
+                    selectedExample === 'AngularApollo' ? classes.active : '',
+                  )}
+                  onClick={() => this.props.selectExample('AngularApollo')}
+                >
+                  Angular + Apollo
+                </div>
+              </div>
+            </div>
+          {selectedExample &&
+          <div>
+            <div className='w-100'>
+              <iframe
+                className='w-100'
+                height='480'
+                allowFullScreen
+                frameBorder='0'
+                src={`https://www.youtube.com/embed/${this.getExampleVideoUrl(selectedExample)}`}
+              />
+            </div>
+            <div
+              className='w-100 pa-25'
+              style={{
+                backgroundColor: '#FEF5D2',
+              }}
+            >
+              <div className='mt-25 mb-38 w-100 flex justify-center'>
+                <a
+                  href={downloadUrl(selectedExample)}
+                  className='pa-16 white'
+                  style={{
+                    backgroundColor: '#4A90E2',
+                  }}
+                >
+                  Download example
+                </a>
+              </div>
+              <div className='code dark-gray'>
+                <div className='black-50'>
+                  # To see the example in action, run the following commands:
+                </div>
+                <div className='mv-16'>
+                  <div className='black'>
+                    npm install
+                  </div>
+                  <div className='black'>
+                    npm start
+                  </div>
+                </div>
+                <div className='black-50'>
+                  # You can now open the app on localhost:3000
+                </div>
+                <div className='black-50'>
+                  # Please come back to this page once you're done. We're waiting here. 💤
+                </div>
+                <div className={cx($p.w100, $p.flex, $p.flexRow, $p.justifyCenter, $p.mt25)}>
+                  <a href='#' onClick={
+                    (e: any) => {
+                      e.preventDefault()
+                      // we need to skip the 'STEP5_WAITING' step
+                      this.props.nextStep()
+                      this.props.nextStep()
+                      this.props.nextStep()
+                    }
+                  }>
+                    Skip
+                  </a>
+                </div>
+              </div>
+              {this.props.gettingStartedState.isCurrentStep('STEP5_WAITING') &&
+              <div className='w-100 mv-96 flex justify-center'>
+                <Loading />
+              </div>
+              }
+            </div>
+          </div>
+          }
+        {this.props.gettingStartedState.isCurrentStep('STEP5_DONE') &&
+          <div className='w-100 mb-96' ref='congratsAnchor'>
+            <div className='flex items-center flex-column pv-60 fw1'>
+              <div className='f-96'>
+                🎉
+              </div>
+              <div className='f-38 mt-38'>
+                Congratulations!
+              </div>
+              <div className='f-38 mt-16'>
+                We knew you had it in you.
+              </div>
+              <div className='f-16 mv-38'>
+                Now go out there and build amazing things!
+              </div>
+            </div>
+            <div className='flex justify-between ph-25 pv-16'>
+              <div className='w-50 pr-16'>
+                <div className='ttu ls-2 f-16 fw1 lh-1-4'>
+                  Get started on your own<br />with those excellent tutorials
+                </div>
+                <div className='mv-38'>
+                  {guides.map(guide => this.renderBox(guide))}
+                </div>
+              </div>
+              <div className='w-50 pl-16'>
+                <div className='ttu ls-2 f-16 fw1 lh-1-4'>
+                  Get more out of Graphcool<br />with our guides
+                </div>
+                <div className={`h-100 justify-start flex flex-column mv-38 ${classes.guides}`}>
+                  <a
+                    href='https://graph.cool/docs/tutorials/quickstart-2-daisheeb9x'
+                    className={`${classes.one} fw4 black db flex items-center mb-25`}
+                    target='_blank'
+                  >
+                    Declaring Relations
+                  </a>
+                  <a
+                    href='https://graph.cool/docs/tutorials/quickstart-3-saigai7cha'
+                    className={`${classes.two} fw4 black db flex items-center mb-25`}
+                    target='_blank'
+                  >
+                    Implementing Business Logic
+                  </a>
+                  <a
+                    href='https://graph.cool/docs/tutorials/thinking-in-terms-of-graphs-ahsoow1ool'
+                    target='_blank'
+                    className={`${classes.three} fw4 black db flex items-center mb-25`}
+                  >
+                    Thinking in terms of graphs
+                  </a>
+                </div>
+              </div>
+            </div>
+            <div className='flex w-100 justify-center'>
+              <div
+                className='f-25 mv-16 pv-16 ph-60 ls-1 ttu pointer bg-accent white dim'
+                onClick={this.props.nextStep}
+              >
+                Finish Onboarding
+              </div>
+            </div>
+          </div>
+          }
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  private renderBox = (tutorial: Tutorial) => {
+    return (
+      <div key={tutorial.title} className='pa-16 mb-16 lh-1-4' style={{background: 'rgba(0,0,0,0.03)'}}>
+        <a className='flex items-center' href={tutorial.link} target='_blank'>
+          <div className='flex items-center justify-center' style={{ flex: '0 0 60px', height: 60 }}>
+            <img src={tutorial.image}/>
+          </div>
+          <div className='flex flex-column space-between ml-38'>
+            <div className='mb-6 dark-gray f-16'>
+              {tutorial.title}
+            </div>
+            <div className='fw1 mid-gray'>
+              {tutorial.description}
+            </div>
+          </div>
+        </a>
+      </div>
+    )
+  }
+
+  private getExampleVideoUrl = (example: Example): string => {
+    switch (example) {
+      case 'ReactRelay': return '_dj9Os2ev4M'
+      case 'ReactApollo': return '9nlwyPUPXjQ'
+      case 'ReactNativeApollo': return '9nlwyPUPXjQ'
+      case 'AngularApollo': return 'EzD5fJ-uniI'
+    }
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    gettingStartedState: state.gettingStarted.gettingStartedState,
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return bindActionCreators({nextStep, selectExample}, dispatch)
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(withRouter(PlaygroundCPopup))

samples/TypeScript/react-native.tsx

@@ -0,0 +1,366 @@
+// Fixture taken from https://github.com/bgrieder/RNTSExplorer/blob/master/typescript/components/TextExample.ios.tsx
+
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * Typescript rewrite by Bruno Grieder
+ */
+
+'use strict'
+
+import * as React from 'react-native';
+import RNTSExample from '../RNTSExample'
+import RNTSExampleModule from '../RNTSExampleModule'
+
+const {
+          StyleSheet,
+          Text,
+          View,
+          } = React
+
+
+const styles = StyleSheet.create(
+    {
+        backgroundColorText: {
+            left:            5,
+            backgroundColor: 'rgba(100, 100, 100, 0.3)'
+        },
+        entity:              {
+            fontWeight: '500',
+            color:      '#527fe4',
+        },
+    }
+)
+
+class Entity extends React.Component<any,any> {
+    render() {
+        return (
+            <Text style={styles.entity}>
+                {this.props.children}
+            </Text>
+        )
+    }
+}
+
+interface AttrTogglerState {
+    fontWeight?: string
+    fontSize?: number
+}
+
+class AttributeToggler extends React.Component<any, AttrTogglerState> {
+    componentWillMount() {
+        this.setState(
+            {
+                fontWeight: '500',
+                fontSize:   15
+            }
+        )
+    }
+
+    private increaseSize = (): void => {
+        this.setState( {
+                           fontSize: this.state.fontSize + 1
+                       } )
+    }
+
+    render() {
+        const curStyle: React.TextStyle = { fontSize: this.state.fontSize }
+        return (
+            <Text>
+                <Text style={curStyle}>
+                    Tap the controls below to change attributes.
+                </Text>
+                <Text>
+                    See how it will even work on{' '}
+                    <Text style={curStyle}>
+                        this nested text
+                    </Text>
+                    <Text onPress={this.increaseSize}>
+                        {'>> Increase Size <<'}
+                    </Text>
+                </Text>
+            </Text>
+        )
+    }
+}
+
+export default {
+    title:       '<Text>',
+    description: 'Base component for rendering styled text.',
+    displayName: 'TextExample',
+    examples:    [
+                     {
+                         title:  'Wrap',
+                         render: function () {
+                             return (
+                                 <Text>
+                                     The text should wrap if it goes on multiple lines. See, this is going to
+                                     the next line.
+                                 </Text>
+                             )
+                         },
+                     },
+                     {
+                         title:  'Padding',
+                         render: function () {
+                             return (
+                                 <Text style={{padding: 10}}>
+                                     This text is indented by 10px padding on all sides.
+                                 </Text>
+                             )
+                         },
+                     },
+                     {
+                         title:  'Font Family',
+                         render: function () {
+                             return (
+                                 <View>
+                                     <Text style={{fontFamily: 'Cochin'}}>
+                                         Cochin
+                                     </Text>
+                                     <Text style={{fontFamily: 'Cochin', fontWeight: 'bold'}}>
+                                         Cochin bold
+                                     </Text>
+                                     <Text style={{fontFamily: 'Helvetica'}}>
+                                         Helvetica
+                                     </Text>
+                                     <Text style={{fontFamily: 'Helvetica', fontWeight: 'bold'}}>
+                                         Helvetica bold
+                                     </Text>
+                                     <Text style={{fontFamily: 'Verdana'}}>
+                                         Verdana
+                                     </Text>
+                                     <Text style={{fontFamily: 'Verdana', fontWeight: 'bold'}}>
+                                         Verdana bold
+                                     </Text>
+                                 </View>
+                             )
+                         },
+                     },
+                     {
+                         title:  'Font Size',
+                         render: function () {
+                             return (
+                                 <View>
+                                     <Text style={{fontSize: 23}}>
+                                         Size 23
+                                     </Text>
+                                     <Text style={{fontSize: 8}}>
+                                         Size 8
+                                     </Text>
+                                 </View>
+                             )
+                         },
+                     },
+                     {
+                         title:  'Color',
+                         render: function () {
+                             return (
+                                 <View>
+                                     <Text style={{color: 'red'}}>
+                                         Red color
+                                     </Text>
+                                     <Text style={{color: 'blue'}}>
+                                         Blue color
+                                     </Text>
+                                 </View>
+                             )
+                         },
+                     },
+                     {
+                         title:  'Font Weight',
+                         render: function () {
+                             return (
+                                 <View>
+                                     <Text style={{fontWeight: '100'}}>
+                                         Move fast and be ultralight
+                                     </Text>
+                                     <Text style={{fontWeight: '200'}}>
+                                         Move fast and be light
+                                     </Text>
+                                     <Text style={{fontWeight: 'normal'}}>
+                                         Move fast and be normal
+                                     </Text>
+                                     <Text style={{fontWeight: 'bold'}}>
+                                         Move fast and be bold
+                                     </Text>
+                                     <Text style={{fontWeight: '900'}}>
+                                         Move fast and be ultrabold
+                                     </Text>
+                                 </View>
+                             )
+                         },
+                     },
+                     {
+                         title:  'Font Style',
+                         render: function () {
+                             return (
+                                 <View>
+                                     <Text style={{fontStyle: 'normal'}}>
+                                         Normal text
+                                     </Text>
+                                     <Text style={{fontStyle: 'italic'}}>
+                                         Italic text
+                                     </Text>
+                                 </View>
+                             )
+                         },
+                     },
+                     {
+                         title:       'Nested',
+                         description: 'Nested text components will inherit the styles of their ' +
+                                      'parents (only backgroundColor is inherited from non-Text parents).  ' +
+                                      '<Text> only supports other <Text> and raw text (strings) as children.',
+                         render:      function () {
+                             return (
+                                 <View>
+                                     <Text>
+                                         (Normal text,
+                                         <Text style={{fontWeight: 'bold'}}>
+                                             (and bold
+                                             <Text style={{fontSize: 11, color: '#527fe4'}}>
+                                                 (and tiny inherited bold blue)
+                                             </Text>
+                                             )
+                                         </Text>
+                                         )
+                                     </Text>
+                                     <Text style={{fontSize: 12}}>
+                                         <Entity>Entity Name</Entity>
+                                     </Text>
+                                 </View>
+                             )
+                         },
+                     },
+                     {
+                         title:  'Text Align',
+                         render: function () {
+                             return (
+                                 <View>
+                                     <Text style={{textAlign: 'left'}}>
+                                         left left left left left left left left left left left left left left left
+                                     </Text>
+                                     <Text style={{textAlign: 'center'}}>
+                                         center center center center center center center center center center center
+                                     </Text>
+                                     <Text style={{textAlign: 'right'}}>
+                                         right right right right right right right right right right right right right
+                                     </Text>
+                                 </View>
+                             )
+                         },
+                     },
+                     {
+                         title:  'Spaces',
+                         render: function () {
+                             return (
+                                 <Text>
+                                     A {'generated'} {' '} {'string'} and    some &nbsp&nbsp&nbsp spaces
+                                 </Text>
+                             )
+                         },
+                     },
+                     {
+                         title:  'Line Height',
+                         render: function () {
+                             return (
+                                 <Text>
+                                     <Text style={{lineHeight: 35}}>
+                                         A lot of space between the lines of this long passage that should
+                                         wrap once.
+                                     </Text>
+                                 </Text>
+                             )
+                         },
+                     },
+                     {
+                         title:       'Empty Text',
+                         description: 'It\'s ok to have Text with zero or null children.',
+                         render:      function () {
+                             return (
+                                 <Text />
+                             )
+                         },
+                     },
+                     {
+                         title:  'Toggling Attributes',
+                         render: (): React.ReactElement<any> => {
+                             return <AttributeToggler />
+                         },
+                     },
+                     {
+                         title:       'backgroundColor attribute',
+                         description: 'backgroundColor is inherited from all types of views.',
+                         render:      function () {
+                             return (
+                                 <View style={{backgroundColor: 'yellow'}}>
+                                     <Text>
+                                         Yellow background inherited from View parent,
+                                         <Text style={{backgroundColor: '#ffaaaa'}}>
+                                             {' '}red background,
+                                             <Text style={{backgroundColor: '#aaaaff'}}>
+                                                 {' '}blue background,
+                                                 <Text>
+                                                     {' '}inherited blue background,
+                                                     <Text style={{backgroundColor: '#aaffaa'}}>
+                                                         {' '}nested green background.
+                                                     </Text>
+                                                 </Text>
+                                             </Text>
+                                         </Text>
+                                     </Text>
+                                 </View>
+                             )
+                         },
+                     },
+                     {
+                         title:  'containerBackgroundColor attribute',
+                         render: function () {
+                             return (
+                                 <View>
+                                     <View style={{flexDirection: 'row', height: 85}}>
+                                         <View style={{backgroundColor: '#ffaaaa', width: 150}}/>
+                                         <View style={{backgroundColor: '#aaaaff', width: 150}}/>
+                                     </View>
+                                     <Text style={[styles.backgroundColorText, {top: -80}]}>
+                                         Default containerBackgroundColor (inherited) + backgroundColor wash
+                                     </Text>
+                                     <Text style={[
+                                            styles.backgroundColorText,
+                                            {top: -70, containerBackgroundColor: 'transparent'}
+                                        ]}>
+                                         {"containerBackgroundColor: 'transparent' + backgroundColor wash"}
+                                     </Text>
+                                 </View>
+                             )
+                         },
+                     },
+                     {
+                         title:  'numberOfLines attribute',
+                         render: function () {
+                             return (
+                                 <View>
+                                     <Text numberOfLines={1}>
+                                         Maximum of one line no matter now much I write here. If I keep writing it{"'"}ll just truncate after one line
+                                     </Text>
+                                     <Text numberOfLines={2} style={{marginTop: 20}}>
+                                         Maximum of two lines no matter now much I write here. If I keep writing it{"'"}ll just truncate after two lines
+                                     </Text>
+                                     <Text style={{marginTop: 20}}>
+                                         No maximum lines specified no matter now much I write here. If I keep writing it{"'"}ll just keep going and going
+                                     </Text>
+                                 </View>
+                             )
+                         }
+                     } ] as RNTSExample[]
+} as RNTSExampleModule

samples/TypeScript/require.tsx

@@ -0,0 +1,240 @@
+// Fixture taken from https://github.com/jcingroup/C551608_Roki/blob/master/Work.WebProj/Scripts/src/tsx/m-parm.tsx
+
+import $ = require('jquery');
+import React = require('react');
+import ReactDOM = require('react-dom');
+import Moment = require('moment');
+import ReactBootstrap = require("react-bootstrap");
+import CommCmpt = require('comm-cmpt');
+import CommFunc = require('comm-func');
+
+namespace Parm {
+    interface ParamData {
+        Email?: string;
+        PurchaseTotal?: number;
+        HomoiothermyFee?: number;
+        RefrigerFee?: number;
+        AccountName?: string;
+        BankName?: string;
+        BankCode?: string;
+        AccountNumber?: string;
+        Fee?: number;
+    }
+    export class GridForm extends React.Component<any, { param?: ParamData }>{
+
+
+        constructor() {
+
+            super();
+            this.queryInitData = this.queryInitData.bind(this);
+            this.handleSubmit = this.handleSubmit.bind(this);
+            this.componentDidMount = this.componentDidMount.bind(this);
+            this.setInputValue = this.setInputValue.bind(this);
+            this.render = this.render.bind(this);
+            this.state = {
+                param: {
+                    Email: null,
+                    PurchaseTotal: 0,
+                    HomoiothermyFee: 0,
+                    RefrigerFee:0,
+                    AccountName: null,
+                    BankName: null,
+                    BankCode: null,
+                    AccountNumber: null,
+                    Fee: 0
+                }
+            }
+        }
+        static defaultProps = {
+            apiInitPath: gb_approot + 'Active/ParmData/aj_ParamInit',
+            apiPath: gb_approot + 'api/GetAction/PostParamData'
+        }
+        componentDidMount() {
+            this.queryInitData();
+        }
+        queryInitData() {
+            CommFunc.jqGet(this.props.apiInitPath, {})
+                .done((data, textStatus, jqXHRdata) => {
+                    this.setState({ param: data });
+                })
+                .fail((jqXHR, textStatus, errorThrown) => {
+                    CommFunc.showAjaxError(errorThrown);
+                });
+        }
+        handleSubmit(e: React.FormEvent) {
+
+            e.preventDefault();
+            CommFunc.jqPost(this.props.apiPath, this.state.param)
+                .done((data, textStatus, jqXHRdata) => {
+                    if (data.result) {
+                        CommFunc.tosMessage(null, '修改完成', 1);
+                    } else {
+                        alert(data.message);
+                    }
+                })
+                .fail((jqXHR, textStatus, errorThrown) => {
+                    CommFunc.showAjaxError(errorThrown);
+                });
+            return;
+        }
+        handleOnBlur(date) {
+
+        }
+        setInputValue(name: string, e: React.SyntheticEvent) {
+            let input: HTMLInputElement = e.target as HTMLInputElement;
+            let obj = this.state.param;
+            obj[name] = input.value;
+            this.setState({ param: obj });
+        }
+        render() {
+
+            var outHtml: JSX.Element = null;
+
+            let param = this.state.param;
+            let InputDate = CommCmpt.InputDate;
+
+            outHtml = (
+                <div>
+    <ul className="breadcrumb">
+        <li><i className="fa-list-alt"></i>
+            {this.props.menuName}
+            </li>
+        </ul>
+    <h4 className="title"> {this.props.caption} 基本資料維護</h4>
+    <form className="form-horizontal" onSubmit={this.handleSubmit}>
+        <div className="col-xs-12">
+            <div className="item-box">
+                {/*--email--*/}
+                <div className="item-title text-center">
+                <h5>Email信箱設定</h5>
+                    </div>
+                    <div className="alert alert-warning" role="alert">
+                        <ol>
+                            <li>多筆信箱請用「<strong className="text-danger">, </strong>」逗號分開。<br />ex.<strong>user1 @demo.com.tw, user2 @demo.com.tw</strong></li>
+                            <li>Email 前面可填收件人姓名，用「<strong className="text-danger">: </strong>」冒號分隔姓名和信箱，此項非必要，可省略。<br />ex.<strong>收件人A: user1 @demo.com.tw, 收件人B: user2 @demo.com.tw</strong></li>
+                            </ol>
+                        </div>
+                    <div className="form-group">
+                       <label className="col-xs-1 control-label">收件信箱</label>
+                       <div className="col-xs-9">
+                                <input className="form-control" type="text"
+                                    value={param.Email}
+                                    onChange={this.setInputValue.bind(this, 'Email') }
+                                    maxLength={500}
+                                    required/>
+                           </div>
+                        </div>
+                {/*--email end--*/}
+                {/*--shoppingCost--*/}
+                <div className="item-title text-center">
+                <h5>訂單運費設定</h5>
+                    </div>
+                    <div className="form-group">
+                       <label className="col-xs-3 control-label">會員下訂單，當訂單金額少於NT$</label>
+                       <div className="col-xs-1">
+                                <input className="form-control" type="number"
+                                    value={param.PurchaseTotal}
+                                    onChange={this.setInputValue.bind(this, 'PurchaseTotal') }
+                                    min={0}
+                                    required/>
+                           </div>
+                        <label className="col-xs-2 control-label">元時須付常溫運費NT$</label>
+                       <div className="col-xs-1">
+                                <input className="form-control" type="number"
+                                    value={param.HomoiothermyFee}
+                                    onChange={this.setInputValue.bind(this, 'HomoiothermyFee') }
+                                    min={0}
+                                    required/>
+                           </div>
+                        <label className="col-xs-2 control-label">元或冷凍(冷藏)運費NT$</label>
+                       <div className="col-xs-1">
+                                <input className="form-control" type="number"
+                                    value={param.RefrigerFee}
+                                    onChange={this.setInputValue.bind(this, 'RefrigerFee') }
+                                    min={0}
+                                    required/>
+                           </div>
+                        <label className="col-xs-1 control-label">元</label>
+                        </div>
+
+                {/*--shoppingCost end--*/}
+                {/*--Payment--*/}
+                <div className="item-title text-center">
+                <h5>付款方式</h5>
+                    </div>
+                    <div className="form-group">
+                     <label className="col-xs-4 control-label">當付款方式選擇『ATM轉帳』時，銀行帳號資料為: </label>
+                        </div>
+                    <div className="form-group">
+                       <label className="col-xs-2 control-label">戶名: </label>
+                       <div className="col-xs-3">
+                                <input className="form-control" type="text"
+                                    value={param.AccountName}
+                                    onChange={this.setInputValue.bind(this, 'AccountName') }
+                                    maxLength={16}
+                                    required/>
+                           </div>
+                        </div>
+                    <div className="form-group">
+                       <label className="col-xs-2 control-label">銀行: </label>
+                       <div className="col-xs-3">
+                                <input className="form-control" type="text"
+                                    value={param.BankName}
+                                    onChange={this.setInputValue.bind(this, 'BankName') }
+                                    maxLength={16}
+                                    required/>
+                           </div>
+                        </div>
+                    <div className="form-group">
+                       <label className="col-xs-2 control-label">代碼: </label>
+                       <div className="col-xs-3">
+                                <input className="form-control" type="text"
+                                    value={param.BankCode}
+                                    onChange={this.setInputValue.bind(this, 'BankCode') }
+                                    maxLength={5}
+                                    required/>
+                           </div>
+                        </div>
+                    <div className="form-group">
+                       <label className="col-xs-2 control-label">帳號: </label>
+                       <div className="col-xs-3">
+                                <input className="form-control" type="text"
+                                    value={param.AccountNumber}
+                                    onChange={this.setInputValue.bind(this, 'AccountNumber') }
+                                    maxLength={16}
+                                    required/>
+                           </div>
+                        </div>
+                    {/*<div className="form-group">
+                     <label className="col-xs-4 control-label">當付款方式選擇『貨到付款』時，須加NT$ </label>
+                       <div className="col-xs-1">
+                                <input className="form-control" type="number"
+                                    value={param.Fee}
+                                    onChange={this.setInputValue.bind(this, 'Fee') }
+                                    min={0}
+                                    required/>
+                           </div>
+                     <label className="control-label">元手續費</label>
+                        </div>*/}
+                {/*--Payment end--*/}
+                </div>
+
+
+
+            <div className="form-action">
+                <div className="col-xs-4 col-xs-offset-5">
+                    <button type="submit" className="btn-primary"><i className="fa-check"></i> 儲存</button>
+                    </div>
+                </div>
+            </div>
+        </form>
+                    </div>
+            );
+
+            return outHtml;
+        }
+    }
+}
+
+var dom = document.getElementById('page_content');
+ReactDOM.render(<Parm.GridForm caption={gb_caption} menuName={gb_menuname} iconClass="fa-list-alt" />, dom);

samples/TypeScript/triple-slash-reference.tsx

@@ -0,0 +1,863 @@
+/// <reference path="../DefinitelyTyped/react/react-global.d.ts" />
+
+// Fixture taken from https://github.com/RyanCavanaugh/koany/blob/master/koany.tsx
+
+interface Garden {
+	colors: Gardens.RockColor[];
+	shapes: Gardens.RockShape[];
+}
+
+namespace Gardens {
+	export enum RockShape {
+		Empty,
+		Circle,
+		Triangle,
+		Square,
+		Max
+	}
+	export const RockShapes = [RockShape.Circle, RockShape.Triangle, RockShape.Square];
+	export const RockShapesAndEmpty = RockShapes.concat(RockShape.Empty);
+
+	export enum RockColor {
+		Empty,
+		White,
+		Red,
+		Black,
+		Max
+	}
+	export const RockColors = [RockColor.White, RockColor.Red, RockColor.Black];
+	export const RockColorsAndEmpty = RockColors.concat(RockColor.Empty);
+
+	export const Size = 9;
+
+	// 012
+	// 345
+	// 678
+	export const adjacencies = [
+		[1, 3], [0, 4, 2], [1, 5],
+		[0, 4, 6], [3, 1, 7, 5], [2, 4, 8],
+		[3, 7], [6, 4, 8], [7, 5]
+	];
+}
+
+module Koan {
+	export enum DescribeContext {
+		// every "white stone" is ...
+		Singular,
+		// all "white stones" are
+		Plural,
+		// every stone in the top row is "white"
+		Adjectival
+	}
+
+	export enum PartType {
+		Selector,
+		Aspect
+	}
+
+	export enum StateTestResult {
+		Fail = 0,
+		WeakPass = 1,
+		Pass = 2
+	}
+
+	/// A general format for producing a Statement
+	export interface StatementTemplate<T> {
+		holes: PartType[];
+		describe(args: T): string;
+		test(g: Garden, args: T): StateTestResult;
+	}
+
+	/// A completed rule that can be used to test a Garden
+	export interface ProducedStatement<T> {
+		test(g: Garden): StateTestResult;
+		description: string;
+		children: T;
+
+		hasPassedAndFailed(): boolean;
+	}
+
+	function rnd(max: number) {
+		return Math.floor(Math.random() * max);
+	}
+
+	function randomColor(): Gardens.RockColor {
+		return Math.floor(Math.random() * (Gardens.RockColor.Max - 1)) + 1
+	}
+
+	function randomShape(): Gardens.RockShape {
+		return Math.floor(Math.random() * (Gardens.RockShape.Max - 1)) + 1
+	}
+
+	/* New Impl Here */
+	interface SelectorSpec<T> {
+		childTypes?: PartType[];
+		precedence: number;
+		weight: number;
+		test(args: T, g: Garden, index: number): string|number|boolean;
+		describe(args: T, context: DescribeContext): string;
+		isAllValues(values: Array<string>|Array<number>): boolean;
+	}
+
+	interface ProducedSelector {
+		test(g: Garden, index: number): string|number|boolean;
+		getDescription(plural: DescribeContext): string;
+		seenAllValues(): boolean;
+	}
+
+	export function buildSelector<T>(spec: SelectorSpec<T>, args: T): ProducedSelector {
+		let seenResults: { [s: string]: boolean;} = {};
+		return {
+			test: (g: Garden, index: number) => {
+				var result = spec.test(args, g, index);
+				seenResults[result + ''] = true;
+				return result;
+			},
+			getDescription: (context) => {
+				return spec.describe(args, context);
+			},
+			seenAllValues: () => {
+				return spec.isAllValues(Object.keys(seenResults));
+			}
+		}
+	}
+
+	export var SelectorTemplates: Array<SelectorSpec<{}>> = [];
+	module LetsMakeSomeSelectors {
+		// Is rock
+		SelectorTemplates.push({
+			test: (args, g, i) => g.colors[i] !== Gardens.RockColor.Empty,
+			describe: (args, context) => {
+				switch(context) {
+					case DescribeContext.Plural:
+						return 'Stones';
+					case DescribeContext.Adjectival:
+						return 'not empty';
+					case DescribeContext.Singular:
+						return 'Stone';
+				}
+			},
+			isAllValues: items => items.length === 2,
+			precedence: 0,
+			weight: 1
+		});
+
+		// Is of a certain color and/or shape
+		Gardens.RockColorsAndEmpty.forEach(color => {
+			let colorName = Gardens.RockColor[color];
+			let colorWeight = color === Gardens.RockColor.Empty ? 1 : 0.33;
+			Gardens.RockShapesAndEmpty.forEach(shape => {
+				let shapeName = Gardens.RockShape[shape];
+				let shapeWeight = shape === Gardens.RockShape.Empty ? 1 : 0.33;
+				SelectorTemplates.push({
+					test: (args, g, i) => {
+						if(color === Gardens.RockColor.Empty) {
+							if (shape === Gardens.RockShape.Empty) {
+								return g.colors[i] === Gardens.RockColor.Empty;
+							} else {
+								return g.shapes[i] === shape;
+							}
+						} else {
+							if (shape === Gardens.RockShape.Empty) {
+								return g.colors[i] === color;
+							} else {
+								return g.shapes[i] === shape && g.colors[i] === color;
+							}
+						}
+					},
+					describe: (args, context) => {
+						if(color === Gardens.RockColor.Empty) {
+							if (shape === Gardens.RockShape.Empty) {
+								switch(context) {
+									case DescribeContext.Plural:
+										return 'Empty Cells';
+									case DescribeContext.Adjectival:
+										return 'Empty';
+									case DescribeContext.Singular:
+										return 'Empty Cell';
+								}
+							} else {
+								switch(context) {
+									case DescribeContext.Plural:
+										return shapeName + 's';
+									case DescribeContext.Adjectival:
+										return 'a ' + shapeName;
+									case DescribeContext.Singular:
+										return shapeName;
+								}
+							}
+						} else {
+							if (shape === Gardens.RockShape.Empty) {
+								switch(context) {
+									case DescribeContext.Plural:
+										return colorName + ' Stones';
+									case DescribeContext.Adjectival:
+										return colorName;
+									case DescribeContext.Singular:
+										return colorName + ' Stone';
+								}
+							} else {
+								switch(context) {
+									case DescribeContext.Plural:
+										return colorName + ' ' + shapeName + 's';
+									case DescribeContext.Adjectival:
+										return 'a ' + colorName + ' ' + shapeName;
+									case DescribeContext.Singular:
+										return colorName + ' ' + shapeName;
+								}
+							}
+						}
+					},
+					isAllValues: items => items.length === 2,
+					precedence: 3,
+					weight: (shapeWeight + colorWeight === 2) ? 0.3 : shapeWeight * colorWeight
+				});
+			});
+		});
+
+		// [?] in the [top|middle|bottom] [row|column]
+		[0, 1, 2].forEach(rowCol => {
+			[true, false].forEach(isRow => {
+				var name = (isRow ? ['top', 'middle', 'bottom'] : ['left', 'middle', 'right'])[rowCol] + ' ' + (isRow ? 'row' : 'column');
+				var spec: SelectorSpec<[ProducedSelector]> = {
+					childTypes: [PartType.Selector],
+					test: (args, g, i) => {
+						var c = isRow ? Math.floor(i / 3) : i % 3;
+						if (c === rowCol) {
+							return args[0].test(g, i);
+						} else {
+							return false;
+						}
+					},
+					describe: (args, plural) => args[0].getDescription(plural) + ' in the ' + name,
+					isAllValues: items => items.length === 2,
+					precedence: 4,
+					weight: 1 / 6
+				};
+				SelectorTemplates.push(spec);
+			});
+		});
+
+		// [?] next to a [?]
+		SelectorTemplates.push({
+			childTypes: [PartType.Selector, PartType.Selector],
+			test: (args, g, i) => {
+				if (args[0].test(g, i)) {
+					return Gardens.adjacencies[i].some(x => !!args[1].test(g, x));
+				} else {
+					return false;
+				}
+			},
+			describe: (args, plural) => {
+				return args[0].getDescription(plural) + ' next to a ' + args[1].getDescription(DescribeContext.Singular);
+			},
+			isAllValues: items => items.length === 2,
+			precedence: 4,
+			weight: 1
+		} as SelectorSpec<[ProducedSelector, ProducedSelector]>);
+	}
+
+	export function buildStatement<T>(s: StatementTemplate<T>, args: T): ProducedStatement<T> {
+		let hasPassed = false;
+		let hasFailed = false;
+
+		let result: ProducedStatement<T> = {
+			children: args,
+			description: s.describe(args),
+			test: (g) => {
+				let r = s.test(g, args);
+				if (r === StateTestResult.Pass) {
+					hasPassed = true;
+				} else if(r === StateTestResult.Fail) {
+					hasFailed = true;
+				}
+				return r;
+			},
+			hasPassedAndFailed: () => {
+				return hasPassed && hasFailed && (args as any as ProducedSelector[]).every(c => c.seenAllValues());
+			}
+		};
+		return result;
+	}
+
+	export let StatementList: StatementTemplate<any>[] = [];
+	module LetsMakeSomeStatements {
+		// Every [?] is a [?]
+		StatementList.push({
+			holes: [PartType.Selector, PartType.Selector],
+			test: (g: Garden, args: [ProducedSelector, ProducedSelector]) => {
+				let didAnyTests = false;
+				for (var i = 0; i < Gardens.Size; i++) {
+					if (args[0].test(g, i)) {
+						if(!args[1].test(g, i)) return StateTestResult.Fail;
+						didAnyTests = true;
+					}
+				}
+				return didAnyTests ? StateTestResult.Pass : StateTestResult.WeakPass;
+			},
+			describe: args => {
+				return 'Every ' + args[0].getDescription(DescribeContext.Singular) + ' is ' + args[1].getDescription(DescribeContext.Adjectival);
+			}
+		});
+
+		// There is exactly 1 [?]
+		StatementList.push({
+			holes: [PartType.Selector],
+			test: (g: Garden, args: [ProducedSelector, ProducedSelector]) => {
+				var count = 0;
+				for (var i = 0; i < Gardens.Size; i++) {
+					if (args[0].test(g, i)) count++;
+				}
+
+				return count === 1 ? StateTestResult.Pass : StateTestResult.Fail;
+			},
+			describe: args => {
+				return 'There is exactly one ' + args[0].description;
+			}
+		});
+
+		// There are more [?] than [?]
+		StatementList.push({
+			holes: [PartType.Selector, PartType.Selector],
+			test: (g: Garden, args: [ProducedSelector, ProducedSelector]) => {
+				var p1c = 0, p2c = 0;
+				for (var i = 0; i < Gardens.Size; i++) {
+					if (args[0].test(g, i)) p1c++;
+					if (args[1].test(g, i)) p2c++;
+				}
+				if(p1c > p2c && p2c > 0) {
+					return StateTestResult.Pass;
+				} else if(p1c > p2c) {
+					return StateTestResult.WeakPass;
+				} else {
+					return StateTestResult.Fail;
+				}
+			},
+			describe: args => {
+				return 'There are more ' + args[0].descriptionPlural + ' than ' + args[1].descriptionPlural;
+			}
+		});
+	}
+
+	function randomElementOf<T>(arr: T[]): T {
+		if (arr.length === 0) {
+			return undefined;
+		} else {
+			return arr[Math.floor(Math.random() * arr.length)];
+		}
+	}
+
+	function randomWeightedElementOf<T extends { weight: number }>(arr: T[]): T {
+		var totalWeight = arr.reduce((acc, v) => acc + v.weight, 0);
+		var rnd = Math.random() * totalWeight;
+		for (var i = 0; i < arr.length; i++) {
+			rnd -= arr[i].weight;
+			if (rnd <= 0) return arr[i];
+		}
+		// Got destroyed by floating error, just try again
+		return randomWeightedElementOf(arr);
+	}
+
+	export function buildRandomNewSelector(maxPrecedence = 1000000): ProducedSelector {
+		var choices = SelectorTemplates;
+
+		let initial = randomWeightedElementOf(choices.filter(p => p.precedence <= maxPrecedence));
+		// Fill in the holes
+		if (initial.childTypes) {
+			var fills = initial.childTypes.map(h => {
+				if (h === PartType.Selector) {
+					return buildRandomNewSelector(initial.precedence - 1);
+				} else {
+					throw new Error('Only know how to fill Selector holes')
+				}
+			});
+			return buildSelector(initial, fills);
+		} else {
+			return buildSelector(initial, []);
+		}
+	}
+
+	export function makeEmptyGarden(): Garden {
+		var g = {} as Garden;
+		g.colors = [];
+		g.shapes = [];
+		for (var i = 0; i < Gardens.Size; i++) {
+			g.colors.push(Gardens.RockColor.Empty);
+			g.shapes.push(Gardens.RockShape.Empty);
+		}
+
+		return g;
+	}
+
+	export function gardenToString(g: Garden): string {
+		return g.colors.join('') + g.shapes.join('');
+	}
+
+	export function makeRandomGarden(): Garden {
+		var g = makeEmptyGarden();
+		blitRandomGardenPair(g, g);
+		return g;
+	}
+
+	export function cloneGarden(g: Garden): Garden {
+		var result: Garden = {
+			colors: g.colors.slice(0),
+			shapes: g.shapes.slice(0)
+		};
+		return result;
+	}
+
+	export function clearGarden(g: Garden) {
+		for (var i = 0; i < Gardens.Size; i++) {
+			g.colors[i] = Gardens.RockColor.Empty;
+			g.shapes[i] = Gardens.RockShape.Empty;
+		}
+	}
+
+	export function blitRandomGardenPair(g1: Garden, g2: Garden): void {
+		let placeCount = 0;
+		for (var i = 0; i < Gardens.Size; i++) {
+			if (rnd(7) === 0) {
+				g1.colors[i] = g2.colors[i] = randomColor();
+				g1.shapes[i] = g2.shapes[i] = randomShape();
+			} else {
+				placeCount++;
+				g1.colors[i] = g2.colors[i] = Gardens.RockColor.Empty;
+				g1.shapes[i] = g2.shapes[i] = Gardens.RockShape.Empty;
+			}
+		}
+		if (placeCount === 0) blitRandomGardenPair(g1, g2);
+	}
+
+	export function blitNumberedGarden(g: Garden, stoneCount: number, n: number): void {
+		clearGarden(g);
+
+		let cellNumbers = [0, 1, 2, 3, 4, 5, 6, 7, 8];
+		for (let i = 0; i < stoneCount; i++) {
+			let cellNum = getValue(cellNumbers.length);
+			let cell = cellNumbers.splice(cellNum, 1)[0];
+			g.colors[cell] = getValue(3) + 1;
+			g.shapes[cell] = getValue(3) + 1;
+		}
+
+		function getValue(max: number) {
+			let result = n % max;
+			n = (n - result) / max;
+			return result;
+		}
+	}
+
+	export function mutateGarden(g: Garden): void {
+		while (true) {
+			var op = rnd(5);
+			let x = rnd(Gardens.Size);
+			let y = rnd(Gardens.Size);
+			switch (op) {
+				case 0: // Swap two non-identical cells
+					if (g.colors[x] !== g.colors[y] || g.shapes[x] !== g.shapes[y]) {
+						var tmp: any = g.colors[x];
+						g.colors[x] = g.colors[y];
+						g.colors[y] = tmp;
+						tmp = g.shapes[x];
+						g.shapes[x] = g.shapes[y];
+						g.shapes[y] = tmp;
+						return;
+					}
+					break;
+				case 1: // Add a stone
+					if (g.colors[x] === Gardens.RockColor.Empty) {
+						g.colors[x] = randomColor();
+						g.shapes[x] = randomShape();
+						return;
+					}
+					break;
+				case 2: // Remove a stone
+					if (g.colors.filter(x => x !== Gardens.RockColor.Empty).length === 1) continue;
+
+					if (g.colors[x] !== Gardens.RockColor.Empty) {
+						g.colors[x] = Gardens.RockColor.Empty;
+						g.shapes[x] = Gardens.RockShape.Empty;
+						return;
+					}
+					break;
+				case 3: // Change a color
+					let c = randomColor();
+					if (g.colors[x] !== Gardens.RockColor.Empty && g.colors[x] !== c) {
+						g.colors[x] = c;
+						return;
+					}
+					break;
+				case 4: // Change a shape
+					let s = randomShape();
+					if (g.shapes[x] !== Gardens.RockShape.Empty && g.shapes[x] !== s) {
+						g.shapes[x] = s;
+						return;
+					}
+					break;
+			}
+		}
+	}
+}
+
+class Indexion {
+	sizes: number[];
+	constructor(...sizes: number[]) {
+		this.sizes = sizes;
+	}
+
+	public getValues(index: number): number[] {
+		let result = new Array<number>(this.sizes.length);
+		this.fillValues(index, result);
+		return result;
+	}
+
+	public fillValues(index: number, result: number[]): void {
+		for (var i = 0; i < this.sizes.length; i++) {
+			result[i] = index % this.sizes[i];
+			index -= result[i];
+			index /= this.sizes[i];
+		}
+	}
+
+	public valuesToIndex(values: number[]): number {
+		var result = 0;
+		var factor = 1;
+		for (var i = 0; i < this.sizes.length; i++) {
+			result += values[i] * this.sizes[i] * factor;
+			factor *= this.sizes[i];
+		}
+		return result;
+	}
+
+	public getAdjacentIndices(index: number): number[][] {
+		var baseline = this.getValues(index);
+		var results: number[][] = [];
+		for (var i = 0; i < this.sizes.length; i++) {
+			if(baseline[i] > 0) {
+				baseline[i]--;
+				results.push(baseline.slice());
+				baseline[i]++;
+			}
+			if(baseline[i] < this.sizes[i] - 1) {
+				baseline[i]++;
+				results.push(baseline.slice());
+				baseline[i]--;
+			}
+		}
+		return results;
+	}
+
+	public distance(index1: number, index2: number): number {
+		let delta = 0;
+		for (var i = 0; i < this.sizes.length; i++) {
+			var a = index1 % this.sizes[i];
+			var b = index2 % this.sizes[i];
+			delta += Math.abs(b - a);
+			index1 -= a;
+			index2 -= b;
+			index1 /= this.sizes[i];
+			index2 /= this.sizes[i];
+		}
+		return delta;
+	}
+}
+
+
+function makeNewExample() {
+	while (true) {
+		var p1 = Koan.buildSelector(Koan.SelectorTemplates[12], []);
+		var p2 = Koan.buildSelector(Koan.SelectorTemplates[14], []);
+		var test = Koan.buildStatement(Koan.StatementList[0], [p1, p2]);
+
+		var examples: Garden[] = [];
+
+		console.log('Attempt to generate examples for "' + test.description + '"');
+
+		var maxGarden = /*(9 * 9) + (9 * 9 * 9 * 8) + */(9 * 9 * 9 * 8 * 9 * 7);
+		let g = Koan.makeEmptyGarden();
+		let passCount = 0, failCount = 0;
+		let resultLookup: boolean[] = [];
+		let lastResult: boolean = undefined;
+		for (var i = 0; i < maxGarden; i++) {
+			Koan.blitNumberedGarden(g, 3, i);
+			let result = test.test(g);
+			if(result === Koan.StateTestResult.Pass) {
+				resultLookup[i] = true;
+				passCount++;
+
+				if (lastResult !== true && examples.length < 10) examples.push(Koan.cloneGarden(g));
+				lastResult = true;
+			} else if (result === Koan.StateTestResult.Fail) {
+				resultLookup[i] = false;
+				failCount++;
+
+				if (lastResult !== false && examples.length < 10) examples.push(Koan.cloneGarden(g));
+				lastResult = false;
+			}
+
+			if (examples.length === 10) break;
+		}
+
+		console.log('Rule passes ' + passCount + ' and fails ' + failCount);
+
+		/*
+		if (!test.hasPassedAndFailed()) {
+			console.log('Rule has unreachable, contradictory, or tautological clauses');
+			continue;
+		}
+
+		if (passCount === 0 || failCount === 0) {
+			console.log('Rule is always true or always false');
+			continue;
+		}
+		*/
+
+		var h = document.createElement('h2');
+		h.innerText = test.description;
+		document.body.appendChild(h);
+
+		return { test: test, examples: examples };
+	}
+}
+
+let list: Garden[] = [];
+let test: Koan.ProducedStatement<any>;
+window.onload = function() {
+	let rule = makeNewExample();
+	let garden = Koan.makeRandomGarden();
+	list = rule.examples;
+	test = rule.test;
+
+	function renderList() {
+		function makeGarden(g: Garden, i: number) {
+			return <GardenDisplay
+				garden={g}
+				key={i + Koan.gardenToString(g)}
+				test={test}
+				leftButton='✗'
+				rightButton='✎'
+				onLeftButtonClicked={() => {
+					console.log(list.indexOf(g));
+					list.splice(list.indexOf(g), 1);
+					renderList();
+				}}
+				onRightButtonClicked={() => {
+					garden = g;
+					renderEditor();
+				}}
+			/>;
+		}
+		let gardenList = <div>{list.map(makeGarden)}</div>;
+		React.render(gardenList, document.getElementById('results'));
+	}
+
+	let i = 0;
+	function renderEditor() {
+		i++;
+		let editor = <GardenEditor key={i} test={rule.test} garden={garden} onSaveClicked={(garden) => {
+			list.push(garden);
+			renderList();
+		}} />;
+		React.render(editor, document.getElementById('editor'));
+	}
+
+	renderList();
+	renderEditor();
+}
+
+function classNames(nameMap: any): string {
+	return Object.keys(nameMap).filter(k => nameMap[k]).join(' ');
+}
+
+interface GardenCellProps extends React.Props<{}> {
+	color: Gardens.RockColor;
+	shape: Gardens.RockShape;
+	index: number;
+
+	movable?: boolean;
+	onEdit?(newColor: Gardens.RockColor, newShape: Gardens.RockShape): void;
+}
+interface GardenCellState {
+	isDragging?: boolean;
+}
+class GardenCell extends React.Component<GardenCellProps, GardenCellState> {
+	state: GardenCellState = {};
+	ignoreNextEdit = false;
+
+	render() {
+		var classes = ['cell', 'index_' + this.props.index];
+
+		if (this.state.isDragging) {
+			// Render as blank
+		} else {
+			classes.push(Gardens.RockColor[this.props.color], Gardens.RockShape[this.props.shape]);
+		}
+
+		if (this.props.movable) classes.push('movable');
+		let events: React.HTMLAttributes = {
+			onDragStart: (e) => {
+				this.ignoreNextEdit = false;
+				e.dataTransfer.dropEffect = 'copyMove';
+				e.dataTransfer.effectAllowed = 'move';
+				e.dataTransfer.setData('shape', this.props.shape.toString());
+				e.dataTransfer.setData('color', this.props.color.toString());
+
+				let drag = document.getElementById(getGardenName(this.props.color, this.props.shape));
+				let xfer: any = (e.nativeEvent as DragEvent).dataTransfer;
+				xfer.setDragImage(drag, drag.clientWidth * 0.5, drag.clientHeight * 0.5);
+
+				this.setState({ isDragging: true });
+			},
+			onDragEnter: (e) => {
+				e.dataTransfer.dropEffect = 'move';
+				e.preventDefault();
+			},
+			onDragOver: (e) => {
+				e.dataTransfer.dropEffect = 'move';
+				e.preventDefault();
+			},
+			onDragEnd: (e) => {
+				this.setState({ isDragging: false });
+				if (!this.ignoreNextEdit) {
+					this.props.onEdit && this.props.onEdit(undefined, undefined);
+				}
+			},
+			draggable: true
+		}
+
+		let handleDrop = (event: React.DragEvent) => {
+			if(this.props.onEdit) {
+				if (this.state.isDragging) {
+					// Dragged to self, don't do anything
+					this.ignoreNextEdit = true;
+				} else {
+					let shape: Gardens.RockShape = +event.dataTransfer.getData('shape');
+					let color: Gardens.RockColor = +event.dataTransfer.getData('color');
+					this.props.onEdit(color, shape);
+				}
+			}
+		}
+
+		return <span className={classes.join(' ')} onDrop={handleDrop} {...this.props.movable ? events : {}} />;
+	}
+}
+
+interface GardenDisplayProps extends React.Props<GardenDisplay> {
+	garden?: Garden;
+	test?: Koan.ProducedStatement<any>;
+
+	leftButton?: string;
+	rightButton?: string;
+	onLeftButtonClicked?(): void;
+	onRightButtonClicked?(): void;
+
+	editable?: boolean;
+	onChanged?(newGarden: Garden): void;
+}
+interface GardenDisplayState {
+	garden?: Garden;
+}
+class GardenDisplay extends React.Component<GardenDisplayProps, GardenDisplayState> {
+	state = {
+		garden: Koan.cloneGarden(this.props.garden)
+	};
+
+	leftClicked = () => {
+		this.props.onLeftButtonClicked && this.props.onLeftButtonClicked();
+	};
+
+	rightClicked = () => {
+		this.props.onRightButtonClicked && this.props.onRightButtonClicked();
+	};
+
+	render() {
+		let g = this.state.garden;
+		let pass = (this.props.test && this.props.test.test(this.state.garden));
+
+		let classes = {
+			garden: true,
+			unknown: pass === undefined,
+			pass: pass === Koan.StateTestResult.Pass || pass === Koan.StateTestResult.WeakPass,
+			fail: pass === Koan.StateTestResult.Fail,
+			editable: this.props.editable
+		};
+
+		var children = g.colors.map((_, i) => (
+			<GardenCell
+				key={i}
+				color={g.colors[i]}
+				shape={g.shapes[i]}
+				index={i}
+				movable={this.props.editable}
+				onEdit={(newColor, newShape) => {
+					if(this.props.editable) {
+						let newGarden = Koan.cloneGarden(this.state.garden);
+						newGarden.colors[i] = newColor;
+						newGarden.shapes[i] = newShape;
+						this.setState({ garden: newGarden });
+						this.props.onChanged && this.props.onChanged(newGarden);
+					}
+				}}
+			/>));
+
+		return <div className="gardenDisplay">
+			<div className={classNames(classes)}>{children}</div>
+			<span className="infoRow">
+				{this.props.leftButton && <div className="button left" onClick={this.leftClicked}>{this.props.leftButton}</div>}
+				<div className={"passfail " + (pass ? 'pass' : 'fail')}>{pass ? '✓' : '🚫'}</div>
+				{this.props.rightButton && <div className="button right" onClick={this.rightClicked}>{this.props.rightButton}</div>}
+			</span>
+		</div>;
+	}
+}
+
+interface GardenEditorProps extends React.Props<GardenEditor> {
+	onSaveClicked?(garden: Garden): void;
+	test?: Koan.ProducedStatement<any>;
+	garden?: Garden;
+}
+interface GardenEditorState {
+	garden?: Garden;
+	pass?: boolean;
+}
+class GardenEditor extends React.Component<GardenEditorProps, {}> {
+	state = { garden: this.props.garden };
+
+	save = () => {
+		this.props.onSaveClicked && this.props.onSaveClicked(this.state.garden);
+	};
+
+	render() {
+		return <div className="editor">
+			<GardenDisplay garden={this.state.garden} test={this.props.test} editable onChanged={g => this.setState({ garden: g }) } />
+			<StonePalette />
+			<div className="button save" onClick={this.save}>{'💾'}</div>
+		</div>;
+	}
+}
+
+class StonePalette extends React.Component<{}, {}> {
+	render() {
+		let items: JSX.Element[] = [];
+		Gardens.RockColors.forEach(color => {
+			Gardens.RockShapes.forEach(shape => {
+				let name = getGardenName(color, shape);
+				let extraProps = { id: name, key: name };
+				let index = items.length;
+				items.push(<GardenCell
+					color={color}
+					shape={shape}
+					index={index}
+					movable
+					{...extraProps} />)
+			});
+		});
+		return <div className="palette">{items}</div>;
+	}
+}
+
+function getGardenName(color: Gardens.RockColor, shape: Gardens.RockShape) {
+	return 'draggable.' + Gardens.RockShape[shape] + '.' + Gardens.RockColor[color];
+}
+
+

samples/TypeScript/tsxAttributeResolution9.tsx

@@ -1,27 +0,0 @@
-//@jsx: preserve
-//@module: amd
-
-//@filename: react.d.ts
-declare module JSX {
-	interface Element { }
-	interface IntrinsicElements {
-	}
-	interface ElementAttributesProperty {
-		props;
-	}
-}
-
-interface Props {  
-  foo: string;
-}
-
-//@filename: file.tsx
-export class MyComponent {  
-  render() {
-  }
-
-  props: { foo: string; }
-}
-
-<MyComponent foo="bar" />; // ok  
-<MyComponent foo={0} />; // should be an error

samples/XML/wixdemo.wixproj

@@ -0,0 +1,25 @@
+<Project DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+	<PropertyGroup>
+			<Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
+			<Platform Condition=" '$(Platform)' == '' ">x86</Platform>
+			<ProductVersion>3.0</ProductVersion>
+			<ProjectGuid>{c523055d-a9d0-4318-ae85-ec934d33204b}</ProjectGuid>
+			<SchemaVersion>2.0</SchemaVersion>
+			<OutputName>WixProject1</OutputName>
+			<OutputType>Package</OutputType>
+			<WixTargetsPath Condition=" '$(WixTargetsPath)' == '' ">$(MSBuildExtensionsPath)\Microsoft\WiX\v[[Version.Major]].x\Wix.targets</WixTargetsPath>
+	</PropertyGroup>
+	<PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|x86' ">
+			<OutputPath>bin\$(Configuration)\</OutputPath>
+			<IntermediateOutputPath>obj\$(Configuration)\</IntermediateOutputPath>
+			<DefineConstants>Debug</DefineConstants>
+	</PropertyGroup>
+	<PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|x86' ">
+			<OutputPath>bin\$(Configuration)\</OutputPath>
+			<IntermediateOutputPath>obj\$(Configuration)\</IntermediateOutputPath>
+	</PropertyGroup>
+	<ItemGroup>
+			<Compile Include="Product.wxs" />
+	</ItemGroup>
+	<Import Project="$(WixTargetsPath)" />
+</Project>

script/fast-submodule-update

@@ -51,7 +51,7 @@ SUBMODULES.partition { |submodule| SLOW_SUBMODULES.include?(submodule) }.flatten
   submodules.push(submodule)
 end
 
-8.times do
+(ARGV.first || 8).to_i.times do
   Thread.new { run_thread(submodules, results) }
 end
 

test/fixtures/Data/yarn.lock

@@ -0,0 +1,9 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+abab@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.3.tgz#b81de5f7274ec4e756d797cd834f303642724e5d"
+
+abbrev@1, abbrev@1.0.x:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"

test/test_classifier.rb

@@ -53,4 +53,8 @@ class TestClassifier < Minitest::Test
       assert_equal language.name, results.first[0], "#{sample[:path]}\n#{results.inspect}"
     end
   end
+
+  def test_classify_empty_languages
+    assert_equal [], Classifier.classify(Samples.cache, fixture("Ruby/foo.rb"), [])
+  end
 end

test/test_generated.rb

@@ -79,6 +79,9 @@ class TestGenerated < Minitest::Test
     generated_fixture_loading_data("Data/sourcemap.v3.map")
     generated_fixture_loading_data("Data/sourcemap.v1.map")
 
+    # Yarn locfile
+    generated_fixture_loading_data("Data/yarn.lock")
+
     # Specflow
     generated_fixture_without_loading_data("Features/BindingCulture.feature.cs")
 

test/test_grammars.rb

@@ -13,36 +13,37 @@ class TestGrammars < Minitest::Test
   HASH_WHITELIST = [
     "bc12b3b4917eab9aedb87ec1305c2a4376e34fd1", # TextMate bundles
     "16c4748566b3dd996594af0410a1875b22d3a2b3", # language-yaml and atom-salt
-    "ebae2d87e06d3acef075d049fcfc8958c0364863", # go-tmbundle
     "ff21db2554d69d78b2220db5615b16bbba0788d3", # factor
-    "b9a7428fd036eed8503995e06e989180c276b17d", # jflex.tmbundle
+    "b4381ebae3235e91aaf5ccab1e8e94e9ad4faef4", # jflex.tmbundle
     "da39a3ee5e6b4b0d3255bfef95601890afd80709", # SCSS.tmbundle
-    "5f772ff20ddf3dbac1ec9b6a98c5aa50ace555b2", # gradle.tmbundle
     "b5432a1e1055de7eeede2dddf91e009480651fd6", # jasmin-sublime
-    "74143c4d2a5649eb179105afcb37f466558c22ce", # language-clojure
-    "760471435f5ab0b9dc99a628203cd8f9156d28ce", # language-coffee-script
+    "170b35df61879139b88379a8f1bfd86289c13599", # language-clojure
+    "60e1fe192238a032341d5dd3cd80535459fc84e4", # language-coffee-script
     "94fbd554ec1837fb7c508fd7425326639c3f4103", # language-csharp
     "70fb557a431891c2d634c33fa7367feab5066fd6", # language-javascript
-    "e0528c23cd967f999e058f1408ccb5b7237daaba", # language-python
     "8653305b358375d0fced85dc24793b99919b11ef", # language-shellscript
     "9f0c0b0926a18f5038e455e8df60221125fc3111", # elixir-tmbundle
-    "90af581219debd4e90ef041b46c294e8b4ae6d14", # mako-tmbundle
+    "a4dadb2374282098c5b8b14df308906f5347d79a", # mako-tmbundle
     "b9b24778619dce325b651f0d77cbc72e7ae0b0a3", # Julia.tmbundle
     "e06722add999e7428048abcc067cd85f1f7ca71c", # r.tmbundle
     "50b14a0e3f03d7ca754dac42ffb33302b5882b78", # smalltalk-tmbundle
     "eafbc4a2f283752858e6908907f3c0c90188785b", # gap-tmbundle
-    "1faa3a44cac6070f22384332434af37dfaaf2f70", # Stylus
+    "22b3bf41b9e3e8c22357ee12265f149d68aae60a", # Stylus
     "c87e7e574fca543941650e5b0a144b44c02c55d8", # language-crystal
-    "c78ec142ac3126cf639cfd67bd646ed8226d8b74", # atom-language-purescript
-    "341d7f66806fc41d081133d6e51ade856352e056", # FreeMarker.tmbundle
+    "ace112feb693358db2970d0805f6894b745e14b5", # atom-language-purescript
+    "a626362e3efd030c1d97c0faf422cf8c2dfaea54", # FreeMarker.tmbundle
     "15a394f6bc43400946570b299aee8ae264a1e3ff", # language-renpy
-    "8ccf886749c32fb7e65d4d1316a7ed0479c93dc9", # language-less
+    "74bb588102e8f332970a0fcabe36299e0806f130", # language-less
     "2f03492b52d7dd83b4e7472f01b87c6121e5b1a4", # monkey
-    "241e5ddbb4423d792216783e9f668bd670b026e4", # ant.tmbundle
+    "784da5ce445892bc3e26beeb6a4402bbc5ca997e", # ant.tmbundle
     "bdab9fdc21e6790b479ccb5945b78bc0f6ce2493", # language-blade
-    "81711c69aa40135de7266c88b2f6ab28dbc1d81e", # atom-language-perl6
-    "808e27f5e44167113198d277f47926c5d482eac8", # atom-language-rust
+    "c9118c370411f2f049c746c0fd096554e877aea2", # atom-language-perl6
+    "15a502335012f27f8a5991139298edb87a6e467d", # atom-language-rust
     "304be6184f7f344d44a1d13bddf511019624fd22", # language-css
+    "8c538244ba88ef9902a4faf11a2b9acec46f2a4e", # sublime-nginx
+    "82c356d6ecb143a8a20e1658b0d6a2d77ea8126f", # idl.tmbundle
+    "9dafd4e2a79cb13a6793b93877a254bc4d351e74", # sublime-text-ox
+    "8e111741d97ba2e27b3d18a309d426b4a37e604f", # sublime-varnish
   ].freeze
 
   # List of allowed SPDX license names

test/test_heuristics.rb

@@ -264,4 +264,11 @@ class TestHeuristcs < Minitest::Test
       "XML" => all_fixtures("XML", "*.ts")
     })
   end
+
+  def test_tsx_by_heuristics
+    assert_heuristics({
+      "TypeScript" => all_fixtures("TypeScript", "*.tsx"),
+      "XML" => all_fixtures("XML", "*.tsx")
+    })
+  end
 end

vendor/README.md

@@ -84,7 +84,7 @@ This is a list of grammars that Linguist selects to provide syntax highlighting
 - **D-ObjDump:** [nanoant/assembly.tmbundle](https://github.com/nanoant/assembly.tmbundle)
 - **Dart:** [guillermooo/dart-sublime-bundle](https://github.com/guillermooo/dart-sublime-bundle)
 - **desktop:** [Mailaender/desktop.tmbundle](https://github.com/Mailaender/desktop.tmbundle)
-- **Diff:** [kivikakk/diff.tmbundle](https://github.com/kivikakk/diff.tmbundle)
+- **Diff:** [textmate/diff.tmbundle](https://github.com/textmate/diff.tmbundle)
 - **DM:** [PJB3005/atomic-dreams](https://github.com/PJB3005/atomic-dreams)
 - **DNS Zone:** [sixty4k/st2-zonefile](https://github.com/sixty4k/st2-zonefile)
 - **Dockerfile:** [asbjornenge/Docker.tmbundle](https://github.com/asbjornenge/Docker.tmbundle)
@@ -136,19 +136,20 @@ This is a list of grammars that Linguist selects to provide syntax highlighting
 - **Graphviz (DOT):** [textmate/graphviz.tmbundle](https://github.com/textmate/graphviz.tmbundle)
 - **Groovy:** [textmate/groovy.tmbundle](https://github.com/textmate/groovy.tmbundle)
 - **Groovy Server Pages:** [textmate/java.tmbundle](https://github.com/textmate/java.tmbundle)
-- **Hack:** [textmate/php.tmbundle](https://github.com/textmate/php.tmbundle)
+- **Hack:** [brandonblack/php.tmbundle](https://github.com/brandonblack/php.tmbundle)
 - **Haml:** [ezekg/language-haml](https://github.com/ezekg/language-haml)
 - **Handlebars:** [daaain/Handlebars](https://github.com/daaain/Handlebars)
 - **Harbour:** [hernad/atom-language-harbour](https://github.com/hernad/atom-language-harbour)
 - **Haskell:** [atom-haskell/language-haskell](https://github.com/atom-haskell/language-haskell)
 - **Haxe:** [clemos/haxe-sublime-bundle](https://github.com/clemos/haxe-sublime-bundle)
-- **HCL:** [aroben/ruby.tmbundle](https://github.com/aroben/ruby.tmbundle)
+- **HCL:** [alexlouden/Terraform.tmLanguage](https://github.com/alexlouden/Terraform.tmLanguage)
+- **HLSL:** [tgjones/shaders-tmLanguage](https://github.com/tgjones/shaders-tmLanguage)
 - **HTML:** [textmate/html.tmbundle](https://github.com/textmate/html.tmbundle)
 - **HTML+Django:** [textmate/python-django.tmbundle](https://github.com/textmate/python-django.tmbundle)
 - **HTML+ECR:** [atom-crystal/language-crystal](https://github.com/atom-crystal/language-crystal)
 - **HTML+EEX:** [elixir-lang/elixir-tmbundle](https://github.com/elixir-lang/elixir-tmbundle)
 - **HTML+ERB:** [aroben/ruby.tmbundle](https://github.com/aroben/ruby.tmbundle)
-- **HTML+PHP:** [textmate/php.tmbundle](https://github.com/textmate/php.tmbundle)
+- **HTML+PHP:** [brandonblack/php.tmbundle](https://github.com/brandonblack/php.tmbundle)
 - **HTTP:** [httpspec/sublime-highlighting](https://github.com/httpspec/sublime-highlighting)
 - **IDL:** [mgalloy/idl.tmbundle](https://github.com/mgalloy/idl.tmbundle)
 - **Idris:** [idris-hackers/idris-sublime](https://github.com/idris-hackers/idris-sublime)
@@ -169,7 +170,7 @@ This is a list of grammars that Linguist selects to provide syntax highlighting
 - **JSONiq:** [wcandillon/language-jsoniq](https://github.com/wcandillon/language-jsoniq)
 - **JSONLD:** [atom/language-javascript](https://github.com/atom/language-javascript)
 - **JSX:** [github-linguist/language-babel](https://github.com/github-linguist/language-babel)
-- **Julia:** [nanoant/Julia.tmbundle](https://github.com/nanoant/Julia.tmbundle)
+- **Julia:** [JuliaEditorSupport/Julia.tmbundle](https://github.com/JuliaEditorSupport/Julia.tmbundle)
 - **Jupyter Notebook:** [textmate/json.tmbundle](https://github.com/textmate/json.tmbundle)
 - **Kit:** [textmate/html.tmbundle](https://github.com/textmate/html.tmbundle)
 - **Kotlin:** [vkostyukov/kotlin-sublime-package](https://github.com/vkostyukov/kotlin-sublime-package)
@@ -194,6 +195,7 @@ This is a list of grammars that Linguist selects to provide syntax highlighting
 - **Makefile:** [textmate/make.tmbundle](https://github.com/textmate/make.tmbundle)
 - **Mako:** [marconi/mako-tmbundle](https://github.com/marconi/mako-tmbundle)
 - **Markdown:** [atom/language-gfm](https://github.com/atom/language-gfm)
+- **Marko:** [marko-js/marko-tmbundle](https://github.com/marko-js/marko-tmbundle)
 - **Mask:** [tenbits/sublime-mask](https://github.com/tenbits/sublime-mask)
 - **Mathematica:** [shadanan/mathematica-tmbundle](https://github.com/shadanan/mathematica-tmbundle)
 - **Matlab:** [textmate/matlab.tmbundle](https://github.com/textmate/matlab.tmbundle)
@@ -202,6 +204,7 @@ This is a list of grammars that Linguist selects to provide syntax highlighting
 - **MAXScript:** [Alhadis/language-maxscript](https://github.com/Alhadis/language-maxscript)
 - **MediaWiki:** [textmate/mediawiki.tmbundle](https://github.com/textmate/mediawiki.tmbundle)
 - **Mercury:** [sebgod/mercury-tmlanguage](https://github.com/sebgod/mercury-tmlanguage)
+- **Meson:** [TingPing/language-meson](https://github.com/TingPing/language-meson)
 - **Metal:** [textmate/c.tmbundle](https://github.com/textmate/c.tmbundle)
 - **Mirah:** [aroben/ruby.tmbundle](https://github.com/aroben/ruby.tmbundle)
 - **Modelica:** [BorisChumichev/modelicaSublimeTextPackage](https://github.com/BorisChumichev/modelicaSublimeTextPackage)
@@ -237,16 +240,18 @@ This is a list of grammars that Linguist selects to provide syntax highlighting
 - **OpenCL:** [textmate/c.tmbundle](https://github.com/textmate/c.tmbundle)
 - **OpenEdge ABL:** [jfairbank/Sublime-Text-2-OpenEdge-ABL](https://github.com/jfairbank/Sublime-Text-2-OpenEdge-ABL)
 - **OpenRC runscript:** [atom/language-shellscript](https://github.com/atom/language-shellscript)
+- **OpenSCAD:** [tbuser/openscad.tmbundle](https://github.com/tbuser/openscad.tmbundle)
 - **OpenType Feature File:** [Alhadis/language-fontforge](https://github.com/Alhadis/language-fontforge)
 - **Ox:** [andreashetland/sublime-text-ox](https://github.com/andreashetland/sublime-text-ox)
 - **Oz:** [eregon/oz-tmbundle](https://github.com/eregon/oz-tmbundle)
+- **P4:** [TakeshiTseng/atom-language-p4](https://github.com/TakeshiTseng/atom-language-p4)
 - **Papyrus:** [Kapiainen/SublimePapyrus](https://github.com/Kapiainen/SublimePapyrus)
 - **Parrot Internal Representation:** [textmate/parrot.tmbundle](https://github.com/textmate/parrot.tmbundle)
 - **Pascal:** [textmate/pascal.tmbundle](https://github.com/textmate/pascal.tmbundle)
 - **PAWN:** [Southclaw/pawn-sublime-language](https://github.com/Southclaw/pawn-sublime-language)
 - **Perl:** [textmate/perl.tmbundle](https://github.com/textmate/perl.tmbundle)
 - **Perl6:** [perl6/atom-language-perl6](https://github.com/perl6/atom-language-perl6)
-- **PHP:** [textmate/php.tmbundle](https://github.com/textmate/php.tmbundle)
+- **PHP:** [brandonblack/php.tmbundle](https://github.com/brandonblack/php.tmbundle)
 - **Pic:** [Alhadis/language-roff](https://github.com/Alhadis/language-roff)
 - **PicoLisp:** [textmate/lisp.tmbundle](https://github.com/textmate/lisp.tmbundle)
 - **PigLatin:** [goblindegook/sublime-text-pig-latin](https://github.com/goblindegook/sublime-text-pig-latin)
@@ -278,6 +283,7 @@ This is a list of grammars that Linguist selects to provide syntax highlighting
 - **Reason:** [facebook/reason](https://github.com/facebook/reason)
 - **Rebol:** [Oldes/Sublime-REBOL](https://github.com/Oldes/Sublime-REBOL)
 - **Red:** [Oldes/Sublime-Red](https://github.com/Oldes/Sublime-Red)
+- **Regular Expression:** [Alhadis/language-regexp](https://github.com/Alhadis/language-regexp)
 - **Ren'Py:** [williamd1k0/language-renpy](https://github.com/williamd1k0/language-renpy)
 - **reStructuredText:** [Lukasa/language-restructuredtext](https://github.com/Lukasa/language-restructuredtext)
 - **REXX:** [mblocker/rexx-sublime](https://github.com/mblocker/rexx-sublime)