apostrophe 4.30.0 → 4.31.0-alpha.1

package/test/modules/jsx-component-test/index.js

@@ -0,0 +1,15 @@
+const Promise = require('bluebird');
+
+module.exports = {
+  components(self) {
+    return {
+      async greet(req, input) {
+        await Promise.delay(20);
+        return {
+          who: input.who,
+          afterDelay: true
+        };
+      }
+    };
+  }
+};

package/test/modules/jsx-component-test/views/greet.html

@@ -0,0 +1 @@
+<span class="greet">Hello {{ data.who }}{% if data.afterDelay %} (after delay){% endif %}</span>

package/test/modules/jsx-component-test/views/uses-component.jsx

@@ -0,0 +1,8 @@
+export default function (data, { Component }) {
+  return (
+    <section>
+      <h1>Welcome</h1>
+      <Component module='jsx-component-test' name='greet' who={data.name} />
+    </section>
+  );
+}

package/test/modules/jsx-ctx-widget/index.js

@@ -0,0 +1,6 @@
+module.exports = {
+  extend: '@apostrophecms/widget-type',
+  options: {
+    label: 'JSX Ctx Widget'
+  }
+};

package/test/modules/jsx-ctx-widget/views/widget.jsx

@@ -0,0 +1,4 @@
+export default function (data) {
+  const tag = (data.contextOptions && data.contextOptions.tag) || 'no-tag';
+  return <span class='ctx-widget' data-tag={tag}>{tag}</span>;
+}

package/test/modules/jsx-mixed-test/index.js

@@ -0,0 +1,9 @@
+module.exports = {
+  init(self) {
+    self.addHelpers({
+      safeBold(text) {
+        return self.apos.template.safe(`<b>${self.apos.util.escapeHtml(text)}</b>`);
+      }
+    });
+  }
+};

package/test/modules/jsx-mixed-test/views/apos-full.jsx

@@ -0,0 +1,21 @@
+export default async function (data, { apos, helpers }) {
+  const id = apos.util.generateId();
+  // apos.doc.find returns a real cursor we can await. apos.doc here is the
+  // doc-module instance from self.apos, not a helper bag.
+  const docs = await apos.doc.find(data.req, { type: '@apostrophecms/global' }).toArray();
+  // The doc module instance has methods (e.g. find) that the helper bag
+  // does not — and the two `modules` collections are different objects.
+  const aposDocIsModule = typeof apos.doc.find === 'function';
+  const helpersDocIsHelperBag = (apos.doc !== helpers.modules['@apostrophecms/doc']);
+  const aposModulesIsNotHelpersModules = (apos.modules !== helpers.modules);
+  return (
+    <div
+      data-id-length={String(id.length)}
+      data-global-count={String(docs.length)}
+      data-distinct={String(apos !== helpers)}
+      data-apos-doc-is-module={String(aposDocIsModule)}
+      data-helpers-doc-is-helper-bag={String(helpersDocIsHelperBag)}
+      data-modules-distinct={String(aposModulesIsNotHelpersModules)}
+    />
+  );
+}

package/test/modules/jsx-mixed-test/views/async-list.jsx

@@ -0,0 +1,12 @@
+async function bullet(value) {
+  await new Promise((resolve) => setTimeout(resolve, 5));
+  return <li>{value}</li>;
+}
+
+export default async function (data) {
+  return (
+    <ul>
+      {data.items.map((item) => bullet(item))}
+    </ul>
+  );
+}

package/test/modules/jsx-mixed-test/views/lib/format.js

@@ -0,0 +1,3 @@
+module.exports = function format(value) {
+  return `[${value}]`;
+};

package/test/modules/jsx-mixed-test/views/localized.jsx

@@ -0,0 +1,3 @@
+export default function (data, { __t }) {
+  return <p>{__t('apostrophe:notFoundPageTitle')}</p>;
+}

package/test/modules/jsx-mixed-test/views/partial.jsx

@@ -0,0 +1,3 @@
+export default function (data) {
+  return <p class='partial'>partial:{data.item}</p>;
+}

package/test/modules/jsx-mixed-test/views/safe-helper.jsx

@@ -0,0 +1,3 @@
+export default function (data, { helpers }) {
+  return <div>{helpers.modules['jsx-mixed-test'].safeBold('hello & <world>')}</div>;
+}

package/test/modules/jsx-mixed-test/views/syntax-error.jsx

@@ -0,0 +1,3 @@
+export default function () {
+  return <div>missing closing tag<;
+}

package/test/modules/jsx-mixed-test/views/throws.jsx

@@ -0,0 +1,5 @@
+export default function () {
+  // intentionally accesses a property of undefined to trigger an error
+  const data = undefined;
+  return <p>{data.boom}</p>;
+}

package/test/modules/jsx-mixed-test/views/uses-import.jsx

@@ -0,0 +1,5 @@
+import format from './lib/format.js';
+
+export default function (data) {
+  return <span>{format(data.value)}</span>;
+}

package/test/modules/jsx-mixed-test/views/uses-require.jsx

