feat(www): refactor

.cspell.json

@@ -37,7 +37,8 @@
         "apigen",
         "brotli",
         "vercel",
-        "preact"
+        "preact",
+        "opendir"
     ],
     "overrides": []
 }

.prettierignore

@@ -4,7 +4,8 @@ dist
 mangle.json
 extractor
 docs/api
-temp/*.api.json
+temp
 .vercel/project.json
 www/public
+www/public-br
 www/template

www/.gitignore

@@ -1,2 +1,3 @@
 /public
+/public-br
 /template

www/api/index.ts

@@ -0,0 +1,128 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { encodings as parseEncodingsHeader } from '@hapi/accept';
+import { NowRequest, NowResponse } from '@vercel/node';
+import { CompressedFileMetadata } from 'script/compressPublic/types';
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const publicFilesList: string[] = (require('../temp/publicFilesList.json') as string[]).map(
+    (path) => `/${path}`,
+);
+const publicUrlToPublicFilePath = new Map(
+    publicFilesList.map((filePath) => [
+        transformFilePathToUrl(filePath) || '/',
+        filePath,
+    ]),
+);
+
+function transformFilePathToUrl(filePath: string): string {
+    const slashIndexDotHtml = '/index.html';
+    if (filePath.endsWith(slashIndexDotHtml)) {
+        return filePath.slice(0, -slashIndexDotHtml.length);
+    }
+
+    const dotHtml = '.html';
+    if (filePath.endsWith(dotHtml)) {
+        return filePath.slice(0, -dotHtml.length);
+    }
+
+    return filePath;
+}
+
+function getContentTypeFromFilePath(filePath: string): string {
+    const extension = path.extname(filePath);
+    switch (extension) {
+        case '.js': {
+            return 'text/javascript';
+        }
+        case '.json': {
+            return 'application/json';
+        }
+        case '.html': {
+            return 'text/html';
+        }
+        default: {
+            throw new Error(`Unexpected extension ${extension}.`);
+        }
+    }
+}
+
+function isAcceptingBrotli(request: NowRequest): boolean {
+    const acceptEncodingHeader = request.headers['accept-encoding'];
+    if (typeof acceptEncodingHeader === 'string') {
+        const encodings = parseEncodingsHeader(acceptEncodingHeader);
+        if (encodings.includes('br')) {
+            return true;
+        }
+    }
+    return false;
+}
+
+function sendPublicFileBrotli(
+    response: NowResponse,
+    publicFilePath: string,
+): void {
+    response.setHeader('Content-Encoding', 'br');
+
+    // eslint-disable-next-line max-len
+    // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-unsafe-assignment
+    const { contentLength } = require(path.join(
+        __dirname,
+        '..',
+        'public-br',
+        'metadata',
+        `${publicFilePath}.json`,
+    )) as CompressedFileMetadata;
+    response.setHeader('Content-Length', contentLength);
+
+    fs.createReadStream(
+        path.join(
+            __dirname,
+            '..',
+            'public-br',
+            'binary',
+            `${publicFilePath}.br`,
+        ),
+    ).pipe(response);
+}
+
+function sendPublicFile(
+    request: NowRequest,
+    response: NowResponse,
+    publicFilePath: string,
+): void {
+    const contentType = getContentTypeFromFilePath(publicFilePath);
+    response.setHeader('Content-Type', contentType);
+
+    if (isAcceptingBrotli(request)) {
+        sendPublicFileBrotli(response, publicFilePath);
+        return;
+    }
+
+    fs.createReadStream(
+        path.join(__dirname, '..', 'public', publicFilePath),
+    ).pipe(response);
+}
+
+export default (request: NowRequest, response: NowResponse) => {
+    const { url } = request;
+
+    if (!url) {
+        throw new Error('Unexpected: no url.');
+    }
+
+    if (url.endsWith('/') && url !== '/') {
+        response.redirect(308, url.slice(0, -1));
+        return;
+    }
+
+    const publicFilePath = publicUrlToPublicFilePath.get(url);
+
+    if (publicFilePath) {
+        response.status(200);
+        sendPublicFile(request, response, publicFilePath);
+    } else {
+        response.status(400);
+        sendPublicFile(request, response, '404.html');
+    }
+};

www/package.json

@@ -4,8 +4,9 @@
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "build:docs": "cd .. && npm install && npm run build && cd www && npx -s sh ts-node --project ./tsconfig.ts-node.json ./script/docs/apigen/index.ts",
-        "build:template": "rimraf template && ncp src template --stopOnErr && npx -s sh ts-node --project ./tsconfig.ts-node.json ./script/template/index.tsx",
-        "build:public": "npm run build:template && parcel build 'template/**/*.html' --dist-dir public --detailed-report --no-source-maps",
+        "build:template": "ncp src template --stopOnErr && npx -s sh ts-node --project ./tsconfig.ts-node.json ./script/template/index.tsx",
+        "build:public": "npm run build:template && parcel build 'template/**/*.html' --dist-dir public --detailed-report --no-source-maps && rimraf template && npm run build:public-compressed",
+        "build:public-compressed": "rimraf public-br && npx -s sh ts-node --project ./tsconfig.ts-node.json ./script/compressPublic/index.ts",
         "build": "rimraf public && npm run build:docs && npm run build:public",
         "postinstall": "cpy .browserslistrc node_modules/unfetch"
     },

www/script/compressPublic/index.ts

