@mindful-web/marko-web 1.0.0

package/browser/index.js

@@ -0,0 +1,83 @@
+/* eslint-disable no-new */
+import Vue from './vue';
+import Components from './components';
+import EventBus from './event-bus';
+
+const components = {};
+const providers = {};
+const listeners = {};
+
+const load = async ({
+  el,
+  name,
+  props,
+  on,
+  hydrate,
+  skipWhenExists,
+} = {}) => {
+  if (!el || !name) throw new Error('A Vue component name and element must be provided.');
+  const Component = components[name];
+  if (!Component) throw new Error(`No Vue component found for '${name}'`);
+  const shouldRender = skipWhenExists ? document.querySelectorAll(`script.component[data-name="${name}"]`).length <= 1 : true;
+  if (!shouldRender) return;
+  const component = new Vue({
+    provide: providers[name],
+    render: (h) => h(Component, { props, on: { ...on, ...listeners[name] } }),
+  });
+  component.$mount(el, hydrate);
+};
+
+const register = async (name, Component, { provide, on } = {}) => {
+  if (!name) throw new Error('A Vue component name must be provided.');
+  if (components[name]) throw new Error(`A Vue component already exists for '${name}'`);
+  components[name] = Component;
+  providers[name] = provide;
+  listeners[name] = on;
+};
+
+/**
+ * Register built-in components.
+ */
+Components({ register, EventBus });
+
+/**
+ * @deprecated Use `load` instead.
+ */
+const loadComponent = (el, name, props) => {
+  load({ el, name, props });
+};
+
+/**
+ * @deprecated Use `register` instead.
+ */
+const registerComponent = (name, Component, provide) => {
+  register(name, Component, { provide });
+};
+
+const methods = {
+  load,
+  register,
+  loadComponent,
+  registerComponent,
+};
+
+let initialized = false;
+if (window && window.markoCompQueue) {
+  window.markoCompQueue.flush = () => {
+    if (initialized) return;
+    const { markoCompQueue } = window;
+    if (!markoCompQueue) throw new Error('Unable to load Marko Web components queue!');
+
+    for (let i = 0; i < markoCompQueue.length; i += 1) {
+      const [method, args] = markoCompQueue[i];
+      if (methods[method]) methods[method](...args);
+    }
+    window.CMSBrowserComponents = methods;
+    initialized = true;
+  };
+}
+
+export default {
+  ...methods,
+  EventBus,
+};

package/browser/jquery-full.js

@@ -0,0 +1,3 @@
+import $ from 'jquery/dist/jquery.min';
+
+export default $;

package/browser/jquery.js

@@ -0,0 +1,3 @@
+import $ from 'jquery/dist/jquery.slim';
+
+export default $;

package/browser/utils/clean-path.js

@@ -0,0 +1,4 @@
+export default (value) => {
+  if (!value) return '';
+  return `${value}`.trim().replace(/^\/+/, '').replace(/\/+$/, '');
+};

package/browser/vue.js

@@ -0,0 +1,3 @@
+import Vue from 'vue';
+
+export default Vue;

package/components/browser-component/script.marko

@@ -0,0 +1,10 @@
+import defaultValue from "@mindful-web/marko-core/utils/default-value";
+
+$ const { id, name } = input;
+
+$ const props = JSON.stringify(input.props || {})
+$ const hydrate = defaultValue(input.hydrate, false);
+$ const skipWhenExists = defaultValue(input.skipWhenExists, false);
+$ const contents = `CMSBrowserComponents.load({ el: '#${id}', name: '${name}', props: ${props}, hydrate: ${hydrate}, skipWhenExists: ${skipWhenExists} });`;
+
+<script class="component" data-name=name>$!{contents}</script>

package/components/browser-component/script.marko.js

@@ -0,0 +1,39 @@
+// 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/browser-component/script.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,
+    marko_str = require("marko/dist/runtime/helpers/to-string"),
+    marko_attr = require("marko/dist/runtime/html/helpers/attr");
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { id, name } = input;
+
+  const props = JSON.stringify(input.props || {})
+
+  const hydrate = defaultValue(input.hydrate, false);
+
+  const skipWhenExists = defaultValue(input.skipWhenExists, false);
+
+  const contents = `CMSBrowserComponents.load({ el: '#${id}', name: '${name}', props: ${props}, hydrate: ${hydrate}, skipWhenExists: ${skipWhenExists} });`;
+
+  out.w("<script class=\"component\"" +
+    marko_attr("data-name", name) +
+    ">" +
+    marko_str(contents) +
+    "</script>");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web$1.0.0/components/browser-component/script.marko"
+  };

