@story-telling-reporter/react-embed-code-generator/lib/build-code/index.js

## Installation `yarn install`

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.buildEmbedCode = buildEmbedCode;
exports.buildKaraokeEmbedCode = buildKaraokeEmbedCode;
exports.buildPuzzlePhotoInfraEmbedCode = buildPuzzlePhotoInfraEmbedCode;
exports.buildScrollToAudioEmbedCode = buildScrollToAudioEmbedCode;
exports.buildScrollableImageEmbedCode = buildScrollableImageEmbedCode;
exports.buildScrollableThreeModelEmbedCode = buildScrollableThreeModelEmbedCode;
exports.buildScrollableVideoEmbedCode = buildScrollableVideoEmbedCode;
exports.buildSubtitledAudioEmbedCode = buildSubtitledAudioEmbedCode;
var _react = _interopRequireDefault(require("react"));
var _server = _interopRequireDefault(require("react-dom/server"));
var _serializeJavascript = _interopRequireDefault(require("serialize-javascript"));
var _styledComponents = require("styled-components");
var _reactKaraoke = require("@story-telling-reporter/react-karaoke");
var _reactSubtitledAudio = require("@story-telling-reporter/react-subtitled-audio");
var _reactScrollToAudio = require("@story-telling-reporter/react-scroll-to-audio");
var _reactPuzzlePhotoInfra = require("@story-telling-reporter/react-puzzle-photo-infra");
var _uuid = require("uuid");
var _constants = require("./constants");
var _manifest = _interopRequireDefault(require("../../dist/manifest.json"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
// eslint-disable-line

// manifest.json is generated after `make build` or `make dev`

/**
 *  @param {import('@story-telling-reporter/react-karaoke').KaraokeProps} data
 *  @returns string
 */
function buildKaraokeEmbedCode(data) {
  return buildEmbedCode(data, _constants.pkgNames.karaoke, _reactKaraoke.Karaoke);
}

/**
 *  @param {import('@story-telling-reporter/react-subtitled-audio').SubtitledAudioProps} data
 *  @returns string
 */
function buildSubtitledAudioEmbedCode(data) {
  return buildEmbedCode(data, _constants.pkgNames.subtitledAudio, _reactSubtitledAudio.KidsSubtitledAudio);
}

/**
 *  @param {Object} data
 *  @returns string
 */
function buildScrollableImageEmbedCode(data) {
  return buildEmbedCode(data, _constants.pkgNames.scrollableImage, null);
}

/**
 *  @param {Object} data
 *  @returns string
 */
function buildScrollableVideoEmbedCode(data) {
  return buildEmbedCode(data, _constants.pkgNames.scrollableVideo, null);
}

/**
 *  @param {Object} data
 *  @param {string} [data.id]
 *  @param {boolean} [bottomEntryPointOnly=false]
 *  @returns string
 */
function buildScrollToAudioEmbedCode(data, bottomEntryPointOnly = false) {
  if (bottomEntryPointOnly) {
    return (0, _reactScrollToAudio.buildBottomEntryPointStaticMarkup)({
      id: data === null || data === void 0 ? void 0 : data.id
    });
  }
  return buildEmbedCode(data, _constants.pkgNames.scrollToAudio, _reactScrollToAudio.ScrollToAudio);
}

/**
 *  @param {import('@story-telling-reporter/react-three-story-controls').ScrollableThreeModelProps} data
 *  @returns string
 */
function buildScrollableThreeModelEmbedCode(data) {
  return buildEmbedCode(data, _constants.pkgNames.scrollableThreeModel, null);
}
function buildPuzzlePhotoInfraEmbedCode(data) {
  return buildEmbedCode(data, _constants.pkgNames.puzzlePhotoInfra, _reactPuzzlePhotoInfra.PuzzlePhotoInfra);
}

/**
 *
 * @export
 * @param {Object} data - Data for react component
 * @param {string} pkgName - values specified in `pkgNames`
 * @param {Function|null} Component
 * @returns {string} embedded code
 */
function buildEmbedCode(data, pkgName, Component) {
  // use uuid to avoid duplication id
  const uuid = (0, _uuid.v4)();
  const dataWithUuid = {
    ...data,
    uuid
  };
  let jsx = '';
  let styleTags = '';
  if (Component) {
    const sheet = new _styledComponents.ServerStyleSheet();
    try {
      jsx = _server.default.renderToStaticMarkup(sheet.collectStyles(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        ...data
      })));
      styleTags = sheet.getStyleTags();
    } finally {
      sheet.seal();
    }
  }
  return `
    ${styleTags}
    <script>
      (function() {
        var namespace = '@story-telling-reporter/react-embed-code-generator@${_manifest.default.version}';
        var pkg = '${pkgName}';
        if (typeof window != 'undefined') {
          if (!window.hasOwnProperty(namespace)) {
            window[namespace] = {};
          }
          if (window[namespace] && !window[namespace].hasOwnProperty(pkg)) {
            window[namespace][pkg] = [];
          }
          if (Array.isArray(window[namespace][pkg])) {
            var data = ${(0, _serializeJavascript.default)(dataWithUuid)};
            window[namespace][pkg].push(data);
          }
        }
      })()
    </script>
    <div id="${uuid}">${jsx}</div>
    <script type="text/javascript" defer crossorigin src="${_manifest.default === null || _manifest.default === void 0 ? void 0 : _manifest.default[pkgName]}"></script>
  `;
}