@mongoosejs/studio 0.0.1

package/frontend/public/images/mongoose.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" id="svg2" xml:space="preserve" width="1280" height="746.66669" viewBox="0 0 1280 746.66669" sodipodi:docname="mongoose.svg" inkscape:version="1.0.1 (1.0.1+r75)">
+  <metadata id="metadata8">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs id="defs6">
+    <clipPath clipPathUnits="userSpaceOnUse" id="clipPath22">
+      <path d="M 0,560 H 960 V 0 H 0 Z" id="path20"/>
+    </clipPath>
+  </defs>
+  <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="2227" inkscape:window-height="1205" id="namedview4" inkscape:document-rotation="0" showgrid="false" inkscape:zoom="0.85703125" inkscape:cx="528.80219" inkscape:cy="373.33334" inkscape:window-x="24" inkscape:window-y="132" inkscape:window-maximized="0" inkscape:current-layer="g18"/>
+  <g id="g10" inkscape:groupmode="layer" inkscape:label="FIVERRMONGOOSE" transform="matrix(2,0,0,-2,-340,1000)">
+    <g id="g12" transform="translate(439.8999,245.333)">
+      <path d="m 0,0 -23.9,37.117 v -66.45 h 46.403 l 1.597,1.636 v 64.814 z" style="fill:#880000;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path14"/>
+    </g>
+    <g id="g16">
+      <g id="g18" clip-path="url(#clipPath22)">
+        <g id="g24" transform="translate(662.1133,391.8979)">
+          <path
+            d="M 0 0 c -9.067 -0.676 -18.155 -1.376 -27.24 -1.429 c -5.592 -0.032 -11.28 0.698 -16.766 1.839 c -6.932 1.443 -12.758 4.878 -16.186 11.582 c -0.51 0.993 -2.217 1.565 -3.484 1.943 c -4.468 1.328 -8.986 2.485 -13.498 4.154 c 1.57 0.118 3.141 0.346 4.708 0.33 c 3.846 -0.038 7.735 0.142 11.522 -0.366 c 6.921 -0.928 13.787 -2.28 20.673 -3.475 c 3.924 -0.682 7.869 -1.296 11.761 -2.133 c 7.385 -1.589 14.744 -3.298 22.106 -4.989 C -1.539 6.339 3.315 5.182 8.168 4.007 M 1.769 -49.161 c -11.308 -3.485 -22.742 -6.62 -33.861 -10.63 c -6.961 -2.511 -13.502 -6.23 -20.12 -9.626 c -5.77 -2.958 -7.811 -8.009 -7.103 -14.28 c 0.457 -4.029 1.009 -8.047 1.371 -12.133 c -2.957 4.363 -5.141 9.082 -6.424 14.218 c -0.264 1.062 -0.515 2.128 -0.737 3.2 c -0.874 4.183 1.446 6.787 4.476 9.055 c 5.897 4.415 12.32 7.892 19.292 10.205 c 8.696 2.887 17.419 5.768 26.284 8.057 c 6.245 1.61 12.745 2.223 19.127 3.304 c 1.178 0.202 2.337 0.52 3.505 0.782 c 0.039 -0.16 0.079 -0.321 0.12 -0.481 c -1.977 -0.554 -3.97 -1.066 -5.93 -1.671 m -159.454 44.744 c -0.186 -0.182 -0.375 -0.362 -0.563 -0.542 c -5.042 3.677 -10.514 6.415 -16.51 8.003 c -0.168 -0.163 -0.332 -0.326 -0.496 -0.49 c 5.161 -6.048 10.323 -12.096 15.71 -18.404 c -3.607 1.18 -6.964 2.28 -10.322 3.379 c -0.143 -0.169 -0.284 -0.339 -0.428 -0.508 c 4.063 -6.694 9.353 -12.51 14.396 -19.22 c -8.768 4.979 -16.507 10.417 -23.731 16.595 c -9.916 8.481 -18.566 18.047 -25.046 29.439 c -2.669 4.694 -5.025 9.55 -5.529 15.043 c -0.113 1.226 -0.015 2.523 0.271 3.72 c 0.465 1.943 2.309 2.84 4.202 2.252 c 10.4 -3.233 20.622 -6.896 30.189 -12.211 c 9.056 -5.031 17.252 -11.153 24.303 -18.769 c 0.285 -0.308 0.496 -0.684 0.889 -1.236 c -5.521 2.516 -10.76 4.902 -16 7.289 c -0.177 -0.217 -0.353 -0.435 -0.532 -0.653 c 3.067 -4.562 6.132 -9.125 9.197 -13.687 m -315.372 -55.318 c -0.13 -0.353 0.276 -0.7 0.414 -1.049 c 2.156 0.453 4.293 1.045 6.47 1.339 c 0.568 0.075 1.136 0.147 1.705 0.223 c 8.034 2.863 16.264 5.112 24.762 6.31 c 12.011 1.691 24.463 3.936 36.722 3.87 c 11.648 -0.059 23.431 -1.843 34.828 -3.808 c 3.197 -0.55 6.336 -1.288 9.43 -2.158 c 8.326 -1.869 16.15 -5.203 23.182 -9.709 c 0.507 -0.242 1 -0.509 1.502 -0.763 c 9.998 -4.71 18.807 -11.639 25.763 -20.128 c 1.273 -1.409 3.492 -2.878 4.629 -4.42 c 2.396 -2.827 3.537 -5.839 7.537 -8.996 v 43.126 h 49.88 l 23.323 -43.036 l 23.392 43.036 h 51.405 v -83.351 l 8.509 5.611 c 0 0 9.33 24.806 52.556 28.289 l 49.544 1.602 c -7.642 15.819 -7.614 15.819 -3.929 20.591 c 3.649 4.722 31.792 7.818 36.742 10.771 l 72.297 14.587 c 0.17 0.556 0.363 -0.298 0.736 -0.181 c 1.799 0.567 3.663 0.924 6.233 1.529 l 16.35 3.979 c 1.064 0.599 2.331 0.836 3.504 1.242 c 7.64 2.652 14.321 6.068 18.018 14.208 c 3.6 7.93 8.421 15.296 10.169 24.018 c 0.551 2.759 0.076 5.157 -1.915 7.14 c -2.409 2.398 -5.516 3.428 -8.715 4.259 c -10.444 4.287 -20.85 8.676 -31.379 12.747 c -6.473 2.504 -13.114 4.582 -19.724 6.71 c -6.54 2.105 -13.117 4.092 -19.711 6.019 c -6.074 1.777 -12.185 3.429 -18.288 5.094 c -5.954 1.624 -11.9 3.295 -17.892 4.767 c -6.981 1.716 -14.01 3.243 -21.02 4.845 c -5.324 1.217 -10.628 2.519 -15.977 3.608 c -5.825 1.186 -11.687 2.206 -17.543 3.237 c -7.48 1.315 -14.944 2.773 -22.466 3.797 c -9.083 1.236 -18.224 2.036 -27.332 3.109 c -15.25 1.798 -30.54 2.28 -45.839 1.111 c -5.422 -0.414 -10.771 -1.788 -16.152 -2.722 c 5.7 -2.929 11.34 -5.298 16.903 -7.834 c 5.596 -2.551 10.813 -5.748 15.604 -9.607 c -6.269 2.4 -12.368 5.168 -18.655 7.413 c -13.121 4.684 -26.47 8.574 -40.333 10.45 c -6.781 0.917 -13.545 1.797 -20.32 -0.115 c -6.867 -1.938 -8.809 -4.486 -9.431 -11.377 c -1.03 -11.422 2.407 -22.016 6.972 -32.231 c 6.807 -15.232 16.728 -28.207 29.414 -39.057 c 9.714 -8.311 20.492 -14.861 32.398 -19.531 c 3.391 -1.33 6.815 -2.579 10.221 -3.866 c -0.077 -0.265 -0.154 -0.527 -0.231 -0.793 c -6.528 1.788 -13.221 3.128 -19.544 5.466 c -11.183 4.133 -21.183 10.447 -30.332 18.115 c -10.212 8.561 -18.699 18.566 -25.007 30.289 c -6.694 12.439 -10.525 25.73 -10.663 39.955"
+            style="fill:#880000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+            id="path26"/>
+        </g>
+        <g id="g28" transform="translate(189.0308,331.666)">
+          <path d="M 0,0 C 0,0 115.969,112 248.5,98.1" style="fill:#880000;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path30"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/frontend/public/index.html

