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.
<https://lh3.googleusercontent.com/-nBy-kwjLmsU/VSrmel3V2hI/AAAAAAAAVzA/ZiOj0aLGP6w/s1600/Road-to-Polymer-Compare-Code-800.png> 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 On Friday, April 10, 2015 at 12:30:17 PM UTC-7, Chuck Horton wrote: > > Thanks Scott for pointing that out. I have fixed it. It now should work > with FF and Safari now. > > On Thursday, April 9, 2015 at 10:24:32 PM UTC-7, Scott Miles wrote: >> >> 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. >> >> On Thu, Apr 9, 2015 at 7:15 AM, Chuck Horton <[email protected]> wrote: >> >>> 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. >>> >>> >>> On Wednesday, April 8, 2015 at 7:09:34 PM UTC-7, [email protected] >>> wrote: >>>> >>>> It doesn't seem to work on FF. Do you have any plans to support that? >>>> >>>> On Thursday, April 2, 2015 at 7:23:09 AM UTC+13, Chuck Horton wrote: >>>>> >>>>> 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 >>>>> <http://www.google.com/url?q=http%3A%2F%2Fchuckh.github.io%2Froad-to-polymer%2Fcompare-code.html%3Fel%3Dcore-animation%26convert%3Dtrue&sa=D&sntz=1&usg=AFQjCNF-PPNLq4Bpw6p_T7CbY5LbUvnyEQ> >>>>> >>>>> Link to Road to Polymer: >>>>> http://chuckh.github.io/road-to-polymer/ >>>>> >>>>> On Wednesday, April 1, 2015 at 8:31:56 AM UTC-7, Carl Youngblood wrote: >>>>>> >>>>>> 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". >>>>>> >>>>>> On Tuesday, March 31, 2015 at 2:10:02 PM UTC-6, Chuck Horton wrote: >>>>>>> >>>>>>> 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? >>>>>>> >>>>>>> On Saturday, March 21, 2015 at 5:35:00 PM UTC-7, Chuck Horton wrote: >>>>>>>> >>>>>>>> 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 >>>>>>>> >>>>>>>> On Saturday, March 21, 2015 at 11:52:11 AM UTC-7, Chuck Horton >>>>>>>> wrote: >>>>>>>>> >>>>>>>>> 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 >>>>>>>>> <http://chuckh.github.io/road-to-polymer/repos.html> >>>>>>>>> >>>>>>>>> On Thursday, March 19, 2015 at 8:45:59 AM UTC-7, Chuck Horton >>>>>>>>> wrote: >>>>>>>>>> >>>>>>>>>> The other links to report are broken. The correct link is: >>>>>>>>>> >>>>>>>>>> *http://chuckh.github.io/road-to-polymer/repos.html* >>>>>>>>>> <http://chuckh.github.io/road-to-polymer/repos.html> >>>>>>>>>> >>>>>>>>>> >>>>>>>>>> On Thursday, March 19, 2015 at 8:42:13 AM UTC-7, Chuck Horton >>>>>>>>>> wrote: >>>>>>>>>>> >>>>>>>>>>> Carl, This is a live report. *Go >>>>>>>>>>> to http://chuckh.github.io/road-to-polymer/repos.html >>>>>>>>>>> <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. >>>>>>>>>>> >>>>>>>>>>> On Thursday, March 19, 2015 at 8:34:26 AM UTC-7, Carl Youngblood >>>>>>>>>>> wrote: >>>>>>>>>>>> >>>>>>>>>>>> Chuck, please consider making this a google spreadsheet so we >>>>>>>>>>>> can read it more easily and help update it. >>>>>>>>>>>> >>>>>>>>>>>> On Wednesday, March 18, 2015 at 3:20:26 PM UTC-6, Chuck Horton >>>>>>>>>>>> wrote: >>>>>>>>>>>>> >>>>>>>>>>>>> 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.htm >>>>>>>>>>>>> <http://www.google.com/url?q=http%3A%2F%2Fchuckh.github.io%2Froad-to-polymer%2Frepos.htm&sa=D&sntz=1&usg=AFQjCNHCk1O7pe8coZH6wTFy4Ack7TZjxw> >>>>>>>>>>>>> l. >>>>>>>>>>>>> >>>>>>>>>>>>> *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:* >>>>>>>>>>>>> >>>>>>>>>>>>> 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 [email protected]. >>> To view this discussion on the web visit >>> https://groups.google.com/d/msgid/polymer-dev/a201d884-9abe-469a-ae2a-b4ea00e29ab2%40googlegroups.com >>> >>> <https://groups.google.com/d/msgid/polymer-dev/a201d884-9abe-469a-ae2a-b4ea00e29ab2%40googlegroups.com?utm_medium=email&utm_source=footer> >>> . >>> >>> For more options, visit https://groups.google.com/d/optout. >>> >> >> 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 [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/26a4a6a8-eafb-4456-80ad-fdeafd2a5670%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
