{"action":"created","issue":{"url":"https://api.github.com/repos/elmsln/lrnwebcomponents/issues/44","repository_url":"https://api.github.com/repos/elmsln/lrnwebcomponents","labels_url":"https://api.github.com/repos/elmsln/lrnwebcomponents/issues/44/labels{/name}","comments_url":"https://api.github.com/repos/elmsln/lrnwebcomponents/issues/44/comments","events_url":"https://api.github.com/repos/elmsln/lrnwebcomponents/issues/44/events","html_url":"https://github.com/elmsln/lrnwebcomponents/issues/44","id":375656876,"node_id":"MDU6SXNzdWUzNzU2NTY4NzY=","number":44,"title":"Cheat sheet","user":{"login":"btopro","id":329735,"node_id":"MDQ6VXNlcjMyOTczNQ==","avatar_url":"https://avatars1.githubusercontent.com/u/329735?v=4","gravatar_id":"","url":"https://api.github.com/users/btopro","html_url":"https://github.com/btopro","followers_url":"https://api.github.com/users/btopro/followers","following_url":"https://api.github.com/users/btopro/following{/other_user}","gists_url":"https://api.github.com/users/btopro/gists{/gist_id}","starred_url":"https://api.github.com/users/btopro/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/btopro/subscriptions","organizations_url":"https://api.github.com/users/btopro/orgs","repos_url":"https://api.github.com/users/btopro/repos","events_url":"https://api.github.com/users/btopro/events{/privacy}","received_events_url":"https://api.github.com/users/btopro/received_events","type":"User","site_admin":false},"labels":[{"id":1122550018,"node_id":"MDU6TGFiZWwxMTIyNTUwMDE4","url":"https://api.github.com/repos/elmsln/lrnwebcomponents/labels/important","name":"important","color":"bc2a16","default":false},{"id":1103050006,"node_id":"MDU6TGFiZWwxMTAzMDUwMDA2","url":"https://api.github.com/repos/elmsln/lrnwebcomponents/labels/notice","name":"notice","color":"3b95db","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-10-30T19:31:06Z","updated_at":"2018-12-07T16:18:43Z","closed_at":null,"author_association":"MEMBER","body":"- when modifying arrays or objects you must tell Polymer exactly what's changed. For example, previously we could do `this.set('items.color', 'blue');` and then if in the HTML there was `[[items.color]]` it would update. This isn't always true. To ensure it updates the template binding, add `this.notifyPath('items.color');` after the set statement. This way polymer knows to refresh template data associated w/ that value\r\n- use px / pixel values as much as possible. em / rem don't behave the way you expect bc of shadow DOM style encapsulation and as such you'll need to set font-size in every element that has anything that has em based values. It's easier to manage just doing everything in px and having multiple sizes for things as needed via class / property changes.\r\n- listeners Removed ability to use id.event to add listeners to elements in shadow DOM. Use declarative template event handlers instead. This means.... that when we've used the listeners object previously, we can't call.. button.tap: _callback. It has to be declared in the attached / detached life cycle hooks. So like this:\r\n```\r\nthis.$.audio.addEventListener(\"ended\", this._onEnd());\r\nthis.$.audio.removeEventListener(\"ended\", this._onEnd());\r\n```\r\n- slots with names that don't match no longer show up in unnamed slots. example:\r\n```\r\n<cool-thing slot=\"stuff\">whatever</cool-thing>\r\n<slot></slot>\r\n```\r\nThe internals of cool-thing MUST define `<slot name=\"stuff\">` or it won't show up. This used to fallback to the unnamed slot area if it wasn't found, now that is not the case in ShadowDom spec.\r\n- `Polymer` global object doesn't exist anymore. So things like `Polymer.dom` won't work. here's some common ones that changed\r\n- `Polymer.dom` becomes `import { dom } from \"@polymer/polymer/lib/legacy/polymer.dom.js\";` and then calls to it `dom()`\r\n- `this.$$` becomes `this.shadowRoot.querySelector`\r\n- `Polymer.updateStyles` becomes `\r\nimport { updateStyles } from '@polymer/polymer/lib/mixins/element-mixin.js';` and then calls to it\r\n`updateStyles();`\r\n- `this.async` becomes `import * as async from \"@polymer/polymer/lib/utils/async.js\";` and then calls to it via:\r\n```\r\nasync.microTask.run(() => {\r\n    });\r\n```\r\n- Polymer object (which these should all be fixed but just saying) are now `import { html, Polymer } from \"@polymer/polymer/polymer-legacy.js\";`\r\n- Custom style updates have been changed.\r\n```\r\nthis.customStyle['--my-dynamic-property'] = 'red';\r\nthis.updateStyles();\r\n// After\r\nthis.updateStyles({'--my-dynamic-property': 'red'});\r\n```\r\n- anything that pulls in our custom icon libraries needs to include the following to get them to process correctly: `import \"@polymer/iron-iconset-svg/iron-iconset-svg.js\";`\r\nCommands:\r\n- `yarn start` - at the monorepo level this runs storybook (currently not working). When called inside an element allows you to start doing work on it.\r\n- `yarn run build` - in an element this builds the element to have changes ready for publishing\r\n- `yarn add whatever` - should be run from inside of the element level\r\n- `yarn add @whatever/whatever` - do this *from the element repo you are working on* THEN go to the monorepo level and run `yarn install`. This ensures dependencies are correctly wired across all elements\r\n\r\nOther things:\r\n- We are running in full shadow dom, some styling that worked before now will need refactored\r\n- https://www.polymer-project.org/3.0/docs/devguide/style-shadow-dom#share-styles-between-elements should help as a guide to styling\r\n- https://www.polymer-project.org/3.0/docs/upgrade upgrade guide that has largely been implemented but may have some small things not\r\n- Create your own branch to work from and then PR things back in\r\n- Any new workspace names (let's say the element is called @things/new-element) need to be added to the monorepo's nohoist area. (https://github.com/elmsln/lrnwebcomponents/blob/master/package.json#L144-L183)\r\n- All NEW elements will be done in the class based, new way. All changes are made in the whatever-name/src directory and the html, css, js, hax, and properties associated w the element are split into 5 files. The tooling will combine them automatically (`yarn start`) so that you can work on it\r\n\r\nOther commands to note.\r\nTo upgrade something to Polymer 3 structure that I used to start: `modulizer --out converted --npm-name @lrnwebcomponents/NAMEOFTHETHING --npm-version 0.0.30 --force --import-style name`\r\n\r\nCreate a new element as a single, scripted command: `wcf element --name=promo-tile --description=\"My new element I am making\" --factory=LOCATIONOFYOURCOMPANY/factories/lrnwebcomponents --customElementTemplate=Polymer --no-useSass --no-addProps --useHAX`\r\n"},"comment":{"url":"https://api.github.com/repos/elmsln/lrnwebcomponents/issues/comments/445283527","html_url":"https://github.com/elmsln/lrnwebcomponents/issues/44#issuecomment-445283527","issue_url":"https://api.github.com/repos/elmsln/lrnwebcomponents/issues/44","id":445283527,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0NTI4MzUyNw==","user":{"login":"craPkit","id":4995671,"node_id":"MDQ6VXNlcjQ5OTU2NzE=","avatar_url":"https://avatars2.githubusercontent.com/u/4995671?v=4","gravatar_id":"","url":"https://api.github.com/users/craPkit","html_url":"https://github.com/craPkit","followers_url":"https://api.github.com/users/craPkit/followers","following_url":"https://api.github.com/users/craPkit/following{/other_user}","gists_url":"https://api.github.com/users/craPkit/gists{/gist_id}","starred_url":"https://api.github.com/users/craPkit/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/craPkit/subscriptions","organizations_url":"https://api.github.com/users/craPkit/orgs","repos_url":"https://api.github.com/users/craPkit/repos","events_url":"https://api.github.com/users/craPkit/events{/privacy}","received_events_url":"https://api.github.com/users/craPkit/received_events","type":"User","site_admin":false},"created_at":"2018-12-07T16:18:43Z","updated_at":"2018-12-07T16:18:43Z","author_association":"NONE","body":"`this.debounce('taskName', handler: Function, timeout: Number)` can be replaced with\r\n```\r\nimport { Debouncer } from '@polymer/polymer/lib/utils/debounce';\r\nimport { timeOut } from '@polymer/polymer/lib/utils/async';\r\nthis._debouncer = Debouncer.debounce(this._debouncer,\r\n      timeOut.after(timeout: Number), _handler: Function);\r\n```"}}
{"actor":{"display_login":"craPkit"}}