@sitecore-jss/sitecore-jss 0.1.0-beta.2

package/dist/cjs/i18n/graphql-dictionary-service.js

@@ -0,0 +1,125 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GraphQLDictionaryService = exports.queryError = void 0;
+const constants_1 = require("../constants");
+const dictionary_service_1 = require("./dictionary-service");
+const graphql_1 = require("../graphql");
+const debug_1 = __importDefault(require("../debug"));
+/** @private */
+exports.queryError = 'Valid value for rootItemId not provided and failed to auto-resolve app root item.';
+const query = /* GraphQL */ `
+  query DictionarySearch(
+    $rootItemId: String!
+    $language: String!
+    $templates: String!
+    $pageSize: Int = 10
+    $after: String
+  ) {
+    search(
+      where: {
+        AND: [
+          { name: "_path", value: $rootItemId, operator: CONTAINS }
+          { name: "_language", value: $language }
+          { name: "_templates", value: $templates, operator: CONTAINS }
+        ]
+      }
+      first: $pageSize
+      after: $after
+    ) {
+      total
+      pageInfo {
+        endCursor
+        hasNext
+      }
+      results {
+        key: field(name: "Key") {
+          value
+        }
+        phrase: field(name: "Phrase") {
+          value
+        }
+      }
+    }
+  }
+`;
+/**
+ * Service that fetch dictionary data using Sitecore's GraphQL API.
+ * @augments DictionaryServiceBase
+ * @mixes SearchQueryService<DictionaryQueryResult>
+ */
+class GraphQLDictionaryService extends dictionary_service_1.DictionaryServiceBase {
+    /**
+     * Creates an instance of graphQL dictionary service with the provided options
+     * @param {GraphQLDictionaryService} options instance
+     */
+    constructor(options) {
+        super(options);
+        this.options = options;
+        this.graphQLClient = this.getGraphQLClient();
+        this.searchService = new graphql_1.SearchQueryService(this.graphQLClient);
+    }
+    /**
+     * Fetches dictionary data for internalization.
+     * @param {string} language the language to fetch
+     * @default query (@see query)
+     * @returns {Promise<DictionaryPhrases>} dictionary phrases
+     * @throws {Error} if the app root was not found for the specified site and language.
+     */
+    fetchDictionaryData(language) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const cacheKey = this.options.siteName + language;
+            const cachedValue = this.getCacheValue(cacheKey);
+            if (cachedValue) {
+                debug_1.default.dictionary('using cached dictionary data for %s %s', language, this.options.siteName);
+                return cachedValue;
+            }
+            debug_1.default.dictionary('fetching site root for %s %s', language, this.options.siteName);
+            // If the caller does not specify a root item ID, then we try to figure it out
+            const rootItemId = this.options.rootItemId ||
+                (yield graphql_1.getAppRootId(this.graphQLClient, this.options.siteName, language, this.options.jssAppTemplateId));
+            if (!rootItemId) {
+                throw new Error(exports.queryError);
+            }
+            debug_1.default.dictionary('fetching dictionary data for %s %s', language, this.options.siteName);
+            const phrases = {};
+            yield this.searchService
+                .fetch(query, {
+                rootItemId,
+                language,
+                templates: this.options.dictionaryEntryTemplateId || constants_1.SitecoreTemplateId.DictionaryEntry,
+                pageSize: this.options.pageSize,
+            })
+                .then((results) => {
+                results.forEach((item) => (phrases[item.key.value] = item.phrase.value));
+            });
+            this.setCacheValue(cacheKey, phrases);
+            return phrases;
+        });
+    }
+    /**
+     * Gets a GraphQL client that can make requests to the API.
+     * @returns {GraphQLClient} implementation
+     */
+    getGraphQLClient() {
+        if (!this.options.clientFactory) {
+            throw new Error('You should provide a clientFactory.');
+        }
+        return this.options.clientFactory({
+            debugger: debug_1.default.dictionary,
+            retries: this.options.retries,
+        });
+    }
+}
+exports.GraphQLDictionaryService = GraphQLDictionaryService;

