fix(qwik-nx): handle eslint checks in dev mode (#202)

dmitry-stepanenko · web-flow · commit ef60711a8da5 · 2023-09-21T16:14:39.000+03:00
diff --git a/.gitignore b/.gitignore
@@ -33,8 +33,10 @@ npm-debug.log
 yarn-error.log
 testem.log
 /typings
-migrations.json
 
 # System Files
 .DS_Store
 Thumbs.db
+
+# Local Netlify folder
+.netlify
diff --git a/e2e/qwik-nx-e2e/tests/chore.spec.ts b/e2e/qwik-nx-e2e/tests/chore.spec.ts
@@ -1,42 +1,44 @@
 import {
   ensureNxProject,
+  listFiles,
   readJson,
   runNxCommandAsync,
 } from '@nx/plugin/testing';
 import { DEFAULT_E2E_TIMEOUT } from '@qwikifiers/e2e/utils';
 
-describe('appGenerator e2e', () => {
-  // Setting up individual workspaces per
-  // test can cause e2e runs to take a long time.
-  // For this reason, we recommend each suite only
-  // consumes 1 workspace. The tests should each operate
-  // on a unique project in the workspace, such that they
-  // are not dependant on one another.
+describe('misc checks', () => {
   beforeAll(() => {
     ensureNxProject('qwik-nx', 'dist/packages/qwik-nx');
   });
 
   afterAll(async () => {
-    // `nx reset` kills the daemon, and performs
-    // some work which can help clean up e2e leftovers
     await runNxCommandAsync('reset');
   });
 
-  describe("qwik-nx's compiled package.json", () => {
-    it(
-      "qwik-nx's package.json should contain only expected dependencies",
-      async () => {
-        const packageJson = readJson('node_modules/qwik-nx/package.json');
+  it(
+    "qwik-nx's package.json should contain only expected dependencies",
+    async () => {
+      const packageJson = readJson('node_modules/qwik-nx/package.json');
 
-        expect(packageJson.peerDependencies).toBeUndefined();
-        expect(packageJson.dependencies).toEqual({
-          '@nx/devkit': '^16.0.0',
-          '@nx/js': '^16.0.0',
-          '@nx/linter': '^16.0.0',
-          '@nx/vite': '^16.0.0',
-        });
-      },
-      DEFAULT_E2E_TIMEOUT
-    );
+      expect(packageJson.peerDependencies).toBeUndefined();
+      expect(packageJson.dependencies).toEqual({
+        '@nx/devkit': '^16.0.0',
+        '@nx/js': '^16.0.0',
+        '@nx/linter': '^16.0.0',
+        '@nx/vite': '^16.0.0',
+      });
+    },
+    DEFAULT_E2E_TIMEOUT
+  );
+
+  it('compiled output should contain all expected files', () => {
+    const expectedFiles = [
+      'executors.json',
+      'migrations.json',
+      'generators.json',
+      'README.md',
+    ];
+    const files = new Set(listFiles('node_modules/qwik-nx'));
+    expect(expectedFiles.every((f) => files.has(f)));
   });
 });
diff --git a/e2e/utils/index.ts b/e2e/utils/index.ts
@@ -12,7 +12,7 @@ import {
   getPackageManagerCommand,
 } from 'nx/src/utils/package-manager';
 
-export const DEFAULT_E2E_TIMEOUT = 2 * 60 * 1000;
+export const DEFAULT_E2E_TIMEOUT = 3 * 60 * 1000;
 
 const kill = require('kill-port');
 export const isWindows = require('is-windows');
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
     "pnpm": "^8.0.0"
   },
   "devDependencies": {
-    "@builder.io/qwik": "^1.2.6",
+    "@builder.io/qwik": "^1.2.12",
     "@commitlint/cli": "^17.3.0",
     "@commitlint/config-angular": "^17.3.0",
     "@commitlint/config-conventional": "^17.3.0",
diff --git a/packages/qwik-nx/migrations.json b/packages/qwik-nx/migrations.json
@@ -23,6 +23,11 @@
       "description": "Enabled type checking can be breaking. Adding a verbose option so that it is clear how to disable it",
       "cli": "nx",
       "implementation": "./src/migrations/add-verbose-skip-type-check-option-for-the-build-executor/add-verbose-skip-type-check-option-for-the-build-executor"
+    },
+    "set-proper-tsconfig-path-for-qwik-vite-plugin": {
+      "version": "1.0.11",
+      "description": "set-proper-tsconfig-path-for-qwik-vite-plugin",
+      "implementation": "./src/migrations/set-proper-tsconfig-path-for-qwik-vite-plugin/set-proper-tsconfig-path-for-qwik-vite-plugin"
     }
   },
   "packageJsonUpdates": {
@@ -262,6 +267,20 @@
           "version": "^0.32.0"
         }
       }
+    },
+    "1.0.11": {
+      "version": "1.0.11",
+      "packages": {
+        "@builder.io/qwik": {
+          "version": "~1.2.12"
+        },
+        "@builder.io/qwik-city": {
+          "version": "~1.2.12"
+        },
+        "eslint-plugin-qwik": {
+          "version": "~1.2.12"
+        }
+      }
     }
   }
 }
