Source
| import { isObject, transform, isEqual } from 'lodash' | |
| export function differenceObjects(object, base) { | |
| function changes(_object, _base) { | |
| return transform(_object, (result, value, key) => { | |
| if (!isEqual(value, _base[key])) { | |
| result[key] = isObject(value) && isObject(_base[key]) | |
| ? changes(value, _base[key]) : value | |
| } | |
| }) |
| /** | |
| * Deep diff between two object, using lodash | |
| * @param {Object} object Object compared | |
| * @param {Object} base Object to compare with | |
| * @return {Object} Return a new object who represent the diff | |
| */ | |
| function difference(object, base) { | |
| function changes(object, base) { | |
| return _.transform(object, function(result, value, key) { | |
| if (!_.isEqual(value, base[key])) { |
| /** | |
| * Deep diff between two object, using lodash | |
| * @param {Object} object Object compared | |
| * @param {Object} base Object to compare with | |
| * @return {Object} Return a new object who represent the diff | |
| */ | |
| function difference(object, base) { | |
| function changes(object, base) { | |
| return _.transform(object, function(result, value, key) { | |
| if (!_.isEqual(value, base[key])) { |
I've been deceiving you all. I had you believe that Svelte was a UI framework — unlike React and Vue etc, because it shifts work out of the client and into the compiler, but a framework nonetheless.
But that's not exactly accurate. In my defense, I didn't realise it myself until very recently. But with Svelte 3 around the corner, it's time to come clean about what Svelte really is.
Svelte is a language.
Specifically, Svelte is an attempt to answer a question that many people have asked, and a few have answered: what would it look like if we had a language for describing reactive user interfaces?
A few projects that have answered this question:
| @media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ } | |
| @media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ } | |
| @media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ } | |
| @media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ } | |
| @media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ } | |
| @media (min-width:1281px) { /* hi-res laptops and desktops */ } |
If you use atom... download & install the following packages:
If you use atom... download & install the following packages:
| import * as React from 'react' | |
| // routing, etc. | |
| import { Reset } from '~/ui/shared/Reset' | |
| export class App extends React.Component { | |
| public render() { | |
| return ( | |
| <div> | |
| <title>Dashboard</title> |
