yproximite/yprox-cli

:wrench: A tool for linting and building assets from yProx CMS.

yProx-CLI

A tool for bulk linting and building assets.

Another tool?

Yes, but linting and building a lot of assets is now easier than ever!

Out of the box, yProx-CLI comes with:

• JavaScript support (+ Buble)
• CSS and Sass support
• Rollup support (JavaScript, Vue, GraphQL) for modern apps
• ESLint for linting JavaScript files
• Stylelint for linting CSS and Sass support
• Copy/Paste files
• Images optimization

yProx-CLI is really useful for us because it allowed us to package all the tools we need in only big package.

We have ~150 WordPress projects and it was really hard to maintain ~25 dev dependencies (for Gulp) for each project. Using yProx-CLI saves us some huge amount of time because:

• we were able to externalize all those dependencies in one package
• we were able to externalize the tooling in one package. Before, everything was in a Gulp file configuration

Documentation

Read the documentation.

Development workflow

You need to install dependencies first:

$ yarn

Tests

Tests are located inside the test folder. You can run them with:

$ yarn test

Be sure to always add a test when you are modifying something!

Linting

We use ESlint, the AirBnb preset, the Recommended rules for TypeScript, and Prettier.

You can lint the code with:

$ yarn lint
$ yarn lint --fix # will automatically fix some errors

Contribution

• Make a pull request on develop branch, its title should follows Angular commit message convention
• You should Squash and Merge your pull request

Publishing a new release

• Open a PR develop to master
• Merge your pull request with a Merge commit

yprox-cli's Issues

Lint Sass: reject when error

Replace TSLint by ESLint

La team TypeScript va contribuer à ESLint en "dépit" de TSLint.
Effectivement TSLint est bien sympathique, mais il est moins user friendly, un peu plus lent, moins "populaire" avec moins de contributeurs, et il y a beaucoup plus de configs/plugins pour ESLint que pour TSLint.

Je laisse ça ici :

• microsoft/TypeScript#29288
• https://github.com/typescript-eslint/typescript-eslint

Make ESLint and Stylelint peer and dev dependencies

Remove config from package.json

Only use config from yprox-cli.config.js, also improve options structure if we can.

Don't use YPROX_CLI_IGNORE_CONFIG_FILE or YPROX_CLI_IGNORE_PACKAGE_JSON_FILE env vars anymore.

Remove lodash dependency

Merge JS and Rollup handlers

Actually the only "benefit" from using the js handler is that you can easily concat JS files.

• Remove handler js
• Rename rollup handler to js
• Equivalent is to create a .js file and import other files

We can also add a new handler concat.

AppVeyor

Use AppVeyor aside Travis for Windows builds

Travis: add Node.js 10

Since we use yProx-CLI on our wordpress project and they use Node.js 10 (through Scalingo)

bin/yprox-cli should load the yprox-cli.config.js

Not the API.

This way, we will make tests writing a lot easier.

Related to #635

Create linter for webpack

Replace `node-sass` with `sass`

https://www.npmjs.com/package/sass

fix(sass): reject when fails

https://github.com/Yproximite/yProx-CLI/blob/master/lib/plugins/build/handlers/sass.ts#L44

it should call reject, otherwise yprox-cli won't stop when there is a Sass error:

Merge CSS and Sass handlers

Same as #321 but for styles.

Support for .env and .env.dist

https://www.npmjs.com/package/dotenv

Drop Node.js 8 support

Node 10 mini

test: see to use Puppeteer or equivalent for functionnal testing

Testing if generated files contain some string is okay, but I think it would be nice if we can inject those files in a browser and see if they behave correctly.

Use zombie to boot a webserver and use Puppeteer.

rollup: fix `sourceMap` option

TypeError: handlers[entry.handler] is not a function

Use Parcel

Si des fois j'oublie pourquoi on n'est pas passé de Rollup à Parcel, c'est parce qu'apparemment on ne peut pas marquer des modules en tant qu'externals :

• parcel-bundler/parcel#144
• parcel-bundler/parcel#955

