refactor(qwik dev): don't override Vite devserver

this applies to CSR projects. It makes the code simpler and along with Vite's expectations.

It is done with the transformIndexHtml hook.

Also:

- build the optimizer using vite
- compile the dev helper scripts
- make CSR projects start at /index.html. A starter is provided for this
- remove mentions of entry.dev.tsx

Author: wmertens

packages/docs/src/routes/api/qwik-optimizer/api.json

@@ -542,20 +542,6 @@
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/optimizer/src/plugins/vite.ts",
       "mdFile": "core.qwikvite.md"
     },
-    {
-      "name": "QwikViteDevResponse",
-      "id": "qwikvitedevresponse",
-      "hierarchy": [
-        {
-          "name": "QwikViteDevResponse",
-          "id": "qwikvitedevresponse"
-        }
-      ],
-      "kind": "Interface",
-      "content": "```typescript\nexport interface QwikViteDevResponse \n```\n\n\n<table><thead><tr><th>\n\nProperty\n\n\n</th><th>\n\nModifiers\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\n[\\_qwikEnvData?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nRecord&lt;string, any&gt;\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[\\_qwikRenderResolve?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n() =&gt; void\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n</tbody></table>",
-      "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/optimizer/src/plugins/vite.ts",
-      "mdFile": "core.qwikvitedevresponse.md"
-    },
     {
       "name": "QwikVitePlugin",
       "id": "qwikviteplugin",

packages/docs/src/routes/api/qwik-optimizer/index.mdx

@@ -2210,63 +2210,6 @@ any
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/optimizer/src/plugins/vite.ts)
 
