Vite

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abcnews/aunty",
-  "version": "13.0.3",
+  "version": "14.0.0",
   "description": "A toolkit for working with ABC News projects",
   "repository": "abcnews/aunty",
   "license": "MIT",
@@ -38,6 +38,8 @@
     "@babel/preset-env": "^7.6.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.10.4",
+    "@rollup/plugin-dsv": "^2.0.3",
+    "@sveltejs/vite-plugin-svelte": "^1.0.3",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^26.1.0",
     "babel-loader": "^8.2.2",
@@ -79,11 +81,12 @@
     "style-loader": "^2.0.0",
     "svelte": "^3.24.1",
     "svelte-loader": "^3.1.1",
-    "svelte-preprocess": "^4.1.1",
+    "svelte-preprocess": "^4.10.7",
     "tcp-ping-sync": "^1.0.0",
     "typescript": "^4.0.2",
     "update-notifier": "^6.0.2",
     "url-loader": "^4.1.1",
+    "vite": "^3.0.7",
     "webpack": "^5.33.2",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-dev-server": "^4.6.0",

src/cli/constants.js

@@ -10,6 +10,7 @@ const COMMAND_ALIASES = (module.exports.COMMAND_ALIASES = {
   g: 'generate',
   r: 'release',
   s: 'serve',
+  sv: 'serve-vite',
   sc: 'sign-cert',
   t: 'test'
 });
@@ -66,7 +67,7 @@ ${sec('Development commands')}
   ${
     isProject
       ? `${cmd('aunty generate')} ${req('<generator>')}
-    Generate code for your project or Core Media 
+    Generate code for your project or Core Media
 
   ${cmd('aunty clean')}
     Delete the current project's build output directories.
@@ -98,7 +99,7 @@ ${sec('Helper commands')}
 
   ${cmd('aunty help')} ${req('<command>')}
     Display complete help for this ${req('command')}.
-  
+
   ${cmd('aunty sign-cert')} # Mac OS only (for now)
     Create a consistent SSL certificate for the dev server
 `

src/cli/serve-vite/constants.js

@@ -0,0 +1,33 @@
+// Ours
+const { cmd, hvy, opt, sec } = require('../../utils/color');
+
+const BUNDLE_ANALYZER_CONFIG = (module.exports.BUNDLE_ANALYZER_CONFIG = {
+  analyzerHost: '127.0.0.1',
+  logLevel: 'error',
+  openAnalyzer: false
+});
+
+module.exports.MESSAGES = {
+  port: port => `Port ${port} already in use attempting to use port ${port + 1}`,
+  analysis: ({ analyzerHost, analyzerPort }) => `http://${analyzerHost}:${analyzerPort}`,
+  serve: ({ bundleAnalysisPath, hot, publicPath }) => `Serve (${hvy(process.env.NODE_ENV)}):${
+    bundleAnalysisPath
+      ? `
+  ┣ ${hvy('bundle analysis')}: ${bundleAnalysisPath}`
+      : ''
+  }
+  ┣ ${hvy('hot')}: ${cmd(hot ? 'yes' : 'no')}
+  ┗ ${hvy('publicPath')}: ${publicPath}`,
+  // TODO: Add aunty config section to usage
+  usage: name => `Usage: ${cmd(`aunty ${name}`)} ${opt('[options]')}
+
+${sec('Options')}
+
+  ${opt('-d')}, ${opt('--dry')} Output the generated webpack & dev server configuration, then exit
+
+${sec('Environment variables')}
+
+  • Builds will assume you have set ${cmd('NODE_ENV=development')}, unless you specify otherwise.
+  • You can override the host and port the server listens on by setting ${cmd('AUNTY_HOST')} and ${cmd('AUNTY_PORT')}.
+`
+};

src/cli/serve-vite/index.js

@@ -0,0 +1,97 @@
+// External
+const importLazy = require('import-lazy')(require);
+const { createServer } = importLazy('vite');
+
+// TODO: add budle analyzer https://github.com/btd/rollup-plugin-visualizer
+// const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+
+// Ours
+const { getServeConfig } = require('../../config/serve');
+const { getViteConfig } = require('../../config/vite');
+const { throws } = require('../../utils/async');
+const { cmd } = require('../../utils/color');
+const { dry, info, spin } = require('../../utils/logging');
+const { combine } = require('../../utils/structures');
+const { command } = require('../');
+const cleanCommand = require('../clean');
+const { MESSAGES } = require('./constants');
+const { getViteServerConfig } = require('../../config/viteServer');
+
+module.exports = command(
+  {
+    name: 'serve-vite',
+    nodeEnv: 'development',
+    usage: MESSAGES.usage
+  },
+  async argv => {
+    const { port } = await getServeConfig();
+    const viteConfig = getViteConfig();
+    viteConfig.server = await getViteServerConfig();
+
+    if (argv.dry) {
+      return dry({
+        'Vite config': viteConfig
+      });
+    }
+
+    throws(await cleanCommand(['--quiet']));
+
+    info(
+      MESSAGES.serve({
+        hot: viteConfig.server.hmr,
+        publicPath: viteConfig.base
+      })
+    );
+
+    const server = await createServer(viteConfig);
+    const [gracefullyInterrupt, restore] = gracefullyHandleLogging();
+
+    return new Promise(async (resolve, reject) => {
+      try {
+        await server.listen(port);
+        server.printUrls();
+      } catch (err) {
+        return reject(err);
+      }
+
+      spinner = spin('Server running');
+      gracefullyInterrupt(spinner);
+
+      process.on('SIGINT', async () => {
+        spinner.clear();
+        await server.close();
+        if (spinner) {
+          spinner.succeed('Server closed');
+        }
+
+        resolve();
+      });
+    }).finally(() => restore());
+  }
+);
+
+const gracefullyHandleLogging = () => {
+  const METHODS = ['debug', 'error', 'info', 'log', 'warn'];
+  const reference = {};
+
+  for (let method of METHODS) {
+    reference[method] = console[method];
+  }
+
+  return [
+    spinner => {
+      for (let method of METHODS) {
+        console[method] = (...args) => {
+          spinner.clear();
+          reference[method](...args);
+          spinner.start();
+        };
+      }
+    },
+    () => {
+      for (let method of METHODS) {
+        console[method] = reference[method];
+      }
+    }
+  ];
+};

src/config/serve.js

@@ -10,7 +10,7 @@ const { probe } = require('tcp-ping-sync');
 // Ours
 const { combine } = require('../utils/structures');
 const { getProjectConfig } = require('./project');
-const { info } = require('../utils/logging');
+const { info, warn } = require('../utils/logging');
 const { MESSAGES } = require('../cli/serve/constants');
 
 const HOME_DIR = homedir();
@@ -48,12 +48,15 @@ const addUserSSLConfig = config => {
         cert: readFileSync(getSSLPath(config.host, SERVER_CERT_FILENAME)),
         key: readFileSync(getSSLPath(config.host, SERVER_KEY_FILENAME))
       };
-    } catch (e) {}
+    } catch (e) {
+      warn('Could not access SSL certificates at path ' + join(HOME_DIR, SSL_DIR, config.host) + '/');
+    }
   }
 
   return config;
 };
 
+// TODO: this can probably be removed if we switch fully to vite, it does this automatically https://vitejs.dev/config/server-options.html#server-strictport
 const findPort = async (port, max = port + 100, host = '0.0.0.0') => {
   return new Promise((resolve, reject) => {
     const socket = new Socket();