register extensions for development

packages/netlify-cms-backend-git-gateway/src/AuthenticationPage.js

@@ -53,7 +53,6 @@ const ErrorMessage = styled.p`
 
 let component = null;
 
-console.log(window.netlifyIdentity);
 if (window.netlifyIdentity) {
   window.netlifyIdentity.on('login', (user) => {
     component && component.handleIdentityLogin(user);

packages/netlify-cms-core/package.json

@@ -8,7 +8,7 @@
     "dist/"
   ],
   "scripts": {
-    "watch": "webpack -w",
+    "watch": "webpack-dev-server --hot --open",
     "build": "webpack"
   },
   "keywords": [
@@ -96,8 +96,10 @@
   },
   "devDependencies": {
     "css-loader": "^1.0.0",
+    "friendly-errors-webpack-plugin": "^1.7.0",
     "to-string-loader": "^1.1.5",
     "webpack": "^4.16.1",
-    "webpack-cli": "^3.1.0"
+    "webpack-cli": "^3.1.0",
+    "webpack-dev-server": "^3.1.5"
   }
 }

packages/netlify-cms-core/scripts/load-extensions.js

@@ -0,0 +1,38 @@
+import { registerBackend, registerWidget, registerEditorComponent } from 'Lib/registry';
+import { GitHubBackend } from 'netlify-cms-backend-github';
+import { GitLabBackend } from 'netlify-cms-backend-gitlab';
+import { GitGatewayBackend } from 'netlify-cms-backend-git-gateway';
+import { TestBackend } from 'netlify-cms-backend-test';
+import { BooleanControl } from 'netlify-cms-widget-boolean';
+import { StringControl, StringPreview } from 'netlify-cms-widget-string';
+// import { NumberControl, NumberPreview } from 'netlify-cms-widget-number';
+// import { TextControl, TextPreview } from 'netlify-cms-widget-text';
+// import { ImageControl, ImagePreview } from 'netlify-cms-widget-image';
+// import { FileControl, FilePreview } from 'netlify-cms-widget-file';
+// import { DateControl, DatePreview } from 'netlify-cms-widget-date';
+// import { DateTimeControl, DateTimePreview } from 'netlify-cms-widget-datetime';
+// import { SelectControl, SelectPreview } from 'netlify-cms-widget-select';
+// import { MarkdownControl, MarkdownPreview } from 'netlify-cms-widget-markdown';
+// import { ListControl, ListPreview } from 'netlify-cms-widget-list';
+// import { ObjectControl, ObjectPreview } from 'netlify-cms-widget-object';
+// import { RelationControl, RelationPreview } from 'netlify-cms-widget-relation';
+import image from 'netlify-cms-editor-component-image';
+
+registerBackend('git-gateway', GitGatewayBackend);
+registerBackend('github', GitHubBackend);
+registerBackend('gitlab', GitLabBackend);
+registerBackend('test-repo', TestBackend);
+registerWidget('boolean', BooleanControl);
+registerWidget('string', StringControl, StringPreview);
+// registerWidget('text', TextControl, TextPreview);
+// registerWidget('number', NumberControl, NumberPreview);
+// registerWidget('list', ListControl, ListPreview);
+// registerWidget('markdown', MarkdownControl, MarkdownPreview);
+// registerWidget('image', ImageControl, ImagePreview);
+// registerWidget('file', FileControl, FilePreview);
+// registerWidget('date', DateControl, DatePreview);
+// registerWidget('datetime', DateTimeControl, DateTimePreview);
+// registerWidget('select', SelectControl, SelectPreview);
+// registerWidget('object', ObjectControl, ObjectPreview);
+// registerWidget('relation', RelationControl, RelationPreview);
+registerEditorComponent(image);

packages/netlify-cms-core/src/backend.js

@@ -1,10 +1,6 @@
 import { attempt, flatten, isError } from 'lodash';
 import { fromJS, Map } from 'immutable';
 import fuzzy from 'fuzzy';
-import { GitHubBackend } from "netlify-cms-backend-github";
-import { GitLabBackend } from "netlify-cms-backend-gitlab";
-import { GitGatewayBackend } from "netlify-cms-backend-git-gateway";
-import { TestBackend } from "netlify-cms-backend-test";
 import { resolveFormat } from "Formats/formats";
 import { selectIntegration } from 'Reducers/integrations';
 import {
@@ -24,16 +20,6 @@ import { registerBackend, getBackend } from 'Lib/registry';
 import { Cursor, CURSOR_COMPATIBILITY_SYMBOL } from 'netlify-cms-lib-util';
 import { EDITORIAL_WORKFLOW, status } from 'Constants/publishModes';
 
-/**
- * Register internal backends
- */
-registerBackend('git-gateway', GitGatewayBackend);
-registerBackend('github', GitHubBackend);
-registerBackend('gitlab', GitLabBackend);
-registerBackend('bitbucket', BitBucketBackend);
-registerBackend('test-repo', TestBackend);
-
-
 class LocalStorageAuthStore {
   storageKey = "netlify-cms-user";
 

packages/netlify-cms-core/src/components/Editor/EditorPreviewPane/EditorPreview.js

@@ -1,14 +1,15 @@
-import PropTypes from 'prop-types';
 import React from 'react';
+import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import styled from 'react-emotion';
 
 function isVisible(field) {
   return field.get('widget') !== 'hidden';
 }
 
-const style = {
+const PreviewContainer = styled.div`
-  fontFamily: 'Roboto, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif',
+  fontFamily: Roboto, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
-};
+`
 
 /**
  * Use a stateful component so that child components can effectively utilize
@@ -21,9 +22,11 @@ export default class Preview extends React.Component {
       return null;
     }
     return (
-      <div style={style}>
+      <PreviewContainer>
-        {fields.filter(isVisible).map(field => widgetFor(field.get('name')))}
+        {fields.filter(isVisible).map(field => (
-      </div>
+          <div>{widgetFor(field.get('name'))}</div>
+        ))}
+      </PreviewContainer>
     );
   }
 }

packages/netlify-cms-core/src/components/EditorWidgets/EditorWidgets.css

@@ -11,7 +11,3 @@
 :root {
   --widgetNestDistance: 14px;
 }
-
-.nc-widgetPreview {
-  margin: 15px 2px;
-}

packages/netlify-cms-core/src/components/EditorWidgets/String/StringPreview.js

@@ -1,10 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-export default function StringPreview({ value }) {
-  return <div className="nc-widgetPreview">{ value }</div>;
-}
-
-StringPreview.propTypes = {
-  value: PropTypes.node,
-};

packages/netlify-cms-core/src/components/EditorWidgets/index.js

@@ -1,8 +1,6 @@
 import { registerWidget } from 'Lib/registry';
 import UnknownControl from './Unknown/UnknownControl';
 import UnknownPreview from './Unknown/UnknownPreview';
-import StringControl from './String/StringControl';
-import StringPreview from './String/StringPreview';
 import NumberControl from './Number/NumberControl';
 import NumberPreview from './Number/NumberPreview';
 import TextControl from './Text/TextControl';
@@ -27,8 +25,6 @@ import RelationControl from './Relation/RelationControl';
 import RelationPreview from './Relation/RelationPreview';
 import BooleanControl from './Boolean/BooleanControl';
 
-
-registerWidget('string', StringControl, StringPreview);
 registerWidget('text', TextControl, TextPreview);
 registerWidget('number', NumberControl, NumberPreview);
 registerWidget('list', ListControl, ListPreview);

packages/netlify-cms-core/webpack.config.js

@@ -1,10 +1,26 @@
 const path = require('path');
-const { getConfig, rules } = require('../../scripts/webpack.js');
+const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
+const { getConfig, rules, plugins } = require('../../scripts/webpack.js');
+
+const isProduction = process.env.NODE_ENV === 'production';
+
+const entry = () => {
+  const defaultEntry = ['./index.js'];
+
+  if (isProduction) {
+    return defaultEntry;
+  }
+
+  return [
+    ...defaultEntry,
+    '../scripts/load-extensions.js',
+  ];
+};
 
 module.exports = {
   ...getConfig(),
   context: path.join(__dirname, 'src'),
-  entry: './index.js',
+  entry: entry(),
   module: {
     rules: [
       ...Object.entries(rules)
@@ -26,5 +42,22 @@ module.exports = {
         use: ['to-string-loader', 'css-loader'],
       },
     ],
-  }
+  },
+  plugins: [
+    ...Object.entries(plugins)
+      .filter(([ key ]) => key !== 'friendlyErrors')
+      .map(([ _, plugin ]) => plugin()),
+    new FriendlyErrorsWebpackPlugin({
+      compilationSuccessInfo: {
+        messages: ['Netlify CMS is now running at http://localhost:8080'],
+      },
+    }),
+  ],
+  devServer: {
+    contentBase: './example',
+    watchContentBase: true,
+    quiet: true,
+    host: 'localhost',
+    port: 8080,
+  },
 };

packages/netlify-cms-ui-default/src/WidgetPreviewContainer.js

@@ -0,0 +1,7 @@
+import styled from 'react-emotion';
+
+const WidgetPreviewContainer = styled.div`
+  margin: 15px 2px;
+`;
+
+export default WidgetPreviewContainer;

packages/netlify-cms-ui-default/src/index.js

@@ -4,6 +4,7 @@ export ListItemTopBar from './ListItemTopBar';
 export Loader from './Loader';
 export Toggle from './Toggle';
 export AuthenticationPage from './AuthenticationPage';
+export WidgetPreviewContainer from './WidgetPreviewContainer';
 export {
   fonts,
   colorsRaw,

packages/netlify-cms-widget-string/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "netlify-cms-widget-string",
+  "description": "Widget for editing plain string values in Netlify CMS.",
+  "version": "2.0.0-alpha.0",
+  "main": "dist/netlify-cms-widget-string.js",
+  "license": "MIT",
+  "keywords": [
+    "netlify",
+    "netlify-cms",
+    "widget",
+    "string"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "watch": "webpack -w",
+    "build": "webpack"
+  },
+  "devDependencies": {
+    "webpack": "^4.16.1",
+    "webpack-cli": "^3.1.0"
+  },
+  "peerDependencies": {
+    "netlify-cms-ui-default": "^2.0.0-alpha.0",
+    "prop-types": "^15.5.10",
+    "react": "^16.4.1"
+  }
+}

packages/netlify-cms-widget-string/src/StringControl.js

@@ -1,5 +1,5 @@
-import PropTypes from 'prop-types';
 import React from 'react';
+import PropTypes from 'prop-types';
 
 export default class StringControl extends React.Component {
   static propTypes = {

packages/netlify-cms-widget-string/src/StringPreview.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
+
+const StringPreview = ({ value }) => (
+  <WidgetPreviewContainer>{ value }</WidgetPreviewContainer>
+);
+
+StringPreview.propTypes = {
+  value: PropTypes.node,
+};
+
+export default StringPreview;

packages/netlify-cms-widget-string/src/index.js

@@ -0,0 +1,2 @@
+export StringControl from './StringControl';
+export StringPreview from './StringPreview';

packages/netlify-cms-widget-string/webpack.config.js

@@ -0,0 +1,3 @@
+const { getConfig } = require('../../scripts/webpack.js');
+
+module.exports = getConfig();

packages/netlify-cms/package.json

@@ -4,7 +4,6 @@
   "version": "2.0.0-alpha.0",
   "main": "dist/netlify-cms.js",
   "scripts": {
-    "watch": "webpack-dev-server --open",
     "build": "webpack"
   },
   "keywords": [
@@ -16,8 +15,6 @@
   ],
   "license": "MIT",
   "dependencies": {
-  },
-  "peerDependencies": {
     "netlify-cms-core": "2.0.0-alpha.0",
     "netlify-cms-backend-github": "2.0.0-alpha.0",
     "netlify-cms-backend-gitlab": "2.0.0-alpha.0",
@@ -26,9 +23,7 @@
     "netlify-cms-editor-component-image": "2.0.0-alpha.0"
   },
   "devDependencies": {
-    "friendly-errors-webpack-plugin": "^1.7.0",
     "webpack": "^4.16.1",
-    "webpack-cli": "^3.1.0",
+    "webpack-cli": "^3.1.0"
-    "webpack-dev-server": "^3.1.5"
   }
 }

packages/netlify-cms/webpack.config.js

@@ -1,23 +1,3 @@
-const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
+const { getConfig } = require('../../scripts/webpack.js');
-const { getConfig, plugins } = require('../../scripts/webpack.js');
 
-module.exports = {
+module.exports = getConfig();
-  ...getConfig(),
-  plugins: [
-    ...Object.entries(plugins)
-      .filter(([ key ]) => key !== 'friendlyErrors')
-      .map(([ _, plugin ]) => plugin()),
-    new FriendlyErrorsWebpackPlugin({
-      compilationSuccessInfo: {
-        messages: ['Netlify CMS is now running at http://localhost:8080'],
-      },
-    }),
-  ],
-  devServer: {
-    contentBase: './example',
-    watchContentBase: true,
-    quiet: true,
-    host: 'localhost',
-    port: 8080,
-  },
-};

scripts/webpack.js

@@ -59,7 +59,7 @@ const getConfig = () => ({
   module: {
     rules: Object.values(rules()).map(rule => rule()),
   },
-  plugins: Object.values(plugins()).map(plugin => plugin),
+  plugins: Object.values(plugins()).map(plugin => plugin()),
   devtool: 'source-map',
   target: 'web',