package/components/browser-component.marko

@@ -0,0 +1,25 @@
+import defaultValue from "@mindful-web/marko-core/utils/default-value";
+import { randomElementId } from "@mindful-web/utils";
+import renderComponent from "../utils/render-ssr-component-from-marko";
+
+$ const id = randomElementId({ prefix: "vue" });
+$ const tag = defaultValue(input.tag, "div");
+$ const ssr = defaultValue(input.ssr, false);
+
+<if(ssr)>
+  <marko-web-resolve|{ resolved: html }| promise=renderComponent({ id, input, out })>
+    $!{html}
+  </marko-web-resolve>
+</if>
+<else>
+  <${tag} ...input.attrs id=id class=input.class>
+    <${input.renderBody} />
+  </>
+  <marko-web-browser-component-script
+    id=id
+    hydrate=input.hydrate
+    name=input.name
+    props=input.props
+    skip-when-exists=input.skipWhenExists
+  />
+</else>

package/components/browser-component.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$1.0.0/components/browser-component.marko",
+    marko_component = require("./browser-component.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_utils_module = require("@mindful-web/utils"),
+    utils_module = module_utils_module.default || module_utils_module,
+    randomElementId = module_utils_module.randomElementId,
+    module_renderComponent = require("../utils/render-ssr-component-from-marko"),
+    renderComponent = module_renderComponent.default || module_renderComponent,
+    marko_str = require("marko/dist/runtime/helpers/to-string"),
+    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),
+    marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag"),
+    marko_assign = require("marko/dist/runtime/helpers/assign"),
+    marko_web_browser_component_script_template = require("./browser-component/script.marko"),
+    marko_web_browser_component_script_tag = marko_loadTag(marko_web_browser_component_script_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const id = randomElementId({ prefix: "vue" });
+
+  const tag = defaultValue(input.tag, "div");
+
+  const ssr = defaultValue(input.ssr, false);
+
+  if (ssr) {
+    marko_web_resolve_tag({
+        promise: renderComponent({
+            id: id,
+            input: input,
+            out: out
+          }),
+        renderBody: function(out, { resolved: html }) {
+          out.w(marko_str(html));
+        }
+      }, out, __component, "0");
+  } else {
+    marko_dynamicTag(out, tag, function() {
+      return marko_assign({}, input.attrs, {
+          id: id,
+          class: input.class
+        });
+    }, function(out) {
+      marko_dynamicTag(out, input.renderBody, null, null, null, null, __component, "2");
+    }, null, null, __component, "1");
+
+    marko_web_browser_component_script_tag({
+        id: id,
+        hydrate: input.hydrate,
+        name: input.name,
+        props: input.props,
+        skipWhenExists: input.skipWhenExists
+      }, out, __component, "3");
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web$1.0.0/components/browser-component.marko",
+    component: "./browser-component.marko",
+    tags: [
+      "@mindful-web/marko-core/components/resolve.marko",
+      "./browser-component/script.marko"
+    ]
+  };

package/components/deferred-stylesheet.marko

@@ -0,0 +1,6 @@
+$ const { href } = input;
+
+<link rel="preload" href=href as="style" onload="this.onload=null;this.rel='stylesheet'">
+<noscript>
+  <link rel="stylesheet" href=href>
+</noscript>

package/components/deferred-stylesheet.marko.js

@@ -0,0 +1,28 @@
+// 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/deferred-stylesheet.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    marko_attr = require("marko/dist/runtime/html/helpers/attr");
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { href } = input;
+
+  out.w("<link rel=\"preload\"" +
+    marko_attr("href", href) +
+    " as=\"style\" onload=\"this.onload=null;this.rel='stylesheet'\"><noscript><link rel=\"stylesheet\"" +
+    marko_attr("href", href) +
+    "></noscript>");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web$1.0.0/components/deferred-stylesheet.marko"
+  };

package/components/document/components/body-wrapper.marko

@@ -0,0 +1,8 @@
+<if(input.enabled)>
+  <div ...input.attrs>
+    <${input.renderBody} />
+  </div>
+</if>
+<else>
+  <${input.renderBody} />
+</else>

