Update React and Vue packages to declare ESM only (as they currently are)

stevensJourney · stevensJourney · commit 5142f97e7407 · 2025-08-05T09:33:22.000+02:00
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -18,6 +18,7 @@
     "build:prod": "tsc -b --sourceMap false",
     "clean": "rm -rf lib tsconfig.tsbuildinfo",
     "test": "vitest",
+    "test:exports": "attw --pack --profile=esm-only  .",
     "watch": "tsc -b -w"
   },
   "repository": {
diff --git a/packages/react/src/QueryStore.ts b/packages/react/src/QueryStore.ts
@@ -4,7 +4,7 @@ import {
   WatchedQuery,
   WatchedQueryListenerEvent
 } from '@powersync/common';
-import { DifferentialHookOptions } from './hooks/watched/watch-types';
+import { DifferentialHookOptions } from './hooks/watched/watch-types.js';
 
 export function generateQueryKey(
   sqlStatement: string,
diff --git a/packages/react/src/hooks/deprecated/usePowerSyncQuery.ts b/packages/react/src/hooks/deprecated/usePowerSyncQuery.ts
@@ -1,5 +1,5 @@
 import React from 'react';
-import { usePowerSync } from '../PowerSyncContext';
+import { usePowerSync } from '../PowerSyncContext.js';
 
 /**
  * @deprecated use {@link useQuery} instead.
diff --git a/packages/react/src/hooks/deprecated/usePowerSyncStatus.ts b/packages/react/src/hooks/deprecated/usePowerSyncStatus.ts
@@ -1,5 +1,5 @@
 import { useContext, useEffect, useState } from 'react';
-import { PowerSyncContext } from '../PowerSyncContext';
+import { PowerSyncContext } from '../PowerSyncContext.js';
 
 /**
  * @deprecated Use {@link useStatus} instead.
diff --git a/packages/react/src/hooks/deprecated/usePowerSyncWatchedQuery.ts b/packages/react/src/hooks/deprecated/usePowerSyncWatchedQuery.ts
@@ -1,6 +1,6 @@
 import { SQLWatchOptions } from '@powersync/common';
 import React from 'react';
-import { usePowerSync } from '../PowerSyncContext';
+import { usePowerSync } from '../PowerSyncContext.js';
 
 /**
  * @deprecated use {@link useQuery} instead.
diff --git a/packages/react/src/hooks/suspense/SuspenseQueryResult.ts b/packages/react/src/hooks/suspense/SuspenseQueryResult.ts
@@ -1,4 +1,4 @@
-import { QueryResult, ReadonlyQueryResult } from '../watched/watch-types';
+import { QueryResult, ReadonlyQueryResult } from '../watched/watch-types.js';
 
 export type SuspenseQueryResult<T> = Pick<QueryResult<T>, 'data' | 'refresh'>;
 export type ReadonlySuspenseQueryResult<T> = Pick<ReadonlyQueryResult<T>, 'data' | 'refresh'>;
diff --git a/packages/react/src/hooks/suspense/useSingleSuspenseQuery.ts b/packages/react/src/hooks/suspense/useSingleSuspenseQuery.ts
@@ -1,11 +1,11 @@
 import { CompilableQuery, WatchedQuery } from '@powersync/common';
 import React from 'react';
-import { generateQueryKey, getQueryStore } from '../../QueryStore';
-import { usePowerSync } from '../PowerSyncContext';
-import { AdditionalOptions } from '../watched/watch-types';
-import { constructCompatibleQuery } from '../watched/watch-utils';
-import { createSuspendingPromise, useTemporaryHold } from './suspense-utils';
-import { SuspenseQueryResult } from './SuspenseQueryResult';
+import { generateQueryKey, getQueryStore } from '../../QueryStore.js';
+import { usePowerSync } from '../PowerSyncContext.js';
+import { AdditionalOptions } from '../watched/watch-types.js';
+import { constructCompatibleQuery } from '../watched/watch-utils.js';
+import { createSuspendingPromise, useTemporaryHold } from './suspense-utils.js';
+import { SuspenseQueryResult } from './SuspenseQueryResult.js';
 
 /**
  * Use a query which is not watched, but suspends until the initial result has loaded.
diff --git a/packages/react/src/hooks/suspense/useSuspenseQuery.ts b/packages/react/src/hooks/suspense/useSuspenseQuery.ts
@@ -1,8 +1,8 @@
 import { CompilableQuery } from '@powersync/common';
-import { AdditionalOptions, DifferentialHookOptions } from '../watched/watch-types';
-import { ReadonlySuspenseQueryResult, SuspenseQueryResult } from './SuspenseQueryResult';
-import { useSingleSuspenseQuery } from './useSingleSuspenseQuery';
-import { useWatchedSuspenseQuery } from './useWatchedSuspenseQuery';
+import { AdditionalOptions, DifferentialHookOptions } from '../watched/watch-types.js';
+import { ReadonlySuspenseQueryResult, SuspenseQueryResult } from './SuspenseQueryResult.js';
+import { useSingleSuspenseQuery } from './useSingleSuspenseQuery.js';
+import { useWatchedSuspenseQuery } from './useWatchedSuspenseQuery.js';
 
 /**
  * A hook to access the results of a watched query that suspends until the initial result has loaded.
diff --git a/packages/react/src/hooks/suspense/useWatchedQuerySuspenseSubscription.ts b/packages/react/src/hooks/suspense/useWatchedQuerySuspenseSubscription.ts
@@ -1,6 +1,6 @@
 import { WatchedQuery } from '@powersync/common';
 import React from 'react';
-import { createSuspendingPromise, useTemporaryHold } from './suspense-utils';
+import { createSuspendingPromise, useTemporaryHold } from './suspense-utils.js';
 
 /**
  * A hook to access and subscribe to the results of an existing {@link WatchedQuery}.
diff --git a/packages/react/src/hooks/suspense/useWatchedSuspenseQuery.ts b/packages/react/src/hooks/suspense/useWatchedSuspenseQuery.ts
@@ -1,9 +1,9 @@
 import { CompilableQuery } from '@powersync/common';
-import { generateQueryKey, getQueryStore } from '../../QueryStore';
-import { usePowerSync } from '../PowerSyncContext';
-import { AdditionalOptions } from '../watched/watch-types';
-import { constructCompatibleQuery } from '../watched/watch-utils';
-import { useWatchedQuerySuspenseSubscription } from './useWatchedQuerySuspenseSubscription';
+import { generateQueryKey, getQueryStore } from '../../QueryStore.js';
+import { usePowerSync } from '../PowerSyncContext.js';
+import { AdditionalOptions } from '../watched/watch-types.js';
+import { constructCompatibleQuery } from '../watched/watch-utils.js';
+import { useWatchedQuerySuspenseSubscription } from './useWatchedQuerySuspenseSubscription.js';
 
 /**
  * @internal This is not exported in the index.ts
diff --git a/packages/react/src/hooks/useStatus.ts b/packages/react/src/hooks/useStatus.ts
@@ -1,4 +1,4 @@
-import { usePowerSyncStatus } from './deprecated/usePowerSyncStatus';
+import { usePowerSyncStatus } from './deprecated/usePowerSyncStatus.js';
 
 /**
  * Custom hook that provides access to the current status of PowerSync.
diff --git a/packages/react/src/hooks/watched/useQuery.ts b/packages/react/src/hooks/watched/useQuery.ts
@@ -1,9 +1,9 @@
 import { type CompilableQuery } from '@powersync/common';
-import { usePowerSync } from '../PowerSyncContext';
-import { useSingleQuery } from './useSingleQuery';
-import { useWatchedQuery } from './useWatchedQuery';
-import { AdditionalOptions, DifferentialHookOptions, QueryResult, ReadonlyQueryResult } from './watch-types';
-import { constructCompatibleQuery } from './watch-utils';
+import { usePowerSync } from '../PowerSyncContext.js';
+import { useSingleQuery } from './useSingleQuery.js';
+import { useWatchedQuery } from './useWatchedQuery.js';
+import { AdditionalOptions, DifferentialHookOptions, QueryResult, ReadonlyQueryResult } from './watch-types.js';
+import { constructCompatibleQuery } from './watch-utils.js';
 
 /**
  * A hook to access the results of a watched query.
diff --git a/packages/react/src/hooks/watched/useSingleQuery.ts b/packages/react/src/hooks/watched/useSingleQuery.ts
@@ -1,6 +1,6 @@
 import React from 'react';
-import { QueryResult } from './watch-types';
-import { InternalHookOptions } from './watch-utils';
+import { QueryResult } from './watch-types.js';
+import { InternalHookOptions } from './watch-utils.js';
 
 export const useSingleQuery = <RowType = any>(options: InternalHookOptions<RowType[]>): QueryResult<RowType> => {
   const { query, powerSync, queryChanged } = options;
diff --git a/packages/react/src/hooks/watched/useWatchedQuery.ts b/packages/react/src/hooks/watched/useWatchedQuery.ts
@@ -1,7 +1,7 @@
 import React from 'react';
-import { useWatchedQuerySubscription } from './useWatchedQuerySubscription';
-import { DifferentialHookOptions, QueryResult, ReadonlyQueryResult } from './watch-types';
-import { InternalHookOptions } from './watch-utils';
+import { useWatchedQuerySubscription } from './useWatchedQuerySubscription.js';
+import { DifferentialHookOptions, QueryResult, ReadonlyQueryResult } from './watch-types.js';
+import { InternalHookOptions } from './watch-utils.js';
 
 /**
  * @internal This is not exported from the index.ts
diff --git a/packages/react/src/hooks/watched/watch-utils.ts b/packages/react/src/hooks/watched/watch-utils.ts
@@ -1,7 +1,7 @@
 import { AbstractPowerSyncDatabase, CompilableQuery, CompiledQuery, WatchCompatibleQuery } from '@powersync/common';
 import React from 'react';
-import { usePowerSync } from '../PowerSyncContext';
-import { AdditionalOptions } from './watch-types';
+import { usePowerSync } from '../PowerSyncContext.js';
+import { AdditionalOptions } from './watch-types.js';
 
 export type InternalHookOptions<DataType> = {
   query: WatchCompatibleQuery<DataType>;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
@@ -1,11 +1,11 @@
-export { usePowerSyncQuery } from './hooks/deprecated/usePowerSyncQuery';
-export { usePowerSyncStatus } from './hooks/deprecated/usePowerSyncStatus';
-export { usePowerSyncWatchedQuery } from './hooks/deprecated/usePowerSyncWatchedQuery';
-export * from './hooks/PowerSyncContext';
-export { SuspenseQueryResult } from './hooks/suspense/SuspenseQueryResult';
-export { useSuspenseQuery } from './hooks/suspense/useSuspenseQuery';
-export { useWatchedQuerySuspenseSubscription } from './hooks/suspense/useWatchedQuerySuspenseSubscription';
-export { useStatus } from './hooks/useStatus';
-export { useQuery } from './hooks/watched/useQuery';
-export { useWatchedQuerySubscription } from './hooks/watched/useWatchedQuerySubscription';
-export { AdditionalOptions } from './hooks/watched/watch-types';
+export { usePowerSyncQuery } from './hooks/deprecated/usePowerSyncQuery.js';
+export { usePowerSyncStatus } from './hooks/deprecated/usePowerSyncStatus.js';
+export { usePowerSyncWatchedQuery } from './hooks/deprecated/usePowerSyncWatchedQuery.js';
+export * from './hooks/PowerSyncContext.js';
+export { SuspenseQueryResult } from './hooks/suspense/SuspenseQueryResult.js';
+export { useSuspenseQuery } from './hooks/suspense/useSuspenseQuery.js';
+export { useWatchedQuerySuspenseSubscription } from './hooks/suspense/useWatchedQuerySuspenseSubscription.js';
+export { useStatus } from './hooks/useStatus.js';
+export { useQuery } from './hooks/watched/useQuery.js';
+export { useWatchedQuerySubscription } from './hooks/watched/useWatchedQuerySubscription.js';
+export { AdditionalOptions } from './hooks/watched/watch-types.js';
diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
@@ -4,6 +4,8 @@
     "baseUrl": "./",
     "jsx": "react",
     "rootDir": "src",
+    "module": "node16",
+    "moduleResolution": "node16",
     "outDir": "./lib",
     "lib": ["es2022", "DOM"]
   },
diff --git a/packages/tanstack-react-query/package.json b/packages/tanstack-react-query/package.json
@@ -18,7 +18,7 @@
     "clean": "rm -rf lib tsconfig.tsbuildinfo",
     "test": "vitest",
     "watch": "tsc -b -w",
-    "test:exports": "attw --pack . --ignore-rules cjs-resolves-to-esm"
+    "test:exports": "attw --pack --profile=esm-only  ."
   },
   "repository": {
     "type": "git",
diff --git a/packages/tanstack-react-query/tsconfig.json b/packages/tanstack-react-query/tsconfig.json
@@ -4,6 +4,8 @@
     "baseUrl": "./",
     "jsx": "react",
     "rootDir": "src",
+    "module": "node16",
+    "moduleResolution": "node16",
     "outDir": "./lib",
     "lib": ["es2022", "DOM"]
   },
diff --git a/packages/vue/package.json b/packages/vue/package.json
@@ -17,7 +17,8 @@
     "build:prod": "tsc -b --sourceMap false",
     "clean": "rm -rf lib tsconfig.tsbuildinfo",
     "watch": "tsc -b -w",
-    "test": "vitest"
+    "test": "vitest",
+    "test:exports": "attw --pack --profile=esm-only  ."
   },
   "repository": {
     "type": "git",
diff --git a/packages/vue/src/composables/powerSync.ts b/packages/vue/src/composables/powerSync.ts
@@ -1,6 +1,6 @@
 import { AbstractPowerSyncDatabase } from '@powersync/common';
-import { App, MaybeRef, Ref, inject, provide, ref, hasInjectionContext } from 'vue';
-import { setupTopLevelWarningMessage } from './messages';
+import { App, MaybeRef, Ref, hasInjectionContext, inject, provide, ref } from 'vue';
+import { setupTopLevelWarningMessage } from './messages.js';
 
 // Create a unique symbol for the PowerSync context
 const PowerSyncKey = Symbol();
diff --git a/packages/vue/src/composables/usePowerSyncQuery.ts b/packages/vue/src/composables/usePowerSyncQuery.ts
@@ -1,5 +1,5 @@
 import { MaybeRef, Ref, ref, toValue, watch } from 'vue';
-import { usePowerSync } from './powerSync';
+import { usePowerSync } from './powerSync.js';
 
 export type QueryOptions = {
   /**
diff --git a/packages/vue/src/composables/usePowerSyncStatus.ts b/packages/vue/src/composables/usePowerSyncStatus.ts
@@ -1,6 +1,6 @@
 import { SyncStatus } from '@powersync/common';
 import { ref, watchEffect } from 'vue';
-import { usePowerSync } from './powerSync';
+import { usePowerSync } from './powerSync.js';
 
 /**
  * @deprecated Use {@link useStatus} instead.
diff --git a/packages/vue/src/composables/usePowerSyncWatchedQuery.ts b/packages/vue/src/composables/usePowerSyncWatchedQuery.ts
@@ -1,6 +1,6 @@
 import { SQLWatchOptions } from '@powersync/common';
 import { MaybeRef, Ref, ref, toValue, watchEffect } from 'vue';
-import { usePowerSync } from './powerSync';
+import { usePowerSync } from './powerSync.js';
 
 export type WatchedQueryResult<T> = {
   data: Ref<T[]>;
diff --git a/packages/vue/src/composables/useQuery.ts b/packages/vue/src/composables/useQuery.ts
@@ -1,7 +1,7 @@
 import { type CompilableQuery } from '@powersync/common';
 import { type MaybeRef, type Ref } from 'vue';
-import { AdditionalOptions, useSingleQuery } from './useSingleQuery';
-import { useWatchedQuery } from './useWatchedQuery';
+import { AdditionalOptions, useSingleQuery } from './useSingleQuery.js';
+import { useWatchedQuery } from './useWatchedQuery.js';
 
 export type WatchedQueryResult<T> = {
   readonly data: Ref<ReadonlyArray<Readonly<T>>>;
diff --git a/packages/vue/src/composables/useSingleQuery.ts b/packages/vue/src/composables/useSingleQuery.ts
@@ -6,7 +6,7 @@ import {
   SQLOnChangeOptions
 } from '@powersync/common';
 import { type MaybeRef, type Ref, ref, toValue, watchEffect } from 'vue';
-import { usePowerSync } from './powerSync';
+import { usePowerSync } from './powerSync.js';
 
 export interface AdditionalOptions<RowType = unknown> extends Omit<SQLOnChangeOptions, 'signal'> {
   runQueryOnce?: boolean;
diff --git a/packages/vue/src/composables/useStatus.ts b/packages/vue/src/composables/useStatus.ts
@@ -1,4 +1,4 @@
-import { usePowerSyncStatus } from './usePowerSyncStatus';
+import { usePowerSyncStatus } from './usePowerSyncStatus.js';
 
 /**
  * Retrieve the current synchronization status of PowerSync.
diff --git a/packages/vue/src/composables/useWatchedQuery.ts b/packages/vue/src/composables/useWatchedQuery.ts
@@ -1,7 +1,7 @@
 import { type CompilableQuery, ParsedQuery, parseQuery, WatchCompatibleQuery } from '@powersync/common';
 import { type MaybeRef, type Ref, ref, toValue, watchEffect } from 'vue';
-import { usePowerSync } from './powerSync';
-import { AdditionalOptions, WatchedQueryResult } from './useSingleQuery';
+import { usePowerSync } from './powerSync.js';
+import { AdditionalOptions, WatchedQueryResult } from './useSingleQuery.js';
 
 export const useWatchedQuery = <T = any>(
   query: MaybeRef<string | CompilableQuery<T>>,
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
@@ -1,7 +1,7 @@
-export * from './composables/powerSync';
-export { usePowerSyncQuery } from './composables/usePowerSyncQuery';
-export { usePowerSyncStatus } from './composables/usePowerSyncStatus';
-export { usePowerSyncWatchedQuery } from './composables/usePowerSyncWatchedQuery';
-export { useQuery } from './composables/useQuery';
-export { useStatus } from './composables/useStatus';
-export { useWatchedQuerySubscription } from './composables/useWatchedQuerySubscription';
+export * from './composables/powerSync.js';
+export { usePowerSyncQuery } from './composables/usePowerSyncQuery.js';
+export { usePowerSyncStatus } from './composables/usePowerSyncStatus.js';
+export { usePowerSyncWatchedQuery } from './composables/usePowerSyncWatchedQuery.js';
+export { useQuery } from './composables/useQuery.js';
+export { useStatus } from './composables/useStatus.js';
+export { useWatchedQuerySubscription } from './composables/useWatchedQuerySubscription.js';
diff --git a/packages/vue/tsconfig.json b/packages/vue/tsconfig.json
@@ -4,6 +4,8 @@
     "baseUrl": "./",
     "jsx": "preserve",
     "outDir": "./lib",
+    "module": "node16",
+    "moduleResolution": "node16",
     "rootDir": "src"
   },
   "references": [
