ProjectEvergreen · thescientist13 · Nov 13, 2020 · Sep 16, 2020 · Sep 16, 2020 · Sep 17, 2020
diff --git 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
@@ -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> 
diff --git a/packages/cli/src/transforms/transform.assets.js 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;
diff --git a/packages/cli/src/transforms/transform.css.js 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;
diff --git a/packages/cli/src/transforms/transform.html.js 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;
diff --git a/packages/cli/src/transforms/transform.interface.js 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
+  }
+};
diff --git a/packages/cli/src/transforms/transform.js.js 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;
diff --git a/packages/cli/src/transforms/transform.json.js 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;