🔨 Auto register base components

Author: prd-y-nguyen

.gitignore

@@ -21,3 +21,5 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+temp.js

README.md

@@ -67,7 +67,13 @@ Core folder:
 
 >Code will be put in the core folder if create a new feature, a new module doesn't make change to that code
 
+## Conventions
 
-### Customize configuration
+> Keep things clear, annotatable, highlightable by editor, be friendly with devTools
 
-See [Configuration Reference](https://cli.vuejs.org/config/).
+- Checkout [Nuxt.js](https://nuxtjs.org) for more naming convention
+- Use **PascalCase** for component name for better editor annotation and highlighting support
+- Use **camelCase** for variables and functions
+- Use `export const` instead of `export default` for auto import support
+- Use `My` for custom component prefix, for example: `MyCustomComponent`
+- Use `my-` for events prefix for better filtering in devTools, for example: `my-blog-item-click`

src/core/components/base/auth/Auth.vue

@@ -1 +1 @@
-export { default as Auth } from './Auth.vue'
+export { default } from './src/index.vue'

src/core/components/base/auth/index.js

@@ -0,0 +1,33 @@
+<script>
+import { store } from '@/store'
+import { defineComponent } from '@vue/composition-api'
+import _intersectionWith from 'lodash/intersectionWith'
+import _isEqual from 'lodash/isEqual'
+
+export default defineComponent({
+  name: 'Auth',
+  functional: true,
+  props: {
+    allow: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+  },
+  render(h, { props, slots }) {
+    // Example:
+    // store.state.auth.data.user.permissions: [1, 2, 3, 4]
+    // this.allow: [1, 3, 5, 7]
+    // _intersectionWith: [1, 3] => is allowed (has allowed permissions)
+
+    const commonPermissions = _intersectionWith(
+      props.allow,
+      store.state.auth?.data?.user?.permissions, // Modify this base on your backend
+      _isEqual
+    )
+
+    return commonPermissions?.length > 0 ? slots()?.default : null
+  },
+})
+</script>

src/core/components/base/auth/src/index.vue

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import _kebabCase from 'lodash/kebabCase'
+
+// We don't scan .vue file directly because:
+// A component can have sub-components that are not exported
+// An index.js file can decide what to export and be named
+
+const registerGlobalBaseComponents = () => {
+  // Every index.js file
+  const requireModule = require.context('./', true, /index\.js$/)
+
+  requireModule.keys().forEach((fileName) => {
+    if (fileName !== './index.js') {
+      const module = requireModule(fileName).default
+
+      // Remove "./" and "index.js"
+      const moduleName = _kebabCase(fileName.replace(/(\.\/|index.js)/g, ''))
+
+      Vue.component(moduleName, module)
+    }
+  })
+}
+
+registerGlobalBaseComponents()

src/core/components/base/index.js

@@ -21,9 +21,6 @@ export const utils = {
         case 'directives':
           Vue.directive(moduleName, module)
           break
-        case 'global-components':
-          Vue.component(moduleName, module)
-          break
         case 'functions':
           Vue.prototype[`$${moduleName}`] = module
           break

src/core/utils/index.js

@@ -23,6 +23,8 @@ import '@/core/styles/scss/main.scss'
 
 import '@/styles/custom.scss'
 
+import '@/core/components/base'
+
 Vue.mixin(globalMixin)
 
 Vue.use(clientApi)

src/main.js

@@ -1,6 +1,8 @@
 <template>
   <div class="dashboard-page">
-    <h1>This is an dashboard page</h1>
+    <auth :allow="['SEE_STUFF']">
+      <h1>This is an dashboard page</h1>
+    </auth>
   </div>
 </template>
 <script>

src/pages/dashboard/index.vue

@@ -3,6 +3,7 @@ import { getters } from './getters'
 import { mutations } from './mutations'
 import { actions } from './actions'
 export default {
+  namespaced: true,
   state,
   getters,
   mutations,