Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
evolui - npm Package Compare versions
Comparing version 1.4.2 to 1.5.0
@@ -25,7 +25,7 @@ { | ||
| "dependencies": { | ||
| "evolui": "^1.4.1", | ||
| "evolui": "^1.4.2", | ||
| "immutable-deep-update": "^1.0.1", | ||
| "rxjs": "^5.4.3", | ||
| "rxjs": "^6.1.0", | ||
| "socket.io-client": "^2.0.4" | ||
| } | ||
| } |
@@ -1,34 +0,28 @@ | ||
| import { Observable, Subject } from 'rxjs' | ||
| import html, { ease } from 'evolui' | ||
| import html, { text, ease } from 'evolui' | ||
| import { Subject, fromEvent, merge, empty, interval } from 'rxjs' | ||
| import { map, switchMap, startWith, share, takeUntil } from 'rxjs/operators' | ||
| import { addPosition } from '../../utils' | ||
| const addPosition = e => { | ||
| e.position = e.type.match(/^touch/) | ||
| ? { x: e.touches[0].clientX, y: e.touches[0].clientY } | ||
| : { x: e.clientX, y: e.clientY } | ||
| return e | ||
| } | ||
| const rand = (start, end) => start + Math.random() * (end - start) | ||
| const mouse$ = Observable.merge( | ||
| Observable.fromEvent(window, 'mousemove').map(addPosition), | ||
| Observable.fromEvent(window, 'touchmove').map(addPosition) | ||
| ) | ||
| const createDragHandler = () => { | ||
| const mouse$ = merge( | ||
| fromEvent(window, 'mousemove').pipe(map(addPosition)), | ||
| fromEvent(window, 'touchmove').pipe(map(addPosition)) | ||
| ) | ||
| const end$ = Observable.merge( | ||
| Observable.fromEvent(window, 'mouseup'), | ||
| Observable.fromEvent(window, 'touchend') | ||
| ) | ||
| const end$ = merge( | ||
| fromEvent(window, 'mouseup'), | ||
| fromEvent(window, 'touchend') | ||
| ) | ||
| const createDragHandler = () => { | ||
| const start = new Subject() | ||
| const onDragStart = e => start.next(e) | ||
| const start$ = start.map(addPosition) | ||
| const start$ = new Subject() | ||
| const onDragStart = e => start$.next(e) | ||
| const drag$ = start$ | ||
| .switchMap(({ target, position: initPosition }) => { | ||
| const drag$ = start$.pipe( | ||
| map(addPosition), | ||
| switchMap(({ target, position: initPosition }) => { | ||
| const { left, top } = target.getBoundingClientRect() | ||
| return mouse$ | ||
| .map(({ position }) => ({ | ||
| return mouse$.pipe( | ||
| map(({ position }) => ({ | ||
| left: initPosition.x - left, | ||
@@ -38,11 +32,13 @@ top: initPosition.y - top, | ||
| y: position.y - (initPosition.y - top) | ||
| })) | ||
| .takeUntil(end$) | ||
| }) | ||
| .share() | ||
| })), | ||
| takeUntil(end$) | ||
| ) | ||
| }), | ||
| share() | ||
| ) | ||
| const isDragging$ = start$ | ||
| .map(() => true) | ||
| .merge(end$.map(() => false)) | ||
| .startWith(false) | ||
| const isDragging$ = merge( | ||
| start$.pipe(map(() => true)), | ||
| end$.pipe(map(() => false)) | ||
| ).pipe(startWith(false)) | ||
@@ -52,4 +48,4 @@ return { | ||
| drag$, | ||
| dragStart$: start.$, | ||
| dragEnd$: drag$.switchMap(() => end$), | ||
| dragStart$: start$, | ||
| dragEnd$: drag$.pipe(switchMap(() => end$)), | ||
| isDragging$ | ||
@@ -60,35 +56,46 @@ } | ||
| const Circle = props$ => | ||
| props$.map( | ||
| ({ | ||
| onDragStart, | ||
| position$, | ||
| isDragging$, | ||
| color = 'purple', | ||
| radius = 25, | ||
| stiffness = 120, | ||
| damping = 20 | ||
| }) => | ||
| html` | ||
| <div | ||
| ontouchstart="${onDragStart}" | ||
| onmousedown="${onDragStart}" | ||
| style=" | ||
| position: absolute; | ||
| left: 0; | ||
| top: 0; | ||
| width: ${radius * 2}px; | ||
| height: ${radius * 2}px; | ||
| background: ${color}; | ||
| border-radius: 100%; | ||
| transform: translate( | ||
| ${position$.map(p => p.x).switchMap(ease(stiffness, damping))}px, | ||
| ${position$.map(p => p.y).switchMap(ease(stiffness, damping))}px | ||
| ); | ||
| cursor: ${isDragging$.map( | ||
| isDraging => (isDraging ? '-webkit-grabbing' : '-webkit-grab') | ||
| )}; | ||
| user-select: none; | ||
| "> | ||
| </div> | ||
| ` | ||
| props$.pipe( | ||
| map( | ||
| ({ | ||
| onDragStart, | ||
| position$, | ||
| isDragging$, | ||
| color = 'purple', | ||
| radius = 25, | ||
| stiffness = 120, | ||
| damping = 20 | ||
| }) => { | ||
| const style$ = text` | ||
| position: absolute; | ||
| left: 0; | ||
| top: 0; | ||
| width: ${radius * 2}px; | ||
| height: ${radius * 2}px; | ||
| background: ${color}; | ||
| border-radius: 100%; | ||
| transform: translate( | ||
| ${position$.pipe( | ||
| map(p => p.x), | ||
| switchMap(ease(stiffness, damping)) | ||
| )}px, | ||
| ${position$.pipe( | ||
| map(p => p.y), | ||
| switchMap(ease(stiffness, damping)) | ||
| )}px | ||
| ); | ||
| cursor: ${isDragging$.pipe( | ||
| map(isDraging => (isDraging ? '-webkit-grabbing' : '-webkit-grab')) | ||
| )}; | ||
| user-select: none; | ||
| ` | ||
| return html` | ||
| <div | ||
| ontouchstart="${onDragStart}" | ||
| onmousedown="${onDragStart}" | ||
| style="${style$}"> | ||
| </div> | ||
| ` | ||
| } | ||
| ) | ||
| ) | ||
@@ -106,57 +113,66 @@ | ||
| return props$.switchMap( | ||
| ({ | ||
| exploadEvery, | ||
| onDragStart, | ||
| drag$, | ||
| isDragging$, | ||
| radius = 25, | ||
| r, | ||
| g, | ||
| b | ||
| }) => { | ||
| const position$ = drag$ | ||
| .map(drag => ({ | ||
| x: drag.x + drag.left, | ||
| y: drag.y + drag.top | ||
| })) | ||
| .merge( | ||
| isDragging$.switchMap( | ||
| bool => | ||
| bool | ||
| ? Observable.empty() | ||
| : Observable.interval(900) | ||
| .map(x => x) | ||
| .map(x => (x % exploadEvery ? randomPosition() : center())) | ||
| .startWith(randomPosition()) | ||
| return props$.pipe( | ||
| switchMap( | ||
| ({ | ||
| exploadEvery, | ||
| onDragStart, | ||
| drag$, | ||
| isDragging$, | ||
| radius = 25, | ||
| r, | ||
| g, | ||
| b | ||
| }) => { | ||
| const position$ = merge( | ||
| drag$.pipe( | ||
| map(drag => ({ | ||
| x: drag.x + drag.left, | ||
| y: drag.y + drag.top | ||
| })) | ||
| ), | ||
| isDragging$.pipe( | ||
| switchMap( | ||
| bool => | ||
| bool | ||
| ? empty() | ||
| : interval(900).pipe( | ||
| map(x => x), | ||
| map( | ||
| x => (x % exploadEvery ? randomPosition() : center()) | ||
| ), | ||
| startWith(randomPosition()) | ||
| ) | ||
| ) | ||
| ) | ||
| ) | ||
| .startWith(center()) | ||
| ).pipe(startWith(center())) | ||
| return html` | ||
| <div> | ||
| ${Array(7) | ||
| .fill(0) | ||
| .map( | ||
| (_, i, xs) => | ||
| html` | ||
| <${Circle} | ||
| ${{ | ||
| isDragging$, | ||
| position$: position$.map(({ x, y }) => ({ | ||
| x: x - (radius + i), | ||
| y: y - (radius + i) | ||
| })), | ||
| onDragStart: onDragStart, | ||
| stiffness: 120 + 15 * i, | ||
| damping: 25 - i * 2, | ||
| radius: radius + i, | ||
| color: `rgba(${r}, ${g}, ${b}, ${i / xs.length})` | ||
| }} | ||
| /> | ||
| ` | ||
| )} | ||
| </div> | ||
| ` | ||
| } | ||
| return html` | ||
| <div> | ||
| ${Array(7) | ||
| .fill(0) | ||
| .map( | ||
| (_, i, xs) => | ||
| html` | ||
| <${Circle} | ||
| ${{ | ||
| isDragging$, | ||
| position$: position$.pipe( | ||
| map(({ x, y }) => ({ | ||
| x: x - (radius + i), | ||
| y: y - (radius + i) | ||
| })) | ||
| ), | ||
| onDragStart: onDragStart, | ||
| stiffness: 120 + 15 * i, | ||
| damping: 25 - i * 2, | ||
| radius: radius + i, | ||
| color: `rgba(${r}, ${g}, ${b}, ${i / xs.length})` | ||
| }} | ||
| /> | ||
| ` | ||
| )} | ||
| </div> | ||
| ` | ||
| } | ||
| ) | ||
| ) | ||
@@ -167,2 +183,3 @@ } | ||
| const { onDragStart, drag$, isDragging$ } = createDragHandler() | ||
| return html` | ||
@@ -169,0 +186,0 @@ <div mount="${() => console.log('complex create')}"> |
@@ -1,120 +0,21 @@ | ||
| import { Observable } from 'rxjs' | ||
| import html, { ease, createState, all } from 'evolui' | ||
| import { createFetcher } from '../../../utils' | ||
| import Select from './../../Select' | ||
| import html, { createState } from 'evolui' | ||
| import { from } from 'rxjs' | ||
| import { startWith, switchMap } from 'rxjs/operators' | ||
| import './index.css' | ||
| import { getLikes } from './Api' | ||
| import ModelCard from './ModelCard' | ||
| const windowDimension$ = Observable.fromEvent(window, 'resize') | ||
| .map(() => ({ width: window.innerWidth, height: window.innerHeight })) | ||
| .startWith({ width: window.innerWidth, height: window.innerHeight }) | ||
| .shareReplay(1) | ||
| import Select from './../../Select' | ||
| import Grid from './Grid' | ||
| const colCount$ = windowDimension$.map( | ||
| ({ width }) => (width < 480 ? 1 : width < 960 ? 2 : width < 1280 ? 3 : 4) | ||
| ) | ||
| export const memoize = f => { | ||
| const cache = new Map() | ||
| return params => { | ||
| if (cache[params]) return cache[params] | ||
| cache[params] = f(params) | ||
| return cache[params] | ||
| } | ||
| } | ||
| const gutterSize = 10 | ||
| const likesFetcher = memoize(getLikes) | ||
| const Grid = props$ => | ||
| props$.map(({ models }) => { | ||
| const state = createState({ sort: 'none' }) | ||
| const sortOptions = [ | ||
| { title: 'none', value: 'none' }, | ||
| { title: 'viewCount', value: 'viewCount' }, | ||
| { title: 'createdAt', value: 'createdAt' }, | ||
| { title: 'shuffle', value: 'shuffle' } | ||
| ] | ||
| const modelsAndDimensions$ = all([state.sort, colCount$]).map( | ||
| ([sort, colCount]) => { | ||
| const sortedModels = models | ||
| .slice() | ||
| .sort( | ||
| (a, b) => | ||
| sort === 'none' | ||
| ? 0 | ||
| : sort === 'viewCount' | ||
| ? b.viewCount - a.viewCount | ||
| : sort === 'createdAt' | ||
| ? new Date(b.createdAt).getTime() - | ||
| new Date(a.createdAt).getTime() | ||
| : sort === 'shuffle' ? (Math.random() > 0.5 ? 1 : -1) : 0 | ||
| ) | ||
| // [Model] -> [[{ width, height, x, y }, Model]] | ||
| return sortedModels.reduce((grid, model, index) => { | ||
| const cardAbove = grid[index - colCount] | ||
| const height = Math.max(300, Math.min(800, model.name.length * 30)) | ||
| const width$ = windowDimension$.map( | ||
| ({ width }) => | ||
| width / colCount - (gutterSize * 2 + gutterSize * (colCount - 1)) | ||
| ) | ||
| const x$ = width$.map(width => { | ||
| const col = index % colCount | ||
| return col * (width + gutterSize) | ||
| }) | ||
| const y = cardAbove | ||
| ? cardAbove[0].y + cardAbove[0].height + gutterSize | ||
| : 0 | ||
| const dimension = { | ||
| height, | ||
| y, | ||
| width$, | ||
| x$, | ||
| height$: Observable.of(height), | ||
| y$: Observable.of(y) | ||
| } | ||
| return grid.concat([[dimension, model]]) | ||
| }, []) | ||
| } | ||
| ) | ||
| return html` | ||
| <div class="grid"> | ||
| <${Select} | ||
| value=${state.sort} | ||
| onChange=${state.sort.set} | ||
| options=${sortOptions} | ||
| /> | ||
| <button onclick="${() => state.sort.set('shuffle')}"> | ||
| Shuffle | ||
| </button> | ||
| <div class="container"> | ||
| ${modelsAndDimensions$.map(modelsAndDimensions => | ||
| modelsAndDimensions.map( | ||
| ([dimension, model]) => | ||
| html` | ||
| <${ModelCard} | ||
| model=${model} | ||
| x=${dimension.x$.switchMap(ease(150, 18, model.uid + 'x'))} | ||
| y=${dimension.y$.switchMap(ease(120, 25, model.uid + 'y'))} | ||
| height=${dimension.height$.switchMap( | ||
| ease(170, 20, model.uid + 'height') | ||
| )} | ||
| width=${dimension.width$.switchMap( | ||
| ease(170, 20, model.uid + 'width') | ||
| )} | ||
| /> | ||
| ` | ||
| ) | ||
| )} | ||
| </div> | ||
| </div> | ||
| ` | ||
| }) | ||
| const likesFetcher = createFetcher(getLikes) | ||
| const SketchfabGrid = () => { | ||
@@ -128,5 +29,6 @@ const users = [ | ||
| const models$ = state.userId | ||
| .switchMap(userId => Observable.fromPromise(likesFetcher(userId))) | ||
| .startWith([]) | ||
| const models$ = state.userId.pipe( | ||
| switchMap(userId => from(likesFetcher(userId))), | ||
| startWith([]) | ||
| ) | ||
@@ -141,3 +43,3 @@ return html` | ||
| <${Grid} models=${models$} /> | ||
| <${Grid} models=${models$} /> | ||
| </div> | ||
@@ -144,0 +46,0 @@ ` |
| import html from 'evolui' | ||
| import { map } from 'rxjs/operators' | ||
| import './index.css' | ||
@@ -14,8 +15,10 @@ | ||
| const ModelCard = props$ => { | ||
| const style$ = props$.map( | ||
| ({ x, y, width, height }) => ` | ||
| transform: translate(${x}px, ${y}px); | ||
| height: ${height}px; | ||
| width: ${width}px; | ||
| ` | ||
| const style$ = props$.pipe( | ||
| map( | ||
| ({ x, y, width, height }) => ` | ||
| transform: translate(${x}px, ${y}px); | ||
| height: ${height}px; | ||
| width: ${width}px; | ||
| ` | ||
| ) | ||
| ) | ||
@@ -26,3 +29,3 @@ | ||
| target="_blank" | ||
| href="${props$.map(p => p.model.viewerUrl)}" | ||
| href="${props$.pipe(map(p => p.model.viewerUrl))}" | ||
| class="card" | ||
@@ -32,6 +35,6 @@ style="${style$}"> | ||
| class="cardImage" | ||
| style="background-image: url(${props$.map(p => | ||
| getImageUrl(p.model) | ||
| style="background-image: url(${props$.pipe( | ||
| map(p => getImageUrl(p.model)) | ||
| )});"></div> | ||
| <p class="name">${props$.map(p => p.model.name)}</p> | ||
| <p class="name">${props$.pipe(map(p => p.model.name))}</p> | ||
| </a> | ||
@@ -38,0 +41,0 @@ ` |
@@ -1,47 +0,51 @@ | ||
| import { Observable } from 'rxjs' | ||
| import html, { ease } from 'evolui' | ||
| import { merge, fromEvent } from 'rxjs' | ||
| import { map, switchMap, startWith } from 'rxjs/operators' | ||
| import { addPosition } from '../../utils' | ||
| const toPosition = e => { | ||
| e.position = e.type.match(/^touch/) | ||
| ? { x: e.touches[0].clientX, y: e.touches[0].clientY } | ||
| : { x: e.clientX, y: e.clientY } | ||
| const Circle = props$ => { | ||
| const position$ = merge( | ||
| fromEvent(window, 'mousemove').pipe(map(addPosition), map(e => e.position)), | ||
| fromEvent(window, 'touchmove').pipe(map(addPosition), map(e => e.position)) | ||
| ).pipe(startWith({ x: 0, y: 0 })) | ||
| return e | ||
| return props$.pipe( | ||
| map( | ||
| ({ | ||
| color = 'purple', | ||
| radius = 25, | ||
| stiffness = 120, | ||
| damping = 20 | ||
| } = {}) => { | ||
| return html` | ||
| <div | ||
| style=" | ||
| position: absolute; | ||
| left: 0; | ||
| top: 0; | ||
| width: ${radius * 2}px; | ||
| height: ${radius * 2}px; | ||
| background: ${color}; | ||
| border-radius: 100%; | ||
| z-index: -1; | ||
| transform: translate( | ||
| ${position$.pipe( | ||
| map(p => p.x - radius), | ||
| switchMap(ease(stiffness, damping)) | ||
| )}px, | ||
| ${position$.pipe( | ||
| map(p => p.y - radius), | ||
| switchMap(ease(stiffness, damping)) | ||
| )}px | ||
| ); | ||
| "> | ||
| </div> | ||
| ` | ||
| } | ||
| ) | ||
| ) | ||
| } | ||
| const position$ = Observable.merge( | ||
| Observable.fromEvent(window, 'mousemove').map(toPosition), | ||
| Observable.fromEvent(window, 'touchmove').map(toPosition) | ||
| ).startWith({ x: 0, y: 0 }) | ||
| const Circle = props$ => | ||
| props$.map( | ||
| ({ color = 'purple', radius = 25, stiffness = 120, damping = 20 } = {}) => { | ||
| return html` | ||
| <div | ||
| style=" | ||
| position: absolute; | ||
| left: 0; | ||
| top: 0; | ||
| width: ${radius * 2}px; | ||
| height: ${radius * 2}px; | ||
| background: ${color}; | ||
| border-radius: 100%; | ||
| z-index: -1; | ||
| transform: translate( | ||
| ${position$ | ||
| .map(p => p.x - radius) | ||
| .switchMap(ease(stiffness, damping))}px, | ||
| ${position$ | ||
| .map(p => p.y - radius) | ||
| .switchMap(ease(stiffness, damping))}px | ||
| ); | ||
| "> | ||
| </div> | ||
| ` | ||
| } | ||
| ) | ||
| export default () => html` | ||
| <${Circle} radius=${35} color="rgb(5, 241, 163)" /> | ||
| ` |
| import html, { ease, all, createState } from 'evolui' | ||
| import { Observable } from 'rxjs' | ||
| import { fromEvent } from 'rxjs' | ||
| import { map, startWith } from 'rxjs/operators' | ||
| const window$ = Observable.fromEvent(window, 'resize') | ||
| .startWith(undefined) | ||
| .map(() => ({ | ||
| const window$ = fromEvent(window, 'resize').pipe( | ||
| startWith(undefined), | ||
| map(() => ({ | ||
| width: window.innerWidth, | ||
| height: window.innerHeight | ||
| })) | ||
| ) | ||
| const mouse$ = Observable.fromEvent(window, 'mousemove') | ||
| .map(e => ({ | ||
| const mouse$ = fromEvent(window, 'mousemove').pipe( | ||
| map(e => ({ | ||
| x: e.clientX, | ||
| y: e.clientY | ||
| })) | ||
| .startWith({ x: 0, y: 0 }) | ||
| })), | ||
| startWith({ x: 0, y: 0 }) | ||
| ) | ||
@@ -26,6 +29,8 @@ const SvgAnimation = () => { | ||
| const position$ = all([state.elPosition, mouse$]).map(([el, mouse]) => ({ | ||
| x: mouse.x - el.x, | ||
| y: mouse.y - el.y | ||
| })) | ||
| const position$ = all([state.elPosition, mouse$]).pipe( | ||
| map(([el, mouse]) => ({ | ||
| x: mouse.x - el.x, | ||
| y: mouse.y - el.y | ||
| })) | ||
| ) | ||
@@ -35,7 +40,7 @@ return html` | ||
| mount=${onMount} | ||
| height="${window$.map(w => w.height)}" | ||
| width="${window$.map(w => w.width)}"> | ||
| height="${window$.pipe(map(w => w.height))}" | ||
| width="${window$.pipe(map(w => w.width))}"> | ||
| <circle | ||
| cx="${position$.map(p => p.x).map(ease(120, 18))}" | ||
| cy="${position$.map(p => p.y).map(ease(120, 18))}" | ||
| cx="${position$.pipe(map(p => p.x), map(ease(120, 18)))}" | ||
| cy="${position$.pipe(map(p => p.y), map(ease(120, 18)))}" | ||
| r="40" | ||
@@ -42,0 +47,0 @@ fill="rgba(57, 77, 255)" /> |
@@ -0,4 +1,5 @@ | ||
| import html from 'evolui' | ||
| import io from 'socket.io-client' | ||
| import { Observable } from 'rxjs' | ||
| import html from 'evolui' | ||
| import { scan, startWith, map } from 'rxjs/operators' | ||
@@ -24,6 +25,7 @@ const Chat = () => { | ||
| <input onkeydown="${onKeyDown}" /> | ||
| ${message$ | ||
| .scan((acc, x) => [...acc, x], []) | ||
| .startWith([]) | ||
| .map(messages => messages.map(message => html`<p>${message}</p>`))} | ||
| ${message$.pipe( | ||
| scan((acc, x) => [...acc, x], []), | ||
| startWith([]), | ||
| map(messages => messages.map(message => html`<p>${message}</p>`)) | ||
| )} | ||
| </div> | ||
@@ -30,0 +32,0 @@ ` |
| import html from 'evolui' | ||
| import { Observable } from 'rxjs' | ||
| import { from } from 'rxjs' | ||
| import { startWith } from 'rxjs/operators' | ||
@@ -13,6 +14,6 @@ const getCharacter = id => | ||
| id => html` | ||
| <h1> | ||
| ${Observable.fromPromise(getCharacter(id)).startWith('Loading...')} | ||
| </h1> | ||
| ` | ||
| <h1> | ||
| ${from(getCharacter(id)).pipe(startWith('Loading...'))} | ||
| </h1> | ||
| ` | ||
| )} | ||
@@ -19,0 +20,0 @@ </div> |
| import html from 'evolui' | ||
| import { Observable } from 'rxjs' | ||
| import { fromEvent } from 'rxjs' | ||
| import { map, startWith, share } from 'rxjs/operators' | ||
| const mouse = Observable.fromEvent(window, 'mousemove') | ||
| .map(e => ({ x: e.clientX, y: e.clientY })) | ||
| .startWith({ x: 0, y: 0 }) | ||
| const MouseTracker = () => { | ||
| const mouse = fromEvent(window, 'mousemove').pipe( | ||
| map(e => ({ x: e.clientX, y: e.clientY })), | ||
| startWith({ x: 0, y: 0 }), | ||
| share() | ||
| ) | ||
| const MouseTracker = () => html` | ||
| <div> | ||
| <span>x: ${mouse.map(({ x }) => x)}</span> | ||
| <span>y: ${mouse.map(({ y }) => y)}</span> | ||
| </div> | ||
| ` | ||
| return html` | ||
| <div> | ||
| <span>x: ${mouse.pipe(map(({ x }) => x))}</span> | ||
| <span>y: ${mouse.pipe(map(({ y }) => y))}</span> | ||
| </div> | ||
| ` | ||
| } | ||
| export default MouseTracker |
| import html from 'evolui' | ||
| import { map } from 'rxjs/operators' | ||
| const Select = props$ => | ||
| props$.map( | ||
| ({ options, onChange, value }) => html` | ||
| <select onchange="${e => onChange(e.target.value)}"> | ||
| ${options.map( | ||
| option => html` | ||
| <option | ||
| ${option.value === value ? 'selected' : ''} | ||
| value="${option.value}">${option.title}</option> | ||
| ` | ||
| )} | ||
| </select> | ||
| ` | ||
| props$.pipe( | ||
| map( | ||
| ({ options, onChange, value }) => html` | ||
| <select onchange="${e => onChange(e.target.value)}"> | ||
| ${options.map( | ||
| option => html` | ||
| <option | ||
| ${option.value === value ? 'selected' : ''} | ||
| value="${option.value}">${option.title}</option> | ||
| ` | ||
| )} | ||
| </select> | ||
| ` | ||
| ) | ||
| ) | ||
| export default Select |
| import html, { text, createState } from 'evolui' | ||
| import { set } from 'immutable-deep-update' | ||
| import { Observable } from 'rxjs' | ||
| import { from, of } from 'rxjs' | ||
| import { distinctUntilChanged, switchMap, map } from 'rxjs/operators' | ||
| import initialCellsState from './initialCellsState' | ||
@@ -8,24 +9,24 @@ | ||
| const range = (start, end) => | ||
| Array(end - start) | ||
| .fill(0) | ||
| .map((_, i) => i + start) | ||
| const flatMap = (f, xs) => xs.reduce((acc, x) => acc.concat(f(x)), []) | ||
| const flatten = xs => flatMap(x => x, xs) | ||
| const addQuotes = str => `"${str.replace('"', '\\"')}"` | ||
| const Spreadsheet = () => { | ||
| const range = (start, end) => | ||
| Array(end - start) | ||
| .fill(0) | ||
| .map((_, i) => i + start) | ||
| const flatMap = (f, xs) => xs.reduce((acc, x) => acc.concat(f(x)), []) | ||
| const flatten = xs => flatMap(x => x, xs) | ||
| const addQuotes = str => `"${str.replace('"', '\\"')}"` | ||
| const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' | ||
| const rowCount = 15 | ||
| const colCount = 8 | ||
| const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' | ||
| const rowCount = 15 | ||
| const colCount = 8 | ||
| const createKey = (i, j) => `${j}${i}` | ||
| const createKey = (i, j) => `${j}${i}` | ||
| const createCellState = (value = '') => ({ value, focus: false }) | ||
| const createCellState = (value = '') => ({ value, focus: false }) | ||
| const formulaRegexp = /^\{(.+)\}$/ | ||
| const cellRefRegexp = /([A-Z][0-9]+)/g | ||
| const isNumber = x => !isNaN(parseFloat(x)) && !x.match(/([a-z]|\s)/i) | ||
| const isValidExpression = x => isNumber(x) || formulaRegexp.test(x) | ||
| const formulaRegexp = /^\{(.+)\}$/ | ||
| const cellRefRegexp = /([A-Z][0-9]+)/g | ||
| const isNumber = x => !isNaN(parseFloat(x)) && !x.match(/([a-z]|\s)/i) | ||
| const isValidExpression = x => isNumber(x) || formulaRegexp.test(x) | ||
| const Spreadsheet = () => { | ||
| const grid = range(0, rowCount).map(i => | ||
@@ -51,26 +52,30 @@ range(0, colCount).map(j => [i + 1, alphabet[j]]) | ||
| // eslint-disable-next-line | ||
| getCellValue(key).map( | ||
| value => (isValidExpression(value) ? value : addQuotes(value)) | ||
| getCellValue(key).pipe( | ||
| map(value => (isValidExpression(value) ? value : addQuotes(value))) | ||
| ) | ||
| ) | ||
| return Observable.from(text(strings, ...variables)).map(expr => { | ||
| try { | ||
| return `${eval(expr)}` // unsafe but good enough for the example | ||
| } catch (e) { | ||
| return expr | ||
| } | ||
| }) | ||
| return from(text(strings, ...variables)).pipe( | ||
| map(expr => { | ||
| try { | ||
| return `${eval(expr)}` // unsafe but good enough for the example | ||
| } catch (e) { | ||
| return expr | ||
| } | ||
| }) | ||
| ) | ||
| } | ||
| const getCellState = key => Observable.from(state[key]).distinctUntilChanged() | ||
| const getCellState = key => from(state[key]).pipe(distinctUntilChanged()) | ||
| const getCellValue = key => | ||
| getCellState(key).switchMap(({ value, focus }) => { | ||
| if (focus || !formulaRegexp.test(value)) return Observable.of(value) | ||
| const [, formula] = value.match(formulaRegexp) | ||
| return parseFormula(formula) | ||
| }) | ||
| getCellState(key).pipe( | ||
| switchMap(({ value, focus }) => { | ||
| if (focus || !formulaRegexp.test(value)) return of(value) | ||
| const [, formula] = value.match(formulaRegexp) | ||
| return parseFormula(formula) | ||
| }) | ||
| ) | ||
| const getCellFocus = key => getCellState(key).map(({ focus }) => focus) | ||
| const getCellFocus = key => getCellState(key).pipe(map(({ focus }) => focus)) | ||
@@ -98,4 +103,4 @@ const setCellFocus = (key, focus) => state[key].set(set('focus', focus)) | ||
| <input | ||
| ${getCellFocus(key).map( | ||
| focus => (focus ? 'autofocus' : '') | ||
| ${getCellFocus(key).pipe( | ||
| map(focus => (focus ? 'autofocus' : '')) | ||
| )} | ||
@@ -128,4 +133,4 @@ value="${getCellValue(key)}" | ||
| <p> | ||
| ${Spreadsheet()} | ||
| <${Spreadsheet} /> | ||
| </div> | ||
| ` |
| import html from 'evolui' | ||
| import { Observable } from 'rxjs' | ||
| import { interval } from 'rxjs' | ||
| import { map, startWith } from 'rxjs/operators' | ||
| const Ticker = () => html` | ||
| <span> | ||
| ${Observable.interval(1000) | ||
| .map(x => x + 1) | ||
| .startWith(0)} | ||
| ${interval(1000).pipe(map(x => x + 1), startWith(0))} | ||
| </span> | ||
@@ -10,0 +9,0 @@ ` |
@@ -1,2 +0,2 @@ | ||
| import createStore from '../../createStore' | ||
| import createStore from './createStore' | ||
@@ -3,0 +3,0 @@ import { |
| import html from 'evolui' | ||
| import { map } from 'rxjs/operators' | ||
| import InputBar from './InputBar' | ||
| import TodoList from './TodoList' | ||
| import configureStore, { ADD_TODO, UPDATE_TEXT } from './configureStore' | ||
| import configureStore from './configureStore' | ||
| import { ADD_TODO, UPDATE_TEXT } from './actions' | ||
@@ -10,3 +12,7 @@ const TodoApp = () => { | ||
| <div> | ||
| <${InputBar} store=${store} /> | ||
| <${InputBar} | ||
| value=${store.state.pipe(map(({ text }) => text))} | ||
| onChange=${text => store.dispatch({ type: UPDATE_TEXT, text })} | ||
| onSubmit=${text => store.dispatch({ type: ADD_TODO, text })} | ||
| /> | ||
| <${TodoList} store=${store} /> | ||
@@ -13,0 +19,0 @@ </div> |
| import html from 'evolui' | ||
| import { ADD_TODO, UPDATE_TEXT } from './actions' | ||
| import { map } from 'rxjs/operators' | ||
| const InputBar = props$ => | ||
| props$.map(({ store }) => { | ||
| const onKeyDown = e => { | ||
| if (e.which === 13) | ||
| store.dispatch({ type: ADD_TODO, text: e.target.value }) | ||
| } | ||
| props$.pipe( | ||
| map(({ value, onChange, onSubmit }) => { | ||
| const onKeyDown = e => { | ||
| if (e.which === 13) onSubmit(value) | ||
| } | ||
| const onInput = e => | ||
| store.dispatch({ type: UPDATE_TEXT, text: e.target.value }) | ||
| const onInput = e => onChange(e.target.value) | ||
| return html` | ||
| <input | ||
| value="${store.state.map(({ text }) => text)}" | ||
| oninput=${onInput} | ||
| onkeydown=${onKeyDown} /> | ||
| ` | ||
| }) | ||
| return html` | ||
| <input | ||
| value=${value} | ||
| onInput=${onInput} | ||
| onKeyDown=${onKeyDown} /> | ||
| ` | ||
| }) | ||
| ) | ||
| export default InputBar |
| import html from 'evolui' | ||
| import { map } from 'rxjs/operators' | ||
| const Todo = props$ => { | ||
| return props$.map( | ||
| ({ todo, onToggleComplete, onStopEdit, onToggle, onInput, onRemove }) => { | ||
| const onKeyDown = e => { | ||
| if (e.which === 13) onStopEdit() | ||
| return props$.pipe( | ||
| map( | ||
| ({ todo, onToggleComplete, onStopEdit, onToggle, onInput, onRemove }) => { | ||
| const onKeyDown = e => { | ||
| if (e.which === 13) onStopEdit() | ||
| } | ||
| return html` | ||
| <li | ||
| mount="${() => console.log('todo created!', todo.text)}" | ||
| update="${() => console.log('todo updated!', todo.text)}" | ||
| unmount="${() => console.log('todo removed ;(', todo.text)}"> | ||
| ${ | ||
| todo.isEditing | ||
| ? html` | ||
| <input | ||
| autofocus | ||
| value="${todo.text}" | ||
| onInput="${onInput}" | ||
| onKeyDown="${onKeyDown}" | ||
| onBlur="${onStopEdit}" /> | ||
| ` | ||
| : html` | ||
| <span | ||
| onClick="${onToggleComplete}" | ||
| style=${{ | ||
| textDecoration: todo.isComplete | ||
| ? 'line-through' | ||
| : 'none' | ||
| }}> | ||
| ${todo.text} | ||
| </span> | ||
| ` | ||
| } | ||
| <button onclick=${onRemove}>X</button> | ||
| <button onclick=${onToggle}>Edit</button> | ||
| </li> | ||
| ` | ||
| } | ||
| return html` | ||
| <li | ||
| mount="${() => console.log('todo created!', todo.text)}" | ||
| update="${() => console.log('todo updated!', todo.text)}" | ||
| unmount="${() => console.log('todo removed ;(', todo.text)}"> | ||
| ${ | ||
| todo.isEditing | ||
| ? html` | ||
| <input | ||
| autofocus | ||
| value="${todo.text}" | ||
| onInput="${onInput}" | ||
| onKeyDown="${onKeyDown}" | ||
| onBlur="${onStopEdit}" /> | ||
| ` | ||
| : html` | ||
| <span | ||
| onClick="${onToggleComplete}" | ||
| style=${{ | ||
| textDecoration: todo.isComplete ? 'line-through' : 'none' | ||
| }}> | ||
| ${todo.text} | ||
| </span> | ||
| ` | ||
| } | ||
| <button onclick=${onRemove}>X</button> | ||
| <button onclick=${onToggle}>Edit</button> | ||
| </li> | ||
| ` | ||
| } | ||
| ) | ||
| ) | ||
@@ -41,0 +46,0 @@ } |
| import html from 'evolui' | ||
| import { pluck, distinctUntilChanged, map } from 'rxjs/operators' | ||
| import Todo from './Todo' | ||
@@ -12,35 +13,42 @@ import { | ||
| const TodoList = props$ => | ||
| props$.map(({ store }) => { | ||
| return html` | ||
| <ul> | ||
| ${store.state | ||
| .pluck('todos') | ||
| .distinctUntilChanged() | ||
| .map(todos => | ||
| todos.map( | ||
| todo => | ||
| html`<${Todo} ${{ | ||
| key: todo.text, | ||
| todo, | ||
| onToggleComplete: () => | ||
| store.dispatch({ type: TOGGLE_TODO, id: todo.id }), | ||
| onStopEdit: () => | ||
| store.dispatch({ type: STOP_EDIT_TODO, id: todo.id }), | ||
| onToggle: () => | ||
| store.dispatch({ type: TOGGLE_EDIT_TODO, id: todo.id }), | ||
| onInput: e => | ||
| store.dispatch({ | ||
| type: UPDATE_TODO, | ||
| id: todo.id, | ||
| text: e.target.value | ||
| }), | ||
| onRemove: () => | ||
| store.dispatch({ type: REMOVE_TODO, id: todo.id }) | ||
| }} />` | ||
| props$.pipe( | ||
| map(({ store }) => { | ||
| return html` | ||
| <ul> | ||
| ${store.state.pipe( | ||
| pluck('todos'), | ||
| distinctUntilChanged(), | ||
| map(todos => | ||
| todos.map( | ||
| todo => | ||
| html` | ||
| <${Todo} | ||
| ${{ | ||
| key: todo.text, | ||
| todo, | ||
| onToggleComplete: () => | ||
| store.dispatch({ type: TOGGLE_TODO, id: todo.id }), | ||
| onStopEdit: () => | ||
| store.dispatch({ type: STOP_EDIT_TODO, id: todo.id }), | ||
| onToggle: () => | ||
| store.dispatch({ type: TOGGLE_EDIT_TODO, id: todo.id }), | ||
| onInput: e => | ||
| store.dispatch({ | ||
| type: UPDATE_TODO, | ||
| id: todo.id, | ||
| text: e.target.value | ||
| }), | ||
| onRemove: () => | ||
| store.dispatch({ type: REMOVE_TODO, id: todo.id }) | ||
| }} | ||
| /> | ||
| ` | ||
| ) | ||
| ) | ||
| )} | ||
| </ul> | ||
| ` | ||
| }) | ||
| </ul> | ||
| ` | ||
| }) | ||
| ) | ||
| export default TodoList |
| import html, { render, createState } from 'evolui' | ||
| import { map } from 'rxjs/operators' | ||
| import Select from './components/Select' | ||
| import PinterestLikeGrid from './components/animations/PinterestLikeGrid' | ||
| import ComplexAnimation from './components/animations/ComplexAnimation' | ||
| import SimpleAnimation from './components/animations/SimpleAnimation' | ||
| import SvgAnimation from './components/animations/SvgAnimation' | ||
| import Spreadsheet from './components/Spreadsheet' | ||
| import Ticker from './components/Ticker' | ||
| import TodoList from './components/TodoList' | ||
| import Chat from './components/Chat' | ||
| import MouseTracker from './components/MouseTracker' | ||
| import HttpRequest from './components/HttpRequest' | ||
| import Chat from './components/Chat' | ||
| import Spreadsheet from './components/Spreadsheet' | ||
| import SimpleAnimation from './components/animations/SimpleAnimation' | ||
| import ComplexAnimation from './components/animations/ComplexAnimation' | ||
| import SvgAnimation from './components/animations/SvgAnimation' | ||
| import PinterestLikeGrid from './components/animations/PinterestLikeGrid' | ||
@@ -31,12 +32,12 @@ import './index.css' | ||
| const components = { | ||
| PinterestLikeGrid, | ||
| ComplexAnimation, | ||
| SimpleAnimation, | ||
| SvgAnimation, | ||
| Spreadsheet, | ||
| Ticker, | ||
| TodoList, | ||
| SimpleAnimation, | ||
| ComplexAnimation, | ||
| SvgAnimation, | ||
| PinterestLikeGrid, | ||
| Chat, | ||
| MouseTracker, | ||
| HttpRequest, | ||
| Ticker | ||
| HttpRequest | ||
| } | ||
@@ -47,4 +48,2 @@ | ||
| const component$ = state.selectedExample.map(name => components[name]) | ||
| return html` | ||
@@ -63,3 +62,6 @@ <div> | ||
| ${component$.map(Component => html`<${Component} />`)} | ||
| ${state.selectedExample.pipe( | ||
| map(name => components[name]), | ||
| map(Component => html`<${Component} />`) | ||
| )} | ||
| </div> | ||
@@ -66,0 +68,0 @@ ` |
@@ -1,17 +0,7 @@ | ||
| import { Observable, Subject } from 'rxjs' | ||
| export const addPosition = e => { | ||
| e.position = e.type.match(/^touch/) | ||
| ? { x: e.touches[0].clientX, y: e.touches[0].clientY } | ||
| : { x: e.clientX, y: e.clientY } | ||
| export const listen = (element, event) => | ||
| new Observable(observer => { | ||
| const handler = e => observer.next(e) | ||
| element.addEventListener(event, handler) | ||
| return { unsubscribe: () => element.removeEventListener(event, handler) } | ||
| }) | ||
| export const createFetcher = getPromise => { | ||
| const cache = new Map() | ||
| return params => { | ||
| if (cache[params]) return cache[params] | ||
| cache[params] = getPromise(params) | ||
| return cache[params] | ||
| } | ||
| return e | ||
| } |
@@ -1,1 +0,1 @@ | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var commonjsGlobal="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function unwrapExports(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function createCommonjsModule(e,t){return e(t={exports:{}},t.exports),t.exports}var lib=createCommonjsModule(function(e,t){Object.defineProperty(t,"__esModule",{value:!0});var r=function(e){return 0!==e&&(!e||"string"==typeof e&&!e.trim())},n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},i=function(){return function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var r=[],n=!0,o=!1,i=void 0;try{for(var s,u=e[Symbol.iterator]();!(n=(s=u.next()).done)&&(r.push(s.value),!t||r.length!==t);n=!0);}catch(e){o=!0,i=e}finally{try{!n&&u.return&&u.return()}finally{if(o)throw i}}return r}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),s=function(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)};var u,c=(u=0,function(e){return e.reduce(function(e,t){return o({},e,(i=u++,(n=t)in(r={})?Object.defineProperty(r,n,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[n]=i,r));var r,n,i},{})}),a=c(["Text","Tag","ClosingTag","Attr","AttrKey","AttrValue","AttrValueSingleQuote","AttrValueDoubleQuote"]),l=c(["Text","OpenTag","AttributeName","AttributeValue","CloseTag","SelfCloseTag","ClosingTag","VTree"]),b=c(["Node","VTree","Text"]);function p(e){for(var t=[],n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:a.Text,o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",i=0;i<e.length;i++){var s=e[i];switch(n){case a.Text:"<"===s?(r(o)||t.push({type:l.Text,value:o}),o="",n=a.Tag):o+=s;continue;case a.Tag:/\s/.test(s)?(t.push({type:l.OpenTag,value:o}),o="",n=a.Attr):">"===s?(t.push({type:l.OpenTag,value:o}),t.push({type:l.CloseTag}),o="",n=a.Text):"/"===s&&""===o?n=a.ClosingTag:o+=s;continue;case a.ClosingTag:">"===s?(t.push({type:l.ClosingTag,value:o}),o="",n=a.Text):o+=s;continue;case a.Attr:">"===s?("/"===o?t.push({type:l.SelfCloseTag}):t.push({type:l.CloseTag}),o="",n=a.Text):/\s/.test(s)||("/"===s?o+=s:(o+=s,n=a.AttrKey));continue;case a.AttrKey:"="===s?(""!==o&&t.push({type:l.AttributeName,value:o}),o="",n=a.AttrValue):/\s/.test(s)?(""!==o&&t.push({type:l.AttributeName,value:o}),o="",n=a.Attr):o+=s;continue;case a.AttrValue:/\s/.test(s)?(t.push({type:l.AttributeValue,value:o}),o="",n=a.Attr):">"===s?(t.push({type:l.AttributeValue,value:o}),t.push({type:l.CloseTag}),o="",n=a.Text):""===o&&"'"===s?n=a.AttrValueSingleQuote:""===o&&'"'===s?n=a.AttrValueDoubleQuote:o+=s;continue;case a.AttrValueSingleQuote:"'"===s?(t.push({type:l.AttributeValue,value:o}),o="",n=a.Attr):o+=s;continue;case a.AttrValueDoubleQuote:'"'===s?(t.push({type:l.AttributeValue,value:o}),o="",n=a.Attr):o+=s;continue}}return[t,n,o]}var f=function(e){return[(t=function(e){var t=i(e,2),r=t[0],n=t[1];return r.trim()?[{type:l.AttributeName,value:r},{type:l.AttributeValue,value:n}]:[]},r=function(e){for(var t=[],r=Object.keys(e),n=0;n<r.length;++n)t.push([r[n],e[r[n]]]);return t}(e),r.reduce(function(e,r){return e.concat(t(r))},[])),a.Attr];var t,r},h=function(e){return e.split(/\s+/).filter(function(e){return e.trim()}).reduce(function(e,t){var r=i(e,1)[0],n=t.split("="),o=i(n,2),s=o[0],u=o[1];return u?[r.concat([{type:l.AttributeName,value:s},{type:l.AttributeValue,value:u}]),a.Attr]:[r.concat([{type:l.AttributeName,value:s}]),a.AttrKey]},[[],a.Attr])};function y(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:l.Text,o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";if(void 0===e)return[[],t,o];var s=[],u=t,c=o;switch(u){case a.Text:"object"===(void 0===e?"undefined":n(e))?(r(c)||s.push({type:l.Text,value:c}),s.push({type:l.VTree,value:e}),c=""):(r(c)||s.push({type:l.Text,value:c}),r(e)||s.push({type:l.Text,value:e.toString()}),c="");break;case a.Tag:case a.ClosingTag:""!==c?c+=e:c=e;break;case a.Attr:if("object"===(void 0===e?"undefined":n(e))){var b=f(e),p=i(b,2);s=p[0],u=p[1]}else{if("string"!=typeof e)throw new Error("Variable "+e+" of type '"+(void 0===e?"undefined":n(e))+"' is not supported in the State.Attr context");var y=h(e),v=i(y,2);s=v[0],u=v[1]}break;case a.AttrKey:throw new Error("Variable "+e+" of type '"+(void 0===e?"undefined":n(e))+"' is not supported in the State.AttrKey context");case a.AttrValue:case a.AttrValueSingleQuote:case a.AttrValueDoubleQuote:""!==c?c+=e:c=e}return[s,u,c]}var v=function(e){for(var t=arguments.length,r=Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];for(var o=[],s=a.Text,u="",c=0;c<e.length;c++){var l=e[c],b=r[c],f=p(l,s,u),h=i(f,3),v=h[0],d=y(b,h[1],h[2]),m=i(d,3),_=m[0],S=m[1],x=m[2];o=o.concat(v).concat(_),s=S,u=x}return o},d=1,m=2,_=function e(t,r){return r.map(function(r){switch(r.type){case b.Node:return t(r.value[0],r.value[d],e(t,r.value[m]));case b.VTree:case b.Text:return r.value}})};function S(e){for(var t=[],r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;r<e.length;){var n=e[r],o=t[t.length-1],u=o&&o.type===b.Node?o.value:null;switch(n.type){case l.OpenTag:t.push({type:b.Node,value:[n.value,{},[]]}),r++;break;case l.Text:t.push({type:b.Text,value:n.value}),r++;break;case l.VTree:t.push.apply(t,s(Array.isArray(n.value)?n.value.map(function(e){return{type:b.VTree,value:e}}):[{type:b.VTree,value:n.value}])),r++;break;case l.AttributeName:u?e[r+1]&&e[r+1].type===l.AttributeValue?(u[d][n.value]=e[r+1].value,r+=2):(u[d][n.value]=!0,r++):r++;break;case l.AttributeValue:break;case l.CloseTag:if(u){var c=S(e,r+1),a=i(c,2),p=a[0],f=a[1];u[m]=p,r=f}else r++;break;case l.SelfCloseTag:r++;break;case l.ClosingTag:return[t,r+1]}}return[t,r]}var x=function(e){return 1===e.length?e[0]:e};t.State=a,t.Token=l,t.Tree=b,t.tokenizer=p,t.variableTokenizer=y,t.tokenizerTag=v,t.buildTree=S,t.default=function(e){return function(){var t=S(v.apply(void 0,arguments)),r=i(t,1)[0];return x(_(e,r))}}}),createTag=unwrapExports(lib),lib_1=lib.State,lib_2=lib.Token,lib_3=lib.Tree,lib_4=lib.tokenizer,lib_5=lib.variableTokenizer,lib_6=lib.tokenizerTag,lib_7=lib.buildTree,__window="undefined"!=typeof window&&window,__self="undefined"!=typeof self&&"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope&&self,__global=void 0!==commonjsGlobal&&commonjsGlobal,_root=__window||__global||__self,root_1=_root;!function(){if(!_root)throw new Error("RxJS could not find any global context (window, self, global)")}();var root={root:root_1};function isFunction(e){return"function"==typeof e}var isFunction_2=isFunction,isFunction_1={isFunction:isFunction_2},isArray_1=Array.isArray||function(e){return e&&"number"==typeof e.length},isArray={isArray:isArray_1};function isObject(e){return null!=e&&"object"==typeof e}var tryCatchTarget,isObject_2=isObject,isObject_1={isObject:isObject_2},errorObject_1={e:{}},errorObject={errorObject:errorObject_1};function tryCatcher(){try{return tryCatchTarget.apply(this,arguments)}catch(e){return errorObject.errorObject.e=e,errorObject.errorObject}}function tryCatch(e){return tryCatchTarget=e,tryCatcher}var tryCatch_2=tryCatch,tryCatch_1={tryCatch:tryCatch_2},__extends$1=commonjsGlobal&&commonjsGlobal.__extends||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r]);function n(){this.constructor=e}e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)},UnsubscriptionError=function(e){function t(t){e.call(this),this.errors=t;var r=Error.call(this,t?t.length+" errors occurred during unsubscription:\n "+t.map(function(e,t){return t+1+") "+e.toString()}).join("\n "):"");this.name=r.name="UnsubscriptionError",this.stack=r.stack,this.message=r.message}return __extends$1(t,e),t}(Error),UnsubscriptionError_2=UnsubscriptionError,UnsubscriptionError_1={UnsubscriptionError:UnsubscriptionError_2},Subscription=function(){function e(e){this.closed=!1,this._parent=null,this._parents=null,this._subscriptions=null,e&&(this._unsubscribe=e)}var t;return e.prototype.unsubscribe=function(){var e,t=!1;if(!this.closed){var r=this._parent,n=this._parents,o=this._unsubscribe,i=this._subscriptions;this.closed=!0,this._parent=null,this._parents=null,this._subscriptions=null;for(var s=-1,u=n?n.length:0;r;)r.remove(this),r=++s<u&&n[s]||null;if(isFunction_1.isFunction(o))tryCatch_1.tryCatch(o).call(this)===errorObject.errorObject&&(t=!0,e=e||(errorObject.errorObject.e instanceof UnsubscriptionError_1.UnsubscriptionError?flattenUnsubscriptionErrors(errorObject.errorObject.e.errors):[errorObject.errorObject.e]));if(isArray.isArray(i))for(s=-1,u=i.length;++s<u;){var c=i[s];if(isObject_1.isObject(c))if(tryCatch_1.tryCatch(c.unsubscribe).call(c)===errorObject.errorObject){t=!0,e=e||[];var a=errorObject.errorObject.e;a instanceof UnsubscriptionError_1.UnsubscriptionError?e=e.concat(flattenUnsubscriptionErrors(a.errors)):e.push(a)}}if(t)throw new UnsubscriptionError_1.UnsubscriptionError(e)}},e.prototype.add=function(t){if(!t||t===e.EMPTY)return e.EMPTY;if(t===this)return this;var r=t;switch(typeof t){case"function":r=new e(t);case"object":if(r.closed||"function"!=typeof r.unsubscribe)return r;if(this.closed)return r.unsubscribe(),r;if("function"!=typeof r._addParent){var n=r;(r=new e)._subscriptions=[n]}break;default:throw new Error("unrecognized teardown "+t+" added to Subscription.")}return(this._subscriptions||(this._subscriptions=[])).push(r),r._addParent(this),r},e.prototype.remove=function(e){var t=this._subscriptions;if(t){var r=t.indexOf(e);-1!==r&&t.splice(r,1)}},e.prototype._addParent=function(e){var t=this._parent,r=this._parents;t&&t!==e?r?-1===r.indexOf(e)&&r.push(e):this._parents=[e]:this._parent=e},e.EMPTY=((t=new e).closed=!0,t),e}(),Subscription_2=Subscription;function flattenUnsubscriptionErrors(e){return e.reduce(function(e,t){return e.concat(t instanceof UnsubscriptionError_1.UnsubscriptionError?t.errors:t)},[])}var Subscription_1={Subscription:Subscription_2},empty={closed:!0,next:function(e){},error:function(e){throw e},complete:function(){}},Observer={empty:empty},rxSubscriber=createCommonjsModule(function(e,t){var r=root.root.Symbol;t.rxSubscriber="function"==typeof r&&"function"==typeof r.for?r.for("rxSubscriber"):"@@rxSubscriber",t.$$rxSubscriber=t.rxSubscriber}),rxSubscriber_1=rxSubscriber.rxSubscriber,rxSubscriber_2=rxSubscriber.$$rxSubscriber,__extends=commonjsGlobal&&commonjsGlobal.__extends||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r]);function n(){this.constructor=e}e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)},Subscriber=function(e){function t(r,n,o){switch(e.call(this),this.syncErrorValue=null,this.syncErrorThrown=!1,this.syncErrorThrowable=!1,this.isStopped=!1,arguments.length){case 0:this.destination=Observer.empty;break;case 1:if(!r){this.destination=Observer.empty;break}if("object"==typeof r){r instanceof t?(this.syncErrorThrowable=r.syncErrorThrowable,this.destination=r,this.destination.add(this)):(this.syncErrorThrowable=!0,this.destination=new SafeSubscriber(this,r));break}default:this.syncErrorThrowable=!0,this.destination=new SafeSubscriber(this,r,n,o)}}return __extends(t,e),t.prototype[rxSubscriber.rxSubscriber]=function(){return this},t.create=function(e,r,n){var o=new t(e,r,n);return o.syncErrorThrowable=!1,o},t.prototype.next=function(e){this.isStopped||this._next(e)},t.prototype.error=function(e){this.isStopped||(this.isStopped=!0,this._error(e))},t.prototype.complete=function(){this.isStopped||(this.isStopped=!0,this._complete())},t.prototype.unsubscribe=function(){this.closed||(this.isStopped=!0,e.prototype.unsubscribe.call(this))},t.prototype._next=function(e){this.destination.next(e)},t.prototype._error=function(e){this.destination.error(e),this.unsubscribe()},t.prototype._complete=function(){this.destination.complete(),this.unsubscribe()},t.prototype._unsubscribeAndRecycle=function(){var e=this._parent,t=this._parents;return this._parent=null,this._parents=null,this.unsubscribe(),this.closed=!1,this.isStopped=!1,this._parent=e,this._parents=t,this},t}(Subscription_1.Subscription),Subscriber_2=Subscriber,SafeSubscriber=function(e){function t(t,r,n,o){var i;e.call(this),this._parentSubscriber=t;var s=this;isFunction_1.isFunction(r)?i=r:r&&(i=r.next,n=r.error,o=r.complete,r!==Observer.empty&&(s=Object.create(r),isFunction_1.isFunction(s.unsubscribe)&&this.add(s.unsubscribe.bind(s)),s.unsubscribe=this.unsubscribe.bind(this))),this._context=s,this._next=i,this._error=n,this._complete=o}return __extends(t,e),t.prototype.next=function(e){if(!this.isStopped&&this._next){var t=this._parentSubscriber;t.syncErrorThrowable?this.__tryOrSetError(t,this._next,e)&&this.unsubscribe():this.__tryOrUnsub(this._next,e)}},t.prototype.error=function(e){if(!this.isStopped){var t=this._parentSubscriber;if(this._error)t.syncErrorThrowable?(this.__tryOrSetError(t,this._error,e),this.unsubscribe()):(this.__tryOrUnsub(this._error,e),this.unsubscribe());else{if(!t.syncErrorThrowable)throw this.unsubscribe(),e;t.syncErrorValue=e,t.syncErrorThrown=!0,this.unsubscribe()}}},t.prototype.complete=function(){var e=this;if(!this.isStopped){var t=this._parentSubscriber;if(this._complete){var r=function(){return e._complete.call(e._context)};t.syncErrorThrowable?(this.__tryOrSetError(t,r),this.unsubscribe()):(this.__tryOrUnsub(r),this.unsubscribe())}else this.unsubscribe()}},t.prototype.__tryOrUnsub=function(e,t){try{e.call(this._context,t)}catch(e){throw this.unsubscribe(),e}},t.prototype.__tryOrSetError=function(e,t,r){try{t.call(this._context,r)}catch(t){return e.syncErrorValue=t,e.syncErrorThrown=!0,!0}return!1},t.prototype._unsubscribe=function(){var e=this._parentSubscriber;this._context=null,this._parentSubscriber=null,e.unsubscribe()},t}(Subscriber),Subscriber_1={Subscriber:Subscriber_2};function toSubscriber(e,t,r){if(e){if(e instanceof Subscriber_1.Subscriber)return e;if(e[rxSubscriber.rxSubscriber])return e[rxSubscriber.rxSubscriber]()}return e||t||r?new Subscriber_1.Subscriber(e,t,r):new Subscriber_1.Subscriber(Observer.empty)}var toSubscriber_2=toSubscriber,toSubscriber_1={toSubscriber:toSubscriber_2},observable=createCommonjsModule(function(e,t){function r(e){var t,r=e.Symbol;return"function"==typeof r?r.observable?t=r.observable:(t=r("observable"),r.observable=t):t="@@observable",t}t.getSymbolObservable=r,t.observable=r(root.root),t.$$observable=t.observable}),observable_1=observable.getSymbolObservable,observable_2=observable.observable,observable_3=observable.$$observable;function noop(){}var noop_2=noop,noop_1={noop:noop_2};function pipe(){for(var e=[],t=0;t<arguments.length;t++)e[t-0]=arguments[t];return pipeFromArray(e)}var pipe_2=pipe;function pipeFromArray(e){return e?1===e.length?e[0]:function(t){return e.reduce(function(e,t){return t(e)},t)}:noop_1.noop}var pipeFromArray_1=pipeFromArray,pipe_1={pipe:pipe_2,pipeFromArray:pipeFromArray_1},Observable=function(){function e(e){this._isScalar=!1,e&&(this._subscribe=e)}return e.prototype.lift=function(t){var r=new e;return r.source=this,r.operator=t,r},e.prototype.subscribe=function(e,t,r){var n=this.operator,o=toSubscriber_1.toSubscriber(e,t,r);if(n?n.call(o,this.source):o.add(this.source||!o.syncErrorThrowable?this._subscribe(o):this._trySubscribe(o)),o.syncErrorThrowable&&(o.syncErrorThrowable=!1,o.syncErrorThrown))throw o.syncErrorValue;return o},e.prototype._trySubscribe=function(e){try{return this._subscribe(e)}catch(t){e.syncErrorThrown=!0,e.syncErrorValue=t,e.error(t)}},e.prototype.forEach=function(e,t){var r=this;if(t||(root.root.Rx&&root.root.Rx.config&&root.root.Rx.config.Promise?t=root.root.Rx.config.Promise:root.root.Promise&&(t=root.root.Promise)),!t)throw new Error("no Promise impl found");return new t(function(t,n){var o;o=r.subscribe(function(t){if(o)try{e(t)}catch(e){n(e),o.unsubscribe()}else e(t)},n,t)})},e.prototype._subscribe=function(e){return this.source.subscribe(e)},e.prototype[observable.observable]=function(){return this},e.prototype.pipe=function(){for(var e=[],t=0;t<arguments.length;t++)e[t-0]=arguments[t];return 0===e.length?this:pipe_1.pipeFromArray(e)(this)},e.prototype.toPromise=function(e){var t=this;if(e||(root.root.Rx&&root.root.Rx.config&&root.root.Rx.config.Promise?e=root.root.Rx.config.Promise:root.root.Promise&&(e=root.root.Promise)),!e)throw new Error("no Promise impl found");return new e(function(e,r){var n;t.subscribe(function(e){return n=e},function(e){return r(e)},function(){return e(n)})})},e.create=function(t){return new e(t)},e}(),Observable_2=Observable,Observable_1={Observable:Observable_2},__extends$3=commonjsGlobal&&commonjsGlobal.__extends||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r]);function n(){this.constructor=e}e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)},ObjectUnsubscribedError=function(e){function t(){var t=e.call(this,"object unsubscribed");this.name=t.name="ObjectUnsubscribedError",this.stack=t.stack,this.message=t.message}return __extends$3(t,e),t}(Error),ObjectUnsubscribedError_2=ObjectUnsubscribedError,ObjectUnsubscribedError_1={ObjectUnsubscribedError:ObjectUnsubscribedError_2},__extends$4=commonjsGlobal&&commonjsGlobal.__extends||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r]);function n(){this.constructor=e}e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)},SubjectSubscription=function(e){function t(t,r){e.call(this),this.subject=t,this.subscriber=r,this.closed=!1}return __extends$4(t,e),t.prototype.unsubscribe=function(){if(!this.closed){this.closed=!0;var e=this.subject,t=e.observers;if(this.subject=null,t&&0!==t.length&&!e.isStopped&&!e.closed){var r=t.indexOf(this.subscriber);-1!==r&&t.splice(r,1)}}},t}(Subscription_1.Subscription),SubjectSubscription_2=SubjectSubscription,SubjectSubscription_1={SubjectSubscription:SubjectSubscription_2},__extends$2=commonjsGlobal&&commonjsGlobal.__extends||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r]);function n(){this.constructor=e}e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)},SubjectSubscriber=function(e){function t(t){e.call(this,t),this.destination=t}return __extends$2(t,e),t}(Subscriber_1.Subscriber),Subject=function(e){function t(){e.call(this),this.observers=[],this.closed=!1,this.isStopped=!1,this.hasError=!1,this.thrownError=null}return __extends$2(t,e),t.prototype[rxSubscriber.rxSubscriber]=function(){return new SubjectSubscriber(this)},t.prototype.lift=function(e){var t=new AnonymousSubject(this,this);return t.operator=e,t},t.prototype.next=function(e){if(this.closed)throw new ObjectUnsubscribedError_1.ObjectUnsubscribedError;if(!this.isStopped)for(var t=this.observers,r=t.length,n=t.slice(),o=0;o<r;o++)n[o].next(e)},t.prototype.error=function(e){if(this.closed)throw new ObjectUnsubscribedError_1.ObjectUnsubscribedError;this.hasError=!0,this.thrownError=e,this.isStopped=!0;for(var t=this.observers,r=t.length,n=t.slice(),o=0;o<r;o++)n[o].error(e);this.observers.length=0},t.prototype.complete=function(){if(this.closed)throw new ObjectUnsubscribedError_1.ObjectUnsubscribedError;this.isStopped=!0;for(var e=this.observers,t=e.length,r=e.slice(),n=0;n<t;n++)r[n].complete();this.observers.length=0},t.prototype.unsubscribe=function(){this.isStopped=!0,this.closed=!0,this.observers=null},t.prototype._trySubscribe=function(t){if(this.closed)throw new ObjectUnsubscribedError_1.ObjectUnsubscribedError;return e.prototype._trySubscribe.call(this,t)},t.prototype._subscribe=function(e){if(this.closed)throw new ObjectUnsubscribedError_1.ObjectUnsubscribedError;return this.hasError?(e.error(this.thrownError),Subscription_1.Subscription.EMPTY):this.isStopped?(e.complete(),Subscription_1.Subscription.EMPTY):(this.observers.push(e),new SubjectSubscription_1.SubjectSubscription(this,e))},t.prototype.asObservable=function(){var e=new Observable_1.Observable;return e.source=this,e},t.create=function(e,t){return new AnonymousSubject(e,t)},t}(Observable_1.Observable),Subject_2=Subject,AnonymousSubject=function(e){function t(t,r){e.call(this),this.destination=t,this.source=r}return __extends$2(t,e),t.prototype.next=function(e){var t=this.destination;t&&t.next&&t.next(e)},t.prototype.error=function(e){var t=this.destination;t&&t.error&&this.destination.error(e)},t.prototype.complete=function(){var e=this.destination;e&&e.complete&&this.destination.complete()},t.prototype._subscribe=function(e){return this.source?this.source.subscribe(e):Subscription_1.Subscription.EMPTY},t}(Subject),_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},classCallCheck=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},createClass=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),defineProperty=function(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e},_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},slicedToArray=function(){return function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var r=[],n=!0,o=!1,i=void 0;try{for(var s,u=e[Symbol.iterator]();!(n=(s=u.next()).done)&&(r.push(s.value),!t||r.length!==t);n=!0);}catch(e){o=!0,i=e}finally{try{!n&&u.return&&u.return()}finally{if(o)throw i}}return r}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),toArray=function(e){return Array.isArray(e)?e:Array.from(e)},toConsumableArray=function(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)},compose=function(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r];return function(e){return t.reduceRight(function(e,t){return t(e)},e)}},pipe$1=function(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r];return t.reduce(function(e,t){return function(r){return t(e(r))}},function(e){return e})},curry=function e(t){return function(){for(var r=arguments.length,n=Array(r),o=0;o<r;o++)n[o]=arguments[o];return n.length>=t.length?t.apply(void 0,n):function(){for(var r=arguments.length,o=Array(r),i=0;i<r;i++)o[i]=arguments[i];return e(t).apply(void 0,n.concat(o))}}},rafThrottle=function(e){var t=!0,r=[];return function(){for(var n=arguments.length,o=Array(n),i=0;i<n;i++)o[i]=arguments[i];r=o,t&&(t=!1,window.requestAnimationFrame(function(){t=!0,e.apply(void 0,toConsumableArray(r))}))}},init=function(e){return e.slice(0,e.length-1)},last=function(e){return e[e.length-1]},flatMap=curry(function(e,t){return t.reduce(function(t,r){return t.concat(e(r))},[])}),isPromise=function(e){return e&&"function"==typeof e.then},isObservable=function(e){return e&&"function"==typeof e.subscribe},point=function(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r];return new Observable_2(function(e){var r=!0,n=!1,o=void 0;try{for(var i,s=t[Symbol.iterator]();!(r=(i=s.next()).done);r=!0){var u=i.value;e.next(u)}}catch(e){n=!0,o=e}finally{try{!r&&s.return&&s.return()}finally{if(n)throw o}}return e.complete(),{unsubscribe:function(){}}})},fromPromise=function(e){return new Observable_2(function(t){return e.then(function(e){return t.next(e)}).then(function(){return t.complete()}).catch(function(e){return t.error(e)}),{unsubscribe:function(){}}})},toObservable=function(e){return isObservable(e)?e:point(e)},startWith=curry(function(e,t){return new Observable_2(function(r){return r.next(e),t.subscribe(r)})}),Nothing="Nothing",combineLatest=function(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r];var n=init(t),o=last(t);return new Observable_2(function(e){var t=n.map(function(){return Nothing}),r=n.map(function(){return!0}),i=n.map(function(n,i){return n.subscribe({error:function(t){console.error(t),r[i]=!1,r.every(function(e){return!1===e})&&e.complete()},complete:function(){r[i]=!1,r.every(function(e){return!1===e})&&e.complete()},next:function(r){if(t[i]=r,t.every(function(e){return e!==Nothing})){var n=void 0;try{n=o.apply(void 0,toConsumableArray(t))}catch(e){console.error(e)}e.next(n)}}})});return{unsubscribe:function(){i.forEach(function(e){return e.unsubscribe()})}}})},map=curry(function(e,t){return new Observable_2(function(r){return t.subscribe({error:function(e){return r.error(e)},next:function(t){return r.next(e(t))},complete:function(){return r.complete()}})})}),filter=curry(function(e,t){return new Observable_2(function(r){return t.subscribe({error:function(e){return r.error(e)},next:function(t){e(t)&&r.next(t)},complete:function(){return r.complete()}})})}),switchMap=curry(function(e,t){var r=void 0;return new Observable_2(function(n){var o=!1,i=!1,s=t.subscribe({next:function(t){r&&r.unsubscribe(),r=e(t).subscribe({error:function(e){return n.error(e)},next:function(e){return n.next(e)},complete:function(){i=!0,o&&n.complete()}})},error:function(e){return n.error(e)},complete:function(){o=!0,i&&n.complete()}});return{unsubscribe:function(){r&&r.unsubscribe(),s.unsubscribe()}}})}),sample=curry(function(e,t){var r=Symbol("None");return new Observable_2(function(n){var o=r,i=t.subscribe({next:function(e){o=e},complete:function(){return n.complete()},error:function(e){return n.error(e)}}),s=e.subscribe({next:function(){o!==r&&(n.next(o),o=r)},complete:function(){return n.complete()},error:function(e){return n.error(e)}});return{unsubscribe:function(){i.unsubscribe(),s.unsubscribe()}}})}),all=function(e){return e.length?combineLatest.apply(void 0,toConsumableArray(e).concat([function(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r];return t}])):point([])},scan=curry(function(e,t,r){var n=t;return new Observable_2(function(t){return r.subscribe({error:function(e){return t.error(e)},next:function(r){return t.next(function(t){return n=e(n,t)}(r))},complete:function(){return t.complete()}})})}),shareReplay=curry(function(e,t){var r=[],n=void 0,o=[];return new Observable_2(function(i){return r.push(i),1===r.length&&(n=t.subscribe({complete:function(){return r.forEach(function(e){return e.complete()})},error:function(e){return r.forEach(function(t){return t.error(e)})},next:function(t){r.forEach(function(e){return e.next(t)}),o=o.concat(t).slice(Math.max(0,o.length-e+1))}})),o.map(function(e){return i.next(e)}),{unsubscribe:function(){r=r.filter(function(e){return e!==i}),0===i.length&&(n.unsubscribe(),o=[])}}})}),share=shareReplay(0),blockComplete=function(){return function(e){return new Observable_2(function(t){return e.subscribe({complete:function(){},next:function(e){return t.next(e)},error:function(e){return t.error(e)}})})}},raf=new Observable_2(function(e){var t=!0;return window.requestAnimationFrame(function r(){t&&(e.next(),window.requestAnimationFrame(r))}),{unsubscribe:function(){t=!1}}}),addOperator=function(e,t,r){e.prototype[t]=r};[{name:"pipe",f:pipe$1},{name:"map",f:map},{name:"filter",f:filter},{name:"scan",f:scan},{name:"startWith",f:startWith},{name:"share",f:share},{name:"shareReplay",f:shareReplay},{name:"sample",f:sample},{name:"switchMap",f:switchMap}].forEach(function(e){var t=e.name,r=e.f;addOperator(Observable_2,t,function(){return r.apply(void 0,arguments)(this)}),addOperator(Subject_2,t,function(){return r.apply(void 0,arguments)(this)})});var noOp=function(){},createDefaultLifecycle=function(){return{mount:noOp,update:noOp,unmount:noOp}},isEmpty=function(e){return 0!==e&&(!e||"string"==typeof e&&!e.trim())},hasContent=function(e){return!e.length||!e.every(isEmpty)},flatten=function e(t){return Array.isArray(t)?all(t.map(compose(startWith(""),e))).pipe(blockComplete(),filter(hasContent)):isObservable(t)?switchMap(e)(t):isPromise(t)?switchMap(e,fromPromise(t)):toObservable(t)},sharedRaf=share(raf),createReactiveTag=function(e){return function(t){for(var r=arguments.length,n=Array(r>1?r-1:0),o=1;o<r;o++)n[o-1]=arguments[o];return flatten(n).pipe(startWith([]),sample(sharedRaf),map(function(r){return e.apply(void 0,[t].concat(toConsumableArray(r)))}))}};function _objectEntries(e){for(var t=[],r=Object.keys(e),n=0;n<r.length;++n)t.push([r[n],e[r[n]]]);return t}function _objectEntries(e){for(var t=[],r=Object.keys(e),n=0;n<r.length;++n)t.push([r[n],e[r[n]]]);return t}function updateStyle(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};for(var n in _extends({},t,r)){var o=r&&r[n]?r[n]:"";r[n]===t[n]||("-"===n[0]?e.style.setProperty(n,o):e.style[n]=o)}}var VNode=function(){function e(t){var r=t.name,n=t.attrs,o=void 0===n?{}:n,i=t.lifecycle,s=void 0===i?{}:i,u=t.events,c=void 0===u?{}:u,a=t.children,l=void 0===a?{}:a,b=t.key,p=void 0===b?"":b;classCallCheck(this,e),this.name=r,this.attrs=o,this.lifecycle=s,this.events=c,this.children=l,this.key=p}return createClass(e,[{key:"createElement",value:function(e,t){var r=(e=e||"svg"===this.name)?document.createElementNS("http://www.w3.org/2000/svg",this.name):document.createElement(this.name);return this.updateEvents(r,{}),this.updateAttrs(r,{}),this.updateChildren(r,[],e,t),r}},{key:"updateElement",value:function(e,t,r,n){if(t.name!==this.name)return t.removeElement(e),this.createElement(r,n);this.updateEvents(e,t.events),this.updateAttrs(e,t.attrs),this.updateChildren(e,t.children,r,n),this.lifecycle.update(e)}},{key:"removeElement",value:function(e){this.children.map(function(t,r){return t.removeElement(e.childNodes[r])}),this.lifecycle.unmount(e)}},{key:"mount",value:function(e){this.children.map(function(e){return e.mount()}),this.lifecycle.mount(e)}},{key:"updateEvents",value:function(e,t){var r=this,n=!0,o=!1,i=void 0;try{for(var s,u=_objectEntries(this.events)[Symbol.iterator]();!(n=(s=u.next()).done);n=!0){var c=s.value,a=slicedToArray(c,2),l=a[0],b=a[1];t[l]?b!==t[l]&&(e.removeEventListener(l,t[l]),e.addEventListener(l,b)):e.addEventListener(l,b)}}catch(e){o=!0,i=e}finally{try{!n&&u.return&&u.return()}finally{if(o)throw i}}var p=_objectEntries(t).filter(function(e){var t=slicedToArray(e,1)[0];return!r.events[t]}),f=!0,h=!1,y=void 0;try{for(var v,d=p[Symbol.iterator]();!(f=(v=d.next()).done);f=!0){var m=v.value,_=slicedToArray(m,2),S=_[0],x=_[1];e.removeEventListener(S,x)}}catch(e){h=!0,y=e}finally{try{!f&&d.return&&d.return()}finally{if(h)throw y}}}},{key:"updateAttrs",value:function(e,t){for(var r in _extends({},t,this.attrs)){var n=this.attrs[r];n===t[r]||(isEmpty(n)?"value"===r&&"INPUT"===e.tagName?e.value="":e.removeAttribute(r):"style"===r?updateStyle(e,t.style,this.attrs.style):"value"===r&&"INPUT"===e.tagName?e.value=n:e.setAttribute(r,n))}}},{key:"updateChildren",value:function(e,t,r,n){for(var o in this.children){var i=this.children[o],s=t[o],u=e.childNodes[o];if(u)n(u,s,i,r);else{var c=i.createElement(r,n);e.appendChild(c),i.mount(c)}}for(var a in[].slice.call(e.childNodes,this.children.length)){var l=parseInt(a)+this.children.length,b=t[l],p=e.childNodes[l];p&&(b.removeElement(p),p.remove())}}}]),e}(),VText=function(){function e(t){var r=t.text;classCallCheck(this,e),this.text=r}return createClass(e,[{key:"createElement",value:function(){return document.createTextNode(this.text)}},{key:"updateElement",value:function(e,t){t.text!==this.text&&(e.textContent=this.text)}},{key:"removeElement",value:function(){}},{key:"mount",value:function(){}}]),e}();function createVTree(e){return new VNode({name:e.nodeName.toLowerCase(),lifecycle:createDefaultLifecycle(),events:{},attrs:{},untouchedAttributes:{},children:Array.prototype.map.call(e.childNodes,function(e){return 3===e.nodeType?new VText({text:e.nodeValue}):createVTree(e)})})}function patch(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:createVTree(e),r=arguments[2],n=arguments[3];if(r.constructor!==t.constructor||r.key!==t.key){t.removeElement(e);var o=r.createElement(n,patch);return e.parentNode.replaceChild(o,e),r.mount(o),o}var i=r.updateElement(e,t,n,patch);return i?(e.parentNode.replaceChild(i,e),r.mount(i,n),i):e}var VPatch=function(){function e(t){classCallCheck(this,e),this.vTree=t}return createClass(e,[{key:"createElement",value:function(){var e;return(e=this.vTree).createElement.apply(e,arguments)}},{key:"updateElement",value:function(){var e;return(e=this.vTree).updateElement.apply(e,arguments)}},{key:"removeElement",value:function(){var e;return(e=this.vTree).removeElement.apply(e,arguments)}},{key:"mount",value:function(){var e;return(e=this.vTree).mount.apply(e,arguments)}}]),e}();function createPropsStream(e){var t=new Subject_2;return{next:function(e){return t.next(e)},stream:t.startWith(e).shareReplay(1)}}var Component=function(){function e(t){var r=t.name,n=t.untouchedAttributes,o=t.key,i=void 0===o?"":o;classCallCheck(this,e),this.name=r,this.untouchedAttributes=n,this.key=i}return createClass(e,[{key:"createElement",value:function(e,t){var r=this,n=e?document.createElementNS("g"):document.createElement("div");this.state={},this.state.props=createPropsStream(this.untouchedAttributes),this.state.childTree=void 0;var o=this.name(this.state.props.stream);if(!o)throw new Error("Component "+this.name.name+" must return a stream!");return this.state.subscription=o.pipe(flatten,sample(sharedRaf)).subscribe({next:function(o){o instanceof VPatch?r.state.childTree=o.vTree:(n=t(n,r.state.childTree,o,e),r.state.childTree=o)},error:function(e){return console.error(e)}}),n}},{key:"updateElement",value:function(e,t,r,n){if(this.state=t.state,t.name!==this.name)return t.removeElement(e),this.createElement(r,n);this.state.props.next(this.untouchedAttributes)}},{key:"removeElement",value:function(e){this.state.subscription.unsubscribe(),this.state.childTree&&this.state.childTree.removeElement(e)}},{key:"mount",value:function(){}}]),e}();function _objectEntries$1(e){for(var t=[],r=Object.keys(e),n=0;n<r.length;++n)t.push([r[n],e[r[n]]]);return t}function _objectEntries$1(e){for(var t=[],r=Object.keys(e),n=0;n<r.length;++n)t.push([r[n],e[r[n]]]);return t}var isLifecycle=function(e){return["mount","update","unmount"].includes(e)},isEvent=function(e){return!!e.match(/^on/)},toEventName=function(e){return e.replace(/^on/,"").toLowerCase()},styleToObject=function(e){return e.split(";").reduce(function(e,t){var r=t.split(/:/),n=toArray(r),o=n[0],i=n.slice(1);return o.trim()&&(e[o.trim()]=i.join(":")),e},{})},formatChildren=flatMap(function(e){return Array.isArray(e)?formatChildren(e):[VNode,VText,VPatch,Component].some(function(t){return e instanceof t})?[e]:isEmpty(e)?[]:[new VText({text:""+e})]});function h(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[];if("function"==typeof e)return new Component({name:e,untouchedAttributes:_extends({},t,{children:r})});var n=_objectEntries$1(t).reduce(function(e,t){var r=slicedToArray(t,2),n=r[0],o=r[1];return"key"===n?e.key=o:isLifecycle(n)&&"function"==typeof o?e.lifecycle[n]=o:isEvent(n)&&"function"==typeof o?e.events[toEventName(n)]=o:e.attrs[n]="style"===n?"object"===(void 0===o?"undefined":_typeof(o))?o:styleToObject(o):o,e},{lifecycle:createDefaultLifecycle(),events:{},attrs:{}}),o=n.key,i=n.lifecycle,s=n.events,u=n.attrs;return new VNode({name:e,attrs:u,lifecycle:i,events:s,children:formatChildren(r),key:o})}var render=function(e,t){var r=void 0,n=void 0;return e.subscribe({next:function(e){e instanceof VPatch?n=e.vTree:(r?patch(r,n,e):(r=e.createElement(!1,patch),t.appendChild(r)),n=e)}})},createRenderProcess=function(e){return new Observable_2(function(t){var r=void 0,n=void 0,o=void 0;return e.subscribe({complete:function(){return t.complete()},error:function(e){return t.error(e)},next:function(e){if(!(e instanceof VNode))return t.next(e);var i=e.lifecycle.mount;e.lifecycle.mount=function(e,t){r=e,o=t,i(e)},r?(r=patch(r,n,e,o),t.next(new VPatch(e))):t.next(e),n=e}})})},toRenderProcess=function(e){return function(t){for(var r=arguments.length,n=Array(r>1?r-1:0),o=1;o<r;o++)n[o-1]=arguments[o];return createRenderProcess(e.apply(void 0,[t].concat(n)))}},html$1=toRenderProcess(createReactiveTag(createTag(h))),textTag=function(e){for(var t=arguments.length,r=Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];return e.reduce(function(e,t,n){return e+t+(void 0!==r[n]?r[n]:"")},"")},text=createReactiveTag(textTag),defaultSecondPerFrame=.016,reusedTuple=[0,0];function stepper(e,t,r){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:170,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:20,i=arguments.length>5&&void 0!==arguments[5]?arguments[5]:defaultSecondPerFrame,s=arguments.length>6&&void 0!==arguments[6]?arguments[6]:.1,u=t+(-n*(e-r)+-o*t)*i,c=e+u*i;return Math.abs(u)<s&&Math.abs(c-r)<s?(reusedTuple[0]=r,reusedTuple[1]=0,reusedTuple):(reusedTuple[0]=c,reusedTuple[1]=u,reusedTuple)}var ease=function(e,t){var r=void 0,n=0,o=void 0;return function(i){return o=i,void 0===r&&(r=i),new Observable_2(function(i){var s=!0,u=rafThrottle(function(){var c=stepper(r,n,o,e,t),a=slicedToArray(c,2);r=a[0],n=a[1],i.next(r),0!==n&&s&&u()});return u(),{unsubscribe:function(){s=!1}}})}},cache=new Map,getEase=function(e,t,r){return void 0===r?ease(e,t):(cache.has(r)||cache.set(r,ease(e,t)),cache.get(r))},mapValues=curry(function(e,t){return Object.keys(t).reduce(function(r,n){return _extends({},r,defineProperty({},n,e(t[n],n)))},{})}),createMutable=function(e){var t=new Subject_2,r=t.pipe(scan(function(e,t){return t(e)},e),startWith(e),shareReplay(1));return r.set=function(e){return t.next("function"==typeof e?e:function(){return e})},r};function createState(e){return mapValues(createMutable,e)}exports.default=html$1,exports.text=text,exports.render=render,exports.ease=getEase,exports.createState=createState,exports.all=all; | ||
| import createTag from"vdom-tag";import{Observable,Subject,combineLatest,from,of}from"rxjs";import{filter,map,sample,scan,startWith}from"rxjs/operators";var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},classCallCheck=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},createClass=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),defineProperty=function(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e},_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},slicedToArray=function(){return function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var r=[],n=!0,o=!1,a=void 0;try{for(var i,u=e[Symbol.iterator]();!(n=(i=u.next()).done)&&(r.push(i.value),!t||r.length!==t);n=!0);}catch(e){o=!0,a=e}finally{try{!n&&u.return&&u.return()}finally{if(o)throw a}}return r}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),toArray=function(e){return Array.isArray(e)?e:Array.from(e)},toConsumableArray=function(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)},compose=function(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r];return function(e){return t.reduceRight(function(e,t){return t(e)},e)}},curry=function e(t){return function(){for(var r=arguments.length,n=Array(r),o=0;o<r;o++)n[o]=arguments[o];return n.length>=t.length?t.apply(void 0,n):function(){for(var r=arguments.length,o=Array(r),a=0;a<r;a++)o[a]=arguments[a];return e(t).apply(void 0,n.concat(o))}}},rafThrottle=function(e){var t=!0,r=[];return function(){for(var n=arguments.length,o=Array(n),a=0;a<n;a++)o[a]=arguments[a];r=o,t&&(t=!1,window.requestAnimationFrame(function(){t=!0,e.apply(void 0,toConsumableArray(r))}))}},isPromise=function(e){return e&&"function"==typeof e.then},isObservable=function(e){return e&&"function"==typeof e.subscribe},toObservable=function(e){return isObservable(e)?e:of(e)},switchMap=curry(function(e,t){var r=void 0;return new Observable(function(n){var o=!1,a=!1,i=t.subscribe({next:function(t){r&&r.unsubscribe(),r=e(t).subscribe({error:function(e){return n.error(e)},next:function(e){return n.next(e)},complete:function(){a=!0,o&&n.complete()}})},error:function(e){return n.error(e)},complete:function(){o=!0,a&&n.complete()}});return{unsubscribe:function(){r&&r.unsubscribe(),i.unsubscribe()}}})}),all=function(e){return e.length?combineLatest.apply(void 0,toConsumableArray(e).concat([function(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r];return t}])):of([])},shareReplay=curry(function(e,t){var r=[],n=void 0,o=[];return new Observable(function(a){return r.push(a),1===r.length&&(n=t.subscribe({complete:function(){return r.forEach(function(e){return e.complete()})},error:function(e){return r.forEach(function(t){return t.error(e)})},next:function(t){r.forEach(function(e){return e.next(t)}),o=o.concat(t).slice(Math.max(0,o.length-e+1))}})),o.map(function(e){return a.next(e)}),{unsubscribe:function(){r=r.filter(function(e){return e!==a}),0===a.length&&(n.unsubscribe(),o=[])}}})}),share=shareReplay(0),blockComplete=function(){return function(e){return new Observable(function(t){return e.subscribe({complete:function(){},next:function(e){return t.next(e)},error:function(e){return t.error(e)}})})}},raf=new Observable(function(e){var t=!0;return window.requestAnimationFrame(function r(){t&&(e.next(),window.requestAnimationFrame(r))}),{unsubscribe:function(){t=!1}}}),noOp=function(){},createDefaultLifecycle=function(){return{mount:noOp,update:noOp,unmount:noOp}},isEmpty=function(e){return 0!==e&&(!e||"string"==typeof e&&!e.trim())},hasContent=function(e){return!e.length||!e.every(isEmpty)},flatten=function e(t){return Array.isArray(t)?all(t.map(compose(startWith(""),e))).pipe(blockComplete(),filter(hasContent)):isObservable(t)?switchMap(e,t):isPromise(t)?switchMap(e,from(t)):toObservable(t)},sharedRaf=share(raf),createReactiveTag=function(e){return function(t){for(var r=arguments.length,n=Array(r>1?r-1:0),o=1;o<r;o++)n[o-1]=arguments[o];return flatten(n).pipe(startWith([]),sample(sharedRaf),map(function(r){return e.apply(void 0,[t].concat(toConsumableArray(r)))}))}};function _objectEntries(e){for(var t=[],r=Object.keys(e),n=0;n<r.length;++n)t.push([r[n],e[r[n]]]);return t}function _objectEntries(e){for(var t=[],r=Object.keys(e),n=0;n<r.length;++n)t.push([r[n],e[r[n]]]);return t}function updateStyle(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};for(var n in _extends({},t,r)){var o=r&&r[n]?r[n]:"";r[n]===t[n]||("-"===n[0]?e.style.setProperty(n,o):e.style[n]=o)}}var VNode=function(){function e(t){var r=t.name,n=t.attrs,o=void 0===n?{}:n,a=t.lifecycle,i=void 0===a?{}:a,u=t.events,c=void 0===u?{}:u,s=t.children,l=void 0===s?{}:s,f=t.key,h=void 0===f?"":f;classCallCheck(this,e),this.name=r,this.attrs=o,this.lifecycle=i,this.events=c,this.children=l,this.key=h}return createClass(e,[{key:"createElement",value:function(e,t){var r=(e=e||"svg"===this.name)?document.createElementNS("http://www.w3.org/2000/svg",this.name):document.createElement(this.name);return this.updateEvents(r,{}),this.updateAttrs(r,{}),this.updateChildren(r,[],e,t),r}},{key:"updateElement",value:function(e,t,r,n){if(t.name!==this.name)return t.removeElement(e),this.createElement(r,n);this.updateEvents(e,t.events),this.updateAttrs(e,t.attrs),this.updateChildren(e,t.children,r,n),this.lifecycle.update(e)}},{key:"removeElement",value:function(e){this.children.map(function(t,r){return t.removeElement(e.childNodes[r])}),this.lifecycle.unmount(e)}},{key:"mount",value:function(e){this.children.map(function(e){return e.mount()}),this.lifecycle.mount(e)}},{key:"updateEvents",value:function(e,t){var r=this,n=!0,o=!1,a=void 0;try{for(var i,u=_objectEntries(this.events)[Symbol.iterator]();!(n=(i=u.next()).done);n=!0){var c=i.value,s=slicedToArray(c,2),l=s[0],f=s[1];t[l]?f!==t[l]&&(e.removeEventListener(l,t[l]),e.addEventListener(l,f)):e.addEventListener(l,f)}}catch(e){o=!0,a=e}finally{try{!n&&u.return&&u.return()}finally{if(o)throw a}}var h=_objectEntries(t).filter(function(e){var t=slicedToArray(e,1)[0];return!r.events[t]}),v=!0,m=!1,p=void 0;try{for(var d,y=h[Symbol.iterator]();!(v=(d=y.next()).done);v=!0){var b=d.value,E=slicedToArray(b,2),g=E[0],x=E[1];e.removeEventListener(g,x)}}catch(e){m=!0,p=e}finally{try{!v&&y.return&&y.return()}finally{if(m)throw p}}}},{key:"updateAttrs",value:function(e,t){for(var r in _extends({},t,this.attrs)){var n=this.attrs[r];n===t[r]||(isEmpty(n)?"value"===r&&"INPUT"===e.tagName?e.value="":e.removeAttribute(r):"style"===r?updateStyle(e,t.style,this.attrs.style):"value"===r&&"INPUT"===e.tagName?e.value=n:e.setAttribute(r,n))}}},{key:"updateChildren",value:function(e,t,r,n){for(var o in this.children){var a=this.children[o],i=t[o],u=e.childNodes[o];if(u)n(u,i,a,r);else{var c=a.createElement(r,n);e.appendChild(c),a.mount(c)}}for(var s in[].slice.call(e.childNodes,this.children.length)){var l=parseInt(s)+this.children.length,f=t[l],h=e.childNodes[l];h&&(f.removeElement(h),h.remove())}}}]),e}(),VText=function(){function e(t){var r=t.text;classCallCheck(this,e),this.text=r}return createClass(e,[{key:"createElement",value:function(){return document.createTextNode(this.text)}},{key:"updateElement",value:function(e,t){t.text!==this.text&&(e.textContent=this.text)}},{key:"removeElement",value:function(){}},{key:"mount",value:function(){}}]),e}();function createVTree(e){return new VNode({name:e.nodeName.toLowerCase(),lifecycle:createDefaultLifecycle(),events:{},attrs:{},untouchedAttributes:{},children:Array.prototype.map.call(e.childNodes,function(e){return 3===e.nodeType?new VText({text:e.nodeValue}):createVTree(e)})})}function patch(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:createVTree(e),r=arguments[2],n=arguments[3];if(r.constructor!==t.constructor||r.key!==t.key){t.removeElement(e);var o=r.createElement(n,patch);return e.parentNode.replaceChild(o,e),r.mount(o),o}var a=r.updateElement(e,t,n,patch);return a?(e.parentNode.replaceChild(a,e),r.mount(a,n),a):e}var VPatch=function(){function e(t){classCallCheck(this,e),this.vTree=t}return createClass(e,[{key:"createElement",value:function(){var e;return(e=this.vTree).createElement.apply(e,arguments)}},{key:"updateElement",value:function(){var e;return(e=this.vTree).updateElement.apply(e,arguments)}},{key:"removeElement",value:function(){var e;return(e=this.vTree).removeElement.apply(e,arguments)}},{key:"mount",value:function(){var e;return(e=this.vTree).mount.apply(e,arguments)}}]),e}();function createPropsStream(e){var t=new Subject;return{next:function(e){return t.next(e)},stream:t.pipe(startWith(e),shareReplay(1))}}var Component=function(){function e(t){var r=t.name,n=t.untouchedAttributes,o=t.key,a=void 0===o?"":o;if(classCallCheck(this,e),"function"!=typeof r)throw new TypeError("evolui Components must be functions");this.name=r,this.untouchedAttributes=n,this.key=a}return createClass(e,[{key:"createElement",value:function(e,t){var r=this,n=e?document.createElementNS("g"):document.createElement("div");this.state={},this.state.props=createPropsStream(this.untouchedAttributes),this.state.childTree=void 0;var o=this.name(this.state.props.stream);if(!o)throw new Error("Component "+this.name.name+" must return a stream!");return this.state.subscription=o.pipe(flatten,sample(sharedRaf)).subscribe({next:function(o){o instanceof VPatch?r.state.childTree=o.vTree:(n=t(n,r.state.childTree,o,e),r.state.childTree=o)},error:function(e){return console.error(e)}}),n}},{key:"updateElement",value:function(e,t,r,n){if(this.state=t.state,t.name!==this.name)return t.removeElement(e),this.createElement(r,n);this.state.props.next(this.untouchedAttributes)}},{key:"removeElement",value:function(e){this.state.subscription.unsubscribe(),this.state.childTree&&this.state.childTree.removeElement(e)}},{key:"mount",value:function(){}}]),e}(),flatMap=curry(function(e,t){return t.reduce(function(t,r){return t.concat(e(r))},[])});function _objectEntries$1(e){for(var t=[],r=Object.keys(e),n=0;n<r.length;++n)t.push([r[n],e[r[n]]]);return t}function _objectEntries$1(e){for(var t=[],r=Object.keys(e),n=0;n<r.length;++n)t.push([r[n],e[r[n]]]);return t}var isLifecycle=function(e){return["mount","update","unmount"].includes(e)},isEvent=function(e){return!!e.match(/^on/)},toEventName=function(e){return e.replace(/^on/,"").toLowerCase()},styleToObject=function(e){return e.split(";").reduce(function(e,t){var r=t.split(/:/),n=toArray(r),o=n[0],a=n.slice(1);return o.trim()&&(e[o.trim()]=a.join(":")),e},{})},formatChildren=flatMap(function(e){return Array.isArray(e)?formatChildren(e):[VNode,VText,VPatch,Component].some(function(t){return e instanceof t})?[e]:isEmpty(e)?[]:[new VText({text:""+e})]});function h(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[];if("function"==typeof e)return new Component({name:e,untouchedAttributes:_extends({},t,{children:r})});var n=_objectEntries$1(t).reduce(function(e,t){var r=slicedToArray(t,2),n=r[0],o=r[1];return"key"===n?e.key=o:isLifecycle(n)&&"function"==typeof o?e.lifecycle[n]=o:isEvent(n)&&"function"==typeof o?e.events[toEventName(n)]=o:e.attrs[n]="style"===n?"object"===(void 0===o?"undefined":_typeof(o))?o:styleToObject(o):o,e},{lifecycle:createDefaultLifecycle(),events:{},attrs:{}}),o=n.key,a=n.lifecycle,i=n.events,u=n.attrs;return new VNode({name:e,attrs:u,lifecycle:a,events:i,children:formatChildren(r),key:o})}var render=function(e,t){var r=void 0,n=void 0;return e.subscribe({next:function(e){e instanceof VPatch?n=e.vTree:(r?patch(r,n,e):(r=e.createElement(!1,patch),t.appendChild(r)),n=e)}})},createRenderProcess=function(e){return new Observable(function(t){var r=void 0,n=void 0,o=void 0;return e.subscribe({complete:function(){return t.complete()},error:function(e){return t.error(e)},next:function(e){if(!(e instanceof VNode))return t.next(e);var a=e.lifecycle.mount;e.lifecycle.mount=function(e,t){r=e,o=t,a(e)},r?(r=patch(r,n,e,o),t.next(new VPatch(e))):t.next(e),n=e}})})},toRenderProcess=function(e){return function(t){for(var r=arguments.length,n=Array(r>1?r-1:0),o=1;o<r;o++)n[o-1]=arguments[o];return createRenderProcess(e.apply(void 0,[t].concat(n)))}},html$1=toRenderProcess(createReactiveTag(createTag(h))),textTag=function(e){for(var t=arguments.length,r=Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];return e.reduce(function(e,t,n){return e+t+(void 0!==r[n]?r[n]:"")},"")},text=createReactiveTag(textTag),defaultSecondPerFrame=.016,reusedTuple=[0,0];function stepper(e,t,r){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:170,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:20,a=arguments.length>5&&void 0!==arguments[5]?arguments[5]:defaultSecondPerFrame,i=arguments.length>6&&void 0!==arguments[6]?arguments[6]:.1,u=t+(-n*(e-r)+-o*t)*a,c=e+u*a;return Math.abs(u)<i&&Math.abs(c-r)<i?(reusedTuple[0]=r,reusedTuple[1]=0,reusedTuple):(reusedTuple[0]=c,reusedTuple[1]=u,reusedTuple)}var ease=function(e,t){var r=void 0,n=0,o=void 0;return function(a){return o=a,void 0===r&&(r=a),new Observable(function(a){var i=!0,u=rafThrottle(function(){var c=stepper(r,n,o,e,t),s=slicedToArray(c,2);r=s[0],n=s[1],a.next(r),0!==n&&i&&u()});return u(),{unsubscribe:function(){i=!1}}})}},cache=new Map,getEase=function(e,t,r){return void 0===r?ease(e,t):(cache.has(r)||cache.set(r,ease(e,t)),cache.get(r))},mapValues=curry(function(e,t){return Object.keys(t).reduce(function(r,n){return _extends({},r,defineProperty({},n,e(t[n],n)))},{})}),createMutable=function(e){var t=new Subject,r=t.pipe(scan(function(e,t){return t(e)},e),startWith(e),shareReplay(1));return r.set=function(e){return t.next("function"==typeof e?e:function(){return e})},r};function createState(e){return mapValues(createMutable,e)}export{text,render,getEase as ease,createState,all};export default html$1; |
| { | ||
| "name": "evolui", | ||
| "version": "1.4.2", | ||
| "description": "", | ||
| "version": "1.5.0", | ||
| "description": "Observable powered templates for asynchronous UIs", | ||
| "main": "lib/evolui.js", | ||
@@ -15,2 +15,8 @@ "scripts": { | ||
| "license": "MIT", | ||
| "dependencies": { | ||
| "vdom-tag": "^0.1.1" | ||
| }, | ||
| "peerDependencies": { | ||
| "rxjs": "^6.1.0" | ||
| }, | ||
| "devDependencies": { | ||
@@ -34,6 +40,4 @@ "babel-core": "^6.26.0", | ||
| "rollup-plugin-node-resolve": "^3.0.0", | ||
| "rollup-plugin-uglify": "^3.0.0", | ||
| "rxjs": "^5.5.7", | ||
| "vdom-tag": "^0.1.1" | ||
| "rollup-plugin-uglify": "^3.0.0" | ||
| } | ||
| } |
100
README.md
| # evolui | ||
| A `8kb` reactive user interface library. | ||
| A tiny reactive user interface library. | ||
@@ -11,3 +11,3 @@ Evolui magically understands Observable and Promises and takes care of refreshing your UI when they emit new values. | ||
| ``` | ||
| npm install evolui | ||
| npm install evolui rxjs | ||
| ``` | ||
@@ -36,3 +36,3 @@ | ||
| `, | ||
| document.body | ||
| document.querySelector('#mount') | ||
| ) | ||
@@ -47,3 +47,4 @@ ``` | ||
| import html, { render } from 'evolui' | ||
| import { Observable } from 'rxjs' | ||
| import { interval } from 'rxjs' | ||
| import { take, map } from 'rxjs/operators' | ||
@@ -53,8 +54,9 @@ render( | ||
| <p> | ||
| Hello, ${Observable.interval(1000) | ||
| .take(4) | ||
| .map(index => ['.', '..', '...', 'World!'][index])} | ||
| Hello, ${interval(1000).pipe( | ||
| take(4), | ||
| map(index => ['.', '..', '...', 'World!'][index]) | ||
| )} | ||
| </p> | ||
| `, | ||
| document.body | ||
| document.querySelector('#mount') | ||
| ) | ||
@@ -72,2 +74,6 @@ ``` | ||
| ```js | ||
| import html from 'evolui' | ||
| import { from } from 'rxjs' | ||
| import { startWith } from 'rxjs/operators' | ||
| const getCharacterName = id => | ||
@@ -84,6 +90,6 @@ fetch(`https://swapi.co/api/people/${id}`) | ||
| id => html` | ||
| <h1>${Observable.fromPromise(getCharacterName(id)).startWith( | ||
| 'Loading...' | ||
| )}</h1> | ||
| ` | ||
| <h1> | ||
| ${from(getCharacterName(id)).pipe(startWith('Loading...'))} | ||
| </h1> | ||
| ` | ||
| )} | ||
@@ -104,10 +110,13 @@ </div> | ||
| import html, { createState, render } from 'evolui' | ||
| import { map } from 'rxjs/operators' | ||
| const Button = props$ => | ||
| props$.map( | ||
| ({ text, onClick }) => html` | ||
| <button class="Button" onClick=${onClick}> | ||
| props$.pipe( | ||
| map( | ||
| ({ text, onClick }) => html` | ||
| <button class="Button" onClick=${onClick}> | ||
| ${text} | ||
| </button> | ||
| ` | ||
| </button> | ||
| ` | ||
| ) | ||
| ) | ||
@@ -135,5 +144,25 @@ | ||
| render(App(), document.body) | ||
| render(html`<${App} />`, document.querySelector('#mount')) | ||
| ``` | ||
| ### children | ||
| Components can have children 👍 | ||
| ```js | ||
| import html, { render } from 'evolui' | ||
| import { map } from 'rxjs/operators' | ||
| const CrazyLayout = map(({ children }) => html`<div>${children}</div>`) | ||
| render( | ||
| html` | ||
| <${CrazyLayout}> | ||
| <p>I'm the content</p> | ||
| </${CrazyLayout}> | ||
| `, | ||
| document.querySelector('#mount') | ||
| ) | ||
| ``` | ||
| ## Animations | ||
@@ -147,14 +176,13 @@ | ||
| You just have to add `.switchMap(ease(<stiffness>, <damping>))` to any of your observable to make it animated. | ||
| You just have to pipe any of your observables to `switchMap(ease(<stiffness>, <damping>))` to make it animated. | ||
| ```js | ||
| import html, { render, ease } from 'evolui' | ||
| import { Observable } from 'rxjs' | ||
| import { fromEvent } from 'rxjs' | ||
| import { switchMap, map, startWith } from 'rxjs/operators' | ||
| const position$ = new Observable(observer => { | ||
| observer.next({ x: 0, y: 0 }) | ||
| window.addEventListener('click', e => { | ||
| observer.next({ x: e.clientX, y: e.clientY }) | ||
| }) | ||
| }) | ||
| const position$ = fromEvent(window, 'click').pipe( | ||
| map(() => ({ x: e.clientX, y: e.clientY })), | ||
| startWith({ x: 0, y: 0 }) | ||
| ) | ||
@@ -166,8 +194,8 @@ render( | ||
| style="transform: translate( | ||
| ${position$.map(m => m.x).switchMap(ease(120, 18))}px, | ||
| ${position$.map(m => m.y).switchMap(ease(120, 18))}px | ||
| ${position$.pipe(map(p => p.x), switchMap(ease(120, 18)))}px, | ||
| ${position$.pipe(map(p => p.y), switchMap(ease(120, 18)))}px | ||
| );" | ||
| /> | ||
| `, | ||
| document.body | ||
| document.querySelector('#mount') | ||
| ) | ||
@@ -206,3 +234,3 @@ ``` | ||
| render(App(), document.body) | ||
| render(html`<${App} />`, document.querySelector('#mount')) | ||
| ``` | ||
@@ -214,7 +242,9 @@ | ||
| import { ease } from 'evolui' | ||
| import { Observable } from 'rxjs' | ||
| import { interval } from 'rxjs' | ||
| import { switchMap } from 'rxjs/operators' | ||
| Observable.interval(1000) | ||
| .switchMap(ease(120, 20)) | ||
| .forEach(x => console.log(x)) // every values will be interpolated | ||
| interval(1000).pipe( | ||
| switchMap(ease(120, 20)), | ||
| subscribe(x => console.log(x)) // every values will be interpolated | ||
| ) | ||
| ``` | ||
@@ -248,3 +278,3 @@ | ||
| `, | ||
| document.body | ||
| document.querySelector('#mount') | ||
| ) | ||
@@ -251,0 +281,0 @@ ``` |
@@ -10,3 +10,3 @@ import babel from 'rollup-plugin-babel' | ||
| file: output, | ||
| format: 'cjs' | ||
| format: 'es' | ||
| }, | ||
@@ -24,3 +24,4 @@ plugins: [ | ||
| ...additionnalPlugins | ||
| ] | ||
| ], | ||
| external: ['vdom-tag', 'rxjs', 'rxjs/operators'] | ||
| }) | ||
@@ -27,0 +28,0 @@ |
@@ -5,16 +5,15 @@ import { | ||
| raf, | ||
| startWith, | ||
| fromPromise, | ||
| toObservable, | ||
| all, | ||
| map, | ||
| filter, | ||
| switchMap, | ||
| sample, | ||
| share, | ||
| blockComplete | ||
| blockComplete, | ||
| filter, | ||
| startWith, | ||
| map, | ||
| from | ||
| } from './utils/observables' | ||
| import { compose } from './utils/functions' | ||
| import { isEmpty } from './utils/misc' | ||
| import { compose } from './utils/functions' | ||
@@ -37,5 +36,5 @@ const hasContent = xs => !xs.length || !xs.every(isEmpty) | ||
| : isObservable(variable) | ||
| ? switchMap(flatten)(variable) | ||
| ? switchMap(flatten, variable) | ||
| : isPromise(variable) | ||
| ? switchMap(flatten, fromPromise(variable)) | ||
| ? switchMap(flatten, from(variable)) | ||
| : toObservable(variable) | ||
@@ -42,0 +41,0 @@ |
@@ -1,2 +0,2 @@ | ||
| import { Subject, sample } from '../utils/observables' | ||
| import { Subject, sample, startWith, shareReplay } from '../utils/observables' | ||
| import { flatten, sharedRaf } from '../core' | ||
@@ -9,3 +9,3 @@ import VPatch from './VPatch' | ||
| next: props => sub.next(props), | ||
| stream: sub.startWith(props).shareReplay(1) | ||
| stream: sub.pipe(startWith(props), shareReplay(1)) | ||
| } | ||
@@ -16,2 +16,5 @@ } | ||
| constructor({ name, untouchedAttributes, key = '' }) { | ||
| if (typeof name !== 'function') | ||
| throw new TypeError('evolui Components must be functions') | ||
| this.name = name | ||
@@ -18,0 +21,0 @@ this.untouchedAttributes = untouchedAttributes |
@@ -1,6 +0,7 @@ | ||
| import { Observable } from 'rxjs/Observable' | ||
| import { Subject } from 'rxjs/Subject' | ||
| import { curry, pipe } from './functions' | ||
| import { last, init } from './arrays' | ||
| import { Observable, Subject, of, from, combineLatest } from 'rxjs' | ||
| import { map, filter, startWith, scan, sample } from 'rxjs/operators' | ||
| import { curry } from './functions' | ||
| export { Subject, Observable, of, from, map, filter, startWith, scan, sample } | ||
| export const isPromise = p => p && typeof p.then === 'function' | ||
@@ -10,100 +11,4 @@ | ||
| export const point = (...xs) => | ||
| new Observable(observer => { | ||
| for (const x of xs) observer.next(x) | ||
| observer.complete() | ||
| return { | ||
| unsubscribe: () => {} | ||
| } | ||
| }) | ||
| export const toObservable = x => (isObservable(x) ? x : of(x)) | ||
| export const fromPromise = p => | ||
| new Observable(observer => { | ||
| p | ||
| .then(x => observer.next(x)) | ||
| .then(() => observer.complete()) | ||
| .catch(err => observer.error(err)) | ||
| return { | ||
| unsubscribe: () => {} | ||
| } | ||
| }) | ||
| export const toObservable = x => (isObservable(x) ? x : point(x)) | ||
| export const startWith = curry( | ||
| (initalValue, stream) => | ||
| new Observable(observer => { | ||
| observer.next(initalValue) | ||
| return stream.subscribe(observer) | ||
| }) | ||
| ) | ||
| const Nothing = 'Nothing' | ||
| export const combineLatest = (...xs) => { | ||
| const observables = init(xs) | ||
| const combiner = last(xs) | ||
| return new Observable(observer => { | ||
| const values = observables.map(() => Nothing) | ||
| const active = observables.map(() => true) | ||
| const subs = observables.map((obs, index) => | ||
| obs.subscribe({ | ||
| error: e => { | ||
| console.error(e) | ||
| active[index] = false | ||
| if (active.every(x => x === false)) observer.complete() | ||
| }, | ||
| complete: () => { | ||
| active[index] = false | ||
| if (active.every(x => x === false)) observer.complete() | ||
| }, | ||
| next: x => { | ||
| values[index] = x | ||
| if (values.every(x => x !== Nothing)) { | ||
| let result | ||
| try { | ||
| result = combiner(...values) | ||
| } catch (err) { | ||
| console.error(err) | ||
| } | ||
| observer.next(result) | ||
| } | ||
| } | ||
| }) | ||
| ) | ||
| return { | ||
| unsubscribe: () => { | ||
| subs.forEach(s => s.unsubscribe()) | ||
| } | ||
| } | ||
| }) | ||
| } | ||
| export const map = curry((mapper, stream) => { | ||
| return new Observable(observer => | ||
| stream.subscribe({ | ||
| error: e => observer.error(e), | ||
| next: x => observer.next(mapper(x)), | ||
| complete: () => observer.complete() | ||
| }) | ||
| ) | ||
| }) | ||
| export const filter = curry((predicate, stream) => { | ||
| return new Observable(observer => | ||
| stream.subscribe({ | ||
| error: e => observer.error(e), | ||
| next: x => { | ||
| if (predicate(x)) observer.next(x) | ||
| }, | ||
| complete: () => observer.complete() | ||
| }) | ||
| ) | ||
| }) | ||
| export const switchMap = curry((switchMapper, stream) => { | ||
@@ -144,64 +49,5 @@ let subscription | ||
| export const sample = curry((sampleStream, stream) => { | ||
| const none = Symbol('None') | ||
| return new Observable(observer => { | ||
| let latestValue = none | ||
| const sub = stream.subscribe({ | ||
| next: value => { | ||
| latestValue = value | ||
| }, | ||
| complete: () => observer.complete(), | ||
| error: e => observer.error(e) | ||
| }) | ||
| const sampleSub = sampleStream.subscribe({ | ||
| next: () => { | ||
| if (latestValue !== none) { | ||
| observer.next(latestValue) | ||
| latestValue = none | ||
| } | ||
| }, | ||
| complete: () => observer.complete(), | ||
| error: e => observer.error(e) | ||
| }) | ||
| return { | ||
| unsubscribe: () => { | ||
| sub.unsubscribe() | ||
| sampleSub.unsubscribe() | ||
| } | ||
| } | ||
| }) | ||
| }) | ||
| export const all = obs => | ||
| obs.length ? combineLatest(...obs, (...xs) => xs) : point([]) | ||
| obs.length ? combineLatest(...obs, (...xs) => xs) : of([]) | ||
| export const scan = curry((scanner, seed, stream) => { | ||
| let acc = seed | ||
| const scanValue = x => { | ||
| acc = scanner(acc, x) | ||
| return acc | ||
| } | ||
| return new Observable(observer => | ||
| stream.subscribe({ | ||
| error: e => observer.error(e), | ||
| next: x => observer.next(scanValue(x)), | ||
| complete: () => observer.complete() | ||
| }) | ||
| ) | ||
| }) | ||
| export const throttle = curry( | ||
| (throttler, stream) => | ||
| new Observable(observer => { | ||
| return stream.subscribe({ | ||
| complete: throttler(() => observer.complete()), | ||
| error: e => observer.error(e), | ||
| next: throttler(x => observer.next(x)) | ||
| }) | ||
| }) | ||
| ) | ||
| export const shareReplay = curry((count, stream) => { | ||
@@ -273,25 +119,1 @@ let observers = [] | ||
| }) | ||
| const addOperator = (C, name, f) => { | ||
| C.prototype[name] = f | ||
| } | ||
| ;[ | ||
| { name: 'pipe', f: pipe }, | ||
| { name: 'map', f: map }, | ||
| { name: 'filter', f: filter }, | ||
| { name: 'scan', f: scan }, | ||
| { name: 'startWith', f: startWith }, | ||
| { name: 'share', f: share }, | ||
| { name: 'shareReplay', f: shareReplay }, | ||
| { name: 'sample', f: sample }, | ||
| { name: 'switchMap', f: switchMap } | ||
| ].forEach(({ name, f }) => { | ||
| addOperator(Observable, name, function(...args) { | ||
| return f(...args)(this) | ||
| }) | ||
| addOperator(Subject, name, function(...args) { | ||
| return f(...args)(this) | ||
| }) | ||
| }) | ||
| export { Subject, Observable } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Dev dependency count
- decreased by-10%
18
- Number of package files
- increased by1.61%
63
- Number of lines in readme file
- increased by11.28%
296
Worsened metrics
- Total package byte prevSize
- decreased by-42.94%
118985
- Dependency count
- increased byInfinity%
2
- Lines of code
- decreased by-39.06%
3133
Dependency changes
+ Addedvdom-tag@^0.1.1
+ Addedrxjs@6.6.7(transitive)
+ Addedtslib@1.14.1(transitive)
+ Addedvdom-tag@0.1.1(transitive)