Ou alors utiliser un trick comme parcel-bundler/parcel#144 (comment)... 🤔

Catch ESLint errors when files matched by pattern are ignored

Add ConfigGenerator

A bit related to #634

Add a config generator, aside the old plain-object config? We would have access to typings and a easier usage.

const { ConfigGenerator } = require('@yproximite/yprox-cli');

const configGenerator = ConfigGenerator.init()
  .configureAssets('app', (asset) => {
    asset.addRollupEntry('src/yprox-cli.config.js/my-file.js', rollupOptions => {});
    asset.copyFiles(from, to);
    asset.optimizeImages(from, to);
    asset.addSassEntry(...); 
    // ...
  })
  .configureRollup(options => {
     // ...
   })
;

module.exports = configGenerator.generate()

Methods to implement:

• .addEntry(name, ['...'], {})
• .addStyleEntry(name, ['...'], {}),
• .copyFiles(from, to)
• .optimizeImages(from, to)
• .configureRollup(rollup => { })
• .configureESLint(eslint => { })
• .configurePostCSS(postcss, => {})
• .configureAutoprefixer(autoprefixer => {});
• .configureImagesOptimization(options => {});

yprox-cli.config.js : `assets.XXX` must accept an object

sometimes it's cumbersome to create files for one or two entries

Add resolver for Yarn PNP

S'inspirer de :

• https://github.com/arcanis/pnp-webpack-plugin
• https://github.com/arcanis/rollup-plugin-pnp-resolve
• https://github.com/arcanis/jest-pnp-resolver

fix: pass to verbosity API#initLogger

API verbosity parameter is not used for init the logger.

Remove travis-deploy-once, use Travis stages instead

Add a way to generate both (un)minified JS files

In order to prevent tricks like

concat: `admin${cli.isProduction() ? '.min': '' }.js`,

"scripts": {
    "build": "yarn build:dev && yarn build:prod",
    "build:dev": "yprox-cli build --mode development",
    "build:prod": "yprox-cli build --mode production",
}

ESLint: don't fails if there is only warnings

Or at least, make it configurable by the user

See to improve the error message when Sass is not able to import a file

Through the tilde importer, or maybe in general? 🤔

I don't know how it works, but everything happens in https://github.com/Yproximite/yProx-cli/blob/master/lib/commands/build/handlers/sass.ts

fix rollup watch

const rollup = require('rollup');
const builtins = require('rollup-plugin-node-builtins');
const nodeResolve = require('rollup-plugin-node-resolve');
const commonjs = require('rollup-plugin-commonjs');
const string = require('rollup-plugin-string');
const json = require('rollup-plugin-json');
const globals = require('rollup-plugin-node-globals');
const replace = require('rollup-plugin-replace');
const vue = require('rollup-plugin-vue').default;
const buble = require('rollup-plugin-buble');
const { terser } = require('rollup-plugin-terser');
const log = require('fancy-log');

