tao_on_rails 0.1.1 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 2b59124fa26b5e654fb672ef1fc59beee2a8b1aa
-  data.tar.gz: d1ecab0813707fb29fce18a95fa4304395551dd4
+  metadata.gz: f8b45a9f5ea2544ee0e862a0fda2951823782acf
+  data.tar.gz: 0f0d0a4e37d370970168da6ea3713648345f8129
 SHA512:
-  metadata.gz: 7d052ab6fa7224f82e04bcad380a1e7298669c91a968f2598112bb04758cb9e4c359bc85f72cb8a89dba74219128bf611533233582cc9a12d75287c844296727
-  data.tar.gz: 71089fae4c210927397d969e9ccc88192d84b17b62610ac25727b8c2829cf1d392e493e093bc3e60369b26b2ef9911006c41dbe1961c3818debb3134fc62a999
+  metadata.gz: 401af2ff83fcc21a8cbb43bdbb60582f392b311ef2509dd7cfe4c61c3f1cf6c5411c37bdf68f47fda4ef3092308b202bdb1286e9df14e1095ce4cf4ac70b10f1
+  data.tar.gz: a724d766fa57de46db680b9397c96779ca24de274eeb9d36738fca24bfff297273fe19cbbbaa354658afcf2de4ee1611ac1ebd34a4ac4286b9898e70825e1768

data/lib/tao_on_rails/rails/version.rb

@@ -1,5 +1,5 @@
 module TaoOnRails
   module Rails
-    VERSION = "0.1.1"
+    VERSION = "0.2.0"
   end
 end

data/lib/tasks/tao_icons.rake

@@ -1,55 +1,54 @@
 namespace :tao do
-  namespace :svg_icons do
-    desc 'generate svg icons.'
-    task :generate => :environment do
-      Dir.mkdir "#{Rails.root}/vendor/assets/javascripts/tao"
-
-      File.open "#{Rails.root}/vendor/assets/javascripts/tao/icons.coffee", 'w' do |f|
-        f.puts %{tao.iconsHtml = '''#{svg_html}'''}
-      end
-    end
 
-    private
+  desc 'generate svg icons.'
+  task :generate_icons => :environment do
+    Dir.mkdir "#{Rails.root}/vendor/assets/javascripts/tao"
 
