fix(plugins): filter rollup plugins

Author: manucorporat

src/compiler/app-core/bundle-app-core.ts

@@ -40,7 +40,7 @@ export async function bundleApp(config: d.Config, compilerCtx: d.CompilerCtx, bu
           sourceMap: false,
           ...config.commonjs
         }),
-        ...config.plugins,
+        ...config.rollupPlugins,
         pluginHelper(config, compilerCtx, buildCtx),
         config.sys.rollup.plugins.nodeResolve({
           mainFields: ['collection:main', 'jsnext:main', 'es2017', 'es2015', 'module', 'main'],

src/compiler/component-hydrate/bundle-hydrate-app.ts

@@ -33,7 +33,7 @@ export async function bundleHydrateApp(config: d.Config, compilerCtx: d.Compiler
           sourceMap: false,
           ...config.commonjs
         }),
-        ...config.plugins,
+        ...config.rollupPlugins,
         pluginHelper(config, compilerCtx, buildCtx),
         config.sys.rollup.plugins.nodeResolve({
           mainFields: ['collection:main', 'jsnext:main', 'es2017', 'es2015', 'module', 'main'],

src/compiler/config/validate-plugins.ts

@@ -1,10 +1,12 @@
 import * as d from '../../declarations';
 import { setArrayConfig } from './config-utils';
 import { buildWarn } from '@utils';
+import { Plugin } from 'rollup';
 
 
 export function validatePlugins(config: d.Config, diagnostics: d.Diagnostic[]) {
   setArrayConfig(config, 'plugins');
+  const rollupPlugins = getRollupPlugins(config.plugins);
   const hasResolveNode = config.plugins.some(p => p.name === 'node-resolve');
   const hasCommonjs = config.plugins.some(p => p.name === 'commonjs');
   if (hasCommonjs) {
@@ -17,6 +19,19 @@ export function validatePlugins(config: d.Config, diagnostics: d.Diagnostic[]) {
     warn.messageText = `Stencil already uses "rollup-plugin-commonjs", please remove it from your "stencil.config.ts" plugins.
     You can configure the commonjs settings using the "commonjs" property in "stencil.config.ts`;
   }
-  config.plugins = config.plugins.filter(({name}) => name !== 'node-resolve' && name !== 'commonjs');
+  config.rollupPlugins = rollupPlugins.filter(({name}) => name !== 'node-resolve' && name !== 'commonjs');
+  config.plugins = getPlugins(config.plugins);
+}
+
+function getPlugins(plugins: any[]): Plugin[] {
+  return plugins.filter(plugin => {
+    return !!(plugin && typeof plugin === 'object');
+  });
+}
+
+function getRollupPlugins(plugins: any[]): Plugin[] {
+  return plugins.filter(plugin => {
+    return !!(plugin && typeof plugin === 'object' && !plugin.pluginType);
+  });
 }
 

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

@@ -50,7 +50,7 @@ describe('plugin', () => {
       };
     }
 
-    config.plugins = [myPlugin()];
+    config.rollupPlugins = [myPlugin()];
 
     const r = await compiler.build();
     expect(r.diagnostics).toHaveLength(0);
@@ -79,7 +79,7 @@ describe('plugin', () => {
       };
     }
 
-    config.plugins = [myPlugin()];
+    config.rollupPlugins = [myPlugin()];
 
     const r = await compiler.build();
     expect(r.diagnostics).toHaveLength(0);
@@ -120,7 +120,7 @@ describe('plugin', () => {
       };
     }
 
-    config.plugins = [myPlugin()];
+    config.rollupPlugins = [myPlugin()];
 
     const r = await compiler.build();
     expect(r.diagnostics).toHaveLength(0);
@@ -160,7 +160,7 @@ describe('plugin', () => {
         name: 'myPlugin'
       };
     }
-    config.plugins = [myPlugin()];
+    config.rollupPlugins = [myPlugin()];
 
     const r = await compiler.build();
     expect(r.diagnostics).toHaveLength(0);

src/declarations/config.ts

@@ -105,7 +105,7 @@ export interface StencilConfig {
    * By default, Stencil does not come with Sass or PostCss support.
    * However, either can be added using the plugin array.
    */
-  plugins?: d.Plugin[];
+  plugins?: any[];
 
   /**
    * The srcDir config specifies the directory which should contain the source typescript files
@@ -141,6 +141,7 @@ export interface StencilConfig {
   watch?: boolean;
   watchIgnoredRegex?: RegExp;
   writeLog?: boolean;
+  rollupPlugins?: any[];
 }
 
 export interface Config extends StencilConfig {

src/declarations/plugin.ts

@@ -3,18 +3,17 @@ import * as d from '.';
 
 export interface Plugin {
   name?: string;
-  load?: (id: string, context?: PluginCtx) => Promise<string> | string;
-  resolveId?: (importee: string, importer: string, context?: PluginCtx) => Promise<string> | string;
+  pluginType?: string;
+  load?: (id: string, context: PluginCtx) => Promise<string> | string;
+  resolveId?: (importee: string, importer: string, context: PluginCtx) => Promise<string> | string;
   transform?: (sourceText: string, id: string, context: PluginCtx) => Promise<PluginTransformResults> | PluginTransformResults | string;
 }
 
-
 export interface PluginTransformResults {
   code?: string;
   id?: string;
 }
 
-
 export interface PluginCtx {
   config: d.Config;
   sys: d.StencilSystem;