assets/build.mjs at master · gridsound/assets · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
import fs from "node:fs";
import { exec } from "child_process";
const conf = "build-conf.json";
const info = fs.existsSync( conf )
	? JSON.parse( fs.readFileSync( conf, "utf-8" ) )
	: {};

const headerLines = [
	`<!DOCTYPE html>`,
	`<html lang="en">`,
	`<head>`,
	`<title>${ info.title }</title>`,
	`<meta charset="utf-8"/>`,
	`<meta name="viewport" content="width=device-width, user-scalable=no"/>`,
	`<meta name="description" content="${ info.desc }"/>`,
	`<meta name="google" content="notranslate"/>`,
	`<meta name="theme-color" content="#3a5158"/>`,
	`<meta property="og:type" content="website"/>`,
	info.title    && `<meta property="og:title" content="${ info.title }"/>`,
	info.url      && `<meta property="og:url" content="${ info.url }"/>`,
	info.ogImage  && `<meta property="og:image" content="${ info.ogImage }"/>`,
	info.ogImageW && `<meta property="og:image:width" content="${ info.ogImageW }"/>`,
	info.ogImageH && `<meta property="og:image:height" content="${ info.ogImageH }"/>`,
	info.desc     && `<meta property="og:description" content="${ info.desc }"/>`,
	info.manifest && `<link rel="manifest" href="${ info.manifest }"/>`,
	info.favicon  && `<link rel="shortcut icon" href="${ info.favicon }"/>`,
];

const bodyLines = [
	`</head>`,
	`<body>`,
	`<noscript>It needs JavaScript to run</noscript>`,
];

const endLines = [
	`</body>`,
	`</html>`,
];

async function writeDevFile( prefix = "" ) {
	return [
		formatLines( headerLines ) + "\n",
		info.cssSrcA      && formatSep, ...( info.cssSrcA || [] ).map( s => formatStyle( s ) ),
		info.cssDep       && formatSep, ...( info.cssDep  || [] ).map( s => formatStyle( `${ prefix }${ s }` ) ),
		info.cssSrcB      && formatSep, ...( info.cssSrcB || [] ).map( s => formatStyle( s ) ),
		                     formatSep, formatLines( bodyLines ) + "\n",
		info.splashScreen && formatSep, info.splashScreen && await readFile( info.splashScreen ),
		info.jsSrcA       && formatSep, ...( info.jsSrcA || [] ).map( s => formatScript( s ) ),
		info.jsDep        && formatSep, ...( info.jsDep  || [] ).map( s => formatScript( `${ prefix }${ s }` ) ),
		info.jsSrcB       && formatSep, ...( info.jsSrcB || [] ).map( s => formatScript( s ) ),
		formatLines( endLines ),
	].filter( Boolean ).join( "" );
}

async function writeProFile() {
	const cssSrcA = await readFiles( info.cssSrcA );
	const cssSrcB = await readFiles( info.cssSrcB );
	const cssDep = await readFiles( info.cssDep );
	const jsSrcA = await readFiles( info.jsSrcA );
	const jsSrcB = await readFiles( info.jsSrcB );
	const jsDep = await readFiles( info.jsDep );
	let jsPre = "";

	if ( info.serviceWorker ) {
		jsPre += `navigator.serviceWorker?.register( "${ info.serviceWorker }" ).then(
			reg => console.log( "Service worker:", reg ),
			err => console.warn( "Service worker registration failed:", err )
		);\n`;
	}

	const jsAll = ( jsPre + jsSrcA + jsDep + jsSrcB )
		.replace( "const __LOCALHOST__ = true;", "const __LOCALHOST__ = false;" );

	fs.writeFileSync( "allCSS.css", cssSrcA + cssDep + cssSrcB );
	fs.writeFileSync( "allJS.js", jsAll );

	const cssMin = await execLightningCSS( "allCSS.css" );
	const jsMin = await execTerser( "allJS.js" );

	fs.unlinkSync( "allCSS.css" );
	fs.unlinkSync( "allJS.js" );
	return [
		formatLines( headerLines ) + "\n",
		`<style>\n${ cssMin }</style>\n`,
		formatLines( bodyLines ) + "\n",
		info.splashScreen && await readFile( info.splashScreen ),
		`<script>\n"use strict";${ jsMin }</script>\n`,
		formatLines( endLines ),
	].filter( Boolean ).join( "" )
		.replaceAll( "{{GSDAW-VERSION}}", info.version )
		.replaceAll( "//localhost/gridsound/api.gridsound.com/compositions/", "//compositions.gridsound.com/" )
		.replaceAll( "//localhost/gridsound/api.gridsound.com/api/", "//api.gridsound.com/" )
		.replaceAll( "//localhost/gridsound/daw/", "//daw.gridsound.com/" );
}