@@ -0,0 +1,21 @@
+<html>
+  <head>
+    <title>Mongoose Admin</title>
+
+    <meta content="width=device-width, initial-scale=1" name="viewport">
+    <meta name="msapplication-TileColor" />
+    <meta name="theme-color" content="#ffffff"/>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans"/>
+    <link rel="stylesheet" type="text/css" href="style.css"/>
+    <link rel="stylesheet" href="https://unpkg.com/prismjs@1.29.0/themes/prism.css"/>
+    <script src="https://unpkg.com/vue@3.x"></script>
+    <script src="https://unpkg.com/vue-router@4.0.10"></script>
+  </head>
+
+  <body>
+    <div id="content"></div>
+
+    <script src="https://unpkg.com/prismjs@1.29.0/prism.js" data-manual="true"></script>
+    <script src="app.js"></script>
+  </body>
+</html>

package/frontend/public/style.css

@@ -0,0 +1,34 @@
+body {
+  min-height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: 'Open Sans', Helvetica, Arial, FreeSans, sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: #0E5887;
+}
+
+.bold {
+  font-weight: bold !important;
+}
+
+button {
+  background-color: #15D4B7;
+  color: white;
+  padding: 0.25em 0.5em;
+  cursor: pointer;
+  border: 0;
+  border-radius: 4px;
+  font-size: 1.1em;
+}
+
+button.green {
+  background-color: #58D415;
+}
+
+button.grey {
+  color: black;
+  background-color: #ddd;
+}

