Polymer Repositories Status Report Now Available

[Chuck Horton]

To help me prepare to migrate to Polymer 0.8 I created a report to show what Polymer github repositories have a branch of 0-8-preview. I exclude any repos that have NOT FOR PRODUCTION USE or DEPRECATED in the description.

You can view this report live at http://chuckh.github.io/road-to-polymer/repos.html. 

Findings as of 3/28/15:

Total Repositories: 141

Repositories with 0.8-preview branch: 37 

Core and Paper Repositories with 0.8-preview branch: 31 

Core and Paper Repositories no  0.8-preview branch: 51 

This report was built using Polymer 0.5.5 and Github API. It is hosted on Github Pages.

Cavets:

1. If your window is less the 1200px wide the filter radio buttons will be hidden
2. When you filter the report you may need to scroll up to see the data

Let me know what you think. 

Polymer core and paper repositories with 0.8-preview branch:

Polymer Repos Status Report

Filter: 

Cntr

Repo

Description

Cur Release

0.8-preview

1.

core-ajax

Polymer Core Ajax

0.5.5

YES

2.

core-collapse

Adds collapsible behavior to a target element

0.5.5

YES

3.

core-doc-viewer

Polymer element documentation viewer

0.5.5

YES

4.

core-drawer-panel

Simple two-section responsive panel

0.5.5

YES

5.

core-elements

Aggregate core-elements as dependencies of this single package

0.5.5

YES

6.

core-focusable

A mixin for focusable interactive elements

0.5.5

YES

7.

core-header-panel

Simple panel with top and bottom panes

0.5.5

YES

8.

core-icon

A custom element that display an icon.

0.5.5

YES

9.

core-icons

core-icons

0.5.5

YES

10.

core-iconset

A custom element that enables defining image icon sets.

0.5.5

YES

11.

core-iconset-svg

A custom element that enables defining icon sets that contain SVG icons.

0.5.5

YES

12.

core-image

A custom element that provides sizing and preloading options not found on the standard <img> tag.

0.5.5

YES

13.

core-list

Polymer virtualized list element

0.5.5

YES

14.

core-localstorage

Access to localStorage

0.5.5

YES

15.

core-media-query

Data bind to a CSS Media Query

0.5.5

YES

16.

core-meta

Self-organizing database

0.5.5

YES

17.

core-overlay

A custom element that renders on top of other content.

0.5.5

YES

18.

core-pages

Simple content switcher

0.5.5

YES

19.

core-resizable

Mixin to add cooperative resize event communication between resizers and resizables.

0.5.5

YES

20.

core-selector

Manages a list of elements that can be selected

0.5.5

YES

21.

core-toolbar

Basic toolbar

0.5.5

YES

22.

core-transition

An abstraction of a transition

0.5.5

YES

23.

paper-button

A button à la Material Design

0.5.5

YES

24.

paper-elements

Aggregation component for various paper-elements.

0.5.5

YES

25.

paper-icon-button

An icon button à la Material Design

0.5.5

YES

26.

paper-item

A simple list/menu item à la Material Design

0.5.5

YES

27.

paper-ripple

Adds a ripple effect to UI elements à la Material Design

0.5.5

YES

28.

paper-shadow

A drop shadow à la Material Design

0.5.5

YES

29.

paper-spinner

Material-design circular activity indicator

0.5.5

YES

30.

paper-tabs

A tabs à la Material Design

0.5.5

YES

31.

paper-toggle-button

A toggle button à la Material Design

0.5.5

YES

Counter

31

---

