frontend: Add linting for ts code

This commit is contained in:
Tom 2023-07-13 13:51:18 +02:00
parent ddb4bb3546
commit 16fa721048
18 changed files with 2299 additions and 469 deletions

View file

@ -1,7 +1,7 @@
import { Parcel } from "@parcel/core"
import { mkdir, rm, writeFile, readFile, unlink, rmdir, } from "fs/promises"
import { join } from "path"
import { parse as parseHTML } from 'node-html-parser';
import { Parcel } from '@parcel/core'
import { mkdir, rm, writeFile, readFile, unlink } from 'fs/promises'
import { join } from 'path'
import { parse as parseHTML } from 'node-html-parser'
import { spawnSync } from 'child_process'
//
@ -15,14 +15,14 @@ const PUBLIC_DIR = '/⛰/' // mountain's don't move, and neither do static files
const DEST_PACKAGE = process.env.GOPACKAGE ?? 'static'
const DEST_DISCLAIMER = (() => {
const source = (process.env.GOFILE ?? 'assets.go')
const base = source.substring(0, source.length - '.go'.length)
return base + '_disclaimer.txt'
const source = (process.env.GOFILE ?? 'assets.go')
const base = source.substring(0, source.length - '.go'.length)
return base + '_disclaimer.txt'
})()
const DEST_FILE = (() => {
const source = (process.env.GOFILE ?? 'assets.go')
const base = source.substring(0, source.length - '.go'.length)
return base + '_dist.go'
const source = (process.env.GOFILE ?? 'assets.go')
const base = source.substring(0, source.length - '.go'.length)
return base + '_dist.go'
})()
//
@ -31,57 +31,54 @@ const DEST_FILE = (() => {
process.stdout.write('Preparing directories ...')
await Promise.all([
mkdir(ENTRY_DIR, { recursive: true }),
rm(DIST_DIR, { recursive: true, force: true })
mkdir(ENTRY_DIR, { recursive: true }),
rm(DIST_DIR, { recursive: true, force: true })
])
console.log(' Done.')
//
// Write the disclaimer
//
process.stdout.write('Generating legal disclaimer ...')
const disclaimer = await new Promise((r, e) => {
var child = spawnSync("yarn", ["licenses", "generate-disclaimer"], { encoding : 'utf8' });
if (child.error) {
e(child.stderr)
return
}
const disclaimer = await new Promise((resolve, reject) => {
const child = spawnSync('yarn', ['licenses', 'generate-disclaimer'], { encoding: 'utf8' })
if (child.error) {
reject(child.stderr)
return
}
r(child.stdout)
});
resolve(child.stdout)
})
console.log(' Done.')
process.stdout.write(`Writing ${DEST_DISCLAIMER} ...`)
await writeFile(DEST_DISCLAIMER, disclaimer)
console.log(' Done.')
//
// WRITE ENTRY POINTS
//
process.stdout.write('Collecting entry points ')
const entries = await Promise.all(ENTRYPOINTS.map(async (name) => {
const entry = {
'name': name,
'bundleName': name + '.html',
'src': join(ENTRY_DIR, name + '.html'),
}
const entry = {
name,
bundleName: name + '.html',
src: join(ENTRY_DIR, name + '.html')
}
const content = `
const content = `
<script type='module' src='../src/base/index.ts'></script>
<script type='module' src='../src/entry/${name}/index.ts'></script>
<link rel='stylesheet' href='../src/entry/${name}/index.css'>
`;
await writeFile(entry.src, content)
`
await writeFile(entry.src, content)
process.stdout.write('.')
return entry;
process.stdout.write('.')
return entry
}))
console.log(' Done.')
@ -91,21 +88,21 @@ console.log(' Done.')
process.stdout.write('Bundleing assets ...')
const bundler = new Parcel({
entries: entries.map(e => e.src),
defaultConfig: '@parcel/config-default',
shouldDisableCache: true,
shouldContentHash: true,
defaultTargetOptions: {
shouldOptimize: true,
shouldScopeHoist: true,
sourceMaps: false,
distDir: DIST_DIR,
publicUrl: PUBLIC_DIR,
engines: {
browsers: "defaults",
}
entries: entries.map(e => e.src),
defaultConfig: '@parcel/config-default',
shouldDisableCache: true,
shouldContentHash: true,
defaultTargetOptions: {
shouldOptimize: true,
shouldScopeHoist: true,
sourceMaps: false,
distDir: DIST_DIR,
publicUrl: PUBLIC_DIR,
engines: {
browsers: 'defaults'
}
});
}
})
const { bundleGraph } = await bundler.run()
console.log(' Done.')
@ -116,19 +113,19 @@ console.log(' Done.')
process.stdout.write('Find Assets in Output ')
const bundles = bundleGraph.getBundles()
const assets = await Promise.all(entries.map(async (entry) => {
const mainBundle = bundles.find(b => b.name === entry.bundleName)
if (mainBundle === undefined) throw new Error('Unable to find bundle for ' + entry.name)
const mainBundle = bundles.find(b => b.name === entry.bundleName)
if (mainBundle === undefined) throw new Error('Unable to find bundle for ' + entry.name)
// read, then delete the generated output file
const { filePath } = mainBundle
const html = parseHTML(await readFile(filePath))
await unlink(filePath)
// read, then delete the generated output file
const { filePath } = mainBundle
const html = parseHTML(await readFile(filePath))
await unlink(filePath)
const scripts = html.querySelectorAll('script').map(script => script.outerHTML).join('')
const links = html.querySelectorAll('link').map(link => link.outerHTML).join('')
const scripts = html.querySelectorAll('script').map(script => script.outerHTML).join('')
const links = html.querySelectorAll('link').map(link => link.outerHTML).join('')
process.stdout.write('.')
return { ...entry, scripts, links }
process.stdout.write('.')
return { ...entry, scripts, links }
}))
console.log(' Done.')
@ -138,7 +135,7 @@ console.log(' Done.')
process.stdout.write(`Writing ${DEST_FILE} ...`)
const goAssets = assets.map(({ name, scripts, links }) => {
return `
return `
// Assets${name} contains assets for the '${name}' entrypoint.
var Assets${name} = Assets{
\tScripts: \`${scripts}\`,
@ -158,7 +155,7 @@ var Disclaimer string
const Public = ${JSON.stringify(PUBLIC_DIR)}
${goAssets}
`;
`
await writeFile(DEST_FILE, goSource)
console.log(' Done.')
console.log(' Done.')