feat: keysAsFunctions

Author: jakobrosenberg

lib/plugins/mdsvex/index.js

@@ -19,6 +19,7 @@ module.exports.default = {
             svelte: {
               preprocess: [
                 mdsvex({
+                  extension: '.md',
                   ...app.config.mdsvex,
                   ...params
                 })

lib/plugins/postcss/index.js

@@ -1,3 +1,4 @@
+
 export default {
   dependencies: {
     'preprocess': () => import('../preprocess')
@@ -6,10 +7,14 @@ export default {
     {
       event: 'start',
       action: async (app, params) => {
+        const postcssImport = (await import('postcss-import')).default
         app.merge({
           config: {
             postcss: {
-              plugins: []
+              pluginsMap: { postcssImport },
+              plugins: {
+                postcssImport: {}
+              }
             }
           }
         })
@@ -18,22 +23,25 @@ export default {
     {
       event: 'before:bundle',
       action: async (app, params) => {
+        const { keysAsFunctions } = (await import('../../utils'))
+        const { plugins, pluginsMap } = app.config.postcss
         const postcss = (await import('rollup-plugin-postcss')).default
         const autoPreprocess = (await import('svelte-preprocess')).default
-        const postcssImport = (await import('postcss-import')).default
-        const postcssCfg = { plugins: [postcssImport()] }
+        app.config.postcss.plugins = await keysAsFunctions(plugins, pluginsMap)
+        delete app.config.postcss.pluginsMap
 
         app.merge({
           config: {
             rollup: {
-              plugins: [
-                postcss(postcssCfg)
-              ]
+              pluginsMap: { postcss },
+              plugins: {
+                postcss: app.config.postcss
+              }
             },
             svelte: {
               preprocess: [
                 autoPreprocess({
-                  postcss: postcssCfg,
+                  postcss: app.config.postcss,
                   defaults: { style: 'postcss' }
                 })
               ]

lib/plugins/rollup/rollup.compile.js

@@ -1,35 +1,11 @@
 /// <reference path="../../../typedef.js" />
 
-import svelte from 'rollup-plugin-svelte-hot'
-import resolve from '@rollup/plugin-node-resolve'
-import commonjs from '@rollup/plugin-commonjs'
-import { terser } from 'rollup-plugin-terser'
-import Hmr from 'rollup-plugin-hot'
-import livereload from 'rollup-plugin-livereload'
+const { keysAsFunctions } = require('../../utils')
 
 /**@param {RoxiApp} app     */
-export default function rollupConfig(app, params, ctx) {
-  const { pluginsCfg } = app.config.rollup
-  const { distDir, bundler } = app.config.roxi //todo no longer valid
-  const { production } = app.state
-  const isNollup = bundler === 'nollup'
-  delete app.config.rollup.pluginsCfg
-
-  app.merge({
-    config: {
-      rollup: {
-        plugins: [
-          pluginsCfg.mainJsTransform,
-          svelte(app.config.svelte),
-
-          // resolve matching modules from current working directory
-          resolve(pluginsCfg.resolve),
-          commonjs(),
-          production && terser(), // minify
-          // !production && isNollup && Hmr(pluginsCfg.hmr), // refresh only updated code
-          !production && !isNollup && livereload(distDir), // refresh entire window when code is updated
-        ]
-      }
-    }
-  })
+export default async function rollupConfig(app, params, ctx) {
+  const { plugins, pluginsMap } = app.config.rollup
+  delete app.config.rollup.pluginsMap
+  app.config.rollup.plugins.svelte = app.config.svelte
+  app.config.rollup.plugins = await keysAsFunctions(plugins, pluginsMap)
 }

lib/plugins/rollup/rollup.template.js

@@ -1,9 +1,15 @@
 
-
+const svelte = require('rollup-plugin-svelte-hot')
+const resolve = require('@rollup/plugin-node-resolve').default
+const commonjs = require('@rollup/plugin-commonjs')
+const { terser } = require('rollup-plugin-terser')
+const hmr = require('rollup-plugin-hot')
+const livereload = require('rollup-plugin-livereload')
 const { readFileSync } = require('fs-extra')
 
 /** @type {RoxiPluginHookFunction} */
 module.exports = function rollup(app, params) {
+  const isNollup = app.config.roxi.plugins.find(p => p.name === 'nollup')
   const { buildDir, staticDir } = app.config.roxi
   const { production } = app.state
 
@@ -14,13 +20,23 @@ module.exports = function rollup(app, params) {
     input: `src/main.js`,
     preserveEntrySignatures: false,
     output: {
-      name: 'routify_app',
+      name: 'roxi_app',
       sourcemap: true,
       format: 'esm', dir: buildDir
     },
-    plugins: [],
-    pluginsCfg: {
-      mainJsTransform: {
+    pluginsMap: { svelte, resolve, commonjs, terser, hmr, livereload },
+    plugins: {
+      terser: production && {},
+      svelte: app.config.svelte,
+      // resolve matching modules from current working directory
+      resolve: {
+        browser: true,
+        dedupe: importee => !!importee.match(/svelte(\/|$)/)
+      },
+      commonjs: {},
+      terser: production && {}, // minify
+      livereload: !production && !isNollup && distDir,
+      _mainJsTransform: {
         transform: (code, id) => {
           if (id.match(/[/\\]src[/\\]main.js$/)) {
             const tmpl = readFileSync(__dirname + '/../../shared/main.template.js', 'utf-8')
@@ -31,11 +47,8 @@ module.exports = function rollup(app, params) {
           }
         }
       },
-      resolve: {
-        browser: true,
-        dedupe: importee => !!importee.match(/svelte(\/|$)/)
-      },
-      hmr: { inMemory: true, public: staticDir }
+
+      hmr: production && { inMemory: true, public: staticDir }
     },
     watch: {
       clearScreen: false,

lib/plugins/spassr/index.js

@@ -12,7 +12,9 @@ module.exports.default = {
         const spassr = {
           assetsDir: staticDir,
           entrypoint: template,
-          inlineDynamicImports: true,
+          ssrOptions: {
+            inlineDynamicImports: true,
+          },
           port,
           host,
           script,
@@ -34,11 +36,11 @@ module.exports.default = {
       action: (app, params) => {
         // run spassr. Params are from roxi.config.yaml
 
-        require('spassr').spassr({
-
+        const conf = {
           ...app.config.spassr,
           ...params
-        })
+        }
+        require('spassr').spassr(conf)
       }
     }
   ]

lib/utils/index.js

@@ -53,7 +53,7 @@ async function keysAsFunctions(obj, map) {
       `there's no map method named ${key}. Available methods: ${Object.keys(map)}.` +
       `\nRenaming to "_${key}" will hide this message.`
     )
-    return fn ? fn(value) : value
+    return fn && value ? fn(value) : value
   })
   return Promise.all(promises)
 }