@michijs/dev-server 0.7.8 → 0.7.10

package/bin/actions/generateAssets.js

@@ -6,7 +6,25 @@ import { fileURLToPath } from "url";
 import { basename, dirname, resolve } from "path";
 import { getLocalURL } from "../utils/getLocalURL.js";
 import { assetsSizes } from "../constants.js";
-import puppeteer from "puppeteer";
+import { chromium } from "playwright-core";
+import { exec } from "child_process";
+import { getColor } from "colorthief";
+async function installPlaywright() {
+    console.log("Installing Playwright...");
+    return new Promise((resolve, reject) => {
+        const runners = ["bunx", "npx"];
+        exec(runners
+            .map((x) => `${x} playwright install chromium --with-deps`)
+            .join(" || "), (error, stdout, stderr) => {
+            if (error) {
+                console.error(`Error during Playwright installation: ${error.message}`);
+                return reject(error);
+            }
+            console.log(stdout);
+            resolve();
+        });
+    });
+}
 const generatedPath = getPath(`${config.public.path}/${config.public.assets.path}/generated`);
 const screenshotsPath = getPath(`${generatedPath}/screenshots`);
 const svgPath = resolve(getPath(dirname(fileURLToPath(import.meta.url))), "../..");
@@ -21,10 +39,8 @@ const generateFavicon = async (src, dest) => {
 };
 config.watch = false;
 config.openBrowser = false;
