Lit element v2 RC #129
Merged
Lit element v2 RC #129
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Hi, your component was tested and listed in our Vaadin Directory with a pretty high rating. We think it would be cool to have these badges in your project.
* ⬆️ Updated deps * 💥 Upgraded to Polymer 3.x * ✅ Fixed demo's and tests
✅ Trying to fix broken tests
`calendar` method does not taken `showWeekNumber` into account when `firstDayOfWeek` > 0. Also, updated method to render calendar with `repeat` and `cache`.
Updated UI based on latest Material design datepicker on latest Android. `rollup` has been added for simple build for UI implementation.
Added implementation logics for any year, month, and date selection. Added UI implementation for selected year and date as well as today's date.
Calendar can now display week numbers on the extreme left as labels for each calendar week by toggling `showWeekNumber` property. Minor CSS tweaks to ensure only clickable elements such as date on the calendar to show pointer cursor when hovering. `theme` property has been removed as it is no longer relevant when the design is based on Material Design 2.
Noticed slow rendering on full calendar. After series of debugging, it is quite surprising to find out that running `Intl.DateTimeFormat` every single time with varying `locale` can cause a disastrous perf hit especially in initializing them in each loop. By running them once then passing the cached functions into the loops, the execution time to render a full calendar now takes < 1ms as compared to > 100ms before the patch.
Implemented dragging feature for touch-enabled devices with `Pointer Events` and animating calendar with `Web Animations`. Minor perf improvements has been made to render **ONLY** one calendar when button is clicked to navigate between months, then on next frame (or idle frame if supported natively) re-render all calendars. `Intl` initialization can be slow in rendering calendar, passing the necessary functions can be done at higher level so that functions are cached and reused with lesser overhead, thus faster rendering.
`Pointer Events` does not work as expected on touch mobile devices. There is a limitation when tracking happens on wider range. Hence, drop the API in favor of Polymer's Gestures API for better compatibility. Minor UI and animation enhancements applied to match that of on Android.
Upgraded to `lit-html@1.0.0-rc.1` and `lit-element@0.6.5` for v1.0 RC which just released today.
Further improved perf in re-rendering on slower devices by fixing broken tracking implementation. Now, re-rendering works properly as expected, even on hovering which has been added in this patch as well for desktop.
Optimized calendar rendering performs slightly better due to micro-opts. But the enhancement was broken when `showWeekNumber` is set. Additional fix has been applied to ensure that week number **ONLY** renders when the current date is still within the date range of the current month in each iteration during rendering. Also, `GestureEventListeners` mixin is not mandatory thus removed due to `PropertyEffects` overhead in rendering. Simple demo with timestamp has been added for reference use.
Blink requires defined width when updating `transform` property of an element else it will trigger layout on every frame thus caused drop in perf. By setting fixed width via `getBoundingClientRect` before tracking starts, it temporarily updates the element and its parent element that are responsible for smoother tracking to have fixed width. Critical bug has been discovered in `calendar` module where week number shows up on empty last row of a calendar. A temporary fix has been included to make sure calendar renders correctly as of now but it will be revisited.
* Removed `debugger` keyword * Minor fix in tracking function to reset flags
* Rewrote `calendar.ts` with just ` for-loop to do the job. Feel free to submit optimization PR to improve the perf. * Minor code re-ordering for maintainability and readability. * Removed other test scripts which are no longer in use.
* Added missing `TSLint` config and fixed all linting issues. * Added `rollup` build for production/ publish.
Redundant execution happens when `_selectedView` property has different value. A year list does not need anything from a calendar, however, tasks to render a calendar still runs regardless. By moving all logics to related method can help reduce unnecessary computation in different view.
Tried Karma but it has limited support for TypeScript, switched back to WCT.
Upgraded LitElement to latest RC with fixes in `static get styles()`. Minor code cleanup.
Adding unit tests for <AppDatepicker> element. Improved project structure and config files to build for testing and publishing.
To ensure datetime consistency between the local browsers and the datepicker, input date value can be a local datetime but it needs to convert to UTC within the datepicker by picking just the date values with `get*` methods instead of `getUTC*` methods. FWIW, `get*` might return something unexpected in certain time zones but that is acceptable since the datepicker is relying on what the browser tells what it is. Fixes tests to ensure all datetime values within the datepicker is always in UTC time so `timeZone: UTC` is needed when doing a strict comparison. Also, added `_formatters` property to keep track of all kinds of date formatters depending on value of `locale`. Refactor year list with idiomatic JS and that requires polyfill for newly added `Array.prototype.keys`.
All items in year list view now rendered with formatted year according to the value of `locale`. Changed `year` to `yearList` as one of the start/ selected views. Fixes IE11-only CSS hacks that is broken on other browsers. Now it works on IE11 and other browsers. ✅ Added more tests for year list view. KNOWN ISSUES:- - `disabledDays` and `disabledDates` are not supported.
Fixes an issue where polyfill.io no longer works as expected to load necessary polyfills via feature detections or UA detection. A quick patch is to replace modern features with compatible codes to ensure Chrome 41 is able to load and run the datepicker without any issues. `pointerup` -> `click` event listener on scrim of `<AppDatepickerDialog>`. Due to andyearnshaw/Intl.js/issues/256, the Intl polyfill has to be pinned at v1.2.4. It breaks on Safari 9 and using older version should fix the broken tests.
SauceLabs runs certain browsers on a machine that returns a different locale other than `en-US`. By defaulting to `en-US` for the tests should resolve the issues. Remove latest Node.js to reduce the number of testing environments as SauceLabs timed out quite frequently as this might the cause of it.
Run both Chrome and Firefox on CI but skips Firefox when testing on local machine. Run tests on other browsers via SauceLabs.
Fixes more bugs after adding more tests to perfecting the datepicker. Fixes a local date bug when different timezones are taken into account. Now there is a conversion for input date that reads local date reported from the browser locally and UTC date is used internally. The datepicker deals with UTC date to render the calendar and selected date is output as UTC date as well in the format of `yyyy-MM-dd`. The fix has been tested and it works so far in affected timezone (PST). Upgrades `lit-element` to latest version - RC5 as of this commit.
Stripping all LTR marks on output of Intl.DateTimeFormatter on older browsers: IE11, Edge < 18 to ensure cross-browsers compatibility and consistency since LTR mark is no longer part of the output in modern browsers. Removes `window-size` flag in WCT configuration file.
Adds a couple of IE11 only fixes via CSS hacks or conventional CSS. Updates broken tests after adding IE11 fixes. To learn more, please see #128 which details all the bugs that experienced while building this project.
ghost
added
the
motss
added a commit
that referenced
this pull request
Jan 30, 2019
💥 Complete rewrite with [lit-element v2 RC][lit-element-url] and [Material Design 2][material-design-2-url]. _P/S: This creates a discrepancy in the name used. The branch was created before `lit-element` reaches `v1 RC` but now it already at its `v2 RC`._ [lit-element-url]: https://github.com/Polymer/lit-element [material-design-2-url]: https://material.io/design/
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
💥 Partially fixes #127.
This change is