Merge pull request #115 from serenity-kit/improve-ts-config

Improve documentations
nikgraf · Jun 30, 2024 · 795ca83 · 795ca83
2 parents d4706a7 + 86b4eea
commit 795ca83
Show file tree

Hide file tree

Showing 16 changed files with 205 additions and 160 deletions.
diff --git a/documentation/components/AuthorizedAuthorsExample/AuthorizedAuthorsExample.tsx b/documentation/components/AuthorizedAuthorsExample/AuthorizedAuthorsExample.tsx
@@ -1,9 +1,9 @@
 import sodium from "libsodium-wrappers";
 import React, { useId, useRef, useState } from "react";
+import { useY } from "react-yjs";
 import { DevTool } from "secsync-react-devtool";
 import { useYjsSync } from "secsync-react-yjs";
 import * as Yjs from "yjs";
-import { useYArray } from "../../hooks/useYArray";
 
 const websocketEndpoint =
   process.env.NODE_ENV === "development"
@@ -133,7 +133,7 @@ export const Todos: React.FC<TodosProps> = ({ documentId, authorKeyPair }) => {
 
   const yDocRef = useRef<Yjs.Doc>(new Yjs.Doc());
   const yTodos: Yjs.Array<string> = yDocRef.current.getArray("todos");
-  const todos = useYArray(yTodos);
+  const todos = useY(yTodos);
   const [newTodoText, setNewTodoText] = useState("");
 
   const [state, send] = useYjsSync({

diff --git a/documentation/components/AutomergeTodosExample.tsx b/documentation/components/AutomergeTodosExample.tsx
@@ -42,7 +42,7 @@ const AutomergeTodosExample: React.FC<Props> = ({
     websocketSessionKey: "your-secret-session-key",
     onDocumentUpdated: async ({ knownSnapshotInfo }) => {},
     getNewSnapshotData: async ({ id }) => {
-      const docState = Automerge.save(currentDoc);
+      const docState: Uint8Array = Automerge.save(currentDoc);
       return {
         data: docState,
         key: documentKey,

diff --git a/documentation/components/SimpleExampleWrapper.tsx b/documentation/components/SimpleExampleWrapper.tsx
@@ -5,8 +5,8 @@ import { generateId } from "secsync";
 
 type Props = {
   component: React.ComponentType<{
-    documentId: string;
-    documentKey: Uint8Array;
+    documentId: string | null;
+    documentKey: Uint8Array | null;
   }>;
   generateDocumentKey: boolean;
 };
@@ -16,8 +16,8 @@ const SimpleExampleWrapper: React.FC<Props> = ({
   generateDocumentKey,
 }) => {
   const [isReady, setIsReady] = useState(false);
-  const documentKeyRef = useRef<Uint8Array>(null);
-  const documentIdRef = useRef<string>(null);
+  const documentKeyRef = useRef<Uint8Array | null>(null);
+  const documentIdRef = useRef<string | null>(null);
 
   const updateHashParams = () => {
     const paramsString = window.location.hash.slice(1);
@@ -41,6 +41,7 @@ const SimpleExampleWrapper: React.FC<Props> = ({
       const paramsString = window.location.hash.slice(1);
       const searchParams = new URLSearchParams(paramsString);
       const keyString = searchParams.get("key");
+      if (!keyString) throw new Error("No key found in URL params");
       documentKey = sodium.from_base64(keyString);
     } catch (err) {
     } finally {

diff --git a/documentation/components/YjsLocalFirstExample/YjsLocalFirstExample.tsx b/documentation/components/YjsLocalFirstExample/YjsLocalFirstExample.tsx
@@ -1,9 +1,9 @@
 import sodium, { KeyPair } from "libsodium-wrappers";
 import React, { useEffect, useRef, useState } from "react";
+import { useY } from "react-yjs";
 import { DevTool } from "secsync-react-devtool";
 import { useYjsSync } from "secsync-react-yjs";
 import * as Yjs from "yjs";
-import { useYArray } from "../../hooks/useYArray";
 import { deserialize } from "./deserialize";
 import { serialize } from "./serialize";
 
@@ -97,7 +97,7 @@ export const YjsLocalFirstExample: React.FC<Props> = ({
   });
 
   const yTodos: Yjs.Array<string> = yDocRef.current.getArray("todos");
-  const todos = useYArray(yTodos);
+  const todos = useY(yTodos);
 
   return (
     <>

diff --git a/documentation/components/YjsProsemirrorExample.tsx b/documentation/components/YjsProsemirrorExample.tsx
@@ -26,7 +26,7 @@ type Props = {
   documentKey: Uint8Array;
 };
 
-export const cursorBuilder = (user) => {
+export const cursorBuilder = (user: { publicKey: string }) => {
   const cursor = document.createElement("span");
   cursor.classList.add("ProseMirror-yjs-cursor");
   cursor.setAttribute("style", `border-color: #444`);
@@ -91,7 +91,9 @@ const YjsProsemirrorExample: React.FC<Props> = ({
   const initiateEditor = () => {
     const yXmlFragment = yDocRef.current.getXmlFragment("document");
 
-    editorRef.current.innerHTML = "";
+    if (editorRef.current) {
+      editorRef.current.innerHTML = "";
+    }
     let state = EditorState.create({
       schema,
       plugins: [

diff --git a/documentation/components/YjsTiptapExample.tsx b/documentation/components/YjsTiptapExample.tsx
@@ -2,7 +2,12 @@ import Collaboration from "@tiptap/extension-collaboration";
 import { EditorContent, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import sodium, { KeyPair } from "libsodium-wrappers";
-import { useRef, useState } from "react";
+import {
+  ButtonHTMLAttributes,
+  DetailedHTMLProps,
+  useRef,
+  useState,
+} from "react";
 import { DevTool } from "secsync-react-devtool";
 import { useYjsSync } from "secsync-react-yjs";
 import { YAwarenessExtension } from "tiptap-extension-y-awareness";
@@ -18,7 +23,12 @@ type Props = {
   documentKey: Uint8Array;
 };
 
-const Button = (props) => {
+const Button = (
+  props: DetailedHTMLProps<
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  >
+) => {
   return (
     <button
       {...props}
@@ -93,48 +103,48 @@ const YjsTiptapExample: React.FC<Props> = ({ documentId, documentKey }) => {
     <>
       <div className="tiptap-toolbar">
         <Button
-          onClick={() => editor.chain().focus().toggleBold().run()}
+          onClick={() => editor?.chain().focus().toggleBold().run()}
           disabled={!editor?.can().chain().focus().toggleBold().run()}
           className={editor?.isActive("bold") ? "is-active" : ""}
         >
           bold
         </Button>
         <Button
-          onClick={() => editor.chain().focus().toggleItalic().run()}
+          onClick={() => editor?.chain().focus().toggleItalic().run()}
           disabled={!editor?.can().chain().focus().toggleItalic().run()}
           className={editor?.isActive("italic") ? "is-active" : ""}
         >
           italic
         </Button>
         <Button
-          onClick={() => editor.chain().focus().toggleStrike().run()}
+          onClick={() => editor?.chain().focus().toggleStrike().run()}
           disabled={!editor?.can().chain().focus().toggleStrike().run()}
           className={editor?.isActive("strike") ? "is-active" : ""}
         >
           strike
         </Button>
         <Button
-          onClick={() => editor.chain().focus().toggleCode().run()}
+          onClick={() => editor?.chain().focus().toggleCode().run()}
           disabled={!editor?.can().chain().focus().toggleCode().run()}
           className={editor?.isActive("code") ? "is-active" : ""}
         >
           code
         </Button>
-        <Button onClick={() => editor.chain().focus().unsetAllMarks().run()}>
+        <Button onClick={() => editor?.chain().focus().unsetAllMarks().run()}>
           clear marks
         </Button>
-        <Button onClick={() => editor.chain().focus().clearNodes().run()}>
+        <Button onClick={() => editor?.chain().focus().clearNodes().run()}>
           clear nodes
         </Button>
         <Button
-          onClick={() => editor.chain().focus().setParagraph().run()}
+          onClick={() => editor?.chain().focus().setParagraph().run()}
           className={editor?.isActive("paragraph") ? "is-active" : ""}
         >
           paragraph
         </Button>
         <Button
           onClick={() =>
-            editor.chain().focus().toggleHeading({ level: 1 }).run()
+            editor?.chain().focus().toggleHeading({ level: 1 }).run()
           }
           className={
             editor?.isActive("heading", { level: 1 }) ? "is-active" : ""
@@ -144,7 +154,7 @@ const YjsTiptapExample: React.FC<Props> = ({ documentId, documentKey }) => {
         </Button>
         <Button
           onClick={() =>
-            editor.chain().focus().toggleHeading({ level: 2 }).run()
+            editor?.chain().focus().toggleHeading({ level: 2 }).run()
           }
           className={
             editor?.isActive("heading", { level: 2 }) ? "is-active" : ""
@@ -154,7 +164,7 @@ const YjsTiptapExample: React.FC<Props> = ({ documentId, documentKey }) => {
         </Button>
         <Button
           onClick={() =>
-            editor.chain().focus().toggleHeading({ level: 3 }).run()
+            editor?.chain().focus().toggleHeading({ level: 3 }).run()
           }
           className={
             editor?.isActive("heading", { level: 3 }) ? "is-active" : ""
@@ -163,45 +173,45 @@ const YjsTiptapExample: React.FC<Props> = ({ documentId, documentKey }) => {
           h3
         </Button>
         <Button
-          onClick={() => editor.chain().focus().toggleBulletList().run()}
+          onClick={() => editor?.chain().focus().toggleBulletList().run()}
           className={editor?.isActive("bulletList") ? "is-active" : ""}
         >
           bullet list
         </Button>
         <Button
-          onClick={() => editor.chain().focus().toggleOrderedList().run()}
+          onClick={() => editor?.chain().focus().toggleOrderedList().run()}
           className={editor?.isActive("orderedList") ? "is-active" : ""}
         >
           ordered list
         </Button>
         <Button
-          onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+          onClick={() => editor?.chain().focus().toggleCodeBlock().run()}
           className={editor?.isActive("codeBlock") ? "is-active" : ""}
         >
           code block
         </Button>
         <Button
-          onClick={() => editor.chain().focus().toggleBlockquote().run()}
+          onClick={() => editor?.chain().focus().toggleBlockquote().run()}
           className={editor?.isActive("blockquote") ? "is-active" : ""}
         >
           blockquote
         </Button>
         <Button
-          onClick={() => editor.chain().focus().setHorizontalRule().run()}
+          onClick={() => editor?.chain().focus().setHorizontalRule().run()}
         >
           horizontal rule
         </Button>
-        <Button onClick={() => editor.chain().focus().setHardBreak().run()}>
+        <Button onClick={() => editor?.chain().focus().setHardBreak().run()}>
           hard break
         </Button>
         <Button
-          onClick={() => editor.chain().focus().undo().run()}
+          onClick={() => editor?.chain().focus().undo().run()}
           disabled={!editor?.can().chain().focus().undo().run()}
         >
           undo
         </Button>
         <Button
-          onClick={() => editor.chain().focus().redo().run()}
+          onClick={() => editor?.chain().focus().redo().run()}
           disabled={!editor?.can().chain().focus().redo().run()}
         >
           redo

diff --git a/documentation/components/YjsTldrawExample/Dynamic.tsx b/documentation/components/YjsTldrawExample/Dynamic.tsx
@@ -4,7 +4,7 @@ const ComponentWithNoSSR = dynamic(() => import("./YjsTldrawExample"), {
   ssr: false,
 });
 
-function Dynamic(props) {
+function Dynamic(props: any) {
   return <ComponentWithNoSSR {...props} />;
 }
 

diff --git a/documentation/components/YjsTldrawExample/useYjsSecSyncStore.ts b/documentation/components/YjsTldrawExample/useYjsSecSyncStore.ts
@@ -119,7 +119,6 @@ export function useYjsSecSyncStore({
           case "add":
           case "update": {
             const record = yStore.get(id)!;
-            // @ts-expect-error
             toPut.push(record);
             break;
           }

diff --git a/documentation/components/YjsTodosExample/YjsTodosExample.tsx b/documentation/components/YjsTodosExample/YjsTodosExample.tsx
@@ -1,9 +1,9 @@
 import sodium, { KeyPair } from "libsodium-wrappers";
 import React, { useRef, useState } from "react";
+import { useY } from "react-yjs";
 import { DevTool } from "secsync-react-devtool";
 import { useYjsSync } from "secsync-react-yjs";
 import * as Yjs from "yjs";
-import { useYArray } from "../../hooks/useYArray";
 
 const websocketEndpoint =
   process.env.NODE_ENV === "development"
@@ -29,7 +29,7 @@ export const YjsTodosExample: React.FC<Props> = ({
 
   const yDocRef = useRef<Yjs.Doc>(new Yjs.Doc());
   const yTodos: Yjs.Array<string> = yDocRef.current.getArray("todos");
-  const todos = useYArray(yTodos);
+  const todos = useY(yTodos);
   const [newTodoText, setNewTodoText] = useState("");
 
   const [state, send] = useYjsSync({

diff --git a/documentation/components/YjsUnsyncedTodosExample/YjsUnsyncedTodosExample.tsx b/documentation/components/YjsUnsyncedTodosExample/YjsUnsyncedTodosExample.tsx
@@ -1,15 +1,15 @@
 import React, { useRef, useState } from "react";
+import { useY } from "react-yjs";
 import * as Yjs from "yjs";
-import { useYArray } from "../../hooks/useYArray";
 
 export const YjsUnsyncedTodosExample: React.FC = () => {
   // initialize Yjs document
   const yDocRef = useRef<Yjs.Doc>(new Yjs.Doc());
   // get/define the array in the Yjs document
   const yTodos: Yjs.Array<string> = yDocRef.current.getArray("todos");
-  // the useYArray hook ensures React re-renders once
+  // the useY hook ensures React re-renders once
   // the array changes and returns the array
-  const todos = useYArray(yTodos);
+  const todos = useY(yTodos);
   // local state for the text of a new to-do
   const [newTodoText, setNewTodoText] = useState("");
 

diff --git a/documentation/hooks/useYArray.ts b/documentation/hooks/useYArray.ts
diff --git a/documentation/package.json b/documentation/package.json
@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "ts:check": "tsc --noEmit"
   },
   "repository": {
     "type": "git",
@@ -37,6 +38,7 @@
     "prosemirror-view": "^1.33.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-yjs": "^2.0.0",
     "secsync": "workspace:^",
     "secsync-react-automerge": "workspace:^",
     "secsync-react-devtool": "workspace:^",
@@ -52,6 +54,9 @@
     "@svgr/webpack": "^8.1.0",
     "@types/libsodium-wrappers": "^0.7.14",
     "@types/node": "^20.13.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/uuid": "^9.0.8",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.3",

diff --git a/documentation/pages/_app.tsx b/documentation/pages/_app.tsx
@@ -12,7 +12,7 @@ import "../styles/y-prosemirror.css";
 
 const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
 
-export default function App({ Component, pageProps }) {
+export default function App({ Component, pageProps }: any) {
   return (
     <>
       {/* additionally defines the font in <head> as elements like the theme-switch render outside of <main>

diff --git a/documentation/pages/docs/getting-started.mdx b/documentation/pages/docs/getting-started.mdx
@@ -25,17 +25,17 @@ We start from a Yjs To-Dos application that currently only manages a To-Do list
 
 ```tsx
 import React, { useRef, useState } from "react";
+import { useY } from "react-yjs";
 import * as Yjs from "yjs";
-import { useYArray } from "../../hooks/useYArray";
 
 export const YjsUnsyncedTodosExample: React.FC = () => {
   // initialize Yjs document
   const yDocRef = useRef<Yjs.Doc>(new Yjs.Doc());
   // get/define the array in the Yjs document
   const yTodos: Yjs.Array<string> = yDocRef.current.getArray("todos");
-  // the useYArray hook ensures React re-renders once
+  // the useY hook ensures React re-renders once
   // the array changes and returns the array
-  const todos = useYArray(yTodos);
+  const todos = useY(yTodos);
   // local state for the text of a new to-do
   const [newTodoText, setNewTodoText] = useState("");