diff --git a/packages/qwik/src/optimizer/core/src/snapshots/qwik_core__test__example_preserve_filenames_hooks.snap b/packages/qwik/src/optimizer/core/src/snapshots/qwik_core__test__example_preserve_filenames_hooks.snap new file mode 100644 index 00000000000..4f1f287dd1f --- /dev/null +++ b/packages/qwik/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 ( + +

console.log('warn')}>Hello Qwik

+
+ ); +}); + +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 index b3f36a6cf54..886545d6acf 100644 --- 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 ( + +

console.log('warn')}>Hello Qwik

+
+ ); +}); + +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 index bc870402a9e..87a51a4a21b 100644 --- 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 index 51f9e57f647..02dc51afc4d 100644 --- 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,7 +439,6 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) { normalizePath(path.resolve(opts.input[0], QWIK_CLIENT_MANIFEST_ID)) ); } - return { code, map: transformedModule[0].map, @@ -452,8 +446,6 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) { }; } - 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 index 74a5cca52c2..981e43f5486 100644 --- 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]); } } }