@@ -0,0 +1,5 @@
+const format = require('./lib/format.js');
+
+export default function (data) {
+  return <span>{format(data.value)}</span>;
+}

package/test/modules/jsx-watcher-cross-test/index.js

@@ -0,0 +1,5 @@
+module.exports = {
+  options: {
+    ignoreNoCodeWarning: true
+  }
+};

package/test/modules/jsx-watcher-cross-test/views/cross-template.jsx

@@ -0,0 +1,3 @@
+export default function () {
+  return <h1>cross-original</h1>;
+}

package/test/modules/jsx-watcher-test/index.js

@@ -0,0 +1,5 @@
+module.exports = {
+  options: {
+    ignoreNoCodeWarning: true
+  }
+};

package/test/modules/jsx-watcher-test/views/watcher-test.jsx

@@ -0,0 +1,3 @@
+export default function () {
+  return <h1>own-original</h1>;
+}

package/test/modules/template-jsx-options-test/index.js

@@ -0,0 +1,12 @@
+module.exports = {
+  options: {
+    spiffiness: 'nifty'
+  },
+  init(self) {
+    self.addHelpers({
+      test(a) {
+        return a * 2;
+      }
+    });
+  }
+};

package/test/modules/template-jsx-options-test/views/options-test.jsx

@@ -0,0 +1,9 @@
+export default function (data, { helpers }) {
+  return (
+    <>
+      {helpers.modules['template-jsx-options-test'].options.spiffiness}
+      {' '}
+      {helpers.modules['template-jsx-options-test'].test(2)}
+    </>
+  );
+}

package/test/modules/template-jsx-subclass-test/index.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extend: 'template-jsx-test'
+};

package/test/modules/template-jsx-subclass-test/views/override-test.jsx

@@ -0,0 +1,3 @@
+export default function () {
+  return <h1>I am overridden</h1>;
+}

package/test/modules/template-jsx-test/index.js

@@ -0,0 +1,9 @@
+module.exports = {
+  options: {
+    templateData: {
+      age: 30,
+      multiline: 'first line\nsecond line\n<a href="javascript:alert(\'oh no\')">CSRF attempt</a>',
+      multilineSafe: 'first line\nsecond line\n<a href="http://niceurl.com">This is okay</a>'
+    }
+  }
+};

package/test/modules/template-jsx-test/views/boolean-attrs.jsx

@@ -0,0 +1,11 @@
+export default function () {
+  return (
+    <input
+      type='checkbox'
+      checked
+      disabled={false}
+      data-extra={null}
+      data-undefined={undefined}
+    />
+  );
+}

package/test/modules/template-jsx-test/views/class-and-for.jsx

@@ -0,0 +1,7 @@
+export default function () {
+  return (
+    <label className='form-label' htmlFor='username'>
+      Username
+    </label>
+  );
+}

package/test/modules/template-jsx-test/views/dangerously-set.jsx

@@ -0,0 +1,3 @@
+export default function (data) {
+  return <div dangerouslySetInnerHTML={{ __html: data.html }} />;
+}

package/test/modules/template-jsx-test/views/escape-attr.jsx

@@ -0,0 +1,3 @@
+export default function (data) {
+  return <a href={data.url} title={data.title}>link</a>;
+}

package/test/modules/template-jsx-test/views/escape-body.jsx

@@ -0,0 +1,3 @@
+export default function (data) {
+  return <p>{data.html}</p>;
+}

package/test/modules/template-jsx-test/views/inherit-test.jsx

@@ -0,0 +1,3 @@
+export default function () {
+  return <h1>I am inherited</h1>;
+}

package/test/modules/template-jsx-test/views/list.jsx

@@ -0,0 +1,7 @@
+export default function (data) {
+  return (
+    <ul>
+      {data.items.map((item) => <li key={item}>{item}</li>)}
+    </ul>
+  );
+}

package/test/modules/template-jsx-test/views/override-test.jsx

@@ -0,0 +1,3 @@
+export default function () {
+  return <h1>I am a bug</h1>;
+}

package/test/modules/template-jsx-test/views/svg-attrs.jsx

@@ -0,0 +1,27 @@
+// Verifies that camelCase SVG presentation attributes are emitted in
+// the kebab-case form expected by browsers parsing text/html, and that
+// natively camelCase SVG attributes (viewBox, preserveAspectRatio) are
+// preserved.
+
+export default function () {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      preserveAspectRatio='xMidYMid meet'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      strokeDasharray='4 2'
+      strokeOpacity='0.5'
+      fillRule='evenodd'
+      clipRule='evenodd'
+      pointerEvents='none'
+      textAnchor='middle'
+    >
+      <path d='M0 0L24 24' />
+    </svg>
+  );
+}

package/test/modules/template-jsx-test/views/test.jsx

@@ -0,0 +1,3 @@
+export default function (data) {
+  return <h1>{data.age}</h1>;
+}

package/test/modules/template-jsx-test/views/void-elements.jsx

@@ -0,0 +1,9 @@
+export default function () {
+  return (
+    <>
+      <hr />
+      <input type='text' name='email' />
+      <br />
+    </>
+  );
+}

