@micromag/cli 0.3.767 → 0.3.771

package/bin/export.js

@@ -14,7 +14,7 @@ var nodeFetch = require('node-fetch');
 var express = require('express');
 var getPort = require('get-port');
 var React = require('react');
-var ReactDOMServer = require('react-dom/server');
+var server = require('react-dom/server');
 var Viewer = require('@micromag/viewer');
 
 const readJSON = file => fsExtra.readJsonSync(file);
@@ -315,7 +315,7 @@ const getStoryHtmlSSR = (story, settings = {}) => {
     googleApiKey,
     memoryRouter: true
   });
-  return ReactDOMServer.renderToStaticMarkup(element);
+  return server.renderToStaticMarkup(element);
 };
 
 const storyParser = new core.StoryParser({

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/cli",
-    "version": "0.3.767",
+    "version": "0.3.771",
     "private": false,
     "description": "",
     "keywords": [
@@ -46,13 +46,13 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.767",
-        "@micromag/elements": "^0.3.767",
-        "@micromag/fields": "^0.3.767",
-        "@micromag/screens": "^0.3.767",
-        "@micromag/transforms": "^0.3.767",
-        "@micromag/viewer": "^0.3.767",
-        "@micromag/viewer-build": "^0.3.767",
+        "@micromag/core": "^0.3.769",
+        "@micromag/elements": "^0.3.771",
+        "@micromag/fields": "^0.3.769",
+        "@micromag/screens": "^0.3.771",
+        "@micromag/transforms": "^0.3.769",
+        "@micromag/viewer": "^0.3.771",
+        "@micromag/viewer-build": "^0.3.771",
         "change-case": "^5.4.4",
         "classnames": "^2.2.6",
         "commander": "^12.0.0",
@@ -62,7 +62,7 @@
         "lodash": "^4.17.21",
         "node-fetch": "^3.3.2",
         "prop-types": "^15.7.2",
-        "puppeteer": "^9.1.1",
+        "puppeteer": "^24.33.0",
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
     },
@@ -70,5 +70,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "af57b08ccc073db83b6480e3a43fe14e6f36e0f6"
+    "gitHead": "a74bf984979f2bee58b57859808a8d9f6fa31f4a"
 }

package/lib/index.js

@@ -1,537 +0,0 @@
-'use strict';
-
-var _regenerator = require('@babel/runtime/helpers/regenerator');
-var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
-var fs = require('fs');
-var core = require('@micromag/core');
-var screensManager = require('@micromag/screens');
-var FieldsManager = require('@micromag/fields');
-var transforms = require('@micromag/transforms');
-var _regeneratorValues = require('@babel/runtime/helpers/regeneratorValues');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var path = require('path');
-var puppeteer = require('puppeteer');
-var fsExtra = require('fs-extra');
-var nodeFetch = require('node-fetch');
-var express = require('express');
-var getPort = require('get-port');
-var React = require('react');
-var ReactDOMServer = require('react-dom/server');
-var Viewer = require('@micromag/viewer');
-
-// Regexps involved with splitting words in various case formats.
-const SPLIT_LOWER_UPPER_RE = /([\p{Ll}\d])(\p{Lu})/gu;
-const SPLIT_UPPER_UPPER_RE = /(\p{Lu})([\p{Lu}][\p{Ll}])/gu;
-// Used to iterate over the initial split result and separate numbers.
-const SPLIT_SEPARATE_NUMBER_RE = /(\d)\p{Ll}|(\p{L})\d/u;
-// Regexp involved with stripping non-word characters from the result.
-const DEFAULT_STRIP_REGEXP = /[^\p{L}\d]+/giu;
-// The replacement value for splits.
-const SPLIT_REPLACE_VALUE = "$1\0$2";
-// The default characters to keep after transforming case.
-const DEFAULT_PREFIX_SUFFIX_CHARACTERS = "";
-/**
- * Split any cased input strings into an array of words.
- */
-function split(value) {
-    let result = value.trim();
-    result = result
-        .replace(SPLIT_LOWER_UPPER_RE, SPLIT_REPLACE_VALUE)
-        .replace(SPLIT_UPPER_UPPER_RE, SPLIT_REPLACE_VALUE);
-    result = result.replace(DEFAULT_STRIP_REGEXP, "\0");
-    let start = 0;
-    let end = result.length;
-    // Trim the delimiter from around the output string.
-    while (result.charAt(start) === "\0")
-        start++;
-    if (start === end)
-        return [];
-    while (result.charAt(end - 1) === "\0")
-        end--;
-    return result.slice(start, end).split(/\0/g);
-}
-/**
- * Split the input string into an array of words, separating numbers.
- */
-function splitSeparateNumbers(value) {
-    const words = split(value);
-    for (let i = 0; i < words.length; i++) {
-        const word = words[i];
-        const match = SPLIT_SEPARATE_NUMBER_RE.exec(word);
-        if (match) {
-            const offset = match.index + (match[1] ?? match[2]).length;
-            words.splice(i, 1, word.slice(0, offset), word.slice(offset));
-        }
-    }
-    return words;
-}
-/**
- * Convert a string to camel case (`fooBar`).
- */
-function camelCase(input, options) {
-    const [prefix, words, suffix] = splitPrefixSuffix(input, options);
-    const lower = lowerFactory(options?.locale);
-    const upper = upperFactory(options?.locale);
-    const transform = pascalCaseTransformFactory(lower, upper);
-    return (prefix +
-        words
-            .map((word, index) => {
-            if (index === 0)
-                return lower(word);
-            return transform(word, index);
-        })
-            .join("") +
-        suffix);
-}
-function lowerFactory(locale) {
-    return (input) => input.toLocaleLowerCase(locale);
-}
-function upperFactory(locale) {
-    return (input) => input.toLocaleUpperCase(locale);
-}
-function pascalCaseTransformFactory(lower, upper) {
-    return (word, index) => {
-        const char0 = word[0];
-        const initial = index > 0 && char0 >= "0" && char0 <= "9" ? "_" + char0 : upper(char0);
-        return initial + lower(word.slice(1));
-    };
-}
-function splitPrefixSuffix(input, options = {}) {
-    const splitFn = options.split ?? (options.separateNumbers ? splitSeparateNumbers : split);
-    const prefixCharacters = options.prefixCharacters ?? DEFAULT_PREFIX_SUFFIX_CHARACTERS;
-    const suffixCharacters = options.suffixCharacters ?? DEFAULT_PREFIX_SUFFIX_CHARACTERS;
-    let prefixIndex = 0;
-    let suffixIndex = input.length;
-    while (prefixIndex < input.length) {
-        const char = input.charAt(prefixIndex);
-        if (!prefixCharacters.includes(char))
-            break;
-        prefixIndex++;
-    }
-    while (suffixIndex > prefixIndex) {
-        const index = suffixIndex - 1;
-        const char = input.charAt(index);
-        if (!suffixCharacters.includes(char))
-            break;
-        suffixIndex = index;
-    }
-    return [
-        input.slice(0, prefixIndex),
-        splitFn(input.slice(prefixIndex, suffixIndex)),
-        input.slice(suffixIndex),
-    ];
-}
-
-var transformStory = function transformStory(story, format) {
-  var transformKey = camelCase(format);
-  var baseStory = transforms.transformer(story, transformKey, story);
-  var _story$components = story.components,
-    components = _story$components === void 0 ? [] : _story$components;
-  var componentsStory = components.reduce(function (newStory, screen) {
-    var type = screen.type;
-    var _screensManager$getDe = screensManager.getDefinition(type),
-      _screensManager$getDe2 = _screensManager$getDe.transforms,
-      transforms = _screensManager$getDe2 === void 0 ? {} : _screensManager$getDe2;
-    var transform = transforms[transformKey] || null;
-    if (transform !== null) {
-      return transform(newStory, screen, story);
-    }
-    return newStory;
-  }, baseStory);
-  return transforms.postProcessor(componentsStory, transformKey);
-};
-
-var startServer = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(path) {
-    var port,
-      finalPort,
-      _args = arguments,
-      _t;
-    return _regenerator().w(function (_context) {
-      while (1) switch (_context.n) {
-        case 0:
-          port = _args.length > 1 && _args[1] !== undefined ? _args[1] : null;
-          _t = port;
-          if (_t) {
-            _context.n = 2;
-            break;
-          }
-          _context.n = 1;
-          return getPort({
-            port: getPort.makeRange(3050, 3100)
-          });
-        case 1:
-          _t = _context.v;
-        case 2:
-          finalPort = _t;
-          return _context.a(2, new Promise(function (resolve) {
-            var app = express();
-            app.use(express["static"](path));
-            var server = app.listen(finalPort, function () {
-              return resolve(server);
-            });
-          }));
-      }
-    }, _callee);
-  }));
-  return function startServer(_x) {
-    return _ref.apply(this, arguments);
-  };
-}();
-
-var getOutputPath = function getOutputPath(output, filename) {
-  if (output !== null) {
-    var fileExt = path.extname(filename);
-    var outputExt = path.extname(output);
-    if (fileExt && outputExt === '') {
-      return path.join(output, filename);
-    }
-    return output;
-  }
-  return path.join(process.cwd(), "./".concat(filename));
-};
-
-var DEBUG = false;
-var READY_WAIT_TIMEOUT = 20000; // ms
-var DEFAULT_VIEWPORT = {
-  width: 360,
-  height: 640,
-  deviceScaleFactor: 3,
-  isMobile: true
-};
-var captureStory = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(story, location) {
-    var settings,
-      _settings$viewport,
-      defaultViewport,
-      _settings$googleApiKe,
-      googleApiKey,
-      _settings$executableP,
-      executablePath,
-      server,
-      serverPort,
-      width,
-      height,
-      _ref2,
-      _ref2$components,
-      screens,
-      browser,
-      pages,
-      hasPage,
-      page,
-      count,
-      _loop,
-      index,
-      _args2 = arguments,
-      _t2;
-    return _regenerator().w(function (_context2) {
-      while (1) switch (_context2.n) {
-        case 0:
-          settings = _args2.length > 2 && _args2[2] !== undefined ? _args2[2] : {};
-          _settings$viewport = settings.viewport, defaultViewport = _settings$viewport === void 0 ? DEFAULT_VIEWPORT : _settings$viewport, _settings$googleApiKe = settings.googleApiKey, googleApiKey = _settings$googleApiKe === void 0 ? null : _settings$googleApiKe, _settings$executableP = settings.executablePath, executablePath = _settings$executableP === void 0 ? null : _settings$executableP;
-          _context2.n = 1;
-          return startServer(path.join(process.cwd(), './node_modules/@micromag/viewer-build/build/'));
-        case 1:
-          server = _context2.v;
-          serverPort = server.address().port;
-          width = defaultViewport.width, height = defaultViewport.height;
-          _ref2 = story || {}, _ref2$components = _ref2.components, screens = _ref2$components === void 0 ? null : _ref2$components;
-          _context2.n = 2;
-          return puppeteer.launch(_objectSpread(_objectSpread({
-            devtools: DEBUG
-          }, executablePath !== null ? {
-            executablePath: executablePath
-          } : null), {}, {
-            defaultViewport: defaultViewport,
-            args: ['--no-sandbox']
-          }));
-        case 2:
-          browser = _context2.v;
-          _context2.n = 3;
-          return browser.pages();
-        case 3:
-          pages = _context2.v;
-          hasPage = pages.length > 0;
-          if (!hasPage) {
-            _context2.n = 4;
-            break;
-          }
-          _t2 = pages[0];
-          _context2.n = 6;
-          break;
-        case 4:
-          _context2.n = 5;
-          return browser.newPage();
-        case 5:
-          _t2 = _context2.v;
-        case 6:
-          page = _t2;
-          _context2.n = 7;
-          return page["goto"]("http://127.0.0.1:".concat(serverPort));
-        case 7:
-          if (!(screens !== null)) {
-            _context2.n = 10;
-            break;
-          }
-          count = screens.length;
-          _loop = /*#__PURE__*/_regenerator().m(function _loop() {
-            var screenNumber, screen, id, type, singleScreenStory, _screen$video, _screen$video2, _screen$video2$media, _screen$video2$media2, _screen$video2$media3, url, fileExtension, res, fileStream;
-            return _regenerator().w(function (_context) {
-              while (1) switch (_context.p = _context.n) {
-                case 0:
-                  screenNumber = index + 1;
-                  screen = screens[index];
-                  id = screen.id, type = screen.type;
-                  singleScreenStory = _objectSpread(_objectSpread({}, story), {}, {
-                    components: screens.slice(index, index + 1)
-                  });
-                  console.log("Screen ".concat(screenNumber, "/").concat(count, " (").concat(type, ")..."));
-                  if (!(type === 'video' || type === 'video-360')) {
-                    _context.n = 2;
-                    break;
-                  }
-                  _screen$video = screen.video, _screen$video2 = _screen$video === void 0 ? {} : _screen$video, _screen$video2$media = _screen$video2.media, _screen$video2$media2 = _screen$video2$media === void 0 ? {} : _screen$video2$media, _screen$video2$media3 = _screen$video2$media2.url, url = _screen$video2$media3 === void 0 ? null : _screen$video2$media3;
-                  console.log("Downloading video from ".concat(url, "..."));
-                  fileExtension = url.split(/[#?]/)[0].split('.').pop().trim();
-                  _context.n = 1;
-                  return nodeFetch(url);
-                case 1:
-                  res = _context.v;
-                  fileStream = fsExtra.createWriteStream(getOutputPath(location, "".concat(screenNumber, ".").concat(fileExtension)));
-                  _context.n = 2;
-                  return new Promise(function (resolve, reject) {
-                    res.body.pipe(fileStream);
-                    res.body.on('error', reject);
-                    fileStream.on('finish', resolve);
-                  });
-                case 2:
-                  _context.n = 3;
-                  return page.evaluate(function (storyToRender, storyProps) {
-                    return renderStory(storyToRender, storyProps);
-                  }, singleScreenStory, {
-                    screen: id,
-                    renderContext: 'capture',
-                    withoutRouter: true,
-                    withoutMenu: true,
-                    width: width,
-                    height: height,
-                    googleApiKey: googleApiKey
-                  });
-                case 3:
-                  _context.p = 3;
-                  _context.n = 4;
-                  return page.waitForSelector('[data-screen-ready="true"]', {
-                    timeout: READY_WAIT_TIMEOUT
-                  });
-                case 4:
-                  _context.n = 6;
-                  break;
-                case 5:
-                  _context.p = 5;
-                  _context.v;
-                  console.log("Timeout reached: ".concat(id));
-                case 6:
-                  _context.n = 7;
-                  return page.screenshot({
-                    path: getOutputPath(location, "".concat(screenNumber, ".png"))
-                  });
-                case 7:
-                  return _context.a(2);
-              }
-            }, _loop, null, [[3, 5]]);
-          });
-          index = 0;
-        case 8:
-          if (!(index < count)) {
-            _context2.n = 10;
-            break;
-          }
-          return _context2.d(_regeneratorValues(_loop()), 9);
-        case 9:
-          index += 1;
-          _context2.n = 8;
-          break;
-        case 10:
-          _context2.n = 11;
-          return browser.close();
-        case 11:
-          server.close();
-        case 12:
-          return _context2.a(2);
-      }
-    }, _callee);
-  }));
-  return function captureStory(_x, _x2) {
-    return _ref.apply(this, arguments);
-  };
-}();
-
-var getStoryHtml = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(story) {
-    var settings,
-      _settings$googleApiKe,
-      googleApiKey,
-      _settings$executableP,
-      executablePath,
-      server,
-      serverPort,
-      browser,
-      pages,
-      hasPage,
-      page,
-      pageContent,
-      _args = arguments,
-      _t;
-    return _regenerator().w(function (_context) {
-      while (1) switch (_context.n) {
-        case 0:
-          settings = _args.length > 1 && _args[1] !== undefined ? _args[1] : {};
-          _settings$googleApiKe = settings.googleApiKey, googleApiKey = _settings$googleApiKe === void 0 ? null : _settings$googleApiKe, _settings$executableP = settings.executablePath, executablePath = _settings$executableP === void 0 ? null : _settings$executableP;
-          _context.n = 1;
-          return startServer(path.join(process.cwd(), './node_modules/@micromag/viewer-build/build/'));
-        case 1:
-          server = _context.v;
-          serverPort = server.address().port;
-          _context.n = 2;
-          return puppeteer.launch(_objectSpread(_objectSpread({
-            devtools: false
-          }, executablePath !== null ? {
-            executablePath: executablePath
-          } : null), {}, {
-            defaultViewport: {
-              width: 360,
-              height: 640,
-              deviceScaleFactor: 3,
-              isMobile: true
-            }
-          }));
-        case 2:
-          browser = _context.v;
-          _context.n = 3;
-          return browser.pages();
-        case 3:
-          pages = _context.v;
-          hasPage = pages.length > 0;
-          if (!hasPage) {
-            _context.n = 4;
-            break;
-          }
-          _t = pages[0];
-          _context.n = 6;
-          break;
-        case 4:
-          _context.n = 5;
-          return browser.newPage();
-        case 5:
-          _t = _context.v;
-        case 6:
-          page = _t;
-          _context.n = 7;
-          return page["goto"]("http://127.0.0.1:".concat(serverPort));
-        case 7:
-          _context.n = 8;
-          return page.evaluate(function (storyToRender, storyProps) {
-            return renderStory(storyToRender, storyProps);
-          }, story, {
-            renderContext: 'static',
-            withoutRouter: true,
-            withoutMenu: true,
-            googleApiKey: googleApiKey
-          });
-        case 8:
-          _context.n = 9;
-          return page.content();
-        case 9:
-          pageContent = _context.v;
-          _context.n = 10;
-          return browser.close();
-        case 10:
-          server.close();
-          return _context.a(2, pageContent);
-      }
-    }, _callee);
-  }));
-  return function getStoryHtml(_x) {
-    return _ref.apply(this, arguments);
-  };
-}();
-
-var getStoryHtmlSSR = function getStoryHtmlSSR(story) {
-  var settings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var _settings$googleApiKe = settings.googleApiKey,
-    googleApiKey = _settings$googleApiKe === void 0 ? null : _settings$googleApiKe;
-  var element = /*#__PURE__*/React.createElement(Viewer, {
-    story: story,
-    renderContext: 'static',
-    withoutRouter: true,
-    withoutMenu: true,
-    googleApiKey: googleApiKey,
-    memoryRouter: true
-  });
-  return ReactDOMServer.renderToStaticMarkup(element);
-};
-
-var storyParser = new core.StoryParser({
-  fieldsManager: FieldsManager,
-  screensManager: screensManager
-});
-var exportStoryToPath = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(story, format, output) {
-    var settings,
-      storyParsed,
-      html,
-      destination,
-      _html,
-      _destination,
-      parsedDestination,
-      newStory,
-      fileDestination,
-      _args = arguments,
-      _t;
-    return _regenerator().w(function (_context) {
-      while (1) switch (_context.n) {
-        case 0:
-          settings = _args.length > 3 && _args[3] !== undefined ? _args[3] : {};
-          storyParsed = storyParser.parse(story);
-          _t = format;
-          _context.n = _t === 'html' ? 1 : _t === 'html-ssr' ? 3 : _t === 'images' ? 4 : 5;
-          break;
-        case 1:
-          _context.n = 2;
-          return getStoryHtml(storyParsed, settings);
-        case 2:
-          html = _context.v;
-          destination = getOutputPath(output, 'story.html');
-          console.log('destination', destination);
-          fs.writeFileSync(destination, html, 'utf-8');
-          return _context.a(3, 6);
-        case 3:
-          _html = getStoryHtmlSSR(storyParsed, settings);
-          _destination = getOutputPath(output, 'story-ssr.html');
-          fs.writeFileSync(_destination, _html, 'utf-8');
-          return _context.a(3, 6);
-        case 4:
-          captureStory(storyParsed, output, settings);
-          return _context.a(3, 6);
-        case 5:
-          parsedDestination = getOutputPath(output, 'parsed.json');
-          fs.writeFileSync(parsedDestination, JSON.stringify(storyParsed), 'utf-8');
-          newStory = transformStory(storyParsed, format); // const mediaDestination = getOutputPath(output);
-          fileDestination = getOutputPath(output, 'article.json');
-          console.log(output, fileDestination);
-          fs.writeFileSync(fileDestination, JSON.stringify(newStory), 'utf-8');
-          return _context.a(3, 6);
-        case 6:
-          return _context.a(2);
-      }
-    }, _callee);
-  }));
-  return function exportStoryToPath(_x, _x2, _x3) {
-    return _ref.apply(this, arguments);
-  };
-}();
-
-exports.captureStory = captureStory;
-exports.exportStoryToPath = exportStoryToPath;
-exports.getStoryHtml = getStoryHtml;
-exports.transformStory = transformStory;