Skip to content

Commit

Permalink
fix: modernize build using esbuild (#1684)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
luwes authored Oct 10, 2023
1 parent 3d47152 commit 8a4a9aa
Show file tree
Hide file tree
Showing 57 changed files with 6,656 additions and 11,263 deletions.
51 changes: 42 additions & 9 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,27 @@ on: [push, pull_request]

jobs:
build:
runs-on: ubuntu-latest

strategy:
matrix:
# node-version: [16.x, 18.x, 20.x]
node-version: [16.x]

steps:
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
cache: npm
- run: npm ci
- run: npm run build:lib
- run: npm run build:demo
- run: npm run build:dist
- run: npm run build:standalone

lint:
runs-on: ubuntu-latest

strategy:
Expand All @@ -13,16 +33,29 @@ jobs:
node-version: [16.x]

steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
- run: yarn install
- run: yarn lint
- run: yarn test:coverage -v
- run: yarn build:lib
- run: yarn build:demo
- run: yarn build:dist
- run: yarn build:standalone
cache: npm
- run: npm ci
- run: npm run lint

test:
runs-on: ubuntu-latest

strategy:
matrix:
# node-version: [16.x, 18.x, 20.x]
node-version: [16.x]

steps:
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
cache: npm
- run: npm ci
- run: npm run test:coverage
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
node_modules
npm-debug.log
yarn-error.log
package-lock.json
.DS_Store
/lib
/lazy
Expand All @@ -10,3 +9,4 @@ package-lock.json
/es6
.idea/
.vscode/
/disttest/
28 changes: 0 additions & 28 deletions babel.config.js

This file was deleted.

12 changes: 7 additions & 5 deletions src/demo/App.css → examples/react/public/App.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
$column-width: 480px;
$gutter-width: 20px;
:root {
--column-width: 480px;
--gutter-width: 20px;
}

.app {
margin: auto;
Expand All @@ -10,8 +12,8 @@ $gutter-width: 20px;

.section {
display: inline-block;
max-width: $column-width;
margin: $gutter-width;
max-width: var(--column-width);
margin: var(--gutter-width);
text-align: left;
vertical-align: top;
}
Expand All @@ -31,5 +33,5 @@ $gutter-width: 20px;
}

.footer {
margin: $gutter-width;
margin: var(--gutter-width);
}
121 changes: 121 additions & 0 deletions examples/react/public/defaults.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
:root {
/*
* Variables with --color-base prefix define
* the hue, and saturation values to be used for
* hsla colors.
*
* ex:
*
* --color-base-{color}: {hue}, {saturation};
*
*/

--color-base-white: 0 0%;
--color-base-black: 240 100%;
--color-base-gray: 60 3%;

/*
* Color palettes are made using --color-base
* variables, along with a lightness value to
* define different variants.
*
*/

--color-gray-5: var(--color-base-gray) 5%;
--color-gray-10: var(--color-base-gray) 10%;
--color-gray-20: var(--color-base-gray) 20%;
--color-gray-30: var(--color-base-gray) 30%;
--color-gray-40: var(--color-base-gray) 40%;
--color-gray-50: var(--color-base-gray) 50%;
--color-gray-60: var(--color-base-gray) 60%;
--color-gray-70: var(--color-base-gray) 70%;
--color-gray-80: var(--color-base-gray) 80%;
--color-gray-90: var(--color-base-gray) 90%;
--color-gray-95: var(--color-base-gray) 95%;
}

body {
margin-right: 10px;
margin-left: 10px;
font-size: 14px;
line-height: 1.4;
}

em {
font-style: italic;
}

body,
h1,
h2,
h3 {
font-weight: 300;
margin-bottom: 1em;
}

h1 { font-size: 20px; }
h2 { font-size: 16px; margin-top: 1em; }

table,
progress {
width: 100%;
}

th,
td,
[type=text],
textarea {
margin-right: 5px;
padding: 3px 6px;
}

th {
width: 10%;
font-weight: 500;
text-align: right;
white-space: nowrap;
vertical-align: middle;
}

[type=text],
textarea {
width: 200px;
padding: 5px;
border: 1px solid hsl(var(--color-gray-70));
border-radius: 3px;
outline: 0;
}

[type=text]:focus,
textarea:focus {
border-color: hsl(var(--color-gray-50));
box-shadow: 0 0 5px hsl(var(--color-gray-90));
}

textarea {
height: 100px;
font-family: monospace;
vertical-align: bottom;
}

button {
cursor: pointer;
margin: 3px;
padding: 6px 12px;
border: 0;
border-radius: 3px;
outline: 0;
background-color: hsl(var(--color-gray-95));
}

button:focus {
background-color: hsl(var(--color-gray-90));
}

button:hover {
background-color: hsl(var(--color-gray-80));
}

button:active {
background-color: hsl(var(--color-gray-70));
}
16 changes: 16 additions & 0 deletions examples/react/public/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>ReactPlayer Demo</title>
<link rel='stylesheet' href='./reset.css'>
<link rel='stylesheet' href='./defaults.css'>
<link rel='stylesheet' href='./range.css'>
<link rel='stylesheet' href='./App.css'>
<script defer src='./index.js'></script>
</head>
<body>
<div id='app'></div>
</body>
</html>
83 changes: 83 additions & 0 deletions examples/react/public/range.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
/*
// Styling Cross-Browser Compatible Range Inputs with Sass
// Github: https://github.com/darlanrod/input-range-sass
// Author: Darlan Rod https://github.com/darlanrod
// Version 1.4.1
// MIT License
*/
/* Transformed to plain CSS and removed -ms selectors */

:root {
--track-color: #eee;
--thumb-color: #666;
--thumb-radius: 12px;
--thumb-height: 12px;
--thumb-width: 12px;
--thumb-shadow-size: 0;
--thumb-shadow-blur: 0;
--thumb-shadow-color: #111;
--thumb-border-width: 0;
--thumb-border-color: #fff;
--track-width: 100%;
--track-height: 10px;
--track-shadow-size: 0;
--track-shadow-blur: 0;
--track-shadow-color: #222;
--track-border-width: 0;
--track-border-color: #000;
--track-radius: 5px;
}

[type='range'] {
-webkit-appearance: none;
margin: var(--thumb-height) / 2 0;
width: var(--track-width);
}

[type='range']:focus {
outline: 0;
}

[type='range']::-webkit-slider-runnable-track {
cursor: pointer;
height: var(--track-height);
transition: all 0.2s ease;
width: var(--track-width);
background: var(--track-color);
border: var(--track-border-width) solid var(--track-border-color);
border-radius: var(--track-radius);
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%);
}

