diff --git a/.gitignore b/.gitignore index d86e5cf7..ba9db6f9 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,17 @@ -/node_modules -/bower_components -*.js -*.js.map -*.d.ts +/node_modules/ +/lib/ + +#Compiler Output +lit-element.js +lit-element.js.map +lit-element.d.ts + +/test/**/*.d.ts +/test/**/*.js +/test/**/*.js.map + +/demo/**/*.d.ts +/demo/**/*.js +/demo/**/*.js.map + !custom_typings/ \ No newline at end of file diff --git a/.travis.yml b/.travis.yml index 030c2fc9..ca74667f 100644 --- a/.travis.yml +++ b/.travis.yml @@ -11,8 +11,8 @@ cache: before_script: - npm run lint script: -- xvfb-run npm run test -- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s 'windows 10/microsoftedge@15' -s 'windows 10/microsoftedge@17' -s 'windows 8.1/internet explorer@11' -s 'os x 10.11/safari@9' -s 'os x 10.12/safari@10' -s 'os x 10.12/safari@11' -s 'Linux/chrome@41'; fi +- xvfb-run npm run test -- -l chrome +- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s 'windows 10/microsoftedge@15' -s 'windows 10/microsoftedge@17' -s 'windows 8.1/internet explorer@11' -s 'os x 10.11/safari@9' -s 'os x 10.12/safari@10' -s 'macos 10.13/safari@11' -s 'Linux/chrome@41' -s 'Linux/firefox'; fi env: global: - secure: mRVq6Gjuq8QOakh9llctKR615PMnKB6HUkLEpZFNHMSXSJryLsZFUAYS5d9TRVtgiaExMciOWQAuAly/08TwLcob1aDPPzs6e2cZK18lRny4o0O3Ax4Kp6cdE27RP2xVIbqyodsYgHbvbAC/3bCWCBWC89LRBL2hEiZZ2fyMu7a2PECH/S1A33D/x1gzzXlvuroMvfbTrPenV3Ps/ZL7R27EHjB6I8ktMUvULXeyI3jmsRtAiqfd6N70caW0mFJsl6Y6A9hWNd2AjdIPxbiLESpbSBFnOdixLwAs5RLudLLQz+so1i/tOuZldXs+iDHVB+iHRl2nj6WY+nbXEObePFhk3S7wA9c4SKNY9tfOzT/FYn96QZdSdVyqQnhyj67YqejF7wSLD4YNfp2llyDBHQAdVd4Z7y/qlsLxgPzdponzlKzecSfjl9Q7wDdWEpPQtQfwjd1nZ/eeGmFwHTlKUfcAkkNOvNteJGabJBXpgoNljHRuevBLsZyZnTw+NPGVnhBdOw7mrWE4vMt5wH64PIFJmJWrWTiyzgOXuP1lh3LirQvWYK4tvmeQvLWosESqz5c+DE5x382fjIHUmIflxOnBYMwTjx8OCbkrhN3kb2NFNz3MyBD9Dz+yYRmzPaUU10HNKlFf1U3bT/c/IUTTkY+VxXKtwPfmOfSJTpMhbvk= diff --git a/README.md b/README.md index 334dbd9c..e011f773 100644 --- a/README.md +++ b/README.md @@ -10,11 +10,47 @@ LitElement uses [lit-html](https://github.com/Polymer/lit-html) to render into the element's [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) -and [Polymer's](https://github.com/Polymer/polymer) -[PropertiesMixin](https://github.com/Polymer/polymer/blob/master/lib/mixins/properties-mixin.js) -to help manage element properties and attributes. LitElement reacts to changes in properties +and adds API to help manage element properties and attributes. LitElement reacts to changes in properties and renders declaratively using `lit-html`. + * **Setup properties:** LitElement supports observable properties that cause the element to update. + These properties can be declared in a few ways: + + * As class fields with the `@property()` [decorator](https://github.com/tc39/proposal-decorators#decorators), + if you're using a compiler that supports them, like TypeScript or Babel. + * With a static `properties` getter. + * By manually writing getters and setters. This can be useful if tasks should + be performed when a property is set, for example validation. Call `invalidateProperty(name, oldValue)` + in the setter to trigger an update and use any configured property options. + + Properties can be given an options argument which is an object that describes how to + process the property. This can be done either in the `@property({...})` decorator or in the + object returned from the `properties` getter, e.g. `static get properties { return { foo: {...} }`. + + Property options include: + + * `attribute`: Describes how and whether the property becomes an observed attribute. + If the value is `false`, the property is not added to `observedAttributes`. + If true or absent, the lowercased property name is observed (e.g. `fooBar` becomes `foobar`). + If a string, the string value is observed (e.g `attribute: 'foo-bar'`). + * `type`: Describes how to serialize and deserialize the attribute to/from a property. + If this value is a function, it is used to deserialize the attribute value + a the property value. If it's an object, it can have keys for `fromAttribute` and + `toAttribute` where `fromAttribute` is the deserialize function and `toAttribute` + is a serialize function used to set the property to an attribute. If no `toAttribute` + function is provided and `reflect` is set to `true`, the property value is set + directly to the attribute. + * `reflect`: Describes if the property should reflect to an attribute. + If `true`, when the property is set, the attribute is set using the + attribute name determined according to the rules for the `attribute` + propety option and the value of the property serialized using the rules from + the `type` property option. + * `shouldInvalidate`: Describes if setting a property should trigger + invalidation and updating. This function takes the `newValue` and `oldValue` and + returns `true` if invalidation should occur. If not present, a strict identity + check is used. This is useful if a property should be considered dirty only + if some condition is met, like if a key of an object value changes. + * **React to changes:** LitElement reacts to changes in properties and attributes by asynchronously rendering, ensuring changes are batched. This reduces overhead and maintains consistent state. @@ -27,8 +63,9 @@ and renders declaratively using `lit-html`. * static elements: ``` html`