package/dist/cjs/i18n/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GraphQLDictionaryService = exports.DictionaryServiceBase = void 0;
+var dictionary_service_1 = require("./dictionary-service");
+Object.defineProperty(exports, "DictionaryServiceBase", { enumerable: true, get: function () { return dictionary_service_1.DictionaryServiceBase; } });
+var graphql_dictionary_service_1 = require("./graphql-dictionary-service");
+Object.defineProperty(exports, "GraphQLDictionaryService", { enumerable: true, get: function () { return graphql_dictionary_service_1.GraphQLDictionaryService; } });

package/dist/cjs/index.js

@@ -0,0 +1,36 @@
+"use strict";
+// NOTE: all imports are now named as to not make breaking changes
+// and to keep react-native working with cjs modules.
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.constants = exports.NativeDataFetcher = exports.GraphQLRequestClient = exports.enableDebug = exports.debug = void 0;
+const constants = __importStar(require("./constants"));
+exports.constants = constants;
+var debug_1 = require("./debug");
+Object.defineProperty(exports, "debug", { enumerable: true, get: function () { return __importDefault(debug_1).default; } });
+Object.defineProperty(exports, "enableDebug", { enumerable: true, get: function () { return debug_1.enableDebug; } });
+var graphql_request_client_1 = require("./graphql-request-client");
+Object.defineProperty(exports, "GraphQLRequestClient", { enumerable: true, get: function () { return graphql_request_client_1.GraphQLRequestClient; } });
+var native_fetcher_1 = require("./native-fetcher");
+Object.defineProperty(exports, "NativeDataFetcher", { enumerable: true, get: function () { return native_fetcher_1.NativeDataFetcher; } });

package/dist/cjs/layout/content-styles.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.traverseComponent = exports.traverseField = exports.traversePlaceholder = exports.getContentStylesheetUrl = exports.getContentStylesheetLink = void 0;
+const constants_1 = require("../constants");
+/**
+ * Regular expression to check if the content styles are used in the field value
+ */
+const CLASS_REGEXP = /class=".*(\bck-content\b).*"/g;
+/**
+ * Get the content styles link to be loaded from the Sitecore Edge Platform
+ * @param {LayoutServiceData} layoutData Layout service data
+ * @param {string} sitecoreEdgeContextId Sitecore Edge Context ID
+ * @param {string} [sitecoreEdgeUrl] Sitecore Edge Platform URL. Default is https://edge-platform.sitecorecloud.io
+ * @returns {HTMLLink | null} content styles link, null if no styles are used in layout
+ */
+const getContentStylesheetLink = (layoutData, sitecoreEdgeContextId, sitecoreEdgeUrl = constants_1.SITECORE_EDGE_URL_DEFAULT) => {
+    if (!layoutData.sitecore.route)
+        return null;
+    const config = { loadStyles: false };
+    exports.traverseComponent(layoutData.sitecore.route, config);
+    if (!config.loadStyles)
+        return null;
+    return {
+        href: exports.getContentStylesheetUrl(sitecoreEdgeContextId, sitecoreEdgeUrl),
+        rel: 'stylesheet',
+    };
+};
+exports.getContentStylesheetLink = getContentStylesheetLink;
+const getContentStylesheetUrl = (sitecoreEdgeContextId, sitecoreEdgeUrl = constants_1.SITECORE_EDGE_URL_DEFAULT) => `${sitecoreEdgeUrl}/v1/files/pages/styles/content-styles.css?sitecoreContextId=${sitecoreEdgeContextId}`;
+exports.getContentStylesheetUrl = getContentStylesheetUrl;
+const traversePlaceholder = (components, config) => {
+    if (config.loadStyles)
+        return;
+    components.forEach((component) => {
+        exports.traverseComponent(component, config);
+    });
+};
+exports.traversePlaceholder = traversePlaceholder;
+const traverseField = (field, config) => {
+    if (!field || config.loadStyles)
+        return;
+    if ('editable' in field && field.editable) {
+        config.loadStyles = CLASS_REGEXP.test(field.editable);
+    }
+    else if ('value' in field && typeof field.value === 'string') {
+        config.loadStyles = CLASS_REGEXP.test(field.value);
+    }
+    else if ('fields' in field) {
+        Object.values(field.fields).forEach((field) => {
+            exports.traverseField(field, config);
+        });
+    }
+    else if (Array.isArray(field)) {
+        field.forEach((field) => {
+            exports.traverseField(field, config);
+        });
+    }
+};
+exports.traverseField = traverseField;
+const traverseComponent = (component, config) => {
+    if (config.loadStyles)
+        return;
+    if ('fields' in component && component.fields) {
+        Object.values(component.fields).forEach((field) => {
+            exports.traverseField(field, config);
+        });
+    }
+    const placeholders = component.placeholders || {};
+    Object.keys(placeholders).forEach((placeholder) => {
+        exports.traversePlaceholder(placeholders[placeholder], config);
+    });
+};
+exports.traverseComponent = traverseComponent;

