@degreesign/webapp 1.7.1 → 1.7.3

package/README.md

@@ -92,6 +92,10 @@ module.exports = build({
   }],
   htmlCommonElements: [],
   obfuscateON: false,
+  preconnectLinks: [
+    "https://api.example.com",
+    { href: "https://cdn.example.com", crossorigin: true },
+  ],
   srcDir: "src",
   assetsDir: "assets",
   commonDir: "code",
@@ -142,6 +146,7 @@ module.exports = build({
 - **Environment Variables**: Use `.env` to securely store sensitive data.
 - **Development Server**: Runs on `port: 3210` by default.
 - **PWA Support**: Customise `app_icon`, `fav_icon`, and `orientation` for a native-like experience.
+- **Preconnect**: `preconnectLinks` adds `<link rel="preconnect">` entries (e.g. your server base URL) to the page head, so the browser starts DNS/TCP/TLS for those origins early. Each entry is a URL string or an object with `href` and optional `crossorigin`. `crossorigin` is on by default; set `crossorigin: false` per link to disable.
 - **SEO Optimisation**: Set `websiteTitle`, `websiteDescription`, and `coverImage` for better search visibility.
 - **Pages**: Add all pages to `pagesList`.
 

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 import { build } from "./src/main";
-import { Page } from "./src/types";
+import { Page, PreconnectLink } from "./src/types";
 import { readData, readJSON, writeData, writeJSON } from "./src/utils";
-export { build, writeData, writeJSON, readData, readJSON, Page, };
+export { build, writeData, writeJSON, readData, readJSON, Page, PreconnectLink, };

package/dist/src/types.d.ts

@@ -4,6 +4,12 @@ import CssMinimizerPlugin from "css-minimizer-webpack-plugin";
 export interface StringObj {
     [key: string]: string;
 }
+export interface PreconnectLink {
+    /** Server base URL to preconnect to */
+    href: string;
+    /** Enable CORS for the connection; defaults to true */
+    crossorigin?: boolean;
+}
 export interface Page {
     /** URI of the page */
     uri: string;
@@ -135,6 +141,8 @@ export interface ConfigWebApp extends ConfigBase {
     updateServiceWorker?: boolean;
     /** Online reference file */
     onlineIndicatorFile?: string;
+    /** Server base URLs for <link rel="preconnect">, CORS on by default (optional) */
+    preconnectLinks?: (string | PreconnectLink)[];
 }
 export interface ConfigServer extends ConfigBase {
     /** Server Files list */

package/dist/src/utils.d.ts

@@ -1,4 +1,4 @@
-import { MetaTags, MetaTagsInput } from "./types";
+import { MetaTags, MetaTagsInput, PreconnectLink } from "./types";
 declare const 
 /** Write to files */
 writeData: (file: string, code: string) => boolean, 
@@ -7,11 +7,12 @@ writeJSON: (file: string, code: any) => boolean,
 /** Read files */
 readData: (file: string, internal?: boolean) => string, 
 /** Read JSON files */
-readJSON: (file: string, internal?: boolean) => any, metaTags: ({ author, websiteDescription, websiteName, websiteTitle, coverImageLink, coverImageDescription, publishedTime, websiteLink, dataString, theme_color, twitterUserName, appIconFile, noindex, language, isHome, keywords, }: MetaTagsInput) => MetaTags, linkTags: ({ favIconFile, timeNow, coverImageLink, canonicalURL, }: {
+readJSON: (file: string, internal?: boolean) => any, metaTags: ({ author, websiteDescription, websiteName, websiteTitle, coverImageLink, coverImageDescription, publishedTime, websiteLink, dataString, theme_color, twitterUserName, appIconFile, noindex, language, isHome, keywords, }: MetaTagsInput) => MetaTags, linkTags: ({ favIconFile, timeNow, coverImageLink, canonicalURL, preconnectLinks, }: {
     coverImageLink: string;
     favIconFile: string;
     timeNow: number;
     canonicalURL: string;
+    preconnectLinks?: (string | PreconnectLink)[];
 }) => string, 
 /** Check for PHP tag */
 isPHPTag: (code: string) => boolean;

package/dist/src/utils.js

@@ -260,11 +260,18 @@ readJSON = (file, internal) => {
         // Theme
         "theme-color": theme_color,
     };
-}, linkTags = ({ favIconFile, timeNow, coverImageLink, canonicalURL, }) => `
+}, linkTags = ({ favIconFile, timeNow, coverImageLink, canonicalURL, preconnectLinks, }) => `
         <link rel="icon" href="${favIconFile}" type="image/x-icon">
         <link rel="manifest" href="/app.json?v=${timeNow}">
         <link rel="image_src" href="${coverImageLink}">
-        <link rel="canonical" href="${canonicalURL}">\n`, 
+        <link rel="canonical" href="${canonicalURL}">
+        ${preconnectLinks?.map(link => {
+    const { href, crossorigin = true } = typeof link == `string` ? { href: link }
+        : link;
+    return `<link rel="preconnect" href="${href}"${crossorigin ? ` crossorigin` : ``}>`;
+})?.join(`
+        `) || ``}
+`, 
 /** Check for PHP tag */
 isPHPTag = (code) => code?.includes(`<?php`);
 exports.writeData = writeData;

package/dist/src/web.js

@@ -46,7 +46,7 @@ const SitemapPlugin = __importStar(require("sitemap-webpack-plugin"));
 const HtmlInlineCssWebpackPlugin = __importStar(require("html-inline-css-webpack-plugin"));
 const utils_1 = require("./utils");
 const webConfig = (params) => {
-    const { srcDir = `src`, productionDir = `public_html`, appShortName = `WebApp`, twitterUserName = `degreesign`, websiteName = `DegreeSign WebApp`, websiteDomain = `degreesign.com`, publishedTime = `2025-01-01T00:00:00+00:00`, author = `DegreeSign Team`, websiteTitle = `progressive webapp`, websiteDescription = `Webpack progressive web app`, coverImage = `degreesign_screenshot.webp`, coverImageDescription = `Screenshot of website`, background_color = `#fff`, theme_color = `#000`, appIcon = `app_icon.png`, appIconMaskable = `app_icon_maskable.png`, fav_icon = `favicon.ico`, orientation = `portrait`, pagesList = [], htmlCommonElements = [], assetsDir = `assets`, commonDir = `common`, imagesDir = `images`, pagesDir = `pages`, pageHome = `home`, htaccessCustom = ``, startURI = ``, language = `en_GB`, cssDiscardUnused = false, updateServiceWorker = false, onlineIndicatorFile = `https://degreesign.com/assets/images/Degree_Sign_Logo_2022.svg`, } = params || {};
+    const { srcDir = `src`, productionDir = `public_html`, appShortName = `WebApp`, twitterUserName = `degreesign`, websiteName = `DegreeSign WebApp`, websiteDomain = `degreesign.com`, publishedTime = `2025-01-01T00:00:00+00:00`, author = `DegreeSign Team`, websiteTitle = `progressive webapp`, websiteDescription = `Webpack progressive web app`, coverImage = `degreesign_screenshot.webp`, coverImageDescription = `Screenshot of website`, background_color = `#fff`, theme_color = `#000`, appIcon = `app_icon.png`, appIconMaskable = `app_icon_maskable.png`, fav_icon = `favicon.ico`, orientation = `portrait`, pagesList = [], htmlCommonElements = [], assetsDir = `assets`, commonDir = `common`, imagesDir = `images`, pagesDir = `pages`, pageHome = `home`, htaccessCustom = ``, startURI = ``, language = `en_GB`, cssDiscardUnused = false, updateServiceWorker = false, onlineIndicatorFile = `https://degreesign.com/assets/images/Degree_Sign_Logo_2022.svg`, preconnectLinks = [], } = params || {};
     const latestUpdates = (0, utils_1.readJSON)(`./updateTimes.json`) || {}, updateTimes = () => (0, utils_1.writeJSON)(`./updateTimes.json`, latestUpdates), dataString = new Date().toISOString(), timeNow = Date.now(), websiteLink = `https://${websiteDomain || `degreesign.com`}`, 
     /** Update Image URL */
     getImageURI = (image, full) => 
@@ -100,6 +100,7 @@ const webConfig = (params) => {
                     <!-- Last Published: ${new Date().toUTCString()}+0000 (Coordinated Universal Time) -->
                     <html lang="en" prefix="og: https://ogp.me/">
                     <head>
+                        <meta charset="utf-8">
                         <style type="text/css">nav,main,footer{width:100%;display:flex !important;flex-direction:column;align-items:center;}</style>
                         ${links || ``}
                         ${headerHTML || ``}
@@ -234,6 +235,7 @@ Options -Indexes
                 coverImageLink: coverImageLinkNew,
                 canonicalURL: pageData.canonicalURL
                     || `https://${websiteDomain}${isHome ? `` : `/${fileName}`}`,
+                preconnectLinks,
             }),
             pageBody: (0, utils_1.readData)(`./${srcDir}/${pagesDir}/${fileName}/${fileName}.html`),
             filename: isHome ? `index.html` : fileName,

package/package.json

@@ -1,7 +1,7 @@
 {
   "license": "MIT",
   "name": "@degreesign/webapp",
-  "version": "1.7.1",
+  "version": "1.7.3",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",