Skip to content

Commit

Permalink
Attempt fix chrome
Browse files Browse the repository at this point in the history
  • Loading branch information
@guillemcordoba
guillemcordoba committed Nov 6, 2023
1 parent 4935207 commit 9a12f30
Showing 1 changed file with 77 additions and 25 deletions.
102 changes: 77 additions & 25 deletions sites/stores/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,8 @@ <h2>Reactive stores to build hApps</h2>
</fragment>
</section>

<!-- TODO: motivation!!! LOOOK PIPE -->

<section>
<!-- prettier-ignore -->
<fragment language="markdown" animate="by-line with-ancestry">
Expand Down Expand Up @@ -158,6 +160,7 @@ <h2>Reactive stores to build hApps</h2>
- **Promises to contain the latest known value for a certain piece of relevant state in our app**
</fragment>

<!-- TODO: change the word "task" for something else -->
<pre
class="fragment fade-in"
><code class="typescript" data-noescape data-trim animate="by-line separate-comments trailing-comments-in-popover">
Expand Down Expand Up @@ -223,7 +226,11 @@ <h2>Reactive stores to build hApps</h2>
"libsodium-wrappers": "https://unpkg.com/modern-isomorphic-ws",
"isomorphic-ws": "https://unpkg.com/modern-isomorphic-ws",
"blakejs": "https://unpkg.com/modern-isomorphic-ws",
"lodash-es": "https://unpkg.com/modern-isomorphic-ws"
"lodash-es/isEqual.js": "https://unpkg.com/lodash-es/isEqual.js",
"lodash-es/flatMap.js": "https://unpkg.com/lodash-es/flatMap.js",
"lodash-es/uniqWith.js": "https://unpkg.com/lodash-es/uniqWith.js",
"lodash-es": "https://unpkg.com/modern-isomorphic-ws",
"lodash-es/": "https://unpkg.com/modern-isomorphic-ws/"
}
}
</script>
Expand All @@ -244,10 +251,10 @@ <h2>Reactive stores to build hApps</h2>
class="fragment fade-in"
><code class="typescript" data-noescape data-trim animate="by-line separate-comments trailing-comments-in-popover">
const lazyStore = lazyLoad(() => fetch('/some/big/request')); // Build the store
// **No request is done yet**
// **No request is made yet**
const unsubscribe1 = lazyStore.subscribe(value => console.log(value)); // Now the request is made

// After a while...
// After a while, after the fetch completed...

const unsubscribe2 = lazyStore.subscribe(value => console.log(value)); // No new request is made, the
// status is automatically "complete"
Expand All @@ -256,7 +263,17 @@ <h2>Reactive stores to build hApps</h2>
<!-- prettier-ignore -->
<fragment language="markdown" animate="by-line with-ancestry">
#### Complete This Exercise:
</fragment>
</fragment









><!-- How do we build an asyncstore? -->

<playground-exercise class="fragment fade-in">
<!-- prettier-ignore -->
Expand All @@ -276,6 +293,7 @@ <h2>Reactive stores to build hApps</h2>
content:'Second Post' }
]}
</script>
<!-- TODO: too small a chuck -->
<!-- prettier-ignore -->
<script type="sample/ts" filename="index.ts">
import { lazyLoad, AsyncReadable } from '@holochain-open-dev/stores';
Expand Down Expand Up @@ -311,7 +329,11 @@ <h2>Reactive stores to build hApps</h2>
"libsodium-wrappers": "https://unpkg.com/emittery",
"isomorphic-ws": "https://unpkg.com/modern-isomorphic-ws",
"blakejs": "https://unpkg.com/modern-isomorphic-ws",
"lodash-es": "https://unpkg.com/modern-isomorphic-ws"
"lodash-es/isEqual.js": "https://unpkg.com/lodash-es/isEqual.js",
"lodash-es/flatMap.js": "https://unpkg.com/lodash-es/flatMap.js",
"lodash-es/uniqWith.js": "https://unpkg.com/lodash-es/uniqWith.js",
"lodash-es": "https://unpkg.com/modern-isomorphic-ws",
"lodash-es/": "https://unpkg.com/modern-isomorphic-ws/"
}
}
</script>
Expand All @@ -333,7 +355,7 @@ <h2>Reactive stores to build hApps</h2>
const lazyStore = lazyLoadAndPoll(
() => fetch('/some/big/request'),
4000 // Polling interval in ms
); // Build the store, **no request is done yet**
); // Build the store, **no request is made yet**
const unsubscribe = lazyStore.subscribe(value => console.log(value)); // Now the request is made
// And will continually be made every 4 seconds
// After a while...
Expand All @@ -345,7 +367,7 @@ <h2>Reactive stores to build hApps</h2>
<fragment language="markdown" animate="by-line with-ancestry">
#### Complete This Exercise:
</fragment>

