feat: added deps migration (#99)

* feat: added deps migration

* feat: add migration to use "useVisisbleTask$" instead of "useClientEffect$"

---------

Co-authored-by: Dmitriy Stepanenko <[email protected]>

Author: shairez

package.json

@@ -60,6 +60,7 @@
     "tcp-port-used": "1.0.2",
     "tree-kill": "1.2.2",
     "ts-jest": "29.0.5",
+    "ts-morph": "17.0.1",
     "ts-node": "10.9.1",
     "typescript": "4.9.5",
     "verdaccio": "5.21.1",

packages/qwik-nx/migrations.json

@@ -5,6 +5,67 @@
       "description": "switch-to-qwik-nx-build-executor",
       "cli": "nx",
       "implementation": "./src/migrations/switch-to-qwik-nx-build-executor/switch-to-qwik-nx-build-executor"
+    },
+    "update-use-client-effect$-to-use-visisble-task$": {
+      "version": "0.13.1",
+      "description": "useClientEffect$ has been changed to useVisisbleTask$",
+      "cli": "nx",
+      "implementation": "./src/migrations/update-use-client-effect$-to-use-visisble-task$/update-use-client-effect$-to-use-visisble-task$"
+    }
+  },
+  "packageJsonUpdates": {
+    "0.13.1": {
+      "version": "0.13.1",
+      "packages": {
+        "@builder.io/qwik": {
+          "version": "~0.20.1"
+        },
+        "@builder.io/qwik-city": {
+          "version": "0.5.2"
+        },
+        "@types/eslint": {
+          "version": "8.21.1"
+        },
+        "@types/node": {
+          "version": "^18.14.0"
+        },
+        "@types/node-fetch": {
+          "version": "latest"
+        },
+        "@typescript-eslint/eslint-plugin": {
+          "version": "5.54.0"
+        },
+        "@typescript-eslint/parser": {
+          "version": "5.54.0"
+        },
+        "eslint": {
+          "version": "8.35.0"
+        },
+        "eslint-plugin-qwik": {
+          "version": "~0.20.1"
+        },
+        "node-fetch": {
+          "version": "3.3.0"
+        },
+        "prettier": {
+          "version": "2.8.4"
+        },
+        "typescript": {
+          "version": "4.9.5"
+        },
+        "undici": {
+          "version": "5.20.0"
+        },
+        "vite": {
+          "version": "4.1.4"
+        },
+        "vite-tsconfig-paths": {
+          "version": "3.5.0"
+        },
+        "zod": {
+          "version": "^3.20.6"
+        }
+      }
     }
   }
 }

packages/qwik-nx/src/migrations/update-use-client-effect$-to-use-visisble-task$/update-use-client-effect$-to-use-visisble-task$.spec.ts

