@ethlete/query 6.0.0-next.61 → 6.0.0-next.63

package/generators/migrate-from-ngrx-toolkit/store-removal.js

@@ -349,11 +349,37 @@ export const removeFeatureStores = (tree, graph, inScope, features, report) => {
         const content = tree.read(file, 'utf-8');
         return content ? createSourceFile(content, file).statements.flatMap(declaredNames) : [];
     };
-    let converting = new Set(features);
+    const importClosure = (feature, roots) => {
+        const storeFiles = new Set(storeFilesOf(feature));
+        const closure = new Set(roots);
+        const queue = [...closure];
+        for (let file = queue.pop(); file; file = queue.pop()) {
+            const content = tree.read(file, 'utf-8');
+            if (!content)
+                continue;
+            for (const statement of createSourceFile(content, file).statements) {
+                if ((!ts.isImportDeclaration(statement) && !ts.isExportDeclaration(statement)) ||
+                    !statement.moduleSpecifier ||
+                    !ts.isStringLiteral(statement.moduleSpecifier)) {
+                    continue;
+                }
+                const resolved = graph.resolveFile(file, statement.moduleSpecifier.text);
+                if (resolved && storeFiles.has(resolved) && !closure.has(resolved)) {
+                    closure.add(resolved);
+                    queue.push(resolved);
+                }
+            }
+        }
+        return closure;
+    };
+    const converting = new Set(features);
     let scan;
     const keptLocations = new Map();
+    const keptFiles = new Map();
+    const keptVia = new Map();
+    const removableFilesOf = (feature) => storeFilesOf(feature).filter((file) => !keptFiles.has(file));
     for (;;) {
-        const deletedFiles = new Set([...converting].flatMap(storeFilesOf));
+        const deletedFiles = new Set([...converting].flatMap(removableFilesOf));
         const movedFiles = new Map([...converting].map((feature) => [feature.files.actions, feature.queriesFile]));
         const needles = [
             ...new Set([...deletedFiles].flatMap((file) => [...declaredIn(file), file.split('/').pop().replace(/\.ts$/, '')])),
@@ -371,20 +397,34 @@ export const removeFeatureStores = (tree, graph, inScope, features, report) => {
             movedFiles,
             needles,
         });
-        const blocked = new Set();
+        const usedOutside = new Map();
         for (const reference of scan.references) {
             const feature = featureOfFile.get(reference.declaringFile);
             if (!feature || reference.target || !converting.has(feature))
                 continue;
-            blocked.add(feature);
-            keptLocations.set(feature, [
-                ...(keptLocations.get(feature) ?? []),
-                { filePath: reference.file, line: reference.line },
-            ]);
+            const files = usedOutside.get(feature) ?? new Map();
+            const location = { filePath: reference.file, line: reference.line };
+            files.set(reference.declaringFile, [...(files.get(reference.declaringFile) ?? []), location]);
+            usedOutside.set(feature, files);
+            keptLocations.set(feature, [...(keptLocations.get(feature) ?? []), location]);
         }
-        if (blocked.size === 0)
+        if (usedOutside.size === 0)
             break;
-        converting = new Set([...converting].filter((feature) => !blocked.has(feature)));
+        for (const [feature, files] of usedOutside) {
+            const closure = importClosure(feature, [...keptFiles.keys(), ...files.keys()].filter((file) => featureOfFile.get(file) === feature));
+            if (closure.has(feature.files.actions) || (feature.files.reducer && closure.has(feature.files.reducer))) {
+                converting.delete(feature);
+                continue;
+            }
+            for (const [file, locations] of files)
+                keptFiles.set(file, [...(keptFiles.get(file) ?? []), ...locations]);
+            for (const file of closure) {
+                if (keptFiles.has(file))
+                    continue;
+                keptFiles.set(file, []);
+                keptVia.set(file, [...files.keys()][0]);
+            }
+        }
     }
     for (const [feature, locations] of keptLocations) {
         if (converting.has(feature))
@@ -395,7 +435,20 @@ export const removeFeatureStores = (tree, graph, inScope, features, report) => {
             locations: [{ filePath: feature.files.actions }, ...locations],
         });
     }