-## QwikViteDevResponse
-
-```typescript
-export interface QwikViteDevResponse
-```
-
-<table><thead><tr><th>
-
-Property
-
-</th><th>
-
-Modifiers
-
-</th><th>
-
-Type
-
-</th><th>
-
-Description
-
-</th></tr></thead>
-<tbody><tr><td>
-
-[\_qwikEnvData?](#)
-
-</td><td>
-
-</td><td>
-
-Record&lt;string, any&gt;
-
-</td><td>
-
-_(Optional)_
-
-</td></tr>
-<tr><td>
-
-[\_qwikRenderResolve?](#)
-
-</td><td>
-
-</td><td>
-
-() =&gt; void
-
-</td><td>
-
-_(Optional)_
-
-</td></tr>
-</tbody></table>
-
-[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/optimizer/src/plugins/vite.ts)
-
 ## QwikVitePlugin
 
 This is the type of the "pre" Qwik Vite plugin. `qwikVite` actually returns a tuple of two plugins, but after Vite flattens them, you can find the plugin by name.

packages/docs/src/routes/docs/(qwik)/advanced/library/index.mdx

@@ -52,7 +52,6 @@ This will create a new folder called `my-library` with the following structure:
 │   │   │   └── counter.tsx
 │   │   └── logo
 │   │       └── logo.tsx
-│   ├── entry.dev.tsx
 │   ├── entry.ssr.tsx
 │   ├── index.ts
 │   └── root.tsx
@@ -126,7 +125,7 @@ export { Counter } from './components/counter/counter';
 
 ## Libraries are also Apps
 
-The library starter is also a standalone Qwik app (without routing, nor Qwik Router), this is the reason why you will find `entry.dev.tsx`, `entry.ssr.tsx` and `root.tsx` files.
+The library starter is also a standalone Qwik app (without routing, nor Qwik Router), this is the reason why you will find the `entry.ssr.tsx` and `root.tsx` files.
 
 Do not worry about them, they won't be part of the final library, but they are useful during development and testing, so you can test your components in a real Qwik app.
 

packages/docs/src/routes/docs/(qwik)/advanced/vite/index.mdx

@@ -109,12 +109,6 @@ client?: {
      * Default `src/components/app/app.tsx`
      */
     input?: string[] | string;
-    /**
-     * Entry input for client-side only development with hot-module reloading.
-     * This is for Vite development only and does not use SSR.
-     * Default `src/entry.dev.tsx`
-     */
-    devInput?: string;
     /**
      * Output directory for the client build.
      * Default `dist`

packages/qwik-router/global.d.ts

@@ -9,11 +9,6 @@ type SerializationStrategy = import('@qwik.dev/core/internal').SerializationStra
 declare var qcAsyncRequestStore: AsyncStore | undefined;
 declare var _qwikActionsMap: Map<string, ActionInternal> | undefined;
 
-/** @deprecated Will be removed in v3 */
-declare var __qwikCityNew: boolean | undefined;
-
-declare var __qwikRouterNew: boolean | undefined;
-
 type ExperimentalFeatures = import('@qwik.dev/core/optimizer').ExperimentalFeatures;
 
 declare var __EXPERIMENTAL__: {

packages/qwik/src/devtools/index.ts

@@ -1,2 +1 @@
-// @ts-expect-error compiled-string-plugin
 export { default as devtoolsJsonSRC } from './json?compiled-string';

packages/qwik/src/optimizer/global.d.ts

@@ -0,0 +1,4 @@
+declare module '*?compiled-string' {
+  const code: string;
+  export default code;
+}

packages/qwik/src/optimizer/src/index.ts

@@ -41,12 +41,7 @@ export type {
 
 export type { ExperimentalFeatures, QwikBuildMode, QwikBuildTarget } from './plugins/plugin';
 export type { QwikRollupPluginOptions } from './plugins/rollup';
-export type {
-  QwikViteDevResponse,
-  QwikVitePlugin,
-  QwikVitePluginApi,
-  QwikVitePluginOptions,
-} from './plugins/vite';
+export type { QwikVitePlugin, QwikVitePluginApi, QwikVitePluginOptions } from './plugins/vite';
 
 export type { BundleGraphAdder } from './plugins/bundle-graph';
 

packages/qwik/src/optimizer/src/plugins/click-to-component.html renamed to packages/qwik/src/optimizer/src/plugins/dev/click-to-component.js

@@ -1,68 +1,17 @@
-<style>
-  #qwik-inspector-overlay {
-    position: fixed;
-    background: rgba(24, 182, 246, 0.27);
-    pointer-events: none;
-    box-sizing: border-box;
-    border: 2px solid rgba(172, 126, 244, 0.46);
-    border-radius: 4px;
-    contain: strict;
-    cursor: pointer;
-    z-index: 999999;
-  }
-
-  #qwik-inspector-info-popup {
-    position: fixed;
-    bottom: 10px;
-    right: 10px;
-    font-family: monospace;
-    background: #000000c2;
-    color: white;
-    padding: 10px 20px;
-    border-radius: 8px;
-    box-shadow:
-      0 20px 25px -5px rgb(0 0 0 / 34%),
-      0 8px 10px -6px rgb(0 0 0 / 24%);
-    backdrop-filter: blur(4px);
-    -webkit-animation: fadeOut 0.3s 3s ease-in-out forwards;
-    animation: fadeOut 0.3s 3s ease-in-out forwards;
-    z-index: 999999;
-    contain: layout;
-  }
-
-  #qwik-inspector-info-popup p {
-    margin: 0px;
-  }
-
-  @-webkit-keyframes fadeOut {
-    0% {
-      opacity: 1;
-    }
-
-    100% {
-      opacity: 0;
-    }
-  }
-
-  @keyframes fadeOut {
-    0% {
-      opacity: 1;
-    }
-
-    100% {
-      opacity: 0;
-      visibility: hidden;
-    }
-  }
-</style>
-<div id="qwik-inspector-info-popup" aria-hidden="true">Click-to-Source</div>
-<script>
-  (function () {
+if (typeof document !== 'undefined') {
+  const register = () => {
     const inspectAttribute = 'data-qwik-inspector';
-    const hotKeys = globalThis.qwikdevtools.hotKeys;
-    const srcDir = globalThis.qwikdevtools.srcDir;
-    document.querySelector('#qwik-inspector-info-popup').textContent =
-      `Click-to-Source: ${hotKeys.join(' + ')}`;
+    const hotKeys = globalThis.__HOTKEYS__;
+    const srcDir = globalThis.__SRC_DIR__;
+    let popup = document.querySelector('#qwik-inspector-info-popup');
+    if (!popup) {
+      popup = document.createElement('div');
+      popup.id = 'qwik-inspector-info-popup';
+      popup['aria-hidden'] = 'true';
+      document.body.appendChild(popup);
+    }
+    popup.textContent = `Click-to-Source: ${hotKeys.join(' + ')}`;
+    // eslint-disable-next-line no-console
     console.debug(
       '%c🔍 Qwik Click-To-Source',
       'background: #564CE0; color: white; padding: 2px 3px; border-radius: 2px; font-size: 0.8em;',
@@ -107,7 +56,7 @@
 
     window.addEventListener(
       'blur',
-      (event) => {
+      () => {
         window.__qwik_inspector_state.pressedKeys.clear();
         updateOverlay();
       },
@@ -139,14 +88,15 @@
             const inspectUrl = target.getAttribute(inspectAttribute);
             if (inspectUrl !== 'false') {
               body.style.setProperty('cursor', 'progress');
-              qwikOpenInEditor(inspectUrl);
+              globalThis.qwikOpenInEditor(inspectUrl);
             }
           }
         }
       },
       { capture: true }
     );
 
+    // TODO use the vite dev URLs and translate in resolveId + use launch-editor from NPM
     globalThis.qwikOpenInEditor = function (path) {
       const isWindows = navigator.platform.includes('Win');
       const resolvedURL = new URL(path, isWindows ? origin : srcDir);
@@ -208,5 +158,7 @@
     }
     window.addEventListener('resize', updateOverlay);
     document.addEventListener('scroll', updateOverlay);
-  })();
-</script>
+  };
+
+  document.addEventListener('DOMContentLoaded', register);
+}

packages/qwik/src/optimizer/src/plugins/error-host.html renamed to packages/qwik/src/optimizer/src/plugins/dev/error-host.js

@@ -1,28 +1,16 @@
-<script>
-  document.addEventListener('qerror', (ev) => {
-    const ErrorOverlay = customElements.get('vite-error-overlay');
-    if (!ErrorOverlay) {
-      return;
-    }
-    const err = ev.detail.error;
-    const overlay = new ErrorOverlay(err);
-    document.body.appendChild(overlay);
-  });
-</script>
-<script>
-  /**
-   * Usage:
-   *
-   * <errored-host></errored-host>
-   */
+/**
+ * Usage:
+ *
+ * <errored-host></errored-host>
+ */
+if (typeof HTMLElement !== 'undefined') {
   class ErroredHost extends HTMLElement {
     get _root() {
       return this.shadowRoot || this;
     }
 
     constructor() {
       super();
-      const self = this;
 
       this.state = {};
       if (!this.props) {
@@ -181,4 +169,14 @@
   }
 
   customElements.define('errored-host', ErroredHost);
-</script>
+
+  document.addEventListener('qerror', (ev) => {
+    const ErrorOverlay = customElements.get('vite-error-overlay');
+    if (!ErrorOverlay) {
+      return;
+    }
+    const err = ev.detail.error;
+    const overlay = new ErrorOverlay(err);
+    document.body.appendChild(overlay);
+  });
+}