package/dist/cjs/layout/graphql-layout-service.js

@@ -0,0 +1,84 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GraphQLLayoutService = void 0;
+const layout_service_1 = require("./layout-service");
+const debug_1 = __importDefault(require("../debug"));
+/**
+ * Service that fetch layout data using Sitecore's GraphQL API.
+ * @augments LayoutServiceBase
+ * @mixes GraphQLRequestClient
+ */
+class GraphQLLayoutService extends layout_service_1.LayoutServiceBase {
+    /**
+     * Fetch layout data using the Sitecore GraphQL endpoint.
+     * @param {GraphQLLayoutServiceConfig} serviceConfig configuration
+     */
+    constructor(serviceConfig) {
+        super();
+        this.serviceConfig = serviceConfig;
+        this.graphQLClient = this.getGraphQLClient();
+    }
+    /**
+     * Fetch layout data for an item.
+     * @param {string} itemPath item path to fetch layout data for.
+     * @param {string} [language] the language to fetch layout data for.
+     * @returns {Promise<LayoutServiceData>} layout service data
+     */
+    fetchLayoutData(itemPath, language) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            const query = this.getLayoutQuery(itemPath, language);
+            debug_1.default.layout('fetching layout data for %s %s %s', itemPath, language, this.serviceConfig.siteName);
+            const data = yield this.graphQLClient.request(query);
+            // If `rendered` is empty -> not found
+            return (((_b = (_a = data === null || data === void 0 ? void 0 : data.layout) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.rendered) || {
+                sitecore: { context: { pageEditing: false, language }, route: null },
+            });
+        });
+    }
+    /**
+     * Gets a GraphQL client that can make requests to the API.
+     * @returns {GraphQLClient} implementation
+     */
+    getGraphQLClient() {
+        if (!this.serviceConfig.clientFactory) {
+            throw new Error('You should provide a clientFactory.');
+        }
+        return this.serviceConfig.clientFactory({
+            debugger: debug_1.default.layout,
+            retries: this.serviceConfig.retries,
+        });
+    }
+    /**
+     * Returns GraphQL Layout query
+     * @param {string} itemPath page route
+     * @param {string} [language] language
+     * @returns {string} GraphQL query
+     */
+    getLayoutQuery(itemPath, language) {
+        const languageVariable = language ? `, language:"${language}"` : '';
+        const layoutQuery = this.serviceConfig.formatLayoutQuery
+            ? this.serviceConfig.formatLayoutQuery(this.serviceConfig.siteName, itemPath, language)
+            : `layout(site:"${this.serviceConfig.siteName}", routePath:"${itemPath}"${languageVariable})`;
+        return `query {
+      ${layoutQuery}{
+        item {
+          rendered
+        }
+      }
+    }`;
+    }
+}
+exports.GraphQLLayoutService = GraphQLLayoutService;