[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: pointer;
width: var(--thumb-width);
height: var(--thumb-height);
background: var(--thumb-color);
border: var(--thumb-border-width) solid var(--thumb-border-color);
border-radius: var(--thumb-radius);
margin-top: calc((var(--track-border-width) * -2 + var(--track-height)) / 2 - (var(--thumb-height) / 2));
box-shadow: var(--thumb-shadow-size) var(--thumb-shadow-size) var(--thumb-shadow-blur) var(--thumb-shadow-color);
}

[type='range']::-moz-range-track {
cursor: pointer;
height: var(--track-height);
transition: all 0.2s ease;
width: var(--track-width);
background: var(--track-color);
border: var(--track-border-width) solid var(--track-border-color);
border-radius: var(--track-radius);
box-shadow: var(--track-shadow-size) var(--track-shadow-size) var(--track-shadow-blur) var(--track-shadow-color);
}

[type='range']::-moz-range-thumb {
cursor: pointer;
width: var(--thumb-width);
height: var(--thumb-height);
background: var(--thumb-color);
border: var(--thumb-border-width) solid var(--thumb-border-color);
border-radius: var(--thumb-radius);
box-shadow: var(--thumb-shadow-size) var(--thumb-shadow-size) var(--thumb-shadow-blur) var(--thumb-shadow-color);
}
File renamed without changes.
15 changes: 4 additions & 11 deletions src/demo/App.js → examples/react/src/App.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,8 @@
import React, { Component } from 'react'
import { findDOMNode } from 'react-dom'
import { hot } from 'react-hot-loader'
import screenfull from 'screenfull'

import './reset.css'
import './defaults.css'
import './range.css'
import './App.css'

import { version } from '../../package.json'
import ReactPlayer from '../index'
import { version } from '../../../package.json'
import ReactPlayer from '../../..'
import Duration from './Duration'

class App extends Component {
Expand Down Expand Up @@ -133,7 +126,7 @@ class App extends Component {
}

handleClickFullscreen = () => {
screenfull.request(findDOMNode(this.player))
screenfull.request(document.querySelector('.react-player'))
}

renderLoadButton = (url, label) => {
Expand Down Expand Up @@ -435,4 +428,4 @@ class App extends Component {
}
}

export default hot(module)(App)
export default App
File renamed without changes.
File renamed without changes.
Loading

0 comments on commit 8a4a9aa

Please sign in to comment.