Readme code highlighting, parsing. Property names auto lookup.

gm3000 · May 28, 2017 · 69e82a9 · 69e82a9
1 parent d8f792f
commit 69e82a9
Show file tree

Hide file tree

Showing 13 changed files with 91 additions and 69 deletions.
diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
     "inquirer": "2.0.0",
     "json-loader": "^0.5.4",
     "lodash": "^4.16.4",
+    "marked": "0.3.6",
     "minimist": "^1.2.0",
     "prop-types": "^15.5.8",
     "react": "^15.5.4",
@@ -60,7 +61,7 @@
     "request": "^2.70.0",
     "reselect": "^2.5.4",
     "socket.io": "1.4.5",
-    "structor-commons": "0.0.7",
+    "structor-commons": "0.0.8",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
     "webpack": "^2.2.1",
@@ -78,7 +79,6 @@
     "gulp-less": "3.1.0",
     "gulp-uglify": "2.0.0",
     "gulp-watch": "4.3.9",
-    "marked": "0.3.5",
     "react-bootstrap": "0.30.6",
     "react-color": "2.11.7",
     "redux-thunk": "^2.1.0",

diff --git a/src-client/api/app/serverApi.js b/src-client/api/app/serverApi.js
@@ -51,7 +51,7 @@ export function loadComponentOptions(componentName, namespace, sourceCodeFilePat
 	let result = {};
 	return invokeStructor('getComponentNotes', {componentName, namespace})
 		.then(response => {
-			result.readmeText = response;
+			result.readmeText = response.readmeText;
 			if (sourceCodeFilePath) {
 				return invokeStructor('getComponentSourceCode', {filePath: sourceCodeFilePath})
 					.then(response => {
@@ -64,7 +64,7 @@ export function loadComponentOptions(componentName, namespace, sourceCodeFilePat
 		});
 }
 
-export function loadComponentReadmeText(componentName, namespace) {
+export function loadComponentNotes(componentName, namespace) {
   return invokeStructor('getComponentNotes', {componentName, namespace});
 }
 

diff --git a/src-client/components/CollapsiblePlusOptionInput.js b/src-client/components/CollapsiblePlusOptionInput.js
@@ -15,16 +15,13 @@
  */
 
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { Collapse, Panel } from 'react-bootstrap';
-import { getStylePropList } from 'api/utils/styleProps.js';
 
 class CollapsiblePlusOptionInput extends Component {
 
   constructor (props) {
     super(props);
     this.state = {};
-    this.styleProps = getStylePropList();
     this.handleToggle = this.handleToggle.bind(this);
     this.handleCommit = this.handleCommit.bind(this);
     this.handleOnKeyDown = this.handleOnKeyDown.bind(this);
@@ -59,19 +56,15 @@ class CollapsiblePlusOptionInput extends Component {
 
   render () {
 
-    //let addInputStyle = {
-    //    height: '1.55em',
-    //    paddingTop: '2px',
-    //    paddingBottom: '2px',
-    //    marginBottom: '0.5em'
-    //};
-
-    let styleOptions = [];
-    this.styleProps.forEach(style => {
-      styleOptions.push(
-        <option key={style}>{style}</option>
-      );
-    });
+    let options = [];
+    const {optionNames} = this.props;
+    if (optionNames && optionNames.length > 0) {
+      optionNames.forEach((optionName, index) => {
+        options.push(
+          <option key={optionName + index}>{optionName}</option>
+        );
+      });
+    }
 
     return (
       <div style={this.props.style}>
@@ -94,7 +87,7 @@ class CollapsiblePlusOptionInput extends Component {
                        placeholder="prop[.prop]"
                        type="text"
                        autoComplete="on"
-                       list="styleOptions"
+                       list="options"
                        className="form-control"
                        onKeyDown={this.handleOnKeyDown}/>
                 <label style={{marginTop: '5px'}}>Property value</label>
@@ -110,8 +103,8 @@ class CollapsiblePlusOptionInput extends Component {
                   <span>Add</span>
                 </button>
               </Panel>
-              <datalist id="styleOptions">
-                {styleOptions}
+              <datalist id="options">
+                {options}
               </datalist>
             </form>
           </div>

diff --git a/src-client/modules/workspace/containers/ComponentOptionsPanel/index.js b/src-client/modules/workspace/containers/ComponentOptionsPanel/index.js
@@ -63,10 +63,11 @@ class Container extends Component {
     this.handleToggleFavorite = this.handleToggleFavorite.bind(this);
   }
 
-  componentWillReceiveProps(nextProps) {
-    const {componentModel} = nextProps;
-    if (componentModel !== this.props.componentModel) {
-      coockiesApi.saveDeskSettings({optionsPanel: componentModel});
+  componentWillReceiveProps (nextProps) {
+    const {componentModel: nextComponentModel, readmeText: nextReadmeText} = nextProps;
+    const {componentModel, readmeText} = this.props;
+    if (nextComponentModel !== componentModel) {
+      coockiesApi.saveDeskSettings({optionsPanel: nextComponentModel});
     }
   }
 
@@ -126,16 +127,17 @@ class Container extends Component {
 
     const {
       selectedComponents,
-      componentModel: {activeTab, expandedStyleSections, favoriteStylePaths}
+      componentModel: {activeTab, expandedStyleSections, favoriteStylePaths},
+      propNames
     } = this.props;
 
     let panelContent = null;
 
     if (selectedComponents && selectedComponents.length > 0) {
-      let key = "selectedComponents";
+      let key = 'selectedComponents';
       let props = {};
       selectedComponents.forEach(componentObject => {
-          props = merge(props, componentObject.props);
+        props = merge(props, componentObject.props);
       });
 
       let styleSections = [];
@@ -277,7 +279,7 @@ class Container extends Component {
         }
       });
       if (favoriteStyleInputs.length > 0) {
-        if (expandedStyleSections["favoriteStyleGroup"] === true) {
+        if (expandedStyleSections['favoriteStyleGroup'] === true) {
           collapsed = 'in';
         } else {
           collapsed = '';
@@ -372,7 +374,9 @@ class Container extends Component {
           <div style={{position: 'relative', marginTop: '1em'}}>
             <CollapsiblePlusOptionInput
               style={{width: '100%', zIndex: '1030', marginBottom: '0.5em'}}
-              onCommit={this.handleAddNewProp}/>
+              optionNames={propNames}
+              onCommit={this.handleAddNewProp}
+            />
           </div>
           {optionInputs}
         </Tab>

diff --git a/src-client/modules/workspace/containers/ComponentOptionsPanel/selectors.js b/src-client/modules/workspace/containers/ComponentOptionsPanel/selectors.js
@@ -16,8 +16,10 @@
 
 import { createStructuredSelector } from 'reselect';
 import { selectedComponentsSelector } from 'modules/workspace/containers/SelectionControls/selectors';
+import { propNamesSelector } from 'modules/workspace/containers/ComponentReadmePanel/selectors';
 
 export const modelSelector = createStructuredSelector({
-    componentModel: state => state.componentOptionsPanel,
-    selectedComponents: selectedComponentsSelector,
+  componentModel: state => state.componentOptionsPanel,
+  selectedComponents: selectedComponentsSelector,
+  propNames: propNamesSelector,
 });
diff --git a/src-client/modules/workspace/containers/ComponentReadmePanel/actions.js b/src-client/modules/workspace/containers/ComponentReadmePanel/actions.js
@@ -20,8 +20,8 @@ export const SET_README_TEXT = "ComponentReadmePanel/SET_README_TEXT";
 
 export const loadReadmeText = (componentName, namespace) =>
   ({type: LOAD_README_TEXT, payload: {componentName, namespace}});
-export const setReadmeText = (readmeText) =>
-  ({type: SET_README_TEXT, payload: readmeText});
+export const setReadmeText = (readmeText, propNames) =>
+  ({type: SET_README_TEXT, payload: {readmeText, propNames}});
 
 export const containerActions = (dispatch) => bindActionCreators({
   loadReadmeText

diff --git a/src-client/modules/workspace/containers/ComponentReadmePanel/index.js b/src-client/modules/workspace/containers/ComponentReadmePanel/index.js
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
+import marked from 'marked';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { modelSelector } from './selectors.js';
 import { containerActions } from './actions.js';
-import marked from 'marked';
 
 const panelStyle = {
   padding: '1em 1em 1em 1em',
@@ -39,30 +39,9 @@ class Container extends Component {
     this.state = {readmeText: undefined};
   }
 
-  componentDidMount () {
-    const {selectedComponents, loadReadmeText} = this.props;
-    if (selectedComponents.length === 1) {
-      const {componentName, namespace} = selectedComponents[0];
-      loadReadmeText(componentName, namespace);
-    }
-    marked.setOptions({
-      highlight: function (code) {
-        return hljs.highlightAuto(code).value;
-      }
-    });
-  }
-
   componentWillReceiveProps (nextProps) {
-    const {selectedComponents, loadReadmeText, readmeText} = this.props;
-    const {selectedComponents: nextComponents, readmeText: nextReadmeText} = nextProps;
-    if (nextComponents && selectedComponents !== nextComponents) {
-      if (nextComponents.length === 1) {
-        const {componentName, namespace} = nextComponents[0];
-        loadReadmeText(componentName, namespace);
-      } else {
-        this.setState({readmeText: undefined});
-      }
-    }
+    const {readmeText} = this.props;
+    const {readmeText: nextReadmeText} = nextProps;
     if (nextReadmeText !== readmeText) {
       this.setState({readmeText: nextReadmeText});
     }
@@ -71,9 +50,15 @@ class Container extends Component {
   render () {
     const {readmeText} = this.state;
     const validText = readmeText && readmeText.length > 0 ? readmeText : notAvailableText;
+    const html = marked(validText, {
+      highlight: function (code) {
+        return hljs.highlightAuto(code).value;
+      }
+    });
+
     return (
       <div style={panelStyle}>
-        <div dangerouslySetInnerHTML={{__html: marked(validText)}} />
+        <div dangerouslySetInnerHTML={{__html: html}} />
       </div>
     );
   }

diff --git a/src-client/modules/workspace/containers/ComponentReadmePanel/reducer.js b/src-client/modules/workspace/containers/ComponentReadmePanel/reducer.js
@@ -18,6 +18,7 @@ import * as actions from './actions.js';
 
 const initialState = {
   readmeText: '',
+  propNames: [],
 };
 
 export default (state = initialState, action = {}) => {
@@ -26,7 +27,8 @@ export default (state = initialState, action = {}) => {
 
   if (type === actions.SET_README_TEXT) {
     return Object.assign({}, state, {
-      readmeText: payload
+      readmeText: payload.readmeText,
+      propNames: payload.propNames,
     });
   }
 

diff --git a/src-client/modules/workspace/containers/ComponentReadmePanel/sagas.js b/src-client/modules/workspace/containers/ComponentReadmePanel/sagas.js
@@ -24,8 +24,8 @@ function* loadReadmeText(){
     const { payload } = yield take(actions.LOAD_README_TEXT);
     try {
       const {componentName, namespace} = payload;
-      const readmeText = yield call(serverApi.loadComponentReadmeText, componentName, namespace);
-      yield put(actions.setReadmeText(readmeText));
+      const componentNotes = yield call(serverApi.loadComponentNotes, componentName, namespace);
+      yield put(actions.setReadmeText(componentNotes.readmeText, componentNotes.propNames));
     } catch(error) {
       yield put(messageActions.failed('Loading readme. Error: ' + (error.message ? error.message : error)));
     }

diff --git a/src-client/modules/workspace/containers/ComponentReadmePanel/selectors.js b/src-client/modules/workspace/containers/ComponentReadmePanel/selectors.js
@@ -16,10 +16,10 @@
 
 import { createStructuredSelector } from 'reselect';
 
-import { selectedComponentsSelector } from 'modules/workspace/containers/SelectionControls/selectors';
+export const readmeTextSelector = state => state.componentReadmePanel.readmeText;
+export const propNamesSelector = state => state.componentReadmePanel.propNames;
 
 export const modelSelector = createStructuredSelector({
-  readmeText: state => state.componentReadmePanel.readmeText,
-  selectedComponents: selectedComponentsSelector,
+  readmeText: readmeTextSelector,
 });
 
diff --git a/src-client/modules/workspace/containers/DeskPage/index.js b/src-client/modules/workspace/containers/DeskPage/index.js
@@ -74,7 +74,6 @@ class Container extends Component {
           context.setGetter('mode', () => this.props.componentModel.isEditModeOn);
           context.setGetter('parentList', (selectedKey) => graphApi.getParentsList(selectedKey));
 
-
           context.addListener('componentClick.desk', this.handleComponentClick);
           context.addListener('pathnameChanged.desk', this.handlePathnameChanged);
           context.addListener('cut.desk', (keys) => { setForCuttingKeys(keys); });

diff --git a/src-client/modules/workspace/containers/SelectionBreadcrumbs/actions.js b/src-client/modules/workspace/containers/SelectionBreadcrumbs/actions.js
@@ -18,6 +18,7 @@ import { bindActionCreators } from 'redux';
 import { graphApi } from 'api';
 import { success, failed, timeout, close } from 'modules/app/containers/AppMessage/actions';
 import { updateMarked } from 'modules/workspace/containers/DeskPage/actions';
+import { loadReadmeText } from 'modules/workspace/containers/ComponentReadmePanel/actions';
 
 export const SET_SELECTED_KEY = 'SelectionBreadcrumbs/SET_SELECTED_KEY';
 
@@ -84,6 +85,11 @@ export const setSelectedKey = (key, isModifier, button) => (dispatch, getState)
       }
     }
   }
+  if (selectedKeys && selectedKeys.length > 0) {
+    let graphNode = graphApi.getNode(selectedKeys[0]);
+    const {modelNode} = graphNode;
+    dispatch(loadReadmeText(modelNode.type, modelNode.namespace));
+  }
 };
 
 export const setSelectedParentKey = (key, isModifier) => (dispatch, getState) => {
@@ -136,6 +142,11 @@ export const resetSelectedKeys = () => (dispatch, getState) => {
     });
     dispatch({type: SET_SELECTED_KEY, payload: newSelectedKeys});
     dispatch(updateMarked());
+    if (newSelectedKeys && newSelectedKeys.length > 0) {
+      let graphNode = graphApi.getNode(newSelectedKeys[0]);
+      const {modelNode} = graphNode;
+      dispatch(loadReadmeText(modelNode.type, modelNode.namespace));
+    }
   }
 };
 
@@ -163,12 +174,22 @@ export const setSelectedKeys = (keys) => (dispatch, getState) => {
     });
     dispatch({type: SET_SELECTED_KEY, payload: newSelectedKeys});
     dispatch(updateMarked());
+    if (newSelectedKeys && newSelectedKeys.length > 0) {
+      let graphNode = graphApi.getNode(newSelectedKeys[0]);
+      const {modelNode} = graphNode;
+      dispatch(loadReadmeText(modelNode.type, modelNode.namespace));
+    }
   }
 };
 
 export const refreshSelectedKeys = () => (dispatch, getState) => {
   const {selectionBreadcrumbs: {selectedKeys}} = getState();
   dispatch({type: SET_SELECTED_KEY, payload: selectedKeys});
+  if (selectedKeys && selectedKeys.length > 0) {
+    let graphNode = graphApi.getNode(selectedKeys[0]);
+    const {modelNode} = graphNode;
+    dispatch(loadReadmeText(modelNode.type, modelNode.namespace));
+  }
 };
 
 export const containerActions = (dispatch) => bindActionCreators({

diff --git a/src-server/structor/controller.js b/src-server/structor/controller.js
@@ -18,6 +18,7 @@ import express from 'express';
 import rewrite from 'express-urlrewrite';
 import httpProxy from 'http-proxy';
 import { sortBy } from 'lodash';
+import marked from 'marked';
 import { config, storage, commons, gengine } from 'structor-commons';
 import * as gengineManager from '../commons/gengine';
 import * as middlewareCompilerManager from './middlewareCompilerManager.js';
@@ -153,7 +154,22 @@ export function writeComponentDefaults (options) {
 }
 
 export function getComponentNotes (options) {
-  return storage.readComponentDocument(options.componentName, options.namespace);
+  const {componentName, namespace} = options;
+  return storage.readComponentDocument(componentName, namespace)
+    .then(readmeText => {
+      let propNames = [];
+      if (readmeText && readmeText.length > 0) {
+        marked(readmeText, {
+          highlight: function (code) {
+            if (code && code.length > 0 && code.indexOf(`${componentName}.propTypes`) >= 0) {
+              const ast = commons.parse(code);
+              propNames = commons.getObjectAssignmentPropNames(ast);
+            }
+          }
+        });
+      }
+      return {readmeText, propNames};
+    });
 }
 
 export function getComponentSourceCode (options) {