Subcomponents (#1)

* adding subcomponents

* subcomponent submit working

* cave-click

* node tests

Author: maxmcd

.github/workflows/tests.yml

@@ -0,0 +1,24 @@
+name: Tests
+on: push
+jobs:
+  test-js:
+    name: test-js
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "12"
+      - uses: nanasess/setup-chromedriver@master
+      - run: cd cave-js && npm install
+      - run: cd cave-js && make test
+  test-go:
+    name: test-go
+    runs-on: ubuntu-latest
+    steps:
+      - name: Install Go
+        uses: actions/setup-go@v2
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Run all tests
+        run: go test -v ./...

.gitignore

@@ -1 +1,2 @@
+*.wasm
 .vscode

Makefile

@@ -4,6 +4,9 @@
 run_to_do_example: generate
 	cd examples/to-do && go run .
 
+.PHONY: run_connect4_example
+run_connect4_example: generate
+	cd examples/connect4 && go run .
 
 .PHONY: ./cave-js/bundle.js
 ./cave-js/bundle.js:
@@ -22,3 +25,7 @@ demos_push: demos_build
 
 demos_deploy: demos_push
 	cd cmd/cave-demos && fly deploy -v
+
+.PHONY: test
+test:
+	go test -cover ./...

bundle.go

@@ -1,45 +1 @@
 package cavegin
-
-import (
-	"net/http"
-
-	"github.com/gin-gonic/gin"
-	"github.com/gin-gonic/gin/render"
-	"github.com/maxmcd/cave"
-)
-
-func MakeRender(cavern *Cave, renderer cave.Renderer) render.Render {
-	return &Renderer{
-		renderer: renderer,
-		cavern:   cavern,
-	}
-}
-
-type Renderer struct {
-	renderer cave.Renderer
-	cavern   *Cave
-}
-
-func (r *Renderer) Render(w http.ResponseWriter) error {
-	return r.cavern.Render(r.renderer, w)
-}
-
-func (r *Renderer) WriteContentType(w http.ResponseWriter) {
-	w.Header().Add("Content-Type", "text/html")
-}
-
-type Cave struct {
-	cave.Cave
-}
-
-func (hc *Cave) Handler(rendererFunc func() cave.Renderer) gin.HandlerFunc {
-	return func(c *gin.Context) {
-		c.Render(200, MakeRender(hc, rendererFunc()))
-	}
-}
-
-func New() *Cave {
-	return &Cave{
-		Cave: cave.Cave{},
-	}
-}

cave-gin/cave-gin.go

@@ -1,54 +1,80 @@
-export type WebsocketMessage = [string, string, Array<any>];
+export type WebsocketMessage = [string, Array<any>, string];
 export enum MessageType {
   Patch = "p",
   Init = "init",
   Error = "error",
+  Submit = "submit",
+  Click = "click",
 }
 
 export class ClientMessage {
-  componentID: string;
-  event: string;
-  name: string;
+  type: MessageType;
   data: Array<any>;
+  componentID?: string;
+  name?: string;
+  subcomponentID?: string;
   constructor(
-    componentID: string,
-    event: string,
-    name: string,
-    data: Array<any>
+    type: MessageType,
+    data: Array<any>,
+    componentID?: string,
+    name?: string,
+    subcomponentID?: string
   ) {
+    this.type = type;
+    this.data = data;
     this.componentID = componentID;
-    this.event = event;
     this.name = name;
-    this.data = data;
-  }
-  serialize(): string {
-    return JSON.stringify([this.componentID, this.event, this.name, this.data]);
+    this.subcomponentID = subcomponentID;
   }
-}
-
-export class ServerMessage {
-  componentID: string;
-  event: string;
-  data: Array<any>;
-  constructor(input: WebsocketMessage) {
-    this.componentID = input[0];
-    this.event = input[1];
-    this.data = input[2];
+  prepare(): Array<any> {
+    let out: Array<any> = [this.type, this.data];
+    if (!this.componentID) {
+      return out;
+    }
+    out.push(this.componentID);
+    if (!this.name) {
+      return out;
+    }
+    out.push(this.name);
+    if (!this.subcomponentID) {
+      return out;
+    }
+    out.push(this.subcomponentID);
+    return out;
   }
   serialize(): string {
-    return JSON.stringify([this.componentID, this.event, this.data]);
+    return JSON.stringify(this.prepare());
   }
 }
 
 export class SubmitMessage extends ClientMessage {
   data: [string, Record<string, string>];
-  constructor(componentID: string, name: string, form: HTMLFormElement) {
+  constructor(
+    componentID: string,
+    name: string,
+    form: HTMLFormElement,
+    subcomponentID?: string
+  ) {
     let formData = new FormData(form);
     let formDataMap: Record<string, string> = {};
     formData.forEach((v, k) => {
       // TODO: file support
       formDataMap[k] = v.toString();
     });
-    super(componentID, "submit", name, [formDataMap]);
+    super(MessageType.Submit, [formDataMap], componentID, name, subcomponentID);
+  }
+}
+
+export class ServerMessage {
+  componentID: string;
+  event: string;
+  data: Array<any>;
+  constructor(input: WebsocketMessage) {
+    this.event = input[0];
+    this.data = input[1];
+    this.componentID = input[2];
+  }
+  serialize(): string {
+    return JSON.stringify([this.componentID, this.event, this.data]);
   }
 }

cave-js/src/messages.ts

@@ -11,6 +11,8 @@ import {
 export class WebsocketHandler {
   websocket: WebSocket;
   constructor() {
+    this.caveSubmitListener = this.caveSubmitListener.bind(this);
+    this.caveClickListener = this.caveClickListener.bind(this);
     this.addEventListeners();
     this.websocket = new WebSocket(
       `${wsScheme()}://${window.location.host}${
@@ -30,51 +32,89 @@ export class WebsocketHandler {
         componentIDs.push(val);
       }
     }
-    this.websocket.send(
-      new ClientMessage("", MessageType.Init, "", componentIDs).serialize()
-    );
+    this.send(new ClientMessage(MessageType.Init, componentIDs).serialize());
+  }
+  send(data: any): void {
+    console.log("sending msg to server", data);
+    return this.websocket.send(data);
   }
   onmessage(e: MessageEvent): any {
     console.log(e.data);
     let msg = new ServerMessage(JSON.parse(e.data));
+    console.log(msg);
     if (msg.event === MessageType.Patch) {
       let patches: Array<Patch> = msg.data.map((e) => diff.expandPatch(e));
-      // is this what we want? is cloning expensive here?
-      let node = document.querySelector("[cave-component]")?.cloneNode(true);
-      diff.apply(node, patches);
-      morphdom(document.querySelector("[cave-component]"), node);
+      diff.apply(document.querySelector("[cave-component]"), patches);
+      this.addEventListeners();
     }
     if (msg.event === MessageType.Error) {
       throw new Error("Server error: " + msg.data[0]);
     }
   }
 
   addEventListeners() {
+    // TODO: only add listeners to new code?
+    // how expensive is this?
     console.log("adding event listeners");
     document.querySelectorAll("[cave-submit]").forEach((elem) => {
-      let name = elem.getAttribute("cave-submit");
-      if (!name) {
-        // attributes must have a value
-        return;
-      }
-      elem.addEventListener("submit", this.caveSubmitListener(<string>name));
+      elem.addEventListener("submit", this.caveSubmitListener);
     });
+    document.querySelectorAll("[cave-click]").forEach((elem) => {
+      elem.addEventListener("click", this.caveClickListener);
+    });
+  }
+  findElementContext(
+    element: HTMLElement
+  ): [string | undefined, string | undefined] {
+    let componentID =
+      element.closest("[cave-component]")?.getAttribute("cave-component") ||
+      undefined;
+    let subcomponentID =
+      element
+        .closest("[cave-subcomponent]")
+        ?.getAttribute("cave-subcomponent") || undefined;
+    return [componentID, subcomponentID];
   }
+  caveClickListener(e: Event): void {
+    let element = <HTMLElement>e.target;
+    const [componentID, subcomponentID] = this.findElementContext(element);
+    if (!componentID) {
+      // if we're not in a cave component we shouldn't act
+      return;
+    }
+    e.preventDefault();
+    let name =
+      element.getAttribute("cave-click") ||
+      element.closest("[cave-click]")?.getAttribute("cave-click") ||
+      undefined;
+    this.send(
+      new ClientMessage(
+        MessageType.Click,
+        [],
+        componentID,
+        name,
+        subcomponentID
+      ).serialize()
+    );
+  }
+  caveSubmitListener(e: Event): void {
+    console.log("got submit", e, this);
+    let formElement = <HTMLFormElement>e.target;
 
-  caveSubmitListener(name: string): (e: Event) => void {
-    return (e) => {
-      let formElement = <HTMLFormElement>e.currentTarget;
-      let componentID = formElement
-        .closest("[cave-component]")
-        ?.getAttribute("cave-component");
-      if (!componentID) {
-        // if we're not in a cave component we shouldn't act
-        return;
-      }
-      e.preventDefault();
-      let formMessage = new SubmitMessage(componentID, name, formElement);
-      this.websocket.send(formMessage.serialize());
-    };
+    let name = formElement.getAttribute("cave-submit");
+    const [componentID, subcomponentID] = this.findElementContext(formElement);
+    if (!componentID) {
+      // if we're not in a cave component we shouldn't act
+      return;
+    }
+    e.preventDefault();
+    let formMessage = new SubmitMessage(
+      componentID,
+      name || "",
+      formElement,
+      subcomponentID
+    );
+    this.send(formMessage.serialize());
   }
 }