From 4b3d46ab988d7313a5ef7744c12833bb8636ba8d Mon Sep 17 00:00:00 2001
From: Grant Hutchinson <h.g.utchinson@gmail.com>
Date: Thu, 12 Nov 2020 21:02:16 -0500
Subject: [PATCH] Rfc/issue 185 Transforms API (pt. 1) (#422)

* basic unbundled rendering of home page

* got livereload working for all files

* JSON support

* import CSS support

* disable eslint complexity

* header working

* ading banner and stylinh and fixed binary image loading

* integrated evergreen deps

* fully restored the home page in develop mode

* wip getting serialization working

* wip getting serialization working

* clean up and refactor, serialize WIP

* upgrade puppeteer to latest

* a  bit hacky but home page is now being built for production

* render header navigation from graph

* page template working for site in development

* all pages working in develop

* all pages serializing for prod

* sort header and shelf

* shelf expansion and table of contents

* label fallback handling

* fix index page rendering

* clean up logging

* favicon support

* refactor server lifecycle to use compilation and expose devServer

* built in serve command

* serve docs

* add support for app templates

* pretty URLs

* shelf working WIP

* quick styling tweak for side nav

* copy assets and graph.json in copy lifecycle

* basic support for css files

* fix copy error for nested folders

* call rollup from JS API

* rollup configuration sourced from compilation

* make sure to await Promise.all

* Rfc/issue 355 organize serve lifecycle (#419)

* task: organize serve

* fix: remove ctx from resolve

* fix: refactor further

* task: scope filters by file

* linting

* renable default tests and limited smoke tests

* disable all tests enable subset of tests

* task: add custom transforms API from koa context

* fix: remove redundant line

* fix: more descriptive var

* meta specs

* fix: merge conflict

* enable custom title case

* enable custom workspace spec

* track missing dev dep

* enabled workspace assets test case

* fix link closing slash

* content-outlet refactor

* enabled getting started test case

* enable nested directory test case

* enable app template case

* enable page template spec

* enable user directory mapping case

* update comments

* task: standardize transforms

* fix: prod render

* task: adding disabled markdown transform

* fix: cleanup class names

* fix: cleanup class names

* got code markdown rendering and added support for custom plugins from config

* markdown plugins working including prism

* default markdown specs

* enable all tests

* rename markdown case

* syntax highlighting markdown spec

* fix: transform fixes

* task: add markdown and json transforms

* fix: header rendering, comment out eve-container temp

* fix: cleanup

* fix: remove node_module seperate transform, instead use js/css with path resolver

* task: remove old transforms

* fix: immutability of compilation object

* fix: tests, page-templates, defaults

* fix: cleanup

* fix: remove outdated transforms

Co-authored-by: Owen Buckley <owenbuckley13@gmail.com>
---
 packages/cli/src/lifecycles/serve.js          |  59 ++--
 packages/cli/src/templates/app.html           |  15 +
 packages/cli/src/transforms/css.transform.js  |  34 ---
 packages/cli/src/transforms/html.transform.js | 268 ------------------
 .../cli/src/transforms/images.transform.js    |  42 ---
 packages/cli/src/transforms/js.transform.js   |  19 --
 packages/cli/src/transforms/json.transform.js |  31 --
 .../src/transforms/node-modules.transform.js  |  22 --
 .../cli/src/transforms/transform.assets.js    |  59 ++++
 packages/cli/src/transforms/transform.css.js  |  47 +++
 packages/cli/src/transforms/transform.html.js |  50 ++++
 .../cli/src/transforms/transform.interface.js |  24 ++
 packages/cli/src/transforms/transform.js.js   |  38 +++
 packages/cli/src/transforms/transform.json.js |  45 +++
 packages/cli/src/transforms/transform.md.js   | 107 +++++++
 .../cli/src/transforms/transform.tools.js     | 183 ++++++++++++
 .../cases/build.default/build.default.spec.js |   2 +-
 www/components/header/header.js               |   1 -
 18 files changed, 611 insertions(+), 435 deletions(-)
 create mode 100644 packages/cli/src/templates/app.html
 delete mode 100644 packages/cli/src/transforms/css.transform.js
 delete mode 100644 packages/cli/src/transforms/html.transform.js
 delete mode 100644 packages/cli/src/transforms/images.transform.js
 delete mode 100644 packages/cli/src/transforms/js.transform.js
 delete mode 100644 packages/cli/src/transforms/json.transform.js
 delete mode 100644 packages/cli/src/transforms/node-modules.transform.js
 create mode 100644 packages/cli/src/transforms/transform.assets.js
 create mode 100644 packages/cli/src/transforms/transform.css.js
 create mode 100644 packages/cli/src/transforms/transform.html.js
 create mode 100644 packages/cli/src/transforms/transform.interface.js
 create mode 100644 packages/cli/src/transforms/transform.js.js
 create mode 100644 packages/cli/src/transforms/transform.json.js
 create mode 100644 packages/cli/src/transforms/transform.md.js
 create mode 100644 packages/cli/src/transforms/transform.tools.js

diff --git a/packages/cli/src/lifecycles/serve.js b/packages/cli/src/lifecycles/serve.js
index 4bb24f0f0..47dabeb84 100644
--- a/packages/cli/src/lifecycles/serve.js
+++ b/packages/cli/src/lifecycles/serve.js
@@ -4,30 +4,55 @@ const { promises: fsp } = require('fs');
 const path = require('path');
 const Koa = require('koa');
 
-const filterHTML = require('../transforms/html.transform');
-const filterModule = require('../transforms/node-modules.transform');
-const filterCSS = require('../transforms/css.transform');
-const filterJavascript = require('../transforms/js.transform');
-const filterJSON = require('../transforms/json.transform');
-const filterImages = require('../transforms/images.transform');
+const Transform = require('../transforms/transform.interface');
+const HTMLTransform = require('../transforms/transform.html');
+const MarkdownTransform = require('../transforms/transform.md');
+const CSSTransform = require('../transforms/transform.css');
+const JSTransform = require('../transforms/transform.js');
+const JSONTransform = require('../transforms/transform.json.js');
+const AssetTransform = require('../transforms/transform.assets');
 
 function getDevServer(compilation) {
   const app = new Koa();
 
-  // TODO use url.endsWith!!
-  // eslint-disable-next-line no-unused-vars
   app.use(async ctx => {
-    // console.debug('URL', ctx.request.url);
-    const { config, context } = compilation;
-    const { userWorkspace } = context;
+    let response = {
+      body: '',
+      contentType: '',
+      extension: ''
+    };
+
+    request = {
+      header: ctx.request.header,
+      url: ctx.request.url,
+      compilation: { ...compilation }
+    };
 
     try {
-      await filterHTML(ctx, config, userWorkspace);
-      await filterModule(ctx);
-      await filterJSON(ctx, context);
-      await filterJavascript(ctx, userWorkspace);
-      await filterCSS(ctx, userWorkspace);
-      await filterImages(ctx, userWorkspace);
+      // default transforms 
+      const defaultTransforms = [
+        new HTMLTransform(request),
+        new MarkdownTransform(request),
+        new CSSTransform(request),
+        new JSTransform(request),
+        new JSONTransform(request),
+        new AssetTransform(request)
+      ];
+
+      // walk through all transforms
+      await Promise.all(defaultTransforms.map(async (plugin) => {
+        if (plugin instanceof Transform && plugin.shouldTransform()) {
+
+          const transformedResponse = await plugin.applyTransform();
+
+          response = { 
+            ...transformedResponse
+          };
+        }
+      }));
+
+      ctx.set('Content-Type', `${response.contentType}`);
+      ctx.body = response.body;
     } catch (err) {
       console.log(err);
     }
diff --git a/packages/cli/src/templates/app.html b/packages/cli/src/templates/app.html
new file mode 100644
index 000000000..9c4b24a55
--- /dev/null
+++ b/packages/cli/src/templates/app.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en" prefix="og:http://ogp.me/ns#">
+  <head>
+    <title></title>
+    <meta charset='utf-8'>
+    <meta name='viewport' content='width=device-width, initial-scale=1'/>
+    <meta-outlet></meta-outlet>
+  </head>
+  <body>
+    <section>
+      <h1>Welcome to my website!</h1>
+      <content-outlet></content-outlet>
+    </section>
+  </body>
+</html> 
\ No newline at end of file
diff --git a/packages/cli/src/transforms/css.transform.js b/packages/cli/src/transforms/css.transform.js
deleted file mode 100644
index 94b352d21..000000000
--- a/packages/cli/src/transforms/css.transform.js
+++ /dev/null
@@ -1,34 +0,0 @@
-const path = require('path');
-const { promises: fsp } = require('fs');
-
-module.exports = filterStyles = async (ctx, userWorkspace) => {
-  return new Promise(async (resolve, reject) => {
-    try {
-      if (ctx.request.url.indexOf('.css') >= 0) {
-        const destHeader = ctx.request.header['sec-fetch-dest'];
-        const cssPath = ctx.request.url.indexOf('/node_modules') >= 0
-          ? path.join(process.cwd(), ctx.request.url)
-          : path.join(userWorkspace, ctx.request.url);
-        const css = await fsp.readFile(cssPath, 'utf-8');
-
-        // <style> tag used
-        if (destHeader === 'style') {
-          ctx.set('Content-Type', 'text/css');
-          ctx.body = css;
-        } else if (destHeader === 'empty') {
-          // assume JS import being being used
-          ctx.set('Content-Type', 'text/javascript');
-          // TODO line breaks are bad for fetch, need to return CSS string all on one line
-          ctx.body = `
-            const css = "${css.replace(/\r?\n|\r/g, ' ')}";
-
-            export default css;
-          `;
-        }
-      }
-      resolve();
-    } catch (err) {
-      reject(err);
-    }
-  });
-};
\ No newline at end of file
diff --git a/packages/cli/src/transforms/html.transform.js b/packages/cli/src/transforms/html.transform.js
deleted file mode 100644
index 82ff1d259..000000000
--- a/packages/cli/src/transforms/html.transform.js
+++ /dev/null
@@ -1,268 +0,0 @@
-/* eslint-disable complexity */
-// TODO ^^
-const acorn = require('acorn');
-const { promises: fsp } = require('fs');
-const fs = require('fs');
-const path = require('path');
-const frontmatter = require('front-matter');
-const htmlparser = require('node-html-parser');
-const rehypeStringify = require('rehype-stringify');
-const remarkFrontmatter = require('remark-frontmatter');
-const remarkParse = require('remark-parse');
-const remarkRehype = require('remark-rehype');
-const unified = require('unified');
-const walk = require('acorn-walk');
-
-module.exports = filterHTML = async (ctx, config, userWorkspace) => {
-  return new Promise(async (resolve, reject) => {
-    try {
-      // TODO filter out node modules, only page / user requests from brower
-      // TODO make sure this only happens for "pages", nor partials or fixtures, templates, et)
-      if (ctx.request.url.endsWith('/') || ctx.request.url.endsWith('.html')) {
-        // console.log('URL ends with / or endsWith.html');
-        // TODO get port from compilation
-        // ctx.redirect(`http://localhost:1984${ctx.request.url}index.html`);
-        // }
-        let title = config.title;
-
-        const metaOutletContent = config.meta.map(item => {
-          let metaHtml = '';
-        
-          // TODO better way to implememnt this?  should we implement this?
-          for (const [key, value] of Object.entries(item)) {
-            const isOgUrl = item.property === 'og:url' && key === 'content';
-            const hasTrailingSlash = isOgUrl && value[value.length - 1] === '/';
-            const contextualValue = isOgUrl
-              ? hasTrailingSlash
-                ? `${value}${ctx.request.url.replace('/', '')}`
-                : `${value}${ctx.request.url === '/' ? '' : ctx.request.url}`
-              : value;
-              
-            metaHtml += ` ${key}="${contextualValue}"`;
-          }
-
-          return item.rel
-            ? `<link${metaHtml}/>`
-            : `<meta${metaHtml}/>`;
-        }).join('\n');
-
-        // TODO get pages path from compilation
-        const barePath = ctx.request.url.endsWith('/')
-          ? `${userWorkspace}/pages${ctx.request.url}index`
-          : `${userWorkspace}/pages${ctx.request.url.replace('.html', '')}`;
-
-        // console.debug('bare path', barePath);
-
-        let contents = `
-          <!DOCTYPE html>
-          <html lang="en" prefix="og:http://ogp.me/ns#">
-            <head>
-              <title>${title}</title>
-              <meta charset='utf-8'>
-              <meta name='viewport' content='width=device-width, initial-scale=1'/>
-              <meta-outlet></meta-outlet>
-            </head>
-            <body>
-              <section>
-                <content-outlet>
-                  <h1>Welcome to my website!</h1>
-                </content-outlet>
-              </section>
-            </body>
-          </html>
-        `;
-
-        if (fs.existsSync(`${barePath}.html`)) {
-          // console.debug('this route exists as HTML');
-          contents = await fsp.readFile(`${barePath}.html`, 'utf-8');
-        } else if (fs.existsSync(`${barePath}.md`) 
-          || fs.existsSync(`${userWorkspace}/pages${ctx.request.url.replace('/index.html', '.md')}`) 
-          || fs.existsSync(`${barePath.replace('/index', '.md')}`)) {
-          
-          // TODO all this lookup could probably be handled a bit more gracefully perhaps?
-          // console.debug('this route exists as markdown');
-          const markdownPath = fs.existsSync(`${barePath}.md`)
-            ? `${barePath}.md`
-            : fs.existsSync(`${barePath.replace('/index', '.md')}`)
-              ? `${barePath.replace('/index', '.md')}`
-              : `${userWorkspace}/pages${ctx.request.url.replace('/index.html', '.md')}`;
-          const markdownContents = await fsp.readFile(markdownPath, 'utf-8');
-
-          const rehypePlugins = [];
-          const remarkPlugins = [];
-
-          config.markdown.plugins.forEach(plugin => {
-            if (plugin.indexOf('rehype-') >= 0) {
-              rehypePlugins.push(require(plugin));
-            }
-
-            if (plugin.indexOf('remark-') >= 0) {
-              remarkPlugins.push(require(plugin));
-            }
-          });
-
-          // TODO extract front matter contents from remark-frontmatter instead of frontmatter lib
-          const fm = frontmatter(markdownContents);
-          const processedMarkdown = await unified()
-            .use(remarkParse) // parse markdown into AST
-            .use(remarkFrontmatter) // extract frontmatter from AST
-            .use(...remarkPlugins) // apply userland remark plugins
-            .use(remarkRehype, { allowDangerousHtml: true }) // convert from markdown to HTML AST
-            .use(...rehypePlugins) // apply userland rehype plugins
-            .use(rehypeStringify) // convert AST to HTML string
-            .process(markdownContents);
-
-          // TODO use an app template
-          if (fm.attributes.template) {
-            contents = await fsp.readFile(`${userWorkspace}/templates/${fm.attributes.template}.html`, 'utf-8');
-          } else if (fs.existsSync(`${userWorkspace}/templates/page.html`)) {
-            // console.debug('has a page template!');
-            contents = await fsp.readFile(`${userWorkspace}/templates/page.html`, 'utf-8');
-          }
-
-          // use page title
-          if (fm.attributes.title) {
-            title = `${title} - ${fm.attributes.title}`;
-          }
-
-          contents = contents.replace(/\<content-outlet>(.*)<\/content-outlet>/s, processedMarkdown.contents);
-        } else if (fs.existsSync(`${userWorkspace}/templates/page.html`)) {
-          // console.debug('only has a page template');
-          const page = await fsp.readFile(`${userWorkspace}/templates/page.html`, 'utf-8');
-          
-          contents = page.replace(/\<content-outlet>(.*)<\/content-outlet>/s, contents.match(/\<content-outlet>(.*)<\/content-outlet>/s)[0]);
-        }
-
-        const appTemplate = `${userWorkspace}/templates/app.html`;
-
-        if (fs.existsSync(appTemplate)) {
-          let appTemplateContents = fs.readFileSync(appTemplate, 'utf-8');
-          const root = htmlparser.parse(contents, {
-            script: true,
-            style: true,
-            noscript: true,
-            pre: true
-          });
-          const body = root.querySelector('body');
-          const headScripts = root.querySelectorAll('head script');
-          const headLinks = root.querySelectorAll('head link');
-
-          appTemplateContents = appTemplateContents.replace(/<page-outlet><\/page-outlet>/, body);
-          
-          headScripts.forEach(script => {
-            if (script.rawAttrs !== '') {
-              appTemplateContents = appTemplateContents.replace(/<\/script>/, `
-                </script>\n
-                <script ${script.rawAttrs}></script>\n
-              `);
-            }
-
-            if (script.rawAttrs === '') {
-              appTemplateContents = appTemplateContents.replace(/<\/script>/, `
-                </script>\n
-                <script>
-                  ${script.text}
-                </script>\n
-              `);
-            }
-          });
-
-          headLinks.forEach(link => {
-            appTemplateContents = appTemplateContents.replace(/<\/link>/, `
-              </link>\n
-              <link ${link.rawAttrs}></link>\n
-            `);
-          });
-
-          contents = appTemplateContents;
-        }
-        
-        // TODO use an HTML parser?  https://www.npmjs.com/package/node-html-parser
-        if (process.env.__GWD_COMMAND__ === 'develop') { // eslint-disable-line no-underscore-dangle
-          // TODO setup and teardown should be done together
-          // console.debug('running in develop mode, attach live reload script');
-          contents = contents.replace('</head>', `
-              <script src="http://localhost:35729/livereload.js?snipver=1"></script>
-            </head>
-          `);
-        }
-
-        contents = contents.replace(/type="module"/g, 'type="module-shim"');
-        
-        const importMap = {};
-        const userPackageJson = fs.existsSync(`${userWorkspace}/package.json`)
-          ? require(path.join(userWorkspace, 'package.json')) // its a monorepo?
-          : fs.existsSync(`${process.cwd()}/package.json`)
-            ? require(path.join(process.cwd(), 'package.json'))
-            : {};
-
-        // console.debug('userPackageJson', userPackageJson);
-        // console.debug('dependencies', userPackageJson.dependencies);
-        
-        Object.keys(userPackageJson.dependencies || {}).forEach(dependency => {
-          const packageRootPath = path.join(process.cwd(), './node_modules', dependency);
-          const packageJsonPath = path.join(packageRootPath, 'package.json');
-          const packageJson = require(packageJsonPath);
-          const packageEntryPointPath = path.join(process.cwd(), './node_modules', dependency, packageJson.main);
-          const packageFileContents = fs.readFileSync(packageEntryPointPath, 'utf-8');
-
-          walk.simple(acorn.parse(packageFileContents, { sourceType: 'module' }), {
-            ImportDeclaration(node) {
-              // console.log('Found a ImportDeclaration');
-              const sourceValue = node.source.value;
-
-              if (sourceValue.indexOf('.') !== 0 && sourceValue.indexOf('http') !== 0) {
-                // console.log(`found a bare import for ${sourceValue}!!!!!`);
-                importMap[sourceValue] = `/node_modules/${sourceValue}`;
-              }
-            },
-            ExportNamedDeclaration(node) {
-              // console.log('Found a ExportNamedDeclaration');
-              const sourceValue = node && node.source ? node.source.value : '';
-
-              if (sourceValue.indexOf('.') !== 0 && sourceValue.indexOf('http') !== 0) {
-                // console.log(`found a bare export for ${sourceValue}!!!!!`);
-                importMap[sourceValue] = `/node_modules/${sourceValue}`;
-              }
-            }
-          });
-          
-          importMap[dependency] = `/node_modules/${dependency}/${packageJson.main}`;
-        });
-
-        // console.log('importMap all complete', importMap);
-        
-        contents = contents.replace('<head>', `
-          <head>
-            <script defer src="/node_modules/es-module-shims/dist/es-module-shims.js"></script>
-            <script type="importmap-shim">
-              {
-                "imports": ${JSON.stringify(importMap, null, 1)}
-              }
-            </script>
-        `);
-
-        if (process.env.__GWD_COMMAND__ === 'build') { // eslint-disable-line no-underscore-dangle
-          // TODO setup and teardown should be done together
-          // console.debug('running in build mode, polyfill WebComponents for puppeteer');
-          contents = contents.replace('<head>', `
-            <head>
-              <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
-          `);
-        }
-
-        contents = contents.replace('<meta-outlet></meta-outlet>', metaOutletContent);
-
-        // TODO make smarter so that if it already exists, then leave it alone
-        contents = contents.replace(/<title>(.*)<\/title>/, '');
-        contents = contents.replace('<head>', `<head><title>${title}</title>`);
-
-        ctx.set('Content-Type', 'text/html');
-        ctx.body = contents;
-      }
-      resolve();
-    } catch (err) {
-      reject(err);
-    }
-  });
-};
\ No newline at end of file
diff --git a/packages/cli/src/transforms/images.transform.js b/packages/cli/src/transforms/images.transform.js
deleted file mode 100644
index 5c3819ee5..000000000
--- a/packages/cli/src/transforms/images.transform.js
+++ /dev/null
@@ -1,42 +0,0 @@
-const { promises: fsp } = require('fs');
-const path = require('path');
-
-module.exports = filterAssets = async (ctx, userWorkspace) => {
-  return new Promise(async (resolve, reject) => {
-    try {
-      // TODO break up into distinct font / icons / svg handlers, not related to assets/
-      if (ctx.request.url.indexOf('assets/') >= 0 && ctx.request.url.indexOf('.css') < 0) {
-        const assetPath = path.join(userWorkspace, ctx.request.url);
-        const ext = path.extname(assetPath);
-        const type = ext === '.svg'
-          ? `${ext.replace('.', '')}+xml`
-          : ext.replace('.', '');
-
-        // console.debug('assetPath', assetPath);
-        // console.debug('asset ext', ext);
-
-        if (['.jpg', '.png', '.gif', '.svg'].includes(ext)) {
-          ctx.set('Content-Type', `image/${type}`);
-
-          if (ext === '.svg') {
-            ctx.body = await fsp.readFile(assetPath, 'utf-8');
-          } else {
-            ctx.body = await fsp.readFile(assetPath); 
-          }
-        } else if (['.woff2', '.woff', '.ttf'].includes(ext)) {
-          ctx.set('Content-Type', `font/${type}`);
-          ctx.body = await fsp.readFile(assetPath);
-        } else if (['.ico'].includes(ext)) {
-          ctx.set('Content-Type', 'image/x-icon');
-          ctx.body = await fsp.readFile(assetPath);
-        } else {
-          ctx.set('Content-Type', `text/${type}`);
-          ctx.body = await fsp.readFile(assetPath, 'utf-8');
-        }
-      }
-      resolve();
-    } catch (err) {
-      reject(err);
-    }
-  });
-};
\ No newline at end of file
diff --git a/packages/cli/src/transforms/js.transform.js b/packages/cli/src/transforms/js.transform.js
deleted file mode 100644
index aedea545f..000000000
--- a/packages/cli/src/transforms/js.transform.js
+++ /dev/null
@@ -1,19 +0,0 @@
-const { promises: fsp } = require('fs');
-const path = require('path');
-
-module.exports = filterJavascript = async (ctx, userWorkspace) => {
-  return new Promise(async (resolve, reject) => {
-    try {
-      if (ctx.request.url.indexOf('/node_modules') < 0 && ctx.request.url.indexOf('.js') >= 0 && ctx.request.url.indexOf('.json') < 0) {
-        const jsPath = path.join(userWorkspace, ctx.request.url);
-        const contents = await fsp.readFile(jsPath, 'utf-8');
-
-        ctx.set('Content-Type', 'text/javascript');
-        ctx.body = contents;
-      }
-      resolve();
-    } catch (err) {
-      reject(err);
-    }
-  });
-};
\ No newline at end of file
diff --git a/packages/cli/src/transforms/json.transform.js b/packages/cli/src/transforms/json.transform.js
deleted file mode 100644
index 717d5742f..000000000
--- a/packages/cli/src/transforms/json.transform.js
+++ /dev/null
@@ -1,31 +0,0 @@
-const { promises: fsp } = require('fs');
-const path = require('path');
-
-module.exports = filterJSON = async (ctx, { userWorkspace, scratchDir }) => {
-  return new Promise(async (resolve, reject) => {
-    try {
-      // TODO This is here because of ordering, should make JS / JSON matching less greedy
-      // handle things outside if workspace, like a root directory resolver plugin?
-      if (ctx.request.url.indexOf('.json') >= 0) {
-        // console.debug('JSON file request!', ctx.request.url);'
-
-        if (ctx.request.url.indexOf('graph.json') >= 0) {
-          const json = await fsp.readFile(path.join(scratchDir, 'graph.json'), 'utf-8');
-
-          ctx.set('Content-Type', 'application/json');
-          ctx.body = JSON.parse(json);
-        } else {
-          const json = await fsp.readFile(path.join(userWorkspace, ctx.request.url), 'utf-8');
-
-          ctx.set('Content-Type', 'text/javascript');
-          ctx.body = `
-            export default ${json}
-          `;
-        }
-      }
-      resolve();
-    } catch (err) {
-      reject(err);
-    }
-  });
-};
\ No newline at end of file
diff --git a/packages/cli/src/transforms/node-modules.transform.js b/packages/cli/src/transforms/node-modules.transform.js
deleted file mode 100644
index 9c90fe770..000000000
--- a/packages/cli/src/transforms/node-modules.transform.js
+++ /dev/null
@@ -1,22 +0,0 @@
-const { promises: fsp } = require('fs');
-const path = require('path');
-
-module.exports = filterModule = async (ctx) => {
-  return new Promise(async (resolve, reject) => {
-    try {
-      if (ctx.request.url.indexOf('/node_modules') >= 0) {
-        const modulePath = path.join(process.cwd(), ctx.request.url);
-        const contents = await fsp.readFile(modulePath, 'utf-8'); // have to handle CJS vs ESM?
-        const type = ctx.request.url.indexOf('.js') > 0
-          ? 'text/javascript'
-          : 'text/css'; // TODO eve components assume a bundler
-
-        ctx.set('Content-Type', type);
-        ctx.body = contents;
-      }
-      resolve();
-    } catch (err) {
-      reject(err);
-    }
-  });
-};
\ No newline at end of file
diff --git a/packages/cli/src/transforms/transform.assets.js b/packages/cli/src/transforms/transform.assets.js
new file mode 100644
index 000000000..f6b353077
--- /dev/null
+++ b/packages/cli/src/transforms/transform.assets.js
@@ -0,0 +1,59 @@
+const path = require('path');
+const { promises: fsp } = require('fs');
+const TransformInterface = require('./transform.interface');
+
+class AssetTransform extends TransformInterface {
+
+  constructor(req) {
+    super(req, ['.woff2', '.woff', '.ttf', '.jpg', '.png', '.gif', '.svg']);
+  }
+
+  shouldTransform() {
+    const { url } = this.request;
+
+    return url.indexOf('assets/') >= 0 && url.indexOf('.css') < 0;
+  }
+
+  async applyTransform() {
+    return new Promise(async (resolve, reject) => {
+      try {
+
+        let body = '', contentType = '';
+        const assetPath = path.join(this.workspace, this.request.url);
+        const ext = path.extname(assetPath);
+        const type = ext === '.svg'
+          ? `${ext.replace('.', '')}+xml`
+          : ext.replace('.', '');
+
+        if (['.jpg', '.png', '.gif', '.svg'].includes(ext)) {
+          contentType = `image/${type}`;
+
+          if (ext === '.svg') {
+            body = await fsp.readFile(assetPath, 'utf-8');
+          } else {
+            body = await fsp.readFile(assetPath); 
+          }
+        } else if (['.woff2', '.woff', '.ttf'].includes(ext)) {
+          contentType = `font/${type}`;
+          body = await fsp.readFile(assetPath);
+        } else if (['.ico'].includes(ext)) {
+          contentType = 'image/x-icon';
+          body = await fsp.readFile(assetPath);
+        } else {
+          contentType = `text/${type}`;
+          body = await fsp.readFile(assetPath, 'utf-8');
+        }
+
+        resolve({
+          body,
+          contentType,
+          extension: this.extensions
+        });
+      } catch (e) {
+        reject(e);
+      }
+    });
+  }
+}
+
+module.exports = AssetTransform;
\ No newline at end of file
diff --git a/packages/cli/src/transforms/transform.css.js b/packages/cli/src/transforms/transform.css.js
new file mode 100644
index 000000000..4cd34a5af
--- /dev/null
+++ b/packages/cli/src/transforms/transform.css.js
@@ -0,0 +1,47 @@
+const path = require('path');
+const { promises: fsp } = require('fs');
+const TransformInterface = require('./transform.interface');
+
+class CSSTransform extends TransformInterface {
+
+  constructor(req) {
+    super(req, ['.css'], 'text/css');
+  }
+
+  async applyTransform() {
+    // do stuff with path
+    return new Promise(async (resolve, reject) => {
+      try {
+        const { url, header } = this.request;
+        const destHeader = header['sec-fetch-dest'];
+        const cssPath = url.indexOf('/node_modules') >= 0
+          ? path.join(process.cwd(), url)
+          : path.join(this.workspace, url);
+        
+        const css = await fsp.readFile(cssPath, 'utf-8');
+        let body = '', contentType = '';
+
+        // <style> tag used
+        if (destHeader === 'style') {
+          contentType = 'text/css';
+          body = css;
+        } else if (destHeader === 'empty') {
+          // assume JS import being being used
+          contentType = 'text/javascript';
+          // TODO line breaks are bad for fetch, need to return CSS string all on one line
+          body = `const css = "${css.replace(/\r?\n|\r/g, ' ')}";\nexport default css;`;
+        }
+
+        resolve({
+          body,
+          contentType,
+          extension: this.extentsions
+        });
+      } catch (e) {
+        reject(e);
+      }
+    });
+  }
+}
+
+module.exports = CSSTransform;
\ No newline at end of file
diff --git a/packages/cli/src/transforms/transform.html.js b/packages/cli/src/transforms/transform.html.js
new file mode 100644
index 000000000..fec6143ee
--- /dev/null
+++ b/packages/cli/src/transforms/transform.html.js
@@ -0,0 +1,50 @@
+const fs = require('fs');
+const path = require('path');
+const TransformInterface = require('./transform.interface');
+const { getAppTemplate, getAppTemplateScripts, getUserScripts, getMetaContent } = require('./transform.tools');
+
+class HTMLTransform extends TransformInterface {
+
+  constructor(req) {
+    super(req, ['.html'], 'text/html');
+  }
+
+  shouldTransform() {
+    const { url } = this.request;
+    const barePath = url.endsWith('/')
+      ? `${this.workspace}/pages${url}index`
+      : `${this.workspace}/pages${url.replace('.html', '')}`;
+      
+    return (this.extensions.indexOf(path.extname(url)) >= 0 || path.extname(url) === '') && 
+      (fs.existsSync(`${barePath}.html`) || barePath.substring(barePath.length - 5, barePath.length) === 'index');
+  }
+
+  async applyTransform() {
+    // do stuff with path
+    let { url } = this.request;
+
+    return new Promise(async (resolve, reject) => {
+      try {
+        // do something with markdown or html
+        const barePath = url[url.length - 1] === '/'
+          ? `${this.workspace}/pages${url}index`
+          : `${this.workspace}/pages${url.replace('.html', '')}`;
+        
+        let body = await getAppTemplate(barePath, this.workspace);
+        body = await getAppTemplateScripts(body, this.workspace);
+        body = getUserScripts(body, this.workspace);
+        body = getMetaContent(url, this.config, body);
+
+        resolve({
+          body,
+          contentType: this.contentType,
+          extension: this.extensions
+        });
+      } catch (e) {
+        reject(e);
+      }
+    });
+  }
+}
+
+module.exports = HTMLTransform;
\ No newline at end of file
diff --git a/packages/cli/src/transforms/transform.interface.js b/packages/cli/src/transforms/transform.interface.js
new file mode 100644
index 000000000..6016c3cc4
--- /dev/null
+++ b/packages/cli/src/transforms/transform.interface.js
@@ -0,0 +1,24 @@
+/* eslint-disable no-unused-vars */
+const path = require('path');
+
+// tranform.interface.js
+module.exports = class TransformInterface {
+
+  constructor(request, extensions, contentType = '') {
+    const { context, config } = request.compilation;
+    this.extensions = extensions; // ['.foo', '.bar'] 
+    this.workspace = context.userWorkspace; // greenwood
+    this.scratchDir = context.scratchDir;
+    this.request = request;
+    this.config = config;
+    this.contentType = contentType;
+  }
+
+  shouldTransform() {
+    return this.extensions.indexOf(path.extname(this.request.url)) >= 0;
+  }
+
+  applyTransform() {
+    // do stuff with path
+  }
+};
\ No newline at end of file
diff --git a/packages/cli/src/transforms/transform.js.js b/packages/cli/src/transforms/transform.js.js
new file mode 100644
index 000000000..43d118282
--- /dev/null
+++ b/packages/cli/src/transforms/transform.js.js
@@ -0,0 +1,38 @@
+const path = require('path');
+const { promises: fsp } = require('fs');
+const TransformInterface = require('./transform.interface');
+
+class JSTransform extends TransformInterface {
+
+  constructor(req) {
+    super(req, ['.js'], 'text/javascript');
+  }
+
+  shouldTransform() {
+    const { url } = this.request;
+
+    return this.extensions.indexOf(path.extname(url)) >= 0 && url.indexOf('.json') < 0;
+  }
+
+  async applyTransform() {
+    return new Promise(async (resolve, reject) => {
+      try {
+        const { url } = this.request;
+        const jsPath = url.indexOf('/node_modules') >= 0
+          ? path.join(process.cwd(), url)
+          : path.join(this.workspace, this.request.url);
+
+        const body = await fsp.readFile(jsPath, 'utf-8');
+        resolve({
+          body,
+          contentType: this.contentType,
+          extension: this.extensions
+        });
+      } catch (e) {
+        reject(e);
+      }
+    });
+  }
+}
+
+module.exports = JSTransform;
\ No newline at end of file
diff --git a/packages/cli/src/transforms/transform.json.js b/packages/cli/src/transforms/transform.json.js
new file mode 100644
index 000000000..236a040b7
--- /dev/null
+++ b/packages/cli/src/transforms/transform.json.js
@@ -0,0 +1,45 @@
+const path = require('path');
+const { promises: fsp } = require('fs');
+const TransformInterface = require('./transform.interface');
+
+class TransformJSON extends TransformInterface {
+
+  constructor(req) {
+    super(req, ['.json']);
+  }
+
+  async applyTransform() {
+    return new Promise(async (resolve, reject) => {
+      try {
+
+        // TODO This is here because of ordering, should make JS / JSON matching less greedy
+        // handle things outside if workspace, like a root directory resolver plugin?
+        // console.debug('JSON file request!', ctx.url);'
+        let body = '', contentType = '';
+        const { url } = this.request;
+
+        if (url.indexOf('graph.json') >= 0) {
+          const json = await fsp.readFile(path.join(this.scratchDir, 'graph.json'), 'utf-8');
+
+          contentType = 'application/json';
+          body = JSON.parse(json);
+        } else {
+          const json = await fsp.readFile(path.join(this.workspace, url), 'utf-8');
+
+          contentType = 'text/javascript';
+          body = `export default ${json}`;
+        }
+
+        resolve({
+          body,
+          contentType,
+          extension: this.extensions
+        });
+      } catch (e) {
+        reject(e);
+      }
+    });
+  }
+}
+
+module.exports = TransformJSON;
\ No newline at end of file
diff --git a/packages/cli/src/transforms/transform.md.js b/packages/cli/src/transforms/transform.md.js
new file mode 100644
index 000000000..9ff26c7ba
--- /dev/null
+++ b/packages/cli/src/transforms/transform.md.js
@@ -0,0 +1,107 @@
+const path = require('path');
+const { promises: fsp } = require('fs');
+const fs = require('fs');
+const frontmatter = require('front-matter');
+const remarkFrontmatter = require('remark-frontmatter');
+const rehypeStringify = require('rehype-stringify');
+const remarkParse = require('remark-parse');
+const remarkRehype = require('remark-rehype');
+const unified = require('unified');
+
+const TransformInterface = require('./transform.interface');
+const { getAppTemplateScripts, getUserScripts, getMetaContent } = require('./transform.tools');
+
+class MDTransform extends TransformInterface {
+
+  constructor(req) {
+    super(req, ['.md']);
+  }
+
+  shouldTransform() {
+    const { request, workspace } = this;
+    const { url } = request;
+
+    const barePath = url.endsWith('/')
+      ? `${workspace}/pages${url}index`
+      : `${workspace}/pages${url.replace('.html', '')}`;
+
+    return fs.existsSync(`${barePath}.md`) || fs.existsSync(`${barePath.replace('/index', '.md')}`);
+  }
+
+  async applyTransform() {
+    const { workspace, request } = this;
+    const { url } = request;
+    const config = { ...this.config }; 
+
+    let contents = '', title = config.title || '';
+
+    return new Promise(async (resolve, reject) => {
+      try {
+        const barePath = url.endsWith('/')
+          ? `${workspace}/pages${url}index`
+          : `${workspace}/pages${url.replace('.html', '')}`;
+          
+        // TODO all this lookup could probably be handled a bit more gracefully perhaps?
+        // console.debug('this route exists as markdown');
+        const markdownPath = fs.existsSync(`${barePath}.md`)
+          ? `${barePath}.md`
+          : fs.existsSync(`${barePath.replace('/index', '.md')}`)
+            ? `${barePath.replace('/index', '.md')}`
+            : `${workspace}/pages${url.replace('/index.html', '.md')}`;
+        const markdownContents = await fsp.readFile(markdownPath, 'utf-8');
+        const rehypePlugins = [];
+        const remarkPlugins = [];
+
+        config.markdown.plugins.forEach(plugin => {
+          if (plugin.indexOf('rehype-') >= 0) {
+            rehypePlugins.push(require(plugin));
+          }
+
+          if (plugin.indexOf('remark-') >= 0) {
+            remarkPlugins.push(require(plugin));
+          }
+        });
+
+        // TODO extract front matter contents from remark-frontmatter instead of frontmatter lib
+        const fm = frontmatter(markdownContents);
+        const processedMarkdown = await unified()
+          .use(remarkParse) // parse markdown into AST
+          .use(remarkFrontmatter) // extract frontmatter from AST
+          .use(...remarkPlugins) // apply userland remark plugins
+          .use(remarkRehype, { allowDangerousHtml: true }) // convert from markdown to HTML AST
+          .use(...rehypePlugins) // apply userland rehype plugins
+          .use(rehypeStringify) // convert AST to HTML string
+          .process(markdownContents);
+
+        // TODO use an app template
+        if (fm.attributes.template) {
+          contents = await fsp.readFile(`${workspace}/templates/${fm.attributes.template}.html`, 'utf-8');
+        } else if (fs.existsSync(`${workspace}/templates/page.html`)) {
+          contents = await fsp.readFile(`${workspace}/templates/page.html`, 'utf-8');
+        } else {
+          contents = await fsp.readFile(path.join(__dirname, '../templates/app.html'), 'utf-8');
+        }
+
+        // use page title
+        if (fm.attributes.title) {
+          config.title = `${title} - ${fm.attributes.title}`;
+        }
+
+        let body = await getAppTemplateScripts(contents, workspace);
+        body = getUserScripts(body, workspace);
+        body = body.replace(/\<content-outlet>(.*)<\/content-outlet>/s, processedMarkdown.contents);
+        body = getMetaContent(url, config, body);
+        
+        resolve({
+          body,
+          contentType: this.contentType,
+          extension: this.extensions
+        });
+      } catch (e) {
+        reject(e);
+      }
+    });
+  }
+}
+
+module.exports = MDTransform;
\ No newline at end of file
diff --git a/packages/cli/src/transforms/transform.tools.js b/packages/cli/src/transforms/transform.tools.js
new file mode 100644
index 000000000..1c13f614a
--- /dev/null
+++ b/packages/cli/src/transforms/transform.tools.js
@@ -0,0 +1,183 @@
+const acorn = require('acorn');
+const { promises: fsp } = require('fs');
+const fs = require('fs');
+const path = require('path');
+const htmlparser = require('node-html-parser');
+const walk = require('acorn-walk');
+
+const getAppTemplate = async (barePath, workspace) => {
+  if (fs.existsSync(`${barePath}.html`)) {
+    // console.debug('this route exists as HTML');
+    contents = await fsp.readFile(`${barePath}.html`, 'utf-8');
+  } else if (fs.existsSync(`${workspace}/templates/page.html`)) {
+    // use custom workspace page template
+    contents = await fsp.readFile(`${workspace}/templates/page.html`, 'utf-8');
+  } else {
+    contents = await fsp.readFile(path.join(__dirname, '../templates/app.html'), 'utf-8');
+  }
+  return contents;
+};
+
+const getAppTemplateScripts = async (contents, userWorkspace) => {
+  
+  const appTemplate = `${userWorkspace}/templates/app.html`;
+  let appTemplateContents = '';
+
+  if (fs.existsSync(appTemplate)) {
+    appTemplateContents = fs.readFileSync(appTemplate, 'utf-8');
+    const root = htmlparser.parse(contents, {
+      script: true,
+      style: true,
+      noscript: true,
+      pre: true
+    });
+    const body = root.querySelector('body').innerHTML;
+    const headScripts = root.querySelectorAll('head script');
+    const headLinks = root.querySelectorAll('head link');
+
+    appTemplateContents = appTemplateContents.replace(/<page-outlet><\/page-outlet>/, body);
+    headScripts.forEach(script => {
+      if (script.rawAttrs !== '') {
+        appTemplateContents = appTemplateContents.replace(/<\/script>/, `
+          </script>\n
+          <script ${script.rawAttrs}></script>\n
+        `);
+      }
+
+      if (script.rawAttrs === '') {
+        appTemplateContents = appTemplateContents.replace(/<\/script>/, `
+          </script>\n
+          <script>
+            ${script.text}
+          </script>\n
+        `);
+      }
+    });
+
+    headLinks.forEach(link => {
+      appTemplateContents = appTemplateContents.replace(/<\/link>/, `
+        </link>\n
+        <link ${link.rawAttrs}></link>\n
+      `);
+    });
+  }
+  return appTemplateContents || contents;
+};
+
+const getUserScripts = (contents, userWorkspace) => {
+  // TODO use an HTML parser?  https://www.npmjs.com/package/node-html-parser
+  if (process.env.__GWD_COMMAND__ === 'develop') { // eslint-disable-line no-underscore-dangle
+    // TODO setup and teardown should be done together
+    // console.debug('running in develop mode, attach live reload script');
+    contents = contents.replace('</head>', `
+        <script src="http://localhost:35729/livereload.js?snipver=1"></script>
+      </head>
+    `);
+  }
+
+  contents = contents.replace(/type="module"/g, 'type="module-shim"');
+
+  const importMap = {};
+  const userPackageJson = fs.existsSync(`${userWorkspace}/package.json`)
+    ? require(path.join(userWorkspace, 'package.json')) // its a monorepo?
+    : fs.existsSync(`${process.cwd()}/package.json`)
+      ? require(path.join(process.cwd(), 'package.json'))
+      : {};
+
+  // console.debug('userPackageJson', userPackageJson);
+  // console.debug('dependencies', userPackageJson.dependencies);
+
+  Object.keys(userPackageJson.dependencies || {}).forEach(dependency => {
+    const packageRootPath = path.join(process.cwd(), './node_modules', dependency);
+    const packageJsonPath = path.join(packageRootPath, 'package.json');
+    const packageJson = require(packageJsonPath);
+    const packageEntryPointPath = path.join(process.cwd(), './node_modules', dependency, packageJson.main);
+    const packageFileContents = fs.readFileSync(packageEntryPointPath, 'utf-8');
+
+    walk.simple(acorn.parse(packageFileContents, { sourceType: 'module' }), {
+      ImportDeclaration(node) {
+        // console.log('Found a ImportDeclaration');
+        const sourceValue = node.source.value;
+
+        if (sourceValue.indexOf('.') !== 0 && sourceValue.indexOf('http') !== 0) {
+          // console.log(`found a bare import for ${sourceValue}!!!!!`);
+          importMap[sourceValue] = `/node_modules/${sourceValue}`;
+        }
+      },
+      ExportNamedDeclaration(node) {
+        // console.log('Found a ExportNamedDeclaration');
+        const sourceValue = node && node.source ? node.source.value : '';
+
+        if (sourceValue.indexOf('.') !== 0 && sourceValue.indexOf('http') !== 0) {
+          // console.log(`found a bare export for ${sourceValue}!!!!!`);
+          importMap[sourceValue] = `/node_modules/${sourceValue}`;
+        }
+      }
+    });
+    
+    importMap[dependency] = `/node_modules/${dependency}/${packageJson.main}`;
+  });
+
+  // console.log('importMap all complete', importMap);
+
+  contents = contents.replace('<head>', `
+    <head>
+      <script defer src="/node_modules/es-module-shims/dist/es-module-shims.js"></script>
+      <script type="importmap-shim">
+        {
+          "imports": ${JSON.stringify(importMap, null, 1)}
+        }
+      </script>
+  `);
+
+  if (process.env.__GWD_COMMAND__ === 'build') { // eslint-disable-line no-underscore-dangle
+    // TODO setup and teardown should be done together
+    // console.debug('running in build mode, polyfill WebComponents for puppeteer');
+    contents = contents.replace('<head>', `
+      <head>
+        <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+    `);
+  }
+  return contents;
+};
+
+const getMetaContent = (url, config, contents) => {
+
+  const title = config.title;
+  const metaContent = config.meta.map(item => {
+    let metaHtml = '';
+
+    // TODO better way to implememnt this?  should we implement this?
+    for (const [key, value] of Object.entries(item)) {
+      const isOgUrl = item.property === 'og:url' && key === 'content';
+      const hasTrailingSlash = isOgUrl && value[value.length - 1] === '/';
+      const contextualValue = isOgUrl
+        ? hasTrailingSlash
+          ? `${value}${url.replace('/', '')}`
+          : `${value}${url === '/' ? '' : url}`
+        : value;
+        
+      metaHtml += ` ${key}="${contextualValue}"`;
+    }
+
+    return item.rel
+      ? `<link${metaHtml}/>`
+      : `<meta${metaHtml}/>`;
+  }).join('\n');
+
+  // console.log(contents);
+
+  // TODO make smarter so that if it already exists, then leave it alone
+  contents = contents.replace(/<title>(.*)<\/title>/, '');
+  contents = contents.replace('<head>', `<head><title>${title}</title>`);
+  contents = contents.replace('<meta-outlet></meta-outlet>', metaContent);
+
+  return contents;
+};
+
+module.exports = {
+  getAppTemplate,
+  getAppTemplateScripts,
+  getMetaContent,
+  getUserScripts
+};
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.default/build.default.spec.js b/packages/cli/test/cases/build.default/build.default.spec.js
index 0d73738c1..9473499f3 100644
--- a/packages/cli/test/cases/build.default/build.default.spec.js
+++ b/packages/cli/test/cases/build.default/build.default.spec.js
@@ -65,7 +65,7 @@ describe('Build Greenwood With: ', function() {
       });
 
       it('should have the expected heading text within the index page in the public directory', function() {
-        const heading = dom.window.document.querySelector('body content-outlet h1').textContent;
+        const heading = dom.window.document.querySelector('body h1').textContent;
 
         expect(heading).to.equal('Welcome to my website!');
       });
diff --git a/www/components/header/header.js b/www/components/header/header.js
index 0418a1545..1a57d505c 100644
--- a/www/components/header/header.js
+++ b/www/components/header/header.js
@@ -49,7 +49,6 @@ class HeaderComponent extends LitElement {
   /* eslint-disable indent */
   render() {
     const { navigation } = this;
-
     return html`
       <header class="header">
         <eve-container fluid>