rename and clang format

Author: Chris Joel

README.md

@@ -1,5 +1,4 @@
-# 📺 HD HTML
-
+# 🍢 HTML Modules Toolkit
 
 Let's face it: if you publish stuff on the web, you probably noticed that
 it is getting harder and harder to use HTML to do it. HTML Imports failed to
@@ -12,9 +11,10 @@ HTML has been around for a long time. I mean, sure, just a few decades. But,
 that's like a million software years. It is a testament to HTML's versatility
 that we still use it for so many things today. The next generation of web
 content will need to take advantage of a new generation of HTML capabilities.
-HD HTML is a collection of tools and libraries to help web authors write their
-apps and content the way they were meant to be written: in highly declarative
-HTML. HD HTML unlocks the potential of future HTML standards for the projects of today.
+HTML Modules Toolkit is a collection of tools and libraries to help web authors
+write their apps and content the way they were meant to be written: in highly
+declarative HTML. HTML Modules Toolkit unlocks the potential of future HTML
+standards for the projects of today.
 
 ## HTML Modules
 
@@ -30,10 +30,10 @@ might look like once they are standard and implemented by browsers.
 
 ## Future HTML today
 
-HD HTML intends to support workflows that incorporate future HTML standards like
-HTML Modules. Today, this project includes transforms for incorporating HTML
-Modules into build pipelines, and also middleware for using HTML Modules
-seamlessly inside of a dev server.
+HTML Modules Toolkit intends to support workflows that incorporate future HTML
+standards like HTML Modules. Today, this project includes transforms for
+incorporating HTML Modules into build pipelines, and also middleware for using
+HTML Modules seamlessly inside of a dev server.
 
 The standards that this project builds upon are still at a very early stage,
 so these tools should be considered to be in a similar state. We will adapt and

src/document-view.ts

@@ -12,20 +12,20 @@
  * http://polymer.github.io/PATENTS.txt
  */
 
-import { parse as parseHtml, serialize as serializeDocument } from 'parse5';
 import * as dom from 'dom5';
+import {parse as parseHtml, serialize as serializeDocument} from 'parse5';
+import {ASTNode} from 'parse5';
 import * as File from 'vinyl';
-import { ASTNode } from 'parse5';
 
-import { getFileContents } from './file.js';
+import {getFileContents} from './file.js';
 
 const p = dom.predicates;
 
 const scripts = p.hasTagName('script');
 const external = p.hasAttr('src');
 const inline = p.NOT(external);
-const standard = p.OR(p.hasAttrValue('type', 'text/javascript'),
-    p.NOT(p.hasAttr('type')));
+const standard =
+    p.OR(p.hasAttrValue('type', 'text/javascript'), p.NOT(p.hasAttr('type')));
 const moduleScript = p.hasAttrValue('type', 'module');
 const worker = p.hasAttrValue('type', 'worker');
 
@@ -38,7 +38,8 @@ export class DocumentView {
     return this.fromSourceString(await getFileContents(file));
   }
 
-  constructor(public document: ASTNode) {}
+  constructor(public document: ASTNode) {
+  }
 
   get inlineScripts() {
     return dom.queryAll(this.document, p.AND(scripts, inline));
@@ -76,4 +77,3 @@ export class DocumentView {
     return serializeDocument(this.document);
   }
 };
-

src/file.ts

@@ -12,12 +12,12 @@
  * http://polymer.github.io/PATENTS.txt
  */
 
+import * as fs from 'fs';
+import * as nodePath from 'path';
+import {Transform} from 'stream';
+import {promisify} from 'util';
 import * as File from 'vinyl';
 import * as vfs from 'vinyl-fs';
-import * as nodePath from 'path';
-import * as fs from 'fs';
-import { promisify } from 'util';
-import { Transform } from 'stream';
 
 const stat = promisify(fs.stat);
 
