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 {

src/components/DemoPage/VueBookDemoPage.vue

@@ -33,7 +33,7 @@
 
         <tree-demo-file-list
           v-if="config.mode === DemoPageMode.Tree"
-          :folder="tree"
+          :folder="demoFolder"
           :listCursor="listCursor"
         />
       </div>
@@ -55,11 +55,11 @@ import { configStoreInstance } from '../../store/configStore'
 import BookComponentListFolder from '../FileTree/BookComponentListFolder.vue'
 import BookComponentListItem from '../FileTree/BookComponentListItem.vue'
 
-import DemoFolder from '../../classes/Main/DemoFolder'
+import { DemoFolder } from '../../classes/Main/DemoFolder'
 import DemoFile from '../../classes/Main/DemoFile'
 import SearchableDemoFileList from '../FileTree/SearchableDemoFileList.vue'
 import VueBookResizeLine from '../Service/VueBookResizeLine.vue'
-import { DemoPageMode } from './DemoPageConfig'
+import DemoPageConfig, { DemoPageMode } from './DemoPageConfig'
 import VueBookMenu from './VueBookMenu.vue'
 
 import VueBookInput from './ComInput/VueBookInput.vue'
@@ -69,7 +69,6 @@ import DemoFileCollection from '../../classes/Main/DemoFileCollection'
 
 let lastUpdateTimestamp = 0
 
-
 export default {
   components: {
     TreeDemoFileList,
@@ -82,36 +81,30 @@ export default {
   },
   data () {
     return {
+      demoFolder: null,
       listCursor: new ListCursor(),
       configStoreInstance: configStoreInstance,
-      tree: null,
       foldersStoreInstance: foldersStoreInstance,
     }
   },
   watch: {
     'config': {
-      handler (value: DemoFolder, oldValue: DemoFolder) {
-        if (value !== oldValue) {
-          // Updated from local storage.
-          return
-        }
+      handler (value: DemoPageConfig) {
         const update = () => {
           if (lastUpdateTimestamp < Math.floor(Date.now()) - 200) {
-            this.configStoreInstance.setConfig(value)
+            configStoreInstance.config = value
+            configStoreInstance.save()
             lastUpdateTimestamp = Math.floor(Date.now())
           }
-        }
+         }
         update()
       },
       deep: true,
     },
-    'tree': {
-      handler (value: DemoFolder, oldValue: DemoFolder) {
-        if (value !== oldValue) {
-          // Updated from local storage.
-          return
-        }
+    'demoFolder': {
+      handler (value: DemoFolder) {
         foldersStoreInstance.openFolders = value.getOpenFolders()
+        foldersStoreInstance.save()
       },
       deep: true,
     },
@@ -141,16 +134,16 @@ export default {
     },
 
     files () {
-      return this.demoFilesCollection.demoFiles
+      return this.demoFileCollection.demoFiles
     },
 
-    demoFilesCollection (): DemoFileCollection {
-      const demoFilesCollection = this.$route.meta.demoFilesCollection
-      if (!(demoFilesCollection instanceof DemoFileCollection)) {
-        throw new Error('No DemoFileCollection found for current route')
+    demoFileCollection (): DemoFileCollection {
+      const demoFileCollection = this.$route.meta.demoFileCollection
+      if (!(demoFileCollection instanceof DemoFileCollection)) {
+        throw new Error('No demoFileCollection found for current route')
       }
 
-      return demoFilesCollection
+      return demoFileCollection
     },
     filteredFiles (): DemoFile[] {
       if (!this.config.searchText) {
@@ -160,6 +153,14 @@ export default {
     },
   },
   methods: {
+    getDemoFolder (): DemoFolder {
+      const demoFolder = this.$route.meta.demoFolder
+      if (!(demoFolder instanceof DemoFolder)) {
+        throw new Error('No demoFolder found for current route')
+      }
+
+      return demoFolder
+    },
     fileSelected (file: DemoFile): boolean {
       const path = file.path.toUpperCase()
       const text = this.config.searchText.toUpperCase()
@@ -170,15 +171,6 @@ export default {
       const upperCaseLetters = file.getFilename().replace(/[a-z.]/g, '')
       return upperCaseLetters.includes(this.config.searchText)
     },
-
-    renderTree (): DemoFolder {
-      const tree = new DemoFolder()
-
-      const files = this.demoFilesCollection.demoFiles
-      files.forEach((node: any) => tree.addDemoFile(node))
-      return tree.folders[0]
-    },
-
     moveCursor (delta: number) {
       const files = this.filteredFiles
 
@@ -203,7 +195,6 @@ export default {
       }
       this.listCursor.preSelectedItem = files[nextFileIndex]
     },
-
     selectFileUnderCursor () {
       const fileUnderCursor = this.listCursor.preSelectedItem
 
@@ -221,12 +212,12 @@ export default {
     const input = this.$refs.searchInput
     input && input.$el.focus()
   },
-
   created () {
-    this.tree = this.renderTree()
-    this.tree.fillParents()
-    this.tree.open()
-    this.tree.mergeWithFolders(foldersStoreInstance.openFolders)
+    foldersStoreInstance.load()
+    configStoreInstance.load()
+    const demoFolder = this.getDemoFolder()
+    demoFolder.mergeWithFolders(foldersStoreInstance.openFolders)
+    this.demoFolder = demoFolder
   },
 }
 </script>

src/components/FileTree/BookComponentListFolder.demo.vue

@@ -26,7 +26,7 @@
 <script>
 import BookComponentListFolder from './BookComponentListFolder.vue'
 import DemoNode from '../../classes/Main/DemoFile'
-import DemoFolder from '../../classes/Main/DemoFolder'
+import { DemoFolder } from '../../classes/Main/DemoFolder'
 import DemoFolderFactory from '../../classes/Factory/DemoFolderFactory'
 
 export default {

src/components/FileTree/BookComponentListFolder.vue

@@ -42,7 +42,7 @@
 <script lang="ts">
 import vmFile from './BookComponentListItem.vue'
 
-import DemoFolder from '../../classes/Main/DemoFolder'
+import { DemoFolder } from '../../classes/Main/DemoFolder'
 import { ObjectHelpers } from 'asva-helpers'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import {
@@ -58,7 +58,6 @@ export default {
     FontAwesomeIcon,
     vmFile,
   },
-  inject: ['foldersStoreInstance'],
   props: {
     folder: {
       type: DemoFolder,

src/components/FileTree/BookComponentListItem.vue

@@ -5,10 +5,13 @@
     :class="isActive && 'book-component-list-item--active'"
     :to="file.path"
   >
-    <font-awesome-icon class="book-component-list-item__icon"
-                       :icon="faFile"/>
-    <span class="book-component-list-item__file-name">{{ file.getFilename()
-            }}</span>
+    <font-awesome-icon
+      class="book-component-list-item__icon"
+      :icon="faFile"
+    />
+    <span class="book-component-list-item__file-name">
+      {{ name }}
+    </span>
   </router-link>
 </template>
 
@@ -28,6 +31,12 @@ export default {
     },
   },
   computed: {
+    name () {
+      if (this.$route.meta.hideFileExtensions) {
+        return this.file.getFilenameWithoutExtension()
+      }
+      return this.file.getFilename()
+    },
     faFile () {
       return faFile
     },