package/frontend/src/api.js

@@ -0,0 +1,52 @@
+'use strict';
+
+const axios = require('axios');
+
+const client = axios.create({
+  baseURL: config__baseURL
+});
+
+if (config__isLambda) {
+  exports.Model = {
+    exportQueryResults(params) {
+      return client.post('', { action: 'Model.exportQueryResults', ...params }).then(res => res.data);
+    },
+    getDocument: function getDocument(params) {
+      return client.post('', { action: 'Model.getDocument', ...params }).then(res => res.data);
+    },
+    getDocuments: function getDocuments(params) {
+      return client.post('', { action: 'Model.getDocuments', ...params }).then(res => res.data);
+    },
+    listModels: function listModels() {
+      return client.post('', { action: 'Model.listModels' }).then(res => res.data);
+    },
+    updateDocument: function updateDocument(params) {
+      return client.post('', { action: 'Model.updateDocument', ...params }).then(res => res.data);
+    }
+  };
+} else {
+  exports.Model = {
+    exportQueryResults(params) {
+      const anchor = document.createElement('a');
+      console.log('K', config__baseURL)
+      console.log('G', config__baseURL + '/Model/exportQueryResults?' + (new URLSearchParams(params)).toString());
+      anchor.href = config__baseURL + '/Model/exportQueryResults?' + (new URLSearchParams(params)).toString();
+      anchor.target = '_blank';
+      anchor.download = 'export.csv';
+      anchor.click();
+      return;
+    },
+    getDocument: function getDocument(params) {
+      return client.post('/Model/getDocument', params).then(res => res.data);
+    },
+    getDocuments: function getDocuments(params) {
+      return client.post('/Model/getDocuments', params).then(res => res.data);
+    },
+    listModels: function listModels() {
+      return client.post('/Model/listModels', {}).then(res => res.data);
+    },
+    updateDocument: function updateDocument(params) {
+      return client.post('/Model/updateDocument', params).then(res => res.data);
+    }
+  };
+}

