Add preview command support

api/designManager.js

@@ -43,9 +43,37 @@ async function fetchRawAssetByPath(accountId, path) {
   });
 }
 
+async function fetchModulesByPath(accountId, path) {
+  return http.get(accountId, {
+    uri: `${DESIGN_MANAGER_API_PATH}/modules/by-path/${path}?portalId=${accountId}`,
+  });
+}
+
+async function fetchPreviewModules(accountId, token) {
+  return http.get(accountId, {
+    uri: `${DESIGN_MANAGER_API_PATH}/modules/local-preview?portalId=${accountId}&previewToken=${token}`,
+  });
+}
+
+async function fetchTemplatesByPath(accountId, path) {
+  return http.get(accountId, {
+    uri: `${DESIGN_MANAGER_API_PATH}/templates/by-path/${path}?portalId=${accountId}`,
+  });
+}
+
+async function fetchPreviewTemplates(accountId, token) {
+  return http.get(accountId, {
+    uri: `${DESIGN_MANAGER_API_PATH}/templates/local-preview?portalId=${accountId}&previewToken=${token}`,
+  });
+}
+
 module.exports = {
   fetchBuiltinMapping,
   fetchMenus,
   fetchRawAssetByPath,
   fetchThemes,
+  fetchModulesByPath,
+  fetchPreviewModules,
+  fetchTemplatesByPath,
+  fetchPreviewTemplates,
 };

api/domains.js

@@ -0,0 +1,16 @@
+const http = require('../http');
+
+const DOMAINS_API_PATH = `/cms/v3/domains`;
+
+async function fetchDomains(accountId) {
+  const result = await http.get(accountId, {
+    uri: DOMAINS_API_PATH,
+    json: true,
+  });
+
+  return result.results;
+}
+
+module.exports = {
+  fetchDomains,
+};

api/preview.js

@@ -0,0 +1,16 @@
+const { request } = require('../http');
+
+async function fetchPreviewRender(url, sessionInfo) {
+  const { sessionToken } = sessionInfo;
+
+  const urlObject = new URL(url);
+
+  urlObject.searchParams.append('localPreviewToken', sessionToken);
+  urlObject.searchParams.append('hsCacheBuster', Date.now());
+
+  return request(urlObject.href);
+}
+
+module.exports = {
+  fetchPreviewRender,
+};

lang/en.lyaml

@@ -52,5 +52,3 @@ en:
           fieldsJsSyntaxError: "There was an error converting JS file \"{{ path }}\""
           fieldsJsNotReturnArray: "There was an error loading JS file \"{{ path }}\". Expected type \"Array\" but received type \"{{ returned }}\" . Make sure that your function returns an array"
           fieldsJsNotFunction:  "There was an error loading JS file \"{{ path }}\". Expected type \"Function\" but received type \"{{ returned }}\". Make sure that your default export is a function."
-
-

lib/preview.js

