Skip to content

Commit

Permalink
Use webpack to bundle dashboard panels (#17)
Browse files Browse the repository at this point in the history
* Parcel 2

* Replace parcel with webpack for building panels
  • Loading branch information
dani quinn sexton authored Mar 12, 2020
1 parent 49d2b41 commit bfdfc03
Show file tree
Hide file tree
Showing 10 changed files with 7,830 additions and 12,362 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
/dashboard/
/lib/
/.cache/
/.parcel-cache/
/dist/

# Logs
logs
Expand Down
20,045 changes: 7,724 additions & 12,321 deletions package-lock.json

Large diffs are not rendered by default.

28 changes: 15 additions & 13 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,25 @@
"repository": "https://github.com/helloitsdan/nodecg-twitchie.git",
"homepage": "https://github.com/helloitsdan/nodecg-twitchie",
"name": "nodecg-twitchie",
"version": "2.2.0",
"version": "2.3.0",
"license": "MIT",
"engines": {
"node": ">=6.4.0"
},
"scripts": {
"build": "npm run build:dashboard && npm run build:extension && npm run build:client",
"build:dashboard": "parcel build src/dashboard/*.html --out-dir dashboard --public-url ./",
"build": "npm run build:extension && npm run build:dashboard && npm run build:client",
"build:client": "rollup --config rollup.config.client.js",
"build:dashboard": "webpack --config webpack.config.dashboard.js",
"build:extension": "NODE_ENV=production tsc --rootDir src --outDir .",
"build:client": "rollup -c",
"watch": "npm run build -- --watch",
"test": "ava",
"lint:js": "tslint \"{dashboard,extension}/**/*.(ts|js)\"",
"lint": "npm run lint:js",
"precommit": "lint-staged",
"prepush": "npm test"
},
"main": "lib/index.js",
"browser": "lib/index.js",
"dashboard": "dashboard/index.html",
"lint-staged": {
"{dashboard,extension}/**/*.ts": "tslint"
},
Expand Down Expand Up @@ -57,6 +58,7 @@
"@polymer/polymer": "^3.3.1",
"debounce": "^1.2.0",
"express": "^4.17.1",
"moment": "^2.24.0",
"node-cache": "^5.1.0",
"request": "2.88.2",
"request-promise-native": "^1.0.8",
Expand All @@ -71,27 +73,27 @@
"ava": "^3.5.0",
"husky": "^4.2.3",
"lint-staged": "^10.0.8",
"parcel": "^1.12.4",
"prettier": "^1.19.1",
"rollup": "^2.0.3",
"stylelint": "^13.2.1",
"stylelint-config-recommended-scss": "^4.2.0",
"stylelint-scss": "^3.14.2",
"ts-node": "^8.6.2",
"tslib": "^1.11.1",
"tslint": "^6.0.0",
"tslint-config-airbnb": "^5.11.2",
"tslint-config-prettier": "^1.18.0",
"tslint-eslint-rules": "^5.4.0",
"typescript": "^3.8.3"
"typescript": "^3.8.3",
"clean-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^3.2.0",
"terser-webpack-plugin": "^2.3.5",
"ts-loader": "^6.2.1",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11"
},
"resolutions": {
"inherits": "2.0.3",
"samsam": "1.1.3",
"supports-color": "3.1.2",
"type-detect": "1.0.0"
},
"browserslist": [
"last 2 Chrome versions"
]
}
}
File renamed without changes.
13 changes: 0 additions & 13 deletions src/dashboard/channel.html

This file was deleted.

15 changes: 13 additions & 2 deletions src/dashboard/components/twitchie-style/twitchie-style.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,13 @@ const styleElement = document.createElement('dom-module')

styleElement.innerHTML = `<template>
<style>
:root {
--background-color: #2F3A4F;
--primary-text-color: #fff;
--secondary-text-color: rgba(255, 255, 255, 0.5);
--primary-color: #6441a4;
}
h1,
h2,
h3,
Expand Down Expand Up @@ -36,7 +43,7 @@ styleElement.innerHTML = `<template>
}
paper-spinner {
--paper-spinner-layer-1-color: #6441a5;
--paper-spinner-layer-1-color: var(--primary-color);
--paper-spinner-layer-2-color: var(--paper-spinner-layer-1-color);
--paper-spinner-layer-3-color: var(--paper-spinner-layer-1-color);
--paper-spinner-layer-4-color: var(--paper-spinner-layer-1-color);
Expand Down Expand Up @@ -87,7 +94,7 @@ styleElement.innerHTML = `<template>
align-items: center;
justify-content: center;
background: #f5f5f5;
background: var(--background-color);
opacity: 0;
visibility: hidden;
transition: 0.3s all ease-in-out;
Expand All @@ -107,6 +114,10 @@ styleElement.innerHTML = `<template>
.c-loading__spinner {
margin: 0 0.5em 0 0;
}
svg {
fill: currentColor;
}
</style>
</template>`

Expand Down
11 changes: 11 additions & 0 deletions src/dashboard/panel-template.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
</head>

<body>
<div id="app"></div>
</body>
</html>
6 changes: 6 additions & 0 deletions src/dashboard/scripts/channel.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import '../components/twitchie-channel-info/twitchie-channel-info.js'
import './verify-login'

document.getElementById('app').innerHTML = `
<twitchie-channel-info></twitchie-channel-info>
`
26 changes: 13 additions & 13 deletions tslint.json
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
{
"extends": ["tslint:recommended", "tslint-config-airbnb", "tslint-config-prettier"],
"rules": {
"import-name": false,
"interface-name": [true, "never-prefix"],
"no-console": { "severity": "warning" },
"no-non-null-assertion": false,
"no-submodule-imports": false,
"object-literal-sort-keys": false,
"semicolon": [true, "never"],
"variable-name": [true, "ban-keywords", "check-format", "allow-leading-underscore", "allow-pascal-case"],
"prefer-array-literal": [true, { "allow-type-parameters": true }]
}
}
"extends": ["tslint:recommended", "tslint-config-airbnb", "tslint-config-prettier"],
"rules": {
"import-name": false,
"interface-name": [true, "never-prefix"],
"no-console": { "severity": "warning" },
"no-non-null-assertion": false,
"no-submodule-imports": false,
"object-literal-sort-keys": false,
"semicolon": [true, "never"],
"variable-name": [true, "ban-keywords", "check-format", "allow-leading-underscore", "allow-pascal-case"],
"prefer-array-literal": [true, { "allow-type-parameters": true }]
}
}
46 changes: 46 additions & 0 deletions webpack.config.dashboard.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const panels = {
channel: './src/dashboard/scripts/channel.js',
}

const pages = Object.keys(panels).map(
name =>
new HtmlWebpackPlugin({
filename: `${name}.html`,
template: path.join(__dirname, 'src', 'dashboard', `panel-template.html`),
chunks: ['vendor', 'shared', name],
})
)

module.exports = {
mode: 'production',
entry: panels,
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all',
priority: 1,
},
shared: {
test: /\.s?js$/,
minSize: 0,
minChunks: 2,
name: 'shared',
chunks: 'all',
priority: 0,
},
},
},
},
plugins: [new CleanWebpackPlugin(), ...pages],
output: {
filename: '[name].js',
path: path.join(__dirname, 'dashboard'),
},
}

0 comments on commit bfdfc03

Please sign in to comment.