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 @@
+
+
+
+
+
+
+
+
+
+
+ Welcome to my website!
+
+
+
+
\ 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');
-
- //