[enhancement] Integrate with reportage and TypeScript

[t2ym]

[enhancement] Integrate with reportage and TypeScript

[monitoring] Introduce monitoring mode

Motivations

• Integration with reportage test runner
• Shorter build cycle for debugging and testing
• Infrastructure for further enhancements

Design Principles

• When monitoring mode is disabled, the build is the same as before the mode is introduced
• When monitoring mode is enabled, some security features are temporarily loosened so that reportage can work with thin-hook applications
• In addition to Chrome for Linux, Chrome for Windows is supported via WSL and VMware (as host and guest)

Components and Features

• NEW enableMonitoring : Enable/Disable monitoring mode

  • NEW config: ['mode'].enableMonitoring : true or false

• NEW monitor : Start monitor servers

  • NEW command task: monitor

• NEW monitorServer : Start monitor HTTPS server

  • NEW command task: monitorServer called from monitor

• config: bootstrap-js : Allow no-hook scripts from reporter server

  • config: ['bootstrap-js'].additionalParameters : true on enableMonitoring
  • NEW config: ['bootstrap-js'].enableMonitoring
  • NEW config: ['bootstrap-js'].reporterOrigin
  • NEW config: [path.base]/[path.config]/bootstrap-js/parameters.js : hook.parameters.noHook for reporterOrigin if enableMonitoring is true

• config: policy : Allow no-hook scripts from reporter server

  • NEW config: ['policy'].enableMonitoring
  • NEW config: ['policy'].reporterOrigin : Allow reporter and test scripts to run as no-hook
  • config: [path.base]/[path.config]/wildcardWhitelist.js : In monitoring mode, allow reportage's reporterOrigin scripts to run as no-hook

• NEW generate-version : Flexible customization of app version at ['hook-min-js'].searchParams.version

  • NEW plugin: @thin-hook/generate-version
  • NEW task: generate-version
  • NEW config: ['generate-version']
  • phase: init

• NEW reportage-nginx-conf : Generate [path.base]/nginx.conf for reportage reporter server

  • NEW task: reportage-nginx-conf
  • NEW plugin: @thin-hook/reportage-nginx-conf
  • NEW config: ['reportage-nginx-conf']
  • NEW config: [path.base]/[path.config]/reportage-nginx-conf/nginx.conf : template for [path.base]/nginx.conf
  • phase: reportage