module.exports = (cli, entry, args) => {
  const rollupOptions = cli.projectOptions.handlers.rollup;

  const getInputOptions = () => {
    const plugins = [];

    plugins.push(builtins());
    if (rollupOptions.nodeResolve !== false) plugins.push(nodeResolve(rollupOptions.nodeResolve));
    if (rollupOptions.commonjs !== false) plugins.push(commonjs(rollupOptions.commonjs));
    if (rollupOptions.string !== false) plugins.push(string(rollupOptions.string));
    if (rollupOptions.json !== false) plugins.push(json(rollupOptions.json));
    plugins.push(globals());
    if (rollupOptions.vue !== false) plugins.push(vue(rollupOptions.vue));
    if (rollupOptions.buble !== false) plugins.push(buble(rollupOptions.buble));

    plugins.push(replace({
      'process.env.NODE_ENV': JSON.stringify(cli.mode),
    }));

    if (cli.mode === 'production') {
      plugins.push(terser(cli.projectOptions.uglify));
    }

    return {
      plugins,
      input: entry.src,
      external: Object.keys(rollupOptions.shims),
    };
  };

  const getOutputOptions = () => ({
    file: `${entry.dest}/${entry.concat}`,
    format: entry.format || 'umd',
    name: entry.name,
    sourcemap: cli.mode === 'production',
    globals: rollupOptions.shims,
  })

  const writeBundle = (bundle) => bundle.write(getOutputOptions());

  const build = () => {
    log.info(`Rollup: start bundling "${entry.src}"`);

    return rollup.rollup(getInputOptions())
      .then(bundle => writeBundle(bundle))
      .catch(err => {
        log.error(err.message, err.loc, err.snippet);
        console.log(err);

        if (!args.watch) {
          process.exit(1);
        }
      });
  };

  const watch = () => {
    const watchOptions = Object.assign({}, getInputOptions(), {
      output: getOutputOptions(),
      watch: {
        chokidar: true,
      },
    });

    const watcher = rollup.watch(watchOptions);

    watcher.on('event', (e) => {
      const { code } = e;

      if (code === 'BUNDLE_START') {
        log.info(`Rollup (watch): start bundling "${entry.src}"`);
      } else if (code === 'BUNDLE_END') {
        log.info(`Rollup (watch): done bundling "${entry.src}"`);
      } else if (['ERROR', 'FATAL'].includes(code)) {
        log.error(`Rollup (watch): something wrong happens`);
        log.error(e);
      }
    });
  };

  return args.watch ? watch() : build();
};

Create manifest.json (configurable) (webpack)

Migrate to TypeScript

S'inspirer de :

• https://github.com/Yproximite/skynet/tree/master/crawler
• https://github.com/Kocal-Web-Extensions/library

fix(options): validation is not working

When calling validate(config), we must pass a callback matching (err, value) => {} signature.

See https://github.com/hapijs/joi/blob/master/API.md#validatevalue-schema-options-callback

Issue with `--lint` and `--watch` flags

When running build command with both flags, if we have a lint error then we won't watching files.

If we are in watching mode and we have a lint error, then we pass, we should not stop the execution flow.

Apparemment la version 3 ne fonctionne pas

Unlucky installation 🤔

TypeScript support (webpack)

• https://github.com/TypeStrong/ts-loader

improve(API): create "resolve" method

Small improvment:

const { resolve } = require('path');

class API {
  resolve(path) {
    return resolve(this.context, path)
  }
}

// ...

const api = new API('/foo/bar');
api.resolve('.') // '/foo/bar'
api.resolve('node_modules') // '/foo/bar/node_modules'

Next major version (3)

Features

