improve sidebar api and expose to sdk

app/CodingSDK.js

@@ -4,6 +4,7 @@ import { bindActionCreators } from 'redux'
 import config from './config'
 import * as Modal from './components/Modal/actions'
 import { notify, NOTIFY_TYPE } from './components/Notification/actions'
+import { addComToSideBar } from './components/Panel/actions'
 
 export default class {
   // app data
@@ -27,6 +28,12 @@ export default class {
       request,
     })
   }
+
+  get injectComponent () {
+    return ({
+      addComToSideBar
+    })
+  }
   get config () {
     return config
   }

app/backendAPI/packageAPI.js

@@ -3,12 +3,12 @@ import axios from 'axios'
 import config from '../config'
 import store from '../store'
 import { fetchPackage } from '../components/Package/actions'
-const { packageServer } = config
+const { packageServer, packageDev } = config
 
 const io = require('socket.io-client/dist/socket.io.min.js')
 
 export const fetchPackageList = () => {
-  if (__DEV__) {
+  if (packageDev) {
     return request.get(`${packageServer}/packages/`)
   }
   if (config.isPlatform) {

app/components/Package/actions.js

@@ -27,11 +27,11 @@ export const togglePackage = createAction(PACKAGE_TOGGLE, (pkgId, shouldEnable)
     try {
       eval(script) // <- from inside package, `codingPackageJsonp()` is called to export module
       const plugin = window.codingPackageJsonp.data // <- then it's access from `codingPackageJsonp.data`
-      const { Manager = '' } = plugin
+      const { Manager = (() => null) } = plugin
       const manager = new Manager()
+      window.extensions[pkgId] = plugin
       manager.pluginWillMount()
       plugin.manager = manager
-      window.extensions[pkgId] = plugin
     } catch (err) {
       throw err
     }
@@ -52,7 +52,6 @@ export const fetchPackage = (pkgId, pkgVersion, others) => (dispatch) => {
 
   if (window.extensions[pkgId]) dispatch(togglePackage(pkgId, false))
   Promise.all([pkgInfo, pkgScript]).then(([pkg, id]) => {
-    console.log('pkg', pkg)
     dispatch(updateLocalPackage({
       ...pkg,
       ...others,

app/components/Panel/SidePanel.jsx

@@ -1,14 +1,17 @@
 import React, { Component, PropTypes } from 'react'
 import { inject } from 'mobx-react'
+import _ from 'lodash'
+
 import {
   registerSidePanelView
 } from './actions'
 import PanelState from './state'
 
+
 @inject((__, { side }) => {
-  let { activeViewId } = PanelState.sidePanelViews[side]
+  let { activeViewId, views } = PanelState.sidePanelViews[side]
   if (!activeViewId) activeViewId = ''
-  return { activeViewId }
+  return { activeViewId, views }
 })
 class SidePanelContainer extends Component {
   constructor (props) {
@@ -35,10 +38,14 @@ class SidePanelContainer extends Component {
   }
 
   render () {
+    const { views = [] } = this.props
     const children = this.getChildren()
-    const activeViewIndex = Number(this.props.activeViewId.split('_')[1])
+    const activeViewIndex = Number(this.props.activeViewId.split('_')[1]) || 0
+    const viewsMapping = views
+    // .filter(view => _.isObject(view))
+    const childrenWithView = children.concat(viewsMapping);
     return (<div style={{ height: '100%' }}>
-      {children.map((child, idx) =>
+      {childrenWithView.map((child, idx) =>
         <SidePanelViewContent key={idx}
           view={child}
           isActive={activeViewIndex ? activeViewIndex === idx : idx === 0}
@@ -48,7 +55,10 @@ class SidePanelContainer extends Component {
   }
 }
 
-const SidePanelViewContent = ({ isActive, view }) => <div style={{ height: '100%', display: isActive ? 'block' : 'none' }}>{view}</div>
+const SidePanelViewContent = ({ isActive, view }) =>
+<div style={{ height: '100%', display: isActive ? 'block' : 'none' }}>
+  {view}
+</div>
 
 class SidePanelView extends Component {
   constructor (props) {

app/components/Panel/actions.js

@@ -1,8 +1,11 @@
 // import { createAction } from 'redux-actions'
 import { createAction, registerAction } from 'utils/actions'
 import { emitter, E } from 'utils'
+import _ from 'lodash'
+import update from '../../utils/immutableUpdate'
 import state from './state'
 
+
 export const PANEL_CONFIRM_RESIZE = 'PANEL_CONFIRM_RESIZE'
 export const confirmResize = registerAction(PANEL_CONFIRM_RESIZE,
   (leftViewId, leftSize, rightViewId, rightSize) => ({
@@ -27,23 +30,75 @@ export const togglePanelLayout = registerAction(PANEL_TOGGLE_LAYOUT,
   }
 )
 
+
+/* shape of label
+label = {
+  text: String,
+  icon: String,
+  viewId: String,
+  key: String, // plugin unique key
+  onSidebarActive: func,
+  onSidebarDeactive: func
+}
+*/
 export const PANEL_REGISTER_VIEW = 'PANEL_REGISTER_VIEW'
+// 根据viewid去重，防止相同viewid的汇聚
+update.extend('$mergeByViewId', (array, original) => {
+  const isArray = _.isArray(array) ? array : [array]
+  if (!original) return isArray
+  return _(original)
+  .keyBy('viewId')
+  .merge(_.keyBy(isArray, 'viewId'))
+  .values()
+  .value()
+})
 export const registerSidePanelView = registerAction(PANEL_REGISTER_VIEW,
-  ({ side, labels, activeViewId }) => {
-    state.sidePanelViews[side] = { labels, activeViewId }
+  ({ side, labels, activeViewId, views }) => {
+    state.sidePanelViews[side] = update(state.sidePanelViews[side], {
+      labels: { $mergeByViewId: labels },
+      activeViewId: { $set: activeViewId },
+      views: { $concat: views },
+    })
   }
 )
 
+export const addComToSideBar = (side, label, getComponent) => {
+  const current = state.sidePanelViews[side]
+  const currentMaxIndex = current.labels && (current.labels.length ? current.labels.length : 0)
+  // 如有相同key，则viewid不变，key 为插件唯一变识
+  const dupLabel = (current.labels && current.labels.find(currentLabel => currentLabel.key && currentLabel.key === label.key)) || {}
+  const dupLabelIndex = dupLabel.viewId && dupLabel.viewId.split('_')[1]
+  const viewId = `${side}_${dupLabelIndex || currentMaxIndex}`
+  const labelWithViewid = { ...label, viewId }
+  const component = label.key && window.extensions[label.key] && getComponent(window.extensions[label.key])
+  return registerSidePanelView({
+    side,
+    labels: [labelWithViewid],
+    views: [component]
+  })
+}
+
+
 const _toggleSidePanelView = (viewId, shouldShow) => {
   emitter.emit(E.PANEL_RESIZED)
   const side = viewId.split('_')[0]
   const activeViewId = state.sidePanelViews[side].activeViewId
+  const labels = state.sidePanelViews[side].labels
+  const currentLabel = labels.find(label => label.viewId === viewId)
 
   if (shouldShow === undefined) {
-    if (activeViewId === viewId) viewId = ''
+    if (activeViewId === viewId) {
+      viewId = ''
+      if (currentLabel && currentLabel.onSidebarDeactive) {
+        currentLabel.onSidebarDeactive()
+      }
+    } else if (currentLabel && currentLabel.onSidebarActive) {
+      currentLabel.onSidebarActive()
+    }
     shouldShow = Boolean(viewId)
   }
 
+
   const targetPanel = state.panels.get(`PANEL_${side.toUpperCase()}`)
   targetPanel.hide = !shouldShow
   state.sidePanelViews[side].activeViewId = viewId

app/config.js

@@ -1,11 +1,12 @@
-import getCookie from './utils/getCookie'
 import { observable } from 'mobx'
+import getCookie from './utils/getCookie'
 
 const config = observable({
   projectName: '',
   spaceKey: '',
   requiredExtensions: [],
   baseURL: getCookie('BACKEND_URL') || __BACKEND_URL__ || window.location.origin,
+  packageDev: getCookie('PACKAGE_DEV') || __PACKAGE_DEV__,
   packageServer: getCookie('PACKAGE_SERVER') || __PACKAGE_SERVER__ || window.location.origin,
   wsURL: getCookie('WS_URL') || __WS_URL__ || __BACKEND_URL__ || window.location.origin,
   runMode: __RUN_MODE__,

app/initialize.js

@@ -123,7 +123,7 @@ async function initialize () {
   })
 
 
-  if (__DEV__ && __PACKAGE_SERVER__) {
+  if (config.packageDev) {
     await step('[6] enable package server hotreload', () => {
       api.enablePackageHotReload()
       return true

app/utils/immutableUpdate.js

@@ -1,6 +1,7 @@
 import update from 'immutability-helper'
 import _ from 'lodash'
 
+// global update extends
 const removeValue = (valueToRemove, original) => {
   if (_.isArray(original)) {
     return _.without(original, valueToRemove)
@@ -29,6 +30,13 @@ const removeKey = (keysToRemove, original) => {
 update.extend('$removeKey', removeKey)
 update.extend('$delete', removeKey)
 
+update.extend('$concat', (array, original) => {
+  const isArray = _.isArray(array) ? array : [array]
+  if (!original) return isArray
+  return original.concat(isArray)
+})
+
+
 update.extend('$map', (fn, original) => {
   if (_.isArray(original)) return _.map(original, fn)
   if (_.isObject(original)) return _.mapValues(original, fn)

webpack_configs/webpack.dev.config.js

@@ -22,14 +22,15 @@ const config = merge(
   commonConfig({ staticDir: '' }),
   { devtool: 'eval' },
   { plugins: [
-      new webpack.DefinePlugin({
-        __DEV__: true,
-        __RUN_MODE__: str(process.env.RUN_MODE || ''),
-        __BACKEND_URL__: str(process.env.BACKEND_URL || ''),
-        __WS_URL__: str(process.env.WS_URL || ''),
-        __PACKAGE_SERVER__: str(process.env.PACKAGE_SERVER || process.env.HTML_BASE_URL || ''),
-      }),
-    ]
+    new webpack.DefinePlugin({
+      __DEV__: true,
+      __RUN_MODE__: str(process.env.RUN_MODE || ''),
+      __BACKEND_URL__: str(process.env.BACKEND_URL || ''),
+      __WS_URL__: str(process.env.WS_URL || ''),
+      __PACKAGE_DEV__: process.env.PACKAGE_DEV,
+      __PACKAGE_SERVER__: str(process.env.PACKAGE_SERVER || process.env.HTML_BASE_URL || ''),
+    }),
+  ]
   },
   devServer({ port: 8060 }),
   stylesheet()

webpack_configs/webpack.prod.config.js

@@ -20,6 +20,7 @@ module.exports = merge(
         __RUN_MODE__: str(process.env.RUN_MODE || ''),
         __BACKEND_URL__: str(process.env.BACKEND_URL || ''),
         __WS_URL__: str(process.env.WS_URL || ''),
+        __PACKAGE_DEV__: false,
         __PACKAGE_SERVER__: str(process.env.PACKAGE_SERVER || process.env.HTML_BASE_URL || ''),
       }),
     ]