@mindful-web/marko-web-native-x 1.0.0

package/components/gtm-init.marko.js

@@ -0,0 +1,60 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-native-x$1.0.0/components/gtm-init.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_defaultValue = require("@mindful-web/marko-core/utils/default-value"),
+    defaultValue = module_defaultValue.default || module_defaultValue,
+    module_objectPath_module = require("@mindful-web/object-path"),
+    objectPath_module = module_objectPath_module.default || module_objectPath_module,
+    get = module_objectPath_module.get,
+    getAsObject = module_objectPath_module.getAsObject,
+    marko_web_gtm_init_template = require("@mindful-web/marko-web-gtm/components/init.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_gtm_init_tag = marko_loadTag(marko_web_gtm_init_template),
+    marko_web_gtm_noscript_template = require("@mindful-web/marko-web-gtm/components/noscript.marko"),
+    marko_web_gtm_noscript_tag = marko_loadTag(marko_web_gtm_noscript_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { req } = out.global;
+
+  const story = getAsObject(input, "story");
+
+  const on = defaultValue(input.on, "load");
+
+  const requestFrame = defaultValue(input.requestFrame, true);
+
+  const targetTag = defaultValue(input.targetTag, "body");
+
+  const containerId = "GTM-MNQH25L";
+
+  marko_web_gtm_init_tag({
+      name: "dataLayerNativeX",
+      start: true,
+      containerId: containerId,
+      on: on,
+      requestFrame: requestFrame,
+      targetTag: targetTag,
+      push: input.push
+    }, out, __component, "0");
+
+  marko_web_gtm_noscript_tag({
+      containerId: containerId
+    }, out, __component, "1");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-native-x$1.0.0/components/gtm-init.marko",
+    tags: [
+      "@mindful-web/marko-web-gtm/components/init.marko",
+      "@mindful-web/marko-web-gtm/components/noscript.marko"
+    ]
+  };

package/components/init.marko

@@ -0,0 +1,35 @@
+import { warn } from "@mindful-web/utils";
+
+$ const { uri, enabled, on } = input;
+$ const src = "https://cdn.parameter1.com/native-x/v1.2.0/lib.min.js";
+
+<if(uri)>
+  <if(enabled)>
+    <if(on)>
+      <marko-web-deferred-script-loader-register
+        name="fortnight"
+        src=src
+        on=on
+        esm=true
+        request-frame=input.requestFrame
+        target-tag=input.targetTag
+        init="var i = window, r = 'fortnight'; i['FortnightObject'] = r; i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments); };"
+        init-only=input.initOnly
+      />
+    </if>
+    <else>
+      <script>
+        (function (i,r) {
+          i['FortnightObject'] = r; i[r] = i[r] || function () {
+            (i[r].q = i[r].q || []).push(arguments);
+          }
+        })(window, 'fortnight');
+      </script>
+      <script type="module" src=src async defer></script>
+    </else>
+    <script>fortnight('init', { domain: '${uri}' });</script>
+  </if>
+</if>
+<else>
+  $ warn('Unable to init NativeX: a uri is required.');
+</else>

package/components/init.marko.js

@@ -0,0 +1,63 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-native-x$1.0.0/components/init.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_utils_module = require("@mindful-web/utils"),
+    utils_module = module_utils_module.default || module_utils_module,
+    warn = module_utils_module.warn,
+    marko_web_deferred_script_loader_register_template = require("@mindful-web/marko-web-deferred-script-loader/components/register.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_deferred_script_loader_register_tag = marko_loadTag(marko_web_deferred_script_loader_register_template),
+    marko_attr = require("marko/dist/runtime/html/helpers/attr"),
+    helpers_escape_xml = require("marko/dist/runtime/html/helpers/escape-xml"),
+    marko_escapeXml = helpers_escape_xml.x,
+    marko_escapeScript = require("marko/dist/runtime/html/helpers/escape-script-placeholder");
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { uri, enabled, on } = input;
+
+  const src = "https://cdn.parameter1.com/native-x/v1.2.0/lib.min.js";
+
+  if (uri) {
+    if (enabled) {
+      if (on) {
+        marko_web_deferred_script_loader_register_tag({
+            name: "fortnight",
+            src: src,
+            on: on,
+            esm: true,
+            requestFrame: input.requestFrame,
+            targetTag: input.targetTag,
+            init: "var i = window, r = 'fortnight'; i['FortnightObject'] = r; i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments); };",
+            initOnly: input.initOnly
+          }, out, __component, "0");
+      } else {
+        out.w("<script>\n        (function (i,r) {\n          i['FortnightObject'] = r; i[r] = i[r] || function () {\n            (i[r].q = i[r].q || []).push(arguments);\n          }\n        })(window, 'fortnight');\n      </script><script type=\"module\"" +
+          marko_attr("src", src) +
+          " async defer></script>");
+      }
+
+      out.w("<script>" +
+        marko_escapeScript(("fortnight('init', { domain: '" + uri) + "' });") +
+        "</script>");
+    }
+  } else {
+    warn('Unable to init NativeX: a uri is required.');
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-native-x$1.0.0/components/init.marko",
+    tags: [
+      "@mindful-web/marko-web-deferred-script-loader/components/register.marko"
+    ]
+  };

package/components/marko.json

@@ -0,0 +1,72 @@
+{
+  "<marko-web-native-x-init>": {
+    "template": "./init.marko",
+    "@uri": "string",
+    "@enabled": "boolean",
+    "@on": "string",
+    "@target-tag": "string",
+    "@request-frame": "boolean",
+    "@init-only": "boolean"
+  },
+  "<marko-web-native-x-retrieve>": {
+    "template": "./retrieve.marko",
+    "@uri": "string",
+    "@id": "string",
+    "@enabled": "boolean",
+    "@opts": "object",
+    "@section-name": "string"
+  },
+  "<marko-web-native-x-render>": {
+    "template": "./render.marko",
+    "@config": "object",
+    "@name": "string",
+    "@aliases": "array",
+    "@node": "object",
+    "@when": "boolean",
+    "@section-name": "string"
+  },
+  "<marko-web-native-x-fetch-elements>": {
+    "template": "./fetch-elements.marko",
+    "@uri": "string",
+    "@id": "string",
+    "@opts": "object"
+  },
+  "<marko-web-native-x-gtm-init>": {
+    "template": "./gtm-init.marko",
+    "@on": "string",
+    "@target-tag": "string",
+    "@request-frame": "boolean",
+    "@story": "object"
+  },
+  "<marko-web-native-x-story-advertiser-related-stories>": {
+    "template": "./story/advertiser-related-stories.marko",
+    "@advertiser-id": "string",
+    "@external-id": "string",
+    "@publisher-id": "string",
+    "@exclude-story-ids": "array"
+  },
+  "<marko-web-native-x-publisher-stories>": {
+    "template": "./publisher-stories.marko",
+    "@limit": "string",
+    "@domain-name": "string",
+    "@website": "string",
+    "@sort": "object"
+  },
+  "<marko-web-native-x-story-track-init>": {
+    "template": "./story/track-init.marko",
+    "@story": "object"
+  },
+  "<marko-web-native-x-story-track-page-view>": {
+    "template": "./story/track-page-view.marko"
+  },
+  "<marko-web-native-x-story-track-end-of-content>": {
+    "template": "./story/track-end-of-content.marko"
+  },
+  "<marko-web-native-x-story-track-social-share>": {
+    "template": "./story/track-social-share.marko"
+  },
+  "<marko-web-native-x-story-track-outbound-links>": {
+    "template": "./story/track-outbound-links.marko",
+    "@container": "string"
+  }
+}

package/components/publisher-stories.marko

@@ -0,0 +1,64 @@
+import defaultFragment from "../apollo/graphql/fragments/publisher-stories";
+import buildQuery from "../apollo/graphql/queries/publisher-stories";
+
+$ const { req, nativeX } = out.global;
+
+$ const {
+  domainName,
+  website,
+  limit = 25,
+  after,
+  sort = {
+    order: -1,
+    field: "publishedAt",
+  },
+} = input;
+$ const args = {
+  config: nativeX,
+  sort,
+  pagination: {
+    first: limit,
+    after,
+  },
+  ...(domainName && { domainName }),
+  ...(website && { website }),
+};
+
+/**
+ * @param NativeXConfiguration The NativeX config
+ * @param object The Marko template to render
+ * @param Document A query fragment to be used with the story query
+ */
+$ const getStories = async ({
+  config,
+  pagination,
+  sort,
+  queryFragment = defaultFragment,
+  domainName,
+  website,
+} = {}) => {
+
+  const input = {
+    ...(domainName && { domainName }),
+    ...(website && { website }),
+  };
+  const query = buildQuery(queryFragment);
+  const variables = { input, pagination, sort };
+
+  const { data } = await config.client.query({ query, variables });
+  if (!data || !data.publisherStories) return { nodes: [], pageInfo: {} };
+  const { pageInfo } = data.publisherStories;
+  const nodes = data.publisherStories.edges
+    .map(edge => (edge && edge.node ? edge.node : null))
+    .filter(c => c);
+  return { nodes, pageInfo };
+};
+
+<if(nativeX && (domainName || website))>
+  <marko-web-resolve|{ resolved }| promise=getStories(args)>
+    <${input.renderBody} nodes=resolved.nodes pageInfo=resolved.pageInfo />
+  </marko-web-resolve>
+</if>
+<else>
+  $ warn('Unable to fetch elements from NativeX: a uri and advertiser ID are required.');
+</else>

package/components/publisher-stories.marko.js

@@ -0,0 +1,96 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-native-x$1.0.0/components/publisher-stories.marko",
+    marko_component = require("./publisher-stories.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_defaultFragment = require("../apollo/graphql/fragments/publisher-stories"),
+    defaultFragment = module_defaultFragment.default || module_defaultFragment,
+    module_buildQuery = require("../apollo/graphql/queries/publisher-stories"),
+    buildQuery = module_buildQuery.default || module_buildQuery,
+    marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag"),
+    marko_web_resolve_template = require("@mindful-web/marko-core/components/resolve.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_resolve_tag = marko_loadTag(marko_web_resolve_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { req, nativeX } = out.global;
+
+  const {
+  domainName,
+  website,
+  limit = 25,
+  after,
+  sort = {
+    order: -1,
+    field: "publishedAt",
+  },
+} = input;
+
+  const args = {
+  config: nativeX,
+  sort,
+  pagination: {
+    first: limit,
+    after,
+  },
+  ...(domainName && { domainName }),
+  ...(website && { website }),
+};
+
+  const getStories = async ({
+  config,
+  pagination,
+  sort,
+  queryFragment = defaultFragment,
+  domainName,
+  website,
+} = {}) => {
+
+  const input = {
+    ...(domainName && { domainName }),
+    ...(website && { website }),
+  };
+  const query = buildQuery(queryFragment);
+  const variables = { input, pagination, sort };
+
+  const { data } = await config.client.query({ query, variables });
+  if (!data || !data.publisherStories) return { nodes: [], pageInfo: {} };
+  const { pageInfo } = data.publisherStories;
+  const nodes = data.publisherStories.edges
+    .map(edge => (edge && edge.node ? edge.node : null))
+    .filter(c => c);
+  return { nodes, pageInfo };
+};
+
+  if (nativeX && (domainName || website)) {
+    marko_web_resolve_tag({
+        promise: getStories(args),
+        renderBody: function(out, { resolved }) {
+          marko_dynamicTag(out, input.renderBody, function() {
+            return {
+                nodes: resolved.nodes,
+                pageInfo: resolved.pageInfo
+              };
+          }, null, null, null, __component, "1");
+        }
+      }, out, __component, "0");
+  } else {
+    warn('Unable to fetch elements from NativeX: a uri and advertiser ID are required.');
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-native-x$1.0.0/components/publisher-stories.marko",
+    component: "./publisher-stories.marko",
+    tags: [
+      "@mindful-web/marko-core/components/resolve.marko"
+    ]
+  };

package/components/render.marko

@@ -0,0 +1,33 @@
+$ const {
+  config,
+  name,
+  aliases,
+  node,
+  when,
+  sectionName,
+} = input;
+
+$ const results = {
+  node,
+  containerAttrs: {},
+  linkAttrs: {},
+};
+
+<if(config)>
+  <if(when)>
+    <marko-web-native-x-retrieve|{ wasFound, hasCampaign, campaign, linkAttrs, containerAttrs }| ...config.getPlacement({ name, aliases }) section-name=sectionName>
+      <if(wasFound)>
+        $ results.node = hasCampaign ? campaign : node;
+        $ results.containerAttrs = containerAttrs;
+        $ results.linkAttrs = linkAttrs;
+        <${input.renderBody} ...results />
+      </if>
+      <else>
+        <${input.renderBody} ...results />
+      </else>
+    </marko-web-native-x-retrieve>
+  </if>
+  <else>
+    <${input.renderBody} ...results />
+  </else>
+</if>

package/components/render.marko.js

@@ -0,0 +1,75 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-native-x$1.0.0/components/render.marko",
+    marko_component = require("./render.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag"),
+    marko_assign = require("marko/dist/runtime/helpers/assign"),
+    marko_web_native_x_retrieve_template = require("./retrieve.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_native_x_retrieve_tag = marko_loadTag(marko_web_native_x_retrieve_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const {
+  config,
+  name,
+  aliases,
+  node,
+  when,
+  sectionName,
+} = input;
+
+  const results = {
+  node,
+  containerAttrs: {},
+  linkAttrs: {},
+};
+
+  if (config) {
+    if (when) {
+      marko_web_native_x_retrieve_tag(marko_assign({}, config.getPlacement({
+          name: name,
+          aliases: aliases
+        }), {
+          sectionName: sectionName,
+          renderBody: function(out, { wasFound, hasCampaign, campaign, linkAttrs, containerAttrs }) {
+            if (wasFound) {
+              results.node = hasCampaign ? campaign : node;
+
+              results.containerAttrs = containerAttrs;
+
+              results.linkAttrs = linkAttrs;
+
+              marko_dynamicTag(out, input.renderBody, function() {
+                return results;
+              }, null, null, null, __component, "1");
+            } else {
+              marko_dynamicTag(out, input.renderBody, function() {
+                return results;
+              }, null, null, null, __component, "2");
+            }
+          }
+        }), out, __component, "0");
+    } else {
+      marko_dynamicTag(out, input.renderBody, function() {
+        return results;
+      }, null, null, null, __component, "3");
+    }
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-native-x$1.0.0/components/render.marko",
+    component: "./render.marko",
+    tags: [
+      "./retrieve.marko"
+    ]
+  };

package/components/retrieve.marko

@@ -0,0 +1,44 @@
+import { defaultValue } from "@mindful-web/marko-web/utils";
+import { warn } from "@mindful-web/utils";
+import convertAdToContent from "../utils/convert-ad-to-content";
+
+$ const { uri, id, sectionName } = input;
+$ const enabled = defaultValue(input.enabled, true);
+$ const results = {
+  wasFound: false,
+  hasCampaign: false,
+  campaign: {},
+  containerAttrs: {},
+  linkAttrs: {},
+  response: {},
+};
+
+<if(enabled)>
+  <if(uri && id)>
+    <marko-web-native-x-fetch-elements|{ ads }| uri=uri id=id opts=input.opts>
+      $ const hasAd = ads && ads.length && ads[0];
+      <if(hasAd)>
+        $ const ad = ads[0];
+
+        $ results.wasFound = true;
+        $ results.response = ad;
+        $ results.hasCampaign = ad.hasCampaign;
+        $ results.containerAttrs = ad.attributes.container;
+        $ results.linkAttrs = ad.attributes.link;
+        $ if (ad.hasCampaign) results.campaign = convertAdToContent(ad, { sectionName });
+
+        <${input.renderBody} ...results />
+      </if>
+      <else>
+        <${input.renderBody} ...results />
+      </else>
+    </marko-web-native-x-fetch-elements>
+  </if>
+  <else>
+     $ warn('Unable to render NativeX placement: a uri and placement ID are required.');
+     <${input.renderBody} ...results />
+  </else>
+</if>
+<else>
+  <${input.renderBody} ...results />
+</else>

package/components/retrieve.marko.js

@@ -0,0 +1,94 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-native-x$1.0.0/components/retrieve.marko",
+    marko_component = require("./retrieve.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_utils_module = require("@mindful-web/marko-web/utils"),
+    utils_module = module_utils_module.default || module_utils_module,
+    defaultValue = module_utils_module.defaultValue,
+    module_utils_module2 = require("@mindful-web/utils"),
+    warn = module_utils_module2.warn,
+    module_convertAdToContent = require("../utils/convert-ad-to-content"),
+    convertAdToContent = module_convertAdToContent.default || module_convertAdToContent,
+    marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag"),
+    marko_web_native_x_fetch_elements_template = require("./fetch-elements.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_native_x_fetch_elements_tag = marko_loadTag(marko_web_native_x_fetch_elements_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { uri, id, sectionName } = input;
+
+  const enabled = defaultValue(input.enabled, true);
+
+  const results = {
+  wasFound: false,
+  hasCampaign: false,
+  campaign: {},
+  containerAttrs: {},
+  linkAttrs: {},
+  response: {},
+};
+
+  if (enabled) {
+    if (uri && id) {
+      marko_web_native_x_fetch_elements_tag({
+          uri: uri,
+          id: id,
+          opts: input.opts,
+          renderBody: function(out, { ads }) {
+            const hasAd = ads && ads.length && ads[0];
+
+            if (hasAd) {
+              const ad = ads[0];
+
+              results.wasFound = true;
+
+              results.response = ad;
+
+              results.hasCampaign = ad.hasCampaign;
+
+              results.containerAttrs = ad.attributes.container;
+
+              results.linkAttrs = ad.attributes.link;
+
+              if (ad.hasCampaign) results.campaign = convertAdToContent(ad, { sectionName });
+
+              marko_dynamicTag(out, input.renderBody, function() {
+                return results;
+              }, null, null, null, __component, "1");
+            } else {
+              marko_dynamicTag(out, input.renderBody, function() {
+                return results;
+              }, null, null, null, __component, "2");
+            }
+          }
+        }, out, __component, "0");
+    } else {
+      warn('Unable to render NativeX placement: a uri and placement ID are required.');
+
+      marko_dynamicTag(out, input.renderBody, function() {
+        return results;
+      }, null, null, null, __component, "3");
+    }
+  } else {
+    marko_dynamicTag(out, input.renderBody, function() {
+      return results;
+    }, null, null, null, __component, "4");
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-native-x$1.0.0/components/retrieve.marko",
+    component: "./retrieve.marko",
+    tags: [
+      "./fetch-elements.marko"
+    ]
+  };