Add build for IE 11

This commit is contained in:
Bruno Windels 2020-08-05 16:34:41 +00:00
parent 69142909d9
commit 5c50a48eb5
4 changed files with 2228 additions and 18 deletions

2106
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -28,6 +28,13 @@
"postcss": "^7.0.18", "postcss": "^7.0.18",
"postcss-import": "^12.0.1", "postcss-import": "^12.0.1",
"rollup": "^1.15.6", "rollup": "^1.15.6",
"serve-static": "^1.13.2" "serve-static": "^1.13.2",
"@babel/core": "^7.11.1",
"@babel/preset-env": "^7.11.0",
"@rollup/plugin-babel": "^5.1.0",
"@rollup/plugin-commonjs": "^14.0.0",
"@rollup/plugin-node-resolve": "^8.4.0",
"core-js": "^3.6.5",
"regenerator-runtime": "^0.13.7"
} }
} }

View File

@ -7,15 +7,33 @@ import postcss from "postcss";
import postcssImport from "postcss-import"; import postcssImport from "postcss-import";
import { fileURLToPath } from 'url'; import { fileURLToPath } from 'url';
import { dirname } from 'path'; import { dirname } from 'path';
// needed for legacy bundle
import babel from '@rollup/plugin-babel';
// needed to find the polyfill modules in the main-legacy.js bundle
import { nodeResolve } from '@rollup/plugin-node-resolve';
// needed because some of the polyfills are written as commonjs modules
import commonjs from '@rollup/plugin-commonjs';
const PROJECT_ID = "hydrogen";
const PROJECT_SHORT_NAME = "Hydrogen";
const PROJECT_NAME = "Hydrogen Chat";
const __filename = fileURLToPath(import.meta.url); const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename); const __dirname = dirname(__filename);
const projectDir = path.join(__dirname, "../"); const projectDir = path.join(__dirname, "../");
const targetDir = path.join(projectDir, "target"); const targetDir = path.join(projectDir, "target");
const debug = false; const {debug, noOffline, legacy} = process.argv.reduce((params, param) => {
const offline = true; if (param.startsWith("--")) {
params[param.substr(2)] = true;
}
return params;
}, {
debug: false,
noOffline: false,
legacy: false
});
const offline = !noOffline;
async function build() { async function build() {
// get version number // get version number
@ -23,24 +41,31 @@ async function build() {
// clear target dir // clear target dir
await removeDirIfExists(targetDir); await removeDirIfExists(targetDir);
await fs.mkdir(targetDir); await fs.mkdir(targetDir);
let bundleName = `${PROJECT_ID}.js`;
await buildHtml(version); if (legacy) {
await buildJs(); bundleName = `${PROJECT_ID}-legacy.js`;
}
await buildHtml(version, bundleName);
if (legacy) {
await buildJsLegacy(bundleName);
} else {
await buildJs(bundleName);
}
await buildCss(); await buildCss();
if (offline) { if (offline) {
await buildOffline(version); await buildOffline(version, bundleName);
} }
console.log(`built brawl ${version} successfully`); console.log(`built ${PROJECT_ID}${legacy ? " legacy" : ""} ${version} successfully`);
} }
async function buildHtml(version) { async function buildHtml(version, bundleName) {
// transform html file // transform html file
const devHtml = await fs.readFile(path.join(projectDir, "index.html"), "utf8"); const devHtml = await fs.readFile(path.join(projectDir, "index.html"), "utf8");
const doc = cheerio.load(devHtml); const doc = cheerio.load(devHtml);
doc("link[rel=stylesheet]").attr("href", "brawl.css"); doc("link[rel=stylesheet]").attr("href", `${PROJECT_ID}.css`);
doc("script#main").replaceWith( doc("script#main").replaceWith(
`<script type="text/javascript" src="brawl.js"></script>` + `<script type="text/javascript" src="${bundleName}"></script>` +
`<script type="text/javascript">main(document.body);</script>`); `<script type="text/javascript">main(document.body);</script>`);
removeOrEnableScript(doc("script#phone-debug-pre"), debug); removeOrEnableScript(doc("script#phone-debug-pre"), debug);
removeOrEnableScript(doc("script#phone-debug-post"), debug); removeOrEnableScript(doc("script#phone-debug-post"), debug);
@ -59,12 +84,12 @@ async function buildHtml(version) {
await fs.writeFile(path.join(targetDir, "index.html"), doc.html(), "utf8"); await fs.writeFile(path.join(targetDir, "index.html"), doc.html(), "utf8");
} }
async function buildJs() { async function buildJs(bundleName) {
// create js bundle // create js bundle
const rollupConfig = { const rollupConfig = {
input: 'src/main.js', input: 'src/main.js',
output: { output: {
file: path.join(targetDir, "brawl.js"), file: path.join(targetDir, bundleName),
format: 'iife', format: 'iife',
name: 'main' name: 'main'
} }
@ -73,9 +98,38 @@ async function buildJs() {
await bundle.write(rollupConfig); await bundle.write(rollupConfig);
} }
async function buildOffline(version) { async function buildJsLegacy(bundleName) {
// compile down to whatever IE 11 needs
const babelPlugin = babel.babel({
babelHelpers: 'bundled',
presets: [
[
"@babel/preset-env",
{
useBuiltIns: "entry",
corejs: "3",
targets: "IE 11"
}
]
]
});
// create js bundle
const rollupConfig = {
input: 'src/main-legacy.js',
output: {
file: path.join(targetDir, bundleName),
format: 'iife',
name: 'main'
},
plugins: [commonjs(), nodeResolve(), babelPlugin]
};
const bundle = await rollup.rollup(rollupConfig);
await bundle.write(rollupConfig);
}
async function buildOffline(version, bundleName) {
// write offline availability // write offline availability
const offlineFiles = ["brawl.js", "brawl.css", "index.html", "icon-192.png"]; const offlineFiles = [bundleName, `${PROJECT_ID}.css`, "index.html", "icon-192.png"];
// write appcache manifest // write appcache manifest
const manifestLines = [ const manifestLines = [
@ -95,8 +149,8 @@ async function buildOffline(version) {
await fs.writeFile(path.join(targetDir, "sw.js"), swSource, "utf8"); await fs.writeFile(path.join(targetDir, "sw.js"), swSource, "utf8");
// write web manifest // write web manifest
const webManifest = { const webManifest = {
name: "Brawl Chat", name:PROJECT_NAME,
short_name: "Brawl", short_name: PROJECT_SHORT_NAME,
display: "fullscreen", display: "fullscreen",
start_url: "index.html", start_url: "index.html",
icons: [{"src": "icon-192.png", "sizes": "192x192", "type": "image/png"}], icons: [{"src": "icon-192.png", "sizes": "192x192", "type": "image/png"}],
@ -113,7 +167,7 @@ async function buildCss() {
const preCss = await fs.readFile(cssMainFile, "utf8"); const preCss = await fs.readFile(cssMainFile, "utf8");
const cssBundler = postcss([postcssImport]); const cssBundler = postcss([postcssImport]);
const result = await cssBundler.process(preCss, {from: cssMainFile}); const result = await cssBundler.process(preCss, {from: cssMainFile});
await fs.writeFile(path.join(targetDir, "brawl.css"), result.css, "utf8"); await fs.writeFile(path.join(targetDir, `${PROJECT_ID}.css`), result.css, "utf8");
} }

43
src/main-legacy.js Normal file
View File

@ -0,0 +1,43 @@
// polyfills needed for IE11
import "core-js/stable";
import "regenerator-runtime/runtime";
import {xhrRequest} from "./matrix/net/request/xhr.js";
import {SessionContainer} from "./matrix/SessionContainer.js";
import {StorageFactory} from "./matrix/storage/idb/StorageFactory.js";
import {SessionInfoStorage} from "./matrix/sessioninfo/localstorage/SessionInfoStorage.js";
import {BrawlViewModel} from "./domain/BrawlViewModel.js";
import {BrawlView} from "./ui/web/BrawlView.js";
import {Clock} from "./ui/web/dom/Clock.js";
import {OnlineStatus} from "./ui/web/dom/OnlineStatus.js";
export default async function main(container) {
try {
const request = xhrRequest;
const sessionInfoStorage = new SessionInfoStorage("brawl_sessions_v1");
const clock = new Clock();
const storageFactory = new StorageFactory();
const vm = new BrawlViewModel({
createSessionContainer: () => {
return new SessionContainer({
random: Math.random,
onlineStatus: new OnlineStatus(),
storageFactory,
sessionInfoStorage,
request,
clock,
});
},
sessionInfoStorage,
storageFactory,
clock,
});
window.__brawlViewModel = vm;
await vm.load();
const view = new BrawlView(vm);
container.appendChild(view.mount());
} catch(err) {
console.error(`${err.message}:\n${err.stack}`);
}
}