Skip to content

Commit 8a4a9aa

Browse files
luwesluwes
authored
fix: modernize build using esbuild (#1684)
* fix: modernize build using esbuild * example: build & serve demo w/ esbuild move to examples folder so more apps could be added * tools: add livereload, fix demo target folder * tools: remove Webpack tooling * tools: remove babel-eslint, upgrade standard * fix: robust minimal test stack esbuild/zora/c8 * fix: add esbuild global externals plugin evanw/esbuild#337
1 parent 3d47152 commit 8a4a9aa

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+6656
-11263
lines changed

‎.github/workflows/ci.yml

+42-9
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,27 @@ on: [push, pull_request]
44

55
jobs:
66
build:
7+
runs-on: ubuntu-latest
8+
9+
strategy:
10+
matrix:
11+
# node-version: [16.x, 18.x, 20.x]
12+
node-version: [16.x]
13+
14+
steps:
15+
- uses: actions/checkout@v3
16+
- name: Use Node.js ${{ matrix.node-version }}
17+
uses: actions/setup-node@v3
18+
with:
19+
node-version: ${{ matrix.node-version }}
20+
cache: npm
21+
- run: npm ci
22+
- run: npm run build:lib
23+
- run: npm run build:demo
24+
- run: npm run build:dist
25+
- run: npm run build:standalone
726

27+
lint:
828
runs-on: ubuntu-latest
929

1030
strategy:
@@ -13,16 +33,29 @@ jobs:
1333
node-version: [16.x]
1434

1535
steps:
16-
- uses: actions/checkout@v2
36+
- uses: actions/checkout@v3
1737
- name: Use Node.js ${{ matrix.node-version }}
18-
uses: actions/setup-node@v1
38+
uses: actions/setup-node@v3
1939
with:
2040
node-version: ${{ matrix.node-version }}
21-
- run: yarn install
22-
- run: yarn lint
23-
- run: yarn test:coverage -v
24-
- run: yarn build:lib
25-
- run: yarn build:demo
26-
- run: yarn build:dist
27-
- run: yarn build:standalone
41+
cache: npm
42+
- run: npm ci
43+
- run: npm run lint
2844

45+
test:
46+
runs-on: ubuntu-latest
47+
48+
strategy:
49+
matrix:
50+
# node-version: [16.x, 18.x, 20.x]
51+
node-version: [16.x]
52+
53+
steps:
54+
- uses: actions/checkout@v3
55+
- name: Use Node.js ${{ matrix.node-version }}
56+
uses: actions/setup-node@v3
57+
with:
58+
node-version: ${{ matrix.node-version }}
59+
cache: npm
60+
- run: npm ci
61+
- run: npm run test:coverage

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
node_modules
22
npm-debug.log
33
yarn-error.log
4-
package-lock.json
54
.DS_Store
65
/lib
76
/lazy
@@ -10,3 +9,4 @@ package-lock.json
109
/es6
1110
.idea/
1211
.vscode/
12+
/disttest/

‎babel.config.js

-28
This file was deleted.

‎src/demo/App.css renamed to ‎examples/react/public/App.css

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
$column-width: 480px;
2-
$gutter-width: 20px;
1+
:root {
2+
--column-width: 480px;
3+
--gutter-width: 20px;
4+
}
35

46
.app {
57
margin: auto;
@@ -10,8 +12,8 @@ $gutter-width: 20px;
1012

1113
.section {
1214
display: inline-block;
13-
max-width: $column-width;
14-
margin: $gutter-width;
15+
max-width: var(--column-width);
16+
margin: var(--gutter-width);
1517
text-align: left;
1618
vertical-align: top;
1719
}
@@ -31,5 +33,5 @@ $gutter-width: 20px;
3133
}
3234

3335
.footer {
34-
margin: $gutter-width;
36+
margin: var(--gutter-width);
3537
}

‎examples/react/public/defaults.css

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
:root {
2+
/*
3+
* Variables with --color-base prefix define
4+
* the hue, and saturation values to be used for
5+
* hsla colors.
6+
*
7+
* ex:
8+
*
9+
* --color-base-{color}: {hue}, {saturation};
10+
*
11+
*/
12+
13+
--color-base-white: 0 0%;
14+
--color-base-black: 240 100%;
15+
--color-base-gray: 60 3%;
16+
17+
/*
18+
* Color palettes are made using --color-base
19+
* variables, along with a lightness value to
20+
* define different variants.
21+
*
22+
*/
23+
24+
--color-gray-5: var(--color-base-gray) 5%;
25+
--color-gray-10: var(--color-base-gray) 10%;
26+
--color-gray-20: var(--color-base-gray) 20%;
27+
--color-gray-30: var(--color-base-gray) 30%;
28+
--color-gray-40: var(--color-base-gray) 40%;
29+
--color-gray-50: var(--color-base-gray) 50%;
30+
--color-gray-60: var(--color-base-gray) 60%;
31+
--color-gray-70: var(--color-base-gray) 70%;
32+
--color-gray-80: var(--color-base-gray) 80%;
33+
--color-gray-90: var(--color-base-gray) 90%;
34+
--color-gray-95: var(--color-base-gray) 95%;
35+
}
36+
37+
body {
38+
margin-right: 10px;
39+
margin-left: 10px;
40+
font-size: 14px;
41+
line-height: 1.4;
42+
}
43+
44+
em {
45+
font-style: italic;
46+
}
47+
48+
body,
49+
h1,
50+
h2,
51+
h3 {
52+
font-weight: 300;
53+
margin-bottom: 1em;
54+
}
55+
56+
h1 { font-size: 20px; }
57+
h2 { font-size: 16px; margin-top: 1em; }
58+
59+
table,
60+
progress {
61+
width: 100%;
62+
}
63+
64+
th,
65+
td,
66+
[type=text],
67+
textarea {
68+
margin-right: 5px;
69+
padding: 3px 6px;
70+
}
71+
72+
th {
73+
width: 10%;
74+
font-weight: 500;
75+
text-align: right;
76+
white-space: nowrap;
77+
vertical-align: middle;
78+
}
79+
80+
[type=text],
81+
textarea {
82+
width: 200px;
83+
padding: 5px;
84+
border: 1px solid hsl(var(--color-gray-70));
85+
border-radius: 3px;
86+
outline: 0;
87+
}
88+
89+
[type=text]:focus,
90+
textarea:focus {
91+
border-color: hsl(var(--color-gray-50));
92+
box-shadow: 0 0 5px hsl(var(--color-gray-90));
93+
}
94+
95+
textarea {
96+
height: 100px;
97+
font-family: monospace;
98+
vertical-align: bottom;
99+
}
100+
101+
button {
102+
cursor: pointer;
103+
margin: 3px;
104+
padding: 6px 12px;
105+
border: 0;
106+
border-radius: 3px;
107+
outline: 0;
108+
background-color: hsl(var(--color-gray-95));
109+
}
110+
111+
button:focus {
112+
background-color: hsl(var(--color-gray-90));
113+
}
114+
115+
button:hover {
116+
background-color: hsl(var(--color-gray-80));
117+
}
118+
119+
button:active {
120+
background-color: hsl(var(--color-gray-70));
121+
}

‎examples/react/public/index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset='utf-8'>
5+
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
6+
<title>ReactPlayer Demo</title>
7+
<link rel='stylesheet' href='./reset.css'>
8+
<link rel='stylesheet' href='./defaults.css'>
9+
<link rel='stylesheet' href='./range.css'>
10+
<link rel='stylesheet' href='./App.css'>
11+
<script defer src='./index.js'></script>
12+
</head>
13+
<body>
14+
<div id='app'></div>
15+
</body>
16+
</html>

‎examples/react/public/range.css

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
/*
2+
// Styling Cross-Browser Compatible Range Inputs with Sass
3+
// Github: https://github.com/darlanrod/input-range-sass
4+
// Author: Darlan Rod https://github.com/darlanrod
5+
// Version 1.4.1
6+
// MIT License
7+
*/
8+
/* Transformed to plain CSS and removed -ms selectors */
9+
10+
:root {
11+
--track-color: #eee;
12+
--thumb-color: #666;
13+
--thumb-radius: 12px;
14+
--thumb-height: 12px;
15+
--thumb-width: 12px;
16+
--thumb-shadow-size: 0;
17+
--thumb-shadow-blur: 0;
18+
--thumb-shadow-color: #111;
19+
--thumb-border-width: 0;
20+
--thumb-border-color: #fff;
21+
--track-width: 100%;
22+
--track-height: 10px;
23+
--track-shadow-size: 0;
24+
--track-shadow-blur: 0;
25+
--track-shadow-color: #222;
26+
--track-border-width: 0;
27+
--track-border-color: #000;
28+
--track-radius: 5px;
29+
}
30+
31+
[type='range'] {
32+
-webkit-appearance: none;
33+
margin: var(--thumb-height) / 2 0;
34+
width: var(--track-width);
35+
}
36+
37+
[type='range']:focus {
38+
outline: 0;
39+
}
40+
41+
[type='range']::-webkit-slider-runnable-track {
42+
cursor: pointer;
43+
height: var(--track-height);
44+
transition: all 0.2s ease;
45+
width: var(--track-width);
46+
background: var(--track-color);
47+
border: var(--track-border-width) solid var(--track-border-color);
48+
border-radius: var(--track-radius);
49+
box-shadow: var(--track-shadow-size) var(--track-shadow-size) var(--track-shadow-blur) var(--track-shadow-color), 0 0 var(--track-shadow-size) lighten(var(--track-shadow-color), 5%);
50+
}
51+
52+
[type='range']::-webkit-slider-thumb {
53+
-webkit-appearance: none;
54+
cursor: pointer;
55+
width: var(--thumb-width);
56+
height: var(--thumb-height);
57+
background: var(--thumb-color);
58+
border: var(--thumb-border-width) solid var(--thumb-border-color);
59+
border-radius: var(--thumb-radius);
60+
margin-top: calc((var(--track-border-width) * -2 + var(--track-height)) / 2 - (var(--thumb-height) / 2));
61+
box-shadow: var(--thumb-shadow-size) var(--thumb-shadow-size) var(--thumb-shadow-blur) var(--thumb-shadow-color);
62+
}
63+
64+
[type='range']::-moz-range-track {
65+
cursor: pointer;
66+
height: var(--track-height);
67+
transition: all 0.2s ease;
68+
width: var(--track-width);
69+
background: var(--track-color);
70+
border: var(--track-border-width) solid var(--track-border-color);
71+
border-radius: var(--track-radius);
72+
box-shadow: var(--track-shadow-size) var(--track-shadow-size) var(--track-shadow-blur) var(--track-shadow-color);
73+
}
74+
75+
[type='range']::-moz-range-thumb {
76+
cursor: pointer;
77+
width: var(--thumb-width);
78+
height: var(--thumb-height);
79+
background: var(--thumb-color);
80+
border: var(--thumb-border-width) solid var(--thumb-border-color);
81+
border-radius: var(--thumb-radius);
82+
box-shadow: var(--thumb-shadow-size) var(--thumb-shadow-size) var(--thumb-shadow-blur) var(--thumb-shadow-color);
83+
}

‎src/demo/reset.css renamed to ‎examples/react/public/reset.css

File renamed without changes.

‎src/demo/App.js renamed to ‎examples/react/src/App.js

+4-11
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,8 @@
11
import React, { Component } from 'react'
2-
import { findDOMNode } from 'react-dom'
3-
import { hot } from 'react-hot-loader'
42
import screenfull from 'screenfull'
53

6-
import './reset.css'
7-
import './defaults.css'
8-
import './range.css'
9-
import './App.css'
10-
11-
import { version } from '../../package.json'
12-
import ReactPlayer from '../index'
4+
import { version } from '../../../package.json'
5+
import ReactPlayer from '../../..'
136
import Duration from './Duration'
147

158
class App extends Component {
@@ -133,7 +126,7 @@ class App extends Component {
133126
}
134127

135128
handleClickFullscreen = () => {
136-
screenfull.request(findDOMNode(this.player))
129+
screenfull.request(document.querySelector('.react-player'))
137130
}
138131

139132
renderLoadButton = (url, label) => {
@@ -435,4 +428,4 @@ class App extends Component {
435428
}
436429
}
437430

438-
export default hot(module)(App)
431+
export default App

‎src/demo/Duration.js renamed to ‎examples/react/src/Duration.js

File renamed without changes.

‎src/demo/index.js renamed to ‎examples/react/src/index.js

File renamed without changes.

0 commit comments

Comments
 (0)