aurelia-ui-toolkits / skeleton-bridge Goto Github PK

I've been thinking about adding a step-by-step section to the sample pages. Like MDL did for example here - there is no anchor, please scroll down to "Introduction".

It doesn't need to be that detailed but may be useful for people who don't know the "bridged" toolkit but are looking for an Aurelia UI toolkit and found one of our bridges.

The help viewer in this skeleton bridge features a view of document categories along with their documents. It's currently implemented as a KendoUI control.
Replace it with real Bootstrap accordion.

I cloned the aurelis-skeleton-bridge repo to my machine and executed the following commands.

• npm install
• jspm install
• cd sample

•   npm install
  

• jspm install

All the above steps went success. When I run gulp watch, I am facing the below issues.

Issue 1

Uncaught (in promise) Error: XHR error (404 Not Found) loading http://localhost:3002/src/root/package.json(…)

Issue 2

system.src.js:4597 GET http://localhost:3002/src/skeleton-bridge.js 404 (Not Found) Uncaught (in promise) Error: XHR error (404 Not Found) loading http://localhost:3002/src/skeleton-bridge.js(…)

see: aurelia-ui-toolkits/aurelia-materialize-bridge#91
also: ☝️ 6. Februar 2016 19:12

I may need to explain this a little more for it to be used by other bridge developers.

Introduction

This issue defines the actions needed to implement the "bridge infrastructure and utilities" - the "orange box" defined in the Informal definition of the bridge structure and development process wiki page

Image 1 - Aurelia Skeleton Bridge

Prerequisites

1. Informal definition of the bridge structure and development process
2. Orange box" implementation issues

Action 1

Implement the bridge's "catalog application" basic user interface

Action 2

Implement the bridge's "catalog application" online help system

Action 3

Utilize plugin builder

Instead of

        <div class="jumbotron">
            <h1>Navbar example</h1>
            <p>This example is a quick exercise to illustrate how the default navbar works.</p>
        </div>

I would like to see a live example of this same control used in the context of a "real" Aurelia application. Examples:

• show how the click on the About menu item results with a appearance of the related view
• Even better example would be to show slightly more complicated scenario as one below:

(see this and this for details)

I'm not exactly certain what PluginBuilder should become. But I think it may confuse some people (including me), that all references say "PluginBuilder" while the actual usage in kendo-bridge and materialize-bridge say it's a "ConfigBuilder".

I prefer "ConfigBuilder" btw. As it builds the plugin config. 😄

See aurelia-ui-toolkits/aurelia-kendoui-bridge#303

I am using the http://aurelia-ui-toolkits.github.io/demo-kendo/ app to point out several issues:

Both COMPONENTS DOCS and KENDOUI GITTER CHANNEL should be "adressable" via URL (main purpose: to point them out from the docs)

Neither of these links / buttons should be in all caps.

Each category name (entry in the sidebar) should also be addressable with the behavior "expand this category and render as selected" attached.

Each category should support more than 1 level of nesting - the actual depth should be no more than 3, based on the needed experimentation to determine what is the minimum page width that would still not squish the indentation and text

It's certainiy a convenience problem but it may be helpful to provide bridge developers with a list of UI elements that should be implemented for the user interface.

That just came to my mind.
It may also be completely unnecessary because it depends on the target library. For example maybe there is no top navigation bar for some reason. You'd have to abstract a lot like "a top level navigation" which is pretty self-explanatory and would not contribute much to get a better understanding.

Here is the stack trace:

