perf: vite plugin (#1908)

QwikDev · Oct 30, 2022 · c0111f3 · c0111f3
1 parent b7f6498
commit c0111f3
Show file tree

Hide file tree

Showing 5 changed files with 169 additions and 55 deletions.
diff --git a/...k/src/optimizer/core/src/snapshots/qwik_core__test__example_preserve_filenames_hooks.snap b/...k/src/optimizer/core/src/snapshots/qwik_core__test__example_preserve_filenames_hooks.snap
@@ -0,0 +1,94 @@
+---
+source: packages/qwik/src/optimizer/core/src/test.rs
+expression: output
+---
+==INPUT==
+
+
+import { component$, useStore } from '@builder.io/qwik';
+
+export const App = component$((props: Stuff) => {
+    foo();
+    return (
+        <Cmp>
+            <p class="stuff" onClick$={() => console.log('warn')}>Hello Qwik</p>
+        </Cmp>
+    );
+});
+
+export const foo = () => console.log('foo');
+
+============================= test.tsx ==
+
+import { componentQrl } from "@builder.io/qwik";
+import { qrl } from "@builder.io/qwik";
+export const App = /*#__PURE__*/ componentQrl(qrl(()=>import("./app_component_ckepmxzlub0.js"), "App_component_ckEPmXZlub0"));
+export const foo = ()=>console.log('foo');
+
+
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\"AACA;;AAEA,OAAO,MAAM,GAAG,iBAAG,4FAOjB,CAAC;AAEH,OAAO,MAAM,GAAG,GAAG,IAAM,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC\"}")
+============================= app_component_ckepmxzlub0.js (ENTRY POINT)==
+
+import { jsx as _jsx } from "@builder.io/qwik/jsx-runtime";
+import { foo } from "./test.tsx";
+import { qrl } from "@builder.io/qwik";
+export const App_component_ckEPmXZlub0 = (props)=>{
+    foo();
+    return /*#__PURE__*/ _jsx(Cmp, {
+        children: /*#__PURE__*/ _jsx("p", {
+            class: "stuff",
+            onClick$: qrl(()=>import("./app_component_cmp_p_onclick_vuxzfutkpto.js"), "App_component_Cmp_p_onClick_vuXzfUTkpto"),
+            children: "Hello Qwik"
+        })
+    });
+};
+
+
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;yCAG8B,CAAC,KAAY,GAAK;IAC5C,GAAG,EAAE,CAAC;IACN,qBACI,KAAC,GAAG;kBACA,cAAA,KAAC,GAAC;YAAC,KAAK,EAAC,OAAO;YAAC,QAAQ;sBAA6B,YAAU;UAAI;MAClE,CACR;AACN,CAAC\"}")
+/*
+{
+  "origin": "test.tsx",
+  "name": "App_component_ckEPmXZlub0",
+  "entry": null,
+  "displayName": "App_component",
+  "hash": "ckEPmXZlub0",
+  "canonicalFilename": "app_component_ckepmxzlub0",
+  "extension": "js",
+  "parent": null,
+  "ctxKind": "function",
+  "ctxName": "component$",
+  "captures": false,
+  "loc": [
+    90,
+    252
+  ]
+}
+*/
+============================= app_component_cmp_p_onclick_vuxzfutkpto.js (ENTRY POINT)==
+
+export const App_component_Cmp_p_onClick_vuXzfUTkpto = ()=>console.log('warn');
+
+
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\"uDAOuC,IAAM,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC\"}")
+/*
+{
+  "origin": "test.tsx",
+  "name": "App_component_Cmp_p_onClick_vuXzfUTkpto",
+  "entry": null,
+  "displayName": "App_component_Cmp_p_onClick",
+  "hash": "vuXzfUTkpto",
+  "canonicalFilename": "app_component_cmp_p_onclick_vuxzfutkpto",
+  "extension": "js",
+  "parent": "App_component_ckEPmXZlub0",
+  "ctxKind": "event",
+  "ctxName": "onClick$",
+  "captures": false,
+  "loc": [
+    187,
+    212
+  ]
+}
+*/
+== DIAGNOSTICS ==
+
+[]
diff --git a/packages/qwik/src/optimizer/core/src/test.rs b/packages/qwik/src/optimizer/core/src/test.rs
@@ -1728,6 +1728,33 @@ export const App = component$((props: Stuff) => {
     });
 }
 
