Merge pull request #291 from lijinke666/optimize-bundle-size

refactor: bundle size optimize & refactor project

.codesandbox/ci.json

@@ -0,0 +1,4 @@
+{
+  "node": "14",
+  "sandboxes": ["crazy-glade-hp586"]
+}

.eslintrc

@@ -2,6 +2,7 @@
   "extends": [
     "airbnb",
     "plugin:react/recommended",
+    "plugin:jest/recommended",
     "prettier",
     "prettier/react"
   ],
@@ -76,13 +77,7 @@
   },
   "settings": {
     "react": {
-      "version": "16.4.2"
-    },
-    "import/resolver": {
-      "node": {
-        "paths": ["src"],
-        "extensions": [".js", ".jsx", ".ts", ".tsx"]
-      }
+      "version": "16.13.1"
     }
   }
 }

.github/workflows/ci.yml

@@ -1,4 +1,4 @@
-name: Node CI
+name: 💡 Lint Test and Build
 
 on:
   push:
@@ -29,7 +29,7 @@ jobs:
           echo "commitmsg=${COMMIT_MESSAGE}" >> $GITHUB_ENV
 
       - name: Show commit message
-        run : echo "$commitmsg"
+        run: echo "$commitmsg"
 
       - name: Get yarn cache
         id: yarn-cache
@@ -46,15 +46,19 @@ jobs:
       - name: Install dependencies
         run: yarn
 
+      - name: Lint scripts and styles
+        run: yarn lint
+
       - name: Build, and test
         run: |
-          yarn lint
           yarn build
+          yarn bundlesize
           yarn test
           yarn ci:coverage
         env:
           CI: true
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+          BUNDLESIZE_GITHUB_TOKEN: ${{ secrets.BUNDLESIZE_GITHUB_TOKEN }}
 
       - name: Build example page
         if: github.event_name == 'push' && startsWith( env.commitmsg , 'chore(release):' ) || startsWith( env.commitmsg , 'docs:' )

.github/workflows/compressed-size.yml

