chore: restructure vue-sync-engine workspace and remove unused files
This commit is contained in:
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>vue-sync-engine</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"name": "playground",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc -b && vite build",
|
||||
"preview": "vite preview",
|
||||
"typecheck": "vue-tsc -b"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.5.34",
|
||||
"vue-sync-engine": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^24.12.3",
|
||||
"@vitejs/plugin-vue": "^6.0.6",
|
||||
"@vue/tsconfig": "^0.9.1",
|
||||
"typescript": "~6.0.2",
|
||||
"vite": "^8.0.12",
|
||||
"vite-plugin-vue-devtools": "^8.1.2",
|
||||
"vue-tsc": "^3.2.8"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { Status, useEngine, useInfiniteQuery, useMutation, useQuery } from 'vue-sync-engine'
|
||||
import { PostEntity, UserEntity, postsInfinite, updatePostTitle, usersQuery, type Post, type User } from './demo.defs'
|
||||
import PostCard from './PostCard.vue'
|
||||
|
||||
const engine = useEngine()
|
||||
const selectedUserId = ref<number | undefined>(undefined)
|
||||
|
||||
const users = useQuery(usersQuery, () => undefined as void)
|
||||
const userList = computed(() =>
|
||||
(users.data.value?.ids ?? [])
|
||||
.map((id) => engine.mirror.getEntity<User>(UserEntity.name, id))
|
||||
.filter((u): u is User => !!u),
|
||||
)
|
||||
|
||||
const posts = useInfiniteQuery(postsInfinite, () => ({ userId: selectedUserId.value }))
|
||||
const postIds = computed(() => posts.pages.value.flatMap((p) => p.ids))
|
||||
const postsByIds = computed(() =>
|
||||
postIds.value
|
||||
.map((id) => engine.mirror.getEntity<Post>(PostEntity.name, id))
|
||||
.filter((p): p is Post => !!p),
|
||||
)
|
||||
|
||||
const editingId = ref<number | null>(null)
|
||||
const draft = ref('')
|
||||
const m = useMutation(updatePostTitle)
|
||||
|
||||
function startEdit(id: number, title: string) {
|
||||
editingId.value = id
|
||||
draft.value = title
|
||||
}
|
||||
|
||||
async function save() {
|
||||
if (editingId.value == null) return
|
||||
const id = editingId.value
|
||||
editingId.value = null
|
||||
try {
|
||||
await m.mutateAsync({ id, title: draft.value })
|
||||
} catch {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="app">
|
||||
<header>
|
||||
<h1>vue-sync-engine demo</h1>
|
||||
<p>JSONPlaceholder · IndexedDB cache · optimistic mutations · infinite scroll</p>
|
||||
</header>
|
||||
|
||||
<aside class="users">
|
||||
<h2>Users <span v-if="users.isLoading.value">…</span></h2>
|
||||
<ul>
|
||||
<li>
|
||||
<button :class="{ active: selectedUserId === undefined }" @click="selectedUserId = undefined">
|
||||
All posts
|
||||
</button>
|
||||
</li>
|
||||
<li v-for="u in userList" :key="u.id">
|
||||
<button :class="{ active: selectedUserId === u.id }" @click="selectedUserId = u.id">
|
||||
{{ u.name }} <small>@{{ u.username }}</small>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
<section class="posts">
|
||||
<h2>Posts <span v-if="posts.isLoading.value">…</span></h2>
|
||||
<PostCard
|
||||
v-for="p in postsByIds"
|
||||
:key="p.id"
|
||||
:post="p"
|
||||
:editing="editingId === p.id"
|
||||
:draft="draft"
|
||||
@edit="startEdit(p.id, p.title)"
|
||||
@input="draft = $event"
|
||||
@save="save"
|
||||
@cancel="editingId = null"
|
||||
/>
|
||||
<button class="more" :disabled="posts.isLoading.value" @click="posts.fetchNextPage">
|
||||
{{ posts.isLoading.value ? 'Loading…' : 'Load more' }}
|
||||
</button>
|
||||
<p v-if="m.status.value === Status.Error" class="err">Mutation failed: {{ m.error.value?.message }}</p>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.app {
|
||||
max-width: 920px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
font-family: system-ui, sans-serif;
|
||||
display: grid;
|
||||
grid-template-columns: 240px 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
header {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
h1 { margin: 0; }
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: #666;
|
||||
}
|
||||
.users ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.users button {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid #ddd;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
.users button.active {
|
||||
background: #111;
|
||||
color: white;
|
||||
border-color: #111;
|
||||
}
|
||||
.more {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
border: 1px dashed #ccc;
|
||||
background: #fafafa;
|
||||
cursor: pointer;
|
||||
}
|
||||
.err {
|
||||
color: #c00;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,73 @@
|
||||
<script setup lang="ts">
|
||||
import type { Post } from './demo.defs'
|
||||
|
||||
defineProps<{ post: Post; editing: boolean; draft: string }>()
|
||||
defineEmits<{
|
||||
edit: []
|
||||
input: [value: string]
|
||||
save: []
|
||||
cancel: []
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article class="post">
|
||||
<div v-if="editing" class="edit">
|
||||
<input :value="draft" @input="$emit('input', ($event.target as HTMLInputElement).value)" />
|
||||
<button @click="$emit('save')">Save</button>
|
||||
<button @click="$emit('cancel')">Cancel</button>
|
||||
</div>
|
||||
<h3 v-else>
|
||||
{{ post.title }}
|
||||
<button class="edit-btn" @click="$emit('edit')">✎</button>
|
||||
</h3>
|
||||
<p>{{ post.body }}</p>
|
||||
<small>user {{ post.userId }} · #{{ post.id }}</small>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.post {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
h3 {
|
||||
margin: 0 0 4px;
|
||||
font-size: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 6px;
|
||||
font-size: 13px;
|
||||
color: #444;
|
||||
}
|
||||
small {
|
||||
color: #999;
|
||||
font-size: 11px;
|
||||
}
|
||||
.edit {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.edit input {
|
||||
flex: 1;
|
||||
padding: 6px 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.edit-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
opacity: 0.4;
|
||||
font-size: 14px;
|
||||
}
|
||||
.edit-btn:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,86 @@
|
||||
import { defineEntity, defineInfiniteQuery, defineMutation, defineQuery, idbStore } from 'vue-sync-engine'
|
||||
|
||||
export interface Post {
|
||||
id: number
|
||||
userId: number
|
||||
title: string
|
||||
body: string
|
||||
}
|
||||
|
||||
export interface User {
|
||||
id: number
|
||||
name: string
|
||||
email: string
|
||||
username: string
|
||||
}
|
||||
|
||||
export const PostEntity = defineEntity<Post>({
|
||||
name: 'post',
|
||||
id: (p) => p.id,
|
||||
storage: idbStore({ dbName: 'demo-sync-engine' }),
|
||||
})
|
||||
export const UserEntity = defineEntity<User>({
|
||||
name: 'user',
|
||||
id: (u) => u.id,
|
||||
})
|
||||
|
||||
const BASE = 'https://jsonplaceholder.typicode.com'
|
||||
|
||||
async function http<T>(url: string, init?: RequestInit, signal?: AbortSignal): Promise<T> {
|
||||
const res = await fetch(url, { ...init, signal })
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status} for ${url}`)
|
||||
return (await res.json()) as T
|
||||
}
|
||||
|
||||
export const usersQuery = defineQuery<void, User[], { ids: number[] }>({
|
||||
name: 'users.list',
|
||||
key: () => ['users'],
|
||||
fetch: (_, ctx) => http<User[]>(`${BASE}/users`, undefined, ctx.signal),
|
||||
normalize: (items) => ({
|
||||
entities: { user: items },
|
||||
result: { ids: items.map((u) => u.id) },
|
||||
}),
|
||||
tags: () => ['users'],
|
||||
staleTime: 60_000,
|
||||
})
|
||||
|
||||
export const postsInfinite = defineInfiniteQuery<
|
||||
{ userId?: number },
|
||||
Post[],
|
||||
number,
|
||||
{ ids: number[]; nextPage: number | null }
|
||||
>({
|
||||
name: 'posts.infinite',
|
||||
key: (args) => ['posts', args.userId ?? 'all'],
|
||||
initialPageParam: 1,
|
||||
getNextPageParam: (last) => last.nextPage,
|
||||
fetch: (args, ctx) => {
|
||||
const params = new URLSearchParams({ _page: String(ctx.pageParam), _limit: '10' })
|
||||
if (args.userId != null) params.set('userId', String(args.userId))
|
||||
return http<Post[]>(`${BASE}/posts?${params}`, undefined, ctx.signal)
|
||||
},
|
||||
normalize: (items, _args, pageParam) => ({
|
||||
entities: { post: items },
|
||||
result: {
|
||||
ids: items.map((p) => p.id),
|
||||
nextPage: items.length === 10 ? (pageParam as number) + 1 : null,
|
||||
},
|
||||
}),
|
||||
tags: () => ['posts'],
|
||||
staleTime: 60_000,
|
||||
})
|
||||
|
||||
export const updatePostTitle = defineMutation<{ id: number; title: string }, Post>({
|
||||
name: 'post.updateTitle',
|
||||
fetch: (input, ctx) =>
|
||||
http<Post>(
|
||||
`${BASE}/posts/${input.id}`,
|
||||
{
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ title: input.title }),
|
||||
},
|
||||
ctx.signal,
|
||||
),
|
||||
optimistic: (input, ctx) => ctx.patchEntity(PostEntity, input.id, { title: input.title }),
|
||||
})
|
||||
@@ -0,0 +1,12 @@
|
||||
import { bootstrapWorker, indexedDBAdapter, createSharedWorkerServerEndpoint } from 'vue-sync-engine'
|
||||
import registry from 'virtual:sync-engine-registry'
|
||||
|
||||
interface SharedWorkerScopeLike {
|
||||
onconnect: ((ev: { ports: readonly MessagePort[] }) => void) | null
|
||||
}
|
||||
|
||||
bootstrapWorker({
|
||||
...registry,
|
||||
storage: indexedDBAdapter({ dbName: 'demo-sync-engine' }),
|
||||
endpoint: createSharedWorkerServerEndpoint(self as unknown as SharedWorkerScopeLike),
|
||||
})
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
declare const __SYNC_ENGINE_DEV__: boolean
|
||||
|
||||
declare module 'virtual:sync-engine-registry' {
|
||||
import type { EntityDef, InfiniteQueryDef, MutationDef, QueryDef } from 'vue-sync-engine'
|
||||
type AnyQueryDef = (QueryDef | InfiniteQueryDef) & { name: string }
|
||||
const registry: {
|
||||
entities: ReadonlyArray<EntityDef>
|
||||
queries: ReadonlyArray<AnyQueryDef>
|
||||
mutations: ReadonlyArray<MutationDef>
|
||||
}
|
||||
export default registry
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import {
|
||||
createTabEngine,
|
||||
createSharedWorkerClientTransport,
|
||||
installEngine,
|
||||
// createEngine,
|
||||
// indexedDBAdapter,
|
||||
} from 'vue-sync-engine'
|
||||
// import registry from 'virtual:sync-engine-registry'
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// Variant A — SharedWorker (cross-tab shared state, active)
|
||||
//
|
||||
// QueryGraph + storage live in a single SharedWorker that all tabs talk to via
|
||||
// MessagePort. Fetches are deduplicated across tabs, IndexedDB is opened once,
|
||||
// and the DevTools "Tabs" node shows every connected tab as a sibling.
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
const worker = new SharedWorker(new URL('./engine.worker.ts', import.meta.url), {
|
||||
type: 'module',
|
||||
name: 'vue-sync-engine',
|
||||
})
|
||||
|
||||
const engine = createTabEngine({
|
||||
transport: createSharedWorkerClientTransport(worker),
|
||||
})
|
||||
|
||||
const app = createApp(App)
|
||||
installEngine(app, engine)
|
||||
app.mount('#app')
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// Variant B — Inline, no worker (single-tab in-process, disabled)
|
||||
//
|
||||
// QueryGraph runs in the same thread as the UI via createInlineTransport.
|
||||
// Same auto-discovered registry as the worker variant (the syncEnginePlugin in
|
||||
// vite.config.ts is registered for the main bundle too), so adding a new
|
||||
// *.defs.ts file just works. Trade-off vs. variant A: each tab keeps its own
|
||||
// cache and refetches independently, and all defs are bundled into the main
|
||||
// chunk instead of the worker chunk.
|
||||
//
|
||||
// To switch: delete variant A above, uncomment the engine/registry imports at
|
||||
// the top, and uncomment the block below.
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// const engine = createEngine({
|
||||
// ...registry,
|
||||
// // engine-level KV store for QuerySnapshot + queued mutations.
|
||||
// // Omit to use memoryAdapter() (no persistence across reloads).
|
||||
// storage: indexedDBAdapter({ dbName: 'demo-sync-engine' }),
|
||||
// defaultStaleTime: 30_000,
|
||||
// defaultGcTime: 300_000,
|
||||
// })
|
||||
//
|
||||
// const app = createApp(App)
|
||||
// installEngine(app, engine, { defaults: { staleTime: 30_000, gcTime: 300_000 } })
|
||||
// app.mount('#app')
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"types": ["vite/client"],
|
||||
|
||||
/* Linting */
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "es2023",
|
||||
"lib": ["ES2023"],
|
||||
"module": "esnext",
|
||||
"types": ["node"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
/// <reference types="node" />
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import VueDevTools from 'vite-plugin-vue-devtools'
|
||||
import { syncEnginePlugin } from 'vue-sync-engine/plugin'
|
||||
|
||||
const enginePlugin = syncEnginePlugin({ definitions: ['/src/**/*.defs.ts'] })
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [VueDevTools(), vue(), enginePlugin],
|
||||
worker: {
|
||||
plugins: () => [syncEnginePlugin({ definitions: ['/src/**/*.defs.ts'] })],
|
||||
},
|
||||
define: {
|
||||
__VUE_OPTIONS_API__: 'false',
|
||||
__VUE_PROD_DEVTOOLS__: 'false',
|
||||
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
|
||||
// Strip dev-only assertions and DevTools setup in `vite build`; keep them
|
||||
// in `vite dev` so the Sync Engine panel works while developing.
|
||||
__SYNC_ENGINE_DEV__: JSON.stringify(process.env.NODE_ENV !== 'production'),
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user