+#[test]
+fn example_preserve_filenames_hooks() {
+    test_input!(TestInput {
+        code: r#"
+import { component$, useStore } from '@builder.io/qwik';
+
+export const App = component$((props: Stuff) => {
+    foo();
+    return (
+        <Cmp>
+            <p class="stuff" onClick$={() => console.log('warn')}>Hello Qwik</p>
+        </Cmp>
+    );
+});
+
+export const foo = () => console.log('foo');
+"#
+        .to_string(),
+        entry_strategy: EntryStrategy::Hook,
+        transpile_ts: true,
+        transpile_jsx: true,
+        preserve_filenames: true,
+        explicit_extensions: true,
+        ..TestInput::default()
+    });
+}
+
 #[test]
 fn example_getter_generation() {
     test_input!(TestInput {

diff --git a/packages/qwik/src/optimizer/src/optimizer.ts b/packages/qwik/src/optimizer/src/optimizer.ts
@@ -74,6 +74,7 @@ const transformFsAsync = async (
       sourceMaps: fsOpts.sourceMaps,
       transpileTs: fsOpts.transpileTs,
       transpileJsx: fsOpts.transpileJsx,
+      explicitExtensions: fsOpts.explicitExtensions,
       preserveFilenames: fsOpts.preserveFilenames,
       mode: fsOpts.mode,
       scope: fsOpts.scope,

diff --git a/packages/qwik/src/optimizer/src/plugins/plugin.ts b/packages/qwik/src/optimizer/src/plugins/plugin.ts
@@ -15,6 +15,7 @@ import type {
   TransformOutput,
 } from '../types';
 import { createLinter, QwikLinter } from './eslint-plugin';
+import type { PluginContext } from 'rollup';
 
 export interface QwikPackages {
   id: string;
@@ -309,6 +310,7 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) {
         transpileTs: true,
         transpileJsx: true,
         explicitExtensions: true,
+        preserveFilenames: true,
         mode,
         scope: opts.scope ? opts.scope : undefined,
       };
@@ -327,15 +329,17 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) {
   };
 
   const resolveId = async (
-    _ctx: any,
+    _ctx: PluginContext,
     id: string,
     importer: string | undefined,
     _resolveIdOpts?: { ssr?: boolean }
   ) => {
-    if (id.startsWith('\0') || id.startsWith('/@fs/')) {
+    if (id.startsWith('\0')) {
+      return;
+    }
+    if (id.startsWith('/@fs')) {
       return;
     }
-    const path = getPath();
     if (opts.target === 'lib' && id.startsWith(QWIK_CORE_ID)) {
       return {
         external: true,
@@ -346,7 +350,7 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) {
     if (opts.resolveQwikBuild && id === QWIK_BUILD_ID) {
       log(`resolveId()`, 'Resolved', QWIK_BUILD_ID);
       return {
-        id: normalizePath(path.resolve(opts.rootDir, QWIK_BUILD_ID)),
+        id: normalizePath(getPath().resolve(opts.rootDir, QWIK_BUILD_ID)),
         moduleSideEffects: false,
       };
     }
@@ -361,7 +365,7 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) {
         };
       }
       return {
-        id: normalizePath(path.resolve(opts.input[0], QWIK_CLIENT_MANIFEST_ID)),
+        id: normalizePath(getPath().resolve(opts.input[0], QWIK_CLIENT_MANIFEST_ID)),
         moduleSideEffects: false,
       };
     }
@@ -371,36 +375,31 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) {
       return;
     }
 
-    const parsedId = parseId(id);
-    let importeePathId = normalizePath(parsedId.pathId);
-
     if (importer) {
-      importer = normalizePath(importer);
-      log(`resolveId("${importeePathId}", "${importer}")`);
-      const parsedImporterId = parseId(importer);
-      const dir = path.dirname(parsedImporterId.pathId);
-      if (parsedImporterId.pathId.endsWith('.html') && !importeePathId.endsWith('.html')) {
-        importeePathId = normalizePath(path.join(dir, importeePathId));
-      } else {
-        importeePathId = normalizePath(path.resolve(dir, importeePathId));
-      }
-    } else {
-      log(`resolveId("${importeePathId}"), No importer`);
-    }
-
-    const tryImportPathIds = [forceJSExtension(importeePathId, path.extname(importeePathId))];
-    for (const tryId of tryImportPathIds) {
-      const transformedOutput = transformedOutputs.get(tryId);
-      if (transformedOutput) {
-        log(`resolveId() Resolved ${tryId} from transformedOutputs`);
-        return {
-          id: tryId + parsedId.query,
-          moduleSideEffects: false,
-        };
+      const parsedId = parseId(id);
+      let importeePathId = normalizePath(parsedId.pathId);
+      const path = getPath();
+      const ext = path.extname(importeePathId);
+      if (RESOLVE_EXTS[ext]) {
+        importer = normalizePath(importer);
+        log(`resolveId("${importeePathId}", "${importer}")`);
+        const parsedImporterId = parseId(importer);
+        const dir = path.dirname(parsedImporterId.pathId);
+        if (parsedImporterId.pathId.endsWith('.html') && !importeePathId.endsWith('.html')) {
+          importeePathId = normalizePath(path.join(dir, importeePathId));
+        } else {
+          importeePathId = normalizePath(path.resolve(dir, importeePathId));
+        }
+        const transformedOutput = transformedOutputs.get(importeePathId);
+        if (transformedOutput) {
+          log(`resolveId() Resolved ${importeePathId} from transformedOutputs`);
+          return {
+            id: importeePathId + parsedId.query,
+            moduleSideEffects: false,
+          };
+        }
       }
-      log(`resolveId() id ${tryId} not found in transformedOutputs`);
     }
-
     return null;
   };
 
@@ -426,10 +425,6 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) {
     const parsedId = parseId(id);
     const path = getPath();
     id = normalizePath(parsedId.pathId);
-    if (opts.forceFullBuild) {
-      // On full build, lets normalize the ID
-      id = forceJSExtension(id, path.extname(id));
-    }
 
     const transformedModule = transformedOutputs.get(id);
     if (transformedModule) {
@@ -444,16 +439,13 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) {
           normalizePath(path.resolve(opts.input[0], QWIK_CLIENT_MANIFEST_ID))
         );
       }
-
       return {
         code,
         map: transformedModule[0].map,
         moduleSideEffects: false,
       };
     }
 
-    log(`load()`, 'Not Found', id);
-
     return null;
   };
 
