init

qq15725 · Jan 2, 2024 · c4abf0f · c4abf0f
1 parent dddd5ec
commit c4abf0f
Show file tree

Hide file tree

Showing 21 changed files with 1,849 additions and 650 deletions.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -19,7 +19,7 @@
 
 ### Before submitting the PR, please make sure you do the following
 
-- [ ] Read the [Pull Request Guidelines](https://github.com/qq15725/starter-ts/blob/main/.github/pull-request-guidelines.md) and follow the [PR Title Convention](https://github.com/qq15725/starter-ts/blob/main/.github/commit-convention.md).
+- [ ] Read the [Pull Request Guidelines](https://github.com/qq15725/vue-crdt/blob/main/.github/pull-request-guidelines.md) and follow the [PR Title Convention](https://github.com/qq15725/vue-crdt/blob/main/.github/commit-convention.md).
 - [ ] Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
 - [ ] Provide a description in this PR that addresses **what** the PR is solving, or reference the issue that it solves (e.g. `fixes #123`).
 - [ ] Ideally, include relevant tests that fail without this PR but pass with it.
diff --git a/.github/workflows/release-tag.yml b/.github/workflows/release-tag.yml
@@ -20,4 +20,4 @@ jobs:
         with:
           tag_name: ${{ github.ref }}
           body: |
-            Please refer to [CHANGELOG.md](https://github.com/qq15725/starter-ts/blob/${{ github.ref_name }}/CHANGELOG.md) for details.
+            Please refer to [CHANGELOG.md](https://github.com/qq15725/vue-crdt/blob/${{ github.ref_name }}/CHANGELOG.md) for details.
diff --git a/README.md b/README.md
@@ -1,35 +1,63 @@
-<h1 align="center">starter-ts</h1>
+<h1 align="center">Vue CRDT</h1>
 
 <p align="center">
-  <a href="https://unpkg.com/starter-ts">
-    <img src="https://img.shields.io/bundlephobia/minzip/starter-ts" alt="Minzip">
+  <a href="https://unpkg.com/vue-crdt">
+    <img src="https://img.shields.io/bundlephobia/minzip/vue-crdt" alt="Minzip">
   </a>
-  <a href="https://www.npmjs.com/package/starter-ts">
-    <img src="https://img.shields.io/npm/v/starter-ts.svg" alt="Version">
+  <a href="https://www.npmjs.com/package/vue-crdt">
+    <img src="https://img.shields.io/npm/v/vue-crdt.svg" alt="Version">
   </a>
-  <a href="https://www.npmjs.com/package/starter-ts">
-    <img src="https://img.shields.io/npm/dm/starter-ts" alt="Downloads">
+  <a href="https://www.npmjs.com/package/vue-crdt">
+    <img src="https://img.shields.io/npm/dm/vue-crdt" alt="Downloads">
   </a>
-  <a href="https://github.com/qq15725/starter-ts/issues">
-    <img src="https://img.shields.io/github/issues/qq15725/starter-ts" alt="Issues">
+  <a href="https://github.com/qq15725/vue-crdt/issues">
+    <img src="https://img.shields.io/github/issues/qq15725/vue-crdt" alt="Issues">
   </a>
-  <a href="https://github.com/qq15725/starter-ts/blob/main/LICENSE">
-    <img src="https://img.shields.io/npm/l/starter-ts.svg" alt="License">
+  <a href="https://github.com/qq15725/vue-crdt/blob/main/LICENSE">
+    <img src="https://img.shields.io/npm/l/vue-crdt.svg" alt="License">
   </a>
 </p>
 
-## Try it now!
+## 📦 Install
 
-### GitHub Template
+```shell
+npm i vue-crdt
+```
+
+
+## 🦄 Usage
+
+```ts
+import { reactive, ref } from 'vue'
+import { defineStore, useHistory } from 'vue-crdt'
+
+const useEditorStore = defineStore(doc => {
+  // use y-webrtc
+  //
+  // new WebrtcProvider(
+  //  'your-room-name',
+  //  doc,
+  //  { password: 'optional-room-password' },
+  // )
+
+  return {
+    workspace: reactive({
+      pages: { a: 'b' },
+      activePage: null,
+    }),
+    width: ref(800),
+    height: ref(600),
+  }
+})
 
-[Create a repo from this template on GitHub](https://github.com/qq15725/starter-ts/generate).
+const { workspace, width, height } = useEditorStore()
 
-### Clone to local
+const history = useHistory(workspace)
 
-If you prefer to do it manually with the cleaner git history
+workspace.activePage = 123
+history.stopCapturing()
+workspace.activePage = 456
+history.undo()
 
-```bash
-npx degit qq15725/starter-ts my-ts-lib
-cd my-ts-lib
-pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
+console.log(workspace)
 ```
diff --git a/docs/index.html b/docs/index.html
@@ -5,5 +5,7 @@
   <title>Docs</title>
 </head>
 <body>
+<div id="app"></div>
+<script type="module" src="/src/main.ts"></script>
 </body>
 </html>
diff --git a/docs/package.json b/docs/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "docs",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.3.13"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.5.2",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8",
+    "vue-tsc": "^1.8.25"
+  }
+}
diff --git a/docs/src/App.vue b/docs/src/App.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+  import { reactive, ref } from 'vue'
+  import { WebrtcProvider } from 'y-webrtc'
+  import { defineStore, useHistory } from '../../src'
+
+  // clients connected to the same room-name share document updates
+  const useDocStore = defineStore(doc => {
+    new WebrtcProvider(
+      'your-room-name',
+      doc,
+      { password: 'optional-room-password' },
+    )
+
+    const workspace = reactive({
+      pages: { a: 'b' },
+      activePage: null,
+    })
+    const width = ref(0)
+    const height = ref(0)
+    const test2 = ref([])
+    return { workspace, width, height, test2 }
+  })
+
+  const { workspace, width, height, test2 } = useDocStore()
+
+  const { canUndo, canRedo, undo, redo, sync, reset } = useHistory(workspace)
+</script>
+
+<template>
+  <div>
+    <div>
+      <div>{{ workspace.activePage }}</div>
+      <input v-model="workspace.activePage">
+      <div>
+        <button :disabled="!canUndo" @click="undo()">undo</button>
+        <button :disabled="!canRedo" @click="redo()">redo</button>
+        <button @click="sync()">sync</button>
+        <button @click="reset()">reset</button>
+      </div>
+    </div>
+    <div>{{ width }}</div> <input v-model="width">
+    <div>{{ height }}</div> <input v-model="height">
+    <div>{{ test2 }}</div>
+  </div>
+</template>
diff --git a/docs/src/main.ts b/docs/src/main.ts
@@ -0,0 +1,3 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+createApp(App).mount('#app')
diff --git a/docs/src/vite-env.d.ts b/docs/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/docs/vite.config.ts b/docs/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+})
diff --git a/index.html b/index.html
diff --git a/package.json b/package.json
@@ -1,23 +1,35 @@
 {
-  "name": "starter-ts",
+  "name": "vue-crdt",
   "type": "module",
   "version": "0.0.0",
-  "packageManager": "pnpm@7.26.2",
-  "description": "Starter template for TypeScript library",
+  "packageManager": "pnpm@8.7.6",
+  "description": "CRDT in Vue.js",
   "author": "wxm",
   "license": "MIT",
-  "homepage": "https://github.com/qq15725/starter-ts",
+  "homepage": "https://github.com/qq15725/vue-crdt",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/qq15725/starter-ts.git"
+    "url": "git+https://github.com/qq15725/vue-crdt.git"
   },
   "bugs": {
-    "url": "https://github.com/qq15725/starter-ts/issues"
+    "url": "https://github.com/qq15725/vue-crdt/issues"
   },
   "keywords": [
-    "starter",
-    "template",
-    "typescript"
+    "reactive",
+    "crdt",
+    "yjs",
+    "sync",
+    "automerge",
+    "collaboration",
+    "collaborative",
+    "mobx",
+    "vue",
+    "vuejs",
+    "observable",
+    "operational transforms",
+    "conflict",
+    "offline",
+    "shared editing"
   ],
   "sideEffects": false,
   "exports": {
@@ -30,7 +42,6 @@
   "main": "dist/index.mjs",
   "module": "dist/index.mjs",
   "types": "types/index.d.ts",
-  "browser": "dist/index.js",
   "typesVersions": {
     "*": {
       "*": [
@@ -44,7 +55,7 @@
     "types"
   ],
   "scripts": {
-    "dev": "vite",
+    "dev": "pnpm -F docs dev",
     "lint": "eslint src",
     "test": "vitest --no-threads --no-isolate",
     "build": "vite build && tsc --project tsconfig.build.json",
@@ -59,6 +70,13 @@
     "eslint": "^8.34.0",
     "typescript": "^4.9.5",
     "vite": "^4.1.2",
-    "vitest": "^0.28.5"
+    "vitest": "^0.28.5",
+    "vue": "^3.3.13",
+    "y-webrtc": "^10.3.0",
+    "yjs": "^13.6.10"
+  },
+  "peerDependencies": {
+    "vue": "^3.*",
+    "yjs": "^13.*"
   }
 }