fix(vite-plugin): fix unresolved import (QwikDev#6713)

* fix(vite-plugin): fix unresolved import

* fix lint

* add changeset

* revert api.json file

.changeset/plenty-glasses-notice.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/qwik': patch
+---
+
+fix dev mode on windows

packages/qwik/src/optimizer/src/plugins/plugin.ts

@@ -20,6 +20,7 @@ import type {
 } from '../types';
 import { createLinter, type QwikLinter } from './eslint-plugin';
 import type { LoadResult, OutputBundle, TransformResult } from 'rollup';
+import { isWin } from './vite-utils';
 
 const REG_CTX_NAME = ['server'];
 
@@ -502,7 +503,7 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) {
         moduleSideEffects: false,
       };
     }
-
+    const optimizer = getOptimizer();
     const path = getPath();
 
     // Requests originating from another file, or the browser
@@ -541,7 +542,9 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) {
         id = decodeURIComponent(id);
         // Support absolute paths for qrl segments, due to e.g. pnpm linking
         if (id.startsWith('/@fs/')) {
-          id = id.slice(4);
+          // remove `/@fs/` prefix for Windows
+          // remove `/@fs` prefix for Unix
+          id = id.slice(isWin(optimizer.sys.os) ? 5 : 4);
         } else {
           // Now paths could be either relative or absolute, we're not sure.
           // If the first path segment is the same as that of the importer dir, we assume it's absolute
@@ -934,7 +937,7 @@ export const manifest = ${JSON.stringify(manifest)};\n`;
 /** Convert windows backslashes to forward slashes */
 export const makeNormalizePath = (sys: OptimizerSystem) => (id: string) => {
   if (typeof id === 'string') {
-    if (sys.os === 'win32') {
+    if (isWin(sys.os)) {
       // MIT https://github.com/sindresorhus/slash/blob/main/license
       // Convert Windows backslash paths to slash paths: foo\\bar ➔ foo/bar
       const isExtendedLengthPath = /^\\\\\?\\/.test(id);

packages/qwik/src/optimizer/src/plugins/vite-dev-server.ts

@@ -12,7 +12,7 @@ import {
   makeNormalizePath,
 } from './plugin';
 import type { QwikViteDevResponse } from './vite';
-import { formatError } from './vite-utils';
+import { formatError, isWin } from './vite-utils';
 import { VITE_ERROR_OVERLAY_STYLES } from './vite-error';
 import imageDevTools from './image-size-runtime.html?raw';
 import clickToComponent from './click-to-component.html?raw';
@@ -34,7 +34,7 @@ function getOrigin(req: IncomingMessage) {
 
 // We must encode the chunk so that e.g. + doesn't get converted to space etc
 const encode = (url: string) =>
-  encodeURIComponent(url).replaceAll('%2F', '/').replaceAll('%40', '@');
+  encodeURIComponent(url).replaceAll('%2F', '/').replaceAll('%40', '@').replaceAll('%3A', ':');
 
 function createSymbolMapper(
   base: string,
@@ -74,11 +74,11 @@ function createSymbolMapper(
       return [symbolName, `${base}${symbolName.toLowerCase()}.js`];
     }
     // on windows, absolute paths don't start with a slash
-    const maybeSlash = sys.os === 'win32' ? '/' : '';
+    const maybeSlash = isWin(sys.os) ? '/' : '';
     const parentPath = normalizePath(path.dirname(parent));
     const parentFile = path.basename(parent);
     const qrlPath = parentPath.startsWith(opts.rootDir)
-      ? path.relative(opts.rootDir, parentPath)
+      ? normalizePath(path.relative(opts.rootDir, parentPath))
       : `@fs${maybeSlash}${parentPath}`;
     const qrlFile = `${encode(qrlPath)}/${symbolName.toLowerCase()}.js?_qrl_parent=${encode(parentFile)}`;
     return [symbolName, `${base}${qrlFile}`];

packages/qwik/src/optimizer/src/plugins/vite-utils.ts

@@ -145,3 +145,7 @@ export function generateCodeFrame(
   }
   return res.join('\n');
 }
+
+export function isWin(os: string): boolean {
+  return os === 'win32';
+}