diff --git a/packages/qwik-nx/src/generators/application/__snapshots__/generator.spec.ts.snap b/packages/qwik-nx/src/generators/application/__snapshots__/generator.spec.ts.snap
@@ -427,6 +427,7 @@ export default defineConfig({
       ssr: {
         outDir: '../../dist/apps/myapp/server',
       },
+      tsconfigFileNames: ['tsconfig.app.json'],
     }),
     tsconfigPaths({ root: '../../' }),
   ],
diff --git a/packages/qwik-nx/src/generators/application/files/src/components/router-head/router-head.tsx__template__ b/packages/qwik-nx/src/generators/application/files/src/components/router-head/router-head.tsx__template__
@@ -6,26 +6,30 @@ import { useDocumentHead, useLocation } from '@builder.io/qwik-city';
  */
 export const RouterHead = component$(() => {
   const head = useDocumentHead();
-  const { url } = useLocation();
+  const loc = useLocation();
 
   return (
     <>
       <title>{head.title}</title>
 
-      <link rel="canonical" href={url.href} />
+      <link rel="canonical" href={loc.url.href} />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 
       {head.meta.map((m) => (
-        <meta {...m} />
+        <meta key={m.key} {...m} />
       ))}
 
       {head.links.map((l) => (
-        <link {...l} />
+        <link key={l.key} {...l} />
       ))}
 
       {head.styles.map((s) => (
-        <style {...s.props} dangerouslySetInnerHTML={s.style} />
+        <style key={s.key} {...s.props} dangerouslySetInnerHTML={s.style} />
+      ))}
+
+      {head.scripts.map((s) => (
+        <script key={s.key} {...s.props} dangerouslySetInnerHTML={s.script} />
       ))}
     </>
   );
diff --git a/packages/qwik-nx/src/generators/application/files/vite.config.ts__template__ b/packages/qwik-nx/src/generators/application/files/vite.config.ts__template__
@@ -16,6 +16,7 @@ export default defineConfig({
 			ssr: {
 				outDir: '<%= offsetFromRoot %>dist/<%= projectRoot %>/server',
 			},
+      tsconfigFileNames: ['tsconfig.app.json']
 		}),
     tsconfigPaths({ root: '<%= offsetFromRoot %>' })
   ],
diff --git a/packages/qwik-nx/src/generators/host/__snapshots__/generator.spec.ts.snap b/packages/qwik-nx/src/generators/host/__snapshots__/generator.spec.ts.snap
@@ -955,6 +955,7 @@ export default defineConfig({
       ssr: {
         outDir: '../../dist/apps/myhostapp/server',
       },
+      tsconfigFileNames: ['tsconfig.app.json'],
     }),
     tsconfigPaths({ root: '../../' }),
   ],
@@ -1450,6 +1451,7 @@ export default defineConfig({
       ssr: {
         outDir: '../../dist/apps/remote1/server',
       },
+      tsconfigFileNames: ['tsconfig.app.json'],
     }),
     tsconfigPaths({ root: '../../' }),
   ],
@@ -1614,6 +1616,7 @@ export default defineConfig({
       ssr: {
         outDir: '../../dist/apps/remote2/server',
       },
+      tsconfigFileNames: ['tsconfig.app.json'],
     }),
     tsconfigPaths({ root: '../../' }),
   ],
diff --git a/packages/qwik-nx/src/generators/integrations/react-in-app/__snapshots__/generator.spec.ts.snap b/packages/qwik-nx/src/generators/integrations/react-in-app/__snapshots__/generator.spec.ts.snap
@@ -19,6 +19,7 @@ export default defineConfig({
       ssr: {
         outDir: '../../dist/apps/myapp/server',
       },
+      tsconfigFileNames: ['tsconfig.app.json'],
     }),
     tsconfigPaths({ root: '../../' }),
     qwikReact(),
@@ -210,6 +211,7 @@ export default defineConfig({
       ssr: {
         outDir: '../../dist/apps/myapp/server',
       },
+      tsconfigFileNames: ['tsconfig.app.json'],
     }),
     tsconfigPaths({ root: '../../' }),
     qwikReact(),
