Merge pull request nukeop#713 from nukeop/feature/ts-in-app

TS in app

.env

@@ -7,4 +7,4 @@ JAMENDO_CLIENT_ID=836523a7
 LAST_FM_API_KEY=2b75dcb291e2b0c9a2c994aca522ac14
 LAST_FM_API_SECRET=2ee49e35f08b837d43b2824198171fc8
 SOUNDCLOUD_API_KEY=22e8f71d7ca75e156d6b2f0e0a5172b3
-YOUTUBE_API_KEY=AIzaSyCIM4EzNqi1in22f4Z3Ru3iYvLaY8tc3bo
+YOUTUBE_API_KEY=AIzaSyCkMLHynwJgJYQoGaIResXZxKUbC2euFfw

.github/workflows/build.yml

@@ -9,7 +9,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, windows-latest, macOS-latest]
-    timeout-minutes: 20
+    timeout-minutes: 12
 
     steps:
     - uses: actions/checkout@master

package.json

@@ -46,7 +46,7 @@
     "eslint-plugin-react": "^7.12.4",
     "eslint-plugin-react-hooks": "^1.6.1",
     "husky": "^3.1.0",
-    "lerna": "^3.16.4",
+    "lerna": "^3.22.1",
     "lint-staged": "^10.0.0-beta.14",
     "shx": "^0.3.2",
     "typescript": "^3.7.4"

packages/app/app/actions/search.js → packages/app/app/actions/search.ts

@@ -279,7 +279,7 @@ export const artistInfoSearchByName = (artistName, history) => async (dispatch,
     dispatch(error(
       `Failed to find artist ${artistName}`,
       `Using ${selectedProvider.sourceName}`,
-      null, null, settings
+      null, settings
     ));
   }
 };

packages/app/app/reducers/queue.js

@@ -6,7 +6,6 @@ import {
   UPDATE_QUEUE_ITEM,
   CLEAR_QUEUE,
   ADD_STREAMS_TO_QUEUE_ITEM,
-  REPLACE_STREAMS_IN_QUEUE_ITEM,
   NEXT_SONG,
   PREVIOUS_SONG,
   SELECT_SONG,
@@ -52,15 +51,6 @@ function reduceAddStreamsToQueueItem(state, action) {
   });
 }
 
-function reduceReplaceStreamsInQueueItem(state, action) {
-  const replaceIx = findQueueItemIndex(state.queueItems, action.payload);
-  const newQueue = _.cloneDeep(state.queueItems);
-  newQueue[replaceIx] = action.payload;
-  return Object.assign({}, state, {
-    queueItems: newQueue
-  });
-}
-
 function reduceSelectSong(state, action) {
   return Object.assign({}, state, {
     currentSong: action.payload
@@ -186,8 +176,6 @@ export default function QueueReducer(state = initialState, action) {
     return { ...state, queueItems: [] };
   case ADD_STREAMS_TO_QUEUE_ITEM:
     return reduceAddStreamsToQueueItem(state, action);
-  case REPLACE_STREAMS_IN_QUEUE_ITEM:
-    return reduceReplaceStreamsInQueueItem(state, action);
   case NEXT_SONG:
     return reduceNextSong(state);
   case PREVIOUS_SONG:

packages/app/app/reducers/search.js

@@ -28,6 +28,7 @@ const initialState = {
   playlistSearchResults: [],
   albumDetails: {},
   artistDetails: {},
+  searchHistory: [],
   unifiedSearchStarted: false,
   playlistSearchStarted: false,
   isFocused: false

packages/app/babel.config.js

@@ -5,7 +5,8 @@ module.exports = {
         electron: '4.2'
       }
     }],
-    '@babel/preset-react'
+    '@babel/preset-react',
+    '@babel/preset-typescript'
   ],
   plugins: [
     ['@babel/plugin-proposal-decorators', { 'legacy': true }],

packages/app/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "start": "webpack-dev-server --inline --env.NODE_ENV=development",
     "build": "webpack --colors --env.NODE_ENV=production",
-    "test": "mocha --require @babel/register --require ignore-styles --require regenerator-runtime --timeout 10000 --prof --recursive",
+    "test": "TS_NODE_FILES=true mocha --require ignore-styles --require ts-node/register --require @babel/register --require regenerator-runtime --timeout 10000 --prof --recursive",
     "lint": "eslint app test --fix",
     "i18n": "sync-i18n --files 'app/locales/*.json' --primary en --languages fr tl nl de dk es pl zh ru tr id sk ko zh_tw se --space 2"
   },
@@ -81,16 +81,18 @@
     "ytdl-core": "^1.0.9"
   },
   "devDependencies": {
-    "@babel/core": "^7.5.5",
+    "@babel/core": "^7.9.0",
     "@babel/plugin-proposal-class-properties": "^7.5.5",
     "@babel/plugin-proposal-decorators": "^7.4.4",
     "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
     "@babel/polyfill": "^7.4.4",
-    "@babel/preset-env": "^7.5.5",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/register": "^7.5.5",
+    "@babel/preset-env": "^7.9.5",
+    "@babel/preset-react": "^7.9.4",
+    "@babel/preset-typescript": "^7.9.0",
+    "@babel/register": "^7.9.0",
+    "@types/mocha": "^7.0.2",
     "ava": "^2.4.0",
-    "babel-loader": "^8.0.6",
+    "babel-loader": "^8.1.0",
     "chai": "^4.1.2",
     "chai-spies": "^1.0.0",
     "css-loader": "^1.0.0",
@@ -112,6 +114,8 @@
     "sass-loader": "^6.0.7",
     "style-loader": "^0.23.0",
     "svg-inline-loader": "^0.8.0",
+    "ts-loader": "^7.0.1",
+    "ts-node": "^8.10.1",
     "url-loader": "^1.0.1",
     "utf-8-validate": "^5.0.2",
     "webpack": "^4.41.2",

packages/app/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "lib": ["DOM"],
+    "outDir": "dist",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "allowJs": true,
+    "typeRoots": [
+      "node_modules/@types",
+      "typings"
+    ],
+    "jsx": "react"
+  },
+  "include": [
+    "app",
+    "resources",
+    "typings",
+    "node_modules/@nuclear"
+  ],
+  "exclude": [
+    "node_modules/@nuclear/*/test",
+    "node_modules/@nuclear/ui/stories"
+  ]
+}

