frontend: refactor

6 files changed, 214 insertions, 214 deletions

diff --git a/frontend/gulpfile.js b/frontend/gulpfile.js
index faf6a45..1207d36 100644
--- a/frontend/gulpfile.js
+++ b/frontend/gulpfile.js
@@ -42,7 +42,7 @@ gulp.task("webpack-build", () => {
   config.plugins.unshift(new webpack.DefinePlugin({ "process.env": { NODE_ENV: '"production"' } }));
   config.plugins.unshift(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));
   gulp
-    .src("./src/app.js")
+    .src("./src/bootstrap.js")
     .pipe(gwebpack(config, webpack))
     .pipe(gulp.dest("./dest/assets"));
 });
diff --git a/frontend/src/app.js b/frontend/src/app.js
index 5c9a428..caf09f5 100644
--- a/frontend/src/app.js
+++ b/frontend/src/app.js
@@ -1,167 +1,44 @@
-require("es6-promise").polyfill();
-
-import Vue from "vue";
-import VueRouter from "vue-router";
-
-import storage from "storage";
-import aclog from "aclog";
-
-import App from "./components/app.vue";
-import AboutIndexPage from "./components/about/index.vue";
-import AboutStatusPage from "./components/about/status.vue";
-import TweetsPage from "./components/tweets/default.vue";
-import TweetDetailPage from "./components/tweets/show.vue";
-import UsersStatsPage from "./components/users/stats.vue";
-import SessionsLoginPage from "./components/sessions/login.vue";
-import SessionsCallbackPage from "./components/sessions/callback.vue";
-import ApidocsIndex from "./components/apidocs/index.vue";
-import ApidocsEndpoint from "./components/apidocs/endpoint.vue";
-import SettingsPage from "./components/settings/index.vue";
-import OptoutPage from "./components/optout/index.vue";
-import OptoutCallbackPage from "./components/optout/callback.vue";
-import NotFoundPage from "./components/errors/not_found.vue";
-
-Vue.config.debug = true;
-
-Vue.use(VueRouter);
-
-Vue.mixin({
-  methods: {
-    placeholderImage(e) {
-      e.preventDefault();
-      e.target.src = "/assets/profile_image_missing.png";
-    }
-  }
-});
-Vue.component("tweet", require("./components/tweet.vue"));
-Vue.partial("loading-box", '<div class="loading-box"><img class="loading-image" src="/assets/loading.gif" /></div>');
-Vue.partial("profile-image", '<a v-link="\'/\' + user.screen_name" title="{{user.name}} (@{{user.screen_name}})"><img alt="@{{user.screen_name}}" class="twitter-icon" v-bind:src="user.profile_image_url" v-on:error="placeholderImage" /></a>');
-Vue.component("profile-image", Vue.extend({ props: ["user"], template: '<partial name="profile-image"></partial>' }));
-
-export const router = new VueRouter({
-  history: true,
-  saveScrollPosition: true,
-  linkActiveClass: "active"
-});
-
-router.map({
-  "/": {
-    component: AboutIndexPage,
-  },
-  "/about/status": {
-    component: AboutStatusPage,
-  },
-  "/about/api": {
-      component: ApidocsIndex
-  },
-  "/about/api/:method/*path": {
-      component: ApidocsEndpoint
-  },
-  "/i/login": {
-    name: "login",
-    component: SessionsLoginPage,
-  },
-  "/i/callback": {
-    name: "login_callback",
-    component: SessionsCallbackPage,
-  },
-  "/i/optout": {
-    name: "optout",
-    component: OptoutPage,
-  },
-  "/i/optout/callback": {
-    name: "optout_callback",
-    component: OptoutCallbackPage,
-  },
-  "/i/public/filter": {
-    name: "public-filter",
-    component: TweetsPage,
-    title: "Public Timeline",
-    api: "tweets/filter",
-    filtering: "query",
-  },
-  "/i/public/best": {
-    name: "public-best-top",
-    component: TweetsPage,
-    title: "Top Tweets",
-    api: "tweets/all_best",
-    filtering: "time",
-    subRoutes: {
-      ":recent": { name: "public-best", component: Vue.extend() }
-    }
-  },
-  "/i/public/timeline": {
-    name: "public-timeline-top",
-    component: TweetsPage,
-    title: "Public Timeline",
-    api: "tweets/all_timeline",
-    filtering: "reactions",
-    subRoutes: {
-      ":reactions": { name: "public-timeline", component: Vue.extend() }
-    }
-  },
-  "/i/:id": {
-    name: "tweet",
-    component: TweetDetailPage,
-  },
-  "/settings": {
-    name: "settings",
-    component: SettingsPage,
-  },
-  "/:screen_name": {
-    name: "user-best-top",
-    component: TweetsPage,
-    title: "@:screen_name's Best Tweets",
-    api: "tweets/user_best",
-    filtering: "time",
-    subRoutes: {
-      "best/:recent": { name: "user-best", component: Vue.extend() }
+import Utils from "utils";
+import Navbar from "components/navbar.vue";
+
+export default {
+  replace: false,
+  components: { "navbar": Navbar },
+  data() {
+    return {
+      flash: null,
+      flashNext: null,
+      title: "aclog",
+    };
+  },
+  watch: {
+    "$route"(n, o) { // ページ遷移？
+      this.flash = null;
+      if (this.flashNext) {
+        this.flash = this.flashNext;
+        this.flashNext = null;
+      }
     }
   },
-  "/:screen_name/timeline": {
-    name: "user-timeline-top",
-    component: TweetsPage,
-    title: "@:screen_name's Timeline",
-    api: "tweets/user_timeline",
-    filtering: "reactions",
-    subRoutes: {
-      ":reactions": { name: "user-timeline", component: Vue.extend() }
-    }
-  },
-  "/:screen_name/favorites": {
-    name: "user-favorites-top",
-    component: TweetsPage,
-    title: "@:screen_name's Likes",
-    api: "tweets/user_favorites",
-    filtering: "reactions",
-    subRoutes: {
-      ":reactions": { name: "user-favorites", component: Vue.extend() }
-    }
-  },
-  "/:screen_name/favorited_by/:source_screen_name": {
-    name: "user-favorited-by-top",
-    component: TweetsPage,
-    title: "@:screen_name's Tweets favorited by @:source_screen_name",
-    api: "tweets/user_favorited_by",
-    filtering: "reactions",
-    subRoutes: {
-      ":reactions": { name: "user-favorited-by", component: Vue.extend() }
-    }
-  },
-  "/:screen_name/stats": {
-    name: "user-stats",
-    component: UsersStatsPage,
-  },
-  "*": {
-    component: NotFoundPage,
-  },
-});
-
-router.redirect({
-  "/i/timeline": "/i/public/timeline",
-  "/i/best": "/i/public/best",
-  "/i/filter": "/i/public/filter",
-});
-
-aclog.sessions.verify();
-router.start(App, "html");
+  methods: {
+    updateTitle(str) {
+      var newStr;
+      if (str && str !== "") {
+        newStr = str + " - aclog";
+      } else {
+        newStr = "aclog";
+      }
+      document.title = newStr;
+      this.title = newStr;
+    },
+    setFlash(obj) {
+      this.flash = Utils.stringifyMessage(obj);
+    },
+    setFlashNext(obj) {
+      this.flashNext = Utils.stringifyMessage(obj);
+    },
+  },
+  attached() {
+    document.querySelector("#app").style.display = "block";
+  }
+};
diff --git a/frontend/src/bootstrap.js b/frontend/src/bootstrap.js
new file mode 100644
index 0000000..cb569fa
--- /dev/null
+++ b/frontend/src/bootstrap.js
@@ -0,0 +1,29 @@
+require("es6-promise").polyfill();
+
+import aclog from "aclog";
+import Vue from "vue";
+import VueRouter from "vue-router";
+import App from "./app";
+import RouterConfig from "./router_config";
+
+if (process.env.NODE_ENV !== "production") Vue.config.debug = true;
+Vue.use(VueRouter);
+Vue.mixin({
+  methods: {
+    placeholderImage(e) {
+      e.preventDefault();
+      e.target.src = "/assets/profile_image_missing.png";
+    }
+  }
+});
+Vue.component("tweet", require("./components/tweet.vue"));
+Vue.partial("loading-box", '<div class="loading-box"><img class="loading-image" src="/assets/loading.gif" /></div>');
+Vue.partial("profile-image", '<a v-link="\'/\' + user.screen_name" title="{{user.name}} (@{{user.screen_name}})"><img alt="@{{user.screen_name}}" class="twitter-icon" v-bind:src="user.profile_image_url" v-on:error="placeholderImage" /></a>');
+Vue.component("profile-image", Vue.extend({ props: ["user"], template: '<partial name="profile-image"></partial>' }));
+
+aclog.sessions.verify();
+
+var router = new VueRouter(RouterConfig.config);
+router.map(RouterConfig.map);
+router.redirect(RouterConfig.redirect);
+router.start(App, "html");
diff --git a/frontend/src/components/app.vue b/frontend/src/components/app.vue
deleted file mode 100644
index d155857..0000000
--- a/frontend/src/components/app.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<script>
-import Utils from "utils";
-import Navbar from "components/navbar.vue";
-
-export default {
-  replace: false,
-  components: { "navbar": Navbar },
-  data() {
-    return {
-      flash: null,
-      flashNext: null,
-      title: "aclog",
-    };
-  },
-  watch: {
-    "$route"(n, o) { // ページ遷移？
-      this.flash = null;
-      if (this.flashNext) {
-        this.flash = this.flashNext;
-        this.flashNext = null;
-      }
-    }
-  },
-  methods: {
-    updateTitle(str) {
-      var newStr;
-      if (str && str !== "") {
-        newStr = str + " - aclog";
-      } else {
-        newStr = "aclog";
-      }
-      document.title = newStr;
-      this.title = newStr;
-    },
-    setFlash(obj) {
-      this.flash = Utils.stringifyMessage(obj);
-    },
-    setFlashNext(obj) {
-      this.flashNext = Utils.stringifyMessage(obj);
-    },
-  },
-  attached() {
-    document.querySelector("#app").style.display = "block";
-  }
-};
-</script>
diff --git a/frontend/src/router_config.js b/frontend/src/router_config.js
new file mode 100644
index 0000000..6211ea1
--- /dev/null
+++ b/frontend/src/router_config.js
@@ -0,0 +1,140 @@
+import Vue from "vue";
+
+import AboutIndexPage from "./components/about/index.vue";
+import AboutStatusPage from "./components/about/status.vue";
+import TweetsPage from "./components/tweets/default.vue";
+import TweetDetailPage from "./components/tweets/show.vue";
+import UsersStatsPage from "./components/users/stats.vue";
+import SessionsLoginPage from "./components/sessions/login.vue";
+import SessionsCallbackPage from "./components/sessions/callback.vue";
+import ApidocsIndex from "./components/apidocs/index.vue";
+import ApidocsEndpoint from "./components/apidocs/endpoint.vue";
+import SettingsPage from "./components/settings/index.vue";
+import OptoutPage from "./components/optout/index.vue";
+import OptoutCallbackPage from "./components/optout/callback.vue";
+import NotFoundPage from "./components/errors/not_found.vue";
+
+export default {
+  config: {
+    history: true,
+    saveScrollPosition: true,
+    linkActiveClass: "active"
+  },
+  map: {
+    "/": {
+      component: AboutIndexPage,
+    },
+    "/about/status": {
+      component: AboutStatusPage,
+    },
+    "/about/api": {
+      component: ApidocsIndex
+    },
+    "/about/api/:method/*path": {
+      component: ApidocsEndpoint
+    },
+    "/i/login": {
+      name: "login",
+      component: SessionsLoginPage,
+    },
+    "/i/callback": {
+      name: "login_callback",
+      component: SessionsCallbackPage,
+    },
+    "/i/optout": {
+      name: "optout",
+      component: OptoutPage,
+    },
+    "/i/optout/callback": {
+      name: "optout_callback",
+      component: OptoutCallbackPage,
+    },
+    "/i/public/filter": {
+      name: "public-filter",
+      component: TweetsPage,
+      title: "Public Timeline",
+      api: "tweets/filter",
+      filtering: "query",
+    },
+    "/i/public/best": {
+      name: "public-best-top",
+      component: TweetsPage,
+      title: "Top Tweets",
+      api: "tweets/all_best",
+      filtering: "time",
+      subRoutes: {
+        ":recent": { name: "public-best", component: Vue.extend() }
+      }
+    },
+    "/i/public/timeline": {
+      name: "public-timeline-top",
+      component: TweetsPage,
+      title: "Public Timeline",
+      api: "tweets/all_timeline",
+      filtering: "reactions",
+      subRoutes: {
+        ":reactions": { name: "public-timeline", component: Vue.extend() }
+      }
+    },
+    "/i/:id": {
+      name: "tweet",
+      component: TweetDetailPage,
+    },
+    "/settings": {
+      name: "settings",
+      component: SettingsPage,
+    },
+    "/:screen_name": {
+      name: "user-best-top",
+      component: TweetsPage,
+      title: "@:screen_name's Best Tweets",
+      api: "tweets/user_best",
+      filtering: "time",
+      subRoutes: {
+        "best/:recent": { name: "user-best", component: Vue.extend() }
+      }
+    },
+    "/:screen_name/timeline": {
+      name: "user-timeline-top",
+      component: TweetsPage,
+      title: "@:screen_name's Timeline",
+      api: "tweets/user_timeline",
+      filtering: "reactions",
+      subRoutes: {
+        ":reactions": { name: "user-timeline", component: Vue.extend() }
+      }
+    },
+    "/:screen_name/favorites": {
+      name: "user-favorites-top",
+      component: TweetsPage,
+      title: "@:screen_name's Likes",
+      api: "tweets/user_favorites",
+      filtering: "reactions",
+      subRoutes: {
+        ":reactions": { name: "user-favorites", component: Vue.extend() }
+      }
+    },
+    "/:screen_name/favorited_by/:source_screen_name": {
+      name: "user-favorited-by-top",
+      component: TweetsPage,
+      title: "@:screen_name's Tweets favorited by @:source_screen_name",
+      api: "tweets/user_favorited_by",
+      filtering: "reactions",
+      subRoutes: {
+        ":reactions": { name: "user-favorited-by", component: Vue.extend() }
+      }
+    },
+    "/:screen_name/stats": {
+      name: "user-stats",
+      component: UsersStatsPage,
+    },
+    "*": {
+      component: NotFoundPage,
+    },
+  },
+  redirect: {
+    "/i/timeline": "/i/public/timeline",
+    "/i/best": "/i/public/best",
+    "/i/filter": "/i/public/filter",
+  }
+};
diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
index d7f410c..2ac06e7 100644
--- a/frontend/webpack.config.js
+++ b/frontend/webpack.config.js
@@ -2,12 +2,12 @@ var webpack = require("webpack");
 
 module.exports = {
   entry: {
-    app: ["./src/app.js"]
+    app: ["./src/bootstrap.js"]
   },
   output: {
     path: __dirname + "/dest/assets",
     publicPath: "/assets",
-    filename: "app.build.js"
+    filename: "[name].build.js"
   },
   resolve: {
     root: [__dirname + "/src/lib", __dirname + "/src"],