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 <[email protected]>

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);
     }

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>