@michijs/dev-server 0.4.3 → 0.5.0

package/bin/types.d.ts

@@ -1,11 +1,13 @@
-import { BuildOptions } from 'esbuild';
-import type { WebAppManifest } from 'web-app-manifest';
+import type { BuildOptions } from "esbuild";
+import type { WebAppManifest } from "web-app-manifest";
+import type { assetsSizes } from "./constants.js";
+import type { Page } from "puppeteer";
 export interface AssetDescriptorWeb {
-    namespace: 'web';
+    namespace: "web";
     site: string;
 }
 export interface AssetDescriptorAndroid {
-    namespace: 'android_app';
+    namespace: "android_app";
     package_name: string;
     /**
      * The sha256_cert_fingerprints field is a list of colon-separated hex strings.
@@ -13,7 +15,7 @@ export interface AssetDescriptorAndroid {
     sha256_cert_fingerprints: string[];
 }
 export interface AssetDescriptorIos {
-    namespace: 'ios_app';
+    namespace: "ios_app";
     appid: string;
 }
 export type AssetDescriptor = AssetDescriptorWeb | AssetDescriptorAndroid | AssetDescriptorIos;
@@ -28,6 +30,12 @@ export interface WellKnown {
     relation: string[];
     target: AssetDescriptor;
 }
+export interface PageCallback<R = string | void> {
+    /**
+     * @returns A folder name suffix
+     */
+    (page: Page): Promise<R> | R;
+}
 export interface PublicOptions {
     /**
      * A URI with the path component /.well-known/assetlinks.json is used by the AssetLinks protocol to identify one or more digital assets (such as web sites or mobile apps) that are related to the hosting web site in some fashion.
@@ -49,6 +57,52 @@ export interface PublicOptions {
      * @default true if environment is PRODUCTION
      */
     minify?: boolean;
+    assets?: {
+        /**
+         * Assets folder path
+         * @default assets
+         */
+        path?: string;
+        /**
+         * Screenshots to take
+         */
+        screenshots?: {
+            /**
+             * Paths to use.
+             * @example ["/demo"]
+             */
+            paths?: string[];
+            /**
+             * An array of callbacks used to manipulate the page. Each callback returns the folder name suffix
+             * @example
+             * [
+             *  async (page) => {
+             *   await page.emulateMediaFeatures([{ name: 'prefers-color-scheme', value: 'dark' }]);
+             *   return 'dark'
+             *  }
+             * ]
+             */
+            pageCallbacks?: PageCallback[];
+        };
+        /**
+         * Feature image to take
+         */
+        featureImage?: {
+            /**
+             * Path to use.
+             * @example "/demo"
+             */
+            path?: string;
+            /**
+             * A callback used to manipulate the page.
+             * @example
+             * async (page) => {
+             *  await page.emulateMediaFeatures([{ name: 'prefers-color-scheme', value: 'dark' }]);
+             * }
+             */
+            pageCallback?: PageCallback<void>;
+        };
+    };
     /**
      * Is a JSON document that contains startup parameters and application defaults for when a web application is launched.
      *
@@ -67,6 +121,11 @@ export interface PublicOptions {
     };
 }
 export interface Config {
+    /**
+     * If the server should watch for changes on the folders
+     * @default true
+     */
+    watch?: boolean;
     /**
      * Port to run dev server on
      * @default 3000
@@ -87,7 +146,7 @@ export interface Config {
     /** Documentation: https://esbuild.github.io/plugins/#build-options */
     esbuildOptions?: BuildOptions;
 }
