Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve build tools to make it easier to create custom components #592

Merged
merged 1 commit into from
Mar 8, 2021
Merged

Improve build tools to make it easier to create custom components #592

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions components/bin/build
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,11 +56,11 @@ const config = JSON.parse(fs.readFileSync(process.argv[2] || 'build.json'));
const TARGETS = config.targets || []; // the files to include in the component
const EXCLUDE = new Map((config.exclude || []).map(name => [name, true])); // files to exclude from the component
const EXCLUDESUBDIRS = config.excludeSubdirs === 'true'; // exclude subdirectories
const MATHJAX = config.mathjax || mjPath; // path to the MathJax .js files
const MATHJAX = config.js || config.mathjax || mjPath; // path to the compiled .js files
const LIB = config.lib || './lib'; // path to the lib directory to create
const COMPONENT = path.basename(config.component || 'part'); // name of the component
const GLOBAL = config.global || `../${MATHJAX}/components/global.js`; // the location of global.js
const SRC = MATHJAX.replace(/js$/, 'ts'); // path to the MathJax .ts files
const SRC = config.ts || MATHJAX.replace(/js$/, 'ts'); // path to the .ts files

/**
* The list of files that need to be added to the lib directory
Expand Down
14 changes: 7 additions & 7 deletions components/bin/makeAll
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,15 +42,15 @@ if (dirs.length === 0) {
* (on Unix, could be done without the 'node ' prefix, but
* for Windows, these are needed.)
*/
const build = 'node ' + path.join(__dirname, 'build');
const copy = 'node ' + path.join(__dirname, 'copy');
const pack = 'node ' + path.join(__dirname, 'pack');
const build = `node '${path.join(__dirname, 'build')}'`;
const copy = `node '${path.join(__dirname, 'copy')}'`;
const pack = `node '${path.join(__dirname, 'pack')}'`;

/**
* Regular expression for the components directory
*/
const compRE = new RegExp(path.dirname(__dirname).replace(/([\\.{}[\]()?*^$])/g, '\$1'), 'g');

const compRE = new RegExp(path.dirname(__dirname).replace(/([\\.{}[\]()?*^$])/g, '\\$1'));
const dirRE = new RegExp(process.cwd().replace(/([\\.{}[\]()?*^$])/g, '\\$1'));