@@ -52,9 +52,11 @@ export async function getFileContents(file: File): Promise<string> {
 
 export class SyntheticFileMap {
   protected fileMap: Map<string, File> = new Map();
-  protected watcher: fs.FSWatcher | null = null;
+  protected watcher: fs.FSWatcher|null = null;
 
-  constructor(readonly basePath: string, protected makeTransform: () => Transform) {
+  constructor(
+      readonly basePath: string,
+      protected makeTransform: () => Transform) {
     this.watchFilesystem();
   }
 
@@ -63,11 +65,11 @@ export class SyntheticFileMap {
       return;
     }
 
-    this.watcher = fs.watch(this.basePath, {
-      recursive: true,
-      persistent: false
-    }, (eventType: string, filename: string) =>
-        this.onFsEvent(eventType, filename));
+    this.watcher = fs.watch(
+        this.basePath,
+        {recursive: true, persistent: false},
+        (eventType: string, filename: string) =>
+            this.onFsEvent(eventType, filename));
   }
 
   stopWatchingFilesystem() {
@@ -91,7 +93,8 @@ export class SyntheticFileMap {
       if (!stats.isDirectory()) {
         return true;
       }
-    } catch (e) {}
+    } catch (e) {
+    }
 
     return false;
   }
@@ -108,23 +111,25 @@ export class SyntheticFileMap {
 
       vfs.src([filePath])
           .pipe(this.makeTransform())
-          .on('error', (error) => {
-            console.error(error);
-            reject(error);
-          })
-          .on('data', (file: File) => {
-            const newFilename = nodePath.basename(file.path);
-            // The new filename of the original module will have `.js` appended
-            // if it originally ended in `.html`. Newly generated files can be
-            // referenced by their suggested paths.
-            const storedName = newFilename === `${originalFilename}.js`
-                ? filePath
-                : file.path;
-
-            // NOTE(cdata): A transform may emit more than one file here, as is
-            // the case for HTML Modules => JS Modules
-            this.fileMap.set(storedName, file);
-          })
+          .on('error',
+              (error) => {
+                console.error(error);
+                reject(error);
+              })
+          .on('data',
+              (file: File) => {
+                const newFilename = nodePath.basename(file.path);
+                // The new filename of the original module will have `.js`
+                // appended if it originally ended in `.html`. Newly generated
+                // files can be referenced by their suggested paths.
+                const storedName = newFilename === `${originalFilename}.js` ?
+                    filePath :
+                    file.path;
+
+                // NOTE(cdata): A transform may emit more than one file here, as
+                // is the case for HTML Modules => JS Modules
+                this.fileMap.set(storedName, file);
+              })
           .on('end', () => {
             if (this.fileMap.has(filePath)) {
               resolve(this.fileMap.get(filePath));

src/html-module-specifier-transform.ts

@@ -12,18 +12,18 @@
  * http://polymer.github.io/PATENTS.txt
  */
 
-import * as File from 'vinyl';
 import * as dom from 'dom5';
-import { Transform } from 'stream';
+import {Transform} from 'stream';
+import * as File from 'vinyl';
 
-import { getFileContents } from './file.js';
-import { transformStream } from './stream.js';
-import { DocumentView } from './document-view.js';
-import { ScriptView } from './script-view.js';
+import {DocumentView} from './document-view.js';
+import {getFileContents} from './file.js';
+import {ScriptView} from './script-view.js';
+import {transformStream} from './stream.js';
 
 
 export const htmlModuleSpecifierTransform = (): Transform =>
-    transformStream<File, File>(async (file: File): Promise<File> => {
+    transformStream<File, File>(async(file: File): Promise<File> => {
       if (/.html$/.test(file.path)) {
         return await transformSpecifiersInHtmlFile(file);
       } else if (/.js$/.test(file.path)) {
@@ -35,59 +35,53 @@ export const htmlModuleSpecifierTransform = (): Transform =>
 
 
 export const transformSpecifiersInHtmlFile =
-    async (file: File): Promise<File> => {
-      const htmlString = transformSpecifiersInHtmlString(
-          await getFileContents(file));
+    async(file: File): Promise<File> => {
+  const htmlString =
+      transformSpecifiersInHtmlString(await getFileContents(file));
 
-      file.contents = Buffer.from(htmlString);
+  file.contents = Buffer.from(htmlString);
 
-      return file;
-    };
+  return file;
+};
 
 
-export const transformSpecifiersInJsFile =
-    async (file: File): Promise<File> => {
-      const jsString = transformSpecifiersInJsString(
-          await getFileContents(file));
+export const transformSpecifiersInJsFile = async(file: File): Promise<File> => {
+  const jsString = transformSpecifiersInJsString(await getFileContents(file));
 
-      file.contents = Buffer.from(jsString);
+  file.contents = Buffer.from(jsString);
 
-      return file;
-    };
-
-
-export const transformSpecifiersInHtmlString =
-    (htmlString: string): string => {
-      const documentView = DocumentView.fromSourceString(htmlString);
-      const {
-        inlineModuleScripts,
-        externalModuleScripts
-      } = documentView;
-
-      for (const script of externalModuleScripts) {
-        const src = dom.getAttribute(script, 'src');
-        if (/.html$/.test(src)) {
-          dom.setAttribute(script, 'src', `${src}.js`);
-        }
-      }
+  return file;
+};
 
-      for (const script of inlineModuleScripts) {
-        const jsString = transformSpecifiersInJsString(
-            dom.getTextContent(script));
 
-        dom.setTextContent(script, jsString);
-      }
+export const transformSpecifiersInHtmlString = (htmlString: string): string => {
+  const documentView = DocumentView.fromSourceString(htmlString);
+  const {inlineModuleScripts, externalModuleScripts} = documentView;
 
-      return documentView.toString();
-    };;
+  for (const script of externalModuleScripts) {
+    const src = dom.getAttribute(script, 'src');
+    if (/.html$/.test(src)) {
+      dom.setAttribute(script, 'src', `${src}.js`);
+    }
+  }
+
+  for (const script of inlineModuleScripts) {
+    const jsString = transformSpecifiersInJsString(dom.getTextContent(script));
+
+    dom.setTextContent(script, jsString);
+  }
+
+  return documentView.toString();
+};
+;
 
 
 export const transformSpecifiersInJsString = (jsString: string): string => {
   const scriptView = ScriptView.fromSourceString(jsString);
-  const { importDeclarations } = scriptView;
+  const {importDeclarations} = scriptView;
 
   for (const declaration of importDeclarations) {
-    const { source } = declaration;
+    const {source} = declaration;
     if (/.html$/.test(source.value)) {
       source.value = source.value.replace(/\.html$/, '.html.js');
       source.raw = source.raw.replace(/\.html$/, '.html.js');
@@ -96,4 +90,3 @@ export const transformSpecifiersInJsString = (jsString: string): string => {
 
   return scriptView.toString();
 };
-

src/html-module-transform/express-middleware.ts

@@ -12,19 +12,18 @@
  * http://polymer.github.io/PATENTS.txt
  */
 
+import {Request, RequestHandler, Response} from 'express';
 import * as File from 'vinyl';
-import { Request, Response, RequestHandler } from 'express';
 
-import { SyntheticFileMap } from '../file.js';
-import { htmlModuleTransform } from '../html-module-transform.js';
+import {SyntheticFileMap} from '../file.js';
+import {htmlModuleTransform} from '../html-module-transform.js';
 
 export const htmlModulesMiddleware = (root: string = './'): RequestHandler => {
-
   const syntheticFileMap =
       new SyntheticFileMap(root, () => htmlModuleTransform());
 
   return async (request: Request, response: Response, next: () => void) => {
-    const { path } = request;
+    const {path} = request;
     const hasFile = await syntheticFileMap.hasFile(path);
 
     if (!hasFile) {
@@ -46,4 +45,3 @@ export const htmlModulesMiddleware = (root: string = './'): RequestHandler => {
     response.send(file.contents);
   };
 };
-

src/html-module-transform/koa-middleware.ts

@@ -12,20 +12,19 @@
  * http://polymer.github.io/PATENTS.txt
  */
 
+import {Context, Middleware} from 'koa';
 import * as File from 'vinyl';
-import { Context, Middleware } from 'koa';
 
-import { SyntheticFileMap } from '../file.js';
-import { htmlModuleTransform } from '../html-module-transform.js';
+import {SyntheticFileMap} from '../file.js';
+import {htmlModuleTransform} from '../html-module-transform.js';
 
 export const htmlModulesMiddleware = (root: string = './'): Middleware => {
-
   const syntheticFileMap =
       new SyntheticFileMap(root, () => htmlModuleTransform());
 
   return async (ctx: Context, next: Function) => {
-    const { request, response } = ctx;
-    const { path } = request;
+    const {request, response} = ctx;
+    const {path} = request;
     const hasFile = await syntheticFileMap.hasFile(path);
 
     if (!hasFile) {

src/script-view.ts

@@ -17,15 +17,13 @@ import * as walk from 'acorn/dist/walk';
 import * as escodegen from 'escodegen';
 import * as File from 'vinyl';
 
-import { getFileContents } from './file.js';
+import {getFileContents} from './file.js';
 
 const injectAcornImportMeta = require('acorn-import-meta/inject');
 
 const acorn = injectAcornImportMeta(acornBase);
 
-const {
-  parse: parseJs
-} = acorn;
+const {parse: parseJs} = acorn;
 const serializeJs = escodegen.generate;
 
 const $verbatim = Symbol('verbatim');
@@ -40,9 +38,7 @@ export class ScriptView {
       sourceType: 'module',
       ecmaVersion: 9,
       allowImportExportEverywhere: true,
-      plugins: {
-        importMeta: true
-      }
+      plugins: {importMeta: true}
     }));
   }
 
@@ -76,9 +72,6 @@ export class ScriptView {
   }
 
   toString() {
-    return serializeJs(this.script, <any>{
-      verbatim: $verbatim
-    });
+    return serializeJs(this.script, <any>{verbatim: $verbatim});
   }
 };
-