diff --git a/packages/pv-stylemark/webpack-plugin/getFilesToWatch.js b/packages/pv-stylemark/webpack-plugin/getFilesToWatch.js index e99be4a..548dc74 100644 --- a/packages/pv-stylemark/webpack-plugin/getFilesToWatch.js +++ b/packages/pv-stylemark/webpack-plugin/getFilesToWatch.js @@ -2,36 +2,62 @@ const { asyncGlob } = require("@pro-vision/assemble-lite/helper/io-helper"); const { getAppConfig, join } = require("../helper/paths"); -const { componentsSrc, cdPagesSrc, cdTemplatesSrc, lsgIndex, hbsHelperSrc } = getAppConfig(); +const { + componentsSrc, + cdPagesSrc, + cdTemplatesSrc, + lsgIndex, + lsgAssetsSrc, + hbsHelperSrc, + lsgTemplatesSrc, + lsgConfigPath, +} = getAppConfig(); -const getFilesToWatch = async () => { - const files = { - staticStylemarkFiles: [ - lsgIndex, - // stylemark .md files - ...(await asyncGlob(join(componentsSrc, "**/*.md"))), +// glob pattern for the files used in the living styleguide +const fileGlobes = { + staticStylemarkFiles: { + // styleguide config file + config: lsgConfigPath, + index: lsgIndex, + // stylemark .md files + markDown: join(componentsSrc, "**/*.md"), + // static assets / resources + resources: join(lsgAssetsSrc, "**"), + }, + assembleFiles: { + data: [ + // add .json,.yaml/.yml Component data files + join(componentsSrc, "**/*.{json,yaml,yml}"), + // add .json,.yaml/.yml Layout data files + join(cdTemplatesSrc, "**/*.{json,yaml,yml}"), ], + // handlebars helpers + helpers: join(hbsHelperSrc, "*.js"), + // add .hbs Components files + components: join(componentsSrc, "**/*.hbs"), + // add .hbs Pages files + pages: join(cdPagesSrc, "**/*.hbs"), + // add .hbs Template/Layout files + layouts: join(cdTemplatesSrc, "**/*.hbs"), + // Living styleguide Layouts + lsgLayouts: join(lsgTemplatesSrc, "**/*.hbs"), + }, +}; - assembleFiles: [ - // add .json Components files - ...(await asyncGlob(join(componentsSrc, "**/*.json"))), - // add .yaml/.yml Component files - ...(await asyncGlob(join(componentsSrc, "**/*.yaml"))), - ...(await asyncGlob(join(componentsSrc, "**/*.yml"))), - // handlebars helpers - ...(await asyncGlob(join(hbsHelperSrc, "*.js"))), - // add .hbs Components files - ...(await asyncGlob(join(componentsSrc, "**/*.hbs"))), - // add .hbs Pages files - ...(await asyncGlob(join(cdPagesSrc, "**/*.hbs"))), - // add .hbs Template files - ...(await asyncGlob(join(cdTemplatesSrc, "**/*.hbs"))), - ], - }; +const getFilesToWatch = async () => { + // get paths for assemble and lsg in parallel + const lsgFilesPromise = Promise.all(Object.values(fileGlobes.staticStylemarkFiles).map(asyncGlob)); + const assembleFilesPromise = Promise.all(Object.values(fileGlobes.assembleFiles).flat().map(asyncGlob)); + const lsgFiles = (await lsgFilesPromise).flat(); + const assembleFiles = (await assembleFilesPromise).flat(); - return files; + return { + lsgFiles, + assembleFiles, + }; }; module.exports = { + fileGlobes, getFilesToWatch, }; diff --git a/packages/pv-stylemark/webpack-plugin/index.js b/packages/pv-stylemark/webpack-plugin/index.js index a52287f..b81a412 100644 --- a/packages/pv-stylemark/webpack-plugin/index.js +++ b/packages/pv-stylemark/webpack-plugin/index.js @@ -1,30 +1,32 @@ +const Assemble = require("@pro-vision/assemble-lite/Assemble"); + const buildStylemark = require("../scripts/buildStylemarkLsg"); -const { getFilesToWatch } = require("./getFilesToWatch"); +const { getFilesToWatch, fileGlobes } = require("./getFilesToWatch"); +const { resolveApp, getAppConfig, join } = require("../helper/paths"); + +const { destPath, componentsSrc } = getAppConfig(); class PvStylemarkPlugin { constructor() { // list of files currently being watched which need a re-compile of assemble or stylemark when modified - this.watchedFiles = { staticStylemarkFiles: [], assembleFiles: [] }; + this.watchedFiles = { lsgFiles: [], assembleFiles: [] }; // is false during watch mode and when re-compiling because some files have been changed this.firstRun = true; + this.assemble = new Assemble(); } apply(compiler) { compiler.hooks.emit.tapAsync("PvStylemarkPlugin", async (compilation, callback) => { // add files for stylemark and assemble to webpack to watch const filesToWatch = await getFilesToWatch(); - const allFiles = Object.values(filesToWatch).reduce((acc, val) => acc.concat(val), []); + const allFiles = Object.values(filesToWatch).flat(); allFiles.forEach(file => compilation.fileDependencies.add(file)); const changedFiles = this.firstRun ? [] : [...compiler.modifiedFiles, ...compiler.removedFiles]; const changedStylemarkFiles = changedFiles // modified / removed files - .filter(filePath => this.watchedFiles.staticStylemarkFiles.includes(filePath)) + .filter(filePath => this.watchedFiles.lsgFiles.includes(filePath)) // new files - .concat( - filesToWatch.staticStylemarkFiles.filter( - filePath => !this.watchedFiles.staticStylemarkFiles.includes(filePath), - ), - ); + .concat(filesToWatch.lsgFiles.filter(filePath => !this.watchedFiles.lsgFiles.includes(filePath))); const changedAssembleFiles = changedFiles // modified / removed files .filter(filePath => this.watchedFiles.assembleFiles.includes(filePath)) @@ -37,11 +39,35 @@ class PvStylemarkPlugin { // only needs build on the first run and when assemble files have been changed const buildAssemble = this.firstRun || changedAssembleFiles.length; const copyStylemarkFiles = this.firstRun || changedStylemarkFiles.length; + // only needs build on the first run and when stylemark or assemble files have been changed + const buildLsg = buildAssemble || copyStylemarkFiles; + + if (buildAssemble) { + await this.assemble.build( + { + baseDir: resolveApp(componentsSrc), + components: resolveApp(fileGlobes.assembleFiles.components), + pages: resolveApp(fileGlobes.assembleFiles.pages), + data: fileGlobes.assembleFiles.data.map(resolveApp), + helpers: resolveApp(fileGlobes.assembleFiles.helpers), + layouts: resolveApp(fileGlobes.assembleFiles.layouts), + lsgLayouts: resolveApp(fileGlobes.assembleFiles.lsgLayouts), + componentsTargetDirectory: resolveApp(join(destPath, "components")), + pagesTargetDirectory: resolveApp(join(destPath, "pages")), + lsgComponentsTargetDirectory: resolveApp(join(destPath, "/lsg_components")), + }, + this.firstRun ? null : changedAssembleFiles, + ); + } - await buildStylemark({ - shouldCopyStyleguideFiles: copyStylemarkFiles, - shouldAssemble: buildAssemble, - }); + if (buildLsg) { + await buildStylemark({ + // unless files were changed but none was a static stylemark file + shouldCopyStyleguideFiles: copyStylemarkFiles, + // unless files were changed but none was an assemble file + shouldAssemble: false, + }); + } // for the next iteration this.firstRun = false;