-const browser = await puppeteer.launch({
-    dumpio: true,
+const browser = await chromium.launch({
     headless: true,
-    product: "chrome",
 });
 const port = await new Promise(async (resolve) => {
     const { start } = await import("./start.js");
@@ -33,13 +49,20 @@ const port = await new Promise(async (resolve) => {
 async function takeScreenshots({ viewports, options, pageCallback, path, }) {
     return await Promise.all(viewports.map(async (viewport) => {
         // Create a new page
-        const page = await browser.newPage();
-        await page.goto(`${getLocalURL(port)}${path}`);
-        await page.setViewport(viewport);
+        const page = await browser.newPage({
+            reducedMotion: "reduce",
+            colorScheme: "dark",
+            viewport,
+        });
         const suffix = await pageCallback?.(page);
+        const optionsResult = options?.(viewport, suffix ? `/${suffix}` : suffix) ?? {};
+        await page.goto(`${getLocalURL(port)}${path}`, {
+            waitUntil: "load",
+        });
+        await page.waitForTimeout(3000);
         const screenshot = await page.screenshot({
             fullPage: true,
-            ...options?.(viewport, suffix ? `/${suffix}` : suffix),
+            ...optionsResult,
         });
         await page.close();
         return screenshot;
@@ -97,25 +120,32 @@ export async function generateScreenshots() {
     }))));
 }
 export async function generateAssets(callback, src) {
+    await installPlaywright();
     const { default: sharp } = await import("sharp");
     rmSync(generatedPath, { recursive: true, force: true });
     if (!existsSync(generatedPath))
         mkdirSync(screenshotsPath, { recursive: true });
     const image = sharp(src);
     const fileNameWithoutExtension = basename(src).split(".")[0];
+    const tempFileName = getPath(`${generatedPath}/${fileNameWithoutExtension}-temp.png`);
+    await image.png().toFile(tempFileName);
+    const dominantColor = await getColor(tempFileName, 1);
+    rmSync(tempFileName, { force: true });
+    const color = {
+        r: dominantColor[0],
+        g: dominantColor[1],
+        b: dominantColor[2],
+    };
+    const flattenImage = image.clone().flatten({ background: color });
     await Promise.all([
-        ...assetsSizes.webp.map((x) => {
-            return image
-                .resize(x, x)
-                .webp()
-                .toFile(getPath(`${generatedPath}/${fileNameWithoutExtension}-${x}.webp`));
-        }),
-        ...assetsSizes.png.map((x) => {
-            return image
-                .resize(x, x)
-                .png()
-                .toFile(getPath(`${generatedPath}/${fileNameWithoutExtension}-${x}.png`));
-        }),
+        ...assetsSizes.webp.flatMap((x) => [image, flattenImage].map((y) => y
+            .resize(x, x)
+            .webp()
+            .toFile(getPath(`${generatedPath}/${fileNameWithoutExtension}-${x}${y === flattenImage ? "-maskable" : ""}.webp`)))),
+        ...assetsSizes.png.flatMap((x) => [image, flattenImage].map((y) => y
+            .resize(x, x)
+            .png()
+            .toFile(getPath(`${generatedPath}/${fileNameWithoutExtension}-${x}${y === flattenImage ? "-maskable" : ""}.png`)))),
         generateFavicon(src, getPath(`${config.public.path}/favicon.ico`)),
         generateFeatureImage(src),
         generateScreenshots(),

package/bin/config/userConfig.js

@@ -2,7 +2,7 @@ import fs from "fs";
 import { buildSync as esbuild } from "esbuild";
 import { dirname } from "path";
 import { fileURLToPath } from "url";
-import { assetsSizes } from "../constants.js";
+import { defaultProductionConfig } from "../constants.js";
 let config = {};
 if (fs.existsSync("michi.config.ts")) {
     esbuild({
@@ -23,7 +23,7 @@ if (fs.existsSync("michi.config.ts")) {
     // @ts-ignore
     const michiConfig = await import("./michi.config.cjs");
     config = michiConfig.default.default({
-        assetsSizes,
+        ...defaultProductionConfig,
         environment: process.env.NODE_ENV,
     });
     config.public?.manifest?.options?.file_handlers?.forEach((fileHandler) => {

package/bin/constants.js

@@ -12,5 +12,29 @@ export const assetsSizes = {
 };
 export const defaultProductionConfig = {
     assetsSizes,
+    icons: [
+        ...assetsSizes.webp.map((x) => ({
+            src: `/assets/generated/icon-${x}.webp`,
+            sizes: `${x}x${x}`,
+            type: "image/webp",
+        })),
+        ...assetsSizes.png.map((x) => ({
+            src: `/assets/generated/icon-${x}.png`,
+            sizes: `${x}x${x}`,
+            type: "image/png",
+        })),
+        ...assetsSizes.webp.map((x) => ({
+            src: `/assets/generated/icon-${x}-maskable.webp`,
+            sizes: `${x}x${x}`,
+            type: "image/webp",
+            purpose: "maskable",
+        })),
+        ...assetsSizes.png.map((x) => ({
+            src: `/assets/generated/icon-${x}-maskable.png`,
+            sizes: `${x}x${x}`,
+            type: "image/png",
+            purpose: "maskable",
+        })),
+    ],
     environment: "PRODUCTION",
 };

package/bin/types.d.ts

@@ -1,7 +1,11 @@
 import type { BuildOptions } from "esbuild";
 import type { ImageResource, WebAppManifest } from "web-app-manifest";
 import type { assetsSizes } from "./constants.js";
-import type { Page } from "puppeteer";
+import type { Page } from "playwright-core";
+export interface Viewport {
+    width: number;
+    height: number;
+}
 export interface AssetDescriptorWeb {
     namespace: "web";
     site: string;
@@ -190,6 +194,7 @@ export interface MichiProcessType {
     };
 }
 export interface ServerConfigFactoryProps<T extends string> {
+    icons: ImageResource[];
     assetsSizes: typeof assetsSizes;
     environment: T;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@michijs/dev-server",
   "license": "MIT",
-  "version": "0.7.8",
+  "version": "0.7.10",
   "repository": {
     "type": "git",
     "url": "https://github.com/michijs/dev-server.git"
@@ -30,9 +30,9 @@
   },
   "devDependencies": {
     "@michijs/tsconfig": "0.0.4",
-    "typescript": "^5.5.3",
-    "@types/node": "22.1.0",
-    "@types/yargs": "17.0.32"
+    "@types/node": "22.4.1",
+    "@types/yargs": "17.0.33",
+    "typescript": "5.5.3"
   },
   "keywords": [
     "react",
@@ -53,12 +53,13 @@
     "node": ">=14.16"
   },
   "dependencies": {
+    "colorthief": "2.4.0",
     "@types/web-app-manifest": "1.0.8",
-    "esbuild": "0.23.0",
+    "esbuild": "0.23.1",
     "node-watch": "0.7.4",
     "open": "10.1.0",
-    "puppeteer": "22.15.0",
-    "sharp": "0.33.4",
+    "playwright-core": "1.46.1",
+    "sharp": "0.33.5",
     "yargs": "17.7.2"
   }
 }