diff --git a/packages/qwik-nx/src/generators/integrations/react-library/__snapshots__/generator.spec.ts.snap b/packages/qwik-nx/src/generators/integrations/react-library/__snapshots__/generator.spec.ts.snap
@@ -511,6 +511,7 @@ export default defineConfig({
       ssr: {
         outDir: '../../dist/apps/myapp1/server',
       },
+      tsconfigFileNames: ['tsconfig.app.json'],
     }),
     tsconfigPaths({ root: '../../' }),
     qwikReact(),
@@ -557,6 +558,7 @@ export default defineConfig({
       ssr: {
         outDir: '../../dist/apps/myapp2/server',
       },
+      tsconfigFileNames: ['tsconfig.app.json'],
     }),
     tsconfigPaths({ root: '../../' }),
     qwikReact(),
diff --git a/packages/qwik-nx/src/generators/remote/__snapshots__/generator.spec.ts.snap b/packages/qwik-nx/src/generators/remote/__snapshots__/generator.spec.ts.snap
@@ -487,6 +487,7 @@ export default defineConfig({
       ssr: {
         outDir: '../../dist/apps/myremote/server',
       },
+      tsconfigFileNames: ['tsconfig.app.json'],
     }),
     tsconfigPaths({ root: '../../' }),
   ],