@@ -0,0 +1,257 @@
+const http = require('http');
+const path = require('path');
+const chokidar = require('chokidar');
+const express = require('express');
+const { v4: uuidv4 } = require('uuid');
+const { logger } = require('../logger');
+const {
+  ApiErrorContext,
+  logApiErrorInstance,
+  logApiUploadErrorInstance,
+} = require('../errorHandlers');
+const { uploadFolder } = require('./uploadFolder');
+const { shouldIgnoreFile, ignoreFile } = require('../ignoreRules');
+const { getFileMapperQueryValues } = require('../fileMapper');
+const { upload, deleteFile } = require('../api/fileMapper');
+const escapeRegExp = require('./escapeRegExp');
+const { convertToUnixPath, isAllowedExtension } = require('../path');
+const { triggerNotify } = require('./notify');
+const { getAccountConfig } = require('./config');
+const { createPreviewServerRoutes } = require('./preview/createRoutes');
+const {
+  getPortalDomains,
+  isUngatedForPreview,
+} = require('./preview/previewUtils');
+const { markRemoteFsDirty } = require('./preview/routes/meta');
+const { startSprocketMenuServer } = require('./preview/sprocketMenuServer');
+const {
+  createHttpsRedirectingServer,
+} = require('./preview/httpsRedirectingServer');
+
+const fileMapperArgs = getFileMapperQueryValues({
+  mode: 'publish',
+});
+
+async function uploadFile(accountId, src, dest) {
+  logger.debug(`Attempting to upload file "${src}" to "${dest}"`);
+
+  try {
+    await upload(accountId, src, dest, fileMapperArgs);
+    logger.log(`Uploaded file ${src} to ${dest}`);
+    markRemoteFsDirty();
+  } catch {
+    const uploadFailureMessage = `Uploading file ${src} to ${dest} failed`;
+    logger.debug(uploadFailureMessage);
+    logger.debug(`Retrying to upload file "${src}" to "${dest}"`);
+    try {
+      await upload(accountId, src, dest, fileMapperArgs);
+      markRemoteFsDirty();
+    } catch (error) {
+      logger.error(uploadFailureMessage);
+      logApiUploadErrorInstance(
+        error,
+        new ApiErrorContext({
+          accountId,
+          request: dest,
+          payload: src,
+        })
+      );
+    }
+  }
+}
+
+async function deleteRemoteFile(accountId, remoteFilePath) {
+  logger.debug(`Attempting to delete file "${remoteFilePath}"`);
+
+  try {
+    await deleteFile(accountId, remoteFilePath, fileMapperArgs);
+    logger.log(`Deleted file ${remoteFilePath}`);
+    markRemoteFsDirty();
+  } catch (error) {
+    logger.error(`Deleting file ${remoteFilePath} failed`);
+    logger.debug(`Retrying deletion of file ${remoteFilePath}`);
+    try {
+      await deleteFile(accountId, remoteFilePath, fileMapperArgs);
+      markRemoteFsDirty();
+    } catch (error) {
+      logger.error(`Deleting file ${remoteFilePath} failed`);
+      logApiErrorInstance(
+        error,
+        new ApiErrorContext({
+          accountId,
+          request: remoteFilePath,
+        })
+      );
+    }
+  }
+}
+
+const getDesignManagerPath = (src, dest, file) => {
+  const regex = new RegExp(`^${escapeRegExp(src)}`);
+  const relativePath = file.replace(regex, '');
+  return convertToUnixPath(path.join(dest, relativePath));
+};
+
+const buildDeleteFileFromPreviewBufferCallback = (sessionInfo, type) => {
+  const { accountId, src, dest, notify } = sessionInfo;
+
+  return filePath => {
+    if (shouldIgnoreFile(filePath)) {
+      logger.debug(`Skipping ${filePath} due to an ignore rule`);
+      return;
+    }
+
+    const remotePath = getDesignManagerPath(src, dest, filePath);
+    const deletePromise = deleteRemoteFile(accountId, remotePath);
+    triggerNotify(notify, 'Removed', filePath, deletePromise);
+  };
+};
+
+const buildUploadFileToPreviewBufferCallback = (sessionInfo, notifyMessage) => {
+  const { accountId, src, dest, notify } = sessionInfo;
+
+  return async filePath => {
+    if (!isAllowedExtension(filePath)) {
+      logger.debug(`Skipping ${filePath} due to unsupported extension`);
+      return;
+    }
+    if (shouldIgnoreFile(filePath)) {
+      logger.debug(`Skipping ${filePath} due to an ignore rule`);
+      return;
+    }
+    const destPath = getDesignManagerPath(src, dest, filePath);
+    const uploadPromise = uploadFile(accountId, filePath, destPath);
+    triggerNotify(notify, notifyMessage, filePath, uploadPromise);
+  };
+};
+
+const initialPreviewBufferUpload = async (sessionInfo, filePaths, uploadOptions) => {
+  const { accountId, src, dest } = sessionInfo;
+  const { onFinishCallback, ...rest } = uploadOptions;
+
+  const results = await uploadFolder(accountId, src, dest, fileMapperArgs, rest, filePaths);
+  onFinishCallback(results);
+};
+
+const startPreviewWatcher = async sessionInfo => {
+  const { src } = sessionInfo;
+  let watcherIsReady = false;
+
+  const watcher = chokidar.watch(src, {
+    ignoreInitial: true, // makes initial addition of files not trigger the watcher
+    ignored: file => shouldIgnoreFile(file),
+  });
+
+  const addFileCallback = buildUploadFileToPreviewBufferCallback(
+    sessionInfo,
+    'Added'
+  );
+  const changeFileCallback = buildUploadFileToPreviewBufferCallback(
+    sessionInfo,
+    'Change'
+  );
+  const deleteFileCallback = buildDeleteFileFromPreviewBufferCallback(
+    sessionInfo,
+    'file'
+  );
+  const deleteFolderCallback = buildDeleteFileFromPreviewBufferCallback(
+    sessionInfo,
+    'folder'
+  );
+
+  watcher.on('ready', () => {
+    watcherIsReady = true;
+  });
+  watcher.on('add', addFileCallback);
+  watcher.on('change', changeFileCallback);
+  watcher.on('error', error =>
+    logger.error(`An error occurred while watching files: ${error}`)
+  );
+
+  watcher.on('unlink', deleteFileCallback);
+  watcher.on('unlinkDir', deleteFolderCallback);
+
+  function sleep(ms) {
+    return new Promise(resolve => {
+      setTimeout(resolve, ms);
+    });
+  }
+  while (!watcherIsReady) {
+    await sleep(1);
+    // do nothing... surely there's a better way to do this...
+  }
+  return watcher;
+};
+
+const createLocalHttpServer = async sessionInfo => {
+  const expressServer = express();
+  expressServer.use('/', await createPreviewServerRoutes(sessionInfo));
+
+  return expressServer;
+};
+
+const preview = async (
+  accountId,
+  src,
+  dest,
+  { notify, filePaths, skipUpload, noSsl, port, uploadOptions }
+) => {
+  const accountConfig = getAccountConfig(accountId);
+  const domains = await getPortalDomains(accountId);
+  const sessionToken = uuidv4();
+  const PORT = port || 3000;
+  const protocol = noSsl ? 'http' : 'https';
+
+  const sessionInfo = {
+    src,
+    dest: `@preview/${sessionToken}/${dest}`,
+    fakeDest: dest,
+    portalName: accountConfig.name,
+    accountId,
+    env: accountConfig.env,
+    personalAccessKey: accountConfig.personalAccessKey,
+    // we find hublet later in the content metadata fetch
+    // can we get that ahead of time? hardcoding it for now
+    hublet: 'na1',
+    sessionToken,
+    domains,
+    PORT,
+    protocol,
+  };
+  const ungated = await isUngatedForPreview(sessionInfo);
+  if (!ungated) {
+    logger.log(
+      `Portal ${accountId} is missing a required gate for this feature.`
+    );
+    process.exit();
+  }
+  if (notify) {
+    ignoreFile(notify);
+  }
+
+  if (!skipUpload) {
+    await initialPreviewBufferUpload(sessionInfo, filePaths, uploadOptions);
+  }
+  const expressServer = await createLocalHttpServer(sessionInfo);
+  const previewWatcher = await startPreviewWatcher(sessionInfo);
+
+  if (!noSsl) {
+    const {
+      server,
+      innerHTTPServer,
+      innerHTTPSServer,
+    } = await createHttpsRedirectingServer(expressServer, domains);
+    server.listen(PORT);
+  } else {
+    const httpServer = http.createServer(expressServer);
+    httpServer.listen(PORT);
+  }
+  startSprocketMenuServer(sessionInfo);
+  logger.log(
+    `Local dev server started at ${protocol}://hslocal.net:${PORT} for portal ${accountId}`
+  );
+};
+
+module.exports = {
+  preview,
+};

