fix: cjs interop require default pita (#1722)

* fix: cjs interop require default pita

* chore: update CI / CD workflow

Author: luwes

.github/workflows/cd.yml

@@ -16,14 +16,20 @@ on:
         - minor
         - major
         - prerelease
+        - from-package
+        - from-git
       prerelease:
         type: choice
-        required: false
         description: Pre-release
         options:
         -
         - canary
         - beta
+      dryrun:
+        description: 'Dry-run'
+        type: boolean
+
+run-name: Deploy ${{ inputs.version }} ${{ inputs.dryrun && '--dry-run' || '' }} ${{ inputs.prerelease && format('--prerelease {0}', inputs.prerelease) || '' }}
 
 jobs:
   deploy:
@@ -38,11 +44,12 @@ jobs:
       CONVENTIONAL_GITHUB_RELEASER_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0 # Fetch all history for all tags and branches
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
+          node-version: 20
           # this line is required for the setup-node action to be able to run the npm publish below.
           registry-url: 'https://registry.npmjs.org'
       - uses: fregante/setup-git-user@v1
@@ -53,4 +60,9 @@ jobs:
       - run: npm run build:demo
       - run: npm run build:dist
       - run: npm run build:standalone
-      - run: npx --yes [email protected] release ${{ inputs.version }} --prerelease "${{ inputs.prerelease }}" --provenance --changelog --github-release
+      - run: npx --yes [email protected] release ${{ inputs.version }} ${{ inputs.dryrun && '--dry-run' || '' }} ${{ inputs.prerelease && format('--prerelease {0}', inputs.prerelease) || '' }} --provenance --changelog --github-release --verbose
+      - name: Get NPM version
+        id: npm-version
+        uses: martinbeentjes/[email protected]
+      - name: Released ${{ steps.npm-version.outputs.current-version}} ✨
+        run: echo ${{ steps.npm-version.outputs.current-version}}

.github/workflows/ci.yml

@@ -11,9 +11,9 @@ jobs:
         node-version: [18.x]
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
         cache: npm
@@ -28,9 +28,9 @@ jobs:
         node-version: [18.x]
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
         cache: npm
@@ -45,9 +45,9 @@ jobs:
         node-version: [16.x, 18.x, 20.x]
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
         cache: npm

src/ReactPlayer.js

@@ -1,10 +1,10 @@
-import React, { Component, Suspense, lazy } from 'react'
+import React, { Component, Suspense } from 'react'
 import merge from 'deepmerge'
 import memoize from 'memoize-one'
 import isEqual from 'react-fast-compare'
 
 import { propTypes, defaultProps } from './props'
-import { omit } from './utils'
+import { omit, lazy } from './utils'
 import Player from './Player'
 
 const Preview = lazy(() => import(/* webpackChunkName: 'reactPlayerPreview' */'./Preview'))

src/players/index.js

@@ -1,5 +1,4 @@
-import { lazy } from 'react'
-import { supportsWebKitPresentationMode } from '../utils'
+import { lazy, supportsWebKitPresentationMode } from '../utils'
 import { canPlay, AUDIO_EXTENSIONS } from '../patterns'
 
 export default [

src/utils.js

@@ -1,6 +1,15 @@
+import React from 'react'
 import loadScript from 'load-script'
 import merge from 'deepmerge'
 
+/**
+ * Dynamic import is supported in CJS modules but needs interop require default logic.
+ */
+export const lazy = (componentImportFn) => React.lazy(async () => {
+  const obj = await componentImportFn()
+  return typeof obj.default === 'function' ? obj : obj.default
+})
+
 const MATCH_START_QUERY = /[?&#](?:start|t)=([0-9hms]+)/
 const MATCH_END_QUERY = /[?&#]end=([0-9hms]+)/
 const MATCH_START_STAMP = /(\d+)(h|m|s)/g