feat(plugins): add rollup plugins through config

Closes #472

src/compiler/app/app-global-scripts.ts

@@ -109,7 +109,8 @@ async function bundleProjectGlobal(config: Config, compilerCtx: CompilerCtx, bui
           include: 'node_modules/**',
           sourceMap: false
         }),
-        transpiledInMemoryPlugin(config, compilerCtx)
+        transpiledInMemoryPlugin(config, compilerCtx),
+        ...config.plugins
       ],
       onwarn: createOnWarnFn(buildCtx.diagnostics)
     });

src/compiler/bundle/rollup-bundle.ts

@@ -35,6 +35,7 @@ export async function createBundle(config: Config, compilerCtx: CompilerCtx, bui
       await pathsResolution(config, compilerCtx),
       localResolution(config),
       nodeEnvVars(config),
+      ...config.plugins
     ],
     onwarn: createOnWarnFn(buildCtx.diagnostics)
   };

src/compiler/compiler.ts

@@ -3,22 +3,20 @@ import { build } from './build/build';
 import { catchError, getCompilerCtx } from './util';
 import { docs } from './docs/docs';
 import { InMemoryFileSystem } from '../util/in-memory-fs';
-import { initPlugins } from './plugin/plugin';
 import { validateBuildConfig } from '../compiler/config/validate-config';
 import { validatePrerenderConfig } from './prerender/validate-prerender-config';
 import { validateServiceWorkerConfig } from './service-worker/validate-sw-config';
 
 
 export class Compiler {
-  private ctx: CompilerCtx;
+  protected ctx: CompilerCtx;
   isValid: boolean;
 
   constructor(public config: Config) {
     this.isValid = isValid(config);
 
     if (this.isValid) {
       this.ctx = getCompilerCtx(config);
-      initPlugins(config);
 
       let startupMsg = `${config.sys.compiler.name} v${config.sys.compiler.version} `;
       if (config.sys.platform !== 'win32') {

src/compiler/config/validate-config.ts

@@ -4,6 +4,7 @@ import { validateCopy } from './validate-copy';
 import { validateDependentCollection } from './validate-collection';
 import { validateNamespace } from './validate-namespace';
 import { validatePaths } from './validate-paths';
+import { validatePlugins } from './validate-plugins';
 
 
 export function validateBuildConfig(config: Config, setEnvVariables?: boolean) {
@@ -74,6 +75,8 @@ export function validateBuildConfig(config: Config, setEnvVariables?: boolean) {
 
   validateCopy(config);
 
+  validatePlugins(config);
+
   if (!config.watchIgnoredRegex) {
     config.watchIgnoredRegex = DEFAULT_WATCH_IGNORED_REGEX;
   }

src/compiler/config/validate-plugins.ts

@@ -0,0 +1,16 @@
+import { Config } from '../../declarations';
+import styleMinifyPlugin from '../style/style-minify-plugin';
+import styleSassPlugin from '../style/style-sass-plugin';
+
+
+export function validatePlugins(config: Config) {
+  config.plugins = (config.plugins || []).filter(p => !!p);
+
+  if (!config.plugins.some(p => p.name === 'styleSassPlugin')) {
+    config.plugins.push(styleSassPlugin());
+  }
+
+  if (!config.plugins.some(p => p.name === 'styleMinifyPlugin')) {
+    config.plugins.push(styleMinifyPlugin());
+  }
+}

src/compiler/plugin/plugin.ts

@@ -1,19 +1,6 @@
 import { BuildCtx, CompilerCtx, Config } from '../../declarations';
 import { catchError } from '../util';
 import { PluginCtx, PluginTransformResults } from '../../declarations/plugin';
-import { StyleMinifyPlugin } from '../style/style-minify-plugin';
-import { StyleSassPlugin } from '../style/style-sass-plugin';
-
-
-export function initPlugins(config: Config) {
-  config.plugins = (config.plugins || []).filter(p => !!p);
-
-  const styleSassPlugin = new StyleSassPlugin();
-  config.plugins.push(styleSassPlugin);
-
-  const styleMinifyPlugin = new StyleMinifyPlugin();
-  config.plugins.push(styleMinifyPlugin);
-}
 
 
 export async function runPluginResolveId(pluginCtx: PluginCtx, importee: string) {

src/compiler/plugin/test/plugin.spec.ts

@@ -0,0 +1,183 @@
+import { TestingCompiler } from '../../../testing';
+import { wroteFile } from '../../../testing/utils';
+import * as path from 'path';
+import * as ts from 'typescript';
+
+
+describe('plugin', () => {
+  let c: TestingCompiler;
+
+  beforeEach(async () => {
+    c = new TestingCompiler();
+    await c.fs.writeFiles({'/src/index.html': `<cmp-a></cmp-a>`});
+    await c.fs.commit();
+  });
+
+  it('transform, async', async () => {
+    c.config.bundles = [ { components: ['cmp-a'] } ];
+
+    await c.fs.writeFiles({
+      '/stencil.config.js': `
+
+        function myPlugin() {
+          return {
+            transform: function(sourceText) {
+              return new Promise(resolve => {
+                resolve(sourceText.replace('constructor() { }', 'constructor(){console.log("transformed!")}'));
+              });
+            },
+            name: 'myPlugin'
+          };
+        }
+
+        exports.config = {
+          plugins: [myPlugin()]
+        };
+      `,
+      '/src/cmp-a.tsx': `
+        @Component({ tag: 'cmp-a' }) export class CmpA {
+          constructor() { }
+        }
+      `
+    }, { clearFileCache: true });
+    await c.fs.commit();
+
+    c.loadConfigFile('/stencil.config.js');
+
+    const r = await c.build();
+    expect(r.diagnostics).toEqual([]);
+
+    const cmpA = await c.fs.readFile('/www/build/app/cmp-a.js');
+    expect(cmpA).toContain('transformed!');
+  });
+
+  it('transform, sync', async () => {
+    c.config.bundles = [ { components: ['cmp-a'] } ];
+
+    await c.fs.writeFiles({
+      '/stencil.config.js': `
+
+        function myPlugin() {
+          return {
+            transform: function(sourceText) {
+              return sourceText.replace('constructor() { }', 'constructor(){console.log("transformed!")}');
+            },
+            name: 'myPlugin'
+          };
+        }
+
+        exports.config = {
+          plugins: [myPlugin()]
+        };
+      `,
+      '/src/cmp-a.tsx': `
+        @Component({ tag: 'cmp-a' }) export class CmpA {
+          constructor() { }
+        }
+      `
+    }, { clearFileCache: true });
+    await c.fs.commit();
+
+    c.loadConfigFile('/stencil.config.js');
+
+    const r = await c.build();
+    expect(r.diagnostics).toEqual([]);
+
+    const cmpA = await c.fs.readFile('/www/build/app/cmp-a.js');
+    expect(cmpA).toContain('transformed!');
+  });
+
+  it('resolveId, async', async () => {
+    c.config.bundles = [ { components: ['cmp-a'] } ];
+
+    await c.fs.writeFiles({
+      '/stencil.config.js': `
+
+        function myPlugin() {
+          return {
+            resolveId: function(importee, importer) {
+              if (importee === '#crazy-path!') {
+                return Promise.resolve('/dist/my-dep-fn.js');
+              }
+            },
+            name: 'myPlugin'
+          };
+        }
+
+        exports.config = {
+          plugins: [myPlugin()]
+        };
+      `,
+      '/src/cmp-a.tsx': `
+        import { depFn } '#crazy-path!'
+        @Component({ tag: 'cmp-a' }) export class CmpA {
+          constructor() {
+            depFn();
+          }
+        }
+      `,
+      '/dist/my-dep-fn.js': `
+        export function depFn(){
+          console.log('imported depFun()');
+        }
+      `
+    }, { clearFileCache: true });
+    await c.fs.commit();
+
+    c.loadConfigFile('/stencil.config.js');
+
+    const r = await c.build();
+    expect(r.diagnostics).toEqual([]);
+
+    const cmpA = await c.fs.readFile('/www/build/app/cmp-a.js');
+    expect(cmpA).toContain('imported depFun()');
+  });
+
+  it('resolveId, sync', async () => {
+    c.config.bundles = [ { components: ['cmp-a'] } ];
+
+    await c.fs.writeFiles({
+      '/stencil.config.js': `
+
+        function myPlugin() {
+          return {
+            resolveId: function(importee, importer) {
+              if (importee === '#crazy-path!') {
+                return '/dist/my-dep-fn.js';
+              }
+            },
+            name: 'myPlugin'
+          };
+        }
+
+        exports.config = {
+          plugins: [myPlugin()]
+        };
+      `,
+      '/src/cmp-a.tsx': `
+        import { depFn } '#crazy-path!'
+        @Component({ tag: 'cmp-a' }) export class CmpA {
+          constructor() {
+            depFn();
+          }
+        }
+      `,
+      '/dist/my-dep-fn.js': `
+        export function depFn(){
+          console.log('imported depFun()');
+        }
+      `
+    }, { clearFileCache: true });
+    await c.fs.commit();
+
+    c.loadConfigFile('/stencil.config.js');
+
+    const r = await c.build();
+    expect(r.diagnostics).toEqual([]);
+
+    const cmpA = await c.fs.readFile('/www/build/app/cmp-a.js');
+    expect(cmpA).toContain('imported depFun()');
+  });
+
+
+});

src/compiler/style/style-minify-plugin.ts

@@ -1,42 +1,46 @@
 import * as d from '../../declarations/index';
 
 
-export class StyleMinifyPlugin implements d.Plugin {
+export default function styleMinifyPlugin(): d.Plugin {
+  const name = 'styleMinifyPlugin';
 
-  async transform(sourceText: string, id: string, context: d.PluginCtx): Promise<d.PluginTransformResults> {
-    if (!context.config.minifyCss || !this.usePlugin(id)) {
-      return null;
-    }
+  return {
 
-    const results: d.PluginTransformResults = {};
+    transform: async function(sourceText: string, id: string, context: d.PluginCtx): Promise<d.PluginTransformResults> {
+      if (!context || !context.config.minifyCss || !usePlugin(id)) {
+        return null;
+      }
+
+      const results: d.PluginTransformResults = {};
 
-    const cacheKey = context.cache.createKey(this.name, sourceText);
-    const cachedContent = await context.cache.get(cacheKey);
+      const cacheKey = context.cache.createKey(name, sourceText);
+      const cachedContent = await context.cache.get(cacheKey);
 
-    if (cachedContent != null) {
-      results.code = cachedContent;
+      if (cachedContent != null) {
+        results.code = cachedContent;
 
-    } else {
-      const minifyResults = context.sys.minifyCss(sourceText);
-      minifyResults.diagnostics.forEach(d => {
-        context.diagnostics.push(d);
-      });
+      } else {
+        const minifyResults = context.sys.minifyCss(sourceText);
+        minifyResults.diagnostics.forEach(d => {
+          context.diagnostics.push(d);
+        });
 
-      if (typeof minifyResults.output === 'string') {
-        results.code = minifyResults.output;
-        await context.cache.put(cacheKey, results.code);
+        if (typeof minifyResults.output === 'string') {
+          results.code = minifyResults.output;
+          await context.cache.put(cacheKey, results.code);
+        }
       }
-    }
 
-    return results;
-  }
+      return results;
+    },
+
+    name: name
 
-  usePlugin(id: string) {
-    return /(.css)$/i.test(id);
-  }
+  };
+
+}
 
-  get name() {
-    return 'StyleMinifyPlugin';
-  }
 
+function usePlugin(id: string) {
+  return /(.css)$/i.test(id);
 }