Proof of concept for using Code Overrides in Framer to connect to blokdots

Blokdots.tsx

import type { ComponentType } from "react"
import { useState, useEffect } from "react"
import { Override } from "framer"
import { Manager } from "https://jspm.dev/socket.io-client"

// Learn more: https://www.framer.com/docs/guides/code-components/
// Use with https://blokdots.com and the Socket.IO server integration

let manager = null
let socket = null

function setupSocket(onConnect = null, onDisconnect = null, onError = null) {
    if (!manager) {
        manager = new Manager("http://localhost:8777", {
            transports: ["websocket"],
        })
    }
    if (!socket) {
        socket = manager.socket("/")

        socket.on("connect", () => {
            console.log("🟢 Connected")
            onConnect && onConnect()
        })

        socket.on("connect_error", (reason) => {
            console.log("Connect error", reason)
            onError && onError(reason)
        })

        socket.on("disconnect", (reason) => {
            console.log("🔴 Disconnected", reason)
            onDisconnect && onDisconnect(reason)
        })
    }
}

// Learn more: https://www.framer.com/docs/guides/overrides/

export const Button: Override = (props) => {
    setupSocket()

    if (props.onClick) {
        // when `onClick` is present, the component has a On Click interaction defined which we can trigger
        // This should probably register a listener based on props.id
        socket.on("blokdots", (message) => {
            if (message === "click") {
                props.onClick()
            }
        })
    }

    return {
        onTap(event, click) {
            socket.connected && socket.emit("blokdots", "buttonTap")
        },
    }
}

export function Checkbox(): Override {
    setupSocket()
    return {
        onToggle(value) {
            socket.connected && socket.emit("blokdots", "checkboxToggle", value)
        },
    }
}

export function RadioButtons(): Override {
    setupSocket()
    return {
        onChange(selectedOption) {
            socket.connected &&
                socket.emit("blokdots", "radioChange", selectedOption)
        },
    }
}