-    const deletedFiles = new Set([...converting].flatMap(storeFilesOf));
+    for (const [file, locations] of keptFiles) {
+        const feature = featureOfFile.get(file);
+        if (!converting.has(feature))
+            continue;
+        const via = keptVia.get(file);
+        report.add({
+            id: TOOLKIT_TASK.STORE_FILE_KEPT,
+            summary: via
+                ? `\`${file}\` of \`${feature.base}\` is kept because the kept \`${via}\` imports it.`
+                : `\`${file}\` of \`${feature.base}\` is kept because code outside the feature uses it.`,
+            locations: [{ filePath: file }, ...locations],
+        });
+    }
+    const deletedFiles = new Set([...converting].flatMap(removableFilesOf));
     const movedFiles = new Map([...converting].map((feature) => [feature.files.actions, feature.queriesFile]));
     const editedFiles = new Set();
     const applyScan = (result, extraEdits) => {

package/generators/migrate-to-query-v3/auth-consumers-migration.js

@@ -0,0 +1,64 @@
+import * as ts from 'typescript';
+import { isInterceptor } from '../migrate-from-ngrx-toolkit/consumers.js';
+import { createSourceFile } from './shared.js';
+const V2_AUTH_MEMBERS = new Set(['setAuthProvider', 'clearAuthProvider', 'authProvider$', 'isBearerAuthProvider']);
+const lineOf = (sourceFile, position) => sourceFile.getLineAndCharacterOfPosition(position).line + 1;
+/**
+ * Reports the code around a v2 auth setup that the migration does not rewrite: every use of the v2
+ * auth provider hooks, and every `HttpInterceptor` that sets an `Authorization` header.
+ *
+ * A v3 query already sends its bearer token, so an interceptor that adds one too sends it twice.
+ */
+export const reportAuthConsumers = (tree, scope, report) => {
+    scope.visit(tree, (filePath) => {
+        if (!filePath.endsWith('.ts') || filePath.endsWith('.spec.ts')) {
+            return;
+        }
+        const content = tree.read(filePath, 'utf-8');
+        if (!content) {
+            return;
+        }
+        const hasAuthMember = [...V2_AUTH_MEMBERS].some((name) => content.includes(name));
+        const hasInterceptor = /HttpInterceptor/.test(content) && /authorization|bearer/i.test(content);
+        if (!hasAuthMember && !hasInterceptor) {
+            return;
+        }
+        const sourceFile = createSourceFile(content, filePath);
+        const members = new Map();
+        const visit = (node) => {
+            if (isInterceptor(node, sourceFile) && /authorization|bearer/i.test(node.getText(sourceFile))) {
+                const name = node.name?.getText(sourceFile) ?? 'interceptor';
+                report.addManualReview({
+                    title: `Check the Authorization interceptor ${name}`,
+                    summary: `\`${name}\` adds an \`Authorization\` header. A v3 query sends its own bearer token, so a request from a migrated query that passes through this interceptor carries the header twice.`,
+                    action: 'Skip the requests of migrated clients in the interceptor, or remove the interceptor if the auth provider now covers every request.',
+                    locations: [{ filePath, line: lineOf(sourceFile, node.getStart(sourceFile)) }],
+                    source: 'auth-consumers-migration',
+                    dedupeKey: `auth-interceptor:${filePath}:${name}`,
+                });
+                return;
+            }
+            const memberName = ts.isPropertyAccessExpression(node) && ts.isIdentifier(node.name)
+                ? node.name.text
+                : ts.isIdentifier(node) && ts.isCallExpression(node.parent) && node.parent.expression === node
+                    ? node.text
+                    : undefined;
+            if (memberName && V2_AUTH_MEMBERS.has(memberName) && !members.has(memberName)) {
+                members.set(memberName, lineOf(sourceFile, node.getStart(sourceFile)));
+            }
+            ts.forEachChild(node, visit);
+        };
+        visit(sourceFile);
+        members.forEach((line, name) => {
+            report.addManualReview({
+                title: `Replace the v2 auth hook ${name}`,
+                summary: `\`${name}\` belongs to the v2 bearer auth setup. The migration leaves the call site as it is, and a v3 auth provider has no member of this name.`,
+                action: 'Use the v3 auth provider of the client instead: inject it with its inject function and call its methods (see the auth guide).',
+                locations: [{ filePath, line }],
+                source: 'auth-consumers-migration',
+                dedupeKey: `v2-auth-hook:${filePath}:${name}`,
+            });
+        });
+    });
+};
+//# sourceMappingURL=auth-consumers-migration.js.map

package/generators/migrate-to-query-v3/auth-provider-scaffold.js

@@ -1,3 +1,4 @@
+import { dirname, join, relative } from 'node:path/posix';
 import * as ts from 'typescript';
 import { createSourceFile } from './shared.js';
 const REFRESH_CONFIG_KEYS = new Set([
@@ -43,7 +44,10 @@ const readConfig = (configArgument, sourceFile, filePath, node) => {
     const config = {
         filePath,
         line: sourceFile.getLineAndCharacterOfPosition(node.getStart(sourceFile)).line + 1,
+        copiedImports: [],
+        localNames: [],
     };
+    const copiedNodes = [];
     const refreshConfig = configArgument.properties.find((property) => ts.isPropertyAssignment(property) && ts.isIdentifier(property.name) && property.name.text === 'refreshConfig');
     if (!refreshConfig ||
         !ts.isPropertyAssignment(refreshConfig) ||
@@ -68,9 +72,88 @@ const readConfig = (configArgument, sourceFile, filePath, node) => {
             return;
         }
         config[key] = text;
+        copiedNodes.push(value);
     });
+    resolveCopiedNames(config, copiedNodes, sourceFile);
     return config;
 };
+const collectIdentifierNames = (node, names) => {
+    if (ts.isIdentifier(node)) {
+        const parent = node.parent;
+        const isMemberName = (ts.isPropertyAccessExpression(parent) && parent.name === node) ||
+            (ts.isPropertyAssignment(parent) && parent.name === node);
+        if (!isMemberName) {
+            names.add(node.text);
+        }
+    }
+    ts.forEachChild(node, (child) => collectIdentifierNames(child, names));
+};
+const resolveCopiedNames = (config, copiedNodes, sourceFile) => {
+    const used = new Set();
+    copiedNodes.forEach((node) => collectIdentifierNames(node, used));
+    const importedNames = new Set();
+    sourceFile.statements.forEach((statement) => {
+        if (!ts.isImportDeclaration(statement) || !ts.isStringLiteral(statement.moduleSpecifier)) {
+            return;
+        }
+        const clause = statement.importClause;
+        if (!clause || clause.isTypeOnly) {
+            return;
+        }
+        const names = [];
+        const defaultName = clause.name && used.has(clause.name.text) ? clause.name.text : undefined;
+        const namedBindings = clause.namedBindings;
+        let namedText;
+        if (defaultName)
+            names.push(defaultName);
+        if (namedBindings && ts.isNamespaceImport(namedBindings) && used.has(namedBindings.name.text)) {
+            names.push(namedBindings.name.text);
+            namedText = `* as ${namedBindings.name.text}`;
+        }
+        else if (namedBindings && ts.isNamedImports(namedBindings)) {
+            const elements = namedBindings.elements.filter((element) => !element.isTypeOnly && used.has(element.name.text));
+            elements.forEach((element) => names.push(element.name.text));
+            if (elements.length > 0) {
+                namedText = `{ ${elements.map((element) => element.getText(sourceFile)).join(', ')} }`;
+            }
+        }
+        if (names.length === 0) {
+            return;
+        }
+        names.forEach((name) => importedNames.add(name));
+        const bindings = [defaultName, namedText].filter(Boolean).join(', ');
+        config.copiedImports.push({
+            moduleSpecifier: statement.moduleSpecifier.text,
+            names,
+            statement: (moduleSpecifier) => `import ${bindings} from '${moduleSpecifier}';`,
+        });
+    });
+    sourceFile.statements.forEach((statement) => {
+        const declared = [];
+        if (ts.isVariableStatement(statement)) {
+            statement.declarationList.declarations.forEach((declaration) => {
+                if (ts.isIdentifier(declaration.name))
+                    declared.push(declaration.name.text);
+            });
+        }
+        else if ((ts.isFunctionDeclaration(statement) || ts.isClassDeclaration(statement)) && statement.name) {
+            declared.push(statement.name.text);
+        }
+        declared.forEach((name) => {
+            if (used.has(name) && !importedNames.has(name) && !config.localNames.includes(name)) {
+                config.localNames.push(name);
+            }
+        });
+    });
+};
+/** Re-points a relative specifier of the v2 file at the file that now holds the provider. */
+export const rebaseModuleSpecifier = (moduleSpecifier, fromFilePath, toFilePath) => {
+    if (!moduleSpecifier.startsWith('.')) {
+        return moduleSpecifier;
+    }
+    const rebased = relative(dirname(toFilePath), join(dirname(fromFilePath), moduleSpecifier));
+    return rebased.startsWith('.') ? rebased : `./${rebased}`;
+};
 const REFRESH_QUERY_KEY = 'tokenRefresh';
 /**
  * Renders the `queries` / `features` arguments of a v3 provider from a v2 config.
@@ -93,7 +176,7 @@ export const renderAuthProviderBody = (config) => {
     }
     const refreshEntries = [`      queryCreator: ${config.refreshCreatorName},`];
     if (config.responseAdapter) {
-        refreshEntries.push(`      // TODO(query-v3): v2 responseAdapter. It must return { accessToken, refreshToken } - v2 returned { token, refreshToken }.`, `      extractTokens: ${config.responseAdapter},`);
+        refreshEntries.push('      extractTokens: (response) => {', `        const { token, refreshToken } = (${config.responseAdapter})(response) as { token: string; refreshToken: string };`, '', '        return { accessToken: token, refreshToken };', '      },');
     }
     if (config.requestArgsAdapter) {
         refreshEntries.push(`      // TODO(query-v3): v2 requestArgsAdapter took { token, refreshToken }; buildArgs takes the refresh token alone.`, `      buildArgs: ${config.requestArgsAdapter},`);
@@ -111,6 +194,14 @@ export const renderAuthProviderBody = (config) => {
             action: 'If the cookie was only written after an opt-in (a "remember me" box), drive `setRememberMe()` from it. If it was never written, remove `withPersistentAuth` from the scaffold.',
         });
     }
+    refreshEntries.push('      retryConfig: { maxAttempts: 8 },');
+    if (config.cookieName && !config.cookieDomain) {
+        warnings.push({
+            title: 'Check the cookie host: v3 keeps the login cookie per host',
+            summary: 'The v2 provider set no `cookieDomain`. `withPersistentAuth` keys the cookie per origin, so a login does not reach a sibling host.',
+            action: 'If the app runs on more than one host, check that each host signs in on its own.',
+        });
+    }
     const queries = [
         '  queries: [',
         `    // Derived from the v2 BearerAuthProvider in ${config.filePath}:${config.line}. Verify before shipping.`,
@@ -139,6 +230,7 @@ export const renderAuthProviderBody = (config) => {
         '      cookie: {',
         ...cookieEntries,
         '      },',
+        '      defaultRememberMe: true,',
         '      autoLogin: {',
         `        queryKey: '${REFRESH_QUERY_KEY}',`,
         `        // TODO(query-v3): shape the auto-login request from the cookie value.`,

package/generators/migrate-to-query-v3/cleanup-migration.js

@@ -1,6 +1,6 @@
 import * as ts from 'typescript';
 import { createModuleGraph } from './module-graph.js';
-import { isShadowedInNestedScope } from './rename-symbols.js';
+import { findUsedNames, isShadowedInNestedScope, pruneUnusedNamedImports } from './rename-symbols.js';
 import { REMOVED_EXPERIMENTAL_QUERY_HELPERS, createSourceFile, ensureImportFromQuery, ensureNamedImports, findRemovedExperimentalQueryHelpers, getLineNumber, printImportDeclaration, } from './shared.js';
 export const reportRemovedExperimentalQueryHelpers = (tree, scope, report) => {
     scope.visit(tree, (filePath) => {
@@ -34,7 +34,22 @@ export const reportRemovedExperimentalQueryHelpers = (tree, scope, report) => {
 export const migrateDevtoolsUsage = (tree, scope, report) => {
     const updatedFiles = [];
     const filesNeedingDevtoolsPackage = [];
+    let mountsFromProvider = false;
     scope.visit(tree, (filePath) => {
+        if (filePath.endsWith('.ts') && tree.read(filePath, 'utf-8')?.includes('provideQueryClientForDevtools')) {
+            mountsFromProvider = true;
+        }
+    });
+    scope.visit(tree, (filePath) => {
+        if (filePath.endsWith('.html')) {
+            const html = tree.read(filePath, 'utf-8');
+            const nextHtml = html && (mountsFromProvider ? removeDevtoolsTags(html) : selectLazyDevtools(html));
+            if (nextHtml && nextHtml !== html) {
+                tree.write(filePath, nextHtml);
+                updatedFiles.push(filePath);
+            }
+            return;
+        }
         if (!filePath.endsWith('.ts')) {
             return;
         }
@@ -43,13 +58,14 @@ export const migrateDevtoolsUsage = (tree, scope, report) => {
             (!content.includes('provideQueryClientForDevtools') && !content.includes('QueryDevtoolsComponent'))) {
             return;
         }
-        const { content: nextContent, importsComponent } = migrateDevtoolsInFile(content);
+        const { content: migrated, importsComponent, mountsDevtools } = migrateDevtoolsInFile(content, mountsFromProvider);
+        const nextContent = pruneUnusedNamedImports(mountsFromProvider ? removeDevtoolsTags(migrated) : migrated, findUsedNames(content));
         if (nextContent === content) {
             return;
         }
         tree.write(filePath, nextContent);
         updatedFiles.push(filePath);
-        if (importsComponent) {
+        if (importsComponent || mountsDevtools) {
             filesNeedingDevtoolsPackage.push(filePath);
         }
     });
@@ -64,7 +80,7 @@ export const migrateDevtoolsUsage = (tree, scope, report) => {
         // `@ethlete/query-devtools`.
         report.addManualReview({
             title: 'Add @ethlete/query-devtools for the query devtools',
-            summary: '`QueryDevtoolsComponent` now lives in `@ethlete/query-devtools`. The imports were rewritten, but the package may not be a dependency of these projects yet.',
+            summary: "`provideQueryDevtools()` now mounts the devtools through `ui: () => import('@ethlete/query-devtools/lazy')`, so `<et-query-devtools>` and its component import were removed. Where no devtools provider was found, `QueryDevtoolsLazyComponent` and `<et-query-devtools-lazy>` replace them. The package may not be a dependency of these projects yet.",
             action: 'Run `yarn add @ethlete/query-devtools` where needed, then `yarn install` and re-lint the affected libs so the `@nx/dependency-checks` rule sees the new dependency.',
             locations: filesNeedingDevtoolsPackage.map((filePath) => ({ filePath })),
             source: 'cleanup-migration',
@@ -92,6 +108,48 @@ export const replaceAnyQueryWithLegacy = (tree, scope) => {
         console.log(`\n✅ Replaced legacy AnyV2Query aliases in ${updatedFiles.length} files`);
     }
 };
+export const reportLeftoverV2Clients = (tree, scope, report) => {
+    scope.visit(tree, (filePath) => {
+        if (!filePath.endsWith('.ts') || filePath.endsWith('.spec.ts')) {
+            return;
+        }
+        const content = tree.read(filePath, 'utf-8');
+        const index = content?.search(/new\s+V2QueryClient\s*[(<]/);
+        if (!content || index === undefined || index < 0) {
+            return;
+        }
+        const line = content.slice(0, index).split('\n').length;
+        report.addManualReview({
+            title: 'Migrator error: a V2QueryClient is left',
+            summary: 'The migration should leave no `V2QueryClient` behind, so it missed this client. Report this case as a migrator bug.',
+            action: 'Migrate the client by hand to `createQueryClient`, then report the shape the migration did not handle.',
+            locations: [{ filePath, line }],
+            source: 'cleanup-migration',
+            dedupeKey: `leftover-v2-client:${filePath}:${line}`,
+        });
+    });
+};
+export const reportLeftoverLegacyDevtools = (tree, scope, report) => {
+    scope.visit(tree, (filePath) => {
+        if (filePath.endsWith('.spec.ts') || (!filePath.endsWith('.ts') && !filePath.endsWith('.html'))) {
+            return;
+        }
+        const content = tree.read(filePath, 'utf-8');
+        const index = content?.search(/<et-query-devtools(?![\w-])|\b(QueryDevtoolsComponent|provideQueryClientForDevtools)\b/);
+        if (!content || index === undefined || index < 0) {
+            return;
+        }
+        const line = content.slice(0, index).split('\n').length;
+        report.addManualReview({
+            title: 'Migrator error: legacy devtools usage is left',
+            summary: 'The migration should leave no legacy `<et-query-devtools>`, `QueryDevtoolsComponent` or `provideQueryClientForDevtools` behind, so it missed this one. Report this case as a migrator bug.',
+            action: 'Switch it by hand to `provideQueryDevtools()` and `QueryDevtoolsLazyComponent` from `@ethlete/query-devtools/lazy`, then report the shape the migration did not handle.',
+            locations: [{ filePath, line }],
+            source: 'cleanup-migration',
+            dedupeKey: `leftover-legacy-devtools:${filePath}:${line}`,
+        });
+    });
+};
 export const migrateEmptyPrepareCalls = (tree, scope, report) => {
     const updatedFiles = [];
     const graph = createModuleGraph(tree);
@@ -123,26 +181,79 @@ export const migrateEmptyPrepareCalls = (tree, scope, report) => {
         console.log(`\n✅ Migrated empty .prepare() calls in ${updatedFiles.length} files`);
     }
 };
-const migrateDevtoolsInFile = (content) => {
+const LAZY_DEVTOOLS_COMPONENT = 'QueryDevtoolsLazyComponent';
+const DEVTOOLS_UI_PROVIDER_CALL = "provideQueryDevtools({ ui: () => import('@ethlete/query-devtools/lazy') })";
+const selectLazyDevtools = (content) => content.replace(/(<\/?)et-query-devtools(?![\w-])/g, '$1et-query-devtools-lazy');
+const removeDevtoolsTags = (content) => content.replace(/[ \t]*<et-query-devtools(?![\w-])[^>]*?(?:\/>|>\s*<\/et-query-devtools>)[ \t]*\n?/g, '');
+const removeFromImportsArrays = (content, names) => {
+    const sourceFile = createSourceFile(content);
+    const ranges = [];
+    const visit = (node) => {
+        if (ts.isPropertyAssignment(node) &&
+            ts.isIdentifier(node.name) &&
+            node.name.text === 'imports' &&
+            ts.isArrayLiteralExpression(node.initializer)) {
+            node.initializer.elements
+                .filter((element) => ts.isIdentifier(element) && names.has(element.text))
+                .forEach((element) => {
+                const range = withSurroundingComma(content, element.getStart(sourceFile), element.getEnd());
+                const padding = content[range.start - 1] === '[' ? (/^[ \t]*/.exec(content.slice(range.end))?.[0] ?? '') : '';
+                ranges.push({ start: range.start, end: range.end + padding.length });
+            });
+        }
+        ts.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+    return ranges
+        .sort((left, right) => right.start - left.start)
+        .reduce((result, { start, end }) => result.slice(0, start) + result.slice(end), content);
+};
+const renameIdentifiers = (content, names, replacement) => {
+    const sourceFile = createSourceFile(content);
+    const ranges = [];
+    const visit = (node) => {
+        if (ts.isImportDeclaration(node)) {
+            return;
+        }
+        if (ts.isIdentifier(node) && names.has(node.text)) {
+            ranges.push({ start: node.getStart(sourceFile), end: node.getEnd() });
+        }
+        ts.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+    return ranges
+        .sort((left, right) => right.start - left.start)
+        .reduce((result, { start, end }) => result.slice(0, start) + replacement + result.slice(end), content);
+};
+const migrateDevtoolsInFile = (content, mountsFromProvider) => {
     const componentNames = localNamesImportedFromQuery(content, 'QueryDevtoolsComponent');
     const providerNames = new Set([
         'provideQueryClientForDevtools',
         ...localNamesImportedFromQuery(content, 'provideQueryClientForDevtools'),
     ]);
-    let result = replaceDevtoolsProviderCalls(content, providerNames);
-    const hasProvider = result.includes('provideQueryDevtools()');
+    const providerCall = mountsFromProvider ? DEVTOOLS_UI_PROVIDER_CALL : 'provideQueryDevtools()';
+    let result = replaceDevtoolsProviderCalls(content, providerNames, providerCall);
+    const hasProvider = result.includes(providerCall);
     result = dropLegacyDevtoolsImports(result);
     if (hasProvider) {
         result = ensureImportFromQuery(result, ['provideQueryDevtools']);
     }
-    if (componentNames.length > 0) {
+    if (componentNames.length > 0 && mountsFromProvider) {
+        result = removeFromImportsArrays(result, new Set(componentNames));
+    }
+    else if (componentNames.length > 0) {
+        result = selectLazyDevtools(renameIdentifiers(result, new Set(componentNames), LAZY_DEVTOOLS_COMPONENT));
         result = ensureNamedImports({
             content: result,
-            importsNeeded: componentNames.map((name) => name === 'QueryDevtoolsComponent' ? name : `QueryDevtoolsComponent as ${name}`),
-            moduleSpecifier: '@ethlete/query-devtools',
+            importsNeeded: [LAZY_DEVTOOLS_COMPONENT],
+            moduleSpecifier: '@ethlete/query-devtools/lazy',
         });
     }
-    return { content: result, importsComponent: componentNames.length > 0 };
+    return {
+        content: result,
+        importsComponent: componentNames.length > 0 && !mountsFromProvider,
+        mountsDevtools: hasProvider && mountsFromProvider,
+    };
 };
 const queryImports = (sourceFile) => sourceFile.statements.filter((node) => ts.isImportDeclaration(node) &&
     ts.isStringLiteral(node.moduleSpecifier) &&
@@ -162,7 +273,7 @@ const localNamesImportedFromQuery = (content, name) => queryImports(createSource
  * first call site keeps its position - it is already where the app wanted its devtools - and the
  * rest are removed along with the comma that separated them.
  */
-const replaceDevtoolsProviderCalls = (content, providerNames) => {
+const replaceDevtoolsProviderCalls = (content, providerNames, providerCall) => {
     const sourceFile = createSourceFile(content);
     const calls = [];
     const visit = (node) => {
@@ -179,7 +290,7 @@ const replaceDevtoolsProviderCalls = (content, providerNames) => {
         const start = call.getStart(sourceFile);
         const end = call.getEnd();
         if (index === 0) {
-            return { start, end, replacement: 'provideQueryDevtools()' };
+            return { start, end, replacement: providerCall };
         }
         return { ...withSurroundingComma(content, start, end), replacement: '' };
     });
@@ -231,16 +342,25 @@ const dropLegacyDevtoolsImports = (content) => {
 const replaceAnyQueryInFile = (content) => {
     const sourceFile = createSourceFile(content);
     const replacements = [];
+    const names = new Set();
+    const collect = (node) => {
+        if (ts.isIdentifier(node))
+            names.add(node.text);
+        ts.forEachChild(node, collect);
+    };
+    collect(sourceFile);
+    const renamesQuery = !names.has('AnyLegacyQuery');
+    const renamesCreator = !names.has('AnyLegacyQueryCreator');
     const visit = (node) => {
         if (ts.isIdentifier(node)) {
-            if (node.text === 'AnyV2Query') {
+            if (renamesQuery && node.text === 'AnyV2Query') {
                 replacements.push({
                     start: node.getStart(sourceFile),
                     end: node.getEnd(),
                     replacement: 'AnyLegacyQuery',
                 });
             }
-            if (node.text === 'AnyV2QueryCreator') {
+            if (renamesCreator && node.text === 'AnyV2QueryCreator') {
                 replacements.push({
                     start: node.getStart(sourceFile),
                     end: node.getEnd(),