Report by Chuck Horton -- email chuckh @ hware.com 
(Note if you don't see results after filtering then scroll up.)

[Chuck Horton]

Below is a better example of the report.

[Carl Youngblood]

Chuck, please consider making this a google spreadsheet so we can read it more easily and help update it.

[Chuck Horton]

Carl, This is a live report. Go to http://chuckh.github.io/road-to-polymer/repos.html. By going to this web page the formatting will be good and you be getting live data pulled from Github's API for the Polymer repositories. So no need for a spreadsheet to manually update. 

[Chuck Horton]

The other links to report are broken. The correct link is:

http://chuckh.github.io/road-to-polymer/repos.html

[Chuck Horton]

I added the ability to search the Repositories by name. I fixed the report to work with other browsers besides Chrome. You can see the changes at: http://chuckh.github.io/road-to-polymer/repos.html 

[Chuck Horton]

I created a web page to compare Polymer elements such as core-toolbar 0.5.5 code vs 0.8.0 code side by side. I am comparing the master branch's code vs 08-preview branch's code. You can input other Polymer elements such paper-shadow then press the enter key to load the code.  I did this to help see the difference between 0.5 and 0.8 code. Let me know what you think.

http://chuckh.github.io/road-to-polymer/compare-code.html

[Chuck Horton]

I have created a Road to Polymer app at http://chuckh.github.io/road-to-polymer/. It has a sidebar menu for Repositories Status Report, Polymer Compare Code, related websites, articles and notes regarding Polymer 0.8.

I also created a very basic converter for Polymer elements that does not have 0.8 code yet. To see it go to: http://chuckh.github.io/road-to-polymer/compare-code.html?el=core-menu-button, then click on the Convert button. Next look for lines with CONVERTED comment to see what changed.

The convert button will show for any Polymer repositories that don't have 0.8 code yet. Still lots of functionality to add. What do you think?

[Carl Youngblood]

Thanks for your work on this Chuck. Just a small typo. There is a menu option in the sidebar called "Polymer 0.9 sneak peek" but it links to an article titled "Polymer 0.8 sneak peek".

[Chuck Horton]

Carl, thanks for letting me know. I have fixed this. I also added more functionality to 0.5 to 0.8 conversion in compare-code. Look for lines with CONVERTED to see what it has done. 

Simple example of auto converted code:

http://chuckh.github.io/road-to-polymer/compare-code.html?el=core-item&convert=true

More complex example:
http://chuckh.github.io/road-to-polymer/compare-code.html?el=core-animation&convert=true

Link to Road to Polymer:

http://chuckh.github.io/road-to-polymer/

[ke...@mroffice.org]

It doesn't seem to work on FF. Do you have any plans to support that?

[Chuck Horton]

Possibly in the future. Not sure why it is not working on FF or Safari. I am not getting any errors when loading in FF or Safari just not working. It does work in my development environment. Maybe has to do with grunt build process. So for now it only works with Chrome. Sorry.

[Scott Miles]

Wrt not working in FF, it looks like 'webcomponents.min.js'  (http://chuckh.github.io/road-to-polymer/bower_components/webcomponentsjs/webcomponents.min.js) is empty.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/a201d884-9abe-469a-ae2a-b4ea00e29ab2%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Chuck Horton]

Thanks Scott for pointing that out. I have fixed it. It now should work with FF and Safari now.

[Chuck Horton]

I added a convert code program. You can either paste 0.5 code or choose a file and it will try to convert your custom element. It is still a work in progress. You can access it at http://chuckh.github.io/road-to-polymer/convert-code.html or http://chuckh.github.io/road-to-polymer/ and select Polymer Convert Code. Comments, suggestions, and corrections are welcome.

I have use the below conversion steps either by changing the code, or adding comments about changes needed.

HTML Conversion Process

polymer-element

1. polymer-element to dom-module
2. polymer-element name to <dom-module id=
3. polymer-element attribute/property camelCase to dash-case
4. polymer-element attributes="xxx xxxx" add to javascript properties
5. polymer-element layout <polymer-element name="x-foo" layout horizontal wrap>
   • add <link rel="import" href="../layout/layout.html"> to top with other imports
   • add hostAttributes ''`hostAttributes: {class: "layout horizontal wrap"}``` to Polymer({
   • see https://www.polymer-project.org/0.8/docs/migration.html#layout-attributes
6. polymer-element move up <link rel="import" type="css" href="my-awesome-button.css"> from `<template> to <dom-module>
7. polymer-element move up <style></style> from <template> to <dom-module>
   • see https://www.polymer-project.org/0.8/docs/devguide/local-dom.html

template see https://www.polymer-project.org/0.8/docs/devguide/experimental.html

1. template repeat to is="x-repeat" and repeat= to items= - (temporary)
2. template is="auto-binding" to is="x-binding" - (temporary)
3. template if= to is="x-if" - (temporary) or use display block or none

other

1. textContent binding from <div>First: {{first}}</div> TO <span>{{first}}</span><br>
2. elements on-click="{{handleClick}}" to on-click="handleClick"

Javascript Conversion Process

1. polymer-element name to Polymer({ is:
2. polymer-element attributes="" to javascript properties: { }

CSS Conversion Process

see https://www.polymer-project.org/0.8/docs/migration.html#styling

1. polymer-element move up <style></style> from <template> to <dom-module> (as noted above)
   • see https://www.polymer-project.org/0.8/docs/migration.html#styling
2. if using layout add hostAttributes ''`hostAttributes: {class: "layout horizontal wrap"}``` to Polymer({
   • see https://www.polymer-project.org/0.8/docs/migration.html#layout-attributes

[Chuck Horton]

Correct Screenshot for Convert Code

[James Nadeau]

Thank you for this, great work!

[DS Morse]

That is sooo AWESOME!... It will be a huge time saver.  Thanks!

On Wednesday, March 18, 2015 at 3:20:26 PM UTC-6, Chuck Horton wrote:

[Chuck Horton]

Thanks. I updated Convert Code with the following:

• Save button to save converted code to local file
  
• Converts ?= to $= 
  
• Converts template repeat, auto-binding and if to is="x-..."
  
• Added line comments to change on-xxx to remove {{}}
  
• Partial convert with comment for mixins
  
• Now ignores comment lines
  
• Update Conversion Notes TODO list 

[Scott Miles]

• Converts ?= to $= 

For the record, most Boolean bindings (formerly known as ?=) will work today simply with '='. One only needs $ if one really wants to bind directly to an attribute. It's a bit of a gray area and generally using '$=' won't be harmful, just wanted to clarify.

Anyway, great work all around Chuck.

Scott

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/8bd74a79-2458-4bfd-bf4b-8d2a5f6e248b%40googlegroups.com.

[Chuck Horton]

Thanks Scott. Your explanation are always so helpful.

[Chuck Horton]

I updated the repositories report and compare code to show PolymerElements, Google Web Components as well as Polymer.