secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Moving HTML builder into webpack

Browse Source 
- Allows handling of template variables
- Retaining test_mode switch for hot-swap JS bundle
This commit is contained in:
James Barnsley
2022-11-12 08:52:38 +13:00
parent 074b97ce7d
commit 154e72234e
3 changed files with 41 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
build_tools/build.js
View File

@ -8,15 +8,15 @@
* To run, execute npm run dev|build|prod|release * To run, execute npm run dev|build|prod|release
**/ **/
var fs = require('fs'); const process = require( 'process' );
var path = require('path'); const fs = require('fs');
var rimraf = require('rimraf'); const path = require('path');
var copydir = require('copy-dir'); const rimraf = require('rimraf');
var copyfile = require('fs-copy-file'); const copydir = require('copy-dir');
var version = fs.readFileSync("IRIS_VERSION", "utf8"); const copyfile = require('fs-copy-file');
let version = fs.readFileSync("IRIS_VERSION", "utf8");
version = version.replace(/\r?\n?/g, '').trim(); version = version.replace(/\r?\n?/g, '').trim();
var build = Math.floor(Date.now() / 1000); console.log('Building version '+version+'');
console.log('Building version '+version+' ('+build+')');
if (fs.existsSync('mopidy_iris/static/')){ if (fs.existsSync('mopidy_iris/static/')){
rimraf.sync('mopidy_iris/static/'); rimraf.sync('mopidy_iris/static/');
@ -53,12 +53,12 @@ copydir('src/assets', 'mopidy_iris/static/assets', { filter: assetsFilter }, fun
console.log('Copied assets'); console.log('Copied assets');
var html_file = "mopidy_iris/static/index.html"; // var html_file = "mopidy_iris/static/index.html";
var html_file_content = fs.readFileSync("src/index.html", "utf8"); // var html_file_content = fs.readFileSync("src/index.html", "utf8");
html_file_content = html_file_content.replace("VERSION_HERE", version); // html_file_content = html_file_content.replace("VERSION_HERE", version);
html_file_content = html_file_content.replace("BUILD_HERE", build); // html_file_content = html_file_content.replace("BUILD_HERE", build);
fs.writeFileSync(html_file, html_file_content, 'utf8'); // fs.writeFileSync(html_file, html_file_content, 'utf8');
console.log('Setting version in HTML'); // console.log('Setting version in HTML');
console.log('Setting version in manifest.json'); console.log('Setting version in manifest.json');
var manifest_file = "mopidy_iris/static/manifest.json"; var manifest_file = "mopidy_iris/static/manifest.json";
@ -83,9 +83,7 @@ copydir('src/assets', 'mopidy_iris/static/assets', { filter: assetsFilter }, fun
var package_file_content = fs.readFileSync(package_file, "utf8"); var package_file_content = fs.readFileSync(package_file, "utf8");
package_file_content = package_file_content.replace(/(?:\"version\"\:\ \")(?:.*)"/, '"version": "'+version+'"'); package_file_content = package_file_content.replace(/(?:\"version\"\:\ \")(?:.*)"/, '"version": "'+version+'"');
fs.writeFileSync(package_file, package_file_content, 'utf8'); fs.writeFileSync(package_file, package_file_content, 'utf8');
console.log('Done!');
return true;
}); });
return false; return false;

17
src/index.html
View File

@ -1,7 +1,7 @@
<html> <html>
<head> <head>
<title>Iris</title> <title>Iris</title>
<base id="base_href" href="/iris/" /> <base id="base_href" href="<%= baseHref %>" />
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Iris" /> <meta name="apple-mobile-web-app-title" content="Iris" />
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
@ -69,10 +69,6 @@
</style> </style>
</head> </head>
<script type="text/javascript"> <script type="text/javascript">
var base_href = document.location.pathname.indexOf('/iris/') > -1 ? '/iris/' : '/';
const baseObject = document.getElementById('base_href');
baseObject.href = base_href;
var links = [ var links = [
{ rel: 'manifest', href: 'manifest.json', crossorigin: 'use-credentials' }, { rel: 'manifest', href: 'manifest.json', crossorigin: 'use-credentials' },
{ rel: 'apple-touch-startup-image', href: 'assets/app-icon_512.png' }, { rel: 'apple-touch-startup-image', href: 'assets/app-icon_512.png' },
@ -96,7 +92,7 @@
for (const link of links) { for (const link of links) {
const linkObject = document.createElement('link'); const linkObject = document.createElement('link');
linkObject.rel = link.rel; linkObject.rel = link.rel;
linkObject.href = base_href + link.href; linkObject.href = link.href;
if (link.type) linkObject.type = link.type; if (link.type) linkObject.type = link.type;
if (link.sizes) linkObject.sizes = link.sizes; if (link.sizes) linkObject.sizes = link.sizes;
if (link.color) linkObject.color = link.color; if (link.color) linkObject.color = link.color;
@ -142,10 +138,8 @@
} }
} }
// Release details var build = "<%= build %>";
// These are automatically injected to built HTML var version = "<%= version %>";
var build = "BUILD_HERE";
var version = "VERSION_HERE";
// Construct the script tag // Construct the script tag
var js = document.createElement("script"); var js = document.createElement("script");
@ -157,7 +151,8 @@
// Check for test mode. This is toggled under Settings > Debug > Test mode or can // Check for test mode. This is toggled under Settings > Debug > Test mode or can
// be manually triggered with the URL var "?test_mode=1" // be manually triggered with the URL var "?test_mode=1"
if (window.location.href.indexOf('test_mode=1') > -1) { var test_mode = <%= isDevServer %> || window.location.href.indexOf('test_mode=1') > -1;
if (test_mode) {
window.test_mode = true; window.test_mode = true;
localStorage.setItem('test_mode', true); localStorage.setItem('test_mode', true);
} else if (window.location.href.indexOf('test_mode=0') > -1) { } else if (window.location.href.indexOf('test_mode=0') > -1) {

20
webpack.config.js
View File

@ -5,6 +5,11 @@ const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
const fs = require('fs');
let version = fs.readFileSync("IRIS_VERSION", "utf8");
version = version.replace(/\r?\n?/g, '').trim();
const build = Math.floor(Date.now() / 1000);
const config = { const config = {
mode: process.env.NODE_ENV, mode: process.env.NODE_ENV,
context: path.resolve(__dirname), context: path.resolve(__dirname),
@ -91,7 +96,16 @@ const config = {
new MiniCssExtractPlugin({ new MiniCssExtractPlugin({
filename: `app${isDev ? '' : '.min'}.css`, filename: `app${isDev ? '' : '.min'}.css`,
}), }),
...isDevServer ? [new HtmlWebpackPlugin({ template: './src/index.html' })] : [], new HtmlWebpackPlugin({
inject: false,
template: './src/index.html',
templateParameters: {
isDevServer: isDevServer ? 1 : 0,
baseHref: isDevServer ? '/' : '/iris/',
version: `${version}-${isDevServer ? 'DEV_SERVER' : ''}`,
build,
},
}),
], ],
watchOptions: { watchOptions: {
poll: true, poll: true,
@ -99,6 +113,10 @@ const config = {
devtool: (isDev ? 'source-map' : false), devtool: (isDev ? 'source-map' : false),
devServer: { devServer: {
historyApiFallback: true, historyApiFallback: true,
port: 6681,
client: {
overlay: true,
},
static: [ static: [
{ {
directory: path.join(__dirname, 'mopidy_iris', 'static', 'assets'), directory: path.join(__dirname, 'mopidy_iris', 'static', 'assets'),