package/test/templates-jsx-watcher.js

@@ -0,0 +1,135 @@
+const t = require('../test-lib/test.js');
+const assert = require('assert/strict');
+const fs = require('fs');
+const path = require('path');
+const isWsl = require('is-wsl');
+
+describe('Templates: JSX watcher', function () {
+
+  let apos;
+  this.timeout(t.timeout);
+
+  // Two fixture modules. `jsx-watcher-test` is the simple case: render its
+  // own template directly. `jsx-watcher-cross-test` is the realistic-page
+  // case: another module renders this one's template via the qualified
+  // `module:template` form (mirroring how `@apostrophecms/page` renders
+  // `@apostrophecms/home-page:page` in the wild). The first surfaces a
+  // bug where renderBody never arms a watcher for JSX renders; the second
+  // surfaces a bug where the watcher was armed against the caller's views
+  // instead of the resolved module's views.
+  const ownModule = 'jsx-watcher-test';
+  const ownTemplate = 'watcher-test';
+  const ownPath = path.join(
+    __dirname, 'modules', ownModule, 'views', `${ownTemplate}.jsx`
+  );
+  const ownOriginal = 'export default function () {\n  return <h1>own-original</h1>;\n}\n';
+  const ownChanged = 'export default function () {\n  return <h1>own-changed</h1>;\n}\n';
+
+  const crossModule = 'jsx-watcher-cross-test';
+  const crossTemplate = 'cross-template';
+  const crossPath = path.join(
+    __dirname, 'modules', crossModule, 'views', `${crossTemplate}.jsx`
+  );
+  const crossOriginal = 'export default function () {\n  return <h1>cross-original</h1>;\n}\n';
+  const crossChanged = 'export default function () {\n  return <h1>cross-changed</h1>;\n}\n';
+
+  before(async function () {
+    // Defend against poisoned fixtures from a prior failed run.
+    fs.writeFileSync(ownPath, ownOriginal);
+    fs.writeFileSync(crossPath, crossOriginal);
+    apos = await t.create({
+      root: module,
+      modules: {
+        [ownModule]: {},
+        [crossModule]: {}
+      }
+    });
+  });
+
+  after(async function () {
+    try {
+      fs.writeFileSync(ownPath, ownOriginal);
+    } catch (e) {
+      // best-effort restore
+    }
+    try {
+      fs.writeFileSync(crossPath, crossOriginal);
+    } catch (e) {
+      // best-effort restore
+    }
+    return t.destroy(apos);
+  });
+
+  // Wait for chokidar's initial scan to complete on every watcher the
+  // template module has registered. If the JSX render path failed to arm
+  // any watcher for our views directory, no `change` event would ever
+  // fire and the caller's `waitForChange` would time out.
+  async function waitForWatchersReady() {
+    await Promise.all(
+      (apos.template._viewWatchers || []).map(watcher => {
+        if (watcher._readyEmitted) {
+          return Promise.resolve();
+        }
+        return new Promise(resolve => watcher.on('ready', resolve));
+      })
+    );
+  }
+
+  function waitForChange(absolutePath) {
+    return new Promise((resolve, reject) => {
+      const timer = setTimeout(
+        () => reject(new Error(`No view-change event was observed for ${absolutePath}.`)),
+        5000
+      );
+      apos.template.onViewChange(filePath => {
+        if (filePath && path.resolve(filePath) === path.resolve(absolutePath)) {
+          clearTimeout(timer);
+          resolve();
+        }
+      });
+    });
+  }
+
+  it('should pick up edits to a .jsx template rendered through its own module', async function () {
+    if (isWsl) {
+      this.skip();
+      return;
+    }
+    const req = apos.task.getAnonReq();
+    const initial = await apos.modules[ownModule].render(req, ownTemplate);
+    assert.match(initial, /own-original/);
+
+    await waitForWatchersReady();
+    const sawChange = waitForChange(ownPath);
+    fs.writeFileSync(ownPath, ownChanged);
+    await sawChange;
+
+    const after = await apos.modules[ownModule].render(req, ownTemplate);
+    assert.match(after, /own-changed/);
+    assert.doesNotMatch(after, /own-original/);
+  });
+
+  it('should pick up edits when one module renders another module\'s .jsx via `module:template`', async function () {
+    if (isWsl) {
+      this.skip();
+      return;
+    }
+    const req = apos.task.getAnonReq();
+    // The caller is `ownModule`, but the template lives in `crossModule`.
+    // This is the shape that breaks if the watcher is armed against the
+    // caller's view chain instead of the resolved file's module.
+    const qualified = `${crossModule}:${crossTemplate}`;
+    const initial = await apos.modules[ownModule].render(req, qualified);
+    assert.match(initial, /cross-original/);
+
+    await waitForWatchersReady();
+    const sawChange = waitForChange(crossPath);
+    fs.writeFileSync(crossPath, crossChanged);
+    await sawChange;
+
+    const after = await apos.modules[ownModule].render(req, qualified);
+    assert.match(after, /cross-changed/);
+    assert.doesNotMatch(after, /cross-original/);
+  });
+
+});