Skip to content

Commit

Permalink
1.5.6 (#204)
Browse files Browse the repository at this point in the history
* feat: QweryProvider (#1)

* feat: useQwery hook (#2)

* feat: useQwery hook

* fix: proxy onChange for when a Promise is not returned, so onSuccess is not triggered

* chore: update readme (#3)

* feat: subscriptions and polling (#4)

* feat: useRememberScroll (#5)

* feat: refetchOnWindowFocus (#6)

* 0.0.1

* fix: awaiting initial value, either or can resolve to nullish (#8)

* types: useQweryOptions (#9)

* types: rough types for useQweryOptions

* fix: with makeMonitoredFetch, if a fetch is not enabled then it returns void so don't initialize the crdt in this case. update useRememberScroll to not execute server side

* chore: add vitest, react testing library, jsdom (#10)

* test: adding test api and redis (#11)

* test: add tests for useQwery, csr and ssr (#12)

* test: add tests for useQwery, csr and ssr

* chore: add gh actions

* 0.0.2

* chore: cleanup and update vite to build as lib (#14)

* chore: remove api.put (#15)

* chore: update deps, update exports, update types (#16)

* fix: effects don't run in ssr (#17)

* fix: effects don't run in ssr so return initialValue if it is an object, up to client to await and use suspense or what not. also update renderSsr to remove window while calling ReactDOMServer

* test: adding tests for async caches

* style: remove unused import

* types: update types

* refactor: update QweryProvider

* style: double quotes

* fix: silence act errors (#18)

* style: remove unused imports (#19)

* 0.0.3

* chore: update readme (#21)

* chore: update readme (#22)

* 1.0.0

* chore: update export locations (#24)

* 1.0.1

* chore: update README (#26)

* 1.0.2

* chore: update readme (#28)

* chore: update exports (#29)

* 1.0.3

* fix: unsubscribe (#31)

* fix: subscription return (#32)

* 1.0.4

* fix: fix build output issues making react and other deps external, update subscribe and onWindowFocus (#34)

* 1.0.5

* feat: to disable queries if offline (#36)

* 1.0.6

* feat: add broadcast channel support (#38)

* feat: add broadcast channel support

* fix: broadcast the diff

* 1.1.0

* feat: cancellable queries (#40)

* chore: update readme (#42)

* 1.2.0

* feat: suspense (#45)

* feat: suspense

* fix: suspense fetch before rendering

* 1.3.0

* fix: suspense throw errors (#53)

* 1.3.1

* fix: suspense onChange, throw errors after invoking onError (#55)

* chore: monorepo (#56)

* chore: monorepo

* chore: update github actions

* chore: lint in ci/cd

* Revert "chore: lint in ci/cd"

This reverts commit 567b07e.

* chore: lint in ci/cd

* chore: run lint, test and build concurrently (#57)

* feat: remove ability to manually handle broadcasts (#58)

* v1.3.2

* fix: trigger rerender after dispatching a broadcasted update (#60)

* fix: close broadcast channel (#61)

* fix: early return if broadcast next is same as current (#62)

* fix: early return if broadcast next is same as current. all listening channels receive a message even if on the same tab, and just reset to the next broadcasted state because otherwise we gotta determine if its an array and all

* style: remove unused import

* fix: only post next as a message

* docs: add comment

* fix: stablize id for each broadcaster, update some types, add pack script, fix issues with generated types (#63)

* v1.3.3

* refactor: rework types (#65)

* refactor: rework types

* refactor: splitting up types, accepting a refetch prop if refetchOnWindowFocus is true

* chore: update lint rules

* refactor: rearrange keys in base definitions to be in the same order

* refactor: reducing use of any (#66)

* refactor: reducing use of any

* refactor: alias InitialValue and Data

* chore: update package.json (#67)

* refactor: label next as Data

* chore: update package.json

* chore: point main to umd version

* refactor: update broadcast types

* refactor: fixing up untagged refetch base options

* refactor: any -> unknown for base options

* refactor: using any instead of unknown, less errors for no reason (#68)

* v1.4.0

* chore(vue): vue init (#70)

* feat(vue): useExecutionEnvironment (#71)

* feat: useExecutionEnvironment

* chore: update lockfile

* chore: update tsconfig

* feat(vue): use network mode (#72)

* chore(vue): use network mode

* fix: connectionStatus is computed

* fix(vue): run a fetch on mounted also when determining network status (#73)

* feat(vue): use remember scroll (#74)

* feat(vue): qwery context (#75)

* feat(vue): use qwery (#76)

* feat(vue): use qwery roughly

* refactor: tidy things up, use shallowReactive instead of ref

* refactor: remove todos and if suspense then first check the crdt state and if not check the result (initial render)

* chore(vue): update exports (#77)

* fix(vue): health check initially even for ssr (#78)

* fix(vue): check hasInjectionContext (#79)

* refactor(vue): add use id composable (#80)

* Revert "refactor(vue): add use id composable (#80)" (#82)

This reverts commit 4af9f64.

* chore(vue): add api and redis from react, add example test (#83)

* chore(vue): add api and redis from react, add example test

* chore(vue): update pnpm-lock

* chore(vue): revert change to tsconfig

* test(vue): csr (#84)

* test(vue): caches queries csr

* chore(vue): revert change to tsconfig

* test(vue): subscriptions, conditional queries, window focus

* test(vue): onChange

* test(vue): ssr (#85)

* refactor(vue): normal args instead of object (#86)

* test(vue): refactor, going with defineComponent (#87)

* refactor(react): initializeCrdt -> initializeCRDT, remove refetch (#88)

* refactor(vue): remove refetch (#89)

* chore(react,vue): update clean script (#90)

* chore: update readme (#91)

* v1.4.1

* types(react,vue): improve BaseQueryOptions (#94)

* fix(vue): make dispatch a getter instead of a computed ref, cleaner usage (#93)

* chore(react,vue): update readme (#95)

* v1.4.2

* chore(react,vue): use shared types (#97)

* chore(react,vue): bit of housekeeping, extracting out common types

* chore(react): using common types in react package

* fix(vue): void result of renderSsr

* chore(react): cleaning up imports

* chore(vue): migrate to shared types

* chore(vue,react): update vite config

* fix(vue,react): cache fetched initial value (#98)

* chore: update readme (#99)

* fix(vue,react): update cache on refetch (#100)

* chore: update deps (#101)

* v1.4.3

* chore(react,vue): update main entry point (#104)

* chore(svelte): svelte init (#103)

* chore: update gh actions (#105)

* chore: pnpm lerna run instead of pnpx (#106)

* types(vue,react): improve typing for UseQweryReturn (#107)

* types(vue): improve typing for UseQweryReturn

* types(react,vue): UseQueryReturnWithSuspense -> MaybePromise

* chore(vue): tsx -> ts (#108)

* chore(react,vue,svelte): make qwery-shared a dev dep (#109)

* chore(react,vue,svelte): make qwery-shared a dev dep, getting install not found errors

* chore(react,vue,svelte): relative link path

* v1.4.4

* feat(svelte): useExecutionEnvironment (#113)

* feat(svelte): context (#114)

* feat(svelte): useNetworkMode (#115)

* feat(svelte): useRememberScroll (#116)

* chore(svelte): update exports (#117)

* chore(svelte): update exports

* chore(svelte): update tsconfig

* feat(svelte): useQwery (#118)

* feat(svelte): useQwery

* fix(svelte): subscribe to store until dispatch has a value set

* chore(svelte): update exports

* fix(svelte): if suspense then we can just directly return dispatch from result if available because the reference will not change, same crdt always

* fix(vue): same for vue

* types(svelte,vue): add InferData utility type

* types(svelte,vue): remove ts expect error

* types(react): update types for broadcast

* chore(react,vue): update tsconfig (#119)

* types(react): type import UseNetworkModeOptions (#120)

* refactor(vue,svelte): computeInitialValueTest -> computeInitialValue (#121)

* refactor(react,vue,svelte): move no op cache to shared (#122)

* fix(svelte): for dispatch move subscribe out of getter (#123)

* fix(svelte): for dispatch move subscribe out of getter

* types(svelte,vue): InferData<I> instead of Data

* chore: update readme (#124)

* feat: add map reduce and maybe return a promise utility fn for change handlers (#125)

* chore: update readme (#126)

* refactor(shared): update mapReduceMaybePromise to be rest args instead (#127)

* feat(react,svelte,vue): useMonitoredFetch hook (#128)

* fix(react,vue,svelte): allow specifying other options (#129)

* types(react,vue,svelte): adding types (#130)

* chore(svelte): update build config (#131)

* chore: update readme (#132)

* chore(svelte): update package.json (#133)

* v1.5.0

* chore(react,vue,svelte): update readme with more accurate figures (#135)

* chore(react,vue,svelte): update readme with more accurate figures

* chore: update readme

* chore(solid): solid start (#136)

* chore(solid): solid start

* chore: add vitest and qwery-shared

* chore(react,vue,svelte,solid): update readme (#137)

* feat(solid): useMonitoredFetch (#138)

* feat(solid): useExecutionEnvironment (#139)

* feat(solid): useRememberScroll (#140)

* feat(solid): useNetworkMode (#141)

* fix(solid): useMonitoredFetch (#142)

* feat(solid): context (#143)

* chore(solid): update exports (#144)

* fix(solid): not destructuring props (#145)

* fix(solid): onCleanup (#146)

* fix(solid): onCleanup

* fix(solid): cleanup happens when scope reevaluates or is finally disposed

* feat(solid): useQwery (#147)

* feat(solid): useQwery

* chore(solid): update exports

* types(solid): update useQwery types (#148)

* chore(solid): update readme (#150)

* v1.5.1

* feat(vue,solid,svelte): proxy dispatch (#152)

* v1.5.2

* chore(svelte): make svelte peer dep instead of dev dep (#155)

* chore(react): remove pnpm lock, no need now that its a workspace (#156)

* chore: example api init (#157)

* chore(react,solid,svelte,vue): update deps (#158)

* feat(example-api): get and upsert (#159)

* feat(example-api): get and upsert

* fix(example-api): add createdAt

* chore(example-react): init (#160)

* chore(example-react): init

* chore(example-react): remove test and pack scripts

* chore(example-react): add shadcn/ui (#161)

* chore(example-react): add shadcn/ui

* style(example-react): formatting

* fix(example-react): update index.css for tailwind 4

* chore(example-react): updating styling config for tailwind v4 (#162)

* chore(example-react): updating styling config for tailwind v4

* chore(example-react): fix failing build

* chore(example-react): adding in theme vars as required by tailwind v4 (#163)

* chore(example-react): adding in theme vars as required by tailwind v4, with the other stuff unsupported as of now

* style(example-react): fix linting and formatting

* feat(example-react): thread (#164)

* feat(example-react): accordion thread thing

* chore(example-react): update eslint config

* refactor(example-react): onClickChildThread -> makeOnClickChildThread

* fix(example-react): increment rerender counter only when reference changes (#165)

* fix(example-react): increment rerender counter only when reference changes

* fix(example-react): useLayoutEffect

* fix(example-react): update App (#166)

* fix(example-react): increment rerender counter only when reference changes

* fix(example-react): useLayoutEffect

* fix(example-react): update App

* fix(react,vue,svelte,solid): update for onsuccess merge (#168)

* fix(react,vue,svelte,solid): update for onsuccess merge in the case of an incomplete document

* fix(svelte,solid,vue): merged instead of final, incremental expects the result of the original onSuccess

* feat(example-react): cleaning up design  (#169)

* feat(example-react): cleaning up design and adding border for rerenders going from blue to red

* fix(example-react): when going back to main thread set reply to null

* fix(example-react): disable submit button if no new thread

* feat(example-react): add new main thread (#170)

* feat(example-react): add new main thread

* fix(example-react): prevent default on enter keydown

* style(example-react): formatting

* feat(example-react): useQwery example, bit contrived and needs docs (#171)

* chore(example-react): remove build script (#172)

* chore(example-react): rely on published version instead of workspace, fine on mac but fails in ci otherwise

* chore(example-react): trying to link

* chore(example-react): update pnpm.lock

* chore(example-react): moving react-qwery link to devDeps

* chore(example-react): remove build script, unsure why its failing too lazy to check, works locally

* chore(example-react): remove vite tailwindcss plugin (#173)

* fix(example-react): increase rerender weight (#174)

* docs(example-react): adding some comments (#175)

* refactor(example-react): setting up mock data in shared api project (#176)

* refactor(example-react): setting up mock data in shared api project, typing react example properly

* refactor(example-api): loading up initialValue from thread prop

* chore(example-react): specifying react qwery as a workspace package instead of linking

* chore(example-react): splitting up lint, test and build instead of parallel

* chore(example-react): build first then test

* chore(example-react): update readme (#177)

* chore(react,example-react): update readme (#178)

* v1.5.3

* fix(example-react): forgot to update landing as well (#180)

* fix(example-react): forgot to update landing as well

* refactor(example-react): update props for Thread

* fix(react,vue,svelte,example-react): broadcast channel fixes (#181)

* fix(react,vue,svelte,example-react): broadcast channel fixes

* fix(example-react): useEffect dep

* v1.5.4

* fix(react,vue,svelte,solid): broadcast persistent dispatches (#184)

* chore(qwery-shared): migrate to tsup (#185)

* fix(react,vue,solid,svelte): remember scroll hook was returning too early (#187)

* refactor(react,solid,svelte,vue): move core logic to shared (#186)

* refactor(react,vue,svelte,solid): remove useExecutionEnvironment and move isBrowser to shared

* refactor(react,solid,svelte,vue): move createId to shared

* refactor(react,solid,svelte,vue): move useMonitoredFetch to shared

* refactor(react): refactor useQwery, moving core logic to shared

* refactor(react): exhaustive deps

* refactor(react): removing exhaustive deps and adding lint rule, keeping it non reactive to changes in options is better, less bugs and more standard behaviour and also its a little unnecessary because the use case will not come up (except maybe for onChange, onSuccess, onError and refetch)

* refactor(react): forward args for all function options

* refactor(solid): moving core logic to shared

* refactor(vue): moving core logic to shared

* refactor(react): if conditional qwery then there will be no unsubscribe

* refactor(solid, vue): throw an error if can't invoke dispatch

* refactor(svelte, solid): moving core logic for svelte and solid to shared and squash bugs with DOM not being updated for svelte and solid

* docs(svelte, vue): update docs for svelte and vue

* docs(svelte): update docs for svelte

* fix(svelte,vue,solid): isServer check was wrong for solid and svelte for useRememberScroll (#188)

* refactor(react,vue,svelte,solid): move useRememberScroll core to shared (#189)

* fix(react,vue,svelte,solid): optional options for useNetworkMode (#190)

* fix(react,vue,svelte,solid): optional options for useNetworkMode, update example to include a fetching and online status indicator

* chore(react): silence linter warning

* fix(shared): don't broadcast if isBroadcasted is true and isPersisted (#191)

* fix(shared): don't broadcast if isBroadcasted is true and isPersisted

* test(react): tests for broadcasting updates

* chore(react,solid,svelte,vue): update exports (#193)

* v1.5.5

* chore(react,vue,solid,svelte): update readme (#195)

* chore(react,vue,solid,svelte): update readme

* chore(react,vue,solid,svelte): add bundlephobia link

* chore: update readme (#196)

* chore(react,vue,solid,svelte): update readme

* chore(react,vue,solid,svelte): add bundlephobia link

* chore: update repo readme

* chore(react,vue,solid,svelte): update incremental (#197)

* fix(react,vue,solid,svelte): rerender on persisted dispatches (#199)

* test(react): update unit tests (#200)

* types(react,vue,solid,svelte): inferring onChange type correcty (#201)

* docs(example-vue): vue example (#198)

* docs(example-vue): vue example

* docs(vue): setting the currentThread uuid in a ref and computing the details of the currentThread, fixes reply to not working and broadcasts not working

* fix(example-vue): build issues

* fix(example-vue): small fixups

* chore(react,vue,solid,svelte): export Dispatch type (#202)

* chore(react,vue,solid,svelte): export Dispatch type

* chore(example-react,example-vue): verbatim module syntax

* chore: update readme

* chore(example-vue): update package name (#203)

* v1.5.6
  • Loading branch information
nmathew98 committed Mar 17, 2024
1 parent 706c995 commit bd5490b
Show file tree
Hide file tree
Showing 70 changed files with 1,708 additions and 102 deletions.
4 changes: 3 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@

Asynchronous state management made simple.

Most of the use cases of [TanStack Query](https://tanstack.com/query/latest/) are covered with a similar API while being 60% lighter.
Qwery provides the structure required to manage and build relationships between asynchronous state while taking care of stabilizing object references and keeping the cache (if any) up to date.

It also enables an environment agnostic approach to managing asynchronous state allowing simpler migrations between different frontend frameworks and backend architectural styles such as monolith to microservices and REST to GraphQL.

Documentation: [Wiki](https://github.com/nmathew98/qwery/wiki/1.-Introduction)

Expand Down
2 changes: 1 addition & 1 deletion lerna.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"$schema": "node_modules/lerna/schemas/lerna-schema.json",
"version": "1.5.5",
"version": "1.5.6",
"packages": [
"packages/*"
],
Expand Down
2 changes: 1 addition & 1 deletion packages/example-api/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@b.s/qwery-example-api",
"version": "1.5.5",
"version": "1.5.6",
"private": true,
"type": "module",
"devDependencies": {
Expand Down
6 changes: 2 additions & 4 deletions packages/example-react/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,9 @@

Asynchronous state management in React made simple.

Most of the use cases of [React Query](https://tanstack.com/query/latest/) are covered with a similar API while being 65% lighter.
Qwery provides the structure required to manage and build relationships between asynchronous state while taking care of stabilizing object references and keeping the cache (if any) up to date.

React Query bundle size: [56.6 kB minified](https://bundlephobia.com/package/@tanstack/react-query)

React Qwery bundle size: [19.7 kB minified](https://bundlephobia.com/package/@b.s/react-qwery)
It also enables an environment agnostic approach to managing asynchronous state allowing simpler migrations between different frontend frameworks and backend architectural styles such as monolith to microservices and REST to GraphQL.

Documentation: [Wiki](https://github.com/nmathew98/qwery/wiki/1.-Introduction)

Expand Down
2 changes: 1 addition & 1 deletion packages/example-react/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@b.s/qwery-example-react",
"private": true,
"version": "1.5.5",
"version": "1.5.6",
"type": "module",
"scripts": {
"dev": "vite",
Expand Down
34 changes: 18 additions & 16 deletions packages/example-react/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import React, { ChangeEventHandler, KeyboardEventHandler } from "react";
import React, {
type ChangeEventHandler,
type KeyboardEventHandler,
} from "react";
import {
Card,
CardContent,
Expand Down Expand Up @@ -106,20 +109,19 @@ const Thread = ({ initialValue, dispatch: landingDispatch }) => {

return result;
},
onSuccess: (next: Thread, _previous: Thread, result) =>
({
...next,
children: next.children!.map(child => {
if (!child.uuid) {
return {
...child,
...(result as Omit<Thread, "children">),
};
}

return child;
}),
}) as Thread,
onSuccess: (next, _previous, result: Omit<Thread, "children">) => ({
...next,
children: next.children!.map(child => {
if (!child.uuid) {
return {
...child,
...result,
};
}

return child;
}),
}),
broadcast: true,
});

Expand Down Expand Up @@ -213,7 +215,7 @@ const Thread = ({ initialValue, dispatch: landingDispatch }) => {
return onSubmitNewThread();
}

if (event.key === "Backspace" && !setContent) {
if (event.key === "Backspace" && !content) {
replyToMainThread();
}
};
Expand Down
1 change: 1 addition & 0 deletions packages/example-react/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noImplicitAny": false,
"verbatimModuleSyntax": true,

/* shadcn */
"baseUrl": ".",
Expand Down
16 changes: 16 additions & 0 deletions packages/example-vue/.eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react-hooks/recommended",
],
ignorePatterns: ["dist", ".eslintrc.cjs"],
parser: "@typescript-eslint/parser",
plugins: ["react-refresh"],
rules: {
"react-refresh/only-export-components": "off",
"@typescript-eslint/no-explicit-any": "off",
},
};
24 changes: 24 additions & 0 deletions packages/example-vue/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
18 changes: 18 additions & 0 deletions packages/example-vue/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
![Tests](https://github.com/nmathew98/qwery/actions/workflows/main.yml/badge.svg)

## About

Asynchronous state management in Vue made simple.

Qwery provides the structure required to manage and build relationships between asynchronous state while taking care of stabilizing object references and keeping the cache (if any) up to date.

It also enables an environment agnostic approach to managing asynchronous state allowing simpler migrations between different frontend frameworks and backend architectural styles such as monolith to microservices and REST to GraphQL.

Documentation: [Wiki](https://github.com/nmathew98/qwery/wiki/1.-Introduction)

Try it out: [StackBlitz](https://stackblitz.com/edit/vue-qwery-threads?file=README.md)

## Usage

- Run `pmpm build` from the root (`qwery`)
- Run `cd packages/example-vue && pnpm dev` from the root (`qwery`)
16 changes: 16 additions & 0 deletions packages/example-vue/components.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"$schema": "https://shadcn-vue.com/schema.json",
"style": "new-york",
"typescript": true,
"tailwind": {
"config": "tailwind.config.js",
"css": "src/style.css",
"baseColor": "slate",
"cssVariables": true
},
"framework": "vite",
"aliases": {
"components": "@/components",
"utils": "@/lib/utils"
}
}
14 changes: 14 additions & 0 deletions packages/example-vue/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
<title>Vue Qwery</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
42 changes: 42 additions & 0 deletions packages/example-vue/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
{
"name": "@b.s/qwery-example-vue",
"private": true,
"version": "1.5.6",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview",
"clean": "rm -f *.tgz && rm -rf dist",
"format": "prettier . --write"
},
"dependencies": {
"@b.s/s.o.o.n": "^1.0.2",
"@b.s/vue-qwery": "workspace:^",
"@radix-icons/vue": "^1.0.0",
"@vueuse/core": "^10.9.0",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"radix-vue": "^1.5.2",
"tailwind-merge": "^2.2.1",
"tailwindcss-animate": "^1.0.7",
"vue": "^3.4.21"
},
"devDependencies": {
"@b.s/qwery-example-api": "link:../example-api",
"@faker-js/faker": "^8.4.1",
"@iconify-json/radix-icons": "^1.1.14",
"@iconify/vue": "^4.1.1",
"@vitejs/plugin-vue": "^5.0.4",
"autoprefixer": "^10.4.18",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.1.3",
"postcss": "^8.4.35",
"prettier": "^3.2.5",
"tailwindcss": "3.4.1",
"typescript": "^5.2.2",
"vite": "^5.1.6",
"vue-tsc": "^2.0.6"
}
}
6 changes: 6 additions & 0 deletions packages/example-vue/postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
86 changes: 86 additions & 0 deletions packages/example-vue/src/App.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<script setup lang="ts">
import { useMonitoredFetch, useNetworkMode, useQwery } from "@b.s/vue-qwery";
import { useColorMode } from "@vueuse/core";
import { getAllThreads, upsertThread } from "@b.s/qwery-example-api";
import { H1 } from "@/components/ui/typography";
import Thread from "./Thread.vue";
import { computed } from "vue";
import NewThread from "./NewThread.vue";
const mode = useColorMode();
mode.value = "dark";
const { connectionStatus } = useNetworkMode();
const { isFetching, monitor } = useMonitoredFetch();
// We have many main `Thread`s and each `Thread` can have zero or more
// child `Thread`s
const { data, dispatch } = useQwery({
queryKey: "threads",
initialValue: monitor(getAllThreads), // Get all main threads
onChange: async next => {
const newItemIdx = next.findIndex(thread => !thread.uuid);
const result = await upsertThread(next[newItemIdx]);
return result;
},
onSuccess: (next, _previous, result) =>
next.map(thread => {
if (!thread.uuid) {
return {
...thread,
...result,
};
}
return thread;
}),
broadcast: true,
});
const allThreads = computed(() =>
[...(data.value ?? [])]?.sort(
(a, b) => b.createdAt.getTime() - a.createdAt.getTime(),
),
);
</script>

<template>
<div class="flex justify-center my-8 mx-4 sm:mx-0">
<div class="flex-col space-y-8">
<H1>My Feed</H1>
<NewThread :dispatch="dispatch" />

<Thread
v-for="thread in allThreads"
:key="thread.uuid"
:initialValue="thread"
:dispatch="dispatch" />
</div>
</div>
<div class="absolute top-6 right-10">
<div class="flex space-x-4">
<div
class="px-4 py-3 rounded-full"
:class="connectionStatus ? 'bg-emerald-700' : 'bg-rose-700'">
<span
class="font-bold"
:class="
connectionStatus ? 'text-emerald-400' : 'bg-rose-400'
">
{{ connectionStatus ? "Online!" : "Offline!" }}
</span>
</div>
<div
class="px-4 py-3 rounded-full"
:class="!isFetching ? 'bg-emerald-700' : 'bg-rose-700'">
<span
class="font-bold"
:class="!isFetching ? 'text-emerald-400' : 'text-rose-400'">
{{ !isFetching ? "Fetched!" : "Fetching!" }}
</span>
</div>
</div>
</div>
</template>
Loading

0 comments on commit bd5490b

Please sign in to comment.