feat(cli): introduce "rocket lint"

Author: daKmoR

.changeset/bright-emus-design.md

@@ -0,0 +1,15 @@
+---
+'@rocket/cli': patch
+---
+
+Introducing `rocket lint` to verify if all your links are correct.
+
+There are two modes:
+
+```bash
+# check existing production build in _site (need to execute "rocket build" before)
+rocket lint
+
+# run a fast html only build and then check it
+rocket lint --build-html
+```

packages/cli/package.json

@@ -54,7 +54,7 @@
  "dependencies": {
  "@rocket/building-rollup": "^0.4.0",
  "@rocket/engine": "^0.2.6",
- "@web/rollup-plugin-copy": "^0.3.0",
+ "check-html-links": "^0.2.3",
  "colorette": "^2.0.16",
  "commander": "^9.0.0",
  "fs-extra": "^9.0.1",

packages/cli/src/RocketBuild.js

@@ -1,78 +1,18 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
-
-import { Engine } from '@rocket/engine/server';
-import { gatherFiles } from '@rocket/engine';
-
-import { fromRollup } from '@web/dev-server-rollup';
-
-import { rollup } from 'rollup';
 import path from 'path';
-import { rollupPluginHTML } from '@web/rollup-plugin-html';
 
-import { createMpaConfig, createServiceWorkerConfig } from '@rocket/building-rollup';
-import { adjustPluginOptions } from 'plugins-manager';
 import { existsSync } from 'fs';
-import { readFile, unlink, writeFile } from 'fs/promises';
-
-import puppeteer from 'puppeteer';
-
-/**
- * @param {object} config
- */
-async function buildAndWrite(config) {
- const bundle = await rollup(config);
-
- if (Array.isArray(config.output)) {
- await bundle.write(config.output[0]);
- await bundle.write(config.output[1]);
- } else {
- await bundle.write(config.output);
- }
-}
-
-async function productionBuild(config) {
- const defaultSetupPlugins = [];
- if (config.pathPrefix) {
- defaultSetupPlugins.push(
- adjustPluginOptions(rollupPluginHTML, { absolutePathPrefix: config.pathPrefix }),
- );
- }
-
- const mpaConfig = createMpaConfig({
- input: '**/*.html',
- output: {
- dir: config.outputDir,
- },
- // custom
- rootDir: path.resolve(config.outputDevDir),
- absoluteBaseUrl: config.absoluteBaseUrl,
- setupPlugins: [
- ...defaultSetupPlugins,
- ...config.setupDevServerAndBuildPlugins,
- ...config.setupBuildPlugins,
- ],
- });
- const finalConfig =
- typeof config.adjustBuildOptions === 'function'
- ? config.adjustBuildOptions(mpaConfig)
- : mpaConfig;
- await buildAndWrite(finalConfig);
-
- const { serviceWorkerSourcePath } = config;
- if (existsSync(serviceWorkerSourcePath)) {
- const serviceWorkerConfig = createServiceWorkerConfig({
- input: serviceWorkerSourcePath,
- output: {
- file: path.join(path.resolve(config.outputDir), config.serviceWorkerName),
- },
- });
+import { readFile, writeFile } from 'fs/promises';
 
- await buildAndWrite(serviceWorkerConfig);
- }
-}
+import { buildHtml } from './build/buildHtml.js';
+import { buildOpenGraphImages } from './build/buildOpenGraphImages.js';
+import { buildJavaScriptOptimizedOutput } from './build/buildJavaScriptOptimizedOutput.js';
 
 export class RocketBuild {
+ /**
+ * @param {import('commander').Command} program
+ * @param {import('./RocketCli.js').RocketCli} cli
+ */
  async setupCommand(program, cli) {
  this.cli = cli;
 
@@ -87,32 +27,30 @@ export class RocketBuild {
  }
 
  async build() {
+ if (!this.cli) {
+ return;
+ }
+ // for typescript as `this.cli.options.outputDir` supports other inputs as well
+ // but the cli will normalize it to a string before calling plugins
+ if (typeof this.cli.options.outputDir !== 'string') {
+ return;
+ }
+
  await this.cli.events.dispatchEventDone('build-start');
- await this.cli.clearOutputDir();
- await this.cli.clearOutputDevDir();
 
- this.engine = new Engine();
- this.engine.setOptions({
- docsDir: this.cli.options.inputDir,
- outputDir: this.cli.options.outputDevDir,
- setupPlugins: this.cli.options.setupEnginePlugins,
- longFileHeaderWidth: this.cli.options.longFileHeaderWidth,
- longFileHeaderComment: this.cli.options.longFileHeaderComment,
- renderMode: 'production',
- clearOutputDir: this.cli.options.clearOutputDir,
- });
- console.log('Engine building...');
- await this.engine.build({ autoStop: this.cli.options.buildAutoStop });
+ // 1. build html
+ this.engine = await buildHtml(this.cli);
 
+ // 2. build open graph images
  if (this.cli.options.buildOpenGraphImages) {
  console.log('Generating Open Graph Images...');
- await this.buildOpenGraphImages();
+ await buildOpenGraphImages(this.cli);
  }
 
- if (this.cli.options.buildOptimize) {
+ // 3. build optimized output
+ if (this.cli.options.buildOptimize && this.engine) {
  console.log('Optimize Production Build...');
- await productionBuild(this.cli.options);
- await this.engine.copyPublicFilesTo(this.cli.options.outputDir);
+ await buildJavaScriptOptimizedOutput(this.cli, this.engine);
  }
 
  // hackfix 404.html by making all asset urls absolute (rollup always makes them relative) which will break if netlify serves the content form a different url
@@ -130,87 +68,4 @@ export class RocketBuild {
 
  await this.cli.events.dispatchEventDone('build-end');
  }
-
- async buildOpenGraphImages() {
- const openGraphFiles = await gatherFiles(this.cli.options.outputDevDir, {
- fileEndings: ['.opengraph.html'],
- });
- if (openGraphFiles.length === 0) {
- return;
- }
-
- // TODO: enable URL support in the Engine and remove this "workaround"
- if (
- typeof this.cli.options.inputDir !== 'string' ||
- typeof this.cli.options.outputDevDir !== 'string'
- ) {
- return;
- }
-
- const withWrap = this.cli.options.setupDevServerAndBuildPlugins
- ? this.cli.options.setupDevServerAndBuildPlugins.map(modFunction => {
- modFunction.wrapPlugin = fromRollup;
- return modFunction;
- })
- : [];
-
- this.engine = new Engine();
- this.engine.setOptions({
- docsDir: this.cli.options.inputDir,
- outputDir: this.cli.options.outputDevDir,
- setupPlugins: this.cli.options.setupEnginePlugins,
- open: false,
- clearOutputDir: false,
- adjustDevServerOptions: this.cli.options.adjustDevServerOptions,
- setupDevServerMiddleware: this.cli.options.setupDevServerMiddleware,
- setupDevServerPlugins: [...this.cli.options.setupDevServerPlugins, ...withWrap],
- });
- try {
- await this.engine.start();
-
- const browser = await puppeteer.launch();
- const page = await browser.newPage();
-
- // In 2022 Twitter & Facebook recommend a size of 1200x628 - we capture with 2 dpr for retina displays
- await page.setViewport({
- width: 1200,
- height: 628,
- deviceScaleFactor: 2,
- });
-
- for (const openGraphFile of openGraphFiles) {
- const relUrl = path.relative(this.cli.options.outputDevDir, openGraphFile);
- const imagePath = openGraphFile.replace('.opengraph.html', '.opengraph.png');
- const htmlPath = openGraphFile.replace('.opengraph.html', '.html');
- const relImageUrl = path.basename(imagePath);
-
- let htmlString = await readFile(htmlPath, 'utf8');
- if (!htmlString.includes('<meta property="og:image"')) {
- if (htmlString.includes('</head>')) {
- htmlString = htmlString.replace(
- '</head>',
- [
- ' <meta property="og:image:width" content="2400">',
- ' <meta property="og:image:height" content="1256">',
- ` <meta property="og:image" content="./${relImageUrl}">`,
- ' </head>',
- ].join('\n'),
- );
- }
- }
- const url = `http://localhost:${this.engine.devServer.config.port}/${relUrl}`;
- await page.goto(url, { waitUntil: 'networkidle0' });
- await page.screenshot({ path: imagePath });
-
- await unlink(openGraphFile);
- await writeFile(htmlPath, htmlString);
- }
- await browser.close();
-
- await this.engine.stop();
- } catch (e) {
- console.log('Could not start dev server to generate open graph images');
- console.error(e);
- }
- }
 }

packages/cli/src/RocketCli.js

@@ -2,6 +2,7 @@
 import { Command } from 'commander';
 import { RocketStart } from './RocketStart.js';
 import { RocketBuild } from './RocketBuild.js';
+import { RocketLint } from './RocketLint.js';
 import { RocketUpgrade } from './RocketUpgrade.js';
 import { RocketPreview } from './RocketPreview.js';
 // import { ignore } from './images/ignore.js';
@@ -53,6 +54,10 @@ export class RocketCli {
  absoluteBaseUrl: '',
  clearOutputDir: true,
 
+ lint: {
+ buildHtml: false,
+ },
+
  // /** @type {{[key: string]: ImagePreset}} */
  // imagePresets: {
  // responsive: {
@@ -179,7 +184,7 @@ export class RocketCli {
  let pluginsMeta = [
  { plugin: RocketStart, options: {} },
  { plugin: RocketBuild, options: {} },
- // { plugin: RocketLint },
+ { plugin: RocketLint, options: {} },
  { plugin: RocketUpgrade, options: {} },
  { plugin: RocketPreview, options: {} },
  ];