• Configure the tool through the package.json under the key "yprox-cli" (#144)
• Add API#isProduction() method, it should check for process.env.NODE_ENV === 'production' (#145)
• Add rollup-plugin-graphql for importing .graphql files as ES5 modules (#147)

Refactoring

• Rewrite the tool in TypeScript (#138, #150)
• For the config, tools like autoprefixer, cssnano or optipng should not be under the key handlers. Rollup, sass or css are handlers, but those tools are not. We should do the same as bublé I think (#148)
• More and small functions, lighten command and handlers from utils methods

Removals

• webpack handler, I think this was a huge mistake to add it. Yprox-CLI should stay light and simple, we already have Rollup which does the same thing. If you want to use webpack, then use it or use vue-cli/webpack-encore. (#140)
• Remove rollup-plugin-string (#147)

Misc/Internals

• Create an UPGRADE-3.0.md file
• Check if we can configure browserlist (autoprefixer) from package.json and/or .browserslistrc (yes, checked manually)
• See for writing tests (unit and integration, but it would be nice to remove test-app folder) (#152)
• Remove the default value {} of path options, in fact it should not be in the options schema
• If entry's src is not an array, then convert it to an array (#143)
• Replace gulp-uglify-es by gulp-terser (#146)
• Named entries { handler: '..', src: ['...'], name: '<name>' }, use the entry's name instead of printing all sources (when bundling) (#149)

Mettre à jour le dépot Wordpress avec la v3

• Update la dépendance
• Supprimer l'option d'autoprefixer, mettre la browserlist dans le package.json directement

Dependabot couldn't find the branch develop

Dependabot was set up to create pull requests against the branch develop, but couldn't find it.

If the branch has been permanently deleted you can update Dependabot's target branch from your dashboard.

Drop Buble for Babel

Initially we added Buble instead of Babel for smaller JS output.

However, Buble is really behind Babel in term of functionnality (plugins) and maintainability.
It would be nice to have Babel support and remove Buble.

With Babel, JS output can be reduced by using https://babeljs.io/docs/en/babel-plugin-transform-runtime

Improve filters

• --filter:handler sass
• --filter:name "Foo bar"
• --filter:<attr> "<value">

Plugin system

If we use yProx-CLI only to build some CSS, copy files or optimize images, we probably don't want to install Rollup dependencies :

• @kocal/rollup-plugin-graphql
• @types/rollup-plugin-node-resolve
• rollup-plugin-buble
• rollup-plugin-commonjs
• rollup-plugin-json
• rollup-plugin-node-builtins
• rollup-plugin-node-globals
• rollup-plugin-node-resolve
• rollup-plugin-replace
• rollup-plugin-terser
• rollup-plugin-vue

Each handler (css, file, image, js, rollup, sass) will be splited into multiples packages.

Each package will register itself through the API, by using methods like api.getBuilder().add('js', fnThatBuildJavaScript) or api.getLinter().add('js', fnThatLintJavaScript).
The registration will be done by the API, by seeking @yproximite/yprox-cli-handler-* packages in dependencies/devDepenendecies from the package.json of the project.

We will have multiples packages in the same repository, so we will use yarn workspaces:

• Workspaces are nice, each packages will have their dependencies (and they won't be duplicated)
• Dependabot is compatible with
• But semantic-release seems to be not (semantic-release/semantic-release#193) at the moment

Also, it will speed up tests. They became heavy since #226 (but that was necessary).

Trouver un nom de projet

Autre que yProx-cli,

Faire en sorte qu'une fois renommé, yprox-cli continue de fonctionner pour éviter en interne de repasser en masse sur les WP.

A discuter ensemble pour open sourcer.

Replace Chalk by Colorette

• https://bundlephobia.com/[email protected]
• https://bundlephobia.com/[email protected]
• https://github.com/jorgebucaran/colorette

Colorette is ~20 times smaller than Chalk, and faster too:

Improve Sass files linting

Currently, Sass files linting is done in a very bad way:

yProx-CLI/lib/plugins/lint/linters/sass.ts

Line 12 in 2c456d0

return `${path.dirname(file)}/**/*.{scss,sass}`.replace(/\\/g, '/');

For an entry with src: ['./src/foo.scss'], it will lint ./src/**/*.{scss,sass} files. Instead, it should lint src/foo.scss and its dependencies, not everything.

To improve this behavior, we can:

• starts to globify every entries src, to run Stylelint only one time
• create a dependencies graph, maybe with sass-graph but it seems that custom resolvers are not supported, and I don't know if the file should be syntactically valid :/
• one we have the dependencies graph, we can run Stylelint on those files

Rework the documentation

• On documentation index page, in 1/2 sentence, explain what does yProx-cli and what is its difference/advantages compared to other tools.
• On documentation index page, provide 1 simple example to have a global picture on how easy it is to use it.
• it minimize -> it minimizes
• Linting should have its own chapter in the documentation since it's a big "part" in term of features. Explain which tool it's using under the hood.
• Example -> Examples inside Environment variables and modes
• Rework this: https://github.com/Yproximite/yProx-cli/blob/master/README.md#L6

Thanks

Handle images and fonts files (webpack)

Handler JS : voir pour intégrer Buble (gulp-buble ?)

Setup Bundlesize

• https://twitter.com/addyosmani/status/1090153435406598144
• https://web.dev/fast/using-bundlesize-with-travis-ci
• https://github.com/siddharthkp/bundlesize

Travis: release only by Cron