package/components/document/components/body-wrapper.marko.js

@@ -0,0 +1,33 @@
+// 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/document/components/body-wrapper.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag"),
+    marko_attrs = require("marko/dist/runtime/html/helpers/attrs");
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  if (input.enabled) {
+    out.w("<div" +
+      marko_attrs(input.attrs) +
+      ">");
+
+    marko_dynamicTag(out, input.renderBody, null, null, null, null, __component, "1");
+
+    out.w("</div>");
+  } else {
+    marko_dynamicTag(out, input.renderBody, null, null, null, null, __component, "2");
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web$1.0.0/components/document/components/body-wrapper.marko"
+  };

package/components/document/components/error.marko

@@ -0,0 +1,26 @@
+import isDev from '../../../utils/is-dev';
+
+$ const { document } = out.global;
+$ const error = input.error || {};
+
+<${document}>
+  <@head>
+    <marko-web-page-title value=`${input.statusCode} ${input.statusMessage}` />
+    <if(input.statusCode === 404)>
+      <meta name="robots" content="noindex">
+    </if>
+  </@head>
+  <@container>
+    <@page for="error">
+      <marko-web-page-wrapper>
+        <@section>
+          <h3 data-marko-error=error.message>${input.statusCode} ${input.statusMessage}</h3>
+          <h4>${error.message}</h4>
+          <if(isDev)>
+            <pre>${error.stack}</pre>
+          </if>
+        </@section>
+      </marko-web-page-wrapper>
+    </@page>
+  </@container>
+</>

package/components/document/components/error.marko.js