• NEW reportage-config-js : Generate [path.base]/[path.test]/reportage.config.js for reportage

  • NEW task: reportage-config-js
  • NEW plugin: @thin-hook/reportage-config-js
  • NEW config: ['reportage-config-js']
  • NEW config: [path.base]/[path.config]/reportage-config-js/reportage.config.js : template for [path.base]/[path.test]/reportage.config.js
  • NEW config: [path.base]/[path.test]/package.json : Set "type": "module" to load [path.base]/[path.test]/*.js as ES modules
  • phase: reportage

• NEW sample tests for reportage

  • NEW module: [path.base]/[path.test]/suites-loader.js
  • NEW module: [path.base]/[path.test]/common-suite.js
  • NEW module: [path.base]/[path.test]/basic-suite.js

• NEW reportage-nginx-mkdir-log : Create [path.base]/[path.test]/log directory

  • NEW command task: reportage-nginx-mkdir-log

• NEW reportage-nginx-start : Start nginx in background

  • NEW command task: reportage-nginx-start
  • NEW config: ['reportage-nginx-conf']

• NEW reportage-nginx-stop : Stop nginx

  • NEW command task: reportage-nginx-stop
  • NEW config: ['reportage-nginx-conf']

• NEW reportage-nginx-foreground : Start nginx in foreground

  • NEW command task: reportage-nginx-foreground
  • NEW config: ['reportage-nginx-conf']

• NEW reportage-run : Start reportage CLI test

  • NEW command task: reportage-run
  • NEW config: ['reportage-config-js']

• NEW reportage-browser : Launch Chrome browser locally on Linux with reportage configurations

  • NEW command task: reportage-browser
  • NEW config: ['reportage-config-js']

• NEW reportage-browser-wsl : Launch Chrome for Windows from within Ubuntu WSL with reportage configurations

  • NEW command task: reportage-browser-wsl
  • NEW config: ['reportage-config-js']

• NEW reportage-browser-windows-cmd : Generate a Windows cmd file for launching Chrome for Windows with reportage configurations for VMware

  • NEW command task: reportage-browser-windows-command
  • NEW config: ['reportage-config-js']

• generate-cert-sh : Support wildcard host names for reportage

  • plugin: @thin-hook/generate-cert-sh
  • shell script [path.base]/[path.keys]/generate_cert.sh : 1.localhost...32.localhost, *.${SERVER_HOST}
  • keys: [path.base]/[path.keys]/[certificates.CA]/wildcard.${HOST}.[key|crt]

• cache-bundle-automation : Deprecate cacheBundleUploadService and use errorReportService instead

  • command task : cache-bundle-automation

• cache-bundle-js : Support monitor mode

  • plugin: @thin-hook/cache-bundle-js : In monitoring mode, skip collecting data for cache-bundle.json

• update-html-hash : Deprecate cacheBundleUploadService and use errorReportService instead

  • command task : update-html-hash

• integrity-service-helpers : Skip building if already built

  • command task : integrity-service-helpers
  • plugin: [path.backend]/integrity-service-helpers

• validation-console : Skip building if already built

  • command task : validation-console
  • plugin: [path.backend]/validatioin-console

• cacheBundleGeneration.js : Avoid deprecated puppeteer API page.waitFor()

  • plugin: [path.backend]/cacheBundleGeneration.js

• integrityService.js : Support monitor mode

  • plugin: [path.backend]/integrityService.js : In monitor mode, skip the host name (authority) check and the hash (ClientIntegrity) validation for reportage to work

• cache-automation-js : Support monitor mode

  • NEW script: [path.base]/[path.config]/cache-automation-js/monitoring-automation.js : import reportage reporter script
  • script: [path.base]/[path.config]/cache-automation-js/automation.js : include monitoring-automation.js if enableMonitoring is true

[enhancement] TypeScript support

Motivations

• TypeScript is the de-facto standard for the current web development
• Language features beyond ES2018 can be supported through transpilation

Design Principles

• Compatible libraries (ES2018-target) can replace the released versions to achieve compatibility
• transpile phase is newly introduced to preprocess the sources into executable JavaScript
• The target directory of the transpile phase can be either root or raw directory
• Both bundling and raw execution are supported with the same module access policies

Components and Features

• NEW transpileTarget : Configure where to perform transpile phase tasks; raw or root

  • NEW config: ['path'].transpileTarget : raw or root

• NEW build-compat-libs : Build compatible libraries for thin-hook (ES2018)

  • NEW command task: build-compat-libs
  • NEW config: ['path'].compatLib
  • NEW shell script: [path.base]/[path.compatLib]/build-compat-libs.sh : any build scripts can be added
    • NEW sample shell script: [path.base]/[path.compatLib]/build-react.sh : React with ESM exports
    • NEW sample shell script: [path.base]/[path.compatLib]/build-material-web.sh : @material/web with ES2018 target
  • phase: prepare

• NEW non-js-imports : Support importing non-js contents from modules

  • NEW task: non-js-imports
  • NEW plubin: @thin-hook/non-js-imports
  • NEW config: ['non-js-imports']
  • phase: transpile

• NEW frontend-modules-raw : Install frontend modules in [path.base]/[path.raw]/

  • NEW command task: frontend-modules-raw
  • phase: prepare

• NEW frontend-modules-locked-production : Install frontend modules in [path.base]/[path.root]/

  • NEW command task: frontend-modules-locked-production
  • phase: postTranspile

• NEW compile-scss : Compile scss to css in [path.base]/[path[path.tranpileTarget]]/

  • NEW command task: compile-scss
  • NEW config: ['non-js-imports'].scssDirectories : get the list of directories with scss files
  • NEW package dependency: sass
  • phase: transpile

• NEW typescript : Compile TypeScript in [path.base]/[path[path.tranpileTarget]]/

  • NEW command task: typescript
  • NEW package dependency: typescript
  • phase: transpile

Updated inject phases

• inject : Introduce monitoring mode and TypeScript support
  • NEW phase: init : typically [ generate-version ]
  • NEW phase: prepare : typilcally [ build-compat-libs, frontend-modules-raw ]
  • NEW phase: transpile : typilcally [ compile-scss, typescript, non-js-imports ]
  • NEW phase: postTranspile: typically [ frontend-modules-locked-production ]
  • NEW phase: reportage : typically [ reportage-nginx-mkdir-log, reportage-nginx-conf, reportage-config-js ]
  • NEW phase: monitoring: typically [ dummy-script-hashes-integrity, clean-gzip-json, dummy-integrity, cache-bundle-automation-json ]
  • NEW phases prepareRoot : list of phases for preparing [path.base]/[path.root]
    • phases with transpileTarget : root : typically [ prepare, clean, transpile, postTranspile ]
    • phases with transpileTarget : raw : typically [ prepare, transpile, clean, postTranspile ]
  • phases with enableMonitoring : false : typically [ init, ...prepareRoot, backend, plugin, cache, frontend ]
  • phases with enableMonitoring : true : typically [ init, ...prepareRoot, backend, reportage, plugin, monitoring ]