restructoring, updating readme

README.md

@@ -2,65 +2,73 @@
 
 Version 2! All new, all shiny, all vite!
 Allows for HMR and other features, tested directly against your production publisher with real content. This package is intended to develop directly against authored content instead of dummy content. All features like HMR are first class citizins thanks to the power of vite.
-This package requires as a peer-dependency 'vite'.
+This package requires vite as a peer-dependency.
 At the moment glob imports in sass are not supported. So make sure that `@import './**/*.scss'` is replaced with proper imports referencing the files directly.
 
-AEM-Optimized supports a config-file at the project-root, aka. ui.frontend.
+AEM-Optimized utilizes the vite.config.js, so all configurations can be made in one file!
 
 ## How to use
 
 1. install package: npm i -D aem-optimized
-2. create a new config-file named `aemoptimized.config.cjs` and define `host`, `clientlibs`,`port`. `headers` are optional.
+2. create a new config-file named `vite.config.js` and define a aemOptimized object with the following attributes: `host`, `clientlibs`,`port`, `headers`.
    The host-entry can be any target, so even your production environment's publisher.
-3. Create a vite.config.js and adjust accordingly. A good start is the sample config listed below.
-4. run script: npx aem-optimized
-5. Change some css values, save and watch the changes happen without a page refresh
+3. run script: npx aem-optimized
+4. Change some css values, save and watch the changes happen without a page refresh
 
 ## Sample Configs
 
-```
-// aemoptimized.config.cjs
-module.exports = {
-  host: 'http://localhost:4502',
-  headers: {
-    authorization: 'Basic YWRtaW46YWRtaW4=',
-  },
-  clientlibs: ['clientlib-site'],
-  port: 3001,
-  entry: '/src/main/webpack/site/main.js'
-};
-```
-
 ```
 // vite.config.js
 import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
 import autoprefixer from "autoprefixer";
-
 const path = require("path");
 
 const headers = {
     authorization: 'Basic YWRtaW46YWRtaW4=',
 };
+const port = 3000;
+const entry = "/src/main/webpack/site/main.js";
 const target = "http://localhost:4502";
+const clientlibs = ["clientlib-site"];
+const proxies = generateProxies(clientlibs, entry);
 export default defineConfig({
+    aemOptimized: {
+        host: target,
+        headers: {
+            ...headers,
+        },
+        clientlibs,
+        entry,
+        port,
+    },
     server: {
         proxy: {
-            "^((?!clientlib-site.*.(js|css)|html|main.js|@|/src/|node_modules).)*$": {
-                target,
-                changeOrigin: true,
-                secure: false,
-                headers: {
-                    ...headers,
-                },
-            },
+            ...proxies,
         },
     },
-    plugins: [react()],
     css: {
         postcss: {
             plugins: [autoprefixer],
         },
     },
 });
+
+function generateProxies(clibs, entryPoint) {
+    const libs = clibs.map((lib) => [
+        `^((?!${lib}.*.(js|css)|html|${entryPoint.split("/").pop()}|@|/${
+            entry.split("/")[1]
+        }/|node_modules).)*$`,
+        {
+            target,
+            changeOrigin: true,
+            secure: true,
+            headers: {
+                ...headers,
+            },
+        },
+    ]);
+
+    return Object.fromEntries(libs);
+}
+
 ```

server.js

@@ -7,7 +7,7 @@ const vite = require('vite');
 const { createServer } = vite;
 const { JSDOM } = jsdom;
 
-async function init(url, host, clientlib, entry, headers) {
+async function init(url, host, clientlibs, entry, headers) {
   // fetch with basic auth admin:admin
   let page;
   try {
@@ -24,17 +24,21 @@ async function init(url, host, clientlib, entry, headers) {
   const dom = new JSDOM(page);
   [...dom.window.document.querySelectorAll('script')].forEach((script) => {
     if (script.src.startsWith('/etc.clientlibs')) {
-      if (script.src.includes(clientlib)) {
-        script.remove();
+      for (const clientlib in clientlibs) {
+        if (script.src.includes(clientlib)) {
+          script.remove();
+        }
       }
       script.src = `${host}${script.src}`;
     }
   });
 
   [...dom.window.document.querySelectorAll('link')].forEach((link) => {
     if (link.href.startsWith('/etc.clientlibs')) {
-      if (link.href.includes(clientlib)) {
-        link.remove();
+      for (const clientlib in clientlibs) {
+        if (link.href.includes(clientlib)) {
+          link.remove();
+        }
       }
       link.href = `${host}${link.href}`;
     }
@@ -69,7 +73,7 @@ async function createMyServer(host, clientlibs, port, entry, headers) {
   app.use(async function (req, res, next) {
     const url = req.originalUrl;
     if (req.url === '/' || req.url.endsWith('.html')) {
-      const page = await init(req.url, host, clientlibs[0], entry, headers);
+      const page = await init(req.url, host, clientlibs, entry, headers);
       const template = await vite.transformIndexHtml(url, page);
 
       res.send(template.replace('<!-- APP -->', page));