-    def svg_html
-      %{<svg id="tao-icons" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none">\n#{symbols}</svg>}
+    File.open "#{Rails.root}/vendor/assets/javascripts/tao/icons.coffee", 'w' do |f|
+      f.puts %{tao.iconsHtml = '''#{svg_html}'''}
     end
+  end
 
-    def svg_files
-      @svg_files ||= Dir.glob(File.expand_path("#{::Rails.root}/app/assets/icons/*.svg")).uniq
-    end
+  private
 
-    def symbols
-      svg_files.map {|file| "  #{symbol(file)}\n"}.join
-    end
+  def svg_html
+    %{<svg id="tao-icons" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none">\n#{symbols}</svg>}
+  end
 
-    def symbol(path)
-      name = File.basename(path, ".*").underscore().dasherize()
-      content = File.read(path)
-      content.gsub(/<?.+\?>/,'')
-        .gsub(/<!.+?>/,'')
-        .gsub(/<title>.*<\/title>/, '')
-        .gsub(/<desc>.*<\/desc>/, '')
-        .gsub(/id=/,'class=')
-        .gsub(/<svg.+?>/, %Q{<svg id="icon-#{name}" #{dimensions(content)}>})
-        .gsub(/svg/,'symbol')
-        .gsub(/\n/, '') # Remove endlines
-        .gsub(/\s{2,}/, ' ') # Remove whitespace
-        .gsub(/>\s+</, '><') # Remove whitespace between tags
-    end
+  def svg_files
+    @svg_files ||= Dir.glob(File.expand_path("#{::Rails.root}/app/assets/icons/*.svg")).uniq
+  end
 
-    def dimensions(content)
-      dimension = content.scan(/<svg.+(viewBox=["'](.+?)["'])/).flatten
-      viewbox = dimension.first
-      #coords = dimension.last.split(' ')
-
-      #width = coords[2].to_i - coords[0].to_i
-      #height = coords[3].to_i - coords[1].to_i
-      #hack android svg
-      width = '100%'
-      height = '100%'
-      %Q{#{viewbox} width="#{width}" height="#{height}"}
-    end
+  def symbols
+    svg_files.map {|file| "  #{symbol(file)}\n"}.join
+  end
+
+  def symbol(path)
+    name = File.basename(path, ".*").underscore().dasherize()
+    content = File.read(path)
+    content.gsub(/<?.+\?>/,'')
+      .gsub(/<!.+?>/,'')
+      .gsub(/<title>.*<\/title>/, '')
+      .gsub(/<desc>.*<\/desc>/, '')
+      .gsub(/id=/,'class=')
+      .gsub(/<svg.+?>/, %Q{<svg id="icon-#{name}" #{dimensions(content)}>})
+      .gsub(/svg/,'symbol')
+      .gsub(/\n/, '') # Remove endlines
+      .gsub(/\s{2,}/, ' ') # Remove whitespace
+      .gsub(/>\s+</, '><') # Remove whitespace between tags
+  end
+
+  def dimensions(content)
+    dimension = content.scan(/<svg.+(viewBox=["'](.+?)["'])/).flatten
+    viewbox = dimension.first
+    #coords = dimension.last.split(' ')
+
+    #width = coords[2].to_i - coords[0].to_i
+    #height = coords[3].to_i - coords[1].to_i
+    #hack android svg
+    width = '100%'
+    height = '100%'
+    %Q{#{viewbox} width="#{width}" height="#{height}"}
   end
 
 end

data/vendor/assets/javascripts/custom-elements.js

@@ -0,0 +1,861 @@
+//= require native-shim
+
+'use strict';
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+//= require native-shim
+
+/**
+ * @license
+ * Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+ */
+
+/**
+ * 2.3
+ * http://w3c.github.io/webcomponents/spec/custom/#dfn-element-definition
+ * @typedef {{
+ *  name: string,
+ *  localName: string,
+ *  constructor: function(new:HTMLElement),
+ *  connectedCallback: (Function|undefined),
+ *  disconnectedCallback: (Function|undefined),
+ *  attributeChangedCallback: (Function|undefined),
+ *  observedAttributes: Array<string>,
+ * }}
+ */
+var CustomElementDefinition = void 0;
+
+/**
+ * @typedef {{
+ *  resolve: !function(undefined),
+ *  promise: !Promise<undefined>,
+ * }}
+ */
+var Deferred = void 0;
+
+(function () {
+  'use strict';
+
+  var doc = document;
+  var win = window;
+
+  /**
+   * Gets 'customElement' from window so that it could be modified after
+   * the polyfill loads.
+   * @function
+   * @return {CustomElementRegistry}
+   */
+  var _customElements = function _customElements() {
+    return win['customElements'];
+  };
+
+  var _observerProp = '__$CE_observer';
+  var _attachedProp = '__$CE_attached';
+  var _upgradedProp = '__$CE_upgraded';
+
+  if (_customElements()) {
+    _customElements().flush = function () {};
+    if (!_customElements().forcePolyfill) {
+      nativeShim();
+      return;
+    }
+  }
+
+  // name validation
+  // https://html.spec.whatwg.org/multipage/scripting.html#valid-custom-element-name
+
+  /**
+   * @const
+   * @type {Array<string>}
+   */
+  var reservedTagList = ['annotation-xml', 'color-profile', 'font-face', 'font-face-src', 'font-face-uri', 'font-face-format', 'font-face-name', 'missing-glyph'];
+
+  /**
+   * @param {!string} name
+   * @return {!Error|undefined}
+   */
+  function checkValidCustomElementName(name) {
+    if (!(/^[a-z][.0-9_a-z]*-[\-.0-9_a-z]*$/.test(name) && reservedTagList.indexOf(name) === -1)) {
+      return new Error('The element name \'' + name + '\' is not valid.');
+    }
+  }
+
+  /**
+   * @param {!Node} root
+   * @return {TreeWalker}
+   */
+  function createTreeWalker(root) {
+    // IE 11 requires the third and fourth arguments be present. If the third
+    // arg is null, it applies the default behaviour. However IE also requires
+    // the fourth argument be present even though the other browsers ignore it.
+    return doc.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, null, false);
+  }
+
+  /**
+   * @param {!Node} node
+   * @return {boolean}
+   */
+  function isElement(node) {
+    return node.nodeType === Node.ELEMENT_NODE;
+  }
+
+  /**
+   * @param {!Element} element
+   * @return {boolean}
+   */
+  function isHtmlImport(element) {
+    return element.tagName === 'LINK' && element.rel && element.rel.toLowerCase().split(' ').indexOf('import') !== -1;
+  }
+
+  /**
+   * @param {!Element} element
+   * @return {boolean}
+   */
+  function isConnected(element) {
+    var n = element;
+    do {
+      if (n[_attachedProp] || n.nodeType === Node.DOCUMENT_NODE) return true;
+      n = n.parentNode || n.nodeType === Node.DOCUMENT_FRAGMENT_NODE && n.host;
+    } while (n);
+    return false;
+  }
+
+  /**
+   * A registry of custom element definitions.
+   *
+   * See https://html.spec.whatwg.org/multipage/scripting.html#customelementsregistry
+   *
+   * @property {boolean} enableFlush Set to true to enable the flush() method
+   *   to work. This should only be done for tests, as it causes a memory leak.
+   */
+
+  var CustomElementRegistry = function () {
+    function CustomElementRegistry() {
+      _classCallCheck(this, CustomElementRegistry);
+
+      /** @private {!Map<string, !CustomElementDefinition>} **/
+      this._definitions = new Map();
+
+      /** @private {!Map<Function, string>} **/
+      this._constructors = new Map();
+
+      /** @private {!Map<string, !Deferred>} **/
+      this._whenDefinedMap = new Map();
+
+      /** @private {!Set<!MutationObserver>} **/
+      this._observers = new Set();
+
+      /** @private {!MutationObserver} **/
+      this._attributeObserver = new MutationObserver(
+      /** @type {function(Array<MutationRecord>, MutationObserver)} */
+      this._handleAttributeChange.bind(this));
+
+      /** @private {?HTMLElement} **/
+      this._newInstance = null;
+
+      /** @private {!Set<string>} **/
+      this._pendingHtmlImportUrls = new Set();
+
+      /** @type {boolean} **/
+      this.enableFlush = true;
+
+      /** @private {boolean} **/
+      this._upgradeScheduled = false;
+
+      /** @type {MutationObserver} **/
+      this._mainDocumentObserver = null;
+    }
+
+    // HTML spec part 4.13.4
+    // https://html.spec.whatwg.org/multipage/scripting.html#dom-customelementsregistry-define
+    /**
+     * @param {string} name
+     * @param {function(new:HTMLElement)} constructor
+     * @param {{extends: string}} options
+     * @return {undefined}
+     */
+
+
+    _createClass(CustomElementRegistry, [{
+      key: 'define',
+      value: function define(name, constructor, options) {
+        // 1:
+        if (typeof constructor !== 'function') {
+          throw new TypeError('constructor must be a Constructor');
+        }
+
+        // 2. If constructor is an interface object whose corresponding interface
+        //    either is HTMLElement or has HTMLElement in its set of inherited
+        //    interfaces, throw a TypeError and abort these steps.
+        //
+        // It doesn't appear possible to check this condition from script
+
+        // 3:
+        var nameError = checkValidCustomElementName(name);
+        if (nameError) throw nameError;
+
+        // 4, 5:
+        // Note: we don't track being-defined names and constructors because
+        // define() isn't normally reentrant. The only time user code can run
+        // during define() is when getting callbacks off the prototype, which
+        // would be highly-unusual. We can make define() reentrant-safe if needed.
+        if (this._definitions.has(name)) {
+          throw new Error('An element with name \'' + name + '\' is already defined');
+        }
+
+        // 6, 7:
+        if (this._constructors.has(constructor)) {
+          throw new Error('Definition failed for \'' + name + '\': ' + 'The constructor is already used.');
+        }
+
+        // 8:
+        /** @type {string} */
+        var localName = name;
+
+        // 9, 10: We do not support extends currently.
+
+        // 11, 12, 13: Our define() isn't rentrant-safe
+
+        // 14.1:
+        /** @type {Object} */
+        var prototype = constructor.prototype;
+
+        // 14.2:
+        if ((typeof prototype === 'undefined' ? 'undefined' : _typeof(prototype)) !== 'object') {
+          throw new TypeError('Definition failed for \'' + name + '\': ' + 'constructor.prototype must be an object');
+        }
+
+        /**
+         * @param {string} callbackName
+         * @return {Function|undefined}
+         */
+        function getCallback(callbackName) {
+          var callback = prototype[callbackName];
+          if (callback !== undefined && typeof callback !== 'function') {
+            throw new Error(localName + ' \'' + callbackName + '\' is not a Function');
+          }
+          return callback;
+        }
+
+        // 3, 4:
+        var connectedCallback = getCallback('connectedCallback');
+
+        // 5, 6:
+        var disconnectedCallback = getCallback('disconnectedCallback');
+
+        // Divergence from spec: we always throw if attributeChangedCallback is
+        // not a function.
+
+        // 7, 9.1:
+        var attributeChangedCallback = getCallback('attributeChangedCallback');
+
+        // 8, 9.2, 9.3:
+        var observedAttributes = attributeChangedCallback && constructor['observedAttributes'] || [];
+
+        // 15:
+        /** @type {CustomElementDefinition} */
+        var definition = {
+          name: name,
+          localName: localName,
+          constructor: constructor,
+          connectedCallback: connectedCallback,
+          disconnectedCallback: disconnectedCallback,
+          attributeChangedCallback: attributeChangedCallback,
+          observedAttributes: observedAttributes
+        };
+
+        // 16:
+        this._definitions.set(localName, definition);
+        this._constructors.set(constructor, localName);
+
+        // 17, 18, 19:
+        this._upgradeDoc();
+
+        // 20:
+        /** @type {Deferred} **/
+        var deferred = this._whenDefinedMap.get(localName);
+        if (deferred) {
+          deferred.resolve(undefined);
+          this._whenDefinedMap.delete(localName);
+        }
+      }
+
+      /**
+       * Returns the constructor defined for `name`, or `null`.
+       *
+       * @param {string} name
+       * @return {Function|undefined}
+       */
+
+    }, {
+      key: 'get',
+      value: function get(name) {
+        // https://html.spec.whatwg.org/multipage/scripting.html#custom-elements-api
+        var def = this._definitions.get(name);
+        return def ? def.constructor : undefined;
+      }
+
+      /**
+       * Returns a `Promise` that resolves when a custom element for `name` has
+       * been defined.
+       *
+       * @param {string} name
+       * @return {!Promise}
+       */
+
+    }, {
+      key: 'whenDefined',
+      value: function whenDefined(name) {
+        // https://html.spec.whatwg.org/multipage/scripting.html#dom-customelementsregistry-whendefined
+        var nameError = checkValidCustomElementName(name);
+        if (nameError) return Promise.reject(nameError);
+        if (this._definitions.has(name)) return Promise.resolve();
+
+        /** @type {Deferred} **/
+        var deferred = this._whenDefinedMap.get(name);
+        if (deferred) return deferred.promise;
+
+        var resolve = void 0;
+        var promise = new Promise(function (_resolve, _) {
+          resolve = _resolve;
+        });
+        deferred = { promise: promise, resolve: resolve };
+        this._whenDefinedMap.set(name, deferred);
+        return promise;
+      }
+
+      /**
+       * Causes all pending mutation records to be processed, and thus all
+       * customization, upgrades and custom element reactions to be called.
+       * `enableFlush` must be true for this to work. Only use during tests!
+       */
+
+    }, {
+      key: 'flush',
+      value: function flush() {
+        if (this.enableFlush) {
+          // console.warn("flush!!!");
+          this._handleMutations(this._mainDocumentObserver.takeRecords());
+          this._handleAttributeChange(this._attributeObserver.takeRecords());
+          this._observers.forEach(
+          /**
+           * @param {!MutationObserver} observer
+           * @this {CustomElementRegistry}
+           */
+          function (observer) {
+            this._handleMutations(observer.takeRecords());
+          }, this);
+        }
+      }
+
+      /**
+       * Upgrade all existing in document elements. This process is expensive so
+       * is optionally batched based on the state of HTMLImports. (Note,
+       * this batching might not be necessary if instead of walking the dom,
+       * a map of upgrade candidates was maintained.)
+       * @private
+       */
+
+    }, {
+      key: '_upgradeDoc',
+      value: function _upgradeDoc() {
+        var _this2 = this;
+
+        if (!this._upgradeScheduled) {
+          this._upgradeScheduled = true;
+          var onReady = function onReady() {
+            _this2._upgradeScheduled = false;
+            if (!_this2._mainDocumentObserver) {
+              _this2._mainDocumentObserver = _this2._observeRoot(doc);
+            }
+            _this2._addNodes(doc.childNodes);
+          };
+          if (window['HTMLImports']) {
+            window['HTMLImports']['whenReady'](onReady);
+          } else {
+            onReady();
+          }
+        }
+      }
+
+      /**
+       * @param {?HTMLElement} instance
+       * @private
+       */
+
+    }, {
+      key: '_setNewInstance',
+      value: function _setNewInstance(instance) {
+        this._newInstance = instance;
+      }
+
+      /**
+       * Observes a DOM root for mutations that trigger upgrades and reactions.
+       * @param {Node} root
+       * @private
+       */
+
+    }, {
+      key: '_observeRoot',
+      value: function _observeRoot(root) {
+        // console.log('_observeRoot', root, root.baseURI);
+        // console.assert(!root[_observerProp]);
+        if (root[_observerProp] != null) {
+          //console.warn(`Root ${root} is already observed`);
+          return root[_observerProp];
+        }
+        root[_observerProp] = new MutationObserver(
+        /** @type {function(Array<MutationRecord>, MutationObserver)} */
+        this._handleMutations.bind(this));
+        root[_observerProp].observe(root, { childList: true, subtree: true });
+        if (this.enableFlush) {
+          // this is memory leak, only use in tests
+          this._observers.add(root[_observerProp]);
+        }
+        return root[_observerProp];
+      }
+
+      /**
+       * @param {Node} root
+       * @private
+       */
+
+    }, {
+      key: '_unobserveRoot',
+      value: function _unobserveRoot(root) {
+        if (root[_observerProp] != null) {
+          root[_observerProp].disconnect();
+          if (this.enableFlush) {
+            this._observers.delete(root[_observerProp]);
+          }
+          root[_observerProp] = null;
+        }
+      }
+
+      /**
+       * @param {!Array<!MutationRecord>} mutations
+       * @private
+       */
+
+    }, {
+      key: '_handleMutations',
+      value: function _handleMutations(mutations) {
+        for (var i = 0; i < mutations.length; i++) {
+          /** @type {!MutationRecord} */
+          var mutation = mutations[i];
+          if (mutation.type === 'childList') {
+            // Note: we can't get an ordering between additions and removals, and
+            // so might diverge from spec reaction ordering
+            var addedNodes = /** @type {!NodeList<!Node>} */mutation.addedNodes;
+            var removedNodes = /** @type {!NodeList<!Node>} */mutation.removedNodes;
+            this._removeNodes(removedNodes);
+            this._addNodes(addedNodes);
+          }
+        }
+      }
+
+      /**
+       * @param {!(NodeList<!Node>|Array<!Node>)} nodeList
+       * @param {?Set<Node>=} visitedNodes
+       * @private
+       */
+
+    }, {
+      key: '_addNodes',
+      value: function _addNodes(nodeList, visitedNodes) {
+        visitedNodes = visitedNodes || new Set();
+
+        for (var i = 0; i < nodeList.length; i++) {
+          var root = nodeList[i];
+
+          if (!isElement(root)) {
+            continue;
+          }
+
+          // Since we're adding this node to an observed tree, we can unobserve
+          this._unobserveRoot(root);
+
+          var walker = createTreeWalker(root);
+          do {
+            var node = /** @type {!HTMLElement} */walker.currentNode;
+            this._addElement(node, visitedNodes);
+          } while (walker.nextNode());
+        }
+      }
+
+      /**
+       * @param {!HTMLElement} element
+       * @param {!Set<Node>=} visitedNodes
+       */
+
+    }, {
+      key: '_addElement',
+      value: function _addElement(element, visitedNodes) {
+        if (visitedNodes.has(element)) return;
+        visitedNodes.add(element);
+
+        /** @type {?CustomElementDefinition} */
+        var definition = this._definitions.get(element.localName);
+        if (definition) {
+          if (!element[_upgradedProp]) {
+            this._upgradeElement(element, definition, true);
+          }
+          if (element[_upgradedProp] && !element[_attachedProp] && isConnected(element)) {
+            element[_attachedProp] = true;
+            if (definition.connectedCallback) {
+              definition.connectedCallback.call(element);
+            }
+          }
+        }
+        if (element.shadowRoot) {
+          // TODO(justinfagnani): do we need to check that the shadowRoot
+          // is observed?
+          this._addNodes(element.shadowRoot.childNodes, visitedNodes);
+        }
+        if (isHtmlImport(element)) {
+          this._addImport( /** @type {!HTMLLinkElement} */element, visitedNodes);
+        }
+      }
+
+      /**
+       * @param {!HTMLLinkElement} link
+       * @param {!Set<Node>=} visitedNodes
+       */
+
+    }, {
+      key: '_addImport',
+      value: function _addImport(link, visitedNodes) {
+        var _this3 = this;
+
+        // During a tree walk to add or upgrade nodes, we may encounter multiple
+        // HTML imports that reference the same document, and may encounter
+        // imports in various states of loading.
+
+        // First, we only want to process the first import for a document in a
+        // walk, so we check visitedNodes for the document, not the link.
+        //
+        // Second, for documents that haven't loaded yet, we only want to add one
+        // listener, regardless of the number of links or walks, so we track
+        // pending loads in _pendingHtmlImportUrls.
+
+        // Check to see if the import is loaded
+        /** @type {?Document} */
+        var _import = link.import;
+        if (_import) {
+          // The import is loaded, but only process the first link element
+          if (visitedNodes.has(_import)) return;
+          visitedNodes.add(_import);
+
+          // The import is loaded observe it
+          if (!_import[_observerProp]) this._observeRoot(_import);
+
+          // walk the document
+          this._addNodes(_import.childNodes, visitedNodes);
+        } else {
+          var _ret = function () {
+            // The import is not loaded, so wait for it
+            /** @type {string} */
+            var importUrl = link.href;
+            if (_this3._pendingHtmlImportUrls.has(importUrl)) return {
+                v: void 0
+              };
+            _this3._pendingHtmlImportUrls.add(importUrl);
+
+            /**
+             * @const
+             * @type {CustomElementRegistry}
+             */
+            var _this = _this3;
+            var onLoad = function onLoad() {
+              link.removeEventListener('load', /** @type {function(Event)} */onLoad);
+              if (!link.import[_observerProp]) _this._observeRoot(link.import);
+              // We don't pass visitedNodes because this is async and not part of
+              // the current tree walk.
+              _this._addNodes(link.import.childNodes);
+            };
+            link.addEventListener('load', onLoad);
+          }();
+
+          if ((typeof _ret === 'undefined' ? 'undefined' : _typeof(_ret)) === "object") return _ret.v;
+        }
+      }
+
+      /**
+       * @param {NodeList} nodeList
+       * @private
+       */
+
+    }, {
+      key: '_removeNodes',
+      value: function _removeNodes(nodeList) {
+        for (var i = 0; i < nodeList.length; i++) {
+          var root = nodeList[i];
+
+          if (!isElement(root)) {
+            continue;
+          }
+
+          // Since we're detatching this element from an observed root, we need to
+          // reobserve it.
+          // TODO(justinfagnani): can we do this in a microtask so we don't thrash
+          // on creating and destroying MutationObservers on batch DOM mutations?
+          this._observeRoot(root);
+
+          var walker = createTreeWalker(root);
+          do {
+            var node = walker.currentNode;
+            if (node[_upgradedProp] && node[_attachedProp]) {
+              node[_attachedProp] = false;
+              var definition = this._definitions.get(node.localName);
+              if (definition && definition.disconnectedCallback) {
+                definition.disconnectedCallback.call(node);
+              }
+            }
+          } while (walker.nextNode());
+        }
+      }
+
+      /**
+       * Upgrades or customizes a custom element.
+       *
+       * @param {HTMLElement} element
+       * @param {CustomElementDefinition} definition
+       * @param {boolean} callConstructor
+       * @private
+       */
+
+    }, {
+      key: '_upgradeElement',
+      value: function _upgradeElement(element, definition, callConstructor) {
+        var prototype = definition.constructor.prototype;
+        element.__proto__ = prototype;
+        if (callConstructor) {
+          this._setNewInstance(element);
+          new definition.constructor();
+          element[_upgradedProp] = true;
+          console.assert(this._newInstance == null);
+        }
+
+        var observedAttributes = definition.observedAttributes;
+        var attributeChangedCallback = definition.attributeChangedCallback;
+        if (attributeChangedCallback && observedAttributes.length > 0) {
+          this._attributeObserver.observe(element, {
+            attributes: true,
+            attributeOldValue: true,
+            attributeFilter: observedAttributes
+          });
+
+          // Trigger attributeChangedCallback for existing attributes.
+          // https://html.spec.whatwg.org/multipage/scripting.html#upgrades
+          for (var i = 0; i < observedAttributes.length; i++) {
+            var name = observedAttributes[i];
+            if (element.hasAttribute(name)) {
+              var value = element.getAttribute(name);
+              attributeChangedCallback.call(element, name, null, value, null);
+            }
+          }
+        }
+      }
+
+      /**
+       * @param {!Array<!MutationRecord>} mutations
+       * @private
+       */
+
+    }, {
+      key: '_handleAttributeChange',
+      value: function _handleAttributeChange(mutations) {
+        for (var i = 0; i < mutations.length; i++) {
+          var mutation = mutations[i];
+          if (mutation.type === 'attributes') {
+            var target = /** @type {HTMLElement} */mutation.target;
+            // We should be gaurenteed to have a definition because this mutation
+            // observer is only observing custom elements observedAttributes
+            var definition = this._definitions.get(target.localName);
+            var name = /** @type {!string} */mutation.attributeName;
+            var oldValue = mutation.oldValue;
+            var newValue = target.getAttribute(name);
+            // Skip changes that were handled synchronously by setAttribute
+            if (newValue !== oldValue) {
+              var namespace = mutation.attributeNamespace;
+              definition.attributeChangedCallback.call(target, name, oldValue, newValue, namespace);
+            }
+          }
+        }
+      }
+    }]);
+
+    return CustomElementRegistry;
+  }();
+
+  // Closure Compiler Exports
+
+
+  window['CustomElementRegistry'] = CustomElementRegistry;
+  CustomElementRegistry.prototype['define'] = CustomElementRegistry.prototype.define;
+  CustomElementRegistry.prototype['get'] = CustomElementRegistry.prototype.get;
+  CustomElementRegistry.prototype['whenDefined'] = CustomElementRegistry.prototype.whenDefined;
+  CustomElementRegistry.prototype['flush'] = CustomElementRegistry.prototype.flush;
+  CustomElementRegistry.prototype['polyfilled'] = true;
+  // TODO(justinfagnani): remove these in production code
+  CustomElementRegistry.prototype['_observeRoot'] = CustomElementRegistry.prototype._observeRoot;
+  CustomElementRegistry.prototype['_addImport'] = CustomElementRegistry.prototype._addImport;
+
+  // patch window.HTMLElement
+
+  /** @const */
+  var origHTMLElement = win.HTMLElement;
+  /**
+   * @type {function(new: HTMLElement)}
+   */
+  var newHTMLElement = function HTMLElement() {
+    var customElements = _customElements();
+
+    // If there's an being upgraded, return that
+    if (customElements._newInstance) {
+      var i = customElements._newInstance;
+      customElements._newInstance = null;
+      return i;
+    }
+    if (this.constructor) {
+      // Find the tagname of the constructor and create a new element with it
+      var tagName = customElements._constructors.get(this.constructor);
+      return _createElement(doc, tagName, undefined, false);
+    }
+    throw new Error('Unknown constructor. Did you call customElements.define()?');
+  };
+  win.HTMLElement = newHTMLElement;
+  win.HTMLElement.prototype = Object.create(origHTMLElement.prototype, {
+    constructor: { value: win.HTMLElement, configurable: true, writable: true }
+  });
+
+  // patch doc.createElement
+  // TODO(justinfagnani): why is the cast neccessary?
+  // Can we fix the Closure DOM externs?
+  var _origCreateElement =
+  /** @type {function(this:Document, string, (Object|undefined)=): !HTMLElement}}*/
+  doc.createElement;
+
+  /**
+   * Creates a new element and upgrades it if it's a custom element.
+   * @param {!Document} doc
+   * @param {!string} tagName
+   * @param {Object|undefined} options
+   * @param {boolean} callConstructor whether or not to call the elements
+   *   constructor after upgrading. If an element is created by calling its
+   *   constructor, then `callConstructor` should be false to prevent double
+   *   initialization.
+   */
+  function _createElement(doc, tagName, options, callConstructor) {
+    var customElements = _customElements();
+    var element = options ? _origCreateElement.call(doc, tagName, options) : _origCreateElement.call(doc, tagName);
+    var definition = customElements._definitions.get(tagName.toLowerCase());
+    if (definition) {
+      customElements._upgradeElement(element, definition, callConstructor);
+    }
+    if (tagName.toLowerCase() !== 'html') {
+      customElements._observeRoot(element);
+    }
+    return element;
+  };
+  doc.createElement = function (tagName, options) {
+    return _createElement(doc, tagName, options, true);
+  };
+
+  // patch doc.createElementNS
+
+  var HTMLNS = 'http://www.w3.org/1999/xhtml';
+
+  /** @type {function(this:Document,string,string):Element} */
+  var _origCreateElementNS = doc.createElementNS;
+  doc.createElementNS =
+  /** @type {function(this:Document,(string|null),string):!Element} */
+  function (namespaceURI, qualifiedName) {
+    if (namespaceURI === 'http://www.w3.org/1999/xhtml') {
+      return doc.createElement(qualifiedName);
+    } else {
+      return _origCreateElementNS.call(doc, namespaceURI, qualifiedName);
+    }
+  };
+
+  // patch Element.attachShadow
+
+  /** @type {function({closed: boolean})} */
+  var _origAttachShadow = Element.prototype['attachShadow'];
+  if (_origAttachShadow) {
+    Object.defineProperty(Element.prototype, 'attachShadow', {
+      value: function value(options) {
+        /** @type {!Node} */
+        var root = _origAttachShadow.call(this, options);
+        /** @type {CustomElementRegistry} */
+        var customElements = _customElements();
+        customElements._observeRoot(root);
+        return root;
+      }
+    });
+  }
+
+  // patch doc.importNode
+
+  var rawImportNode = doc.importNode;
+  doc.importNode = function (node, deep) {
+    var clone = /** @type{!Node} */rawImportNode.call(doc, node, deep);
+    var customElements = _customElements();
+    var nodes = isElement(clone) ? [clone] : clone.childNodes;
+    /** @type {CustomElementRegistry} */_customElements()._addNodes(nodes);
+    return clone;
+  };
+
+  // patch Element.setAttribute & removeAttribute
+
+  var _origSetAttribute = Element.prototype.setAttribute;
+  Element.prototype['setAttribute'] = function (name, value) {
+    changeAttribute(this, name, value, _origSetAttribute);
+  };
+  var _origRemoveAttribute = Element.prototype.removeAttribute;
+  Element.prototype['removeAttribute'] = function (name) {
+    changeAttribute(this, name, null, _origRemoveAttribute);
+  };
+
+  function changeAttribute(element, name, value, operation) {
+    name = name.toLowerCase();
+    var oldValue = element.getAttribute(name);
+    operation.call(element, name, value);
+
+    // Bail if this wasn't a fully upgraded custom element
+    if (element[_upgradedProp] == true) {
+      var definition = _customElements()._definitions.get(element.localName);
+      var observedAttributes = definition.observedAttributes;
+      var attributeChangedCallback = definition.attributeChangedCallback;
+      if (attributeChangedCallback && observedAttributes.indexOf(name) >= 0) {
+        var newValue = element.getAttribute(name);
+        if (newValue !== oldValue) {
+          attributeChangedCallback.call(element, name, oldValue, newValue, null);
+        }
+      }
+    }
+  }
+
+  Object.defineProperty(window, 'customElements', {
+    value: new CustomElementRegistry(),
+    configurable: true,
+    enumerable: true
+  });
+
+  // TODO(justinfagnani): Remove. Temporary for backward-compatibility
+  window['CustomElements'] = {
+    takeRecords: function takeRecords() {
+      if (_customElements().flush) _customElements().flush();
+    }
+  };
+})();

data/vendor/assets/javascripts/native-shim.coffee

@@ -0,0 +1,90 @@
+
+window.nativeShim = ->
+  eval '''
+    'use strict';
+
+    const NativeHTMLElement = window.HTMLElement;
+    const nativeDefine = window.customElements.define;
+    const nativeGet = window.customElements.get;
+
+    /**
+     * Map of user-provided constructors to tag names.
+     *
+     * @type {Map<Function, string>}
+     */
+    const tagnameByConstructor = new Map();
+
+    /**
+     * Map of tag anmes to user-provided constructors.
+     *
+     * @type {Map<string, Function>}
+     */
+    const constructorByTagname = new Map();
+
+
+    /**
+     * Whether the constructors are being called by a browser process, ie parsing
+     * or createElement.
+     */
+    let browserConstruction = false;
+
+    /**
+     * Whether the constructors are being called by a user-space process, ie
+     * calling an element constructor.
+     */
+    let userConstruction = false;
+
+    window.HTMLElement = function() {
+      if (!browserConstruction) {
+        const tagname = tagnameByConstructor.get(this.constructor);
+        const fakeClass = nativeGet.call(window.customElements, tagname);
+
+        // Make sure that the fake constructor doesn't call back to this constructor
+        userConstruction = true;
+        const instance = new (fakeClass)();
+        return instance;
+      }
+      // Else do nothing. This will be reached by ES5-style classes doing
+      // HTMLElement.call() during initialization
+      browserConstruction = false;
+    };
+
+    window.HTMLElement.prototype = Object.create(NativeHTMLElement.prototype);
+    window.HTMLElement.prototype.constructor = window.HTMLElement;
+
+    window.customElements.define = (tagname, elementClass) => {
+      const elementProto = elementClass.prototype;
+      const StandInElement = class extends NativeHTMLElement {
+        constructor() {
+          // Call the native HTMLElement constructor, this gives us the
+          // under-construction instance as `this`:
+          super();
+
+          // The prototype will be wrong up because the browser used our fake
+          // class, so fix it:
+          Object.setPrototypeOf(this, elementProto);
+
+          if (!userConstruction) {
+            // Make sure that user-defined constructor bottom's out to a do-nothing
+            // HTMLElement() call
+            browserConstruction = true;
+            // Call the user-defined constructor on our instance:
+            elementClass.call(this);
+          }
+          userConstruction = false;
+        }
+      };
+      const standInProto = StandInElement.prototype;
+      StandInElement.observedAttributes = elementClass.observedAttributes;
+      standInProto.connectedCallback = elementProto.connectedCallback;
+      standInProto.disconnectedCallback = elementProto.disconnectedCallback;
+      standInProto.attributeChangedCallback = elementProto.attributeChangedCallback;
+      standInProto.adoptedCallback = elementProto.adoptedCallback;
+
+      tagnameByConstructor.set(elementClass, tagname);
+      constructorByTagname.set(tagname, elementClass);
+      nativeDefine.call(window.customElements, tagname, StandInElement);
+    };
+
+    window.customElements.get = (tagname) => constructorByTagname.get(tagname);
+  '''

data/vendor/assets/javascripts/tao.coffee

@@ -5,6 +5,9 @@
 #= require i18n
 
 #= require_self
-#= require_tree ./tao
+#= require_tree tao/application
+#= require_tree tao/page
+#= require_tree tao/helpers
+#= require_tree tao/icons
 
 window.tao = {}

data/vendor/assets/javascripts/tao/component.coffee

@@ -1,4 +1,6 @@
 #= require lodash
+#= require custom-elements
+#= require native-shim
 
 components = {}
 
@@ -60,6 +62,18 @@ TaoComponentBasedOn = (superClass = 'HTMLElement') ->
     attributeChangedCallback: (attrName, oldValue, newValue) ->
       @["#{_.camelCase attrName}Changed"]?(newValue, oldValue)
 
+    on: (args...) ->
+      $(@).on args...
+
+    off: (args...) ->
+      $(@).off args...
+
+    trigger: (args...) ->
+      $(@).triggerHandler(args...)
+
+    one: (args...) ->
+      $(@).one args...
+
     _init: ->
       # to be implemented
 

data/vendor/assets/javascripts/tao/icons.coffee

@@ -0,0 +1,2 @@
+
+# generate this file by exec: rake tao:generate_icons

data/vendor/assets/javascripts/tao/module.coffee

@@ -1,3 +1,42 @@
-#= require qing-module
+class TaoModule
 
-window.TaoModule = QingModule
+  @extend: (obj) ->
+    unless obj and typeof obj == 'object'
+      throw new Error('TaoModule.extend: param should be an object')
+
+    for key, val of obj when key not in ['included', 'extended']
+      @[key] = val
+
+    obj.extended?.call(@)
+    @
+
+  @include: (obj) ->
+    unless obj and typeof obj == 'object'
+      throw new Error('TaoModule.include: param should be an object')
+
+    for key, val of obj when key not in ['included', 'extended']
+      @::[key] = val
+
+    obj.included?.call(@)
+    @
+
+  constructor: (opts) ->
+    @_setOptions opts
+    @_init()
+
+  _setOptions: (opts) ->
+    @opts = $.extend {}, TaoModule.opts, opts
+
+  _init: ->
+
+  on: (args...) ->
+    $(@).on args...
+
+  off: (args...) ->
+    $(@).off args...
+
+  trigger: (args...) ->
+    $(@).triggerHandler(args...)
+
+  one: (args...) ->
+    $(@).one args...

data/vendor/assets/stylesheets/tao.scss

@@ -1,5 +1,2 @@
-/*
- *= require normalize-rails
- *= require_tree ./tao
- *
- */
+//= require normalize-rails
+//= require_tree tao/icons

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: tao_on_rails
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.2.0
 platform: ruby
 authors:
 - Siyuan Liu
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2016-12-01 00:00:00.000000000 Z
+date: 2016-12-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -176,10 +176,13 @@ files:
 - lib/tao_on_rails/rails/version.rb
 - lib/tasks/tao_icons.rake
 - tao_on_rails.gemspec
+- vendor/assets/javascripts/custom-elements.js
+- vendor/assets/javascripts/native-shim.coffee
 - vendor/assets/javascripts/tao.coffee
 - vendor/assets/javascripts/tao/application.coffee
 - vendor/assets/javascripts/tao/component.coffee
 - vendor/assets/javascripts/tao/helpers.coffee
+- vendor/assets/javascripts/tao/icons.coffee
 - vendor/assets/javascripts/tao/module.coffee
 - vendor/assets/javascripts/tao/page.coffee
 - vendor/assets/stylesheets/tao.scss