styled navigation

bin/watch.js

@@ -0,0 +1,17 @@
+const runtime = require('@babel/plugin-transform-runtime')
+const bundler = require('../src/backend/bundler/bundler')
+
+async function build() {
+  bundler({
+    name: 'AdminBro',
+    input: __dirname + '/../src/frontend/bundle-entry.jsx',
+    file: __dirname + '/../src/frontend/assets/scripts/app-bundle.js',
+    babelConfig: {
+      plugins: [runtime],
+      runtimeHelpers: true,
+      include: __dirname + '/../src/frontend/**',
+    },
+  })
+}
+
+build()

package.json

@@ -38,6 +38,8 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.4.0",
     "axios": "^0.18.0",
+    "babel-plugin-react-css-modules": "^5.2.4",
+    "classnames": "^2.2.6",
     "flat": "^4.1.0",
     "jw-paginate": "^1.0.2",
     "lodash": "^4.17.11",
@@ -55,6 +57,7 @@
     "rollup-plugin-commonjs": "^9.2.2",
     "rollup-plugin-node-resolve": "^4.0.1",
     "rollup-plugin-replace": "^2.1.1",
+    "styled-components": "^4.2.0",
     "xss": "^1.0.3"
   },
   "devDependencies": {

src/backend/bundler/app-bundler.js

@@ -1,15 +1,23 @@
 const bundler = require('./bundler')
 const runtime = require('@babel/plugin-transform-runtime')
+const fs = require('fs')
+const util = require('util')
+
+const OUTPUT_FILE = __dirname + '/../../frontend/assets/scripts/app-bundle.js'
 
 async function build() {
+  const exists = await util.promisify(fs.exists)(OUTPUT_FILE)
+  if (exists) {
+    return util.promisify(fs.readFile)(OUTPUT_FILE)
+  }
   return bundler({
     name: 'AdminBro',
     input: __dirname + '/../../frontend/bundle-entry.jsx',
     babelConfig: {
       plugins: [runtime],
       runtimeHelpers: true,
       include: __dirname + '/../../frontend/**',
-    }
+    },
   })
 }
 

src/backend/bundler/bundler.js

@@ -1,13 +1,28 @@
 const rollup = require('rollup')
 const { external, globals, plugins } = require('./config')
 
-async function build({ name, input, babelConfig = {} }) {
+async function build({ name, input, babelConfig = {}, file }) {
   const inputOptions = {
     input,
     plugins: plugins(babelConfig),
     external,
   }
 
+  if (file) {
+    const watcher = rollup.watch({
+      ...inputOptions,
+      output: {
+        format: 'iife', name, globals, file,
+      },
+    })
+    watcher.on('event', (event) => {
+      console.log(event.code)
+      if (event.code === 'ERROR') {
+        console.log(event)
+      }
+    })
+    return watcher
+  }
   const bundle = await rollup.rollup(inputOptions)
 
   const bundled = await bundle.generate({

src/backend/bundler/components-bundler.js

@@ -1,17 +1,20 @@
-const bundler = require('./bundler')
 const fs = require('fs')
 const path = require('path')
 const util = require('util')
+const bundler = require('./bundler')
 
 const tmpPath = '.adminbro'
 const entryPath = path.join(tmpPath, '.entry.js')
 
 async function build(admin) {
   const { Components } = admin.constructor
-  const entryFile = Object.keys(Components).map(c => {
-    return [`import ${c} from '${Components[c]}'`,
-            `AdminBro.Components.${c} = ${c}`].join('\n')
-  }).join('\n\n')
+  const entryFile = Object.keys(Components).map(c => (
+    [
+      `import ${c} from '${Components[c]}'`,
+      `AdminBro.Components.${c} = ${c}`
+    ].join('\n')
+  )).join('\n\n')
+
   try {
     await util.promisify(fs.mkdir)(tmpPath, { recursive: true })
   } catch (error) {

src/backend/bundler/config.js

@@ -11,14 +11,18 @@ module.exports = {
     'react-redux',
     'react-router',
     'react-router-dom',
+    'styled-components',
     'prop-types',
     'admin-bro',
     'axios',
+    'bloomer',
   ],
   globals: {
     react: 'React',
     redux: 'Redux',
     axios: 'axios',
+    bloomer: 'Bloomer',
+    'styled-components': 'styled',
     'react-dom': 'ReactDOM',
     'prop-types': 'PropTypes',
     'react-redux': 'ReactRedux',

src/backend/decorators/property-decorator.js

@@ -185,9 +185,9 @@ class PropertyDecorator {
    */
   isId() {
     if (typeof this.options.isId === 'undefined') {
-      return this._property.isId()
+      return !!this._property.isId()
     }
-    return this.options.isId
+    return !!this.options.isId
   }
 
   /**