@@ -0,0 +1,110 @@
+import { addProjectConfiguration, Tree } from '@nrwl/devkit';
+import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+import migrate from './update-use-client-effect$-to-use-visisble-task$';
+
+describe('Use new "qwik-nx:build" executor in qwik apps', () => {
+  let tree: Tree;
+
+  beforeEach(() => {
+    tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+    addProjectConfiguration(tree, 'app1', {
+      root: 'apps/app1',
+    });
+  });
+
+  it('should update imports', async () => {
+    const { other, toBeRenamedAfter, toBeRenamedBefore } = getTestFiles();
+    const toBerenamedFilePath = 'apps/app1/to-be-renamed.tsx';
+    const otherFilePath = 'apps/app1/other.tsx';
+    tree.write(toBerenamedFilePath, toBeRenamedBefore);
+    tree.write(otherFilePath, other);
+
+    await migrate(tree);
+
+    expect(tree.read(toBerenamedFilePath)?.toString()).toEqual(
+      toBeRenamedAfter
+    );
+    expect(tree.read(otherFilePath)?.toString()).toEqual(other);
+  });
+});
+
+function getTestFiles() {
+  return {
+    toBeRenamedBefore: `import { component$, useClientEffect$, useStore, useStylesScoped$ } from '@builder.io/qwik';
+    import styles from './flower.css?inline';
+
+    const anotherVar = useClientEffect$;
+    
+    export default component$(() => {
+      useStylesScoped$(styles);
+    
+      const state = useStore({
+        count: 0,
+        number: 20,
+      });
+    
+      useClientEffect$(({ cleanup }) => {
+        const timeout = setTimeout(() => (state.count = 1), 500);
+        cleanup(() => clearTimeout(timeout));
+      });
+
+      console.log('useClientEffect$');
+    
+      return (
+        <>
+         Content of a file that has useClientEffect$ function
+        </>
+      );
+    });`,
+    toBeRenamedAfter: `import { component$, useVisibleTask$, useStore, useStylesScoped$ } from '@builder.io/qwik';
+    import styles from './flower.css?inline';
+
+    const anotherVar = useVisibleTask$;
+    
+    export default component$(() => {
+      useStylesScoped$(styles);
+    
+      const state = useStore({
+        count: 0,
+        number: 20,
+      });
+    
+      useVisibleTask$(({ cleanup }) => {
+        const timeout = setTimeout(() => (state.count = 1), 500);
+        cleanup(() => clearTimeout(timeout));
+      });
+
+      console.log('useClientEffect$');
+    
+      return (
+        <>
+         Content of a file that has useClientEffect$ function
+        </>
+      );
+    });`,
+    other: `import { component$, useClientEffect$, useStore, useStylesScoped$ } from 'other-package';
+    import styles from './flower.css?inline';
+    
+    export default component$(() => {
+      useStylesScoped$(styles);
+    
+      const state = useStore({
+        count: 0,
+        number: 20,
+      });
+    
+      useClientEffect$(({ cleanup }) => {
+        const timeout = setTimeout(() => (state.count = 1), 500);
+        cleanup(() => clearTimeout(timeout));
+      });
+
+      console.log('useClientEffect$');
+    
+      return (
+        <>
+         Content of a file that has useClientEffect$ function
+        </>
+      );
+    });`,
+  };
+}

packages/qwik-nx/src/migrations/update-use-client-effect$-to-use-visisble-task$/update-use-client-effect$-to-use-visisble-task$.ts

@@ -0,0 +1,73 @@
+import {
+  ensurePackage,
+  getProjects,
+  Tree,
+  visitNotIgnoredFiles,
+} from '@nrwl/devkit';
+import { extname } from 'path';
+import { SyntaxKind } from 'typescript';
+
+export default async function update(tree: Tree) {
+  ensurePackage('ts-morph', '^17.0.0');
+  const tsMorph = await import('ts-morph');
+  for (const [, definition] of getProjects(tree)) {
+    visitNotIgnoredFiles(tree, definition.root, (file) => {
+      if (extname(file) === '.tsx') {
+        updateNamedImport(
+          tree,
+          tsMorph,
+          file,
+          '@builder.io/qwik',
+          'useClientEffect$',
+          'useVisibleTask$'
+        );
+      }
+    });
+  }
+}
+
+function updateNamedImport(
+  tree: Tree,
+  tsMorph: typeof import('ts-morph'),
+  filePath: string,
+  importModuleSpecifier: string,
+  importName: string,
+  updatedImportName: string
+) {
+  const fileContent = tree.read(filePath)!.toString();
+  const project = new tsMorph.Project();
+  const sourceFile = project.createSourceFile('temp.ts', fileContent);
+  const imports = sourceFile.getImportDeclarations();
+  const relevantImports = imports
+    .map((imp) => {
+      const moduleSpecifier = imp.getModuleSpecifierValue();
+      if (moduleSpecifier !== importModuleSpecifier) {
+        return [];
+      }
+      return imp
+        .getNamedImports()
+        .filter((namedImport) => namedImport.getName() === importName);
+    })
+    .filter((imports) => imports.length)
+    .flat();
+
+  if (relevantImports.length > 0) {
+    relevantImports.forEach((imp) => imp.replaceWithText(updatedImportName));
+
+    sourceFile.forEachDescendant((node) => {
+      if (
+        node.getKind() === SyntaxKind.Identifier &&
+        node.getText() === importName &&
+        [SyntaxKind.CallExpression, SyntaxKind.VariableDeclaration].includes(
+          node.getParent()?.getKind() as SyntaxKind
+        )
+      ) {
+        node.replaceWithText(updatedImportName);
+      }
+    });
+
+    tree.write(filePath, sourceFile.getFullText());
+  }
+
+  return tree;
+}