dependabot[bot] on npm_and_yarn
Bump shell-quote from 1.6.1 to … (compare)
dependabot[bot] on npm_and_yarn
dependabot[bot] on npm_and_yarn
Bump minimist from 1.2.0 to 1.2… (compare)
dependabot[bot] on npm_and_yarn
dependabot[bot] on npm_and_yarn
Bump cached-path-relative from … (compare)
Hi, Aditya. I'm new to this Gitter community, but I've been using Cycle.js off-and-on for a few years.
Have you had a chance to read these?
cyclejs/cyclejs#645
https://cycle.js.org/drivers.html#drivers-how-to-make-drivers
If you scroll down the second link, there's a function WSDriver(/* no sinks */) {…}
example.
You mention being new to Cycle.js; have you tried out the basic examples first?
I'm trying to use the Google Sheets API as both an output and input to Cycle's main. My first instinct is that it could be a driver, but I haven't come up with a great pattern to model it after. I don't really need it to do everything that the Sheets API does, so it doesn't make much sense to put in a message for everything; but the docs recommend not putting business logic in the drivers, so I don't necessarily want to just send string messages which do a business-specific function. And the docs also say that there's not usually a need to make a driver unless exposing it as a library.
So... what's the best way to encapsulate this type of interaction? Is a driver the right way to go, or is there something better? And if so, what's a good model for a rather diverse API?
makeCollection
definitely seems to be the way to go (from your link: "pickMerge
and pickCombine
…operate on a dynamic (growing or shrinking) collection of children instances.").
I haven't gotten around to trying out makeCollection
yet, but I did add a fun branch in my little train-simulator-game that shows where I want to go eventually: animation in an SVG.
I'm pretty sure my current approach using xs.periodic()
is too naïve (and definitely the whole first commit on this branch is hastily written as just a proof-of-concept), but I like my little overlapping squares and wanted to share. :)
Uncaught TypeError: this.ins.subscribe is not a function
_start index.ts:137
_add index.ts:1150
addListener index.ts:1210
subscribe index.ts:1230
subscriptions internals.ts:98
replicateMany internals.ts:97
_run index.ts:160
_run index.ts:97
run index.ts:207
<anonymous> main.ts:37
index.ts:137:25
_start index.ts:137
_add index.ts:1150
addListener index.ts:1210
subscribe index.ts:1230
subscriptions internals.ts:98
map self-hosted:224
replicateMany internals.ts:97
_run index.ts:160
_run index.ts:97
run index.ts:207
<anonymous> main.ts:37
InnerModuleEvaluation self-hosted:2374
evaluation self-hosted:2335
Here's my starting point:
class GoogleDriver {
private _responses: Stream<any> | null = null;
private _loginChanges: Stream<any> | null = null;
constructor(private stream: Stream<GoogleInput>) {
}
responses() {
if (this._responses === null)
this._responses = adapt(xs.create(new GoogleResponder(this.stream)))
return this._responses;
}
loginChanges() {
if (this._loginChanges === null)
this._loginChanges = adapt(xs.create({
start: listener =>
makeUpdateSigninStatus(listener),
stop: () => {}
}));
return this._loginChanges;
}
}
GoogleResponder
is a Producer<any>
.
isolate
with with an object scope where one of the keys is a lens. I can't find any documentation about that usage in the scope documentation. When trying to merge streams from that isolated component I am running into an issue with the types not matching.
export interface IDesktopState {
count: number // canary
windows: IWindow[]
search: string
}
const filterWindows =
pipe<[IDesktopState], IWindow[], IWindow[], IWindow[]>(
prop('windows'),
filter(windowHasTabManagerTab),
filter(windowHasTabs)
)
export const searchLens: Lens<IDesktopState, IWindow[]> = {
get: filterWindows,
set: (state: IDesktopState, _childState: IWindow[]) => state, // Read-only view: just ignore changes
}
export type DesktopReducer = Reducer<IDesktopState>
export type DesktopSources = IDriverSources & { state: StateSource<IDesktopState> }
export type DesktopSinks = DriverSinks & { state: Stream<DesktopReducer> }
export function Home(sources: DesktopSources): DesktopSinks {
const isolateDesktop$ = isolate(Desktop, { state: searchLens, DOM: '.home' }) as Component<DesktopSources, WindowSinks>
const desktop$ = isolateDesktop$(sources)
const ownIntent$ = intent(sources.DOM)
return {
//...
state: xs.merge(ownIntent$.state, desktop$.state)
}
}
desktop$
's state is type IWindow[]
, and in the outer scope puts that under the windows
property, so it is attempting to merge the window list into the object, which isn't correct. What is the best way to handle this? Should I wrap the state in the merge, like: state: xs.merge(ownIntent$.state, { windows: desktop$.state })
, or is there some way to get the lens to automatically map that back?
Desktop
looks like:,const collectSinks = (instances: Instances<WindowSinks>) => ({
DOM: instances.pickCombine(DOM).map(windows => div({ style: WindowsS }, windows)),
messages: instances.pickMerge(MESSAGES) as any as Stream<IMessage>,
state: instances.pickMerge(STATE) as any as Stream<WindowReducer>,
})
type Collection<Sources,Sinks> = (sources: Sources) => Sinks
export const Desktop: Collection<WindowSources, WindowSinks> = makeCollection<IWindow, WindowSources, WindowSinks>({
item: Window,
itemKey,
itemScope: key => '.' + key,
collectSinks,
})
makeCollection
with lenses? #851 Suggests that this isn't clear in the docs.
sources.DOM.select().elements()