chore tasks

.eslintignore

@@ -1,6 +1,6 @@
-.nuxt/
-assets/
-node_modules/
-static/
+**/node_modules/
+packages/client/.nuxt/
+packages/client/assets/
+packages/client/static/
 dist/
 coverage/

.yarnclean

@@ -43,3 +43,6 @@ wercker.yml
 
 # misc
 *.md
+
+# https://github.com/gotwarlost/istanbul/issues/743
+!istanbul-reports/lib/html/assets

package.json

@@ -38,19 +38,16 @@
     "shared": "dist/shared"
   },
   "devDependencies": {
-    "@babel/compat-data": "^7.12.7",
     "@babel/core": "^7.12.10",
     "@babel/preset-env": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
-    "@babel/runtime-corejs3": "^7.12.5",
-    "@nuxtjs/eslint-config-typescript": "^5.0.0",
+    "@nuxtjs/eslint-config-typescript": "^6.0.0",
     "@types/jest": "^26.0.19",
     "@types/node": "^14.14.12",
-    "@typescript-eslint/eslint-plugin": "^4.7.0",
-    "@typescript-eslint/parser": "^4.8.2",
+    "@typescript-eslint/eslint-plugin": "^4.16.1",
+    "@typescript-eslint/parser": "^4.16.1",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^26.6.3",
-    "core-js": "3",
     "eslint": "^7.20.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-plugin-import": "^2.22.1",
@@ -63,6 +60,7 @@
     "stylelint": "^13.8.0",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-scss": "^3.18.0",
-    "ts-jest": "^26.4.4"
+    "ts-jest": "^26.4.4",
+    "typescript": "~4.1"
   }
 }

packages/client/.eslintignore

@@ -0,0 +1,6 @@
+node_modules/
+.nuxt/
+assets/
+static/
+dist/
+coverage/

packages/client/components/containers/form/SearchField.vue

@@ -62,7 +62,7 @@ import {
   computed,
   watch,
 } from '@vue/composition-api';
-import { debounce } from 'lodash';
+import debounce from 'just-debounce-it';
 import { useTextField, VTextFieldRef } from '~/use/keyboard';
 
 const LIMIT_OF_SEARCH_ITEM = 4;

packages/client/components/globals/NavigationBar.mobile.vue

