@michijs/dev-server 0.4.2 → 0.5.0

package/LICENSE.md

@@ -1,9 +1,9 @@
-The MIT License (MIT)
-
-Copyright (c) 2021-present, michijs
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
+The MIT License (MIT)
+
+Copyright (c) 2021-present, michijs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,208 +1,229 @@
-# Michijs Dev Server
-Development server built on top of esbuild.
-
-![npm][version] [![license][github-license]][github-license-url] ![npm][npm-downloads] ![npm][repo-size]
-  [![CodeQL](https://github.com/michijs/dev-server/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/michijs/dev-server/actions/workflows/codeql-analysis.yml)
-  [![Tests](https://github.com/michijs/dev-server/actions/workflows/tests.yml/badge.svg)](https://github.com/michijs/dev-server/actions/workflows/tests.yml)
-
-## Main features
-- Configure esbuild options with Typescript
-- First-class PWA support
-- Custom environments
-- Packages distribution
-
-## Getting started
-
-You can use the following [test project](https://github.com/michijs/michijs-template) or setup a project from scratch:
-
-    npm install -D @michijs/dev-server
-
-## CLI commands
-You have the following CLI commands:
-<table>
-  <thead>
-    <tr>
-      <th>CLI command</th>
-      <th>Default environment</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>start</td>
-      <td>DEVELOPMENT</td>
-      <td>Allows to start a dev server as a webpage.</td>
-    </tr>
-    <tr>
-      <td>build</td>
-      <td>PRODUCTION</td>
-      <td>Allows to build the src code as a webpage.</td>
-    </tr>
-    <tr>
-      <td>dist</td>
-      <td>DISTRIBUTION</td>
-      <td>Allows to distribute the src code as a package. At the moment ESBuild does not support .d.ts files so we still use the Typescript compiler with the tsconfig provided by esbuildOptions field.</td>
-    </tr>
-    <tr>
-      <td>generate-icons</td>
-      <td>-</td>
-      <td>Allows to generate a full set of icons from a src icon.</td>
-    </tr>
-  </tbody>
-</table>
-
-
-## Configure the server
-To configure the server you just need to create an optional file called michi.config.ts at the root of your project. This file would look like this:
-
-```ts
-import { ServerConfig, ServerConfigFactory, DefaultEnvironment } from '@michijs/server';
-
-export const config: ServerConfigFactory = (environment) => {
-  const defaultConfig: ServerConfig = {
-    // Your custom configuration
-  }
-  return defaultConfig;
-};
-
-export default config;
-```
-
-<table>
-  <thead>
-    <tr>
-      <th colspan="4">ServerConfig</th>
-      <th>Default value</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>env</td>
-      <td colspan="3">Allows to add environment variables</td>
-      <td></td>
-    </tr>
-    <tr>
-      <td>esbuildOptions</td>
-      <td colspan="3">All the options available at <a href="https://esbuild.github.io/plugins/#build-options">esbuild documentation</a></td>
-      <td>Can be chequed <a href="#esbuild-default-options">here</a></td>
-    </tr>
-    <tr>
-      <td>openBrowser</td>
-      <td colspan="3">If the browser should open at localhost url when server starts</td>
-      <td>"true"</td>
-    </tr>
-    <tr>
-      <td>port</td>
-      <td colspan="3">Port to run dev server on</td>
-      <td>"3000"</td>
-    </tr>
-    <tr>
-      <td rowspan="10">public</td>
-      <td rowspan="10">Public folder - will be copied at server start</td>
-      <tr>
-        <td colspan="2">indexName</td>
-        <td>"index.html"</td>
-      </tr>
-      <tr>
-        <td colspan="2">minify</td>
-        <td>"true" if environment is PRODUCTION</td>
-      </tr>
-      <tr>
-        <td colspan="2">path</td>
-        <td>"public"</td>
-      </tr>
-      <tr>
-        <td rowspan="3">manifest <br/><small>(A JSON document that contains startup parameters and application defaults for when a web application is launched.)</small></td>
-        <tr>
-          <td>name</td>
-          <td>"manifest.json"</td>
-        </tr>
-        <tr>
-          <td>options</td>
-          <td></td>
-        </tr>
-      </tr>
-      <tr>
-        <td rowspan="3">wellKnown <br/><small>(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.)</small></td>
-        <tr>
-          <td>relation</td>
-          <td></td>
-        </tr>
-        <tr>
-          <td>target</td>
-          <td></td>
-        </tr>
-      </tr>
-    </tr>
-  </tbody>
-</table>
-
-## Esbuild default options
-
-<table>
-  <thead>
-    <tr>
-      <th>Field</th>
-      <th>Default value</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>bundle</td>
-      <td>"true"</td>
-    </tr>
-    <tr>
-      <td>entryPoints</td>
-      <td>['src/index.ts']</td>
-    </tr>
-    <tr>
-      <td>format</td>
-      <td>"esm"</td>
-    </tr>
-    <tr>
-      <td>keepNames</td>
-      <td>"true" if environment is PRODUCTION</td>
-    </tr>
-    <tr>
-      <td>logLevel</td>
-      <td>"error"</td>
-    </tr>
-    <tr>
-      <td>minifySyntax</td>
-      <td>"true" if environment is PRODUCTION</td>
-    </tr>
-    <tr>
-      <td>minifyWhitespace</td>
-      <td>"true" if environment is PRODUCTION</td>
-    </tr>
-    <tr>
-      <td>outdir</td>
-      <td>"build"</td>
-    </tr>
-    <tr>
-      <td>sourcemap</td>
-      <td>"true" if environment is <b>NOT</b> PRODUCTION</td>
-    </tr>
-    <tr>
-      <td>splitting</td>
-      <td>"true"</td>
-    </tr>
-    <tr>
-      <td>target</td>
-      <td>"esnext"</td>
-    </tr>
-    <tr>
-      <td>tsconfig</td>
-      <td>"tsconfig.json"</td>
-    </tr>
-  </tbody>
-</table>
-
-## License
- - [MIT](https://github.com/michijs/dev-server/blob/master/LICENSE.md)
-
-[repo-size]: https://img.shields.io/github/repo-size/michijs/dev-server
-[npm-downloads]: https://img.shields.io/npm/dt/@michijs/dev-server
-[version]: https://img.shields.io/npm/v/@michijs/dev-server
-[github-license]: https://img.shields.io/github/license/michijs/dev-server
-[github-license-url]: https://github.com/michijs/dev-server/blob/master/LICENSE.md
+# Michijs Dev Server
+Development server built on top of esbuild.
+<!-- TODO: To generate feature-image require to install roboto -->
+
+![npm][version] [![license][github-license]][github-license-url] ![npm][npm-downloads] ![npm][repo-size]
+  [![CodeQL](https://github.com/michijs/dev-server/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/michijs/dev-server/actions/workflows/codeql-analysis.yml)
+  [![Tests](https://github.com/michijs/dev-server/actions/workflows/tests.yml/badge.svg)](https://github.com/michijs/dev-server/actions/workflows/tests.yml)
+
+## Main features
+- Configure esbuild options with Typescript
+- First-class PWA support
+- Custom environments
+- Packages distribution
+
+## Getting started
+
+You can use the following [test project](https://github.com/michijs/michijs-template) or setup a project from scratch:
+
+    npm install -D @michijs/dev-server
+
+## CLI commands
+You have the following CLI commands:
+<table>
+  <thead>
+    <tr>
+      <th>CLI command</th>
+      <th>Default environment</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>start</td>
+      <td>DEVELOPMENT</td>
+      <td>Allows to start a dev server as a webpage.</td>
+    </tr>
+    <tr>
+      <td>build</td>
+      <td>PRODUCTION</td>
+      <td>Allows to build the src code as a webpage.</td>
+    </tr>
+    <tr>
+      <td>dist</td>
+      <td>DISTRIBUTION</td>
+      <td>Allows to distribute the src code as a package. At the moment ESBuild does not support .d.ts files so we still use the Typescript compiler with the tsconfig provided by esbuildOptions field.</td>
+    </tr>
+    <tr>
+      <td>generate-icons</td>
+      <td>-</td>
+      <td>Allows to generate a full set of icons from a src icon.</td>
+    </tr>
+  </tbody>
+</table>
+
+
+## Configure the server
+To configure the server you just need to create an optional file called michi.config.ts at the root of your project. This file would look like this:
+
+```ts
+import { ServerConfig, ServerConfigFactory, DefaultEnvironment } from '@michijs/server';
+
+export const config: ServerConfigFactory = (environment) => {
+  const defaultConfig: ServerConfig = {
+    // Your custom configuration
+  }
+  return defaultConfig;
+};
+
+export default config;
+```
+
+<table>
+  <thead>
+    <tr>
+      <th colspan="4">ServerConfig</th>
+      <th>Default value</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>env</td>
+      <td colspan="3">Allows to add environment variables</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>esbuildOptions</td>
+      <td colspan="3">All the options available at <a href="https://esbuild.github.io/plugins/#build-options">esbuild documentation</a></td>
+      <td>Can be chequed <a href="#esbuild-default-options">here</a></td>
+    </tr>
+    <tr>
+      <td>openBrowser</td>
+      <td colspan="3">If the browser should open at localhost url when server starts</td>
+      <td>"true"</td>
+    </tr>
+    <tr>
+      <td>watch</td>
+      <td colspan="3">If the server should watch for changes on the folders</td>
+      <td>"true"</td>
+    </tr>
+    <tr>
+      <td>port</td>
+      <td colspan="3">Port to run dev server on</td>
+      <td>"3000"</td>
+    </tr>
+    <tr>
+      <td rowspan="14">public</td>
+      <td rowspan="14">Public folder - will be copied at server start</td>
+      <tr>
+        <td rowspan="4">assets</td>
+        <tr>
+          <td>path</td>
+          <td>"assets"</td>
+        </tr>
+        <tr>
+          <td>screenshots</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>featureImage</td>
+          <td></td>
+        </tr>
+      </tr>
+      <tr>
+        <td colspan="2">indexName</td>
+        <td>"index.html"</td>
+      </tr>
+      <tr>
+        <td colspan="2">minify</td>
+        <td>"true" if environment is PRODUCTION</td>
+      </tr>
+      <tr>
+        <td colspan="2">path</td>
+        <td>"public"</td>
+      </tr>
+      <tr>
+        <td rowspan="3">manifest <br/><small>(A JSON document that contains startup parameters and application defaults for when a web application is launched.)</small></td>
+        <tr>
+          <td>name</td>
+          <td>"manifest.json"</td>
+        </tr>
+        <tr>
+          <td>options</td>
+          <td></td>
+        </tr>
+      </tr>
+      <tr>
+        <td rowspan="3">wellKnown <br/><small>(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.)</small></td>
+        <tr>
+          <td>relation</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>target</td>
+          <td></td>
+        </tr>
+      </tr>
+    </tr>
+  </tbody>
+</table>
+
+## Esbuild default options
+
+<table>
+  <thead>
+    <tr>
+      <th>Field</th>
+      <th>Default value</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>bundle</td>
+      <td>"true"</td>
+    </tr>
+    <tr>
+      <td>entryPoints</td>
+      <td>['src/index.ts']</td>
+    </tr>
+    <tr>
+      <td>format</td>
+      <td>"esm"</td>
+    </tr>
+    <tr>
+      <td>keepNames</td>
+      <td>"true" if environment is PRODUCTION</td>
+    </tr>
+    <tr>
+      <td>logLevel</td>
+      <td>"error"</td>
+    </tr>
+    <tr>
+      <td>minifySyntax</td>
+      <td>"true" if environment is PRODUCTION</td>
+    </tr>
+    <tr>
+      <td>minifyWhitespace</td>
+      <td>"true" if environment is PRODUCTION</td>
+    </tr>
+    <tr>
+      <td>outdir</td>
+      <td>"build"</td>
+    </tr>
+    <tr>
+      <td>sourcemap</td>
+      <td>"true" if environment is <b>NOT</b> PRODUCTION</td>
+    </tr>
+    <tr>
+      <td>splitting</td>
+      <td>"true"</td>
+    </tr>
+    <tr>
+      <td>target</td>
+      <td>"esnext"</td>
+    </tr>
+    <tr>
+      <td>tsconfig</td>
+      <td>"tsconfig.json"</td>
+    </tr>
+  </tbody>
+</table>
+
+## License
+ - [MIT](https://github.com/michijs/dev-server/blob/master/LICENSE.md)
+
+[repo-size]: https://img.shields.io/github/repo-size/michijs/dev-server
+[npm-downloads]: https://img.shields.io/npm/dt/@michijs/dev-server
+[version]: https://img.shields.io/npm/v/@michijs/dev-server
+[github-license]: https://img.shields.io/github/license/michijs/dev-server
+[github-license-url]: https://github.com/michijs/dev-server/blob/master/LICENSE.md

package/bin/actions/build.js

@@ -1,5 +1,5 @@
-import { config } from '../config/config.js';
-import { build as esbuild } from 'esbuild';
+import { config } from "../config/config.js";
+import { build as esbuild } from "esbuild";
 export function build(callback) {
     return new Promise((resolve, reject) => {
         esbuild(config.esbuildOptions)

package/bin/actions/dist.js

@@ -1,11 +1,11 @@
-import { tsconfig } from '../config/tsconfig.js';
-import { config } from '../config/config.js';
-import { exec } from 'child_process';
-import fs from 'fs';
+import { tsconfig } from "../config/tsconfig.js";
+import { config } from "../config/config.js";
+import { exec } from "child_process";
+import fs from "fs";
 export function dist(callback, watch = false) {
     if (tsconfig.compilerOptions.outDir &&
         fs.existsSync(tsconfig.compilerOptions.outDir)) {
         fs.rmSync(tsconfig.compilerOptions.outDir, { recursive: true });
     }
-    exec(`tsc ${watch ? '-w' : ''} --project ${config.esbuildOptions.tsconfig}`, callback);
+    exec(`tsc ${watch ? "-w" : ""} --project ${config.esbuildOptions.tsconfig}`, callback);
 }

package/bin/actions/generateAssets.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="node" resolution-mode="require"/>
+export declare function generateFeatureImage(src: string): Promise<void>;
+export declare function generateScreenshots(): Promise<(string | Buffer)[][]>;
+export declare function generateAssets(callback: () => void, src: string): Promise<void>;

package/bin/actions/generateAssets.js

@@ -0,0 +1,125 @@
+import { getPath } from "../utils/getPath.js";
+import { config } from "../config/config.js";
+import { mkdirSync, existsSync, writeFileSync, readFileSync, rmSync } from "fs";
+import { pngToIco } from "../utils/pngToIco.js";
+import { fileURLToPath } from "url";
+import { dirname, resolve } from "path";
+import sharp from "sharp";
+import { getLocalURL } from "../utils/getLocalURL.js";
+import { assetsSizes } from "../constants.js";
+import puppeteer from "puppeteer";
+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))), "../..");
+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));
+};
+config.watch = false;
+config.openBrowser = false;
+const browser = await puppeteer.launch({
+    dumpio: true,
+    headless: "new",
+    product: "chrome",
+});
+const port = await new Promise(async (resolve) => {
+    const { start } = await import("./start.js");
+    start((port) => resolve(port));
+});
+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 prefix = await pageCallback?.(page);
+        const screenshot = await page.screenshot({
+            fullPage: true,
+            ...options?.(viewport, prefix ? `_${prefix}` : prefix),
+        });
+        await page.close();
+        return screenshot;
+    }));
+}
+export async function generateFeatureImage(src) {
+    const svgFilePath = getPath(`${svgPath}/feature-image-template.svg`);
+    const [screenshots, icon] = await Promise.all([
+        takeScreenshots({
+            viewports: [
+                // Phone
+                { width: 288, height: 387 },
+                // Tablet
+                { width: 390, height: 280 },
+                // Desktop
+                { width: 900, height: 550 },
+            ],
+            path: config.public.assets.featureImage.path,
+            pageCallback: config.public.assets.featureImage.pageCallback,
+        }),
+        sharp(src).resize(512, 512).png().toBuffer(),
+    ]);
+    const svg = readFileSync(svgFilePath);
+    const svgString = svg
+        .toString()
+        .replace("{{phone-href}}", `data:image/png;base64,${screenshots[0].toString("base64")}`)
+        .replace("{{tablet-href}}", `data:image/png;base64,${screenshots[1].toString("base64")}`)
+        .replace("{{pc-href}}", `data:image/png;base64,${screenshots[2].toString("base64")}`)
+        .replace("{{icon-href}}", `data:image/png;base64,${icon.toString("base64")}`)
+        .replace("{{background}}", config.public.manifest?.options?.background_color ?? "transparent")
+        .replace("{{app-title}}", config.public.manifest?.options?.name ?? "");
+    writeFileSync(getPath(`${generatedPath}/feature-image.svg`), svgString);
+    await sharp(Buffer.from(svgString))
+        .resize(1024, 500)
+        .png()
+        .toFile(getPath(`${generatedPath}/feature-image.png`));
+}
+export async function generateScreenshots() {
+    return await Promise.all(config.public.assets.screenshots.paths.flatMap((path) => config.public.assets.screenshots.pageCallbacks.map(async (pageCallback, index) => await takeScreenshots({
+        viewports: assetsSizes.screenshots,
+        path,
+        pageCallback,
+        options(viewport, pagePrefix = config.public.assets.screenshots.pageCallbacks
+            .length > 1
+            ? `_${index}`
+            : "") {
+            const screenshotPath = getPath(`${screenshotsPath}${pagePrefix}${path.replace("?", "_")}`);
+            if (!existsSync(screenshotPath))
+                mkdirSync(screenshotPath, { recursive: true });
+            return {
+                path: getPath(`${screenshotPath}/screenshot-${viewport.width}x${viewport.height}.png`),
+            };
+        },
+    }))));
+}
+export async function generateAssets(callback, src) {
+    rmSync(generatedPath, { recursive: true });
+    if (!existsSync(generatedPath))
+        mkdirSync(screenshotsPath, { recursive: true });
+    const image = sharp(src);
+    const fileNameWithoutExtension = src.split("/").at(-1)?.split(".")[0];
+    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`));
+        }),
+        generateFavicon(src, getPath(`${config.public.path}/favicon.ico`)),
+        generateFeatureImage(src),
+        generateScreenshots(),
+    ]);
+    callback();
+    await browser.close();
+    process.exit();
+}

package/bin/actions/start.d.ts

@@ -1 +1 @@
-export declare const start: (callback: () => void) => void;
+export declare const start: (callback: (selectedPort: number) => void) => void;