chore: update examples

pi0 · Aug 14, 2024 · e65cc25 · e65cc25
1 parent e8cdd77
commit e65cc25
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 22 deletions.
diff --git a/.github/workflows/playground.yml b/.github/workflows/playground.yml
@@ -0,0 +1,19 @@
+name: Playground deploy
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  # https://github.com/cloudflare/wrangler-action
+  deploy:
+    runs-on: ubuntu-latest
+    name: Deploy
+    steps:
+      - uses: actions/checkout@v4
+      - name: Deploy
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          workingDirectory: "playground"
diff --git a/README.md b/README.md
@@ -12,6 +12,10 @@
 > [!IMPORTANT]
 > 🚧 This is still a work in progress. Feedback and contributions are welcome!
 
+## 🍿 Demo
+
+Checkout
+
 ## Usage
 
 We first need to initiate universal cross-hooks:
@@ -143,9 +147,14 @@ import * as Y from "yjs";
 import { WebsocketProvider } from "y-crossws/provider";
 
 const ydoc = new Y.Doc();
-const wsUrl = `ws://${window.location.host}`;
 const roomName = "default";
-const provider = new WebsocketProvider(wsURL, roomName, ydoc /* options */);
+
+const wsProto = window.location.protocol === "https:" ? "wss:" : "ws:";
+const wsUrl = `${wsProto}://${window.location.host}/_ws`;
+
+const provider = new WebsocketProvider(wsURL, roomName, ydoc, {
+  /* options */
+});
 ```
 
 ### Provider options

diff --git a/playground/deno.ts b/playground/deno.ts
@@ -7,6 +7,8 @@ const mimes = {
   ".html": "text/html",
   ".js": "text/javascript",
   ".css": "text/css",
+  ".svg": "image/svg+xml",
+  ".json": "application/json",
 };
 
 Deno.serve(

diff --git a/playground/node.mjs b/playground/node.mjs
@@ -8,6 +8,8 @@ const mimes = {
   ".html": "text/html",
   ".js": "text/javascript",
   ".css": "text/css",
+  ".svg": "image/svg+xml",
+  ".json": "application/json",
 };
 
 const server = createServer(async (req, res) => {

diff --git a/playground/public/index.html b/playground/public/index.html
@@ -4,7 +4,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 </head>
 <body>
-  ycrossws demos:
+  y-cross demos:
   <ul>
     <li>
       <a href="./prosemirror/">ProseMirror</a>
@@ -13,4 +13,8 @@
       <a href="./tiptap/">Tiptap</a>
     </li>
   </ul>
+  <br />
+  <a href="https://github.com/pi0/y-crossws">
+    Learn more about y-crossws in github
+  </a>
 </body>
diff --git a/playground/public/prosemirror/index.html b/playground/public/prosemirror/index.html
@@ -5,7 +5,20 @@
   <link rel="stylesheet" href="./style.css" />
 </head>
 <body>
-  <div id="editor"></div>
+  <!-- prettier-ignore -->
+  <div id="links" style="position: absolute; right: 5px; bottom: 5px;">
+    <a href="https://github.com/pi0/y-crossws" target="_blank" rel="noopener noreferrer" >github</a>
+  </div>
+  <div id="editor">
+    <div id="loading">
+      <!-- prettier-ignore -->
+      <div style="display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh;">
+        <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+        <svg width="1em" height="1em" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#ababab" style="margin: 0.5em"><g fill="none" fill-rule="evenodd"><g transform="translate(1 1)" stroke-width="2"><circle stroke-opacity=".5" cx="18" cy="18" r="18"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1s" repeatCount="indefinite"/></path></g></g></svg>
+        Loading demo...
+      </div>
+    </div>
+  </div>
 
   <script type="importmap">
     {

diff --git a/playground/public/prosemirror/index.js b/playground/public/prosemirror/index.js
@@ -15,14 +15,17 @@ import { schema } from "./schema.js";
 
 const ydoc = new Y.Doc();
 
-const wsEndpoint = `ws://${window.location.host}`;
+const wsProto = window.location.protocol === "https:" ? "wss:" : "ws:";
+const wsUrl = `${wsProto}//${window.location.host}/_ws`;
 
-const provider = new WebsocketProvider(wsEndpoint, "prosemirror", ydoc);
+const provider = new WebsocketProvider(wsUrl, "prosemirror", ydoc);
 
 const type = ydoc.getXmlFragment("prosemirror");
 
 const editor = document.querySelector("#editor");
 
+editor.innerHTML = "";
+
 const prosemirrorView = new EditorView(editor, {
   state: EditorState.create({
     schema: schema,

diff --git a/playground/public/tiptap/index.html b/playground/public/tiptap/index.html
@@ -6,7 +6,20 @@
   <link rel="stylesheet" href="./theme.css" />
 </head>
 <body>
-  <div id="editor"></div>
+  <!-- prettier-ignore -->
+  <div id="links" style="position: absolute; right: 5px; top: 5px">
+    <a href="https://github.com/pi0/y-crossws" target="_blank" rel="noopener noreferrer" >github</a>
+  </div>
+  <div id="editor">
+    <div id="loading">
+      <!-- prettier-ignore -->
+      <div style="display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh;">
+        <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+        <svg width="1em" height="1em" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#ababab" style="margin: 0.5em"><g fill="none" fill-rule="evenodd"><g transform="translate(1 1)" stroke-width="2"><circle stroke-opacity=".5" cx="18" cy="18" r="18"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1s" repeatCount="indefinite"/></path></g></g></svg>
+        Loading demo...
+      </div>
+    </div>
+  </div>
   <script type="importmap">
     {
       "imports": {

diff --git a/playground/public/tiptap/index.js b/playground/public/tiptap/index.js
@@ -6,20 +6,21 @@ import Editor from "./editor.js";
 import React from "react";
 import { createRoot } from "react-dom/client";
 
-const h = React.createElement;
-
-const wsEndpoint = `ws://${window.location.host}`;
+const wsProto = window.location.protocol === "https:" ? "wss:" : "ws:";
+const wsUrl = `${wsProto}//${window.location.host}/_ws`;
 
 const room = `room-${new Date().toISOString().split("T")[0].replace(/-/g, ".")}`;
 
 // ydoc and provider for Editor A
 const ydocA = new Y.Doc();
 
-const providerA = new WebsocketProvider(wsEndpoint, "tiptap", ydocA);
+const providerA = new WebsocketProvider(wsUrl, "tiptap", ydocA);
 
 // ydoc and provider for Editor B
 const ydocB = new Y.Doc();
-const providerB = new WebsocketProvider(wsEndpoint, "tiptap", ydocB);
+const providerB = new WebsocketProvider(wsUrl, "tiptap", ydocB);
+
+const h = React.createElement;
 
 const App = () => {
   return h(

diff --git a/playground/wrangler.toml b/playground/wrangler.toml
@@ -1,13 +1,6 @@
 compatibility_date = "2024-01-01"
-
+name = "y-crossws"
 site = { bucket = "./public" }
-
 main = "./cf.ts"
-
-durable_objects.bindings = [
-  { name = "$DurableObject", class_name = "$DurableObject" }
-]
-
-migrations = [
-  { tag = "v1", new_classes = ["$DurableObject"] }
-]
+durable_objects.bindings = [{ name = "$DurableObject", class_name = "$DurableObject" }]
+migrations = [{ tag = "v1", new_classes = ["$DurableObject"] }]