@@ -506,6 +498,7 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) {
         transpileTs: true,
         transpileJsx: true,
         explicitExtensions: true,
+        preserveFilenames: true,
         srcDir,
         mode,
         scope: opts.scope ? opts.scope : undefined,
@@ -681,21 +674,20 @@ export function parseId(originalId: string) {
   };
 }
 
-function forceJSExtension(id: string, ext: string) {
-  if (ext === '') {
-    return id + '.js';
-  }
-  if (TRANSFORM_EXTS[ext]) {
-    return removeExtension(id) + '.js';
-  }
-  return id;
-}
-
-function removeExtension(id: string) {
-  return id.split('.').slice(0, -1).join('.');
-}
-
-const TRANSFORM_EXTS: { [ext: string]: boolean } = { '.jsx': true, '.ts': true, '.tsx': true };
+const TRANSFORM_EXTS: { [ext: string]: boolean } = {
+  '.jsx': true,
+  '.ts': true,
+  '.tsx': true,
+};
+
+const RESOLVE_EXTS: { [ext: string]: boolean } = {
+  '.tsx': true,
+  '.ts': true,
+  '.jsx': true,
+  '.js': true,
+  '.mjs': true,
+  '.cjs': true,
+};
 
 const TRANSFORM_REGEX = /\.qwik\.(m|c)?js$/;
 

diff --git a/packages/qwik/src/server/prefetch-strategy.ts b/packages/qwik/src/server/prefetch-strategy.ts
@@ -68,7 +68,7 @@ function getAutoPrefetch(
       const qrlSymbolName = obj.getHash();
       const resolvedSymbol = mapper[qrlSymbolName];
       if (resolvedSymbol) {
-        addBundle(manifest, urls, prefetchResources, buildBase, resolvedSymbol[0]);
+        addBundle(manifest, urls, prefetchResources, buildBase, resolvedSymbol[1]);
       }
     }
   }