123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432
/** * This file contains the functions which create assets from the given paths. * An asset is the unit of build target. * * There are 5 types of assets * - HtmlAsset * - CssAsset * - ScssAsset * - ScriptAsset - represents javascript or typescript * - ImageAsset */import {  basename,  dirname,  Document,  DOMParser,  Element,  join,  posixPathJoin,} from "./deps.ts";import {  decoder,  encoder,  getLocalDependencyPaths,  isLocalUrl,  md5,  qs,} from "./util.ts";import { bundleByEsbuild } from "./bundle_util.ts";import { logger } from "./logger_util.ts";import { compile as compileSass } from "./sass_util.ts";
/** * Options for asset generation. * * @property watchPaths true when the system is watching the paths i.e. packup serve * @property onBuild The hook which is called when the build is finished. Used when `packup serve` */type GenerateAssetsOptions = {  watchPaths?: boolean;  onBuild?: () => void;  insertLivereloadScript?: boolean;  livereloadPort?: number;  mainAs404?: boolean;  publicUrl: string;};
/** * Generates assets from the given entrypoint path (html). * Also returns watch paths when `watchPaths` option is true. * * Used both in `packup build` and `packup serve`. */export async function generateAssets(  path: string,  opts: GenerateAssetsOptions,): Promise<[AsyncGenerator<File, void, void>, string[]]> {  const buildStarted = Date.now();  const htmlAsset = await HtmlAsset.create(path);  const { pageName, base } = htmlAsset;  const pathPrefix = opts.publicUrl || ".";
  const assets = [...htmlAsset.extractReferencedAssets()];
  if (opts.insertLivereloadScript) {    htmlAsset.insertScriptTag(      `http://localhost:${opts.livereloadPort!}/livereload.js`,    );  }
  const generator = (async function* () {    for (const a of assets) {      // TODO(kt3k): These can be concurrent      const files = await a.createFileObject({ pageName, base, pathPrefix });      for (const file of files) yield file;    }
    // This needs to be the last.    const files = await htmlAsset.createFileObject({      pageName,      base,      pathPrefix,    });    for (const file of files) yield file;    if (opts.mainAs404) {      yield Object.assign(        (await htmlAsset.createFileObject({ pageName, base, pathPrefix }))[0],        { name: "404", lastModified: 0 },      );    }    logger.log(`${path} bundled in ${Date.now() - buildStarted}ms`);
    // If build hook is set, call it. Used for live reloading.    opts.onBuild?.();    logger.debug("onBuild");  })();
  const watchPaths = opts.watchPaths    ? (await Promise.all(assets.map((a) => a.getWatchPaths(htmlAsset.base))))      .flat()    : [];
  return [generator, [path, ...watchPaths]];}
/** * Builds the entrypoint and watches the all files referenced from the entrypoint. * If any change is happend in any of the watched paths, then builds again and update * the watching paths. Used in `packup serve`. */export async function* watchAndGenAssets(  path: string,  opts: GenerateAssetsOptions,): AsyncGenerator<File, void, void> {  opts = {    ...opts,    watchPaths: true,    insertLivereloadScript: true,  };  let [assets, watchPaths] = await generateAssets(path, opts);
  while (true) {    for await (const file of assets) {      yield file;    }    const watcher = Deno.watchFs(watchPaths);    for await (const e of watcher) {      logger.log("Changed: " + e.paths.join(""));      break;      // watcher.close();    }    logger.log("Rebuilding");    await new Promise<void>((resolve) => setTimeout(() => resolve(), 100));    [assets, watchPaths] = await generateAssets(path, opts);  }}
type CreateFileObjectParams = {  pageName: string;  base: string;  pathPrefix: string;};
type Asset = {  getWatchPaths(base: string): Promise<string[]>;  createFileObject(params: CreateFileObjectParams): Promise<File[]>;};
const docType = encoder.encode("<!DOCTYPE html>");
/** HtmlAsset represents the html file */class HtmlAsset implements Asset {  static async create(path: string): Promise<HtmlAsset> {    logger.debug("Reading", path);    const html = decoder.decode(await Deno.readFile(path));    return new HtmlAsset(html, path);  }
  #doc: Document;  #path: string;  base: string;  #filename: string;  pageName: string;  constructor(html: string, path: string) {    this.#doc = new DOMParser().parseFromString(html, "text/html")!;    this.#path = path;    this.base = dirname(path);    this.#filename = basename(path);    if (!this.#filename.endsWith(".html")) {      throw new Error(`Entrypoint needs to be an html file: ${path}`);    }
    this.pageName = this.#filename.replace(/\.html$/, "");
    if (!this.pageName) {      throw new Error(`Bad entrypoint name: ${path}`);    }  }
  extractReferencedAssets() {    return extractReferencedAssets(this.#doc);  }
  createFileObject(_params: CreateFileObjectParams) {    return Promise.resolve([Object.assign(      new Blob([docType, encoder.encode(this.#doc.documentElement!.outerHTML)]),      { name: this.#filename, lastModified: 0 },    )]);  }
  getWatchPaths() {    return Promise.resolve([this.#path]);  }
  insertScriptTag(path: string) {    const script = this.#doc.createElement("script");    script.setAttribute("src", path);    this.#doc.body.insertBefore(script, null);  }}
/** ScssAsset represents a <link rel="stylesheet"> tag in the html */class CssAsset implements Asset {  static create(link: Element): CssAsset | null {    const href = link.getAttribute("href");    const rel = link.getAttribute("rel");    if (rel !== "stylesheet") {      return null;    }    if (!href) {      logger.warn(        "<link> tag has rel=stylesheet attribute, but doesn't have href attribute",      );      return null;    }    if (href.startsWith("https://") || href.startsWith("http://")) {      // If href starts with http(s):// schemes, we consider these as      // external reference. So skip handling these      return null;    }    if (href.endsWith(".scss")) {      return new ScssAsset(href, link);    }    return new CssAsset(href, link);  }
  _el: Element;  _href: string;  _dest?: string;  constructor(href: string, link: Element) {    this._el = link;    this._href = href;  }
  getWatchPaths(base: string): Promise<string[]> {    return Promise.resolve([join(base, this._href)]);  }
  async createFileObject(    { pageName, base, pathPrefix }: CreateFileObjectParams,  ): Promise<File[]> {    const data = await Deno.readFile(join(base, this._href));    this._dest = `${pageName}.${md5(data)}.css`;    this._el.setAttribute("href", posixPathJoin(pathPrefix, this._dest));    return [      Object.assign(new Blob([data]), { name: this._dest, lastModified: 0 }),    ];  }}
/** ScssAsset represents a <link rel="stylesheet"> tag * with href having .scss extension in the html */class ScssAsset extends CssAsset {  // TODO(kt3k): implement getWatchPaths correctly  async createFileObject(    { pageName, base, pathPrefix }: CreateFileObjectParams,  ): Promise<File[]> {    const scss = await Deno.readFile(join(base, this._href));    this._dest = `${pageName}.${md5(scss)}.css`;    this._el.setAttribute("href", posixPathJoin(pathPrefix, this._dest));    return [Object.assign(new Blob([await compileSass(decoder.decode(scss))]), {      name: this._dest,      lastModified: 0,    })];  }}
/** ScriptAsset represents a <script> tag in the html */class ScriptAsset implements Asset {  static create(script: Element): ScriptAsset | null {    const src = script.getAttribute("src");    if (!src) {      // this <script> should contain inline scripts.      return null;    }    if (src.startsWith("http://") || src.startsWith("https://")) {      // If "src" starts with http(s):// schemes, we consider these as      // external reference. So skip handling these      return null;    }    return new ScriptAsset(src, script);  }
  #src: string;  #dest?: string;  #el: Element;
  constructor(src: string, script: Element) {    this.#src = src;    this.#el = script;  }
  async getWatchPaths(base: string): Promise<string[]> {    return await getLocalDependencyPaths(join(base, this.#src));  }
  async createFileObject({    pageName,    base,    pathPrefix,  }: CreateFileObjectParams): Promise<File[]> {    const path = join(base, this.#src);    const data = await bundleByEsbuild(path);    this.#dest = `${pageName}.${md5(data)}.js`;    this.#el.setAttribute("src", posixPathJoin(pathPrefix, this.#dest));    return [      Object.assign(new Blob([data]), { name: this.#dest, lastModified: 0 }),    ];  }}
/** ImageAsset represents a `<img>` tag in the html */class ImageAsset implements Asset {  static create(img: Element): ImageAsset | null {    let sources: string[] = [];
    const src = img.getAttribute("src");    const srcset = img.getAttribute("srcset");
    if (img.tagName === "IMG" && !src) {      logger.warn("<img> tag doesn't have src attribute");      return null;    }
    if (src && isLocalUrl(src)) sources.push(src);    if (srcset) {      sources.push(        ...srcset          .split(",") // Separate the different srcset          .filter(Boolean) // Remove empty strings          .map((src) => src.trim()) // Remove white spaces          .map((src) => src.split(" ")[0]) // Separate the source from the size          .filter(isLocalUrl), // Remove external references      );    }
    // Remove duplicates    sources = [...new Set(sources)];
    // If "src" or "srcset" only have external references, skip handling    if (sources.length === 0) return null;
    return new ImageAsset(sources, img);  }
  #sources: string[];  #el: Element;
  constructor(sources: string[], image: Element) {    this.#sources = sources;    this.#el = image;  }
  async getWatchPaths(base: string): Promise<string[]> {    const localDependencyPaths: Promise<string[]>[] = [];    for (const src of this.#sources) {      localDependencyPaths.push(getLocalDependencyPaths(join(base, src)));    }    return (await Promise.all(localDependencyPaths))      .flatMap((path) => path); // Flatten result  }
  async createFileObject(    { pageName, base, pathPrefix }: CreateFileObjectParams,  ): Promise<File[]> {    // TODO(tjosepo): Find a way to avoid creating copies of the same image    // when creating a bundle    const files: File[] = [];
    for (const src of this.#sources) {      const data = await Deno.readFile(join(base, src));      const [, extension] = src.match(/\.([\w]+)$/) ?? [];      const dest = `${pageName}.${md5(data)}.${extension}`;
      if (this.#el.getAttribute("src")?.match(src)) {        this.#el.setAttribute("src", posixPathJoin(pathPrefix, dest));      }
      const srcset = this.#el.getAttribute("srcset");      if (srcset?.includes(src)) {        // TODO(tjosepo): Find a better way to replace the old src with the new        // dest without only using `string.replace()`        this.#el.setAttribute(          "srcset",          srcset.replace(src, posixPathJoin(pathPrefix, dest)),        );      }
      files.push(        Object.assign(new Blob([data]), { name: dest, lastModified: 0 }),      );    }
    return files;  }}
export function* extractReferencedAssets(  doc: Document,): Generator<Asset, void, void> {  yield* extractReferencedScripts(doc);  yield* extractReferencedStyleSheets(doc);  yield* extractReferencedImages(doc);}
function* extractReferencedScripts(  doc: Document,): Generator<Asset, void, void> {  for (const s of qs(doc, "script")) {    const asset = ScriptAsset.create(s);    if (asset) yield asset;  }}
function* extractReferencedStyleSheets(  doc: Document,): Generator<Asset, void, void> {  for (const link of qs(doc, "link")) {    const asset = CssAsset.create(link);    if (asset) yield asset;  }}
function* extractReferencedImages(  doc: Document,): Generator<Asset, void, void> {  for (const img of [...qs(doc, "img"), ...qs(doc, "source")]) {    const asset = ImageAsset.create(img);    if (asset) yield asset;  }}