CODEWITHSUNDEEP
javascriptpolymerweb-component
DrXCheng
DrXCheng

Reputation: 4132

Yeoman Polymer for Polymer 0.8

I am using Yeoman to scaffold my Polymer project. I upgraded Polymer and everything else to 0.8-preview, and the application stopped working.

What changes in the application should I do to make 0.8-preview working?

Upvotes: 2

Views: 580

Answers (3)

Chuck Horton
Chuck Horton

Reputation: 56

Below are my notes on the conversion process from Polymer 0.5 to 0.8.

See Polymer 0.8 Migration Guide

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

HTML Conversion Process

  1. polymer-element to dom-module
  2. polymer-element name to
  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({
  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 www.polymer-project.org/0.8/docs/devguide/local-dom.html
  8. template repeat to is="x-repeat" and repeat= to items= (temporary)
    • see www.polymer-project.org/0.8/docs/devguide/experimental.html
  9. template is="auto-binding" to is="x-binding" (temporary)
  10. template if= to is="x-if" (temporary) or use diplay block or none
  11. textContent binding from <div>First: {{first}}</div> TO <span>{{first}}</span><br>
  12. 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

  1. polymer-element move up <style></style> from <template> to <dom-module> (as noted above)
    • see www.polymer-project.org/0.8/docs/migration.html#styling

Difference example of paper-button conversion by Polymer team

http://chuckh.github.io/road-to-polymer/compare-code.html?el=paper-button

Upvotes: 4

Aleksei Matiushkin
Aleksei Matiushkin

Reputation: 121010

First of all, you should not upgrade the 3rd party code to preview versions without thoughtful examination of changelog. Generally.

In 0.8, which is claimed to be the 1.0-release candidate, there has changed virtually speaking everything. E.g. polymer-element is gone in favour of dom-module. Etc.

The answer to your question is: you should rollback to 0.5 unless you really want to re-write your code from the scratch.

Upvotes: 0

flyandi
flyandi

Reputation: 1939

There is a good write up between 0.5 and 0.8 - maybe that helps: https://divshot.com/blog/web-components/polymer-0-8-sneak-peek/

Upvotes: 0

Related Questions