-export type DefaultEnvironment = 'PRODUCTION' | 'DISTRIBUTION' | 'DEVELOPMENT';
+export type DefaultEnvironment = "PRODUCTION" | "DISTRIBUTION" | "DEVELOPMENT";
 export interface ServerConfig extends Config {
     /**
      * Allows to add environment variables
@@ -103,4 +162,9 @@ export interface MichiProcessType {
         NODE_ENV: DefaultEnvironment;
     };
 }
-export type ServerConfigFactory<T extends string = DefaultEnvironment> = (environment: T) => ServerConfig;
+interface ServerConfigFactoryProps<T extends string> {
+    assetsSizes: typeof assetsSizes;
+    environment: T;
+}
+export type ServerConfigFactory<T extends string = DefaultEnvironment> = (props: ServerConfigFactoryProps<T>) => ServerConfig;
+export {};

package/bin/utils/copy.js

@@ -1,6 +1,6 @@
-import fs from 'fs';
-import { getPath } from './getPath.js';
-import { transformers } from './transformers.js';
+import fs from "fs";
+import { getPath } from "./getPath.js";
+import { transformers } from "./transformers.js";
 export function copyFile(src, fileName, dest, omit) {
     if (!omit?.find((x) => x.test(fileName))) {
         const srcPath = getPath(`${src}/${fileName}`);
@@ -13,7 +13,7 @@ export function copyFile(src, fileName, dest, omit) {
         else {
             const fileTransformer = transformers?.find((x) => x.fileRegex.test(fileName));
             if (fileTransformer) {
-                const srcFileContent = fs.readFileSync(srcPath, { encoding: 'utf-8' });
+                const srcFileContent = fs.readFileSync(srcPath, { encoding: "utf-8" });
                 const finalDestPath = fileTransformer.pathTransformer?.(destPath) ?? destPath;
                 const transformedFile = fileTransformer.transformer(srcFileContent);
                 fs.writeFileSync(finalDestPath, transformedFile);

package/bin/utils/feature-image-template.svg

@@ -0,0 +1,62 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="500">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+  </style>
+  <!-- Background color -->
+  <rect width="100%" height="100%" fill="rgb(106,8,12)" />
+
+  <!-- Background image with blurred logo -->
+  <image x="-295" y="90" width="100%" height="100%" filter="url(#blur)" href="./assets/icon.svg"></image>
+
+  <!-- Filter for blurring the logo -->
+  <filter id="blur">
+    <feGaussianBlur stdDeviation="5" />
+  </filter>
+
+  <!-- PC -->
+  <svg x="50%" y="-5%" width="50%" viewBox="0 0 200 200">
+    <!-- Border -->
+    <rect x="10" y="40" width="180" height="120" rx="5" ry="5" stroke="#000" stroke-width="5" fill="#000" />
+    <!-- PC screen -->
+    <image x="10" y="43" width="180" height="110" href="./assets/generated/screenshots/900x550.png"></image>
+    <!-- PC stand -->
+    <g>
+      <rect x="80" y="160" width="40" height="20" rx="0" ry="3" fill="#000" />
+      <!-- Monitor base -->
+      <polygon points="80,180 70,200 130,200 120,180" fill="#000" />
+    </g>
+    <!-- PC button -->
+    <circle cx="100" cy="158" r="2" fill="#FFF" />
+  </svg>
+
+  <!-- Tablet -->
+  <svg x="40%" y="30%" width="25%" viewBox="0 0 200 200">
+    <defs>
+      <clipPath id="tablet-clip">
+        <rect x="22.5" y="42.5" width="155" height="115" rx="10" ry="10" />
+      </clipPath>
+    </defs>
+    <!-- Tablet frame -->
+    <rect x="20" y="40" width="160" height="120" rx="10" ry="10" stroke="#000000" stroke-width="5" fill="#FFF" />
+    <!-- Tablet screen -->
+    <image clip-path="url(#tablet-clip)" x="22.5" y="45" width="155" height="110"
+      href="./assets/generated/screenshots/387x275.png"></image>
+  </svg>
+
+  <!-- Phone -->
+  <svg x="41%" y="-7%" width="15%" viewBox="0 0 200 200">
+    <!-- Phone frame -->
+    <rect x="20" y="40" width="120" height="180" rx="10" ry="10" stroke="#000000" stroke-width="5" fill="#FFF" />
+    <!-- Phone screen -->
+    <image x="22.5" y="48" width="115" height="155" href="./assets/generated/screenshots/287x387.png"></image>
+
+    <circle cx="80" cy="210" r="5" fill="#000000" />
+  </svg>
+
+
+  <!-- App title -->
+  <text x="21%" y="20%" text-anchor="middle" style="filter: invert(1)" font-family="Roboto" font-size="40"
+    font-weight="bold">
+    Michi Media Player
+  </text>
+</svg>

package/bin/utils/getAllFiles.js

@@ -1,5 +1,5 @@
-import fs from 'fs';
-import { getPath } from './getPath.js';
+import fs from "fs";
+import { getPath } from "./getPath.js";
 export const getAllFiles = function (dirPath, dirToShow = dirPath, arrayOfFiles = []) {
     const files = fs.readdirSync(dirPath);
     files.forEach((file) => {

package/bin/utils/getHostURL.d.ts

@@ -0,0 +1 @@
+export declare const getHostURL: (port: number) => string;

package/bin/utils/getHostURL.js

@@ -0,0 +1,4 @@
+import { getIPAddress } from "../config/getIPAddress.js";
+export const getHostURL = (port) => {
+    return `http://${getIPAddress()}:${port}`;
+};

package/bin/utils/getLocalURL.d.ts

@@ -0,0 +1 @@
+export declare const getLocalURL: (port: number) => string;

package/bin/utils/getLocalURL.js

@@ -0,0 +1,3 @@
+export const getLocalURL = (port) => {
+    return `http://localhost:${port}`;
+};

package/bin/utils/getPath.js

@@ -1,4 +1,4 @@
-import { normalize, sep } from 'path';
+import { normalize, sep } from "path";
 export function getPath(path) {
     return normalize(path).replace(/\\/g, sep);
 }

package/bin/utils/minify.js

@@ -1,7 +1,7 @@
-export function replaceEnter(json, replaceWith = '') {
+export function replaceEnter(json, replaceWith = "") {
     return json.replace(/\s+/g, replaceWith).trim();
 }
 export function minifyXMLLike(xml) {
-    const removeEnterResult = replaceEnter(xml, ' ');
-    return removeEnterResult.replace(/> </g, '><').trim();
+    const removeEnterResult = replaceEnter(xml, " ");
+    return removeEnterResult.replace(/> </g, "><").trim();
 }

package/bin/utils/serviceWorkerTransformer.d.ts

@@ -1,2 +1,3 @@
-import { Loader } from 'esbuild';
+/// <reference types="node" resolution-mode="require"/>
+import { Loader } from "esbuild";
 export declare const serviceWorkerTransformer: (serviceWorkerCode: string, loader?: Loader) => string | Buffer;

package/bin/utils/serviceWorkerTransformer.js

@@ -1,19 +1,19 @@
-import { config } from '../config/config.js';
-import { getAllFiles } from './getAllFiles.js';
-import { transformSync as esbuild } from 'esbuild';
-export const serviceWorkerTransformer = (serviceWorkerCode, loader = 'ts') => {
+import { config } from "../config/config.js";
+import { getAllFiles } from "./getAllFiles.js";
+import { transformSync as esbuild } from "esbuild";
+export const serviceWorkerTransformer = (serviceWorkerCode, loader = "ts") => {
     const { sourcemap, keepNames, format, outdir, define, target } = config.esbuildOptions;
     try {
-        const allFiles = getAllFiles(outdir, '.');
+        const allFiles = getAllFiles(outdir, ".");
         const result = esbuild(serviceWorkerCode, {
             define: {
-                'michiProcess.env.BUILD_FILES': `${JSON.stringify(allFiles)}`,
+                "michiProcess.env.BUILD_FILES": `${JSON.stringify(allFiles)}`,
                 // Time at GMT+0
-                'michiProcess.env.CACHE_NAME': `"${new Date(new Date().toLocaleString('en-US', { timeZone: 'Etc/GMT' })).getTime()}"`,
+                "michiProcess.env.CACHE_NAME": `"${new Date(new Date().toLocaleString("en-US", { timeZone: "Etc/GMT" })).getTime()}"`,
                 ...define,
             },
             loader,
-            logLevel: 'error',
+            logLevel: "error",
             format,
             target,
             sourcemap,

package/bin/utils/transformers.d.ts

@@ -1,4 +1,4 @@
-import { Tranformer } from './copy.js';
+import { Tranformer } from "./copy.js";
 export declare const jsAndTsRegex: RegExp;
 export declare const notJsAndTsRegex: RegExp;
 export declare const jsonTransformer: Tranformer;

package/bin/utils/transformers.js

@@ -1,6 +1,6 @@
-import { config } from '../config/config.js';
-import { minifyXMLLike } from './minify.js';
-import { serviceWorkerTransformer } from './serviceWorkerTransformer.js';
+import { config } from "../config/config.js";
+import { minifyXMLLike } from "./minify.js";
+import { serviceWorkerTransformer } from "./serviceWorkerTransformer.js";
 export const jsAndTsRegex = /.*\.(?:ts|js)/;
 export const notJsAndTsRegex = /.*\.(?!ts|js)/;
 export const jsonTransformer = {
@@ -18,6 +18,6 @@ export const transformers = [
     {
         fileRegex: jsAndTsRegex,
         transformer: serviceWorkerTransformer,
-        pathTransformer: (destPath) => destPath.replace('.ts', '.js'),
+        pathTransformer: (destPath) => destPath.replace(".ts", ".js"),
     },
 ];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@michijs/dev-server",
   "license": "MIT",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/michijs/dev-server.git"
@@ -27,11 +27,8 @@
     "publish-npm": "npm run dist && npm publish --access public"
   },
   "devDependencies": {
-    "@types/node": "20.1.7",
-    "@types/yargs": "17.0.24",
-    "lint-staged": "13.2.2",
-    "rome": "12.1.0",
-    "simple-git-hooks": "2.8.1"
+    "@types/node": "20.3.2",
+    "@types/yargs": "17.0.24"
   },
   "keywords": [
     "react",
@@ -52,23 +49,15 @@
     "node": ">=14.16"
   },
   "dependencies": {
-    "@types/web-app-manifest": "1.0.3",
-    "esbuild": "0.17.19",
+    "@types/web-app-manifest": "1.0.4",
+    "esbuild": "0.18.9",
     "node-watch": "0.7.3",
     "open": "9.1.0",
+    "puppeteer": "^20.5.0",
     "sharp": "0.32.1",
     "yargs": "17.7.2"
   },
   "peerDependencies": {
     "typescript": "5.0.4"
-  },
-  "simple-git-hooks": {
-    "pre-commit": "npx lint-staged"
-  },
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx}": [
-      "rome check --apply",
-      "rome format --write"
-    ]
   }
 }

package/bin/actions/generateIcons.d.ts

@@ -1 +0,0 @@
-export declare function generateIcons(callback: () => void, src: string): Promise<void>;

package/bin/actions/generateIcons.js

@@ -1,35 +0,0 @@
-import { getPath } from '../utils/getPath.js';
-import { config } from '../config/config.js';
-import { mkdirSync, existsSync, writeFileSync } from 'fs';
-import { pngToIco } from '../utils/pngToIco.js';
-const generateFavicon = async (src, dest) => {
-    const { default: sharp } = await import('sharp');
-    const image = await sharp(src);
-    const iconSizes = [16, 24, 32, 48, 64, 128, 256];
-    const resizedBuffers = await Promise.all(iconSizes.map((size) => {
-        return image.resize(size, size).png().toBuffer();
-    }));
-    writeFileSync(dest, await pngToIco(resizedBuffers, iconSizes));
-};
-export async function generateIcons(callback, src) {
-    const destPath = getPath(`${config.public.path}/assets/generated`);
-    if (!existsSync(destPath))
-        mkdirSync(destPath, { recursive: true });
-    const { default: sharp } = await import('sharp');
-    const sizes = [24, 48, 72, 96, 128, 256, 512];
-    const image = sharp(src);
-    await Promise.all([
-        ...sizes.map((x) => {
-            return image
-                .resize(x, x)
-                .webp()
-                .toFile(getPath(`${destPath}/${src.split('/').at(-1)?.split('.')[0]}-${x}.webp`));
-        }),
-        image
-            .resize(512, 512)
-            .png()
-            .toFile(getPath(`${destPath}/${src.split('/').at(-1)?.split('.')[0]}-512.png`)),
-        generateFavicon(src, getPath(`${config.public.path}/favicon.ico`)),
-    ]);
-    callback();
-}

package/bin/utils/transpileFileInThread.d.ts

@@ -1 +0,0 @@
-export {};

package/bin/utils/transpileFileInThread.js

@@ -1,15 +0,0 @@
-import worker_threads from 'worker_threads';
-import ts from 'typescript';
-function transpileFile(inputFilePath, compilerOptions) {
-    compilerOptions.incremental = false;
-    const program = ts.createProgram([inputFilePath], compilerOptions);
-    const emitResult = program.emit();
-    const allDiagnostics = ts.getPreEmitDiagnostics(program).concat(emitResult.diagnostics);
-    if (allDiagnostics.length > 0) {
-        throw allDiagnostics[0].messageText;
-    }
-}
-worker_threads.parentPort?.once('message', (message) => {
-    const result = transpileFile(...message);
-    worker_threads.parentPort?.postMessage(result);
-});

package/bin/utils/transpileFilesWithThreads.d.ts

@@ -1,2 +0,0 @@
-import ts from 'typescript';
-export declare function transpileFilesWithThreads(filePaths: string[], compilerOptions: ts.CompilerOptions): Promise<string[]>;

package/bin/utils/transpileFilesWithThreads.js

@@ -1,25 +0,0 @@
-import { fileURLToPath } from 'url';
-import { Worker } from 'worker_threads';
-import { dirname } from 'path';
-import { getPath } from './getPath.js';
-function runInThread(args) {
-    return new Promise((resolve, reject) => {
-        const worker = new Worker(getPath(`${dirname(fileURLToPath(import.meta.url))}/transpileFileInThread`));
-        worker.on('message', resolve);
-        worker.on('error', reject);
-        worker.on('exit', (code) => {
-            if (code !== 0) {
-                reject(new Error(`Worker stopped with exit code ${code}`));
-            }
-        });
-        worker.postMessage(args);
-    });
-}
-export async function transpileFilesWithThreads(filePaths, compilerOptions) {
-    const resultPromises = filePaths.map(inputFilePath => {
-        return runInThread([inputFilePath, compilerOptions]);
-    });
-    const results = await Promise.all(resultPromises);
-    console.log(results);
-    return results;
-}