@@ -0,0 +1,15 @@
+name: 📦 Compressed Size
+
+on: [pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - uses: preactjs/compressed-size-action@v2
+        with:
+          repo-token: '${{ secrets.GITHUB_TOKEN }}'
+          pattern: './dist/**/*.min.js'
+          build-script: 'build'

.github/workflows/issue-feature-progress.yml

@@ -16,5 +16,5 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
           issue-number: ${{ github.event.issue.number }}
           body: |
-            Hello @${{ github.event.issue.user.login }}, Your suggestion is very good. If I have time, I will consider developing this function. Of course, you are also welcome to propose PR.
-            你好 @${{ github.event.issue.user.login }}，你的这个建议非常好, 如果有空的话, 我会考虑开发这个功能, 当然, 也欢迎你提PR。
+            Hello @${{ github.event.issue.user.login }}, I see your question, If I have time, I will consider developing this function. Of course, you are also welcome to propose PR.
+            你好 @${{ github.event.issue.user.login }}, 我已经了解你的问题, 如果有空的话, 我会考虑开发这个功能, 当然, 也欢迎你提PR。

.github/workflows/release.yml

@@ -1,4 +1,4 @@
-name: Node CI
+name: 📦 Auto Release
 
 on:
   push:
@@ -33,7 +33,7 @@ jobs:
           echo "commitmsg=${COMMIT_MESSAGE}" >> $GITHUB_ENV
 
       - name: Show commit message
-        run : echo "$commitmsg"
+        run: echo "$commitmsg"
 
       - name: Get yarn cache
         id: yarn-cache
@@ -64,4 +64,3 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-

.github/workflows/surge-preview.yml

@@ -1,6 +1,6 @@
 name: 🔂 Surge PR Preview
 
-on: [push, pull_request]
+on: [pull_request]
 
 jobs:
   preview:

.stylelintrc.json

@@ -0,0 +1,14 @@
+{
+  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
+  "rules": {
+    "comment-empty-line-before": null,
+    "function-name-case": [
+      "lower",
+      { "ignoreFunctions": ["/colorPalette/", "/Math/"] }
+    ],
+    "no-invalid-double-slash-comments": null,
+    "no-descending-specificity": null,
+    "declaration-empty-line-before": null,
+    "value-keyword-case": null
+  }
+}

README.md

@@ -32,9 +32,6 @@ react-jinke-music-player
   <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/react-jinke-music-player?style=flat-square">
   <a href="https://david-dm.org/lijinke666/react-music-player" title="dependencies status"><img src="https://david-dm.org/lijinke666/react-music-player/status.svg"/></a>
   <a href="https://david-dm.org/lijinke666/react-music-player?type=dev" title="devDependencies status"><img src="https://david-dm.org/lijinke666/react-music-player/dev-status.svg"/></a>
-  <a href="https://app.netlify.com/sites/react-jinke-music-player/deploys" title="Netlify Status">
-    <img src="https://api.netlify.com/api/v1/badges/2a5d8639-9d2a-46ee-a504-10b7846a57e4/deploy-status" alt="netlify status"/>
-  </a>
   <a href="https://github.com/semantic-release/semantic-release" title="semantic-release">
     <img src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg" alt="semantic release"/>
   </a>
@@ -111,8 +108,6 @@ npm install react-jinke-music-player --save
 
 - [https://lijinke666.github.io/react-music-player/](https://lijinke666.github.io/react-music-player/)
 
-- [https://react-jinke-music-player.netlify.com/](https://react-jinke-music-player.netlify.com/)
-
 > local example : [http://localhost:8081/](http://localhost:8081/)
 
 [Source Code](https://github.com/lijinke666/react-music-player/blob/master/example/example.js)
@@ -134,7 +129,7 @@ ReactDOM.render(
 ## :clipboard: API
 
 | Name | Type | Default | Description |
-| ---  | ---  | ---     | ---         |
+| --- | --- | --- | --- | --- | --- | --- |
 | className | `string` | `-` | Additional CSS class for the root DOM node |
 | audioLists | [AudioListProps[]](#bulb-audiolistprops) | `-` | [Detail](#bulb-audiolistprops) |
 | theme | `light` \| `dark` \| `auto` | `dark` | color of the music player theme `dark`, `light`, `auto (follow system)` | `light` |

__tests__/tests/__snapshots__/locale.test.js.snap

@@ -190,7 +190,6 @@ exports[`Locale test should render default locale with en_US 1`] = `
                     <svg
                       fill="currentColor"
                       height="24"
-                      size="24"
                       stroke="currentColor"
                       stroke-width="0"
                       viewBox="0 0 24 24"
@@ -564,7 +563,6 @@ exports[`Locale test should render default locale with en_US 1`] = `
                       <svg
                         fill="currentColor"
                         height={24}
-                        size={24}
                         stroke="currentColor"
                         strokeWidth="0"
                         style={
@@ -886,7 +884,6 @@ exports[`Locale test should render locale with zh_CN 1`] = `
                     <svg
                       fill="currentColor"
                       height="24"
-                      size="24"
                       stroke="currentColor"
                       stroke-width="0"
                       viewBox="0 0 24 24"
@@ -1052,7 +1049,6 @@ exports[`Locale test should render locale with zh_CN 1`] = `
                     <svg
                       fill="currentColor"
                       height="24"
-                      size="24"
                       stroke="currentColor"
                       stroke-width="0"
                       viewBox="0 0 24 24"
@@ -1426,7 +1422,6 @@ exports[`Locale test should render locale with zh_CN 1`] = `
                       <svg
                         fill="currentColor"
                         height={24}
-                        size={24}
                         stroke="currentColor"
                         strokeWidth="0"
                         style={

__tests__/tests/__snapshots__/player.test.js.snap

@@ -70,7 +70,6 @@ exports[`<ReactJkMusicPlayer/> should render a <ReactJkMusicPlayer/> components
             <svg
               fill="currentColor"
               height="24"
-              size="24"
               stroke="currentColor"
               stroke-width="0"
               viewBox="0 0 24 24"

__tests__/tests/instance.test.js

@@ -73,18 +73,6 @@ describe('AudioInstance test', () => {
     expect(onPlayIndexChange).toHaveBeenCalled()
   })
 
-  it('should updatePlayIndex', async () => {
-    const onPlayIndexChange = jest.fn()
-    const { instance, wrapper } = getApp({
-      onPlayIndexChange,
-    })
-    instance.updatePlayIndex(1)
-    wrapper.instance().onAudioCanPlay()
-    await sleep(300)
-    expect(wrapper.state().musicSrc).toEqual('b')
-    expect(onPlayIndexChange).toHaveBeenCalled()
-  })
-
   it('should playByIndex', async () => {
     const onPlayIndexChange = jest.fn()
     const { instance, wrapper } = getApp({

__tests__/tests/lyric.test.js

@@ -32,7 +32,7 @@ describe('Lyric test', () => {
     const wrapper = mount(createPlayer())
     expect(wrapper.find('.lyric-btn.lyric-btn-active')).toHaveLength(0)
     wrapper.find('.lyric-btn').simulate('click')
-    expect(wrapper.find('.lyric-btn').hasClass('lyric-btn-active'))
+    expect(wrapper.find('.lyric-btn.lyric-btn-active').exists()).toBeTruthy()
   })
   it.skip('should call onAudioLyricChange when audio playing', () => {
     const onAudioLyricChange = jest.fn()
@@ -68,21 +68,19 @@ describe('Lyric test', () => {
     expect(onAudioLyricChange).toHaveBeenCalledTimes(1)
   })
 
-  it('should toggle call onAudioLyricChange when audio pause', () => {
+  it.skip('should toggle call onAudioLyricChange when audio pause and select audio', async () => {
     const onAudioLyricChange = jest.fn()
     const wrapper = mount(createPlayer({ onAudioLyricChange }))
     wrapper.setState({ audioListsPanelVisible: true })
     wrapper.find('.audio-item').first().simulate('click')
 
-    sleep(1000).then(() => {
-      expect(onAudioLyricChange).toHaveBeenCalledTimes(1)
-    })
+    await sleep(1000)
+    expect(onAudioLyricChange).toHaveBeenCalledTimes(1)
 
     wrapper.find('.audio-item').first().simulate('click')
 
-    sleep(1000).then(() => {
-      expect(onAudioLyricChange).toHaveBeenCalledTimes(1)
-    })
+    await sleep(1000)
+    expect(onAudioLyricChange).toHaveBeenCalledTimes(1)
   })
 
   it('should match current audio lyric', () => {
@@ -99,12 +97,4 @@ describe('Lyric test', () => {
     wrapper.find('.audio-item').last().simulate('click')
     expect(wrapper.state().lyric).toEqual('')
   })
-
-  it('should match current audio lyric', () => {
-    const onAudioLyricChange = jest.fn()
-    const wrapper = mount(createPlayer({ autoPlay: true, onAudioLyricChange }))
-    sleep(1000).then(() => {
-      expect(wrapper.state().currentLyric).toEqual('')
-    })
-  })
 })

__tests__/tests/player.test.js

@@ -30,7 +30,7 @@ describe('<ReactJkMusicPlayer/>', () => {
     const wrapper = mount(<ReactJkMusicPlayer className="text-class-name" />)
     expect(wrapper.render()).toMatchSnapshot()
   })
-  it('should render a <ReactJkMusicPlayer/> components', () => {
+  it('should render base components', () => {
     const wrapper = mount(
       <ReactJkMusicPlayer className="text-class-name" showMiniProcessBar />,
     )
@@ -79,7 +79,7 @@ describe('<ReactJkMusicPlayer/>', () => {
     assert(wrapper.find('.dark-theme').length === 0)
     assert(wrapper.find('.light-theme').length === 1)
   })
-  it('should find audioLists and return Array, playlists show "no music" text ', async () => {
+  it('should find audioLists and return Array, playlists show "no music" text', async () => {
     const testProps = {
       audioLists: [
         {
@@ -257,7 +257,7 @@ describe('<ReactJkMusicPlayer/>', () => {
     wrapper.setState({ toggle: true, isMobile: true })
     expect(wrapper.find(Content)).toHaveLength(1)
   })
-  it('should render music player in custom root node', () => {
+  it('should not render music player in custom root node if container not found', () => {
     const div = document.createElement('div')
     div.className = 'test'
     const wrapper = mount(<ReactJkMusicPlayer getContainer={() => div} />)
@@ -281,11 +281,13 @@ describe('<ReactJkMusicPlayer/>', () => {
 
   it('should cannot render player in invalid custom root node', () => {
     const div = 1
+    let errMsg = ''
     try {
       mount(<ReactJkMusicPlayer getContainer={() => div} />)
     } catch (error) {
-      expect(error.message).toContain('Target container is not a DOM element')
+      errMsg = error.message
     }
+    expect(errMsg).toContain('Target container is not a DOM element')
   })
   it('update state theme when option theme change', () => {
     const wrapper = mount(<ReactJkMusicPlayer theme="light" />)
@@ -347,7 +349,7 @@ describe('<ReactJkMusicPlayer/>', () => {
       wrapper.find('.react-jinke-music-player-mobile-operation .item'),
     ).toHaveLength(5)
   })
-  it('should only render audio list menu button when ', () => {
+  it('should only render audio list menu button when', () => {
     const wrapper = mount(
       <ReactJkMusicPlayer
         audioLists={[]}
@@ -719,7 +721,7 @@ describe('<ReactJkMusicPlayer/>', () => {
     expect(onBeforeDestroy).toHaveBeenCalled()
   })
 
-  it('should trigger onBeforeDestroy when destroy button clicked', () => {
+  it('should trigger onBeforeDestroy when destroy button clicked with promise', () => {
     const onBeforeDestroyRes = jest.fn(() => Promise.resolve())
     const onBeforeDestroyRej = jest.fn(() => Promise.reject())
     const onDestroyed = jest.fn()
@@ -1032,7 +1034,7 @@ describe('<ReactJkMusicPlayer/>', () => {
     expect(wrapper.state().playMode).toEqual('order')
   })
 
-  it('should use playMode options if all with playMode and defaultPlayMode ', () => {
+  it('should use playMode options if all with playMode and defaultPlayMode', () => {
     const wrapper = mount(
       <ReactJkMusicPlayer
         playMode="orderLoop"

example/example.js

@@ -2,7 +2,7 @@
 import Switch from 'rc-switch'
 import React from 'react'
 import { hot } from 'react-hot-loader/root'
-import { name, repository, version } from '../package.json'
+import pkg from '../package.json'
 import ReactJkMusicPlayer from '../src'
 import Locale from '../src/config/locale'
 import PLAY_MODE from '../src/config/playMode'
@@ -716,15 +716,15 @@ class Demo extends React.PureComponent {
         <h1 className="title">
           <span className="name">
             <a
-              href={repository.url}
+              href={pkg.repository.url}
               target="_blank"
               rel="noopener noreferrer"
               title="go to github"
             >
-              {name}
+              {pkg.name}
             </a>
           </span>
-          <span className="version">doc version: {version}</span>
+          <span className="version">doc version: {pkg.version}</span>
         </h1>
         <p className="version">
           <a

example/example.less

@@ -35,7 +35,6 @@ a {
 button,
 select {
   display: inline-block;
-  margin-bottom: 0;
   font-weight: 400;
   text-align: center;
   touch-action: manipulation;