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

packages/react/package.json

@@ -43,7 +43,7 @@
 	"scripts": {
 		"dev": "vite",
 		"build": "tsc && vite build",
-		"clean": "rm *.tgz && rm -rf dist",
+		"clean": "rm -f *.tgz && rm -rf dist",
 		"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
 		"format": "prettier .  --write",
 		"preview": "vite preview",
@@ -53,6 +53,7 @@
 	},
 	"dependencies": {
 		"@b.s/incremental": "^2.1.4",
+		"@b.s/qwery-shared": "link:/Users/naveenmathew/Developer/skulpture/@b.s/qwery/packages/shared",
 		"@b.s/txn": "^1.0.4"
 	},
 	"peerDependencies": {

packages/react/src/e2e/use-qwery.csr.test.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { describe, it, expect, vitest, afterEach } from "vitest";
-import { QweryContext, QweryProvider, makeMonitoredFetch, useQwery } from "..";
+import { QweryContext, QweryProvider } from "../context";
+import { useQwery } from "../use-qwery";
 import {
 	render,
 	screen,
@@ -10,6 +11,7 @@ import {
 } from "@testing-library/react";
 import { createApi } from "./api";
 import { createRedisCache } from "./redis";
+import { makeMonitoredFetch } from "@b.s/incremental";
 
 describe("useQwery csr", () => {
 	const BrowserProviders = ({ children }) => (

packages/react/src/e2e/use-qwery.ssr.test.tsx

@@ -3,10 +3,10 @@ import ReactDOMServer from "react-dom/server";
 import { describe, it, expect, vitest, afterEach } from "vitest";
 import {
 	ExecutionEnvironment,
-	QweryProvider,
 	useExecutionEnvironment,
-	useQwery,
-} from "..";
+} from "../use-execution-environment";
+import { QweryProvider } from "../context";
+import { useQwery } from "../use-qwery";
 import { createRedisCache } from "./redis";
 import {
 	render,
@@ -194,5 +194,5 @@ export const renderSsr = (ui: React.ReactNode) => {
 	document.body.appendChild(container);
 	container.innerHTML = serverRendered;
 
-	return render(ui, { hydrate: true, container });
+	return void render(ui, { hydrate: true, container });
 };

packages/react/src/index.ts

@@ -14,9 +14,10 @@ export {
 	type CacheStore,
 } from "@b.s/incremental";
 
+export * from "@b.s/qwery-shared";
+
 export * from "./context";
 export * from "./context/types";
 export * from "./use-qwery";
-export * from "./use-qwery/types";
 export * from "./use-remember-scroll";
 export * from "./use-execution-environment";

packages/react/src/use-execution-environment/index.ts

@@ -1,7 +1,6 @@
-export enum ExecutionEnvironment {
-	Browser = 1,
-	Server,
-}
+import { ExecutionEnvironment } from "@b.s/qwery-shared";
+
+export { ExecutionEnvironment } from "@b.s/qwery-shared";
 
 export const useExecutionEnvironment = () => {
 	const isBrowser = Boolean(

packages/react/src/use-network-mode/index.ts

@@ -1,13 +1,10 @@
 import React from "react";
-
-export enum NetworkMode {
-	Offline = 0,
-	Online,
-}
+import { NetworkMode, UseNetworkModeOptions } from "@b.s/qwery-shared";
+export { NetworkMode } from "@b.s/qwery-shared";
 
 export const useNetworkMode = ({
 	ping = "https://captive.apple.com/hotspot-detect.html",
-}) => {
+}: UseNetworkModeOptions) => {
 	const [isConnected, setIsConnected] = React.useState(true);
 	const isOnline = () => setIsConnected(true);
 	const isOffline = () => setIsConnected(false);

packages/react/src/use-qwery/index.tsx

@@ -7,7 +7,7 @@ import type {
 	InitialValue,
 	UseQweryOptions,
 	UseQweryReturnWithSuspense,
-} from "./types";
+} from "@b.s/qwery-shared";
 
 export const useQwery = <
 	I extends InitialValue,

packages/react/src/use-remember-scroll/index.tsx

@@ -1,8 +1,6 @@
 import React from "react";
-import {
-	ExecutionEnvironment,
-	useExecutionEnvironment,
-} from "../use-execution-environment";
+import { ExecutionEnvironment } from "@b.s/qwery-shared";
+import { useExecutionEnvironment } from "../use-execution-environment";
 
 export const useRememberScroll = () => {
 	const { executionEnvironment } = useExecutionEnvironment();

packages/react/tsconfig.json

@@ -21,7 +21,6 @@
 		"noFallthroughCasesInSwitch": true,
 		"noImplicitAny": false
 	},
-	"include": ["react/src"],
-	"exclude": ["react/src/e2e"],
+	"include": ["src/**/*"],
 	"references": [{ "path": "./tsconfig.node.json" }]
 }

packages/react/vite.config.ts

@@ -9,8 +9,8 @@ export default defineConfig({
 		react(),
 		dts({
 			rollupTypes: true,
-			include: resolve("src"),
 			logLevel: "info",
+			bundledPackages: ["@b.s/qwery-shared"],
 		}),
 	],
 	build: {

packages/shared/.eslintrc.cjs

@@ -0,0 +1,21 @@
+module.exports = {
+	root: true,
+	env: { browser: true, es2020: true },
+	extends: [
+		"eslint:recommended",
+		"plugin:@typescript-eslint/recommended",
+		"prettier",
+	],
+	ignorePatterns: ["dist", ".eslintrc.cjs"],
+	parser: "@typescript-eslint/parser",
+	plugins: ["prettier"],
+	rules: {
+		"prettier/prettier": ["error", { usePrettierrc: true }],
+		"@typescript-eslint/no-explicit-any": 0,
+		eqeqeq: ["error", "always"],
+		"@typescript-eslint/no-unused-vars": [
+			"error",
+			{ argsIgnorePattern: "^_" },
+		],
+	},
+};

packages/shared/.gitignore

@@ -0,0 +1,26 @@
+# 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?
+
+*.tgz

packages/shared/.prettierignore

@@ -0,0 +1,3 @@
+coverage/**
+dist/**
+pnpm-lock.yaml

packages/shared/.prettierrc.json

@@ -0,0 +1,14 @@
+{
+	"tabWidth": 4,
+	"useTabs": true,
+	"semi": true,
+	"singleQuote": false,
+	"quoteProps": "as-needed",
+	"trailingComma": "all",
+	"bracketSpacing": true,
+	"bracketSameLine": true,
+	"arrowParens": "avoid",
+	"endOfLine": "lf",
+	"embeddedLanguageFormatting": "auto",
+	"printWidth": 80
+}

packages/shared/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/shared/package.json

@@ -0,0 +1,23 @@
+{
+	"name": "@b.s/qwery-shared",
+	"version": "1.4.2",
+	"private": true,
+	"type": "module",
+	"devDependencies": {
+		"@b.s/incremental": "^2.1.4",
+		"eslint": "^8.56.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-prettier": "^5.1.3",
+		"prettier": "^3.0.3",
+		"typescript": "~5.3.0"
+	},
+	"main": "./dist/index.js",
+	"module": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"scripts": {
+		"build": "tsc",
+		"clean": "rm -f *.tgz && rm -rf dist",
+		"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+		"format": "prettier .  --write"
+	}
+}

packages/shared/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./use-execution-environment";
+export * from "./use-network-mode";
+export * from "./use-qwery";

packages/shared/src/use-execution-environment/index.ts

@@ -0,0 +1,4 @@
+export enum ExecutionEnvironment {
+	Browser = 1,
+	Server,
+}

packages/shared/src/use-network-mode/index.ts

@@ -0,0 +1,6 @@
+export * from "./types";
+
+export enum NetworkMode {
+	Offline = 0,
+	Online,
+}

packages/shared/src/use-qwery/index.ts

@@ -0,0 +1 @@
+export * from "./types";

packages/shared/tsconfig.json

@@ -0,0 +1,23 @@
+{
+	"compilerOptions": {
+		"target": "ES2020",
+		"useDefineForClassFields": true,
+		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+		"module": "ESNext",
+		"skipLibCheck": true,
+
+		/* Bundler mode */
+		"moduleResolution": "Bundler",
+
+		/* Linting */
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true,
+		"noImplicitAny": false,
+
+		"outDir": "dist",
+		"declaration": true
+	},
+	"include": ["src/**/*"]
+}

packages/vue/package.json

@@ -43,7 +43,7 @@
 	"scripts": {
 		"dev": "vite",
 		"build": "tsc && vite build",
-		"clean": "rm *.tgz && rm -rf dist",
+		"clean": "rm -f *.tgz && rm -rf dist",
 		"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
 		"format": "prettier .  --write",
 		"preview": "vite preview",
@@ -53,6 +53,7 @@
 	},
 	"dependencies": {
 		"@b.s/incremental": "^2.1.4",
+		"@b.s/qwery-shared": "link:/Users/naveenmathew/Developer/skulpture/@b.s/qwery/packages/shared",
 		"@b.s/txn": "^1.0.4"
 	},
 	"peerDependencies": {

packages/vue/src/e2e/use-qwery.csr.test.tsx

@@ -174,7 +174,7 @@ describe("useQwery csr", () => {
 				<div>c: {{ test.data.value?.c }}</div>
 			`,
 			setup: () => {
-				const test = useQwery<{ a: number; b: number; c: number }>({
+				const test = useQwery({
 					initialValue: getInitialValue,
 					onChange: vitest.fn(),
 					refetchOnWindowFocus: true,

packages/vue/src/index.ts

@@ -19,3 +19,4 @@ export * from "./use-network-mode";
 export * from "./context";
 export * from "./use-remember-scroll";
 export * from "./use-qwery";
+export * from "@b.s/qwery-shared";

packages/vue/src/use-execution-environment/index.ts

@@ -1,7 +1,6 @@
-export enum ExecutionEnvironment {
-	Browser = 1,
-	Server,
-}
+import { ExecutionEnvironment } from "@b.s/qwery-shared";
+
+export { ExecutionEnvironment } from "@b.s/qwery-shared";
 
 export const useExecutionEnvironment = () => {
 	const isBrowser = Boolean(

packages/vue/src/use-network-mode/index.ts

@@ -1,13 +1,11 @@
 import { computed, onMounted, onUnmounted, onUpdated, ref } from "vue";
+import { NetworkMode, type UseNetworkModeOptions } from "@b.s/qwery-shared";
 
-export enum NetworkMode {
-	Offline = 0,
-	Online,
-}
+export { NetworkMode, type UseNetworkModeOptions } from "@b.s/qwery-shared";
 
 export const useNetworkMode = ({
 	ping = "https://captive.apple.com/hotspot-detect.html",
-}) => {
+}: UseNetworkModeOptions) => {
 	const isConnected = ref(true);
 
 	const isOnline = () => {

packages/vue/src/use-qwery/index.tsx

@@ -2,12 +2,8 @@ import { computed, onMounted, onUnmounted, shallowReactive } from "vue";
 import { createCRDT, type CRDT, type Dispatch } from "@b.s/incremental";
 import { useQweryContext } from "../context";
 import { useRememberScroll } from "../use-remember-scroll";
-import type {
-	Data,
-	InitialValue,
-	UseQweryOptions,
-	UseQweryReturnWithSuspense,
-} from "./types";
+import type { Data, InitialValue, UseQweryOptions } from "@b.s/qwery-shared";
+import type { UseQweryReturnWithSuspense } from "./types";
 
 export const useQwery = <
 	I extends InitialValue,

packages/vue/src/use-qwery/types/return.ts → packages/vue/src/use-qwery/types.ts

@@ -1,5 +1,8 @@
-import type { Dispatch } from "@b.s/incremental";
-import type { Data, InitialValue } from "./options";
+import type {
+	UseQweryReturn as SharedUseQweryReturn,
+	InitialValue,
+	Data,
+} from "@b.s/qwery-shared";
 import type { ComputedRef } from "vue";
 
 export interface UseQweryReturn<
@@ -9,10 +12,9 @@ export interface UseQweryReturn<
 	>
 		? DInferred
 		: I,
-> {
+> extends Pick<SharedUseQweryReturn<I, DInferred>, "dispatch"> {
 	data: ComputedRef<DInferred | undefined>;
 	versions: ComputedRef<DInferred[] | undefined>;
-	dispatch: Dispatch<DInferred>;
 }
 
 export type UseQweryReturnWithSuspense<