source/Component.js

import 'dom-renderer/dist/polyfill';
 
import { stringifyDOM } from 'dom-renderer';
 
import {readFile, readdir, statSync, outputFile, remove} from 'fs-extra';
 
import {join, basename, dirname, extname} from 'path';
 
import Package from 'amd-bundle';
 
import * as Parser from './parser';
 
import { folderOf, metaOf } from './utility';
 
import { toDataURI } from '@tech_query/node-toolkit';
 
 
/**
 * Component packer
 */
export default  class Component {
    /**
     * @param {string} path - Component directory
     */
    constructor(path) {
 
        this.path = path;
 
        this.name = basename( path );
 
        this.entry = join(path, 'index');
    }
 
    /**
     * @param {string} path
     *
     * @return {DocumentFragment}
     */
    static async parseHTML(path) {
 
        const box = document.createElement('div'),
            fragment = document.createDocumentFragment();
 
        box.innerHTML = (await readFile( path ))  +  '';
 
        fragment.append(... box.childNodes);
 
        return fragment;
    }
 
    /**
     * @param {string}  source - File path or Style source code
     * @param {?string} type   - MIME type
     * @param {string}  [base] - Path of the file which `@import` located in
     *
     * @return {?Element} Style element
     */
    static async parseCSS(source, type, base) {
 
        var style;
 
        type = type  ?  type.split('/')[1]  :  extname( source ).slice(1);
 
        if (! source.includes('\n'))
            source = await readFile(base = source) + '';
 
        style = Parser[type]  &&  await Parser[type](source, dirname( base ));
 
        return  style && Object.assign(
            document.createElement('style'),  {textContent: style}
        );
    }
 
    /**
     * @param {DocumentFragment} fragment
     *
     * @return {Element[]}
     */
    static findStyle(fragment) {
 
        return  [ ].concat.apply([ ],  Array.from(
            fragment.querySelectorAll('link[rel="stylesheet"], template'),
            tag  =>  tag.content ?
                Array.from( tag.content.querySelectorAll('style') )  :  tag
        ));
    }
 
    /**
     * @param {string} tagName
     *
     * @return {string}
     */
    static identifierOf(tagName) {
 
        return  tagName[0].toUpperCase() +
            tagName.replace(/-(\w)/g,  (_, char) => char.toUpperCase()).slice(1);
    }
 
    /**
     * @param {String} path - Full name of a JS file
     *
     * @return {String} Packed JS source code
     */
    static packJS(path) {
 
        const single_entry = join(folderOf().lib || '',  'index.js');
 
        const name = (path === single_entry)  &&  metaOf().name;
 
        path = path.split('.').slice(0, -1).join('.');
 
        return  (new Package( path )).bundle(
            name  ||  basename( dirname( path ) )
        );
    }
 
    /**
     * @return {DocumentFragment} HTML version bundle of this component
     */
    async toHTML() {
 
        const fragment = await Component.parseHTML(this.entry + '.html'),
            CSS = [ ];
 
        for (let sheet  of  Component.findStyle( fragment )) {
 
            let style = await Component.parseCSS(
                (sheet.tagName === 'STYLE')  ?
                    sheet.textContent  :  join(this.path, sheet.getAttribute('href')),
                sheet.type,
                this.entry + '.css'
            );
 
            if (! style)  continue;
 
            sheet.replaceWith( style );
 
            if (style.parentNode === fragment)  CSS.push( style );
        }
 
        fragment.querySelector('template').content.prepend(... CSS);
 
        const script = fragment.querySelector('script');
 
        if ( script )
            script.replaceWith(Object.assign(document.createElement('script'), {
                text:  `\n${
                    Component.packJS( join(this.path, script.getAttribute('src')) )
                }\n`
            }));
 
        return fragment;
    }
 
    /**
     * @protected
     *
     * @param {String} file - File path
     *
     * @return {String} Legal ECMAScript source code
     */
    async assetOf(file) {
 
        switch ( extname( file ).slice(1) ) {
            case 'html':
            case 'htm':
                file = stringifyDOM(await this.toHTML());  break;
            case 'css':
            case 'less':
            case 'sass':
            case 'scss':
            case 'stylus':
                file = (await Component.parseCSS( file )).textContent;  break;
            case 'js':
                return;
            case 'json':
                return  (await readFile( file )) + '';
            case 'yaml':
            case 'yml':
                return  Parser.yaml((await readFile( file )) + '');
            default:
                file = toDataURI( file );
        }
 
        return  JSON.stringify( file );
    }
 
    /**
     * @return {string} JS version bundle of this component
     */
    async toJS() {
 
        const temp_file = [ ];
 
        for (let file  of  await readdir( this.path )) {
 
            file = join(this.path, file);
 
            if (! statSync( file ).isFile())  continue;
 
            let temp = `${file}.js`;
 
            file = await this.assetOf( file );
 
            if (!(file != null))  continue;
 
            temp_file.push( temp );
 
            await outputFile(temp,  `export default ${file}`);
        }
 
        const source = Component.packJS(this.entry + '.js');
 
        await Promise.all( temp_file.map(file => remove( file )) );
 
        return source;
    }
}