Refactor into core cycle-free module

Author: pcj

js/ui/BUILD

@@ -3,28 +3,26 @@ package(default_visibility = ["//visibility:public"])
 load("@io_bazel_rules_closure//closure:defs.bzl", "closure_js_binary", "closure_js_library", "closure_js_test")
 
 closure_js_library(
-    name = "component",
+    name = "core",
     srcs = [
-        "app.js",
-        "component.js",
-        "route.js",
-        "route/event.js",
-        "router.js",
+        "core.js",
     ],
     deps = [
         ":history",
         ":keyboard",
         ":injector",
         "@io_bazel_rules_closure//closure/library/asserts",
         "@io_bazel_rules_closure//closure/library/dom",
-        "@io_bazel_rules_closure//closure/library/events:event",
+        "@io_bazel_rules_closure//closure/library/events",
         "@io_bazel_rules_closure//closure/library/events:eventhandler",
         "@io_bazel_rules_closure//closure/library/events:eventtarget",
         "@io_bazel_rules_closure//closure/library/fx:dom",
         "@io_bazel_rules_closure//closure/library/fx:easing",
+        "@io_bazel_rules_closure//closure/library/history:event",
         "@io_bazel_rules_closure//closure/library/history:eventtype",
         "@io_bazel_rules_closure//closure/library/object",
         "@io_bazel_rules_closure//closure/library/promise",
+        "@io_bazel_rules_closure//closure/library/promise:resolver",
         "@io_bazel_rules_closure//closure/library/string",
         "@io_bazel_rules_closure//closure/library/style",
         "@io_bazel_rules_closure//closure/library/ui:component",
@@ -46,6 +44,7 @@ closure_js_library(
         "@io_bazel_rules_closure//closure/library/events:event",
         "@io_bazel_rules_closure//closure/library/events:eventtarget",
         "@io_bazel_rules_closure//closure/library/events:eventtype",
+        "@io_bazel_rules_closure//closure/library/history:event",
         "@io_bazel_rules_closure//closure/library/history:eventtype",
         "@io_bazel_rules_closure//closure/library/history:html5history",
         "@io_bazel_rules_closure//closure/library/string",
@@ -71,8 +70,9 @@ closure_js_library(
         "template.js",
     ],
     deps = [
-        ":component",
+        ":core",
         "@io_bazel_rules_closure//closure/library/soy",
+        "@io_bazel_rules_closure//closure/library/dom",
     ],
 )
 
@@ -85,7 +85,7 @@ closure_js_library(
         "tabs.js",
     ],
     deps = [
-        ":component",
+        ":core",
         "@io_bazel_rules_closure//closure/library/asserts",
         "@io_bazel_rules_closure//closure/library/dom",
         "@io_bazel_rules_closure//closure/library/dom:classlist",
@@ -105,7 +105,9 @@ closure_js_library(
         "@io_bazel_rules_closure//closure/library/dom",
         "@io_bazel_rules_closure//closure/library/math:coordinate",
         "@io_bazel_rules_closure//closure/library/style",
+        "@io_bazel_rules_closure//closure/library/events",
         "@io_bazel_rules_closure//closure/library/ui:component",
+        "@io_bazel_rules_closure//closure/library/ui:container",
         "@io_bazel_rules_closure//closure/library/ui:menu",
         "@io_bazel_rules_closure//closure/library/ui:menubutton",
         "@io_bazel_rules_closure//closure/library/ui:submenu",
@@ -119,38 +121,28 @@ closure_js_library(
         "syntax.js",
     ],
     deps = [
-        ":component",
+        ":core",
         "@io_bazel_rules_closure//closure/library/asserts",
         "@io_bazel_rules_closure//closure/library/dom",
     ],
 )
 
-# closure_js_library(
-#     name = "app",
-#     srcs = [
-#     ],
-#     deps = [
-#         ":component",
-#     ],
-# )
 
 closure_js_library(
     name = "injector",
     srcs = [
         "injector.js",
     ],
     deps = [
-        # ":component",
+        # ":core",
     ],
 )
 
 closure_js_library(
     name = "ui",
-    # srcs = [
-    # ],
     exports = [
         ":injector",
-        ":component",
+        ":core",
         ":history",
         ":keyboard",
         ":menushield",
@@ -185,7 +177,7 @@ closure_js_test(
     ],
     entry_points = ["goog:stack.ui.RouteTest"],
     deps = [
-        ":component",
+        ":core",
         ":select",
         ":app",
         # "@io_bazel_rules_closure//closure/library",

js/ui/app.js

@@ -2,14 +2,16 @@ goog.module('stack.ui.App');
 
 const BzlHistory = goog.require('stack.ui.History');
 const Component = goog.require('stack.ui.Component');
-const HEventType =  goog.require('goog.history.EventType');
-const Injector =  goog.require('stack.ui.Injector');
+const HistoryEvent = goog.require('goog.history.Event');
+const HistoryEventType = goog.require('goog.history.EventType');
+const Injector = goog.require('stack.ui.Injector');
 const Keyboard = goog.require('stack.ui.Keyboard');
-const Promise_ =  goog.require('goog.Promise');
-const Router =  goog.require('stack.ui.Router');
-const asserts =  goog.require('goog.asserts');
-const dom =  goog.require('goog.dom');
-const objects =  goog.require('goog.object');
+const Promise_ = goog.require('goog.Promise');
+const Route = goog.require('stack.ui.Route');
+const Router = goog.require('stack.ui.Router');
+const asserts = goog.require('goog.asserts');
+const dom = goog.require('goog.dom');
+const objects = goog.require('goog.object');
 
 
 class App extends Component {
@@ -25,7 +27,7 @@ class App extends Component {
      * @type {!Injector}
      */
     this.injector_ = new Injector();
-    
+
     /**
      * A registry of components that can be accessed by a common name.
      * @const @private
@@ -35,7 +37,7 @@ class App extends Component {
 
     /** @const @private @type {!BzlHistory} */
     this.history_ = new BzlHistory();
-    this.getHandler().listen(this.history_, HEventType.NAVIGATE, this.handleHistoryNavigate);
+    this.getHandler().listen(this.history_, HistoryEventType.NAVIGATE, this.handleHistoryNavigate);
     this.registerDisposable(this.history_);
 
     /** @const @private @type {!Keyboard} */
@@ -50,16 +52,16 @@ class App extends Component {
   start() {
     this.history_.setEnabled(true);
   }
-  
+
   /**
-   * @param {!goog.history.Event} e
+   * @param {!HistoryEvent} e
    */
   handleHistoryNavigate(e) {
     this.router_.go(e.token).thenCatch(err => {
       console.warn(`Routing failure while nagivating to ${e.token}`);
     });
   }
-  
+
   /**
    * @param {!Component} c
    * @param {!boolean} b
@@ -71,14 +73,14 @@ class App extends Component {
       console.warn("Stop Loaded " + c.getPathUrl());
     }
   }
-  
+
   /**
    * @return {!Keyboard}
    */
   getKbd() {
     return this.kbd_;
   }
-  
+
   /**
    * @return {!Router}
    */
@@ -92,7 +94,7 @@ class App extends Component {
   getInjector() {
     return this.injector_;
   }
-  
+
   /**
    * @param {string} msg
    */
@@ -138,8 +140,8 @@ class App extends Component {
     //route.touch(this);
     super.go(route);
   }
-  
-  /** @param {!stack.ui.Route} route */
+
+  /** @param {!Route} route */
   handle404(route) {
     this.notifyError("404 (Not Found): " + route.getPath());
   }
@@ -157,7 +159,7 @@ class App extends Component {
    * will loopback on this object to the go() method.
    *
    * @param {string} path
-   * @return {!Promise_<!stack.ui.Route>}
+   * @return {!Promise_<!Route>}
    */
   route(path) {
     return this.router_.go(path).thenCatch(err => {

js/ui/body.js

@@ -10,14 +10,14 @@ const soy = goog.require('goog.soy');
 class Body extends Select {
 
   /**
-   * @param {?goog.dom.DomHelper=} opt_domHelper
+   * @param {?dom.DomHelper=} opt_domHelper
    */
   constructor(opt_domHelper) {
     super(opt_domHelper);
     this.addTab('home', new Home());
     this.addTab('search', new List());
   }
-    
+
   /**
    * Modifies behavior to use touch rather than progress to
    * not advance the path pointer.
@@ -38,7 +38,7 @@ class Body extends Select {
   goHere(route) {
     this.select('home', route.add('home'));
   }
-  
+
   /**
    * @override
    */
@@ -55,7 +55,7 @@ class Body extends Select {
     super.enterDocument();
     this.addChild(new Menu(this.getTabStrict('search'), this.getDomHelper()), true);
   }
- 
+
 }
 
 exports = Body;

js/ui/component.js

@@ -6,7 +6,8 @@ goog.module('stack.ui.Component');
 const BgColorTransform = goog.require('goog.fx.dom.BgColorTransform');
 const ComponentEventType = goog.require('goog.ui.Component.EventType');
 const GoogUiComponent = goog.require('goog.ui.Component');
-const Route = goog.require('stack.ui.Route');
+const GoogUiControl = goog.require('goog.ui.Control');
+// const Route = goog.require('stack.ui.Route');
 const asserts = goog.require('goog.asserts');
 const easing = goog.require('goog.fx.easing');
 const strings = goog.require('goog.string');
@@ -18,7 +19,7 @@ const style = goog.require('goog.style');
 class Component extends GoogUiComponent {
 
   /**
-   * @param {?goog.dom.DomHelper=} opt_domHelper
+   * @param {?dom.DomHelper=} opt_domHelper
    */
   constructor(opt_domHelper) {
     super(opt_domHelper);
@@ -65,8 +66,8 @@ class Component extends GoogUiComponent {
       var name = current.getName();
       if (name) {
         path.push(name);
-      // } else {
-      //   console.log('path: no name', current);
+        // } else {
+        //   console.log('path: no name', current);
       }
       current = current.parent();
     }
@@ -111,10 +112,10 @@ class Component extends GoogUiComponent {
   }
 
   /**
-   * @return {?stack.ui.Component}
+   * @return {?Component}
    */
   parent() {
-    return /** @type {?stack.ui.Component} */ (
+    return /** @type {?Component} */ (
       this.getParent()
     );
   }
@@ -165,41 +166,41 @@ class Component extends GoogUiComponent {
 
   /**
    * @param {string} id
-   * @return {?stack.ui.Component}
+   * @return {?Component}
    */
   child(id) {
-    return /** @type {?stack.ui.Component} */ (
+    return /** @type {?Component} */ (
       this.getChild(id)
     );
   }
 
   /**
    * @param {number} index
-   * @return {!stack.ui.Component}
+   * @return {!Component}
    */
   childAt(index) {
-    return /** @type {!stack.ui.Component} */ (
+    return /** @type {!Component} */ (
       asserts.assertObject(this.getChildAt(index))
     );
   }
 
   /**
    * @param {string} id
-   * @return {!stack.ui.Component}
+   * @return {!Component}
    */
   strictchild(id) {
-    return /** @type {!stack.ui.Component} */ (
+    return /** @type {!Component} */ (
       asserts.assertObject(this.getChild(id))
     );
   }
 
   /**
    * Return the root component.
    * 
-   * @return {!stack.ui.Component}
+   * @return {!Component}
    */
   getRoot() {
-    /** @type {?stack.ui.Component} */
+    /** @type {?Component} */
     let current = this;
     while (current) {
       if (!current.parent()) {
@@ -217,7 +218,7 @@ class Component extends GoogUiComponent {
     return /** @type {!stack.ui.App} */ (this.getRoot());
   }
 
-  
+
   /**
    * Default is no-op.
    */
@@ -260,7 +261,7 @@ class Component extends GoogUiComponent {
    * @param {number=} opt_time Length of animation in milliseconds.
    * @param {?Function=} opt_accel Acceleration function, returns 0-1 for inputs 0-1.
    * @param {?Element=} opt_element Dom Node to be used in the animation.
-   * @param {?goog.events.EventHandler=} opt_eventHandler Optional event handler
+   * @param {?events.EventHandler=} opt_eventHandler Optional event handler
    *     to use when listening for events.
    */
   bgColorFadeIn(opt_start, opt_end, opt_time, opt_accel, opt_element, opt_eventHandler) {
@@ -296,7 +297,7 @@ class Component extends GoogUiComponent {
   }
 
   /**
-   * @return {?Array<!goog.ui.Control>}
+   * @return {?Array<!GoogUiControl>}
    */
   getMenuItems() {
     return null;