fix: add working example

bin/vmd.js

@@ -1,4 +1,7 @@
 const vmd = require('../dist/index')
 
-console.log(vmd.default)
-vmd.default.createDevServer().listen(3000)
+const PORT = process.env.PORT || 3000
+
+vmd.createDevServer().listen(PORT, () => {
+    console.log(`[ Vite Multi Device running on port: ${PORT} ]`)
+})

examples/react-example/src/App.tsx

@@ -11,7 +11,7 @@ function App() {
         <img src={logo} className="App-logo" alt="logo" />
         <p>Hello Vite + React! + MultiDevice</p>
         <p>
-          <em>current device -> { window.DEVICE.desktop ? 'desktop' : 'mobile' }</em>
+          <em>current device -&gt; { window.DEVICE.desktop ? 'desktop' : 'mobile' }</em>
         </p>
         <p>
           <button onClick={() => setCount((count) => count + 1)}>

examples/react-example/src/device.d.ts

@@ -0,0 +1,7 @@
+export {}
+
+declare global {
+    interface Window {
+        DEVICE: { desktop: string; mobile: string }
+    }
+}

package.json

@@ -14,7 +14,7 @@
   },
   "homepage": "https://github.com/SasanFarrokh/vite-plugin-multi-device/tree/master/#readme",
   "scripts": {
-    "dev": "tsup src/index.ts --external fsevents --watch",
+    "dev": "tsup src/index.ts --external fsevents,express,vite --watch",
     "build": "tsup src/index.ts --external debug --external fsevents --dts",
     "lint": "eslint --fix .",
     "test": "jest",
@@ -38,5 +38,8 @@
   },
   "dependencies": {
     "express": "^4.17.1"
+  },
+  "peerDependencies": {
+    "vite": "2.x.x"
   }
 }

src/index.ts

@@ -1,2 +1,5 @@
-export * from './multiDevicePlugin'
+import multiDevice from './multiDevicePlugin'
+
 export * from './server'
+
+export default multiDevice

src/server.ts

@@ -9,16 +9,14 @@ const DEVICE_MAP: DevicesMap = {
     desktop: true,
 }
 
-export const deviceMiddleware = (devices: DevicesMap): RequestHandler => (req, res, next) => {
-    req.device = resolveDevice(req, devices);
+export const deviceMiddleware = (devicesMap: DevicesMap): RequestHandler => (req, res, next) => {
+    req.device = resolveDevice(req, devicesMap);
     next();
 }
 
-export function createDevServer (root = null, deviceMap = DEVICE_MAP): Application {
+export function devMiddleware (root = null, deviceMap = DEVICE_MAP): RequestHandler[] {
     const { createServer: createViteServer } = require('vite');
 
-    const app = express();
-
     const vite = {} as Record<string, ViteDevServer>;
 
     // const serverReady: Promise<unknown> =
@@ -36,22 +34,36 @@ export function createDevServer (root = null, deviceMap = DEVICE_MAP): Applicati
         }
     })();
 
-    app.use((req, res, next) => {
-        if (Object.keys(vite).length !== Object.keys(deviceMap).length) {
-            res.writeHead(503, { 'Retry-After': '5' });
-            return res.end(fs.readFileSync(path.resolve(__dirname, '../loading.html'), 'utf-8'));
-        }
-        next();
-    });
+    const template = fs.readFileSync('./index.html', 'utf-8');
+
+    return [
+        deviceMiddleware(deviceMap),
+        (req, res, next) => {
+            if (!req.device) {
+                return res.end('Device could not be guessed. check your configurations.')
+            }
 
-    app.use(deviceMiddleware(deviceMap))
+            if (!vite[req.device]) {
+                res.writeHead(503, { 'Retry-After': '5' });
+                return res.end(fs.readFileSync(path.resolve(__dirname, '../loading.html'), 'utf-8'));
+            }
 
-    app.use((req, res, next) => {
-        if (!req.device) {
-            return res.end('Device could not be guessed. check your configurationss.')
+            vite[req.device].middlewares.handle(req, res, next);
+        },
+        async (req, res) => {
+            const url = req.originalUrl;
+
+            // always read fresh template in dev
+            const html = await vite[req.device!].transformIndexHtml(url, template);
+
+            res.writeHead(200, { 'Content-Type': 'text/html' });
+            res.end(html);
         }
-        vite[req.device].middlewares.handle(req, res, next);
-    });
+    ]
+}
 
-    return app;
+export function createDevServer(root = null, deviceMap = DEVICE_MAP): Application {
+    const app = express()
+    app.use(devMiddleware(root, deviceMap))
+    return app
 }

src/types.d.ts

@@ -6,4 +6,8 @@ declare global {
             device?: string;
         }
     }
+
+    export interface Window {
+        DEVICE: { mobile: string; desktop: string; }
+    }
 }