@@ -0,0 +1,117 @@
+import { promises as fs } from 'fs';
+import * as path from 'path';
+import { promisify } from 'util';
+import * as zlib from 'zlib';
+import * as colors from 'colors';
+import { exit } from '../exit';
+import { rootDir } from '../rootDir';
+import { CompressedFileMetadata } from './types';
+
+const publicPath = path.join(rootDir, 'www', 'public');
+const publicBrPath = path.join(rootDir, 'www', 'public-br');
+const publicBrBinaryPath = path.join(publicBrPath, 'binary');
+const publicBrMetadataPath = path.join(publicBrPath, 'metadata');
+
+const brotliCompress = promisify(zlib.brotliCompress);
+const compressedFiles: string[] = [];
+
+async function brotliCompressDirectory(subPath: string): Promise<unknown> {
+    const dirPublicPath = path.join(publicPath, subPath);
+    const dirPublicBrBinaryPath = path.join(publicBrBinaryPath, subPath);
+    const dirPublicBrMetadataPath = path.join(publicBrMetadataPath, subPath);
+
+    console.log(`reading dir ${colors.cyan(path.join('public', subPath))}`);
+
+    if (subPath === '') {
+        await fs.mkdir(publicBrPath);
+        await Promise.all([
+            fs.mkdir(publicBrBinaryPath),
+            fs.mkdir(publicBrMetadataPath),
+        ]);
+    } else {
+        await fs.mkdir(dirPublicBrBinaryPath);
+        await fs.mkdir(dirPublicBrMetadataPath);
+    }
+
+    const promises: Promise<unknown>[] = [];
+
+    for await (const thing of await fs.opendir(dirPublicPath)) {
+        if (thing.isDirectory()) {
+            promises.push(
+                brotliCompressDirectory(path.join(subPath, thing.name)),
+            );
+            continue;
+        }
+
+        if (!thing.isFile()) {
+            throw new Error(`${thing.name}: Not a file or directory.`);
+        }
+
+        const filePublicPath = path.join(dirPublicPath, thing.name);
+        const filePublicBrBinaryPath = path.join(
+            dirPublicBrBinaryPath,
+            `${thing.name}.br`,
+        );
+        const filePublicBrMetadataPath = path.join(
+            dirPublicBrMetadataPath,
+            `${thing.name}.json`,
+        );
+
+        const fileSubPath = path.join(subPath, thing.name);
+        const fileHumanPath = path.join('public', subPath, thing.name);
+
+        if (fileSubPath === '404.html') {
+            console.log(
+                `not adding ${colors.red(fileSubPath)} to public files list`,
+            );
+        } else {
+            compressedFiles.push(fileSubPath);
+        }
+
+        console.log(`compressing file ${colors.red(fileHumanPath)}`);
+
+        promises.push(
+            fs
+                .readFile(filePublicPath)
+                .then(brotliCompress)
+                .then((compressed) => {
+                    console.log(
+                        `writing compressed file ${colors.cyan(fileHumanPath)}`,
+                    );
+                    const metadata: CompressedFileMetadata = {
+                        contentLength: compressed.length,
+                    };
+                    return Promise.all([
+                        fs.writeFile(filePublicBrBinaryPath, compressed),
+                        fs.writeFile(
+                            filePublicBrMetadataPath,
+                            JSON.stringify(metadata),
+                        ),
+                    ]);
+                }),
+        );
+    }
+
+    return Promise.all(promises);
+}
+
+const publicFilesListFileName = 'publicFilesList.json';
+
+brotliCompressDirectory('')
+    .then(() => {
+        console.log(
+            `writing public file list ${colors.green(
+                path.join('temp', publicFilesListFileName),
+            )}`,
+        );
+        return fs.writeFile(
+            path.join(rootDir, 'www', 'temp', publicFilesListFileName),
+            JSON.stringify(compressedFiles),
+            'utf-8',
+        );
+    })
+    .catch((error) => {
+        console.error('error compressing public directory...');
+        console.log(error);
+        exit();
+    });

www/script/compressPublic/types.ts

@@ -0,0 +1,3 @@
+export interface CompressedFileMetadata {
+    contentLength: number;
+}

www/script/docs/apigen/analyze/Context.ts

@@ -10,6 +10,7 @@ export interface APIPageDataItem {
 export interface APIPageData {
     pageDirectory: string;
     pageTitle: string;
+    pageUrl: string;
     items: APIPageDataItem[];
 }
 

www/script/docs/apigen/analyze/build/buildApiPage.ts

@@ -137,6 +137,7 @@ export function buildApiPage(
             title: pageData.pageTitle,
             tableOfContents: tableOfContents,
         },
+        pageUrl: pageData.pageUrl,
         children: Array.from(nameToApiItems, ([, apiItems]) => {
             return buildApiItemImplementationGroup({
                 apiItems,

www/script/docs/apigen/core/nodes/Page.ts

@@ -5,18 +5,21 @@ import { Node, CoreNodeType } from '.';
 export interface PageParameters<ChildNode extends Node>
     extends ContainerParameters<ChildNode> {
     metadata: PageMetadata;
+    pageUrl: string;
 }
 
 export interface PageBase<ChildNode extends Node>
     extends ContainerBase<ChildNode> {
     metadata: PageMetadata;
+    pageUrl: string;
 }
 
 export function PageBase<ChildNode extends Node>(
     parameters: PageParameters<ChildNode>,
 ): PageBase<ChildNode> {
     return {
         metadata: parameters.metadata,
+        pageUrl: parameters.pageUrl,
         ...ContainerBase<ChildNode>({ children: parameters.children }),
     };
 }