publish 1.2.3

Author: Idrinth

README.md

@@ -41,6 +41,7 @@ interface Configuration {
     minifyPages?: boolean,
     appendPageChunk?: boolean,
     preLoadCSS?: boolean,
+    preloadStartDelay?: number,
   },
   fileFinder?: {
     fileName?: string,

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@idrinth/react-file-based-routes",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "repository": "https://github.com/idrinth/react-file-based-routes",
   "description": "A simple file based routing library, that does not force itself on you.",
   "license": "MIT",
@@ -25,6 +25,7 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
+    "@putout/minify": "^3.8.5",
     "astring": "^1.8.6",
     "estree-walker": "^3.0.3",
     "fast-glob": "^3.3.2",

package.json

@@ -27,6 +27,7 @@ interface FileBuilder {
   appendPageChunk: boolean,
   preLoadCSS: boolean,
   preLoadJS: boolean,
+  preloadStartDelay: number,
 }
 interface FileFinder {
   fileName: string,
@@ -80,6 +81,7 @@ export default (cwd: string, cliArguments: string[]): Configuration => {
       appendPageChunk: true,
       preLoadCSS: true,
       preLoadJS: true,
+      preloadStartDelay: 5000,
     },
   };
   const configFile = cwd + '/.idrinth-react-file-based-routes.json';

src/configuration.ts

@@ -5,6 +5,9 @@ import {
 import minifier from 'html-minifier';
 import {Configuration} from './configuration.js';
 import writeIndexHtml from "./write-index-html.js";
+import {
+  minify,
+} from '@putout/minify';
 
 export default (cwd: string, configuration: Configuration) => {
   const template = (() => {
@@ -33,21 +36,62 @@ export default (cwd: string, configuration: Configuration) => {
       }
     }
   }
+  const preload = (() => {
+    const func = `const header = document.getElementsByTagName('header')[0];
+        const append = (type, as, file) => {
+          const prefetch = document.createElement('link');
+          prefetch.setAttribute('href', '/assets/' + file);
+          prefetch.setAttribute('type', type);
+          prefetch.setAttribute('rel', 'preload');
+          prefetch.setAttribute('as', as);
+          header.appendChild(prefetch);
+        };`;
+    if (jsFiles.length > 0 && cssFiles.length > 0) {
+      const script = `window.setTimeout(() => {
+        ${ func }
+        for (const css of ${JSON.stringify(cssFiles)}) {
+          append('text/css', 'style', css);
+        }
+        for (const js of ${JSON.stringify(jsFiles)}) {
+          append('application/javascript', 'script', js);
+        }
+      }, ${ configuration.fileBuilder.preloadStartDelay });`;
+      return `<script type="text/javascript">${ minify(script) }</script>`;
+    }
+    if (cssFiles.length > 0) {
+      const script = `window.setTimeout(() => {
+        ${ func }
+        for (const css of ${JSON.stringify(cssFiles)}) {
+          append('text/css', 'style', css);
+        }
+      }, ${ configuration.fileBuilder.preloadStartDelay });`;
+      return `<script type="text/javascript">${ minify(script) }</script>`;
+    }
+    if (jsFiles.length > 0) {
+      const script = `window.setTimeout(() => {
+        ${ func }
+        for (const js of ${JSON.stringify(jsFiles)}) {
+          append('application/javascript', 'script', js);
+        }
+      }, ${ configuration.fileBuilder.preloadStartDelay });`;
+      return `<script type="text/javascript">${ minify(script) }</script>`;
+    }
+    return '';
+  })();
   for (const file of files) {
     if (file.endsWith('.js') && file.startsWith(fileName)) {
       const content = readFileSync(cwd + '/' + configuration.fileFinder.distJSRoot + '/' + file, 'utf8',);
       const res = matcher.exec(content);
       if (res && res[1]) {
         const pageName = res[1].replace(/\/$/u, '');
-        console.log(pageName);
         if (typeof configuration.routes.overridePathMappings[pageName] === 'string') {
           if (configuration.routes.overridePathMappings[pageName] !== '*') {
-            writeIndexHtml(cwd, file, configuration.routes.overridePathMappings[pageName], template, configuration, cssFiles, jsFiles);
+            writeIndexHtml(cwd, file, configuration.routes.overridePathMappings[pageName], template, configuration, preload);
           } else {
-            writeIndexHtml(cwd, file, '', template, configuration, cssFiles, jsFiles);
+            writeIndexHtml(cwd, file, '', template, configuration, preload);
           }
         } else {
-          writeIndexHtml(cwd, file, `/${ pageName }/`, template, configuration, cssFiles, jsFiles);
+          writeIndexHtml(cwd, file, `/${ pageName }/`, template, configuration, preload);
         }
       }
     }

src/generate-folders.ts

@@ -1,30 +1,18 @@
 import {Configuration} from './configuration.js';
 import {mkdirSync, writeFileSync} from 'fs';
 
-export default (cwd: string, jsFile: string, path: string, template: string, configuration: Configuration, cssPreload: string[], jsPreload: string[]) => {
+export default (cwd: string, jsFile: string, path: string, template: string, configuration: Configuration, preload: string) => {
   if (!configuration.fileBuilder.buildIndex) {
     return;
   }
-  let preload = '';
-  for (const css of cssPreload) {
-    preload += `<link rel="preload" href="/assets/${ css }" as="style" type="text/css"/>`
-  }
-  for (const js of jsPreload) {
-    if (! configuration.fileBuilder.appendPageChunk || js !== jsFile) {
-      preload += `<link rel="preload" href="/assets/${js}" as="script" type="text/javascript"/>`;
-    }
-  }
+
   const target = cwd + '/dist' + path + 'index.html';
   mkdirSync('./dist' + path, {recursive: true},);
   if (! configuration.fileBuilder.appendPageChunk) {
-    if (preload.length > 0) {
-      writeFileSync(
-        target,
-        template.replace(/<\/head>/, `${ preload }</head>`),
-      );
-      return;
-    }
-    writeFileSync(target, template,);
+    writeFileSync(
+      target,
+      template.replace(/<\/head>/, `${ preload }</head>`),
+    );
     return;
   }
   writeFileSync(

src/write-index-html.ts

@@ -9,9 +9,14 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "allowSyntheticDefaultImports": true,
-    "moduleResolution": "NodeNext"
+    "moduleResolution": "NodeNext",
+    "typeRoots": [
+      "typings",
+      "node_modules/@types"
+    ],
   },
   "include": [
-    "src/**/*.ts"
+    "src/**/*.ts",
+    "typings/*.d.ts"
   ]
 }

tsconfig.json

@@ -0,0 +1,3 @@
+declare module '@putout/minify' {
+  export function minify(code: string): string;
+}