@@ -0,0 +1,88 @@
+// 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/document/components/error.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_isDev = require("../../../utils/is-dev"),
+    isDev = module_isDev.default || module_isDev,
+    marko_web_page_title_template = require("../../page/title.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_page_title_tag = marko_loadTag(marko_web_page_title_template),
+    helpers_escape_xml = require("marko/dist/runtime/html/helpers/escape-xml"),
+    marko_escapeXml = helpers_escape_xml.x,
+    marko_attr = require("marko/dist/runtime/html/helpers/attr"),
+    marko_web_page_wrapper_template = require("../../page/wrapper.marko"),
+    marko_web_page_wrapper_tag = marko_loadTag(marko_web_page_wrapper_template),
+    marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag");
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { document } = out.global;
+
+  const error = input.error || {};
+
+  marko_dynamicTag(out, document, function() {
+    return {
+        head: {
+            renderBody: function(out) {
+              marko_web_page_title_tag({
+                  concatWith: "|",
+                  value: (input.statusCode + " ") + input.statusMessage
+                }, out, __component, "2");
+
+              if (input.statusCode === 404) {
+                out.w("<meta name=\"robots\" content=\"noindex\">");
+              }
+            }
+          },
+        container: {
+            page: {
+                for: "error",
+                renderBody: function(out) {
+                  marko_web_page_wrapper_tag({
+                      blockName: "page-wrapper",
+                      tag: "div",
+                      sections: [
+                          {
+                              tag: "div",
+                              renderBody: function(out) {
+                                out.w("<h3" +
+                                  marko_attr("data-marko-error", error.message) +
+                                  ">" +
+                                  marko_escapeXml(input.statusCode) +
+                                  " " +
+                                  marko_escapeXml(input.statusMessage) +
+                                  "</h3><h4>" +
+                                  marko_escapeXml(error.message) +
+                                  "</h4>");
+
+                                if (isDev) {
+                                  out.w("<pre>" +
+                                    marko_escapeXml(error.stack) +
+                                    "</pre>");
+                                }
+                              }
+                            }
+                        ]
+                    }, out, __component, "6");
+                }
+              }
+          }
+      };
+  }, null, 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/document/components/error.marko",
+    tags: [
+      "../../page/title.marko",
+      "../../page/wrapper.marko"
+    ]
+  };

package/components/document/components/live-reload.marko

@@ -0,0 +1,7 @@
+import isDev from '../../../utils/is-dev';
+
+$ const { LIVERELOAD_PORT, EXPOSED_HOST } = process.env;
+
+<if(isDev && LIVERELOAD_PORT)>
+  <script src=`http://${EXPOSED_HOST}:${LIVERELOAD_PORT}/livereload.js` async></script>
+</if>

package/components/document/components/live-reload.marko.js

@@ -0,0 +1,30 @@
+// 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/document/components/live-reload.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_isDev = require("../../../utils/is-dev"),
+    isDev = module_isDev.default || module_isDev,
+    marko_attr = require("marko/dist/runtime/html/helpers/attr");
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { LIVERELOAD_PORT, EXPOSED_HOST } = process.env;
+
+  if (isDev && LIVERELOAD_PORT) {
+    out.w("<script" +
+      marko_attr("src", ((("http://" + EXPOSED_HOST) + ":") + LIVERELOAD_PORT) + "/livereload.js") +
+      " async></script>");
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web$1.0.0/components/document/components/live-reload.marko"
+  };

package/components/document/components/polyfill.marko

@@ -0,0 +1,8 @@
+import { getAsArray } from "@mindful-web/object-path";
+
+$ const features = getAsArray(input, "features");
+$ const src = `https://polyfill.io/v3/polyfill.min.js?flags=gated&features=${encodeURIComponent(features.join(','))}`;
+
+<if(features.length)>
+  <script src=src></script>
+</if>

package/components/document/components/polyfill.marko.js

@@ -0,0 +1,33 @@
+// 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/document/components/polyfill.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_attr = require("marko/dist/runtime/html/helpers/attr");
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const features = getAsArray(input, "features");
+
+  const src = `https://polyfill.io/v3/polyfill.min.js?flags=gated&features=${encodeURIComponent(features.join(','))}`;
+
+  if (features.length) {
+    out.w("<script" +
+      marko_attr("src", src) +
+      "></script>");
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web$1.0.0/components/document/components/polyfill.marko"
+  };

package/components/document/components/styles.marko

@@ -0,0 +1,20 @@
+$ const { css, route } = out.global;
+$ const { mode } = css;
+$ const { kind } = route;
+
+<if(mode === "main")>
+  <link rel="stylesheet" href=css.main() />
+</if>
+<else-if(mode === "purged")>
+  <link rel="stylesheet" href=css.purged() />
+</else-if>
+<else>
+  $ const critical = css.critical(route);
+  $ const optimized = css.optimized(route);
+  <if(critical)>
+    <style>${critical}</style>
+  </if>
+  <if(mode === "optimized" && optimized)>
+    <marko-web-deferred-stylesheet href=optimized />
+  </if>
+</else>

package/components/document/components/styles.marko.js

@@ -0,0 +1,61 @@
+// 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/document/components/styles.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    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_escapeStyle = require("marko/dist/runtime/html/helpers/escape-style-placeholder"),
+    marko_web_deferred_stylesheet_template = require("../../deferred-stylesheet.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_deferred_stylesheet_tag = marko_loadTag(marko_web_deferred_stylesheet_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { css, route } = out.global;
+
+  const { mode } = css;
+
+  const { kind } = route;
+
+  if (mode === "main") {
+    out.w("<link rel=\"stylesheet\"" +
+      marko_attr("href", css.main()) +
+      ">");
+  } else if (mode === "purged") {
+    out.w("<link rel=\"stylesheet\"" +
+      marko_attr("href", css.purged()) +
+      ">");
+  } else {
+    const critical = css.critical(route);
+
+    const optimized = css.optimized(route);
+
+    if (critical) {
+      out.w("<style>" +
+        marko_escapeStyle(critical) +
+        "</style>");
+    }
+
+    if ((mode === "optimized") && optimized) {
+      marko_web_deferred_stylesheet_tag({
+          href: optimized
+        }, out, __component, "3");
+    }
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web$1.0.0/components/document/components/styles.marko",
+    tags: [
+      "../../deferred-stylesheet.marko"
+    ]
+  };

package/components/document/container.marko

@@ -0,0 +1,15 @@
+import { getAsArray } from "@mindful-web/object-path";
+
+$ const blockName = input.blockName || "document-container";
+$ const tag = input.tag || "div";
+
+$ const modifiers = [...getAsArray(input.modifiers)];
+$ const classNames = [blockName, ...modifiers.map(mod => `${blockName}--${mod}`), input.class];
+
+<${tag} ...input.attrs class=classNames>
+  <${input.abovePage} />
+  <if(input.page)>
+    <marko-web-page-container ...input.page />
+  </if>
+  <${input.belowPage} />
+</>