<!-- TODO: add usage of the stores to the exercise -->
<playground-exercise class="fragment fade-in">
<!-- prettier-ignore -->
<script type="sample/ts" filename="zome-calls.ts">
Expand Down Expand Up @@ -409,7 +431,11 @@ <h2>Reactive stores to build hApps</h2>
"libsodium-wrappers": "https://unpkg.com/emittery",
"isomorphic-ws": "https://unpkg.com/modern-isomorphic-ws",
"blakejs": "https://unpkg.com/modern-isomorphic-ws",
"lodash-es": "https://unpkg.com/modern-isomorphic-ws"
"lodash-es/isEqual.js": "https://unpkg.com/lodash-es/isEqual.js",
"lodash-es/flatMap.js": "https://unpkg.com/lodash-es/flatMap.js",
"lodash-es/uniqWith.js": "https://unpkg.com/lodash-es/uniqWith.js",
"lodash-es": "https://unpkg.com/modern-isomorphic-ws",
"lodash-es/": "https://unpkg.com/modern-isomorphic-ws/"
}
}
</script>
Expand All @@ -431,14 +457,14 @@ <h2>Reactive stores to build hApps</h2>
<pre
class="fragment fade-in"
><code class="typescript" data-noescape data-trim animate="by-line separate-comments trailing-comments-in-popover">
const lazyMap = new LazyHoloHashMap((agent: AgentPubKey) => // Define the fn to execute for new gets
const postsByAuthor = new LazyHoloHashMap((agent: AgentPubKey) => // Define the fn to execute for new gets
lazyLoadAndPoll(() => getAllPosts(agent), 4000) // Builds a new store that keeps polling whenever a new agent is requested
);
const myPostsStore1 = lazyMap.get(client.myPubKey); // Builds the store bound to "myPubKey"
const myPostsStore2 = lazyMap.get(client.myPubKey); // Does not build a new store, just returns the same one
const unsubscribe1 = myPostsStore.subscribe(value => console.log(value)); // Now the request is made
const myPostsStore1: AsyncReadable&lt;Array&lt;ActionHash>> = postsByAuthor.get(client.myPubKey); // Builds the store bound to "myPubKey"
const myPostsStore2: AsyncReadable&lt;Array&lt;ActionHash>> = postsByAuthor.get(client.myPubKey); // Does not build a new store, just returns the same one
const unsubscribe1 = myPostsStore1.subscribe(asyncStatus => console.log(asyncStatus)); // Now the request is made
// And will continually be made every 4 seconds
const unsubscribe2 = myPostsStore.subscribe(value => console.log(value)); // No other requests are made, the polling is already active
const unsubscribe2 = myPostsStore2.subscribe(asyncStatus => console.log(asyncStatus)); // No other requests are made, the polling is already active
// After a while...
unsubscribe1(); // Polling does not stop
unsubscribe2(); // Last subscriber unsubscribes, polling stops
Expand Down Expand Up @@ -476,7 +502,7 @@ <h2>Reactive stores to build hApps</h2>

// Builds an `AsyncReadable` store which lazily fetches all the posts,
// And keeps fetching the latest version of the post which have subscribers every 1 second to keep it up to date
export const latestPostVersion: LazyHoloHashMap<ActionHash, AsyncReadable<Post>>; // Implement the map
export const latestPostVersion: LazyHoloHashMap<ActionHash, AsyncReadable<Post>> = // Implement the map
</script>
<script filename="test.ts" type="sample/ts">
import { get } from 'svelte/store';
Expand Down Expand Up @@ -512,7 +538,11 @@ <h2>Reactive stores to build hApps</h2>
"libsodium-wrappers": "https://unpkg.com/emittery",
"isomorphic-ws": "https://unpkg.com/modern-isomorphic-ws",
"blakejs": "https://unpkg.com/modern-isomorphic-ws",
"lodash-es": "https://unpkg.com/modern-isomorphic-ws"
"lodash-es/isEqual.js": "https://unpkg.com/lodash-es/isEqual.js",
"lodash-es/flatMap.js": "https://unpkg.com/lodash-es/flatMap.js",
"lodash-es/uniqWith.js": "https://unpkg.com/lodash-es/uniqWith.js",
"lodash-es": "https://unpkg.com/modern-isomorphic-ws",
"lodash-es/": "https://unpkg.com/modern-isomorphic-ws/"
}
}
</script>
Expand All @@ -531,7 +561,7 @@ <h2>Reactive stores to build hApps</h2>
class="fragment fade-in"
><code class="typescript" data-noescape data-trim animate="by-line separate-comments trailing-comments-in-popover">
export function deriveAllPosts(alicePostsStore: Readable&lt;Post[]>, bobPostsStore: Readable&lt;Post[]>): Readable&lt;Posts[]> {
return derived([alicePostsStore, bobPostsStore],
return derived([alicePostsStore, bobPostsStore]: [Post[], Post[]],
([alicePosts, bobPosts]) => [...alicePosts, ...bobPosts] // Will be called any time either `alicePostsStore`
// or `bobPostsStore` are updated
);
Expand Down Expand Up @@ -585,7 +615,11 @@ <h2>Reactive stores to build hApps</h2>
"libsodium-wrappers": "https://unpkg.com/emittery",
"isomorphic-ws": "https://unpkg.com/modern-isomorphic-ws",
"blakejs": "https://unpkg.com/modern-isomorphic-ws",
"lodash-es": "https://unpkg.com/modern-isomorphic-ws"
"lodash-es/isEqual.js": "https://unpkg.com/lodash-es/isEqual.js",
"lodash-es/flatMap.js": "https://unpkg.com/lodash-es/flatMap.js",
"lodash-es/uniqWith.js": "https://unpkg.com/lodash-es/uniqWith.js",
"lodash-es": "https://unpkg.com/modern-isomorphic-ws",
"lodash-es/": "https://unpkg.com/modern-isomorphic-ws/"
}
}
</script>
Expand Down Expand Up @@ -659,7 +693,11 @@ <h2>Reactive stores to build hApps</h2>
"libsodium-wrappers": "https://unpkg.com/emittery",
"isomorphic-ws": "https://unpkg.com/modern-isomorphic-ws",
"blakejs": "https://unpkg.com/modern-isomorphic-ws",
"lodash-es": "https://unpkg.com/modern-isomorphic-ws"
"lodash-es/isEqual.js": "https://unpkg.com/lodash-es/isEqual.js",
"lodash-es/flatMap.js": "https://unpkg.com/lodash-es/flatMap.js",
"lodash-es/uniqWith.js": "https://unpkg.com/lodash-es/uniqWith.js",
"lodash-es": "https://unpkg.com/modern-isomorphic-ws",
"lodash-es/": "https://unpkg.com/modern-isomorphic-ws/"
}
}
</script>
Expand All @@ -680,7 +718,8 @@ <h2>Reactive stores to build hApps</h2>
class="fragment fade-in"
><code class="typescript" data-noescape data-trim animate="by-line separate-comments trailing-comments-in-popover">
export function deriveAllPosts(alicePostsStore: AsyncReadable&lt;Post[]>, bobPostsStore: AsyncReadable&lt;Post[]>): AsyncReadable&lt;Posts[]> {
return asyncDerived(joinAsync([alicePostsStore, bobPostsStore]), // Creates an `AsyncReadable&lt;[Array&lt;Post>, Array&lt;Post>]>`
const joinedPosts: AsyncReadable&lt;Posts[]> = joinAsync([alicePostsStore, bobPostsStore]); // Creates an `AsyncReadable&lt;[Array&lt;Post>, Array&lt;Post>]>`
return asyncDerived(joinedPosts,
([alicePosts, bobPosts]) => [...alicePosts, ...bobPosts] // Will be called any time either `alicePostsStore`
// or `bobPostsStore` are updated
);
Expand Down Expand Up @@ -740,7 +779,11 @@ <h2>Reactive stores to build hApps</h2>
"libsodium-wrappers": "https://unpkg.com/emittery",
"isomorphic-ws": "https://unpkg.com/modern-isomorphic-ws",
"blakejs": "https://unpkg.com/modern-isomorphic-ws",
"lodash-es": "https://unpkg.com/modern-isomorphic-ws"
"lodash-es/isEqual.js": "https://unpkg.com/lodash-es/isEqual.js",
"lodash-es/flatMap.js": "https://unpkg.com/lodash-es/flatMap.js",
"lodash-es/uniqWith.js": "https://unpkg.com/lodash-es/uniqWith.js",
"lodash-es": "https://unpkg.com/modern-isomorphic-ws",
"lodash-es/": "https://unpkg.com/modern-isomorphic-ws/"
}
}
</script>
Expand All @@ -765,9 +808,9 @@ <h2>Reactive stores to build hApps</h2>
// Imagine for some reason we need to display the latest content for all the posts in the app,
// and we already have a `LazyHoloHashMap` for the latest version of each of them
export function latestVersionOfAllPosts(
allPosts: ActionHash[],
allPostsHashes: ActionHash[],
latestVersionOfPostsMap: LazyHoloHashMap&lt;ActionHash, AsyncReadable&lt;Post>>
): AsyncReadable&lt;ReadonlyMap&lt;ActionHash, Posts>> {
): AsyncReadable&lt;ReadonlyMap&lt;ActionHash, Posts>> { // A ReadonlyMap is a map that only exposes a `get(hash)`
return sliceAndJoin(latestVersionOfPostsMap, allPosts); // Will do a get for each post ActionHash
// If some of the posts were already loaded,
// it will not need to make any new requests
Expand Down Expand Up @@ -828,7 +871,11 @@ <h2>Reactive stores to build hApps</h2>
"libsodium-wrappers": "https://unpkg.com/emittery",
"isomorphic-ws": "https://unpkg.com/modern-isomorphic-ws",
"blakejs": "https://unpkg.com/modern-isomorphic-ws",
"lodash-es": "https://unpkg.com/modern-isomorphic-ws"
"lodash-es/isEqual.js": "https://unpkg.com/lodash-es/isEqual.js",
"lodash-es/flatMap.js": "https://unpkg.com/lodash-es/flatMap.js",
"lodash-es/uniqWith.js": "https://unpkg.com/lodash-es/uniqWith.js",
"lodash-es": "https://unpkg.com/modern-isomorphic-ws",
"lodash-es/": "https://unpkg.com/modern-isomorphic-ws/"
}
}
</script>
Expand All @@ -851,7 +898,7 @@ <h2>Reactive stores to build hApps</h2>
// we already have a `LazyHoloHashMap` for the latest version of each of them
// and an `AsyncReadable` for all the post hashes in the app
export function latestVersionOfAllPosts(
allPostsStore: AsyncReadable&lt;ActionHash[]>,
allPostsHashesStore: AsyncReadable&lt;ActionHash[]>,
latestVersionOfPostsMap: LazyHoloHashMap&lt;ActionHash, AsyncReadable&lt;Post>>
): AsyncReadable&lt;ReadonlyMap&lt;ActionHash, Posts>> {
return pipe(allPostsStore, // We pipe from the `allPostsStore`
Expand All @@ -867,6 +914,7 @@ <h2>Reactive stores to build hApps</h2>
#### Complete This Exercise:
</fragment>

<!-- TODO: add example where pipe has two steps -->
<playground-exercise class="fragment fade-in">
<!-- prettier-ignore -->
<script type="sample/ts" filename="index.ts">
Expand Down Expand Up @@ -934,7 +982,11 @@ <h2>Reactive stores to build hApps</h2>
"libsodium-wrappers": "https://unpkg.com/emittery",
"isomorphic-ws": "https://unpkg.com/modern-isomorphic-ws",
"blakejs": "https://unpkg.com/modern-isomorphic-ws",
"lodash-es": "https://unpkg.com/modern-isomorphic-ws"
"lodash-es/isEqual.js": "https://unpkg.com/lodash-es/isEqual.js",
"lodash-es/flatMap.js": "https://unpkg.com/lodash-es/flatMap.js",
"lodash-es/uniqWith.js": "https://unpkg.com/lodash-es/uniqWith.js",
"lodash-es": "https://unpkg.com/modern-isomorphic-ws",
"lodash-es/": "https://unpkg.com/modern-isomorphic-ws/"
}
}
</script>
Expand Down

0 comments on commit 9a12f30

Please sign in to comment.