lib/preview/createRoutes.js

@@ -0,0 +1,38 @@
+const { Router } = require('express');
+const { logger } = require('./../../logger');
+
+const { buildIndexRouteHandler } = require('./routes/index.js');
+const { buildModuleRouteHandler } = require('./routes/module.js');
+const { buildTemplateRouteHandler } = require('./routes/template.js');
+const { buildMetaRouteHandler } = require('./routes/meta.js');
+
+const { buildProxyRouteHandler } = require('./routes/proxyPathPageRouteHandler.js');
+const { buildProxyPageRouteHandler } = require('./routes/proxyPageRouteHandler.js');
+const { proxyPathPageResourceRedirect } = require('./routes/proxyPathPageResourceRedirect.js');
+const { proxyPageResourceRedirect } = require('./routes/proxyPageResourceRedirect.js');
+
+const createPreviewServerRoutes = async (sessionInfo) => {
+    const previewServerRouter = Router();
+    previewServerRouter.get('/proxy', buildProxyRouteHandler(sessionInfo));
+    previewServerRouter.get('/module/:modulePath(*)', buildModuleRouteHandler(sessionInfo));
+    previewServerRouter.get('/template/:templatePath(*)', buildTemplateRouteHandler(sessionInfo));
+    // fetches server metadata from the client (used by refresh script to check if fs has been changed)
+    previewServerRouter.get('/meta', buildMetaRouteHandler(sessionInfo));
+    // handles resources on the proxied page, so a fetch from relative path gets proxied too
+    previewServerRouter.get('/*', proxyPathPageResourceRedirect)
+    previewServerRouter.get('/*', proxyPageResourceRedirect);
+    previewServerRouter.post('/*', proxyPageResourceRedirect);
+    previewServerRouter.delete('/*', proxyPageResourceRedirect);
+    previewServerRouter.head('/*', proxyPageResourceRedirect);
+    previewServerRouter.put('/*', proxyPageResourceRedirect);
+    previewServerRouter.options('/*', proxyPageResourceRedirect);
+    previewServerRouter.get('/*', buildProxyPageRouteHandler(sessionInfo));
+    // index route
+    previewServerRouter.get('/', buildIndexRouteHandler(sessionInfo));
+
+    return previewServerRouter;
+}
+
+module.exports = {
+  createPreviewServerRoutes,
+}