@@ -76,7 +76,7 @@ export default defineComponent({
     const isLoaded = useIsLoaded();
 
     const itemList = computed<Item[]>(() => {
-      const isLoggedin = root.$getters()['auth/isLoggedin'];
+      const isLoggedIn = root.$getters()['auth/isLoggedIn'];
       const userAvatarSrc = root.$getters()['auth/userAvatarSrc'](ICON_SIZR);
       const home: Item<'to'> = {
         type: 'to',
@@ -106,7 +106,7 @@ export default defineComponent({
         iconSrc: userAvatarSrc,
         text: 'アカウント',
       };
-      return isLoggedin
+      return isLoggedIn
         ? [home, browse, library, account]
         : [home, browse, library];
     });

packages/client/config/index.ts

@@ -1,5 +1,4 @@
 export * from './axios';
-export * from './babelPresets';
 export * from './https';
 export * from './httpsAgent';
 export * from './path';

packages/client/config/webpack.config.ts

@@ -1,26 +1,7 @@
 import type { Configuration } from 'webpack';
-
-import { babelPresets } from './babelPresets';
 import { projectRoot, clientRoot } from './path';
 
-export const webpack = (config: Configuration, isServer: boolean) => {
-  // eslint-disable-next-line no-param-reassign
-  config.module = config.module ?? { rules: [] };
-  config.module.rules.push({
-    // vue ファイルを js ファイルに変換してから適用させたい
-    enforce: 'post',
-    use: {
-      // lodash から必要な関数だけ取り出す
-      loader: 'babel-loader',
-      options: {
-        plugins: ['lodash'],
-        presets: babelPresets(isServer, { modules: false }),
-      },
-    },
-    test: /\.(ts|js|vue)$/,
-    exclude: /node_modules/,
-  });
-
+export const webpack = (config: Configuration) => {
   // eslint-disable-next-line no-param-reassign
   config.resolve = config.resolve ?? { alias: {} };
   Object.assign(config.resolve.alias, {

packages/client/layouts/default.vue

@@ -6,10 +6,10 @@
     <WaveLoader v-if="!isLoaded" />
 
     <Header
-      v-if="isLoggedin"
+      v-if="isLoggedIn"
       :elevation="elevation"
     />
-    <NavigationDrawer v-if="isLoggedin" />
+    <NavigationDrawer v-if="isLoggedIn" />
 
     <v-main :style="contentContainerStyles">
       <div
@@ -20,7 +20,7 @@
       <Overlay />
     </v-main>
 
-    <template v-if="isLoggedin">
+    <template v-if="isLoggedIn">
       <PlayerBar />
       <NavigationBar v-if="$screen.isMobile" />
       <DeviceBar v-if="isAnotherDevicePlaying && $screen.isPc" />
@@ -91,7 +91,7 @@ export default defineComponent({
     }, {
       rootMargin: `-${root.$constant.HEADER_HEIGHT}px 0px`,
     });
-    const isLoggedin = computed(() => root.$getters()['auth/isLoggedin']);
+    const isLoggedIn = computed(() => root.$getters()['auth/isLoggedIn']);
     const isAnotherDevicePlaying = computed(() => root.$getters()['playback/isAnotherDevicePlaying']);
     const contentContainerStyles = computed(() => root.$getters().backgroundStyles(320));
 
@@ -107,7 +107,7 @@ export default defineComponent({
     return {
       isLoaded,
       elevation,
-      isLoggedin,
+      isLoggedIn,
       isAnotherDevicePlaying,
       contentContainerStyles,
       SPACER_REF,

packages/client/middleware/auth.ts

@@ -1,14 +1,14 @@
 import type { Middleware } from '@nuxt/types';
 
 const middleware: Middleware = ({ app, route, redirect }) => {
-  const isLoggedin = app.$getters()['auth/isLoggedin'];
+  const isLoggedIn = app.$getters()['auth/isLoggedIn'];
   if (route.path === '/login/callback') {
     return;
   }
 
-  if (!isLoggedin && route.path !== '/login') {
+  if (!isLoggedIn && route.path !== '/login') {
     redirect('/login');
-  } else if (isLoggedin && route.path === '/login') {
+  } else if (isLoggedIn && route.path === '/login') {
     redirect(route.query.redirect as string || '/');
   }
 };

packages/client/nuxt.config.ts

@@ -2,9 +2,7 @@
 // eslint-disable-next-line import/order
 import './pre-start';
 
-import LodashModuleReplacementPlugin from 'lodash-webpack-plugin';
 import type { NuxtConfig } from '@nuxt/types';
-
 import {
   APP_NAME,
   IS_DEVELOPMENT,
@@ -15,7 +13,6 @@ import {
 import {
   projectRoot,
   clientRoot,
-  babelPresets,
   axios,
   https,
   proxy,
@@ -71,14 +68,7 @@ const nuxtConfig: NuxtConfig = {
     https,
   },
   build: {
-    babel: {
-      presets: ({ isServer }) => babelPresets(isServer),
-    },
-    plugins: [
-      // lodash から必要な関数だけ取り出す
-      new LodashModuleReplacementPlugin(),
-    ],
-    extend: (config, { isServer }) => webpack(config, isServer),
+    extend: (config) => webpack(config),
   },
   plugins: [
     { src: '~/plugins/dayjs' },

packages/client/observable/screen.ts

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import { debounce } from 'lodash';
+import debounce from 'just-debounce-it';
 import {
   SM_BREAK_POINT,
   MD_BREAK_POINT,

packages/client/package.json

@@ -20,16 +20,15 @@
     "start": "nuxt-ts start"
   },
   "dependencies": {
-    "@nuxt/typescript-runtime": "^2.0.0",
+    "@nuxt/typescript-runtime": "^2.0.2",
     "@nuxtjs/axios": "^5.13.1",
     "@nuxtjs/proxy": "^2.1.0",
     "@nuxtjs/pwa": "^3.3.2",
     "@nuxtjs/style-resources": "^1.0.0",
     "@ravyd/shared": "^0.1.0",
     "@vue/composition-api": "^1.0.0-beta.21",
     "dayjs": "^1.9.7",
-    "lodash": "^4.17.20",
-    "lodash-webpack-plugin": "^0.11.5",
+    "just-debounce-it": "^1.1.0",
     "node-vibrant": "^3.1.6",
     "nuxt": "^2.14.11",
     "nuxt-property-decorator": "^2.8.8",
@@ -42,41 +41,31 @@
     "vuex-persist": "^2.2.0"
   },
   "devDependencies": {
-    "@babel/compat-data": "^7.12.7",
-    "@babel/core": "^7.12.10",
-    "@babel/preset-env": "^7.12.10",
-    "@babel/preset-typescript": "^7.12.7",
-    "@babel/runtime-corejs3": "^7.12.5",
     "@mdi/font": "^5.8.55",
     "@nuxt/types": "^2.14.11",
-    "@nuxt/typescript-build": "^2.0.2",
-    "@nuxtjs/eslint-config-typescript": "^5.0.0",
-    "@nuxtjs/eslint-module": "^3.0.1",
+    "@nuxt/typescript-build": "^2.0.6",
+    "@nuxtjs/eslint-module": "^3.0.2",
     "@nuxtjs/stylelint-module": "^4.0.0",
     "@nuxtjs/vuetify": "^1.11.2",
     "@types/dotenv": "^8.2.0",
     "@types/jest": "^26.0.19",
-    "@types/lodash": "^4.14.165",
-    "@types/lodash-webpack-plugin": "^0.11.4",
+    "@types/just-debounce-it": "^1.1.0",
     "@types/node": "^14.14.12",
     "@types/resize-observer-browser": "^0.1.4",
     "@types/spotify-web-playback-sdk": "^0.1.7",
     "@types/url-join": "^4.0.0",
     "@types/wicg-mediasession": "^1.1.0",
     "@vue/test-utils": "^1.1.2",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^26.6.3",
-    "babel-plugin-lodash": "^3.3.4",
-    "core-js": "3",
     "cross-env": "^7.0.2",
     "dotenv": "^8.2.0",
     "node-sass": "^4.14.1",
     "sass": "^1.32.7",
     "sass-loader": "8",
     "tsconfig-paths": "^3.9.0",
+    "typescript": "~4.1",
     "vue-jest": "^3.0.7",
     "vue-template-compiler": "^2.6.12",
-    "vue-type-check": "^1.0.0",
+    "vue-type-check": "^1.1.0",
     "worker-loader": "^2.0.0"
   }
 }

packages/client/pages/artists/_artistId/index.vue

@@ -228,7 +228,6 @@ export default class ArtistIdTopPage extends Vue implements AsyncData, Data {
     const offset = currentReleaseList.items.length;
     const releases = await this.$spotify.artists.getArtistAlbums({
       artistId: this.$route.params.artistId,
-      country: this.$getters()['auth/userCountryCode'],
       includeGroupList: [type],
       limit: LIMIT_OF_RELEASES,
       offset,

packages/client/pages/browse/categories.vue

@@ -64,10 +64,8 @@ export default class BrowseCategoriesPage extends Vue implements AsyncData {
     if (this.categories == null || !this.categories.hasNext) return;
 
     const currentCategories = this.categories;
-    const country = this.$getters()['auth/userCountryCode'];
     const offset = this.categories.items.length;
     const { categories } = await this.$spotify.browse.getCategories({
-      country,
       limit: LIMIT_OF_CATEGORIES,
       offset,
     });

packages/client/pages/browse/feature.vue

@@ -68,10 +68,8 @@ export default class BrowseFeaturePage extends Vue implements AsyncData {
     if (this.feature == null || !this.feature.hasNext) return;
 
     const currentFeature = this.feature;
-    const country = this.$getters()['auth/userCountryCode'];
     const offset = this.feature.items.length;
     const { playlists, message } = await this.$spotify.browse.getFeaturedPlaylists({
-      country,
       limit: LIMIT_OF_PLAYLISTS,
       offset,
     });

packages/client/pages/categories/_categoryId.vue

@@ -99,11 +99,9 @@ export default class CategoryIdPage extends Vue implements AsyncData, Data {
 
     const { playlists: currentPlaylists } = this;
     const { categoryId } = this.$route.params;
-    const country = this.$getters()['auth/userCountryCode'];
     const offset = this.playlists.items.length;
     const { playlists } = await this.$spotify.browse.getCategoryPlaylists({
       categoryId,
-      country,
       limit,
       offset,
     });

packages/client/pages/index.vue

@@ -74,11 +74,10 @@ type AsyncData = {
   },
 
   async asyncData({ app }): Promise<AsyncData> {
-    const country = app.$getters()['auth/userCountryCode'];
     const [topArtists, topTracks, newReleases] = await Promise.all([
       app.$spotify.top.getTopArtists({}),
       app.$spotify.top.getTopTracks({}),
-      app.$spotify.browse.getNewReleases({ country }),
+      app.$spotify.browse.getNewReleases({}),
     ] as const);
 
     const topArtistList = topArtists?.items ?? [];

packages/client/pages/login.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="$style.LoginPage">
     <v-card
-      v-show="!isLoggedin"
+      v-show="!isLoggedIn"
       :color="$constant.CARD_BACKGROUND_COLOR"
       :class="$style.LoginCard"
     >
@@ -43,8 +43,8 @@ export default Vue.extend({
   },
 
   computed: {
-    isLoggedin(): RootGetters['auth/isLoggedin'] {
-      return this.$getters()['auth/isLoggedin'];
+    isLoggedIn(): RootGetters['auth/isLoggedIn'] {
+      return this.$getters()['auth/isLoggedIn'];
     },
   },
 

packages/client/pages/playlists/_playlistId.vue

@@ -444,14 +444,12 @@ export default class PlaylistIdPage extends Vue implements AsyncData, Data {
     const { length } = currentTracks.items;
     const maxLimit = 50;
     const limit = Math.min(counts, maxLimit) as OneToFifty;
-    const market = this.$getters()['auth/userCountryCode'];
     const handler = (index: number): Promise<PagingTracks | undefined> => {
       const offset = length + limit * index;
       return this.$spotify.playlists.getPlaylistItems({
         playlistId,
         limit,
         offset,
-        market,
       });
     };
     const handlerCounts = Math.ceil(counts / maxLimit);

packages/client/pages/releases/_releaseId.vue

@@ -293,7 +293,6 @@ export default class ReleaseIdPage extends Vue implements AsyncData, Data {
     const offset = this.release.trackList.length;
     const tracks = await this.$spotify.albums.getAlbumTracks({
       albumId: releaseId,
-      market: this.$getters()['auth/userCountryCode'],
       limit,
       offset,
     });