@altano/astro-prettier-response 0.0.1

package/README.md

@@ -0,0 +1,138 @@
+# astro-prettier-response
+
+This package injects a middleware that runs the [Prettier formatter](https://prettier.io) for all output to make it unminified and pretty ✨. If it can't format something, it returns it as-is.
+
+## Wait, what?
+
+This defies standard convention: instead producing minified output that is _as small as possible_, this makes your output _as pretty as possible_. You probably don't want to use this integration, and if you think you do, you almost certainly only want to use it on your statically-generated content.
+
+See [https://alan.norbauer.com/articles/dying-for-beauty/](https://alan.norbauer.com/articles/dying-for-beauty/) for a write-up of why I made this.
+
+# Prerequisites
+
+This integration is for [Astro](https://astro.build). If you aren't using Astro you're in the wrong place.
+
+# Installation
+
+## Astro Integration Installer
+
+In your existing Astro project:
+
+```sh
+# Using NPM
+npx astro add @altano/astro-prettier-response
+# Using Yarn
+yarn astro add @altano/astro-prettier-response
+# Using PNPM
+pnpm astro add @altano/astro-prettier-response
+```
+
+## Manual Installation
+
+Install the package:
+
+```sh
+# Using NPM
+npx install @altano/astro-prettier-response
+# Using Yarn
+yarn add @altano/astro-prettier-response
+# Using PNPM
+pnpm add @altano/astro-prettier-response
+```
+
+Add it to your Astro config:
+
+```js
+import prettierResponse from "@altano/astro-prettier-response";
+
+export default defineConfig({
+  integrations: [prettierResponse()],
+});
+```
+
+## Configuration Options
+
+The integration works fine with no manual configuration, but here are the options and their default values:
+
+```js
+import prettierResponse from "@altano/astro-prettier-response";
+
+export default defineConfig({
+  integrations: [
+    prettierResponse({
+      disableMinifiers: true, // disable Astro's html/css/js minifiers
+      formatXml: false, // requires the `@prettier/plugin-xml` package be installed
+    }),
+  ],
+});
+```
+
+## Whitespace Sensitivity
+
+Prettier is sensitive to significant whitespace in its formatting. This integration leaves the default `--html-whitespace-sensitivity=css` in place. If you run into trouble you can override this default setting on a case-by-case basis right in your html and it will be respected by Prettier. See https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting for more information about html whitespace handling and https://github.com/prettier/plugin-xml?tab=readme-ov-file#whitespace for xml whitespace handling.
+
+## Config Overrides
+
+You might have noticed this line in your Astro logs:
+
+> [astro-prettier-response] Disabling minification of html/css/js in Astro config
+
+This is warning you that this integration is overriding your config to disable Astro's html/js/css minification, because that's obviously what you want.
+
+If it's _not_ what you want, and you want Pretty-but-minified output for some reason, you can configure the integration to respect your Astro settings without overriding them:
+
+```js
+import prettierResponse from "@altano/astro-prettier-response";
+
+export default defineConfig({
+  integrations: [
+    prettierResponse({
+      // Leave Astro's minifiers on (sorry for the double-negative it is what it is)
+      // ⚠️ NOT RECOMMENDED
+      disableMinifiers: false,
+    }),
+  ],
+});
+```
+
+And if you like the behavior but you just hate seeing this logged every time you build, then configure Astro to disable minification yourself and the integration will stop logging:
+
+```js
+import prettierResponse from "@altano/astro-prettier-response";
+
+export default defineConfig({
+  integrations: [prettierResponse()],
+  vite: {
+    build: {
+      minify: false,
+      cssMinify: false,
+    },
+  },
+  compressHTML: false,
+});
+```
+
+This will leave minification enabled but will still run your output through Prettier.
+
+## How This Integration Works
+
+This integration injects a middleware that intercepts all requests. It looks at the `Content-Type` of every `Response` and determines the extension (using the `mime-types` npm package). This is passed along to Prettier which uses it to determine the appropriate parser to use, and then it attempts formatting.
+
+If your Response doesn't have a `Content-Type`, it won't be formatted, so make sure you return one in the headers of your endpoints.
+
+Formatting is only attempted if the `Response.status` is 2xx or 4xx (so a 500 error, for example, will pass through the middleware untouched).
+
+## Troubleshooting
+
+If you are getting back unformatted content and you don't know why:
+
+- If it's an endpoint, make sure you return a `Content-Type` header (.astro files have this set automatically).
+- If it's an xml file, make sure you've enabled the `formatXml` option and installed the `@prettier/plugin-xml` package.
+- Try enabling Astro's verbose logging to get more log output from this integration, e.g. `astro build --verbose`, which would give you output about whether each resource was successfully formatted or not:
+  ![snippet from the build logs of running the `astro build --verbose` command](./readme/verbose-logs.png)
+
+If you are getting back formatted content, but it doesn't look like what you would expect, consult [the section above on whitespace sensitivity](#whitespace-sensitivity).
+
+## Special Thanks
+
+Thank you to [the Astro team](https://github.com/withastro/astro/graphs/contributors) for creating such a great site generator, especially [Fryuni](https://fryuni.dev/) for creating [Inox Tools](https://inox-tools.fryuni.dev/) which power all my Astro integrations, including this one. It makes them easier to write and possible to test and I'm not sure I'd want to make Astro integrations without them.

package/dist/config.d.ts

@@ -0,0 +1,38 @@
+import { z } from "astro/zod";
+export declare const ConfigSchema: z.ZodDefault<z.ZodOptional<z.ZodObject<{
+    /**
+     * Astro/Vite will minify your HTML/JS/CSS by default. Astro lightly
+     * compresses your HTML (not a full minifier) while Vite will fully compress
+     * your CSS/JS. Since we're going for prettiest output here, it makes sense
+     * for this integration to fully disable such minification.
+     *
+     * If you set this to false, and you use the default Astro config with
+     * minification enabled, you will still get your output formatted by
+     * Prettier, but it will be minified output that is formatted. So, for
+     * example, most of the variable names in your JS will be one character
+     * letters.
+     *
+     * @defaultValue true
+     */
+    disableMinifiers: z.ZodDefault<z.ZodBoolean>;
+    /**
+     * Install `@prettier/plugin-xml` package if you enable this
+     *
+     * Use the official Prettier plugin to format xml as well. Sitemaps and rss
+     * feeds are xml, so this would probably do something on your stock Astro
+     * site. Note: the Prettier output is only marginally better because xml is
+     * very whitespace sensitive and so Prettier's formatting is very strict and
+     * not that much prettier.
+     *
+     * @defaultValue false
+     */
+    formatXml: z.ZodDefault<z.ZodBoolean>;
+}, "strict", z.ZodTypeAny, {
+    disableMinifiers: boolean;
+    formatXml: boolean;
+}, {
+    disableMinifiers?: boolean | undefined;
+    formatXml?: boolean | undefined;
+}>>>;
+export type AstroPrettierResponseConfig = z.infer<typeof ConfigSchema>;
+//# sourceMappingURL=config.d.ts.map

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./integration.js";
+export type { AstroPrettierResponseConfig } from "./config.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,103 @@
+// src/integration.ts
+import { runtimeLogger } from "@inox-tools/runtime-logger";
+import {
+  addVirtualImports,
+  createResolver,
+  defineIntegration
+} from "astro-integration-kit";
+
+// src/config.ts
+import { z } from "astro/zod";
+var ConfigSchema = z.object({
+  /**
+   * Astro/Vite will minify your HTML/JS/CSS by default. Astro lightly
+   * compresses your HTML (not a full minifier) while Vite will fully compress
+   * your CSS/JS. Since we're going for prettiest output here, it makes sense
+   * for this integration to fully disable such minification.
+   *
+   * If you set this to false, and you use the default Astro config with
+   * minification enabled, you will still get your output formatted by
+   * Prettier, but it will be minified output that is formatted. So, for
+   * example, most of the variable names in your JS will be one character
+   * letters.
+   *
+   * @defaultValue true
+   */
+  disableMinifiers: z.boolean().default(true),
+  /**
+   * Install `@prettier/plugin-xml` package if you enable this
+   *
+   * Use the official Prettier plugin to format xml as well. Sitemaps and rss
+   * feeds are xml, so this would probably do something on your stock Astro
+   * site. Note: the Prettier output is only marginally better because xml is
+   * very whitespace sensitive and so Prettier's formatting is very strict and
+   * not that much prettier.
+   *
+   * @defaultValue false
+   */
+  formatXml: z.boolean().default(false)
+}).strict().optional().default({});
+
+// src/integration.ts
+var integration_default = defineIntegration({
+  name: "astro-prettier-response",
+  optionsSchema: ConfigSchema,
+  setup({ options, name }) {
+    const { resolve } = createResolver(import.meta.url);
+    return {
+      hooks: {
+        "astro:config:setup": (params) => {
+          addVirtualImports(params, {
+            name,
+            imports: {
+              "virtual:astro-prettier-response/config": `export default ${JSON.stringify(ConfigSchema.parse(options))}`
+            }
+          });
+          runtimeLogger(params, { name: "astro-prettier-response" });
+          const { config, updateConfig, addMiddleware, logger } = params;
+          if (options.disableMinifiers) {
+            let didConfigOverride = false;
+            if (config.compressHTML !== false) {
+              didConfigOverride = true;
+              updateConfig({
+                compressHTML: false
+              });
+            }
+            if (config?.vite?.build?.minify !== false) {
+              didConfigOverride = true;
+              updateConfig({
+                vite: {
+                  build: {
+                    minify: false
+                  }
+                }
+              });
+            }
+            if (config?.vite?.build?.cssMinify !== false) {
+              didConfigOverride = true;
+              updateConfig({
+                vite: {
+                  build: {
+                    cssMinify: false
+                  }
+                }
+              });
+            }
+            if (didConfigOverride) {
+              logger.info(
+                `Disabling minification of html/css/js in Astro config (https://github.com/altano/npm-packages/tree/main/packages/astro-prettier-response#config-overrides)`
+              );
+            }
+          }
+          addMiddleware({
+            entrypoint: resolve("./middleware/index.ts"),
+            order: "post"
+          });
+        }
+      }
+    };
+  }
+});
+export {
+  integration_default as default
+};

package/dist/integration.d.ts

@@ -0,0 +1,6 @@
+declare const _default: (options?: {
+    disableMinifiers?: boolean | undefined;
+    formatXml?: boolean | undefined;
+} | undefined) => import("astro").AstroIntegration & {};
+export default _default;
+//# sourceMappingURL=integration.d.ts.map

package/dist/middleware/filename.d.ts

@@ -0,0 +1,2 @@
+export declare function synthesizeFilename(response: Response): string | null;
+//# sourceMappingURL=filename.d.ts.map

package/dist/middleware/format.d.ts

@@ -0,0 +1,2 @@
+export declare function formatOrReturn(filepath: string, source: string): Promise<string>;
+//# sourceMappingURL=format.d.ts.map

package/dist/middleware/index.d.ts

@@ -0,0 +1,2 @@
+export declare const onRequest: import("astro").MiddlewareHandler;
+//# sourceMappingURL=index.d.ts.map

package/dist/middleware/index.js

@@ -0,0 +1,94 @@
+// src/middleware/index.ts
+import { defineMiddleware } from "astro/middleware";
+
+// src/middleware/filename.ts
+import mime from "mime-types";
+
+// src/middleware/is400.ts
+function is400(status) {
+  return status >= 400 && status < 500;
+}
+
+// src/middleware/filename.ts
+function synthesizeFilename(response) {
+  const contentType = response.headers.get("content-type");
+  if (contentType == null) {
+    if (is400(response.status)) {
+      return "index.html";
+    }
+    return null;
+  }
+  const extensionFromContentType = mime.extension(contentType);
+  if (!extensionFromContentType) {
+    return null;
+  }
+  return `file.${extensionFromContentType}`;
+}
+
+// src/middleware/format.ts
+import { logger } from "@it-astro:logger:astro-prettier-response";
+
+// src/middleware/prettier.ts
+import prettier from "prettier";
+import config from "virtual:astro-prettier-response/config";
+function enhanceOptions(options = {}) {
+  if (!config.formatXml) {
+    return options;
+  }
+  const givenPlugins = options.plugins ?? [];
+  return {
+    ...options,
+    plugins: [...givenPlugins, "@prettier/plugin-xml"]
+  };
+}
+async function format(source, options) {
+  return prettier.format(source, enhanceOptions(options));
+}
+async function getFileInfo(source, options) {
+  return prettier.getFileInfo(source, enhanceOptions(options));
+}
+
+// src/middleware/format.ts
+async function formatOrReturn(filepath, source) {
+  try {
+    const result = await format(source, {
+      filepath
+    });
+    logger.debug(`successfully formatted`);
+    return result;
+  } catch (e) {
+    logger.error(`failed to format`);
+    return source;
+  }
+}
+
+// src/middleware/index.ts
+import { logger as logger2 } from "@it-astro:logger:astro-prettier-response";
+var onRequest = defineMiddleware(async (context, next) => {
+  const response = await next();
+  if (!response.ok && !is400(response.status)) {
+    logger2.debug(`NOT formatting (status is not 2xx or 4xx)`);
+    return response;
+  }
+  const filename = synthesizeFilename(response);
+  if (filename == null) {
+    logger2.debug(`NOT formatting (couldn't determine filename/extension)`);
+    return response;
+  }
+  const fileInfo = await getFileInfo(filename);
+  if (fileInfo?.inferredParser == null) {
+    logger2.debug(`NOT formatting (Prettier has no parser for this file type)`);
+    return response;
+  }
+  const clone = response.clone();
+  const source = await clone.text();
+  const processedSource = await formatOrReturn(filename, source);
+  return new Response(processedSource, {
+    status: response.status,
+    headers: clone.headers,
+    statusText: clone.statusText
+  });
+});
+export {
+  onRequest
+};

package/dist/middleware/is400.d.ts

@@ -0,0 +1,2 @@
+export declare function is400(status: number): boolean;
+//# sourceMappingURL=is400.d.ts.map

package/dist/middleware/prettier.d.ts

@@ -0,0 +1,4 @@
+import prettier, { type Options } from "prettier";
+export declare function format(source: string, options?: Options): Promise<string>;
+export declare function getFileInfo(source: string, options?: Options): Promise<prettier.FileInfoResult>;
+//# sourceMappingURL=prettier.d.ts.map

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@altano/astro-prettier-response",
+  "version": "0.0.1",
+  "description": "Prettier html/css/js for your Astro site",
+  "keywords": [
+    "astro",
+    "astro-integration",
+    "withastro"
+  ],
+  "homepage": "https://github.com/altano/npm-packages/tree/main/packages/astro-prettier-response",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/altano/npm-packages",
+    "directory": "packages/astro-prettier-response"
+  },
+  "license": "ISC",
+  "author": {
+    "name": "Alan Norbauer",
+    "email": "altano@gmail.com",
+    "url": "https://alan.norbauer.com"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.js",
+    "./middleware": "./dist/middleware/index.js"
+  },
+  "files": [
+    "dist/**/*.js",
+    "dist/**/*.d.ts"
+  ],
+  "dependencies": {
+    "@inox-tools/runtime-logger": "^0.4.2",
+    "astro-integration-kit": "^0.18.0",
+    "mime-types": "^3.0.1"
+  },
+  "devDependencies": {
+    "@astrojs/check": "^0.9.4",
+    "@inox-tools/astro-tests": "0.5.1",
+    "@prettier/plugin-xml": "^3.4.1",
+    "@types/mime-types": "^2.1.4",
+    "@types/node": "^22.13.10",
+    "@vitest/coverage-v8": "^3.1.1",
+    "astro": "^5.5.6",
+    "depcheck": "^1.4.7",
+    "prettier": "^3.5.3",
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.6",
+    "vitest": "^3.1.1",
+    "zx": "^8.5.2",
+    "@altano/build-config": "0.0.0",
+    "@altano/tiny-async-pool": "3.0.2",
+    "@altano/testing": "0.0.0",
+    "@altano/tsconfig": "0.0.0"
+  },
+  "peerDependencies": {
+    "astro": "5.x.x",
+    "prettier": "3.x.x"
+  },
+  "optionalDependencies": {
+    "@prettier/plugin-xml": "3.x.x"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup --config ./tsup.config.ts",
+    "build:types": "tsc --project tsconfig.declarations.json",
+    "check:types:astro-fixtures": "node --experimental-strip-types ./scripts/check-fixtures.ts",
+    "check:types:src": "tsc --noEmit",
+    "check:types:test": "tsc --noEmit --project ./tests/tsconfig.json",
+    "check:unused-dependencies": "depcheck",
+    "clean": "rm -rf .turbo && rm -rf .tsbuildinfo && rm -rf node_modules && rm -rf dist",
+    "dev": "tsup --watch",
+    "format": "prettier --write src",
+    "lint": "eslint",
+    "lint:fix": "TIMING=1 eslint src/**/*.ts* --fix",
+    "lint:timing": "TIMING=1 eslint src/**/*.ts*",
+    "test:unit": "vitest --run",
+    "test:unit:watch": "vitest"
+  }
+}