package/frontend/src/appendCSS.js

@@ -0,0 +1,11 @@
+'use strict';
+
+module.exports = function appendCSS(css) {
+  if (typeof document === 'undefined') {
+    return;
+  }
+  const head = document.head || document.getElementsByTagName('head')[0];
+  const style = document.createElement('style');
+  head.appendChild(style);
+  style.appendChild(document.createTextNode(css));
+};

package/frontend/src/async-button/async-button.html

@@ -0,0 +1,3 @@
+<button v-bind="attrsToBind" :disabled="isDisabled" @click="handleClick">
+  <slot></slot>
+</button>

package/frontend/src/async-button/async-button.js

@@ -0,0 +1,39 @@
+'use strict';
+
+const template = require('./async-button.html');
+
+module.exports = app => app.component('async-button', {
+  data: () => ({
+    status: 'init'
+  }),
+  inheritAttrs: false,
+  methods: {
+    async handleClick(ev) {
+      if (this.status === 'in_progress') {
+        return;
+      }
+      this.status = 'in_progress';
+
+      try {
+        await this.$attrs.onClick(ev);
+      } catch (err) {
+        this.status = 'error';
+        throw err;
+      }
+
+      this.status = 'success';
+    }
+  },
+  computed: {
+    attrsToBind() {
+      const attrs = { ...this.$attrs };
+      delete attrs.onClick;
+      delete attrs.disabled;
+      return attrs;
+    },
+    isDisabled() {
+      return this.status === 'in_progress' || this.$attrs.disabled;
+    }
+  },
+  template: template
+});

package/frontend/src/detail-array/detail-array.html

@@ -0,0 +1,3 @@
+<div class="detail-array">
+  <pre><code ref="code" class="language-javascript" v-text="displayValue"></code></pre>
+</div>

package/frontend/src/detail-array/detail-array.js

@@ -0,0 +1,16 @@
+'use strict';
+
+const template = require('./detail-array.html');
+
+module.exports = app => app.component('detail-array', {
+  template: template,
+  props: ['value'],
+  computed: {
+    displayValue() {
+      return JSON.stringify(this.value, null, '  ').trim();
+    }
+  },
+  mounted() {
+    Prism.highlightElement(this.$refs.code);
+  }
+});

package/frontend/src/detail-default/detail-default.html

@@ -0,0 +1,3 @@
+<div>
+  {{value}}
+</div>

package/frontend/src/detail-default/detail-default.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const template = require('./detail-default.html');
+
+module.exports = app => app.component('detail-default', {
+  template: template,
+  props: ['value'],
+  computed: {
+    displayValue() {
+      if (this.value === null) {
+        return 'null';
+      }
+      if (this.value === undefined) {
+        return 'undefined';
+      }
+      return this.value;
+    }
+  }
+});

package/frontend/src/document/document.css

