themarcba

const { computed, ref, effect } = require('@vue/reactivity')

let users = ref([])
let onlineUsers = computed(() => {
    return users.value.filter((user) => user.status === 'online')
})

effect(() => {
    console.log('# of online users changed', onlineUsers.value.length)
})

themarcba

This is an addition to my Vue.js Global 2020 talk about Vue 3 Reactivity.

Some people asked for the slides. You can find them here:
https://marcbackes.com/d8qaLT

themarcba

your_collection.find({
    your_date_field: {
        $gte: ISODate('2020-07-01T00:00:00.000Z'),  // From
        $lt: ISODate('2020-07-31T23:59:00.000Z'),   // Until
    },
})

themarcba

<style>
    * {
        user-select: none;
    }
    body {
        margin: 0;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
    #app {
        height: 100vh;

themarcba

<script>
    let activeEffect

    class Dep {
        subscribers = new Set()
        depend() {
            if (activeEffect) this.subscribers.add(activeEffect)
        }
        notify() {
            this.subscribers.forEach((sub) => sub())

themarcba

<script>
    let activeEffect

    class Dep {
        // Initialize the value of the reactive dependency
        constructor(value) {
            this._value = value
            this.subscribers = new Set()
        }

themarcba

<div id="app"></div>
<script>
    // Create virtual node
    function h(tag, props, children) {
        // Return the virtual node
        return {
            tag,
            props,
            children,
        }

themarcba

const timedResolve = name => {
    return new Promise(resolve =>
        setTimeout(() => {
            console.log(name)
            resolve()
        }, 500 * Math.random()),
    )
}

Promise.all([

themarcba

window.App.startLocalMedia(video, screencapture, audioonly, receiveonly, null, null).then(
    function(o) {
        if (!receiveonly) {
            fm.liveswitch.Log.info('Started local media.')
        }

        fm.liveswitch.Log.info('Registering...')

        window.App.joinAsync(_this.incomingMessage, _this.peerLeft, _this.peerJoined, _this.clientRegistered).then(
            function(o) {

themarcba

// Transforms a string to either upper or lowercase, depending which is dominant
// code => code
// coDe => code
// CoDE => CODE
// etc.
const transform = input => {
    const lower = [...input].reduce((count, char) => {
        return char == char.toLowerCase() ? count + 1 : count
    }, 0)
    return lower / input.length >= .5 ? input.toLowerCase() : input.toUpperCase()