packages/app/typings/import-types.d.ts

@@ -0,0 +1,9 @@
+declare module '*.scss' {
+  const content: {[className: string]: string};
+  export default content;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}

packages/app/webpack.config.js

@@ -9,6 +9,8 @@ const BUILD_DIR = path.resolve(__dirname, '../../dist');
 const APP_DIR = path.resolve(__dirname, 'app');
 const RESOURCES_DIR = path.resolve(__dirname, 'resources');
 
+const CORE_DIR = path.resolve(__dirname, '..', 'core');
+const I18N_DIR = path.resolve(__dirname, '..', 'i18n');
 const UI_DIR = path.resolve(__dirname, '..', 'ui');
 const VENDOR_DIR = path.resolve(__dirname, 'node_modules');
 
@@ -32,7 +34,7 @@ module.exports = (env) => {
     namedModules: true
   };
   const jsxRule = {
-    test: /.jsx?$/,
+    test: /\.(js|jsx|tsx|ts)$/,
     loader: 'babel-loader',
     options: {
       cacheDirectory: true,
@@ -42,14 +44,15 @@ module.exports = (env) => {
             electron: '4.2'
           }
         }],
-        '@babel/preset-react'
+        '@babel/preset-react',
+        '@babel/preset-typescript'
       ],
       plugins: [
         ['@babel/plugin-proposal-decorators', { 'legacy': true }],
         '@babel/plugin-proposal-class-properties',
         '@babel/plugin-proposal-object-rest-spread'
       ],
-      ignore: [/node_modules/]
+      ignore: [/node_modules\/(?!@nuclear).*/]
     }
   };
   const contentSecurity = 'connect-src *; style-src \'unsafe-inline\' https:; font-src https: data:; img-src https: data: file:;';
