#85 Implement buildData mechanism

.eslintrc.json

@@ -25,7 +25,10 @@
     "wrap-iife": 0
   },
 
+  "parser": "babel-eslint",
+
   "settings": {
+    "import/parser": "babel-eslint",
     "import/resolver": {
       "node": {
         "paths": ["components"]

BesugoComponent.md

@@ -30,18 +30,17 @@ A static object that defines this component within our website. All properties a
 - `styles`: (arr [str]) array of stylesheets, both internal and external, to be loaded into the CMS page.
 
 ```js
-static get config() {
-  return {
-    tag: "Person",
-    categories: [ "people", "people-pt" ]
-  };
+static config = {
+  tag: "Person",
+  categories: [ "people", "people-pt" ],
 }
 ```
 
 ### constructor()
 ```js
 constructor(props) {
   super(props);
+  ...
 }
 ```
 Only mandatory if the component expects to be passed any props (i.e. data from attributes in html). Should always have the `super(props)` call as above.

components/Besugo.jsx

@@ -29,14 +29,19 @@ export default class BesugoComponent extends React.Component {
     //   Object.assign(Comp.propTypes, config.propTypes);
     // }
 
-    // If we're in the CMS admin pages, load the necessary components as preview components
-    // of those content types
     if (typeof CMS !== 'undefined') {
-      const cats = Array.isArray(config.categories) ? config.categories : [ config.categories ];
+      // Load the necessary components as preview components of those content types.
+      if (config.categories) {
+        const cats = Array.isArray(config.categories) ? config.categories : [ config.categories ];
+        cats.forEach((cat) => {
+          CMS.registerPreviewTemplate(cat, Comp);
+        });
+      }
 
-      cats.forEach((cat) => {
-        CMS.registerPreviewTemplate(cat, Comp);
-      });
+      // Custom widgets need to be registered by the appropriate methods as well.
+      if (config.widget) {
+        CMS.registerWidget(config.widget.name, Comp, config.widget.preview);
+      }
 
       // This is only needed for CMS Previews currently; on website pages these will ideally
       // go in the baseof.html file directly.
@@ -94,16 +99,17 @@ export default class BesugoComponent extends React.Component {
 
             Components.forEach((Comp) => {
               const { config } = Comp;
+
               if (config.tag) {
                 const nodes = Comp.getChildrenInPlaceholder(domtree, config.tag, parserUtils);
                 nodes.forEach((node) => {
                   // Send the node data into the component so that it knows what to build
                   const props = Comp.getPropsFromPlaceholder(node);
 
                   // Replace the placeholder node with a normal div container for our component;
-                  // we need one so that later during hydrate React knows what it's doing, but we
-                  // don't use our original placeholders from now on because they're not exactly
-                  // standard.
+                  // we need one so that later during hydrate React knows what it's doing,
+                  // but we don't use our original placeholders from now on because they're
+                  // not exactly standard.
                   const container = Comp.buildContainer(parserUtils, props);
                   parserUtils.setAttribute(container, 'besugo-component', config.tag);
                   parserUtils.setAttribute(container, 'besugo-props', JSON.stringify(props));
@@ -162,8 +168,8 @@ export default class BesugoComponent extends React.Component {
         text() {
           return parserUtils.textOf(child);
         },
-        getChildren(parentNode) {
-          return BesugoComponent.getChildrenInPlaceholder(child, parentNode, parserUtils);
+        getChildren(childName) {
+          return BesugoComponent.getChildrenInPlaceholder(child, childName, parserUtils);
         },
       }));
   }
@@ -198,7 +204,9 @@ export default class BesugoComponent extends React.Component {
   //  .categories - (arr [str]) array of categories that this component will render in the CMS page
   //  .styles - (arr [str]) array of stylesheets, both internal and external, to be
   //            loaded into the CMS page
-  static get config() { return {}; }
+  //  .widget - (obj { name [str], (opt) preview [Comp] }) if this is a custom controller widget
+  //            to be used in content types with special fields
+  static config = {}
 
   // Non-static methods
 

components/MoreArrow.jsx

@@ -2,14 +2,8 @@ import React from 'react';
 import BesugoComponent from 'Besugo';
 
 export default class MoreArrow extends BesugoComponent {
-  constructor(props) {
-    super(props);
-  }
-
-  static get config() {
-    return {
-      tag: 'MoreArrow',
-    };
+  static config = {
+    tag: 'MoreArrow',
   }
 
   getData() {

components/Previews.jsx

@@ -1,12 +1,10 @@
 import BesugoComponent from 'Besugo';
 
 export default class Previews extends BesugoComponent {
-  static get config() {
-    return {
-      styles: [
-        '/css/app.css',
-        'https://fonts.googleapis.com/css?family=Muli:300,400,700',
-      ],
-    };
+  static config = {
+    styles: [
+      '/css/app.css',
+      'https://fonts.googleapis.com/css?family=Muli:300,400,700',
+    ],
   }
 }

components/SrcSet.jsx

@@ -18,14 +18,8 @@ const buildSrcSet = (src) => {
 };
 
 export default class SrcSet extends BesugoComponent {
-  constructor(props) {
-    super(props);
-  }
-
-  static get config() {
-    return {
-      tag: 'SrcSet',
-    };
+  static config = {
+    tag: 'SrcSet',
   }
 
   static buildContainer(parserUtils, props) {
@@ -91,6 +85,10 @@ export default class SrcSet extends BesugoComponent {
 }
 
 export class SrcSetBg extends BesugoComponent {
+  static config = {
+    tag: 'SrcSetBg',
+  }
+
   constructor(props) {
     super(props);
 
@@ -99,12 +97,6 @@ export class SrcSetBg extends BesugoComponent {
     this._resizeTimer = null;
   }
 
-  static get config() {
-    return {
-      tag: 'SrcSetBg',
-    };
-  }
-
   renderDefault() {
     const data = this.props;
 

components/blog/BlogPost.jsx

@@ -7,15 +7,9 @@ import EndFooter from 'partials/EndFooter';
 import PersonCard from 'people/Card';
 
 export default class BlogPost extends BesugoComponent {
-  constructor(props) {
-    super(props);
-  }
-
-  static get config() {
-    return {
-      tag: 'BlogPost',
-      categories: [ 'blog_post', 'blog_post-pt' ],
-    };
+  static config = {
+    tag: 'BlogPost',
+    categories: [ 'blog_post', 'blog_post-pt' ],
   }
 
   static extraProps(props, xplaceholder) {

components/partials/EndFooter.jsx

@@ -4,15 +4,9 @@ import SocialIcons from 'partials/SocialIcons';
 import SVGElements from 'partials/SVGElements';
 
 export default class EndFooter extends BesugoComponent {
-  constructor(props) {
-    super(props);
-  }
-
-  static get config() {
-    return {
-      tag: 'EndFooter',
-      categories: [ 'footer', 'footer-pt' ],
-    };
+  static config = {
+    tag: 'EndFooter',
+    categories: [ 'footer', 'footer-pt' ],
   }
 
   static extraProps(props, xplaceholder) {

components/partials/SVGElements.jsx

@@ -2,10 +2,8 @@ import React from 'react';
 import BesugoComponent from 'Besugo';
 
 export default class SVGElements extends BesugoComponent {
-  static get config() {
-    return {
-      tag: 'SVGElements',
-    };
+  static config = {
+    tag: 'SVGElements',
   }
 
   render() {

components/partials/SlideShow.jsx

@@ -13,10 +13,8 @@ const config = {
 };
 
 export default class SlideShow extends BesugoComponent {
-  static get config() {
-    return {
-      tag: 'SlideShow',
-    };
+  static config = {
+    tag: 'SlideShow',
   }
 
   static extraProps(props, xplaceholder) {

components/partials/SocialIcons.jsx

@@ -2,10 +2,6 @@ import React from 'react';
 import BesugoComponent from 'Besugo';
 
 export default class SocialIcons extends BesugoComponent {
-  constructor(props) {
-    super(props);
-  }
-
   getData() {
     // Set some default props
     return {

components/partials/TopHeader.jsx

@@ -2,14 +2,8 @@ import React from 'react';
 import BesugoComponent from 'Besugo';
 
 export default class TopHeader extends BesugoComponent {
-  constructor(props) {
-    super(props);
-  }
-
-  static get config() {
-    return {
-      tag: 'TopHeader',
-    };
+  static config = {
+    tag: 'TopHeader',
   }
 
   getData() {

components/people/Card.jsx

@@ -5,14 +5,8 @@ import SocialIcons from 'partials/SocialIcons';
 import SrcSet from 'SrcSet';
 
 export default class PersonCard extends BesugoComponent {
-  constructor(props) {
-    super(props);
-  }
-
-  static get config() {
-    return {
-      tag: 'PersonCard',
-    };
+  static config = {
+    tag: 'PersonCard',
   }
 
   static buildContainer(parserUtils) {

components/people/Person.jsx

@@ -8,15 +8,9 @@ import SVGElements from 'partials/SVGElements';
 import TopHeader from 'partials/TopHeader';
 
 export default class Person extends BesugoComponent {
-  constructor(props) {
-    super(props);
-  }
-
-  static get config() {
-    return {
-      tag: 'Person',
-      categories: [ 'people', 'people-pt' ],
-    };
+  static config = {
+    tag: 'Person',
+    categories: [ 'people', 'people-pt' ],
   }
 
   getData() {

configs/cms.yml

@@ -31,6 +31,7 @@ collections: # A list of collections the CMS should be able to edit
 # 🇬🇧 collections
   - name: "blog_post" # Used in routes, ie.: /admin/collections/:slug/edit
     label: "Blog Posts 🇬🇧" # Used in the UI, ie.: "New Post"
+    label_singular: "Blog Post 🇬🇧"
     description: >
       The description is a great place for tone setting, high level information, and editing
       guidelines that are specific to a collection.
@@ -69,6 +70,7 @@ collections: # A list of collections the CMS should be able to edit
             valueField: "title"
   - name: "people" # Used in routes, ie.: /admin/collections/:slug/edit
     label: "People 🇬🇧" # Used in the UI, ie.: "New Post"
+    label_singular: "Person 🇬🇧" # Used in the UI, ie.: "New Post"
     description: >
       The description is a great place for tone setting, high level information, and editing
       guidelines that are specific to a collection.
@@ -133,6 +135,7 @@ collections: # A list of collections the CMS should be able to edit
 # 🇵🇹 collections
   - name: "blog_post-pt" # Used in routes, ie.: /admin/collections/:slug/edit
     label: "Blog Posts 🇵🇹" # Used in the UI, ie.: "New Post"
+    label_singular: "Blog Post 🇵🇹" # Used in the UI, ie.: "New Post"
     description: >
       The description is a great place for tone setting, high level information, and editing
       guidelines that are specific to a collection.
@@ -171,6 +174,7 @@ collections: # A list of collections the CMS should be able to edit
             valueField: "title"
   - name: "people-pt" # Used in routes, ie.: /admin/collections/:slug/edit
     label: "People 🇵🇹" # Used in the UI, ie.: "New Post"
+    label_singular: "Person 🇵🇹" # Used in the UI, ie.: "New Post"
     description: >
       The description is a great place for tone setting, high level information, and editing
       guidelines that are specific to a collection.

package.json

@@ -44,16 +44,19 @@
     "erase:public": "rm -Rf ./public && mkdir ./public",
     "erase:temp": "rm -Rf ./temp && mkdir ./temp && mkdir ./temp/hugo",
     "erase:hugoconfig": "rm -Rf ./config.yml",
+    "erase:data": "node scripts/eraseBuildData.js",
     "sass:scss-compile": "node-sass scss/ -o temp/css --include-path ./node_modules",
     "sass:postcss": "postcss temp/css/*.css -d public/css --use autoprefixer --verbose",
     "sass:postcssnano": "postcss temp/css/*.css -d public/css --use autoprefixer --use cssnano --verbose",
     "build:sass": "npm-run-all -s sass:scss-compile sass:postcssnano",
     "build:configs": "node scripts/configs.js",
     "build:sharp": "node scripts/sharp.js",
+    "build:data": "node scripts/buildData.js",
     "compile:webpack": "webpack --watch --display none --mode development & webpack-dev-server --color",
     "watch:configs": "chokidar 'scripts/configs.js' 'configs/*.yml' -c 'yarn build:configs && yarn dummy:refresh' --silent",
     "watch:sass": "chokidar 'package.json' 'scss/**/*.scss' -c 'npm-run-all -s sass:scss-compile sass:postcss dummy:refresh' --initial --silent",
     "watch:sharp": "nodemon -q -w scripts/sharp.js -x 'yarn build:sharp && yarn dummy:refresh'",
+    "watch:data": "chokidar 'scripts/buildData.js' 'scripts/buildData/**/*.js' -c 'yarn build:data' --initial --silent",
     "watch:hugo": "hugo -w",
     "watch:webpack": "nodemon -q -w webpack.config.js -x 'yarn compile:webpack'",
     "dummy:refresh": "node scripts/dummy-refresh.js",
@@ -68,9 +71,11 @@
   "dependencies": {
     "autoprefixer": "^8.2.0",
     "babel-core": "^6.26.0",
+    "babel-eslint": "^8.2.6",
     "babel-loader": "^7.1.4",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
     "chalk": "^2.3.2",
     "child_process": "^1.0.2",
     "chokidar": "^2.0.3",