diff --git a/packages/qwik-nx/src/migrations/set-proper-tsconfig-path-for-qwik-vite-plugin/__snapshots__/set-proper-tsconfig-path-for-qwik-vite-plugin.spec.ts.snap b/packages/qwik-nx/src/migrations/set-proper-tsconfig-path-for-qwik-vite-plugin/__snapshots__/set-proper-tsconfig-path-for-qwik-vite-plugin.spec.ts.snap
@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`set-proper-tsconfig-path-for-qwik-vite-plugin migration should add "tsconfigFileNames" property 1`] = `
+"import { qwikVite } from \\"@builder.io/qwik/optimizer\\";
+import { defineConfig } from \\"vite\\";
+import tsconfigPaths from \\"vite-tsconfig-paths\\";
+import { qwikNxVite } from \\"qwik-nx/plugins\\";
+export default defineConfig({
+    plugins: [
+        qwikNxVite(),
+        qwikVite({
+            tsconfigFileNames: [\\"tsconfig.app.json\\"],
+            client: {
+                outDir: \\"../../dist/apps/myapp/client\\",
+            },
+            ssr: {
+                outDir: \\"../../dist/apps/myapp/server\\",
+            }
+        }),
+        tsconfigPaths({ root: \\"../../\\" })
+    ]
+});
+"
+`;
+
+exports[`set-proper-tsconfig-path-for-qwik-vite-plugin migration should not modify the "tsconfigFileNames" property if it exists 1`] = `
+"import { qwikVite } from '@builder.io/qwik/optimizer';
+import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import { qwikNxVite } from 'qwik-nx/plugins';
+
+export default defineConfig({
+  plugins: [
+    qwikNxVite(),
+    qwikVite({
+      client: {
+        outDir: '../../dist/apps/myapp/client',
+      },
+      ssr: {
+        outDir: '../../dist/apps/myapp/server',
+      },
+tsconfigFileNames: [\\"MOCK_VALUE\\"]
+    }),
+    tsconfigPaths({ root: '../../' }),
+  ],
+});
+"
+`;
diff --git a/packages/qwik-nx/src/migrations/set-proper-tsconfig-path-for-qwik-vite-plugin/set-proper-tsconfig-path-for-qwik-vite-plugin.spec.ts b/packages/qwik-nx/src/migrations/set-proper-tsconfig-path-for-qwik-vite-plugin/set-proper-tsconfig-path-for-qwik-vite-plugin.spec.ts
@@ -0,0 +1,59 @@
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import { Tree } from '@nx/devkit';
+
+import update from './set-proper-tsconfig-path-for-qwik-vite-plugin';
+import appGenerator from '../../generators/application/generator';
+
+describe('set-proper-tsconfig-path-for-qwik-vite-plugin migration', () => {
+  let tree: Tree;
+
+  beforeEach(async () => {
+    tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+    await appGenerator(tree, { name: 'myapp' });
+  });
+
+  it('should add "tsconfigFileNames" property', async () => {
+    const viteConfigPath = `apps/myapp/vite.config.ts`;
+    // just to ensure the file at that paths exists before updating it
+    expect(tree.exists(viteConfigPath)).toBeTruthy();
+
+    tree.write(viteConfigPath, getViteConfigSample());
+    update(tree);
+    expect(tree.read(viteConfigPath, 'utf-8')).toMatchSnapshot();
+  });
+  it('should not modify the "tsconfigFileNames" property if it exists', async () => {
+    const viteConfigPath = `apps/myapp/vite.config.ts`;
+    tree.write(viteConfigPath, getViteConfigSample(true));
+
+    update(tree);
+
+    expect(tree.read(viteConfigPath, 'utf-8')).toMatchSnapshot();
+  });
+});
+
+const getViteConfigSample = (
+  includeTSConfigFileNamesProp = false
+) => `import { qwikVite } from '@builder.io/qwik/optimizer';
+import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import { qwikNxVite } from 'qwik-nx/plugins';
+
+export default defineConfig({
+  plugins: [
+    qwikNxVite(),
+    qwikVite({
+      client: {
+        outDir: '../../dist/apps/myapp/client',
+      },
+      ssr: {
+        outDir: '../../dist/apps/myapp/server',
+      },${
+        includeTSConfigFileNamesProp
+          ? '\ntsconfigFileNames: ["MOCK_VALUE"]'
+          : ''
+      }
+    }),
+    tsconfigPaths({ root: '../../' }),
+  ],
+});
+`;
diff --git a/packages/qwik-nx/src/migrations/set-proper-tsconfig-path-for-qwik-vite-plugin/set-proper-tsconfig-path-for-qwik-vite-plugin.ts b/packages/qwik-nx/src/migrations/set-proper-tsconfig-path-for-qwik-vite-plugin/set-proper-tsconfig-path-for-qwik-vite-plugin.ts
@@ -0,0 +1,34 @@
+import { Tree, getProjects } from '@nx/devkit';
+import { isQwikNxProject } from '../../utils/migrations';
+import { normalizeViteConfigFilePathWithTree } from '@nx/vite';
+import { updateViteConfig } from '../../utils/update-vite-config';
+
+export default function update(tree: Tree) {
+  const projects = getProjects(tree);
+
+  projects.forEach((config) => {
+    if (isQwikNxProject(config)) {
+      const viteConfigPath = normalizeViteConfigFilePathWithTree(
+        tree,
+        config.root
+      );
+      if (!viteConfigPath) {
+        return;
+      }
+      const viteConfig = tree.read(viteConfigPath)!.toString();
+
+      if (viteConfig.includes('tsconfigFileNames')) {
+        // dummy check to ensure viteConfig does not have "tsconfigFileNames" property
+        // name collisions are very unlikely here so it seems fine to not run AST checks for this
+        return;
+      }
+
+      const updated = updateViteConfig(viteConfig, {
+        qwikViteConfig: {
+          tsconfigFileNames: JSON.stringify(['tsconfig.app.json']),
+        },
+      });
+      tree.write(viteConfigPath, updated);
+    }
+  });
+}
diff --git a/packages/qwik-nx/src/plugins/qwik-nx-vite.plugin.spec.ts b/packages/qwik-nx/src/plugins/qwik-nx-vite.plugin.spec.ts
diff --git a/packages/qwik-nx/src/utils/versions.ts b/packages/qwik-nx/src/utils/versions.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -23,6 +23,11 @@`
`23`	`23`	`"description": "Enabled type checking can be breaking. Adding a verbose option so that it is clear how to disable it",`
`24`	`24`	`"cli": "nx",`
`25`	`25`	`"implementation": "./src/migrations/add-verbose-skip-type-check-option-for-the-build-executor/add-verbose-skip-type-check-option-for-the-build-executor"`
	`26`	`+ },`
	`27`	`+ "set-proper-tsconfig-path-for-qwik-vite-plugin": {`
	`28`	`+ "version": "1.0.11",`
	`29`	`+ "description": "set-proper-tsconfig-path-for-qwik-vite-plugin",`
	`30`	`+ "implementation": "./src/migrations/set-proper-tsconfig-path-for-qwik-vite-plugin/set-proper-tsconfig-path-for-qwik-vite-plugin"`
`26`	`31`	`}`
`27`	`32`	`},`
`28`	`33`	`"packageJsonUpdates": {`
`@@ -262,6 +267,20 @@`
`262`	`267`	`"version": "^0.32.0"`
`263`	`268`	`}`
`264`	`269`	`}`
	`270`	`+ },`
	`271`	`+ "1.0.11": {`
	`272`	`+ "version": "1.0.11",`
	`273`	`+ "packages": {`
	`274`	`+ "@builder.io/qwik": {`
	`275`	`+ "version": "~1.2.12"`
	`276`	`+ },`
	`277`	`+ "@builder.io/qwik-city": {`
	`278`	`+ "version": "~1.2.12"`
	`279`	`+ },`
	`280`	`+ "eslint-plugin-qwik": {`
	`281`	`+ "version": "~1.2.12"`
	`282`	`+ }`
	`283`	`+ }`
`265`	`284`	`}`
`266`	`285`	`}`
`267`	`286`	`}`