From 097f7c3a5e138c75b22dbbfd7df3b89a90623461 Mon Sep 17 00:00:00 2001 From: James Perez Date: Wed, 16 Oct 2024 16:47:22 -0700 Subject: [PATCH 01/18] Let baker generate src sets --- bin/bake.js | 2 ++ lib/engines/base.js | 1 - lib/filters/srcSets.js | 23 +++++++++++++++++++++++ lib/index.js | 11 +++++++++++ 4 files changed, 36 insertions(+), 1 deletion(-) create mode 100644 lib/filters/srcSets.js diff --git a/bin/bake.js b/bin/bake.js index be68d703..5fb99b59 100755 --- a/bin/bake.js +++ b/bin/bake.js @@ -28,6 +28,7 @@ const defaultConfig = { domain: undefined, embeds: 'embeds', entrypoints: 'scripts/app.js', + imageSrcSizes: undefined, input: process.cwd(), layouts: '_layouts', nunjucksVariables: undefined, @@ -90,6 +91,7 @@ async function prepareConfig(inputOptions) { options.domain = resolver('domain'); options.embeds = resolver('embeds'); options.entrypoints = resolver('entrypoints'); + options.imageSrcSizes = resolver('imageSrcSizes'); options.input = resolver('input'); options.layouts = resolver('layouts'); options.nunjucksVariables = resolver('nunjucksVariables'); diff --git a/lib/engines/base.js b/lib/engines/base.js index e31181a1..ea3eaa54 100644 --- a/lib/engines/base.js +++ b/lib/engines/base.js @@ -6,7 +6,6 @@ import chokidar from 'chokidar'; import glob from 'fast-glob'; // local -import { getBasePath } from '../env.js'; import { noop, outputFile } from '../utils.js'; /** diff --git a/lib/filters/srcSets.js b/lib/filters/srcSets.js new file mode 100644 index 00000000..4f08b405 --- /dev/null +++ b/lib/filters/srcSets.js @@ -0,0 +1,23 @@ +import { Baker } from "../index.js"; + +function maxstache(str, ctx) { + return str + .split(/\{|\}/) + .map((t, i) => (!(i % 2) ? t : ctx[t])) + .join(''); +} + +/** + * @param {number[]} sizes + * @param {Baker} instance + **/ +export function createSrcSetFilter(sizes, instance) { + return function createSrcSet(source, prefix) { + return sizes + .map((size) => { + const url = instance.getStaticPath(`${maxstache(source, { size })}`); + return `${url} ${size}w`; + }) + .join(', '); + }; +} diff --git a/lib/index.js b/lib/index.js index 935ae55a..ddb94a4f 100644 --- a/lib/index.js +++ b/lib/index.js @@ -38,6 +38,7 @@ import { AssetsEngine } from './engines/assets.js'; import { NunjucksEngine } from './engines/nunjucks.js'; import { RollupEngine } from './engines/rollup.js'; import { SassEngine } from './engines/sass.js'; +import { createSrcSetFilter } from "./filters/srcSets.js"; const CROSSWALK_ALLOWED_ASSET_TYPES = [ 'img', @@ -60,6 +61,7 @@ const FIXED_FALLBACK_SCREENSHOT_WIDTH = 375; * @property {string} data * @property {string} [domain] * @property {string} entrypoints + * @Property {{[key: string]: number[]}} imageSrcSizes * @property {string} input * @property {string} layouts * @property {{[key: string]: (...args) => unknown}} [nunjucksVariables] @@ -83,6 +85,7 @@ export class Baker extends EventEmitter { domain, embeds, entrypoints, + imageSrcSizes, input, layouts, nunjucksVariables, @@ -211,6 +214,14 @@ export class Baker extends EventEmitter { this.nunjucks.addCustomFilter('log', logFilter); this.nunjucks.addCustomFilter('jsonScript', jsonScriptFilter); + // Add image size src set filters + if (imageSrcSizes) { + Object.keys(imageSrcSizes).forEach((size) => { + const srcSetFilterName = size.charAt(0).toUpperCase() + size.slice(1); + this.nunjucks.addCustomFilter(srcSetFilterName, createSrcSetFilter(size, this)); + }); + } + // if an object of custom nunjucks filters was provided, add them now if (nunjucksFilters) { this.nunjucks.addCustomFilters(nunjucksFilters); From 4bb37df006f00e875b102c4bcca2b22f2f04f3ea Mon Sep 17 00:00:00 2001 From: James Perez Date: Wed, 16 Oct 2024 16:57:01 -0700 Subject: [PATCH 02/18] fine --- lib/filters/srcSets.js | 4 ++-- lib/index.js | 27 ++++++++++++++++----------- 2 files changed, 18 insertions(+), 13 deletions(-) diff --git a/lib/filters/srcSets.js b/lib/filters/srcSets.js index 4f08b405..99bf8882 100644 --- a/lib/filters/srcSets.js +++ b/lib/filters/srcSets.js @@ -1,4 +1,4 @@ -import { Baker } from "../index.js"; +import { Baker } from '../index.js'; function maxstache(str, ctx) { return str @@ -12,7 +12,7 @@ function maxstache(str, ctx) { * @param {Baker} instance **/ export function createSrcSetFilter(sizes, instance) { - return function createSrcSet(source, prefix) { + return function createSrcSet(source) { return sizes .map((size) => { const url = instance.getStaticPath(`${maxstache(source, { size })}`); diff --git a/lib/index.js b/lib/index.js index ddb94a4f..28aa1830 100644 --- a/lib/index.js +++ b/lib/index.js @@ -38,7 +38,7 @@ import { AssetsEngine } from './engines/assets.js'; import { NunjucksEngine } from './engines/nunjucks.js'; import { RollupEngine } from './engines/rollup.js'; import { SassEngine } from './engines/sass.js'; -import { createSrcSetFilter } from "./filters/srcSets.js"; +import { createSrcSetFilter } from './filters/srcSets.js'; const CROSSWALK_ALLOWED_ASSET_TYPES = [ 'img', @@ -193,10 +193,7 @@ export class Baker extends EventEmitter { this.nunjucks.addCustomTag('inject', injectBlock); // create our static tag - const staticBlock = createStaticBlock( - this.input, - [this.assets, this.sass] - ); + const staticBlock = createStaticBlock(this.input, [this.assets, this.sass]); // save a reference to our static block function for use elsewhere // TODO: refactor away in v1 @@ -218,7 +215,10 @@ export class Baker extends EventEmitter { if (imageSrcSizes) { Object.keys(imageSrcSizes).forEach((size) => { const srcSetFilterName = size.charAt(0).toUpperCase() + size.slice(1); - this.nunjucks.addCustomFilter(srcSetFilterName, createSrcSetFilter(size, this)); + this.nunjucks.addCustomFilter( + srcSetFilterName, + createSrcSetFilter(size, this) + ); }); } @@ -331,7 +331,9 @@ export class Baker extends EventEmitter { } if (!assetName) { - throw new Error('Crosswalk: Unable to process crowsswalk tsv/csv. Missing required \'assetName\' column.') + throw new Error( + "Crosswalk: Unable to process crowsswalk tsv/csv. Missing required 'assetName' column." + ); } if ( @@ -370,9 +372,9 @@ export class Baker extends EventEmitter { return; } - preppedData.assets[normalizedAssetType][normalizedAssetName][ext] = - this.getStaticPath(path); - }); + preppedData.assets[normalizedAssetType][normalizedAssetName][ext] = + this.getStaticPath(path); + }); return acc; }, preppedData); @@ -422,7 +424,10 @@ export class Baker extends EventEmitter { document.documentElement.clientHeight ); }); - await page.setViewport({ width: FIXED_FALLBACK_SCREENSHOT_WIDTH, height: contentHeight }); + await page.setViewport({ + width: FIXED_FALLBACK_SCREENSHOT_WIDTH, + height: contentHeight, + }); // store the fallback image in the _dist directory const screenshotEmbedDir = join(this.output, embedFilePath) From 287ab4d21ea364fe6e326c0452d7b9f9cb580aaa Mon Sep 17 00:00:00 2001 From: James Perez Date: Wed, 16 Oct 2024 17:29:08 -0700 Subject: [PATCH 03/18] fix prettier --- lib/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/index.js b/lib/index.js index 28aa1830..1ebe02c6 100644 --- a/lib/index.js +++ b/lib/index.js @@ -358,8 +358,10 @@ export class Baker extends EventEmitter { ); } - if (!preppedData.assets[normalizedAssetType]) + if (!preppedData.assets[normalizedAssetType]) { preppedData.assets[normalizedAssetType] = {}; + } + preppedData.assets[normalizedAssetType][normalizedAssetName] = {}; Object.entries(assetSources) From 65adb5739099985d59a1b6b9b3e8aa29207f8c5e Mon Sep 17 00:00:00 2001 From: James Perez Date: Thu, 31 Oct 2024 12:14:37 -0700 Subject: [PATCH 04/18] fix prettier --- bin/bake.js | 3 +-- package-lock.json | 5 ----- package.json | 1 - 3 files changed, 1 insertion(+), 8 deletions(-) diff --git a/bin/bake.js b/bin/bake.js index 5fb99b59..7bf417ac 100755 --- a/bin/bake.js +++ b/bin/bake.js @@ -8,7 +8,6 @@ import { resolve } from 'path'; import debug from 'debug'; import mri from 'mri'; import { rollup } from 'rollup'; -import requireFromString from 'require-from-string'; // local import { Baker } from '../lib/index.js'; @@ -60,7 +59,7 @@ async function compileAndLoadConfig(pathToConfig) { format: 'cjs', interop: 'auto', }); - const loadedConfig = requireFromString(code, pathToConfig); + const loadedConfig = await import(code, pathToConfig); return getDefaultFromConfig(loadedConfig); } diff --git a/package-lock.json b/package-lock.json index 4228c7be..56d10bfa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7059,11 +7059,6 @@ "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-2.0.0.tgz", "integrity": "sha512-UszKE5KVK6JvyD92nzMn9cDapSk6w/CaFZ96CnmDMUqH9oowfxF/ZjRITD25H4DnOQClLA4/j7jLGXXLVKxAug==" }, - "require-from-string": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz", - "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==" - }, "resolve": { "version": "1.22.2", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz", diff --git a/package.json b/package.json index 3674d378..5e33a7b6 100644 --- a/package.json +++ b/package.json @@ -84,7 +84,6 @@ "premove": "^4.0.0", "puppeteer": "^13.7.0", "quaff": "^5.0.0", - "require-from-string": "^2.0.2", "rev-path": "^3.0.0", "rollup": "^2.79.1", "rollup-plugin-svelte": "^7.1.6", From 5fc65e194c86b924656090712afae35f710a8ff2 Mon Sep 17 00:00:00 2001 From: James Perez Date: Thu, 31 Oct 2024 12:37:21 -0700 Subject: [PATCH 05/18] cleaning up baker.config handling --- bin/bake.js | 138 ++++++++++++++++++++++++++++------------------------ 1 file changed, 74 insertions(+), 64 deletions(-) diff --git a/bin/bake.js b/bin/bake.js index 7bf417ac..4e551b35 100755 --- a/bin/bake.js +++ b/bin/bake.js @@ -7,7 +7,6 @@ import { resolve } from 'path'; // packages import debug from 'debug'; import mri from 'mri'; -import { rollup } from 'rollup'; // local import { Baker } from '../lib/index.js'; @@ -41,70 +40,81 @@ const defaultConfig = { crosswalkPath: undefined, }; -function getDefaultFromConfig(module) { - return module.__esModule ? module.default : module; +// function getDefaultFromConfig(module) { +// return module.__esModule ? module.default : module; +// } + +// async function compileAndLoadConfig(pathToConfig) { +// const bundle = await rollup({ +// external: () => true, +// input: pathToConfig, +// treeshake: false, +// }); +// +// const { +// output: [{ code }], +// } = await bundle.generate({ +// exports: 'named', +// format: 'cjs', +// interop: 'auto', +// }); +// const loadedConfig = requireFromString(code, pathToConfig); +// +// return getDefaultFromConfig(loadedConfig); +// } + +async function betterPrepareConfig(flags) { + const { input, config } = flags; + const projectConfigFilePath = resolve(input, !!config ? config : defaultConfigFile); + const projectConfig = await import(projectConfigFilePath); + + return { + ...defaultConfig, + ...projectConfig + }; } -async function compileAndLoadConfig(pathToConfig) { - const bundle = await rollup({ - external: () => true, - input: pathToConfig, - treeshake: false, - }); - - const { - output: [{ code }], - } = await bundle.generate({ - exports: 'named', - format: 'cjs', - interop: 'auto', - }); - const loadedConfig = await import(code, pathToConfig); - - return getDefaultFromConfig(loadedConfig); -} - -async function prepareConfig(inputOptions) { - // the input directory everything is relative to - const input = inputOptions.input; - - // a config parameter was passed - if (inputOptions.config) { - // we check to see if it was passed as a boolean and use our default path to the config, otherwise we use what was given - const pathToConfig = resolve( - input, - inputOptions.config === true ? defaultConfigFile : inputOptions.config - ); - - inputOptions = await compileAndLoadConfig(pathToConfig); - } - - // prep a helper function to resolve paths against input - const resolver = (key) => inputOptions[key] || defaultConfig[key]; - - const options = {}; - - options.assets = resolver('assets'); - options.createPages = resolver('createPages'); - options.data = resolver('data'); - options.domain = resolver('domain'); - options.embeds = resolver('embeds'); - options.entrypoints = resolver('entrypoints'); - options.imageSrcSizes = resolver('imageSrcSizes'); - options.input = resolver('input'); - options.layouts = resolver('layouts'); - options.nunjucksVariables = resolver('nunjucksVariables'); - options.nunjucksFilters = resolver('nunjucksFilters'); - options.nunjucksTags = resolver('nunjucksTags'); - options.minifyOptions = resolver('minifyOptions'); - options.output = resolver('output'); - options.pathPrefix = resolver('pathPrefix'); - options.staticRoot = resolver('staticRoot'); - options.svelteCompilerOptions = resolver('svelteCompilerOptions'); - options.crosswalkPath = resolver('crosswalkPath'); - - return options; -} +// async function prepareConfig(inputOptions) { +// // the input directory everything is relative to +// const input = inputOptions.input; +// +// // a config parameter was passed +// if (inputOptions.config) { +// // we check to see if it was passed as a boolean and use our default path to the config, otherwise we use what was given +// const pathToConfig = resolve( +// input, +// inputOptions.config === true ? defaultConfigFile : inputOptions.config +// ); +// +// inputOptions = await compileAndLoadConfig(pathToConfig); +// } +// +// // prep a helper function to resolve paths against input +// const resolver = (key) => inputOptions[key] || defaultConfig[key]; +// +// const options = {}; +// +// options.assets = resolver('assets'); +// options.createPages = resolver('createPages'); +// options.data = resolver('data'); +// options.domain = resolver('domain'); +// options.embeds = resolver('embeds'); +// options.entrypoints = resolver('entrypoints'); +// options.imageSrcSizes = resolver('imageSrcSizes'); +// options.input = resolver('input'); +// options.layouts = resolver('layouts'); +// options.nunjucksVariables = resolver('nunjucksVariables'); +// options.nunjucksFilters = resolver('nunjucksFilters'); +// options.nunjucksTags = resolver('nunjucksTags'); +// options.minifyOptions = resolver('minifyOptions'); +// options.output = resolver('output'); +// options.pathPrefix = resolver('pathPrefix'); +// options.staticRoot = resolver('staticRoot'); +// options.svelteCompilerOptions = resolver('svelteCompilerOptions'); +// options.crosswalkPath = resolver('crosswalkPath'); +// +// return options; +// } const mriConfig = { alias: { @@ -132,7 +142,7 @@ async function run(args) { const { _, ...flags } = mri(args, mriConfig); const command = _[0]; - const config = await prepareConfig(flags); + const config = await betterPrepareConfig(flags); logger('command:', command); logger('resolved input flags:', config); From 91094553a59ed1b68563d5c4a36c4a34d808d00f Mon Sep 17 00:00:00 2001 From: James Perez Date: Tue, 5 Nov 2024 09:31:48 -0800 Subject: [PATCH 06/18] working on it --- bin/bake.js | 27 +++++++++++++++++++++------ lib/index.js | 4 ++-- 2 files changed, 23 insertions(+), 8 deletions(-) diff --git a/bin/bake.js b/bin/bake.js index 4e551b35..e34dccc6 100755 --- a/bin/bake.js +++ b/bin/bake.js @@ -40,9 +40,9 @@ const defaultConfig = { crosswalkPath: undefined, }; -// function getDefaultFromConfig(module) { -// return module.__esModule ? module.default : module; -// } +function getDefaultFromModule(module) { + return module.__esModule ? module.default : module; +} // async function compileAndLoadConfig(pathToConfig) { // const bundle = await rollup({ @@ -60,18 +60,33 @@ const defaultConfig = { // }); // const loadedConfig = requireFromString(code, pathToConfig); // -// return getDefaultFromConfig(loadedConfig); +// return getDefaultFromModule(loadedConfig); // } async function betterPrepareConfig(flags) { + console.log('betterPrepareConfig:flags'); + console.log(JSON.stringify(flags, null, 3)); + const { input, config } = flags; const projectConfigFilePath = resolve(input, !!config ? config : defaultConfigFile); - const projectConfig = await import(projectConfigFilePath); + const projectConfigFile = await import(projectConfigFilePath); + + console.log('betterPrepareConfig:projectConfigFile'); + console.log(projectConfigFile); - return { + const projectConfig = getDefaultFromModule(projectConfigFile); + console.log('betterPrepareConfig:projectConfig'); + console.log(projectConfig.default); + + const mergedConfig = { ...defaultConfig, ...projectConfig }; + + console.log('betterPrepareConfig:mergedConfig'); + console.log(JSON.stringify(mergedConfig, null, 3)); + + return mergedConfig; } // async function prepareConfig(inputOptions) { diff --git a/lib/index.js b/lib/index.js index 1ebe02c6..cb4b5047 100644 --- a/lib/index.js +++ b/lib/index.js @@ -467,7 +467,7 @@ export class Baker extends EventEmitter { let dataError = null; let assetsError = null; - clearConsole(); + //clearConsole(); console.log(yellow('Starting initial serve...')); let data; @@ -508,7 +508,7 @@ export class Baker extends EventEmitter { const { local, network: external } = await server.start(); const logStatus = () => { - clearConsole(); + //clearConsole(); let hadError = false; From 912340050b268d84fab7cc4cb5f2568878d465c9 Mon Sep 17 00:00:00 2001 From: James Perez Date: Tue, 5 Nov 2024 09:32:25 -0800 Subject: [PATCH 07/18] working on it --- bin/bake.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bin/bake.js b/bin/bake.js index e34dccc6..4f4301da 100755 --- a/bin/bake.js +++ b/bin/bake.js @@ -80,7 +80,7 @@ async function betterPrepareConfig(flags) { const mergedConfig = { ...defaultConfig, - ...projectConfig + ...projectConfig, }; console.log('betterPrepareConfig:mergedConfig'); From e3d163800c5424a7e7ea69a516cb7360215ad623 Mon Sep 17 00:00:00 2001 From: James Perez Date: Thu, 7 Nov 2024 11:29:52 -0800 Subject: [PATCH 08/18] Add logging --- bin/bake.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/bin/bake.js b/bin/bake.js index 4f4301da..3e5a954e 100755 --- a/bin/bake.js +++ b/bin/bake.js @@ -68,6 +68,11 @@ async function betterPrepareConfig(flags) { console.log(JSON.stringify(flags, null, 3)); const { input, config } = flags; + console.log('betterPrepareConfig:input'); + console.log(input); + console.log('betterPrepareConfig:config'); + console.log(config); + const projectConfigFilePath = resolve(input, !!config ? config : defaultConfigFile); const projectConfigFile = await import(projectConfigFilePath); From a5001dfad3452409f677c85094862a692d4410c9 Mon Sep 17 00:00:00 2001 From: James Perez Date: Thu, 7 Nov 2024 11:51:19 -0800 Subject: [PATCH 09/18] fix config merge --- bin/bake.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bin/bake.js b/bin/bake.js index 3e5a954e..c03caa3c 100755 --- a/bin/bake.js +++ b/bin/bake.js @@ -85,7 +85,7 @@ async function betterPrepareConfig(flags) { const mergedConfig = { ...defaultConfig, - ...projectConfig, + ...projectConfig.default, }; console.log('betterPrepareConfig:mergedConfig'); From 9dacc4138f09e99f67e495a3a8d37d740f24cf09 Mon Sep 17 00:00:00 2001 From: James Perez Date: Thu, 7 Nov 2024 16:37:16 -0800 Subject: [PATCH 10/18] refactoring screenshots --- bin/bake.js | 67 +------------------ lib/engines/base.js | 4 -- lib/engines/rollup.js | 28 ++++---- lib/env.js | 16 ++--- lib/index.js | 150 ++++++++++++++++-------------------------- 5 files changed, 76 insertions(+), 189 deletions(-) diff --git a/bin/bake.js b/bin/bake.js index c03caa3c..d638a7c6 100755 --- a/bin/bake.js +++ b/bin/bake.js @@ -44,25 +44,6 @@ function getDefaultFromModule(module) { return module.__esModule ? module.default : module; } -// async function compileAndLoadConfig(pathToConfig) { -// const bundle = await rollup({ -// external: () => true, -// input: pathToConfig, -// treeshake: false, -// }); -// -// const { -// output: [{ code }], -// } = await bundle.generate({ -// exports: 'named', -// format: 'cjs', -// interop: 'auto', -// }); -// const loadedConfig = requireFromString(code, pathToConfig); -// -// return getDefaultFromModule(loadedConfig); -// } - async function betterPrepareConfig(flags) { console.log('betterPrepareConfig:flags'); console.log(JSON.stringify(flags, null, 3)); @@ -94,48 +75,6 @@ async function betterPrepareConfig(flags) { return mergedConfig; } -// async function prepareConfig(inputOptions) { -// // the input directory everything is relative to -// const input = inputOptions.input; -// -// // a config parameter was passed -// if (inputOptions.config) { -// // we check to see if it was passed as a boolean and use our default path to the config, otherwise we use what was given -// const pathToConfig = resolve( -// input, -// inputOptions.config === true ? defaultConfigFile : inputOptions.config -// ); -// -// inputOptions = await compileAndLoadConfig(pathToConfig); -// } -// -// // prep a helper function to resolve paths against input -// const resolver = (key) => inputOptions[key] || defaultConfig[key]; -// -// const options = {}; -// -// options.assets = resolver('assets'); -// options.createPages = resolver('createPages'); -// options.data = resolver('data'); -// options.domain = resolver('domain'); -// options.embeds = resolver('embeds'); -// options.entrypoints = resolver('entrypoints'); -// options.imageSrcSizes = resolver('imageSrcSizes'); -// options.input = resolver('input'); -// options.layouts = resolver('layouts'); -// options.nunjucksVariables = resolver('nunjucksVariables'); -// options.nunjucksFilters = resolver('nunjucksFilters'); -// options.nunjucksTags = resolver('nunjucksTags'); -// options.minifyOptions = resolver('minifyOptions'); -// options.output = resolver('output'); -// options.pathPrefix = resolver('pathPrefix'); -// options.staticRoot = resolver('staticRoot'); -// options.svelteCompilerOptions = resolver('svelteCompilerOptions'); -// options.crosswalkPath = resolver('crosswalkPath'); -// -// return options; -// } - const mriConfig = { alias: { a: 'assets', @@ -185,12 +124,8 @@ async function run(args) { } break; case 'screenshot': - // Change a few config options for taking screenshots - const screenshotConfig = { ...config, output: SCREENSHOT_DIR }; - const screenshotBaker = new Baker(screenshotConfig); - try { - await screenshotBaker.screenshot(); + await baker.screenshots(); console.log(green(bold('The screenshot was a success!'))); } catch (err) { diff --git a/lib/engines/base.js b/lib/engines/base.js index e71383d4..cbd22c6d 100644 --- a/lib/engines/base.js +++ b/lib/engines/base.js @@ -83,10 +83,6 @@ export class BaseEngine { return this.dependencies.add(file); } - getDependencies() { - return Array.from(this.dependencies); - } - invalidate() { this.manifest = {}; this.dependencies.clear(); diff --git a/lib/engines/rollup.js b/lib/engines/rollup.js index 7eb9a91f..6b7105cd 100644 --- a/lib/engines/rollup.js +++ b/lib/engines/rollup.js @@ -99,7 +99,7 @@ export class RollupEngine extends BaseEngine { 'mini-sync/client' )}";\nimport "${polyfillsDynamicImport}";\n`; - const config = { + return { input, plugins: [ !nomodule && prependEntry({ content }), @@ -179,10 +179,8 @@ export class RollupEngine extends BaseEngine { ].filter(Boolean), inlineDynamicImports, preserveEntrySignatures: false, - onwarn, + onwarn: RollupEngine.onWarn, }; - - return config; } generateOutputOptions({ dir, nomodule = false }) { @@ -293,7 +291,7 @@ export class RollupEngine extends BaseEngine { const modernInput = this.generateModernInput(entrypoints); // get our current environment for passing into the input bundle - const { stringified: replaceValues } = getEnvironment(this.pathPrefix); + const { replaceValues } = getEnvironment(this.pathPrefix); // create the modern bundle const { @@ -341,7 +339,7 @@ export class RollupEngine extends BaseEngine { const input = this.generateModernInput(entrypoints); // get our current environment for passing into the input bundle - const { stringified: replaceValues } = getEnvironment(this.pathPrefix); + const { replaceValues } = getEnvironment(this.pathPrefix); // generate the Rollup inputOptions const inputOptions = this.generateInputOptions(input, replaceValues); @@ -395,15 +393,15 @@ export class RollupEngine extends BaseEngine { } }); } -} -export function onwarn(warning, onwarn) { - if ( - warning.code === 'CIRCULAR_DEPENDENCY' && - /[/\\]d3-\w+[/\\]/.test(warning.message) - ) { - return; - } + static onWarn(warning, onwarn) { + if ( + warning.code === 'CIRCULAR_DEPENDENCY' && + /[/\\]d3-\w+[/\\]/.test(warning.message) + ) { + return; + } - onwarn(warning); + onwarn(warning); + } } diff --git a/lib/env.js b/lib/env.js index a6db6d78..704e17b1 100644 --- a/lib/env.js +++ b/lib/env.js @@ -12,11 +12,7 @@ export const isProductionEnv = nodeEnv === 'production'; export const inDebugMode = Boolean(DEBUG); -/** - * Regex for grabbing any environmental variables that may start with "BAKER_". - * @type {RegExp} - */ -const BAKER_REGEX = /^BAKER_/i; +const BAKER_PREFIX = 'BAKER_'; /** * @param {string} pathPrefix @@ -26,10 +22,10 @@ export function getEnvironment(pathPrefix) { const keys = Object.keys(process.env); // find any of them that match our regex for BAKER_ exclusive ones - const bakerKeys = keys.filter((key) => BAKER_REGEX.test(key)); + const bakerKeys = keys.filter((key) => key.startsWith(BAKER_PREFIX)); // build the object of environment variables - const raw = bakerKeys.reduce( + const vars = bakerKeys.reduce( (env, key) => { env[key] = process.env[key]; return env; @@ -43,12 +39,12 @@ export function getEnvironment(pathPrefix) { ); // Stringify all values so we can pass it directly to rollup-plugin-replace - const stringified = Object.keys(raw).reduce((env, key) => { - env[`process.env.${key}`] = JSON.stringify(raw[key]); + const replaceValues = Object.keys(vars).reduce((env, key) => { + env[`process.env.${key}`] = JSON.stringify(vars[key]); return env; }, {}); - return { raw, stringified }; + return { vars, replaceValues }; } export function getBasePath(domain, pathPrefix) { diff --git a/lib/index.js b/lib/index.js index b4dd4c3c..7c7c0fbe 100644 --- a/lib/index.js +++ b/lib/index.js @@ -5,7 +5,7 @@ import path, { join, resolve } from 'path'; // packages import chokidar from 'chokidar'; -import { green, yellow } from 'colorette'; +import { green, red, yellow } from 'colorette'; import debounce from 'lodash.debounce'; import dotenv from 'dotenv'; import dotenvExpand from 'dotenv-expand'; @@ -53,7 +53,7 @@ const CROSSWALK_ALLOWED_EXTS = { vid: validVideoExtensions.map((ext) => ext.replace('.', '')), }; -const FIXED_FALLBACK_SCREENSHOT_WIDTH = 375; +const SCREENSHOT_FIXED_FALLBACK_WIDTH = 375; /** * @typedef {Object} BakerOptions @@ -382,45 +382,67 @@ export class Baker extends EventEmitter { }, preppedData); } + async bake() { + // emit event that a bake has begun + this.emit('bake:start'); + + // build the distribution + // remove the output directory to make sure it's clean + await premove(this.output); + + // prep the data + const data = await this.getData(); + + // pass the data context to rollup and nunjucks + this.rollup.context = data; + this.nunjucks.context = data; + + // wait for all the assets to prepare first + await this.assets.build(); + + // compile the rest of the assets + await Promise.all([this.sass.build(), this.rollup.build()]); + + // build the HTML + await this.nunjucks.build(); + + if (isProductionEnv) { + console.log(yellow('Taking screenshots for fallback PNGs...')); + await this.screenshots(); + console.log('Done taking screenshots'); + } + + // emit event that a bake has completed + this.emit('bake:end'); + } + /** * Generates fallback images for web-component embeds. - * @param {string} baseUrl The local server's base URL * @returns {Promise} */ - async buildEmbedFallbacks(baseUrl) { - const distDir = this.output.split('/').slice(0, -1).join('/'); - const embedFilePattern = path.join(distDir, '_dist', 'embeds'); - - /** - * An array of file paths representing embed files. - * @type {string[]} - */ - const embedFiles = await new Promise((resolve, reject) => { - readdir(embedFilePattern, (err, files) => { - //handling error - if (err) { - reject('Unable to scan directory: ' + err); - } + async screenshots() { - resolve(files); - }); - }); - - if (!embedFiles.length) return; + } + /** + * An array of file paths representing embed files. + * @type {string[]} + */ + async takeScreenshots(baseUrl, embedFilepaths) { + // Start puppeteer const browser = await puppeteer.launch({ headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox'], }); - for (const embedName of embedFiles) { + for (const embedFilepath of embedFilepaths) { try { - const embedPath = `embeds/${embedName}/index.html`; - const screenshotLocalUrl = `${baseUrl}/${embedPath}`; - console.log(`Taking screenshot of: ${screenshotLocalUrl}`); + const embedPath = `embeds/${embedFilepath}/index.html`; + const embedUrl = `${baseUrl}/embeds/${embedPath}`; + console.log(`Taking screenshot of: ${embedUrl}`); const page = await browser.newPage(); - await page.goto(screenshotLocalUrl, { + await page.goto(embedUrl, { waitUntil: 'networkidle0', }); @@ -435,8 +457,9 @@ export class Baker extends EventEmitter { document.documentElement.clientHeight ); }); + await page.setViewport({ - width: FIXED_FALLBACK_SCREENSHOT_WIDTH, + width: SCREENSHOT_FIXED_FALLBACK_WIDTH, height: contentHeight, deviceScaleFactor: 2, }); @@ -444,18 +467,13 @@ export class Baker extends EventEmitter { await page.waitForNetworkIdle(); // store the fallback image in the _dist directory - const screenshotEmbedDir = join(this.output, embedPath) - .split('/') - .slice(0, -1) - .join('/') - .replace('_screenshot', '_dist'); - const screenshotStoragePath = join(screenshotEmbedDir, 'fallback.png'); - console.log(`Storing the fallback image at: ${screenshotStoragePath}.`); - - await page.screenshot({ path: screenshotStoragePath, fullPage: true }); + const screenshotFilepath = `${this.output}/${embedFilepath}/fallback.png`; + console.log(`Storing the fallback image at: ${screenshotFilepath}.`); + + await page.screenshot({ path: screenshotFilepath, fullPage: true }); await page.close(); } catch (err) { - console.error(`Failed to process ${embedName}: ${err.message}`); + console.error(`Failed to process ${embedFilepath}: ${err.message}`); } } @@ -655,60 +673,4 @@ export class Baker extends EventEmitter { dataWatcher.on(event, onChange); }); } - - async buildDistribution() { - // remove the output directory to make sure it's clean - await premove(this.output); - - // prep the data - const data = await this.getData(); - - // pass the data context to rollup and nunjucks - this.rollup.context = data; - this.nunjucks.context = data; - - // wait for all the assets to prepare first - await this.assets.build(); - - // compile the rest of the assets - await Promise.all([this.sass.build(), this.rollup.build()]); - - // build the HTML - await this.nunjucks.build(); - } - - async bake() { - // emit event that a bake has begun - this.emit('bake:start'); - - // build the distribution - await this.buildDistribution(); - - // emit event that a bake has completed - this.emit('bake:end'); - } - - async screenshot() { - // build the _screenshot directory - await this.buildDistribution(); - - // we only load mini-sync if it is being used - const { create } = await import('mini-sync'); - - // prep the server instance - const server = create({ - dir: [this.output, this.input], - port: 3000, - }); - - // Start the server - console.log(yellow('Starting screenshot server...')); - const { local: baseUrl, network: external } = await server.start(); - - // screenshot the embeds - await this.buildEmbedFallbacks(baseUrl); - - console.log(yellow('Closing server...')); - await server.close(); - } } From fcbc3e568f811e1b9a1be68966168e5df45a4384 Mon Sep 17 00:00:00 2001 From: James Perez Date: Thu, 7 Nov 2024 16:39:09 -0800 Subject: [PATCH 11/18] refactoring screenshots --- bin/bake.js | 1 - lib/index.js | 43 ++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 42 insertions(+), 2 deletions(-) diff --git a/bin/bake.js b/bin/bake.js index d638a7c6..e85342ab 100755 --- a/bin/bake.js +++ b/bin/bake.js @@ -15,7 +15,6 @@ import { logErrorMessage } from '../lib/utils.js'; const logger = debug('baker:cli'); const OUTPUT_DIR = '_dist'; -const SCREENSHOT_DIR = '_screenshot'; const defaultConfigFile = 'baker.config.js'; diff --git a/lib/index.js b/lib/index.js index 7c7c0fbe..77b3495e 100644 --- a/lib/index.js +++ b/lib/index.js @@ -421,7 +421,48 @@ export class Baker extends EventEmitter { * @returns {Promise} */ async screenshots() { - + const embedsDirectory = path.join(this.output, 'embeds'); + + /** + * An array of file paths representing embed files. + * @type {string[]} + */ + // const embedFilepaths = await new Promise((resolve, reject) => { + // readdir(embedsDirectory, (err, files) => { + // //handling error + // if (err) { + // reject('Unable to scan directory: ' + err); + // } + // + // resolve(files); + // }); + // }); + // + // if (!embedFilepaths.length) { + // console.log(red(`No embeds found in directory ${embedsDirectory}`)); + // return; + // } + // + // console.log('Embed filepaths found in output directory:', embedFilepaths); + // + // // we only load mini-sync if it is being used + // const { create } = await import('mini-sync'); + // + // // prep the server instance + // const server = create({ + // dir: [this.output, this.input], + // port: 3000, + // }); + // + // // Start the server + // console.log(yellow('Starting screenshot server...')); + // const { local: baseUrl, network: external } = await server.start(); + // + // // screenshot the embeds + // await this.takeScreenshots(baseUrl, embedFilepaths); + // + // console.log(yellow('Closing server...')); + // await server.close(); } /** From 1da5c5fd5771ad5411c5d0be936a86111b93e9e4 Mon Sep 17 00:00:00 2001 From: James Perez Date: Thu, 7 Nov 2024 16:39:28 -0800 Subject: [PATCH 12/18] refactoring screenshots --- lib/index.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/lib/index.js b/lib/index.js index 77b3495e..360c9371 100644 --- a/lib/index.js +++ b/lib/index.js @@ -427,16 +427,16 @@ export class Baker extends EventEmitter { * An array of file paths representing embed files. * @type {string[]} */ - // const embedFilepaths = await new Promise((resolve, reject) => { - // readdir(embedsDirectory, (err, files) => { - // //handling error - // if (err) { - // reject('Unable to scan directory: ' + err); - // } - // - // resolve(files); - // }); - // }); + const embedFilepaths = await new Promise((resolve, reject) => { + readdir(embedsDirectory, (err, files) => { + //handling error + if (err) { + reject('Unable to scan directory: ' + err); + } + + resolve(files); + }); + }); // // if (!embedFilepaths.length) { // console.log(red(`No embeds found in directory ${embedsDirectory}`)); From ba6298dc69987056610c94992aa65b946d24a26b Mon Sep 17 00:00:00 2001 From: James Perez Date: Thu, 7 Nov 2024 16:39:42 -0800 Subject: [PATCH 13/18] refactoring screenshots --- lib/index.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/lib/index.js b/lib/index.js index 360c9371..6c53fdc6 100644 --- a/lib/index.js +++ b/lib/index.js @@ -437,12 +437,12 @@ export class Baker extends EventEmitter { resolve(files); }); }); - // - // if (!embedFilepaths.length) { - // console.log(red(`No embeds found in directory ${embedsDirectory}`)); - // return; - // } - // + + if (!embedFilepaths.length) { + console.log(red(`No embeds found in directory ${embedsDirectory}`)); + return; + } + // console.log('Embed filepaths found in output directory:', embedFilepaths); // // // we only load mini-sync if it is being used From 3c64c55ddbf1cc2be3e42a2fa3b1eaf7ce884e32 Mon Sep 17 00:00:00 2001 From: James Perez Date: Thu, 7 Nov 2024 16:40:08 -0800 Subject: [PATCH 14/18] refactoring screenshots --- lib/index.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/lib/index.js b/lib/index.js index 6c53fdc6..f92972d4 100644 --- a/lib/index.js +++ b/lib/index.js @@ -443,11 +443,11 @@ export class Baker extends EventEmitter { return; } - // console.log('Embed filepaths found in output directory:', embedFilepaths); - // - // // we only load mini-sync if it is being used - // const { create } = await import('mini-sync'); - // + console.log('Embed filepaths found in output directory:', embedFilepaths); + + // we only load mini-sync if it is being used + const { create } = await import('mini-sync'); + // // prep the server instance // const server = create({ // dir: [this.output, this.input], From a19dbf119ecf18fe1ade56a6d707f3b3e41f7e46 Mon Sep 17 00:00:00 2001 From: James Perez Date: Thu, 7 Nov 2024 16:40:21 -0800 Subject: [PATCH 15/18] refactoring screenshots --- lib/index.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/lib/index.js b/lib/index.js index f92972d4..4dcb66aa 100644 --- a/lib/index.js +++ b/lib/index.js @@ -448,12 +448,12 @@ export class Baker extends EventEmitter { // we only load mini-sync if it is being used const { create } = await import('mini-sync'); - // // prep the server instance - // const server = create({ - // dir: [this.output, this.input], - // port: 3000, - // }); - // + // prep the server instance + const server = create({ + dir: [this.output, this.input], + port: 3000, + }); + // // Start the server // console.log(yellow('Starting screenshot server...')); // const { local: baseUrl, network: external } = await server.start(); From c601b41cef19383582070bed99a98c2a98bf903c Mon Sep 17 00:00:00 2001 From: James Perez Date: Thu, 7 Nov 2024 16:40:29 -0800 Subject: [PATCH 16/18] refactoring screenshots --- lib/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/index.js b/lib/index.js index 4dcb66aa..e9eb1eab 100644 --- a/lib/index.js +++ b/lib/index.js @@ -454,10 +454,10 @@ export class Baker extends EventEmitter { port: 3000, }); - // // Start the server - // console.log(yellow('Starting screenshot server...')); - // const { local: baseUrl, network: external } = await server.start(); - // + // Start the server + console.log(yellow('Starting screenshot server...')); + const { local: baseUrl, network: external } = await server.start(); + // // screenshot the embeds // await this.takeScreenshots(baseUrl, embedFilepaths); // From 678e8148a9b799264c56d961c406a55a4f2fbab8 Mon Sep 17 00:00:00 2001 From: James Perez Date: Thu, 7 Nov 2024 16:41:05 -0800 Subject: [PATCH 17/18] refactoring screenshots --- lib/index.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/lib/index.js b/lib/index.js index e9eb1eab..3ad44dfe 100644 --- a/lib/index.js +++ b/lib/index.js @@ -458,11 +458,11 @@ export class Baker extends EventEmitter { console.log(yellow('Starting screenshot server...')); const { local: baseUrl, network: external } = await server.start(); - // // screenshot the embeds - // await this.takeScreenshots(baseUrl, embedFilepaths); - // - // console.log(yellow('Closing server...')); - // await server.close(); + // screenshot the embeds + await this.takeScreenshots(baseUrl, embedFilepaths); + + console.log(yellow('Closing server...')); + await server.close(); } /** From 23d09b98537be7eb7c51c20339f5c406ce989e0e Mon Sep 17 00:00:00 2001 From: James Perez Date: Thu, 7 Nov 2024 16:49:12 -0800 Subject: [PATCH 18/18] remove subManifests --- lib/engines/base.js | 1 - lib/engines/rollup.js | 1 - 2 files changed, 2 deletions(-) diff --git a/lib/engines/base.js b/lib/engines/base.js index cbd22c6d..21fbf687 100644 --- a/lib/engines/base.js +++ b/lib/engines/base.js @@ -13,7 +13,6 @@ import { noop, outputFile } from '../utils.js'; * handle the majority of tasks. */ export class BaseEngine { - subManifests = []; /** * @param {object} options diff --git a/lib/engines/rollup.js b/lib/engines/rollup.js index 6b7105cd..21cd42c1 100644 --- a/lib/engines/rollup.js +++ b/lib/engines/rollup.js @@ -27,7 +27,6 @@ import { createRequire } from 'module'; const require = createRequire(import.meta.url); export class RollupEngine extends BaseEngine { - subManifests = ['modern', 'css', 'legacy']; constructor({ entrypoints, svelteCompilerOptions = {}, ...args }) { super(args);