/**
* Process the contents of an array of directories
Expand Down Expand Up @@ -100,7 +100,7 @@ function processSubdirs(dir, action) {
function buildLib(dir) {
const file = path.join(dir, 'build.json');
if (!fs.existsSync(file)) return;
console.info('Building ' + dir.replace(compRE, ''));
console.info('Building ' + dir.replace(compRE, '').replace(dirRE, '.'));
const wd = process.cwd();
try {
process.chdir(dir);
Expand All @@ -120,7 +120,7 @@ function buildLib(dir) {
function webpackLib(dir) {
const file = path.join(dir, 'webpack.config.js');
if (!fs.existsSync(file)) return;
console.info('Webpacking ' + dir.replace(compRE, ''));
console.info('Webpacking ' + dir.replace(compRE, '').replace(dirRE, '.'));
const wd = process.cwd();
try {
process.chdir(dir);
Expand Down
14 changes: 12 additions & 2 deletions components/bin/pack
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,14 @@ async function webpackLib(dir) {
try {
process.chdir(dir);
const dirRE = fileRegExp(path.resolve(dir));

//
// Get js directory from the webpack.config.js file
//
const jsdir = require(path.resolve(dir, 'webpack.config.js')).plugins[0].definitions.jsdir;
const jsRE = fileRegExp(jsdir);
const libRE = fileRegExp(path.resolve(jsdir, '..', 'components'));

//
// Get the json from webpack and print the asset name and size
//
Expand All @@ -100,8 +108,10 @@ async function webpackLib(dir) {
if (module.moduleType.match(/javascript/)) {
const name = module.name
.replace(compRE, '[components]')
.replace(rootRE, '[js]')
.replace(nodeRE, '[node]');
.replace(rootRE, '[mathjax]')
.replace(nodeRE, '[node]')
.replace(jsRE, '[js]')
.replace(libRE, '[lib]');
console.log(' ' + name + fileSize(module));
}
}
Expand Down
38 changes: 24 additions & 14 deletions components/webpack.common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,28 +39,35 @@ function quoteRE(string) {
/**
* Creates the plugin needed for converting mathjax references to component/lib references
*
* @param {string} mathjax The location of the MathJax js files
* @param {string} js The location of the compiled js files
* @param {string[]} lib The component library directories to be linked against
* @param {string} dir The directory of the component being built
* @return {any[]} The plugin array (empty or with the conversion plugin)
*/
const PLUGINS = function (mathjax, libs, dir) {
const mjdir = path.resolve(dir, mathjax);
const mjRE = new RegExp('^' + quoteRE(mjdir + path.sep));
const PLUGINS = function (js, libs, dir) {
const mjdir = path.resolve(__dirname, '..', 'js');
const jsdir = path.resolve(dir, js);
const mjRE = new RegExp('^(?:' + quoteRE(jsdir) + '|' + quoteRE(mjdir) + ')' + quoteRE(path.sep));
const root = path.dirname(mjdir);
const rootRE = new RegExp('^' + quoteRE(root + path.sep));
const nodeRE = new RegExp('^' + quoteRE(path.dirname(root) + path.sep));

const plugins = [];
//
// Record the js directory for the pack command
//
const plugins = [new webpack.DefinePlugin({jsdir: jsdir})];

if (libs.length) {
plugins.push(
//
// Move mathjax references to component libraries
//
new webpack.NormalModuleReplacementPlugin(
/^[^\/].*\.js$/,
/^[^\/]/,
function (resource) {
const request = path.resolve(resource.context, resource.request);
const request = require.resolve(resource.request.charAt(0) === '.' ?
path.resolve(resource.context, resource.request) :
resource.request);
if (!request.match(mjRE)) return;
for (const lib of libs) {
const file = request.replace(mjRE, path.join(root, lib) + path.sep);
Expand All @@ -78,9 +85,11 @@ const PLUGINS = function (mathjax, libs, dir) {
// Check for packages that should be rerouted to node_modules
//
new webpack.NormalModuleReplacementPlugin(
/^[^\/].*\.js$/,
/^[^\/]$/,
function (resource) {
const request = path.resolve(resource.context, resource.request);
const request = require.resolve(resource.request.charAt(0) === '.' ?
path.resolve(resource.context, resource.request) :
resource.request);
if (request.match(rootRE) || !request.match(nodeRE) || fs.existsSync(request)) return;
const file = request.replace(nodeRE, path.join(root, 'node_modules') + path.sep);
if (fs.existsSync(file)) {
Expand Down Expand Up @@ -123,15 +132,15 @@ const MODULE = function (dir) {
* Create a webpack configuration for a distribution file
*
* @param {string} name The name of the component to create
* @param {string} mathjax The path to the MathJax .js files
* @param {string} js The path to the compiled .js files
* @param {string[]} libs Array of paths to component lib directories to link against
* @param {string} dir The directory of the component buing built
* @param {string} dist The path to the directory where the component .js file will be placed
* (defaults to mathjax/es5)
* (defaults to es5 in the same directory as the js directory)
*/
const PACKAGE = function (name, mathjax, libs, dir, dist) {
const PACKAGE = function (name, js, libs, dir, dist) {
const distDir = dist ? path.resolve(dir, dist) :
path.resolve(path.dirname(mathjax), 'es5', path.dirname(name));
path.resolve(path.dirname(js), 'es5', path.dirname(name));
name = path.basename(name);
return {
name: name,
Expand All @@ -140,7 +149,8 @@ const PACKAGE = function (name, mathjax, libs, dir, dist) {
path: distDir,
filename: name + (dist === '.' ? '.min.js' : '.js')
},
plugins: PLUGINS(mathjax, libs, dir),
target: ['web', 'es5'], // needed for IE11 and old browsers
plugins: PLUGINS(js, libs, dir),
module: MODULE(dir),
performance: {
hints: false
Expand Down