@mindful-web/marko-web 1.0.0

package/components/page/wrapper.marko

@@ -0,0 +1,16 @@
+import { getAsArray } from "@mindful-web/object-path";
+
+$ const blockName = input.blockName || "page-wrapper";
+$ const tag = input.tag || "div";
+$ const sections = getAsArray(input.sections);
+
+$ const modifiers = [...getAsArray(input.modifiers)];
+$ const classNames = [blockName, ...modifiers.map(mod => `${blockName}--${mod}`), input.class];
+
+<if(sections.length)>
+  <${tag} ...input.attrs class=classNames>
+    <for|section| of=sections>
+      <marko-web-element ...section block-name=blockName name="section" />
+    </for>
+  </>
+</if>

package/components/page/wrapper.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$1.0.0/components/page/wrapper.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_objectPath_module = require("@mindful-web/object-path"),
+    objectPath_module = module_objectPath_module.default || module_objectPath_module,
+    getAsArray = module_objectPath_module.getAsArray,
+    marko_forOf = require("marko/dist/runtime/helpers/for-of"),
+    marko_assign = require("marko/dist/runtime/helpers/assign"),
+    marko_web_element_template = require("../element/index.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_element_tag = marko_loadTag(marko_web_element_template),
+    marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag");
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const blockName = input.blockName || "page-wrapper";
+
+  const tag = input.tag || "div";
+
+  const sections = getAsArray(input.sections);
+
+  const modifiers = [...getAsArray(input.modifiers)];
+
+  const classNames = [blockName, ...modifiers.map(mod => `${blockName}--${mod}`), input.class];
+
+  if (sections.length) {
+    marko_dynamicTag(out, tag, function() {
+      return marko_assign({}, input.attrs, {
+          class: classNames
+        });
+    }, function(out) {
+      var $for$0 = 0;
+
+      marko_forOf(sections, function(section) {
+        var $keyScope$0 = "[" + (($for$0++) + "]");
+
+        marko_web_element_tag(marko_assign({
+            name: "default",
+            tag: "div"
+          }, section, {
+            blockName: blockName,
+            name: "section"
+          }), out, __component, "1" + $keyScope$0);
+      });
+    }, null, null, __component, "0");
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web$1.0.0/components/page/wrapper.marko",
+    tags: [
+      "../element/index.marko"
+    ]
+  };

package/components/resolve/marko.json

@@ -0,0 +1,6 @@
+{
+  "<marko-web-resolve-page>": {
+    "template": "./page.marko",
+    "@node": "object"
+  }
+}

package/components/resolve/page.marko

@@ -0,0 +1,10 @@
+import { isFunction } from "@mindful-web/utils";
+import { getAsObject } from "@mindful-web/object-path";
+
+$ const node = getAsObject(input, "node");
+
+<if(isFunction(node.load))>
+  <marko-web-resolve|{ resolved }| promise=node.load()>
+    <${input.renderBody} resolved=resolved data=resolved.data />
+  </marko-web-resolve>
+</if>

package/components/resolve/page.marko.js

@@ -0,0 +1,49 @@
+// 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$1.0.0/components/resolve/page.marko",
+    marko_component = require("./page.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,
+    isFunction = module_utils_module.isFunction,
+    module_objectPath_module = require("@mindful-web/object-path"),
+    objectPath_module = module_objectPath_module.default || module_objectPath_module,
+    getAsObject = module_objectPath_module.getAsObject,
+    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 node = getAsObject(input, "node");
+
+  if (isFunction(node.load)) {
+    marko_web_resolve_tag({
+        promise: node.load(),
+        renderBody: function(out, { resolved }) {
+          marko_dynamicTag(out, input.renderBody, function() {
+            return {
+                resolved: resolved,
+                data: resolved.data
+              };
+          }, null, null, null, __component, "1");
+        }
+      }, out, __component, "0");
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web$1.0.0/components/resolve/page.marko",
+    component: "./page.marko",
+    tags: [
+      "@mindful-web/marko-core/components/resolve.marko"
+    ]
+  };

package/components/rss/marko.json

@@ -0,0 +1,10 @@
+{
+  "<marko-web-website-section-rss>": {
+    "template": "./website-section.marko",
+    "@query-name": "string",
+    "@query-params": "object",
+    "@channel-params": "object",
+    "@name": "string",
+    "@title": "string"
+  }
+}

package/components/rss/website-section.marko

@@ -0,0 +1,17 @@
+import { URLSearchParams } from "url";
+
+$ const { config } = out.global;
+
+$ const { queryName, queryParams, channelParams } = input;
+$ const defaultTitle = input.name ? `RSS Feed for ${input.name}` : "RSS Feed";
+$ const title = input.title || defaultTitle;
+
+$ const query = new URLSearchParams();
+$ query.append("input", JSON.stringify(queryParams));
+$ if (channelParams) query.append("channel", JSON.stringify(channelParams));
+
+$ const href = `${config.rssMountPoint()}/${queryName}.xml?${query}`;
+
+<if(queryName)>
+  <link rel="alternate" type="application/rss+xml" title=title href=href />
+</if>

package/components/rss/website-section.marko.js

@@ -0,0 +1,46 @@
+// 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$1.0.0/components/rss/website-section.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_url_module = require("url"),
+    url_module = module_url_module.default || module_url_module,
+    URLSearchParams = module_url_module.URLSearchParams,
+    marko_attr = require("marko/dist/runtime/html/helpers/attr");
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { config } = out.global;
+
+  const { queryName, queryParams, channelParams } = input;
+
+  const defaultTitle = input.name ? `RSS Feed for ${input.name}` : "RSS Feed";
+
+  const title = input.title || defaultTitle;
+
+  const query = new URLSearchParams();
+
+  query.append("input", JSON.stringify(queryParams));
+
+  if (channelParams) query.append("channel", JSON.stringify(channelParams));
+
+  const href = `${config.rssMountPoint()}/${queryName}.xml?${query}`;
+
+  if (queryName) {
+    out.w("<link rel=\"alternate\" type=\"application/rss+xml\"" +
+      marko_attr("title", title) +
+      marko_attr("href", href) +
+      ">");
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web$1.0.0/components/rss/website-section.marko"
+  };

package/config/abstract-config.js

@@ -0,0 +1,42 @@
+const {
+  get,
+  getAsArray,
+  getAsObject,
+} = require('@mindful-web/object-path');
+
+class AbstractConfig {
+  /**
+   *
+   * @param {object} config
+   */
+  constructor(config) {
+    this.config = config;
+  }
+
+  /**
+   *
+   * @param {string} path
+   * @param {*} def
+   */
+  get(path, def) {
+    return get(this.config, path, def);
+  }
+
+  /**
+   *
+   * @param {string} path
+   */
+  getAsArray(path) {
+    return getAsArray(this.config, path);
+  }
+
+  /**
+   *
+   * @param {string} path
+   */
+  getAsObject(path) {
+    return getAsObject(this.config, path);
+  }
+}
+
+module.exports = AbstractConfig;

package/config/core.js

@@ -0,0 +1,48 @@
+const { get } = require('@mindful-web/object-path');
+const AbstractConfig = require('./abstract-config');
+
+class CoreConfig extends AbstractConfig {
+  setWebsiteContext(context) {
+    this.websiteContext = context;
+  }
+
+  website(path, def) {
+    return get(this.websiteContext, path, def);
+  }
+
+  /**
+   * @deprecated Use this.website('language.code') instead
+   */
+  locale() {
+    return this.website('language.code', 'en-us');
+  }
+
+  lazyloadImages() {
+    return this.get('images.lazyload', true);
+  }
+
+  fallbackImage() {
+    return this.get('images.fallback');
+  }
+
+  loadMoreMountPoint() {
+    return this.get('loadMore.mountPoint', '/__load-more');
+  }
+
+  oembedMountPoint() {
+    return this.get('oembed.mountPoint', '/__oembed');
+  }
+
+  rssMountPoint() {
+    return this.get('rss.mountPoint', '/__rss');
+  }
+
+  /**
+   * @deprecated Use this.website('name') instead
+   */
+  siteName() {
+    return this.website('name', '');
+  }
+}
+
+module.exports = CoreConfig;

package/config/site.js

@@ -0,0 +1,6 @@
+const AbstractConfig = require('./abstract-config');
+
+class SiteConfig extends AbstractConfig {
+}
+
+module.exports = SiteConfig;

package/express/apollo.js

@@ -0,0 +1,34 @@
+const { apolloClient } = require('@mindful-web/express-apollo');
+const { parseBooleanHeader } = require('@mindful-web/utils');
+const pkg = require('../package.json');
+
+const { MINDFUL_NAMESPACE } = process.env;
+
+module.exports = (app, uri, config = {}) => {
+  /**
+   * Force sets GraphQL cache headers when cookies are present on the site.
+   * This can either force enable cache when globally disabled, or force disable cache
+   * when globally enabled.
+   */
+  const contextFn = ({ req }) => {
+    const headers = ['x-cache-site-context', 'x-cache-responses'].reduce((o, key) => {
+      const value = req.query[key] || req.cookies[key];
+      if (!value) return o; // do nothing if no cookie or query param is set.
+      // otherwise parse the value and set the GraphQL header to match.
+      return { ...o, [key]: parseBooleanHeader(value) };
+    }, {
+      'x-marko-web-request': JSON.stringify({
+        id: req.id,
+        env: process.env.NODE_ENV || 'unknonwn',
+        ua: req.get('user-agent'),
+        origin: `${req.protocol}://${req.get('host')}`,
+        path: req.path,
+        query: req.query,
+      }),
+      ...(MINDFUL_NAMESPACE && { 'x-namespace': MINDFUL_NAMESPACE }),
+      'user-agent': `marko-web-express-apollo/${pkg.version} via node-fetch/1.0`,
+    });
+    return { headers };
+  };
+  app.use(apolloClient(uri, config, config.link, contextFn));
+};

package/express/asset-loader.js

@@ -0,0 +1,55 @@
+const path = require('path');
+const { readFile } = require('fs').promises;
+const { asyncRoute } = require('@mindful-web/utils');
+
+const readManifest = async (loc) => {
+  try {
+    const contents = await readFile(loc, 'utf8');
+    return JSON.parse(contents);
+  } catch (e) {
+    if (e.code === 'ENOENT') return null;
+    throw e;
+  }
+};
+
+const getRelPathFromManifest = async ({ distDir, type, entry }) => {
+  const file = path.resolve(distDir, type, 'manifest.json');
+  const manifest = await readManifest(file);
+  if (!manifest) throw new Error(`Unable to load the asset manifest for type ${type}`);
+
+  const asset = manifest[entry];
+  if (!asset) throw new Error(`Unable to extract an asset for type ${type} using manifest entry ${entry}`);
+  return `${type}/${asset.file}`;
+};
+
+const isProduction = process.env.NODE_ENV === 'production';
+const types = [
+  { type: 'js', entry: 'browser/index.js' },
+];
+
+module.exports = ({ distDir }) => asyncRoute(async (req, res, next) => {
+  const { cdn } = res.locals;
+  const { app } = req;
+
+  if (!app.locals.assets) app.locals.assets = {};
+  const { assets } = app.locals;
+
+  // when on production, only load the file paths from the manifest once
+  // as long as the cdn configs are the same (allows for changing the cdn env var in prod)
+  if (isProduction && assets.files && assets.cdn === cdn.enabled) return next();
+
+  // get file paths from manifests
+  const rels = await Promise.all(types.map(async ({ type, entry }) => {
+    const rel = await getRelPathFromManifest({ distDir, type, entry });
+    return { type, rel };
+  }));
+
+  assets.files = rels.reduce((map, { type, rel }) => {
+    const href = cdn.dist(rel);
+    map.set(type, [href]);
+    return map;
+  }, new Map());
+  assets.cdn = cdn.enabled;
+
+  return next();
+});

package/express/cdn.js

@@ -0,0 +1,27 @@
+const { cleanPath } = require('@mindful-web/utils');
+
+module.exports = ({ enabled = false, origin, siteVersion } = {}) => (req, res, next) => {
+  const { config, tenantKey } = req.app.locals;
+  const url = `${cleanPath(origin)}/web-assets/${tenantKey}/${config.website('id')}/v${siteVersion}`;
+
+  const key = '__cdn';
+  const values = new Set(['true', '1']);
+  let isEnabled = enabled;
+  if (values.has(req.query[key])) isEnabled = true;
+  if (values.has(req.cookies[key])) isEnabled = true;
+
+  res.locals.cdn = {
+    enabled: isEnabled,
+    origin,
+    url,
+    dist: (path) => {
+      const cleaned = `dist/${cleanPath(path)}`;
+      return isEnabled ? `${url}/${cleaned}` : `/${cleaned}`;
+    },
+    public: (path) => {
+      const cleaned = cleanPath(path);
+      return isEnabled ? `${url}/public/${cleaned}` : `/${cleaned}`;
+    },
+  };
+  next();
+};

package/express/css-loader.js

@@ -0,0 +1,117 @@
+const path = require('path');
+const { readFile } = require('fs').promises;
+const { readFileSync } = require('fs');
+const { asyncRoute } = require('@mindful-web/utils');
+
+const modes = new Set(['main', 'purged', 'optimized', 'critical']);
+
+const readManifest = async (loc) => {
+  try {
+    const contents = await readFile(loc, 'utf8');
+    return JSON.parse(contents);
+  } catch (e) {
+    if (e.code === 'ENOENT') return null;
+    throw e;
+  }
+};
+
+/**
+ * @typedef {import("@mindful-web/web-cli/build/utils/css.js")
+ *  .WrittenCSSOutputAsset} WrittenCSSOutputAsset
+ *
+ * @param {object} params
+ * @param {string} params.distDir
+ * @returns {Promise<WrittenCSSOutputAsset[]>}
+ */
+const loadManifestEntries = async ({ distDir }) => {
+  const file = path.resolve(distDir, 'css', 'manifest.json');
+  const manifest = await readManifest(file);
+  if (!manifest) throw new Error('Unable to load the CSS asset manifest');
+  return Object.keys(manifest).map((key) => {
+    const asset = { key, ...manifest[key] };
+    return asset;
+  });
+};
+
+const isProduction = process.env.NODE_ENV === 'production';
+
+module.exports = ({ distDir }) => asyncRoute(async (req, res, next) => {
+  const { cdn } = res.locals;
+  const { app } = req;
+  if (!app.locals.css) app.locals.css = {};
+  const { css } = app.locals;
+
+  // determine the current CSS mode
+  // use the env first and fallback to main (all).
+  let mode = process.env.CSS_MODE || 'main';
+  if (!modes.has(mode)) mode = 'main';
+
+  // then allow the request query or a cookie to override this.
+  const key = '__css';
+  if (modes.has(req.query[key])) {
+    mode = req.query[key];
+  } else if (modes.has(req.cookies[key])) {
+    mode = req.cookies[key];
+  }
+
+  // always set the mode to the app on every request.
+  css.mode = mode;
+
+  // when on production, only load the file paths and/or contents from the manifest once
+  // as long as the cdn configs are the same (allows for changing the cdn env var in prod)
+  if (isProduction && css.ready && css.cdn === cdn.enabled) return next();
+
+  css.cdn = cdn.enabled;
+
+  const items = await loadManifestEntries({ distDir });
+  const files = items.reduce((map, asset) => {
+    if (asset.embedded) return map;
+    map.set(asset.key, cdn.dist(`css/${asset.file}`));
+    return map;
+  }, new Map());
+  css.files = files;
+
+  const embeddable = items.reduce((map, asset) => {
+    if (!asset.embedded) return map;
+    map.set(asset.key, path.resolve(distDir, 'css', asset.file));
+    return map;
+  }, new Map());
+  css.embeddable = embeddable;
+
+  css.main = () => files.get('main');
+  css.purged = () => files.get('purged');
+
+  css.optimized = ({ kind, type } = {}) => {
+    // attempt to load the optimized file from most to least specific.
+    const keys = [];
+    if (kind && type) keys.push(`optimized-${kind}.${type}`);
+    if (kind) keys.push(`optimized-${kind}`);
+    keys.push('optimized');
+
+    return keys.reduce((file, k) => {
+      if (file) return file;
+      return files.get(k) || null;
+    }, null);
+  };
+
+  css.critical = ({ kind, type } = {}) => {
+    // attempt to load the critical file from most to least specific.
+    const keys = [];
+    if (kind && type) keys.push(`critical-${kind}.${type}`);
+    if (kind) keys.push(`critical-${kind}`);
+    keys.push('critical');
+
+    const critical = keys.reduce((file, k) => {
+      if (file) return file;
+      return embeddable.get(k) || null;
+    }, null);
+    if (!critical) return null;
+    // @todo determine if this should read contents all the time or store in memory?
+    const contents = readFileSync(critical, 'utf8');
+    return `/* ${critical.split('/').pop()} */ ${contents}`;
+  };
+
+  css.ready = true;
+
+  return next();
+});

package/express/embedded-media.js

@@ -0,0 +1,31 @@
+const { isFunction: isFn } = require('@mindful-web/utils');
+const { extractEmbeddedTags } = require('@mindful-web/embedded-media');
+const buildMarkoGlobal = require('../utils/build-marko-global');
+const { imageHandler, oembedHandler, invalidHandler } = require('../utils/embedded-media');
+
+module.exports = (app, { image, oembed, invalid } = {}) => {
+  const handlers = {
+    image: isFn(image) ? image : imageHandler,
+    oembed: isFn(oembed) ? oembed : oembedHandler,
+    invalid: isFn(invalid) ? invalid : invalidHandler,
+  };
+
+  // eslint-disable-next-line no-param-reassign
+  app.locals.parseEmbeddedMedia = (body, res, options, lazyloadFirstImage = true) => {
+    const $global = buildMarkoGlobal(res);
+
+    const replacements = extractEmbeddedTags(body).map((tag, index) => {
+      const type = ['image', 'oembed'].includes(tag.type) && tag.isValid() ? tag.type : 'invalid';
+      const pattern = tag.getRegExp();
+      const replacementOptions = (index === 0 && type === 'image' && !lazyloadFirstImage) ? { ...options, lazyloadImages: false } : options;
+      const replacement = handlers[type](tag, $global, replacementOptions);
+      return { pattern, replacement };
+    });
+
+    let parsed = body;
+    replacements.forEach(({ pattern, replacement }) => {
+      parsed = parsed.replace(pattern, replacement);
+    });
+    return parsed;
+  };
+};