| !WA:2!DB1wZTrsv4OA2q8ozzXxI9gNDHOkM1SuaghNefipHghPnkRILZi54KTGvtpZ0sthpAMXDpJKL52gryXCheWYLD5YQkab2auLEHxP8VGtPIk)aYpHu8dGtpJKJDivbl7lu4h009PpN(C7781o11MuOF2fo9clnzJjTN0ENf6s4wfPE1dDU9mpW0NBt5AeRnS5(bbJR5Y2EBc3oDfFF3qwaFRs1QjOHx6VDYZACi8pE7rcAE3t(6OG(eplhF(Q(mVqZLZTsLC69tU1L9D95xovQuk6IaIf9WCIviZ3tKrxes4HQAmpwOQzn8JWrTtiNvVoLloX88HlFJE2uZOA1Q0oGYVuUIRMFTIAH4gDseNSuhra11TGTq9bIitAtQxyzuB2w9RUC2YvQwUsw9kArOtmdCjTPCDpsdQqvpwvZlrjUHo7z6QCkAQE5vZvSy3iVHHGAFlF3OgELLzGIjNyZIe3(z6s8yniYSjd8m5HP0889O7sjcA5qECX9idSXyuQrvzeZfulFpBrhPoY8bMtRbH5H2cZbF0JaVimp8XWLp7JlrN4YQ7bJXXIMmIs1dJyDADzLuvZ1NyNxtW2MoJEJiSLPQHvfRzGfu1TCjcHCLziXfZq5YbMd71jDhffLvvwCHZ1PoNzldRtPFrEsUrD0fwODkMjTtNEjFZzxNgmr5nJiCA68rUUPx3Hfs7XJdj5DSRDBSqZSQZ9JcgAvzmcpSMWNhcZ1RgA1YmULl1OtKGwK1Gf6O7k)C0hI4ik3J4EnSMHx4gpaRByQ7fMhHp(Ct9SxSWALhqIcryxPGyeL6UjEjbB(0dbGf8Wnk9c9TAMCxhpLr1tXSdMoG7hMUfHZz(80MS6PRh5j6kRbRZSdDoA)ACePGTssir5Hji88srY0ZS8Y65YTshUFReuXsrm7(3mJ3vkC5nDxNw2eJ4AS6QAybOvVlvsVWRwALkzlIwegJis1tIfyjHEFMxnFEcysTRG6wlEwcgBsRlSZC9yOQL9J4w0x4qWYQWhifCeyS |
| <template> | |
| <fieldset class="date-input" :data-qa-id="id"> | |
| <legend>{{ legend }}</legend> | |
| <component | |
| @change="onChange($event)" | |
| :is="component" | |
| :custom-validity="customValidity" | |
| v-bind="$props" | |
| /> | |
| </fieldset> |
Reference to this twitter thread: https://twitter.com/jsonberrry/status/1199566382716731393
Subject: "injecting the actions service into the component level as a means for propagating success/error states to a presentational layer"
Question from @jdpearce
"“Injecting the actions service...” woah, woah, woah...what?!
Why aren’t you setting a property in the store and selecting that?"
| import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; | |
| import { Event, NavigationEnd, NavigationStart, Router } from '@angular/router'; | |
| import { asyncScheduler } from 'rxjs'; | |
| import { filter, observeOn, scan } from 'rxjs/operators'; | |
| interface ScrollPositionRestore { | |
| event: Event; | |
| positions: { [K: number]: number }; | |
| trigger: 'imperative' | 'popstate'; | |
| idToRestore: number; |
| import { someApiService } from './some-api.service'; | |
| import { propsAreTruthy, ignoreFalsySignals } from 'rxjs-toolkit'; | |
| // imagine getSource$ return an object like this: | |
| const exampleSource = { | |
| id: '123', | |
| origin: { | |
| name: '', | |
| url: 'noop.com', | |
| } |
| import { of } from 'rxjs'; | |
| import { propsAreTruthy, tapLog } from 'rxjs-toolkit'; | |
| const source$ = of({ | |
| foo: { | |
| bar: { | |
| baz: 'truthy!', | |
| }, | |
| }, | |
| zap: { |
| import { from } from 'rxjs'; | |
| import { propsAreTruthy, tapLog } from 'rxjs-toolkit'; | |
| const topLevelTruthy = { | |
| one: 'I', | |
| two: 'am', | |
| three: 'truthy', | |
| iHaveNestedProps: { // top level also truthy | |
| nested: null, | |
| }, |
| import { someDataSource } from './some-api.service'; | |
| import { ignoreFalsySignals, tapLog } from 'rxjs-toolkit'; | |
| interface Signal { | |
| foo: string; | |
| } | |
| /** | |
| * signals$ pushes out an Observable of Signal | |
| * imagine the source of the stream is the return from an API call |
| import { from } from 'rxjs'; | |
| import { ignoreFalsySignals, tapLog } from 'rxjs-toolkit'; | |
| from([ | |
| 'I', | |
| false, | |
| 'am', | |
| null, | |
| 'truthy', | |
| ]).pipe( |
| import { of } from 'rxjs'; | |
| import { tapLog } from 'rxjs-toolkit'; | |
| of('hello').pipe( | |
| tapLog(), // log out whatever the signal is, so "hello" | |
| tapLog('labelFoo') // give it a label, { labelFoo: "hello" } | |
| ).subscribe() |