// .............................................................................
const formatLines = lines => lines.filter( Boolean ).join( "\n" );
const formatScript = s => `<script src="${ s }"></script>\n`;
const formatStyle = s => `<link rel="stylesheet" href="${ s }"/>\n`;
const formatSep = `<!-- ${ ( new Array( 71 ) ).join( "." ) } -->\n`;

// .............................................................................
function lg( s ) {
	process.stdout.write( s );
}
function readFiles( paths ) {
	const prom = [];

	paths?.forEach( p => prom.push( readFile( p ) ) );
	return Promise.all( prom ).then( arr => arr.join( "\n" ) + "\n" );
}
function readFile( path ) {
	return new Promise( res => {
		fs.readFile( path, "utf8", ( err, txt ) => res( txt ) );
	} );
}

// .............................................................................
function execCmd( c ) {
	return new Promise( ( res, rej ) => exec( c, ( err, stdout, stderr ) => {
		err
			? rej( stderr || stdout )
			: res( stdout );
	} ) );
}
function execLightningCSS( path ) {
	return execCmd( `lightningcss ${ path } --minify --nesting` );
}
function execTerser( path ) {
	return execCmd( `terser ${ path } --config-file assets/terser.config.json` );
}
function execESLint() {
	return execCmd( "eslint -c assets/eslint.config.mjs . --color" )
		.then( () => lg( "linting JS ok ✔️" ) )
		.catch( lg );
}
function execStylelint( fix ) {
	return execCmd( `stylelint -c assets/stylelint.config.mjs **/*.css${ fix }` )
		.then( () => lg( "linting CSS ok ✔️" ) )
		.catch( lg );
}

// .............................................................................
switch ( process.argv[ 2 ] ) {
	default:
		lg( [
			"          ---------------------------------",
			"        .:: GridSound's build node-script ::.",
			"        -------------------------------------\n",
			"node build.mjs dev -------> create 'index.html' for dev (../Submodules/files)",
			"node build.mjs dev-main --> create 'index.html' for dev (./Submodules/files)",
			"node build.mjs prod ------> create 'index-prod.html' for production",
			"node build.mjs dep -------> update all submodules",
			"node build.mjs lintJS ----> check the JS files",
			"node build.mjs lintCSS ---> check the CSS files",
		].join( "\n" ) );
		break;
	case "lintJS": execESLint(); break;
	case "lintCSS": execStylelint( "" ); break;
	case "lintCSSfix": execStylelint( " --fix" ); break;
	case "prod":
		lg( "writing 'index-prod.html'... " );
		fs.writeFileSync( "index-prod.html", await writeProFile() );
		lg( "done" );
		break;
	case "dev-main":
		lg( "writing 'index.html'... " );
		fs.writeFileSync( "index.html", await writeDevFile() );
		lg( "done" );
		break;
	case "dev":
		lg( "writing 'index.html'... " );
		fs.writeFileSync( "index.html", await writeDevFile( "../" ) );
		lg( "done" );
		break;
	case "dep":
		lg( "updating git submodules... " );
		await execCmd( "git submodule init" );
		await execCmd( "git submodule update --remote" );
		await execCmd( "cp gs-wa-components/gswaCrossfade/gswaCrossfadeProc.js ." );
		lg( "done" );
		break;
}