package/dist/cjs/layout/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getComponentLibraryStylesheetLinks = exports.GraphQLLayoutService = exports.getContentStylesheetLink = exports.getChildPlaceholder = exports.getFieldValue = exports.EDITING_COMPONENT_ID = exports.EDITING_COMPONENT_PLACEHOLDER = exports.RenderingType = exports.LayoutServicePageState = void 0;
+// layout
+var models_1 = require("./models");
+Object.defineProperty(exports, "LayoutServicePageState", { enumerable: true, get: function () { return models_1.LayoutServicePageState; } });
+Object.defineProperty(exports, "RenderingType", { enumerable: true, get: function () { return models_1.RenderingType; } });
+Object.defineProperty(exports, "EDITING_COMPONENT_PLACEHOLDER", { enumerable: true, get: function () { return models_1.EDITING_COMPONENT_PLACEHOLDER; } });
+Object.defineProperty(exports, "EDITING_COMPONENT_ID", { enumerable: true, get: function () { return models_1.EDITING_COMPONENT_ID; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "getFieldValue", { enumerable: true, get: function () { return utils_1.getFieldValue; } });
+Object.defineProperty(exports, "getChildPlaceholder", { enumerable: true, get: function () { return utils_1.getChildPlaceholder; } });
+var content_styles_1 = require("./content-styles");
+Object.defineProperty(exports, "getContentStylesheetLink", { enumerable: true, get: function () { return content_styles_1.getContentStylesheetLink; } });
+var graphql_layout_service_1 = require("./graphql-layout-service");
+Object.defineProperty(exports, "GraphQLLayoutService", { enumerable: true, get: function () { return graphql_layout_service_1.GraphQLLayoutService; } });
+var themes_1 = require("./themes");
+Object.defineProperty(exports, "getComponentLibraryStylesheetLinks", { enumerable: true, get: function () { return themes_1.getComponentLibraryStylesheetLinks; } });

package/dist/cjs/layout/layout-service.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutServiceBase = void 0;
+/**
+ * Base abstraction to implement custom layout service
+ */
+class LayoutServiceBase {
+}
+exports.LayoutServiceBase = LayoutServiceBase;

package/dist/cjs/layout/models.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderingType = exports.LayoutServicePageState = exports.EDITING_COMPONENT_ID = exports.EDITING_COMPONENT_PLACEHOLDER = void 0;
+/**
+ * Static placeholder name used for component rendering
+ */
+exports.EDITING_COMPONENT_PLACEHOLDER = 'editing-componentmode-placeholder';
+/**
+ * Id of wrapper for component rendering
+ */
+exports.EDITING_COMPONENT_ID = 'editing-component';
+/**
+ * Layout Service page state enum
+ */
+var LayoutServicePageState;
+(function (LayoutServicePageState) {
+    LayoutServicePageState["Preview"] = "preview";
+    LayoutServicePageState["Edit"] = "edit";
+    LayoutServicePageState["Normal"] = "normal";
+})(LayoutServicePageState = exports.LayoutServicePageState || (exports.LayoutServicePageState = {}));
+/**
+ * Editing rendering type
+ */
+var RenderingType;
+(function (RenderingType) {
+    RenderingType["Component"] = "component";
+})(RenderingType = exports.RenderingType || (exports.RenderingType = {}));

package/dist/cjs/layout/themes.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStylesheetUrl = exports.getComponentLibraryStylesheetLinks = void 0;
+const _1 = require(".");
+const constants_1 = require("../constants");
+/**
+ * Pattern for library ids
+ * @example -library--foo
+ */
+const STYLES_LIBRARY_ID_REGEX = /-library--([^\s]+)/;
+/**
+ * Walks through rendering tree and returns list of links of all FEAAS, BYOC or SXA Component Library Stylesheets that are used
+ * @param {LayoutServiceData} layoutData Layout service data
+ * @param {string} sitecoreEdgeContextId Sitecore Edge Context ID
+ * @param {string} [sitecoreEdgeUrl] Sitecore Edge Platform URL. Default is https://edge-platform.sitecorecloud.io
+ * @returns {HTMLLink[]} library stylesheet links
+ */
+function getComponentLibraryStylesheetLinks(layoutData, sitecoreEdgeContextId, sitecoreEdgeUrl = constants_1.SITECORE_EDGE_URL_DEFAULT) {
+    const ids = new Set();
+    if (!layoutData.sitecore.route)
+        return [];
+    traverseComponent(layoutData.sitecore.route, ids);
+    return [...ids].map((id) => ({
+        href: exports.getStylesheetUrl(id, sitecoreEdgeContextId, sitecoreEdgeUrl),
+        rel: 'stylesheet',
+    }));
+}
+exports.getComponentLibraryStylesheetLinks = getComponentLibraryStylesheetLinks;
+const getStylesheetUrl = (id, sitecoreEdgeContextId, sitecoreEdgeUrl = constants_1.SITECORE_EDGE_URL_DEFAULT) => {
+    return `${sitecoreEdgeUrl}/v1/files/components/styles/${id}.css?sitecoreContextId=${sitecoreEdgeContextId}`;
+};
+exports.getStylesheetUrl = getStylesheetUrl;
+/**
+ * Traverse placeholder and components to add library ids
+ * @param {Array<ComponentRendering | HtmlElementRendering>} components
+ * @param {Set<string>} ids library ids
+ */
+const traversePlaceholder = (components, ids) => {
+    components.map((component) => {
+        const rendering = component;
+        return traverseComponent(rendering, ids);
+    });
+};
+/**
+ * Traverse component and children to add library ids
+ * @param {RouteData | ComponentRendering | HtmlElementRendering} component component data
+ * @param {Set<string>} ids library ids
+ */
+const traverseComponent = (component, ids) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    let libraryId = undefined;
+    if ('params' in component && component.params) {
+        // LibraryID in css class name takes precedence over LibraryId attribute
+        libraryId =
+            ((_b = (_a = component.params.CSSStyles) === null || _a === void 0 ? void 0 : _a.match(STYLES_LIBRARY_ID_REGEX)) === null || _b === void 0 ? void 0 : _b[1]) ||
+                ((_d = (_c = component.params.Styles) === null || _c === void 0 ? void 0 : _c.match(STYLES_LIBRARY_ID_REGEX)) === null || _d === void 0 ? void 0 : _d[1]) ||
+                component.params.LibraryId ||
+                undefined;
+    }
+    // if params are empty we try to fall back to data source or attributes
+    if (!libraryId && 'fields' in component && component.fields) {
+        libraryId =
+            ((_e = _1.getFieldValue(component.fields, 'CSSStyles', '').match(STYLES_LIBRARY_ID_REGEX)) === null || _e === void 0 ? void 0 : _e[1]) ||
+                ((_f = _1.getFieldValue(component.fields, 'Styles', '').match(STYLES_LIBRARY_ID_REGEX)) === null || _f === void 0 ? void 0 : _f[1]) ||
+                _1.getFieldValue(component.fields, 'LibraryId', '') ||
+                undefined;
+    }
+    // HTMLRendering its class attribute
+    if (!libraryId && 'attributes' in component && typeof component.attributes.class === 'string') {
+        libraryId = (_g = component.attributes.class.match(STYLES_LIBRARY_ID_REGEX)) === null || _g === void 0 ? void 0 : _g[1];
+    }
+    if (libraryId) {
+        ids.add(libraryId);
+    }
+    const placeholders = component.placeholders || {};
+    Object.keys(placeholders).forEach((placeholder) => {
+        traversePlaceholder(placeholders[placeholder], ids);
+    });
+};

package/dist/cjs/layout/utils.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getChildPlaceholder = exports.getFieldValue = void 0;
+/**
+ * @param {ComponentRendering | Fields} renderingOrFields the rendering or fields object to extract the field from
+ * @param {string} fieldName the name of the field to extract
+ * @param {T} [defaultValue] the default value to return if the field is not defined
+ * @returns {Field | T} the field value or the default value if the field is not defined
+ */
+// eslint-disable-next-line no-redeclare
+function getFieldValue(renderingOrFields, fieldName, defaultValue) {
+    if (!renderingOrFields || !fieldName) {
+        return defaultValue;
+    }
+    const fields = renderingOrFields;
+    const field = fields[fieldName];
+    if (field && typeof field.value !== 'undefined') {
+        return field.value;
+    }
+    const rendering = renderingOrFields;
+    if (!rendering.fields ||
+        !rendering.fields[fieldName] ||
+        typeof rendering.fields[fieldName].value === 'undefined') {
+        return defaultValue;
+    }
+    return rendering.fields[fieldName].value;
+}
+exports.getFieldValue = getFieldValue;
+/**
+ * Gets rendering definitions in a given child placeholder under a current rendering.
+ * @param {ComponentRendering} rendering
+ * @param {string} placeholderName
+ * @returns {Array<ComponentRendering | HtmlElementRendering>} child placeholder
+ */
+function getChildPlaceholder(rendering, placeholderName) {
+    if (!rendering ||
+        !placeholderName ||
+        !rendering.placeholders ||
+        !rendering.placeholders[placeholderName]) {
+        return [];
+    }
+    return rendering.placeholders[placeholderName];
+}
+exports.getChildPlaceholder = getChildPlaceholder;

package/dist/cjs/media/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mediaApi = void 0;
+const mediaApi = __importStar(require("./media-api"));
+exports.mediaApi = mediaApi;

package/dist/cjs/media/media-api.js

@@ -0,0 +1,128 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSrcSet = exports.updateImageUrl = exports.replaceMediaUrlPrefix = exports.getRequiredParams = exports.findEditorImageTag = void 0;
+const lodash_unescape_1 = __importDefault(require("lodash.unescape"));
+const url_parse_1 = __importDefault(require("url-parse"));
+// finds an img tag with HTML attributes
+const imgTagRegex = /<img([^>]+)\/>/i;
+// finds all the HTML attributes in a string
+const htmlAttrsRegex = /([^=\s]+)(="([^"]*)")?/gi;
+// finds the Sitecore media URL prefix
+const mediaUrlPrefixRegex = /\/([-~]{1})\/media\//i;
+/**
+ * Makes a request to Sitecore Content Service for the specified item path.
+ * @param {string} editorMarkup the markup to parse
+ * @returns {Object | null} found image tag; null in case if not found
+ */
+const findEditorImageTag = (editorMarkup) => {
+    // match the tag
+    const tagMatch = editorMarkup.match(imgTagRegex);
+    if (!tagMatch || tagMatch.length < 2) {
+        return null;
+    }
+    // find the attrs and turn them into a Map
+    const attrs = {};
+    let match = htmlAttrsRegex.exec(tagMatch[1]);
+    while (match !== null) {
+        attrs[match[1]] = lodash_unescape_1.default(match[3]);
+        match = htmlAttrsRegex.exec(tagMatch[1]);
+    }
+    return {
+        imgTag: tagMatch[0],
+        attrs,
+    };
+};
+exports.findEditorImageTag = findEditorImageTag;
+/**
+ * Get required query string params which should be merged with user params
+ * @param {object} qs layout service parsed query string
+ * @returns {object} requiredParams
+ */
+const getRequiredParams = (qs) => {
+    const { rev, db, la, vs, ts } = qs;
+    return { rev, db, la, vs, ts };
+};
+exports.getRequiredParams = getRequiredParams;
+/**
+ * Replace `/~/media` or `/-/media` with `/~/jssmedia` or `/-/jssmedia`, respectively.
+ * Can use `mediaUrlPrefix` in order to use a custom prefix.
+ * @param {string} url The URL to replace the media URL prefix in
+ * @param {RegExp} [mediaUrlPrefix=mediaUrlPrefixRegex] The regex to match the media URL prefix
+ * @returns {string} The URL with the media URL prefix replaced
+ */
+const replaceMediaUrlPrefix = (url, mediaUrlPrefix = mediaUrlPrefixRegex) => {
+    const parsed = url_parse_1.default(url, {}, true);
+    const match = mediaUrlPrefix.exec(parsed.pathname);
+    if (match && match.length > 1) {
+        // regex will provide us with /-/ or /~/ type
+        parsed.set('pathname', parsed.pathname.replace(mediaUrlPrefix, `/${match[1]}/jssmedia/`));
+    }
+    return parsed.toString();
+};
+exports.replaceMediaUrlPrefix = replaceMediaUrlPrefix;
+/**
+ * Prepares a Sitecore media URL with `params` for use by the JSS media handler.
+ * This is done by replacing `/~/media` or `/-/media` with `/~/jssmedia` or `/-/jssmedia`, respectively.
+ * Provided `params` are used as the querystring parameters for the media URL.
+ * Can use `mediaUrlPrefix` in order to use a custom prefix.
+ * If no `params` are sent, the original media URL is returned.
+ * @param {string} url The URL to prepare
+ * @param {Object} [params] The querystring parameters to use
+ * @param {RegExp} [mediaUrlPrefix=mediaUrlPrefixRegex] The regex to match the media URL prefix
+ * @returns {string} The prepared URL
+ */
+const updateImageUrl = (url, params, mediaUrlPrefix = mediaUrlPrefixRegex) => {
+    if (!params || Object.keys(params).length === 0) {
+        // if params aren't supplied, no need to run it through JSS media handler
+        return url;
+    }
+    // polyfill node `global` in browser to workaround https://github.com/unshiftio/url-parse/issues/150
+    if (typeof window !== 'undefined' && !window.global) {
+        window.global = {};
+    }
+    const parsed = url_parse_1.default(exports.replaceMediaUrlPrefix(url, mediaUrlPrefix), {}, true);
+    const requiredParams = exports.getRequiredParams(parsed.query);
+    const query = Object.assign({}, params);
+    Object.entries(requiredParams).forEach(([key, param]) => {
+        if (param) {
+            query[key] = param;
+        }
+    });
+    parsed.set('query', query);
+    return parsed.toString();
+};
+exports.updateImageUrl = updateImageUrl;
+/**
+ * Receives an array of `srcSet` parameters that are iterated and used as parameters to generate
+ * a corresponding set of updated Sitecore media URLs via @see updateImageUrl. The result is a comma-delimited
+ * list of media URLs with respective dimension parameters.
+ *
+ * @example
+ * // returns '/ipsum.jpg?h=1000&w=1000 1000w, /ipsum.jpg?mh=250&mw=250 250w'
+ * getSrcSet('/ipsum.jpg', [{ h: 1000, w: 1000 }, { mh: 250, mw: 250 } ])
+ *
+ * More information about `srcSet`: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img}
+ *
+ * @param {string} url The URL to prepare
+ * @param {Array} srcSet The array of parameters to use
+ * @param {Object} [imageParams] The querystring parameters to use
+ * @param {RegExp} [mediaUrlPrefix] The regex to match the media URL prefix
+ * @returns {string} The prepared URL
+ */
+const getSrcSet = (url, srcSet, imageParams, mediaUrlPrefix) => {
+    return srcSet
+        .map((params) => {
+        const newParams = Object.assign(Object.assign({}, imageParams), params);
+        const imageWidth = newParams.w || newParams.mw;
+        if (!imageWidth) {
+            return null;
+        }
+        return `${exports.updateImageUrl(url, newParams, mediaUrlPrefix)} ${imageWidth}w`;
+    })
+        .filter((value) => value)
+        .join(', ');
+};
+exports.getSrcSet = getSrcSet;

package/dist/cjs/models.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });