Predictable stores and remove file extensions

Author: asvae

README.md

@@ -48,7 +48,8 @@ const router = new Router({
   routes: [
     createRoute({
       requireContext: require.context('./..', true, /.demo.vue$/), 
-      path: '/demo'
+      path: '/demo',
+      hideFileExtensions: true, // optional, hides file extensions in list.
     }),
   ]
 })
@@ -73,7 +74,7 @@ if (process.env.NODE_ENV !== 'production') {
     children: [
       createRoute({
         requireContext: require.context('./..', true, /.demo.vue$/), 
-        path: '/demo'
+        path: '/demo',
       }),
     ],
   })

demo/routes.js

@@ -10,10 +10,12 @@ const router = new Router({
     createRoute({
       requireContext: require.context('./tree', true, /.vue$/),
       path: '/demo',
+      hideFileExtensions: true,
     }),
     createRoute({
       requireContext: require.context('./../src', true, /.demo.vue$/),
       path: '/src',
+      hideFileExtensions: true,
     }),
   ],
 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-book",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Tree view for your demo components",
   "main": "index.js",
   "private": false,

src/app.ts

@@ -1,18 +1,19 @@
 import VueBookRouteFactory from './classes/Main/VueBookRouteFactory'
 import './scss/app.scss'
 import './font-awesome-config'
-import { VueBookConfig } from '@/classes/Main/VueBookConfig'
+import { VueBookConfig } from './classes/Main/VueBookConfig'
 
 export function createRoute (options: Partial<VueBookConfig>) {
   const config = new VueBookConfig(options)
 
   return VueBookRouteFactory.create(config)
 }
 
-/** @deprecated use VueBook.createRoute instead */
+/** @deprecated use createRoute instead */
 export default function (requireContext: any, path: string | RegExp) {
   return createRoute(new VueBookConfig({
     requireContext,
     path,
+    hideFileExtensions: true,
   }))
 }

src/classes/Factory/DemoFolderFactory.ts

@@ -1,4 +1,4 @@
-import DemoFolder from '../Main/DemoFolder'
+import { DemoFolder } from '../Main/DemoFolder'
 import DemoFileFactory from './DemoFileFactory'
 
 export default class DemoFolderFactory {

src/classes/Main/DemoFile.ts

@@ -1,4 +1,4 @@
-import DemoFolder from './DemoFolder'
+import { DemoFolder } from './DemoFolder'
 
 export default class DemoFile {
   path: string = ''
@@ -18,6 +18,10 @@ export default class DemoFile {
     return this.path.split('/').pop() || ''
   }
 
+  getFilenameWithoutExtension(): string {
+    return this.getFilename().split('.')[0]
+  }
+
   getParentFolderPath (): string {
     return this.path.split('/').slice(0, -1).join('/')
   }

src/classes/Main/DemoFolder.ts

@@ -1,7 +1,8 @@
 import DemoFile from './DemoFile'
 import DemoFolderMapper from '../Mapper/DemoFolderMapper'
+import DemoFileCollection from '@/classes/Main/DemoFileCollection'
 
-export default class DemoFolder {
+export class DemoFolder {
   name: string = ''
   isOpen: boolean = false
   folders: DemoFolder[] = []
@@ -12,6 +13,24 @@ export default class DemoFolder {
     Object.assign(this, data)
   }
 
+  static createFromDemoFileCollection (demoFileCollection: DemoFileCollection) {
+    const folderTemporary = new DemoFolder()
+
+    // Add all files to temporary folder.
+    const files = demoFileCollection.demoFiles
+    files.forEach((node: any) => folderTemporary.addDemoFile(node))
+
+    const rootFolder = folderTemporary.folders[0]
+    console.log('rootFolder', rootFolder)
+
+    // Bind nodes to folders.
+    rootFolder.fillParents()
+    // Open topmost folder for convenience.
+    rootFolder.open()
+
+    return rootFolder
+  }
+
   addFile (node: DemoFile, relativePath: string): void {
     if (relativePath) {
       const folderNameArray = relativePath.split('/')

src/classes/Main/VueBookConfig.ts

@@ -1,9 +1,15 @@
 export class VueBookConfig {
   requireContext: any
-  path: string | RegExp
+  path!: string | RegExp
   hideFileExtensions: boolean = false
 
   constructor (data: Partial<VueBookConfig> = {}) {
+    if (!data.requireContext) {
+      throw(`'requireContext' is not defined on VueBookConfig`)
+    }
+    if (!data.path) {
+      throw(`'path' is not defined on VueBookConfig`)
+    }
     Object.assign(this, data)
   }
 }

src/classes/Main/VueBookRouteFactory.ts

@@ -3,7 +3,8 @@ import DemoFile from './DemoFile'
 import VueBookDemoPage from '../../components/DemoPage/VueBookDemoPage.vue'
 import DemoFileCollection from './DemoFileCollection'
 import { RouteConfig } from 'vue-router'
-import { VueBookConfig } from '@/classes/Main/VueBookConfig'
+import { VueBookConfig } from './VueBookConfig'
+import { DemoFolder } from './DemoFolder'
 
 /**
  * Creates route for vue-router with all necessary boilerplate.
@@ -13,7 +14,7 @@ export default class VueBookRouteFactory {
     const requireContext = vueBookConfig.requireContext
     const path = vueBookConfig.path
 
-    const demoFilesCollection = new DemoFileCollection({
+    const demoFileCollection = new DemoFileCollection({
       demoFiles: requireContext.keys().map((key: string) => {
         return new DemoFile({
           path: path + key.substr(1),
@@ -26,9 +27,11 @@ export default class VueBookRouteFactory {
       path: path + '*',
       component: VueBookDemoPage,
       meta: {
-        demoFilesCollection,
+        demoFolder: DemoFolder.createFromDemoFileCollection(demoFileCollection),
+        demoFileCollection,
         hideFileExtensions: vueBookConfig.hideFileExtensions,
       },
     }
   }
+
 }

src/classes/Mapper/DemoFolderMapper.ts

@@ -1,4 +1,4 @@
-import DemoFolder from '../Main/DemoFolder'
+import { DemoFolder } from '../Main/DemoFolder'
 import DemoFileMapper from './DemoFileMapper'
 
 export default class DemoFolderMapper {