[WIP] Feat: plugin for enhance react-query

packages/plugin-react-query/CHANGELOG.md

@@ -0,0 +1,5 @@
+# @ice/plugin-react-query
+
+## 1.0.0
+
+- Initial release

packages/plugin-react-query/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@ice/plugin-react-query",
+  "version": "1.0.0",
+  "description": "React Query plugin for ice.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./esm/index.js",
+  "types": "./esm/index.d.ts",
+  "files": [
+    "esm",
+    "!esm/**/*.map",
+    "*.d.ts"
+  ],
+  "dependencies": {
+    "@tanstack/react-query": "^5.50.1",
+    "@tanstack/react-query-devtools": "^5.50.1"
+  },
+  "devDependencies": {
+    "@ice/app": "^3.4.9",
+    "@ice/runtime": "^1.4.8",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@tanstack/query-devtools": "^5.50.1"
+  },
+  "repository": {
+    "type": "http",
+    "url": "https://github.com/alibaba/ice/tree/master/packages/plugin-request"
+  },
+  "scripts": {
+    "watch": "tsc -w --sourceMap",
+    "build": "tsc"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/plugin-react-query/src/index.tsx

@@ -0,0 +1,47 @@
+import { createRequire } from 'module';
+import type { Plugin } from '@ice/app/types';
+
+const require = createRequire(import.meta.url);
+const PLUGIN_NAME = '@ice/plugin-react-query';
+
+const plugin: Plugin<void> = () => {
+  return {
+    name: PLUGIN_NAME,
+    setup: ({ generator, onGetConfig }) => {
+      generator.addExport({
+        specifier: [
+          // Core API export from @tanstack/react-query
+          'useQuery',
+          'useMutation',
+          'useQueryClient',
+          'useMutationState',
+          'useSuspenseQuery',
+          'useSuspenseInfiniteQuery',
+          'useSuspenseQueries',
+          'queryOptions',
+          'infiniteQueryOptions',
+          'QueryClientProvider',
+          'useQueryClient',
+          'QueryErrorResetBoundary',
+          'useQueryErrorResetBoundary',
+          'useIsRestoring',
+          'IsRestoringProvider',
+        ],
+        source: '@tanstack/react-query',
+        type: false,
+      });
+      onGetConfig((config) => {
+        // Add alias for react-query and react-query-devtools to avoid mismatching versions.
+        config.alias = {
+          ...config.alias,
+          '@tanstack/react-query': require.resolve('@tanstack/react-query'),
+          '@tanstack/react-query-devtools': require.resolve('@tanstack/react-query-devtools'),
+        };
+      });
+    },
+    runtime: `${PLUGIN_NAME}/runtime`,
+    staticRuntime: true,
+  };
+};
+
+export default plugin;

packages/plugin-react-query/src/runtime.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import type { RuntimePlugin } from '@ice/runtime/types';
+import type { ReactQueryConfig } from './types';
+
+const EXPORT_CONFIG_NAME = 'reactQueryConfig';
+
+const runtime: RuntimePlugin = ({ addProvider, appContext }) => {
+  const { appExport } = appContext;
+  const reactQueryConfig = appExport[EXPORT_CONFIG_NAME] as ReactQueryConfig;
+  const queryClient = new QueryClient({
+    ...(reactQueryConfig?.queryClientConfig || {}),
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus: false,
+        retry: false,
+        ...(reactQueryConfig?.queryClientConfig.defaultOptions?.queries || {}),
+      },
+    },
+  });
+  const ProviderWrapper = ({ children }) => {
+    return (
+      <QueryClientProvider client={queryClient}>
+        {children}
+        { reactQueryConfig?.devTools &&
+          <ReactQueryDevtools
+            {...(reactQueryConfig.devTools || {})}
+          /> }
+      </QueryClientProvider>
+    );
+  };
+  addProvider(ProviderWrapper);
+};
+
+export default runtime;

packages/plugin-react-query/src/types.ts

@@ -0,0 +1,17 @@
+import type { QueryClientConfig, QueryClient } from '@tanstack/react-query';
+import type { DevtoolsButtonPosition, DevtoolsPosition, DevToolsErrorType } from '@tanstack/query-devtools';
+
+interface DevtoolsOptions {
+  initialIsOpen?: boolean;
+  buttonPosition?: DevtoolsButtonPosition;
+  position?: DevtoolsPosition;
+  client?: QueryClient;
+  errorTypes?: Array<DevToolsErrorType>;
+  styleNonce?: string;
+  shadowDOMTarget?: ShadowRoot;
+}
+
+export interface ReactQueryConfig {
+  devTools?: DevtoolsOptions;
+  queryClientConfig?: QueryClientConfig;
+}

packages/plugin-react-query/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "rootDir": "src",
+    "outDir": "esm",
+    "jsx": "react"
+  },
+  "include": ["src"]
+}