@@ -0,0 +1,39 @@
+.document {
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-top: 25px;
+}
+
+.document .value {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.document .path-key {
+  background-color: #f0f0f0;
+  padding: 0.25em;
+  margin-bottom: 0.5em;
+}
+
+.document .path-type {
+  color: rgba(0,0,0,.36);
+  font-size: 0.8em;
+}
+
+.document .document-menu {
+  display: flex;
+}
+
+.document .document-menu .left {
+  flex-grow: 1;
+}
+
+.document .document-menu .right {
+  flex-grow: 1;
+  text-align: right;
+}
+
+.document .document-menu .right button:not(:last-child) {
+  margin-right: 0.5em;
+}

package/frontend/src/document/document.html

@@ -0,0 +1,42 @@
+<div class="document">
+  <div class="document-menu">
+    <div class="left">
+      <button @click="$router.push('/model/' + this.model)">
+        &lsaquo; Back
+      </button>
+    </div>
+
+    <div class="right">
+      <button v-if="!editting" @click="editting = true">
+        &#x270E; Edit
+      </button>
+      <button v-if="editting" class="grey" @click="editting = false">
+        &times; Cancel
+      </button>
+      <button v-if="editting" class="green" @click="save">
+        &check; Save
+      </button>
+    </div>
+  </div>
+  <div v-if="status === 'loaded'">
+    <div v-for="path in schemaPaths" class="value">
+      <div class="path-key">
+        {{path.path}}
+        <span class="path-type">
+          ({{path.instance.toLowerCase()}})
+        </span>
+      </div>
+      <div v-if="editting && path.path !== '_id'">
+        <component
+          :is="getEditComponentForPath(path)"
+          :value="getEditValueForPath(path)"
+          @input="changes[path.path] = $event;"
+          >
+        </component>
+      </div>
+      <div v-else>
+        <component :is="getComponentForPath(path)" :value="document[path.path]"></component>
+      </div>
+    </div>
+  </div>
+</div>

package/frontend/src/document/document.js

@@ -0,0 +1,63 @@
+'use strict';
+
+const api = require('../api');
+const template = require('./document.html');
+
+const appendCSS = require('../appendCSS');
+
+appendCSS(require('./document.css'));
+
+module.exports = app => app.component('document', {
+  template: template,
+  props: ['model', 'documentId'],
+  data: () => ({
+    schemaPaths: [],
+    status: 'init',
+    document: null,
+    changes: {},
+    editting: false
+  }),
+  async mounted() {
+    const { doc, schemaPaths } = await api.Model.getDocument({ model: this.model, documentId: this.documentId });
+    this.document = doc;
+    this.schemaPaths = Object.keys(schemaPaths).sort((k1, k2) => {
+      if (k1 === '_id' && k2 !== '_id') {
+        return -1;
+      }
+      if (k1 !== '_id' && k2 === '_id') {
+        return 1;
+      }
+      return 0;
+    }).map(key => schemaPaths[key]);
+
+    this.status = 'loaded';
+  },
+  methods: {
+    getComponentForPath(schemaPath) {
+      if (schemaPath.instance === 'Array') {
+        return 'detail-array';
+      }
+      return 'detail-default';
+    },
+    getEditComponentForPath() {
+      return 'edit-default';
+    },
+    getEditValueForPath({ path }) {
+      return path in this.changes ? this.changes[path] : this.document[path];
+    },
+    cancelEdit() {
+      this.changes = {};
+      this.editting = false;
+    },
+    async save() {
+      const { doc } = await api.Model.updateDocument({
+        model: this.model,
+        _id: this.document._id,
+        update: this.changes
+      });
+      this.document = doc;
+      this.changes = {};
+      this.editting = false;
+    }
+  }
+});

package/frontend/src/edit-default/edit-default.html

@@ -0,0 +1,3 @@
+<div>
+  <input type="text" :value="value" @input="$emit('input', $event.target.value)">
+</div>

package/frontend/src/edit-default/edit-default.js

@@ -0,0 +1,20 @@
+'use strict';
+
+const template = require('./edit-default.html');
+
+module.exports = app => app.component('edit-default', {
+  template: template,
+  props: ['value'],
+  emits: ['input'],
+  computed: {
+    displayValue() {
+      if (this.value === null) {
+        return 'null';
+      }
+      if (this.value === undefined) {
+        return 'undefined';
+      }
+      return this.value;
+    }
+  }
+});

package/frontend/src/export-query-results/export-query-results.html

@@ -0,0 +1,11 @@
+<div class="export-query-results">
+  <h2>Export as CSV</h2>
+  <div>
+    Choose fields to export
+  </div>
+  <div v-for="schemaPath in schemaPaths">
+    <input type="checkbox" v-model="shouldExport[schemaPath.path]">
+    <span>{{schemaPath.path}}</span>
+  </div>
+  <async-button @click="exportQueryResults">Export</async-button>
+</div>

package/frontend/src/export-query-results/export-query-results.js

@@ -0,0 +1,34 @@
+'use strict';
+
+const api = require('../api');
+const template = require('./export-query-results.html');
+
+const appendCSS = require('../appendCSS');
+
+appendCSS(require('./export-query-results.css'));
+
+module.exports = app => app.component('export-query-results', {
+  template: template,
+  props: ['schemaPaths', 'filter', 'currentModel'],
+  emits: ['done'],
+  data: () => ({
+    shouldExport: {}
+  }),
+  mounted() {
+    this.shouldExport = {};
+    for (const { path } of this.schemaPaths) {
+      this.shouldExport[path] = true;
+    }
+  },
+  methods: {
+    async exportQueryResults() {
+      await api.Model.exportQueryResults({
+        model: this.currentModel,
+        filter: this.filter,
+        propertiesToInclude: Object.keys(this.shouldExport).filter(key => this.shouldExport[key])
+      });
+
+      this.$emit('done');
+    }
+  }
+});

package/frontend/src/index.js

@@ -0,0 +1,43 @@
+'use strict';
+
+const app = Vue.createApp({
+  template: '<app-component />'
+});
+
+require('./async-button/async-button')(app);
+require('./detail-array/detail-array')(app);
+require('./detail-default/detail-default')(app);
+require('./document/document')(app);
+require('./edit-default/edit-default')(app);
+require('./export-query-results/export-query-results')(app);
+require('./list-array/list-array')(app);
+require('./list-default/list-default')(app);
+require('./list-subdocument/list-subdocument')(app);
+require('./modal/modal')(app);
+require('./models/models')(app);
+require('./navbar/navbar')(app);
+
+app.component('app-component', {
+  template: `
+  <div>
+    <navbar />
+    <div class="view">
+      <router-view :key="$route.fullPath" />
+    </div>
+  </div>
+  `
+});
+
+const routes = require('./routes');
+const router = VueRouter.createRouter({
+  history: VueRouter.createWebHashHistory(),
+  routes: routes.map(route => ({
+    ...route,
+    component: app.component(route.component),
+    props: (route) => route.params
+  }))
+});
+
+app.use(router);
+
+app.mount('#content');

package/frontend/src/list-array/list-array.css

@@ -0,0 +1,8 @@
+.list-array pre {
+  max-height: 6.5em;
+  max-width: 60em;
+}
+
+.list-array pre.maximized {
+  max-height: auto;
+}

package/frontend/src/list-array/list-array.html

@@ -0,0 +1,3 @@
+<div class="list-array">
+  <pre><code ref="code" class="language-javascript" v-text="displayValue"></code></pre>
+</div>

package/frontend/src/list-array/list-array.js

@@ -0,0 +1,23 @@
+'use strict';
+
+const template = require('./list-array.html');
+
+require('../appendCSS')(require('./list-array.css'));
+
+module.exports = app => app.component('list-array', {
+  template: template,
+  props: ['value'],
+  computed: {
+    displayValue() {
+      return JSON.stringify(this.value, (key, value) => {
+        if (typeof value === 'string' && value.length > 30) {
+          return value.slice(0, 27) + '...';
+        }
+        return value;
+      }, '  ').trim();
+    }
+  },
+  mounted() {
+    Prism.highlightElement(this.$refs.code);
+  }
+});

package/frontend/src/list-default/list-default.html

@@ -0,0 +1,3 @@
+<div>
+  {{value}}
+</div>

package/frontend/src/list-default/list-default.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const template = require('./list-default.html');
+
+module.exports = app => app.component('list-default', {
+  template: template,
+  props: ['value'],
+  computed: {
+    displayValue() {
+      if (this.value === null) {
+        return 'null';
+      }
+      if (this.value === undefined) {
+        return 'undefined';
+      }
+      return this.value;
+    }
+  }
+});

package/frontend/src/list-subdocument/list-subdocument.html

@@ -0,0 +1,3 @@
+<div>
+  {{JSON.stringify(value, null, '  ')}}
+</div>

package/frontend/src/list-subdocument/list-subdocument.js

@@ -0,0 +1,9 @@
+'use strict';
+
+const api = require('../api');
+const template = require('./list-subdocument.html');
+
+module.exports = app => app.component('list-subdocument', {
+  template: template,
+  props: ['value']
+});