@athenna/http 5.12.0 → 5.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@athenna/http",
-  "version": "5.12.0",
+  "version": "5.13.0",
   "description": "The Athenna Http server. Built on top of fastify.",
   "license": "MIT",
   "author": "João Lenon <lenon@athenna.io>",

package/src/providers/HttpServerProvider.d.ts

@@ -9,5 +9,6 @@
 import { ServiceProvider } from '@athenna/ioc';
 export declare class HttpServerProvider extends ServiceProvider {
     register(): void;
+    boot(): void;
     shutdown(): Promise<void>;
 }

package/src/providers/HttpServerProvider.js

@@ -6,12 +6,41 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
+import { View } from '@athenna/view';
+import { Vite } from '#src/vite/index';
+import { EdgeError } from 'edge-error';
 import { ServiceProvider } from '@athenna/ioc';
 import { ServerImpl } from '#src/server/ServerImpl';
 export class HttpServerProvider extends ServiceProvider {
     register() {
         this.container.instance('Athenna/Core/HttpServer', new ServerImpl(Config.get('http.fastify')));
     }
+    boot() {
+        View.edge.global('vite', new Vite());
+        View.edge.registerTag({
+            tagName: 'vite',
+            seekable: true,
+            block: false,
+            compile(parser, buffer, token) {
+                /**
+                 * Ensure an argument is defined
+                 */
+                if (!token.properties.jsArg.trim()) {
+                    throw new EdgeError('Missing entrypoint name', 'E_RUNTIME_EXCEPTION', {
+                        filename: token.filename,
+                        line: token.loc.start.line,
+                        col: token.loc.start.col
+                    });
+                }
+                const parsed = parser.utils.transformAst(parser.utils.generateAST(token.properties.jsArg, token.loc, token.filename), token.filename, parser);
+                const entrypoints = parser.utils.stringify(parsed);
+                const methodCall = parsed.type === 'SequenceExpression'
+                    ? `generateEntryPointsTags${entrypoints}`
+                    : `generateEntryPointsTags(${entrypoints})`;
+                buffer.outputExpression(`(await state.vite.${methodCall}).join('\\n')`, token.filename, token.loc.start.line, false);
+            }
+        });
+    }
     async shutdown() {
         const Server = this.container.use('Athenna/Core/HttpServer');
         if (!Server) {

package/src/vite/index.d.ts

@@ -0,0 +1,92 @@
+/**
+ * @athenna/http
+ *
+ * (c) João Lenon <lenon@athenna.io>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import type { Manifest, ModuleNode } from 'vite';
+export declare class Vite {
+    /**
+     * We cache the manifest file content in production
+     * to avoid reading the file multiple times.
+     */
+    manifestCache?: Manifest;
+    /**
+     * Verify if vite is running in development mode.
+     */
+    get isViteRunning(): boolean;
+    /**
+     * Reads the file contents as JSON.
+     */
+    readFileAsJSON(filePath: string): any;
+    /**
+     * Returns a new array with unique items by the given key
+     */
+    uniqueBy<T>(array: T[], key: keyof T): T[];
+    /**
+     * Convert Record of attributes to a valid HTML string.
+     */
+    makeAttributes(attributes: Record<string, string | boolean>): string;
+    /**
+     * Generates a JSON element with a custom toString implementation.
+     */
+    generateElement(element: any): any;
+    /**
+     * Returns the script needed for the HMR working with Vite.
+     */
+    getViteHmrScript(): any;
+    /**
+     * Check if the given path is a CSS path.
+     */
+    isCssPath(path: string): boolean;
+    /**
+     * If the module is a style module.
+     */
+    isStyleModule(mod: ModuleNode): boolean;
+    /**
+     * Create a style tag for the given path
+     */
+    makeStyleTag(url: string, attributes?: any): any;
+    /**
+     * Create a script tag for the given path
+     */
+    makeScriptTag(url: string, attributes?: any): any;
+    /**
+     * Generate a HTML tag for the given asset
+     */
+    generateTag(asset: string, attributes?: any): any;
+    /**
+     * Get a chunk from the manifest file for a given file name
+     */
+    chunk(manifest: Manifest, entrypoint: string): import("vite").ManifestChunk;
+    /**
+     * Get a list of chunks for a given filename
+     */
+    chunksByFile(manifest: Manifest, file: string): import("vite").ManifestChunk[];
+    /**
+     * Generate preload tag for a given url
+     */
+    makePreloadTagForUrl(url: string): any;
+    /**
+     * Generate style and script tags for the given entrypoints
+     * Also adds the @vite/client script
+     */
+    generateEntryPointsTagsForDevMode(entryPoints: string[], attributes?: any): Promise<any[]>;
+    /**
+     * Generate style and script tags for the given entrypoints
+     * using the manifest file
+     */
+    generateEntryPointsTagsWithManifest(entryPoints: string[], attributes?: any): any[];
+    /**
+     * Generate tags for the entry points
+     */
+    generateEntryPointsTags(entryPoints: string[] | string, attributes?: any): Promise<any[]>;
+    /**
+     * Returns the manifest file contents
+     *
+     * @throws Will throw an exception when running in dev
+     */
+    manifest(): Manifest;
+}

package/src/vite/index.js

@@ -0,0 +1,237 @@
+/**
+ * @athenna/http
+ *
+ * (c) João Lenon <lenon@athenna.io>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import { File, Path } from '@athenna/common';
+const styleFileRegex = /\.(css|less|sass|scss|styl|stylus|pcss|postcss)($|\?)/;
+export class Vite {
+    /**
+     * Verify if vite is running in development mode.
+     */
+    get isViteRunning() {
+        return process.argv.includes('--vite');
+    }
+    /**
+     * Reads the file contents as JSON.
+     */
+    readFileAsJSON(filePath) {
+        return new File(filePath).getContentAsJsonSync();
+    }
+    /**
+     * Returns a new array with unique items by the given key
+     */
+    uniqueBy(array, key) {
+        const seen = new Set();
+        return array.filter(item => {
+            const k = item[key];
+            return seen.has(k) ? false : seen.add(k);
+        });
+    }
+    /**
+     * Convert Record of attributes to a valid HTML string.
+     */
+    makeAttributes(attributes) {
+        return Object.keys(attributes)
+            .map(key => {
+            const value = attributes[key];
+            if (value === true) {
+                return key;
+            }
+            if (!value) {
+                return null;
+            }
+            return `${key}="${value}"`;
+        })
+            .filter(attr => attr !== null)
+            .join(' ');
+    }
+    /**
+     * Generates a JSON element with a custom toString implementation.
+     */
+    generateElement(element) {
+        return {
+            ...element,
+            toString() {
+                const attributes = `${this.makeAttributes(element.attributes)}`;
+                if (element.tag === 'link') {
+                    return `<${element.tag} ${attributes}/>`;
+                }
+                return `<${element.tag} ${attributes}>${element.children.join('\n')}</${element.tag}>`;
+            }
+        };
+    }
+    /**
+     * Returns the script needed for the HMR working with Vite.
+     */
+    getViteHmrScript() {
+        return this.generateElement({
+            tag: 'script',
+            attributes: {
+                type: 'module',
+                src: '/@vite/client'
+            },
+            children: []
+        });
+    }
+    /**
+     * Check if the given path is a CSS path.
+     */
+    isCssPath(path) {
+        return path.match(styleFileRegex) !== null;
+    }
+    /**
+     * If the module is a style module.
+     */
+    isStyleModule(mod) {
+        if (this.isCssPath(mod.url) ||
+            (mod.id && /\?vue&type=style/.test(mod.id))) {
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Create a style tag for the given path
+     */
+    makeStyleTag(url, attributes) {
+        return this.generateElement({
+            tag: 'link',
+            attributes: { rel: 'stylesheet', href: url, ...attributes }
+        });
+    }
+    /**
+     * Create a script tag for the given path
+     */
+    makeScriptTag(url, attributes) {
+        return this.generateElement({
+            tag: 'script',
+            attributes: { type: 'module', src: url, ...attributes },
+            children: []
+        });
+    }
+    /**
+     * Generate a HTML tag for the given asset
+     */
+    generateTag(asset, attributes) {
+        let url = '';
+        if (this.isViteRunning) {
+            url = `/${asset}`;
+        }
+        else {
+            url = asset;
+        }
+        if (this.isCssPath(asset)) {
+            return this.makeStyleTag(url, attributes);
+        }
+        return this.makeScriptTag(url, attributes);
+    }
+    /**
+     * Get a chunk from the manifest file for a given file name
+     */
+    chunk(manifest, entrypoint) {
+        const chunk = manifest[entrypoint];
+        if (!chunk) {
+            throw new Error(`Cannot find "${entrypoint}" chunk in the manifest file`);
+        }
+        return chunk;
+    }
+    /**
+     * Get a list of chunks for a given filename
+     */
+    chunksByFile(manifest, file) {
+        return Object.entries(manifest)
+            .filter(([, chunk]) => chunk.file === file)
+            .map(([_, chunk]) => chunk);
+    }
+    /**
+     * Generate preload tag for a given url
+     */
+    makePreloadTagForUrl(url) {
+        const attributes = this.isCssPath(url)
+            ? { rel: 'preload', as: 'style', href: url }
+            : { rel: 'modulepreload', href: url };
+        return this.generateElement({ tag: 'link', attributes });
+    }
+    /**
+     * Generate style and script tags for the given entrypoints
+     * Also adds the @vite/client script
+     */
+    async generateEntryPointsTagsForDevMode(entryPoints, attributes) {
+        const tags = entryPoints.map(entrypoint => this.generateTag(entrypoint, attributes));
+        const viteHmr = this.getViteHmrScript();
+        const result = [viteHmr, tags];
+        return result.sort(tag => (tag.tag === 'link' ? -1 : 1));
+    }
+    /**
+     * Generate style and script tags for the given entrypoints
+     * using the manifest file
+     */
+    generateEntryPointsTagsWithManifest(entryPoints, attributes) {
+        const manifest = this.manifest();
+        const tags = [];
+        const preloads = [];
+        for (const entryPoint of entryPoints) {
+            const chunk = this.chunk(manifest, entryPoint);
+            preloads.push({ path: chunk.file });
+            tags.push({
+                path: chunk.file,
+                tag: this.generateTag(chunk.file, {
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    integrity: chunk.integrity
+                })
+            });
+            for (const css of chunk.css || []) {
+                preloads.push({ path: css });
+                tags.push({ path: css, tag: this.generateTag(css) });
+            }
+            for (const importNode of chunk.imports || []) {
+                preloads.push({ path: manifest[importNode].file });
+                for (const css of manifest[importNode].css || []) {
+                    const subChunk = this.chunksByFile(manifest, css);
+                    preloads.push({ path: css });
+                    tags.push({
+                        path: css,
+                        tag: this.generateTag(css, {
+                            ...attributes,
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                            // @ts-ignore
+                            integrity: subChunk[0]?.integrity
+                        })
+                    });
+                }
+            }
+        }
+        const preloadsElements = this.uniqueBy(preloads, 'path')
+            .sort(preload => (this.isCssPath(preload.path) ? -1 : 1))
+            .map(preload => this.makePreloadTagForUrl(preload.path));
+        return preloadsElements.concat(tags.map(({ tag }) => tag));
+    }
+    /**
+     * Generate tags for the entry points
+     */
+    async generateEntryPointsTags(entryPoints, attributes) {
+        entryPoints = Array.isArray(entryPoints) ? entryPoints : [entryPoints];
+        if (this.isViteRunning) {
+            return this.generateEntryPointsTagsForDevMode(entryPoints, attributes);
+        }
+        return this.generateEntryPointsTagsWithManifest(entryPoints, attributes);
+    }
+    /**
+     * Returns the manifest file contents
+     *
+     * @throws Will throw an exception when running in dev
+     */
+    manifest() {
+        if (this.isViteRunning) {
+            throw new Error('Cannot read the manifest file when running in dev mode');
+        }
+        if (!this.manifestCache) {
+            this.manifestCache = this.readFileAsJSON(Path.public('assets/.vite/manifest.json'));
+        }
+        return this.manifestCache;
+    }
+}

package/src/vite/plugin.js

@@ -12,14 +12,7 @@ export function athenna(options) {
     const fullOptions = Object.assign({
         assetsUrl: '/assets',
         buildDirectory: 'public/assets',
-        reload: ['./src/resources/views/**/*.edge'],
-        css: {
-            preprocessorOptions: {
-                scss: {
-                    api: 'modern'
-                }
-            }
-        }
+        reload: ['./src/resources/views/**/*.edge']
     }, options);
     return [PluginRestart({ reload: fullOptions.reload }), config(fullOptions)];
 }