@@ -93,11 +96,18 @@ module.exports = (env) => {
   ];
 
   if (IS_PROD) {
+    jsxRule.loader = 'ts-loader';
+    jsxRule.options = {};
     jsxRule.include = [
       APP_DIR,
+      CORE_DIR,
+      I18N_DIR,
       UI_DIR
     ];
-    jsxRule.exclude = /node_modules\/electron-timber\/preload\.js/;
+    jsxRule.exclude = [
+      /node_modules\/electron-timber\/preload\.js/,
+      /node_modules\/(?!@nuclear).*/
+    ];
     optimization.splitChunks = {
       chunks: 'all',
       cacheGroups: {
@@ -124,6 +134,7 @@ module.exports = (env) => {
     mode: IS_PROD ? 'production' : 'development',
     optimization,
     resolve: {
+      extensions: ['*', '.js', '.ts', '.jsx', '.tsx', '.json'],
       alias: {
         react: path.resolve(__dirname, 'node_modules/react'),
         'styled-component': path.resolve(__dirname, 'node_modules/styled-component')
@@ -195,5 +206,6 @@ module.exports = (env) => {
     };
   }
 
+
   return config;
 };

packages/core/package.json

@@ -11,11 +11,8 @@
     "url": "https://github.com/nukeop/nuclear/issues"
   },
   "homepage": "https://github.com/nukeop/nuclear#readme",
-  "main": "lib/index.js",
-  "typings": "lib/index.d.ts",
+  "main": "src/index.ts",
   "scripts": {
-    "start": "tsc",
-    "build": "tsc",
     "lint": "eslint src/**/*.ts --fix",
     "test": "eslint src/**/**/**/**/*.ts test/**/*.ts && ava -v"
   },

packages/i18n/package.json

@@ -11,11 +11,8 @@
     "url": "https://github.com/nukeop/nuclear/issues"
   },
   "homepage": "https://github.com/nukeop/nuclear#readme",
-  "main": "lib/index.js",
-  "typings": "lib/index.d.ts",
+  "main": "src/index.ts",
   "scripts": {
-    "start": "tsc",
-    "build": "tsc",
     "lint": "eslint src/**/*.ts",
     "i18n-sync": "ts-node scripts/sync"
   },

packages/main/package.json

@@ -76,6 +76,7 @@
     "ts-node": "^8.5.4",
     "type-fest": "^0.8.1",
     "typescript": "^3.7.3",
+    "utf-8-validate": "^5.0.2",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10"
   },
@@ -90,4 +91,4 @@
     "mpris-service": "2.1.0",
     "x11": "^2.3.0"
   }
-}
+}

packages/main/tsconfig.json

@@ -1,11 +1,12 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "outDir": "dist",
     "lib": ["DOM"],
+    "outDir": "dist",
+    "allowJs": true,
     "strict": false,
     "typeRoots": [
-      "./typings",
+      "typings",
       "node_modules/@types"
     ]
   },

packages/main/webpack.config.ts

@@ -16,6 +16,9 @@ const osMapper: Record<string, BuildEnv['TARGET']> = {
   win32: 'windows'
 };
 
+const MAIN_DIR = path.resolve(__dirname, 'src');
+const CORE_DIR = path.resolve(__dirname, '..', 'core');
+
 module.exports = (env: BuildEnv): import('webpack').Configuration => {
   if (!env.TARGET) {
     env.TARGET = osMapper[os.platform() as string];
@@ -27,16 +30,12 @@ module.exports = (env: BuildEnv): import('webpack').Configuration => {
   const tsRule = {
     test: /.ts?$/,
     loader: 'ts-loader',
-    exclude: /node_modules\/(?!@nuclear).*/,
     options: {
       configFile: path.join(__dirname, `/config/tsconfig.${env.TARGET}.json`)
-    }
+    },
+    include: [MAIN_DIR, CORE_DIR]
   };
 
-  if (IS_PROD) {
-    delete tsRule.exclude;
-  }
-
   return {
     entry: './src/main.ts',
     resolve: {

packages/ui/.babelrc

@@ -1,6 +1,7 @@
 {
   "presets": [
     "@babel/preset-env",
+    "@babel/preset-typescript",
     "@babel/preset-react"
   ],
   "plugins": [

packages/ui/__mocks__/fileMock.ts

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

packages/ui/lib/components/Card/index.tsx

@@ -16,7 +16,7 @@ type CardProps = {
   header: string;
   content: string;
   image: string;
-  onClick: (event: React.MouseEvent) => void;
+  onClick: React.DOMAttributes<HTMLDivElement>['onClick'];
   withMenu?: boolean;
   animated?: boolean;
   menuEntries?: CardMenuEntry[];

packages/ui/lib/components/PlayerButton/index.tsx

@@ -8,7 +8,7 @@ export type PlayerButtonProps = {
   icon: SemanticICONS;
   size?: Exclude<SemanticSIZES, 'medium'>;
   ariaLabel?: string;
-  onClick?: (e: React.MouseEvent) => void;
+  onClick?: React.DOMAttributes<HTMLButtonElement>['onClick'];
   disabled?: boolean;
   loading?: boolean;
 };