ERROR [app-router] Error: Error invoking AuMarkdown. Check the inner error for details.
------------------------------------------------
inner error: ReferenceError: showdown is not defined
    at new AuMarkdown (http://localhost:3000/src/shared/markdown.js!transpiled:40:32)
    at Object.invoke (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-dependency-injection.js:344:14)
    at InvocationHandler.invoke (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-dependency-injection.js:309:168)
    at Container.invoke (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-dependency-injection.js:557:25)
    at ProviderResolver.get (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-templating.js:1459:74)
    at Container.get (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-dependency-injection.js:494:23)
    at Container.elementContainerGet [as get] (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-templating.js:1508:17)
    at HtmlBehaviorResource.create (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-templating.js:3353:58)
    at applyInstructions (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-templating.js:1586:33)
    at ViewFactory.create (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-templating.js:1810:9)
    at new AuMarkdown (http://localhost:3000/src/shared/markdown.js!transpiled:40:32)
    at Object.invoke (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-dependency-injection.js:344:14)
    at InvocationHandler.invoke (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-dependency-injection.js:309:168)
    at Container.invoke (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-dependency-injection.js:557:25)
    at ProviderResolver.get (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-templating.js:1459:74)
    at Container.get (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-dependency-injection.js:494:23)
    at Container.elementContainerGet [as get] (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-templating.js:1508:17)
    at HtmlBehaviorResource.create (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-templating.js:3353:58)
    at applyInstructions (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-templating.js:1586:33)
    at ViewFactory.create (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-templating.js:1810:9)
    at new AggregateError (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-pal.js:20:13)
    at Container.invoke (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-dependency-injection.js:559:15)
    at ProviderResolver.get (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-templating.js:1459:74)
    at Container.get (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-dependency-injection.js:494:23)
    at Container.elementContainerGet [as get] (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-templating.js:1508:17)
    at HtmlBehaviorResource.create (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-templating.js:3353:58)
    at applyInstructions (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-templating.js:1586:33)
    at ViewFactory.create (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-templating.js:1810:9)
    at HtmlBehaviorResource.create (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-templating.js:3374:62)
    at applyInstructions (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-templating.js:1586:33)

I discovered it at almost midnight (meaning that I am not in a mood to find out what the problem is :-) ) when tried to use the clone of the skeleton bridge as the beginning of a "research project". This crash took place on unmodified clone.

I did the merge from your repo and then cloned this on my machine to see how it behaves. So I found this:

DEBUG [templating] importing resources for http://localhost:3000/src/samples/navs/toggable.html []
aurelia-logging-console.js:62 ERROR [app-router] Error: Route not found: verticalPills
    at Router._createNavigationInstruction (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-router.js:989:29)
    at _loop2 (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-router.js:653:58)
    at _buildNavigationPlan (http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-router.js:666:9)
    at http://localhost:3000/jspm_packages/npm/[email protected]/aurelia-router.js:656:20
    at run (http://localhost:3000/jspm_packages/npm/[email protected]/modules/es6.promise.js:107:49)
    at http://localhost:3000/jspm_packages/npm/[email protected]/modules/es6.promise.js:121:9
    at MutationObserver.flush (http://localhost:3000/jspm_packages/npm/[email protected]/modules/$.microtask.js:25:7)error @ aurelia-logging-console.js:62log @ aurelia-logging.js:36error @ aurelia-logging.js:69processResult @ aurelia-router.js:1616(anonymous function) @ aurelia-router.js:1569run @ es6.promise.js:107(anonymous function) @ es6.promise.js:121flush @ $.microtask.js:25

I would fix ot on a normal day - but today is busy like hell - so I am leaving it to you.

The purpose if this issue is to document a solution we came across while @rborosak tried to implement a panel component as combination of custom elements.

Bootstrap's css for panels looks like this:

.panel-default > .panel-heading {
  style
}

The problem in question was the template of the b-panel custom element:

<template>
    <div class="panel-heading">
        <content></content>
    </div>
</template>

@JeroenVinke proposed something like:

<b-panel>
   <div class="panel">
     <b-panel-heading>
      <div class="panel-heading"></div>
     </b-panel-heading>
    </div>
</b-panel>

pointing out that:

the css in bootstrap isn't picking up on this because it is defined as .panel-default > .panel-heading { which means the .panel-heading is supposed to be directly underneath a .panel-default, and our b-panel-heading decorator is inbetween causing the css not to be applied

Furthermore, the <b-panel-heading> element should be configurable by its parent.

The solution has two steps:

1. assign the class panel directly to b-panel's template and use <content select="...">:

<template class="panel">
  <content select="b-panel-heading"></content><!--or just content -->
</template>

1. use a technique similar to https://github.com/aurelia-ui-toolkits/aurelia-materialize-bridge/blob/master/src/tabs/tabs.js#L17 to manipulate the children of <b-panel> so they have classes configured in b-panel's bindings.

That way it is possible to keep this structure, satisfying Bootstrap's css:

<b-panel class="panel">
  <b-panel-heading class="panel-heading">
  </b-panel-heading>
</b-panel>

and have the class panel-heading be configurable by its parent.

The first obvious direction is to add to this skeleton everything that it needs to have in order to be used as the starting point for either KendoUI or Materialize bridge.

It might be best to implement any changes for all existing bridges that logically belong to skeleton bridge, in this project first and then "manually transplant them" to the real bridge. This would be almost as good as starting the existing bridges afresh from this skeleton.

The first case of such "back-fitting" from here is the described here.

Instead of depending on aurelia-framework we should instead mention all the individual things we depend on such as aurelia-templating or aurelia-binding. Basically whatever we use when we import things from Aurelia.

and then instead of importing everything from aurelia-framework:

import { bindable, customElement, inject } from 'aurelia-framework';

we should import more specifically:

import {bindable, customElement} from 'aurelia-templating';
import {inject} from 'aurelia-dependency-injection';

When we do the above, we must add a dependency on aurelia-templating and aurelia-dependency-injection here. This helps with the amount of forks people will get when they install the plugin.

Also, can you update all the version of Aurelia in package.json and config.js (both the plugin and the sample app) and also of core-js (to 2.0.3)?

The ci task depends on ['default', 'coveralls']. Default executes test:

gulp.task('default', function(callback) {
  return runSequence(
    'lint',
    'build',
    'test',
    callback
  );
});

Coveralls depends on test:

gulp.task('coveralls', ['test'], function (done) {
  gulp.src('build/reports/coverage/lcov/report-lcovonly.txt')
    .pipe(coveralls());
});

for reference: aurelia-ui-toolkits/aurelia-materialize-bridge#85

running jspm install in the sample folder (catalog app):

ok   Up to date - font-awesome as npm:font-awesome@^4.5.0 (4.5.0)                            
ok   Up to date - bootstrap as github:twbs/bootstrap@^3.3.6 (3.3.6)                          

     The following new package versions were substituted by install deduping:                

       components/jquery 2.2.1 -> 2.1.4                                                      

     Installed Forks                                                                         

                              npm:isarray 0.0.1 1.0.0                                        

     To inspect individual package constraints, use jspm inspect registry:name.              


warn [email protected] is unsupported for this version of jspm. Use jspm dl-loader --latest to up
date.                                                                                        

Issue 1: running jspm update does not remove the fork
Issue 2: Does the presence of the core-js module indicate that this skeleton bridge is not at the level of the latest Aurelia release?

We need to ensure that the section below appears in sample local instance of config.js file:

 meta: {
    "showdown/dist/showdown": {
      "format": "global"
    }
  },

This is needed for all our bridge related apps (this is related to be able to use https://github.com/showdownjs/showdown).

See #17 (comment) 179943611 for more information about this