Adding configuration to filter route in dev

Author: David-Desmaisons

.env

@@ -0,0 +1,2 @@
+VUE_APP_SHOW_ALL_EXAMPLES=false
+VUE_APP_FILTER_ROUTE=

.env.development

@@ -1 +1,2 @@
 VUE_APP_SHOW_ALL_EXAMPLES=false
+VUE_APP_FILTER_ROUTE=

.env.local

@@ -10,3 +10,5 @@ test/tmp
 /examples/src
 /examples/libs/
 /coverage
+
+.env.local

.gitignore

@@ -152,8 +152,8 @@ export default {
   name: "app",
   components,
   data() {
-    const componentList = Object.keys(components)
-      .map(key => components[key])
+    const componentList = Object.values(components)
+      .filter(component => component.show)
       .sort((a, b) => a.order - b.order);
     return {
       componentList

example/App.vue

@@ -28,7 +28,6 @@
             <button class="btn btn-secondary" @click="replace">Replace</button>
           </div>
         </template>
-
       </draggable>
     </div>
 
@@ -44,26 +43,26 @@ export default {
   display: "Header slot",
   order: 13,
   components: {
-    draggable,
+    draggable
   },
   data() {
     return {
       list: [
         { name: "John 1", id: 0 },
         { name: "Joao 2", id: 1 },
-        { name: "Jean 3", id: 2 },
+        { name: "Jean 3", id: 2 }
       ],
-      dragging: false,
+      dragging: false
     };
   },
   methods: {
-    add: function () {
+    add: function() {
       this.list.push({ name: "Juan " + id, id: id++ });
     },
-    replace: function () {
+    replace: function() {
       this.list = [{ name: "Edgard", id: id++ }];
-    },
-  },
+    }
+  }
 };
 </script>
 <style scoped></style>

example/components/headerslot.vue

@@ -1,6 +1,6 @@
 import { createApp } from "vue";
 import App from "./App.vue";
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory } from "vue-router";
 
 import routes from "./route";
 import rawDisplayer from "./components/infra/raw-displayer";
@@ -19,4 +19,4 @@ const app = createApp(App);
 app.use(store);
 app.use(router);
 app.component("rawDisplayer", rawDisplayer);
-router.isReady().then(() => app.mount('#app'));
+router.isReady().then(() => app.mount("#app"));

example/main.js

@@ -1,27 +1,63 @@
 function getRouteFromDirectory(ctx) {
   return ctx.keys().map(key => ({
     path: key.substring(1).replace(".vue", ""),
-    component: ctx(key).default,
+    component: ctx(key).default
   }));
 }
 
-const showAll = process.env.VUE_APP_SHOW_ALL_EXAMPLES === "true";
-window.console.log(process.env.VUE_APP_SHOW_ALL_EXAMPLES);
+const showDebug = process.env.VUE_APP_SHOW_ALL_EXAMPLES === "true";
+window.console.log(showDebug);
+
+function getRouteFilterFromConfiguration(configuration) {
+  const routeFromConfiguration = configuration
+    .split(",")
+    .filter(value => value !== "");
+  if (routeFromConfiguration == []) {
+    return () => true;
+  }
+
+  window.console.log(
+    `Using route filter VUE_APP_FILTER_ROUTE: "${configuration}"`
+  );
+  return name => routeFromConfiguration.includes(name);
+}
+
+const filterRoute = getRouteFilterFromConfiguration(
+  process.env.VUE_APP_FILTER_ROUTE
+);
 
 const routes = [
   ...getRouteFromDirectory(require.context("./components/", false, /\.vue$/)),
-  ...(!showAll
+  ...(!showDebug
     ? []
     : getRouteFromDirectory(
         require.context("./debug-components/", false, /\.vue$/)
-      )),
-  {
-    path: "/",
-    redirect: "/simple",
-  },
+      ))
 ];
+routes.forEach(
+  route => (route.component.show = filterRoute(route.component.display))
+);
 
-window.console.log(routes);
+const filteredRoutes = routes.filter(route => route.component.show);
 
+if (filteredRoutes.length === 0) {
+  throw new Error(
+    `No routes to match "${
+      process.env.VUE_APP_FILTER_ROUTE
+    }". Available route: ${routes
+      .map(route => `"${route.component.display}"`)
+      .join(", ")} .Please check env variable: VUE_APP_FILTER_ROUTE`
+  );
+}
+
+const redirect = filteredRoutes.some(r => r.path === "/simple")
+  ? "/simple"
+  : filteredRoutes[0].path;
+
+const allRoutes = [
+  ...filteredRoutes,
+  { path: "/", redirect },
+  { path: "/:pathMatch(.*)*", redirect }
+];
 
-export default routes;
+export default allRoutes;

example/route.js

@@ -4,8 +4,8 @@ import { createStore } from "vuex";
 const store = createStore({
   namespaced: true,
   modules: {
-    nested,
-  },
+    nested
+  }
 });
 
 export default store;

example/store.js

@@ -115,7 +115,7 @@ const tags = [
   "ul",
   "var",
   "video",
-  "wbr",
+  "wbr"
 ];
 
 function isHtmlTag(name) {