bpty-commonjs

What is it?

It's an alternative to commonjs to suit our needs. It works in a similar fashion. All dependencies can be found by using the function require.

It does however have some slight differences, namely the ability to override modules and the lack of automatically resolution by paths and HTTP requests.

Why no http requests

CQ already knows the dependencies required for our clientlibs to work, no point duplicating that functionality.

How to

You can manually register something with register(). Or you can use the babel plugin @raininglemons/bpty-commonjs to build you project for you.

How to use @raininglemons/bpty-commonjs

This function takes a config object with the following options;

• {String} namespace - this is the name of your component
• {String} base - this is the base of your src files to be stripped out

For example with the following setup:

{
  namespace: 'MyModule',
  base: 'src/',
}

The following files will be rewritten as follows;

• ./src/index -> MyModule
• ./src/modules/index -> `MyModule/modules'
• ./src/modules/Homepage -> MyModule/modules/Homepage

All import + require statements will be rewritten to look for internal modules in their new locations, and now all files in your project become publicly available in a predictable manor under a custom namespace.

Gulp Example

'use strict';
const gulp = require('gulp');
const concat = require('gulp-concat');
const named = require('vinyl-named');
const webdav = require('gulp-webdav-sync');
const babel = require('gulp-babel');
const { parser } = require('@raininglemons/bpty-commonjs');

const jsSources = ['./src/*.js', './src/**/*.js'];

/**
 * Builds JS to bpty-commonjs format.
 * @type {{namespace: string, base: string}}
 */
const bptyConfig = {
  namespace: 'CasinoFlix',
  base: 'src/',
};

gulp.task('js', function () {
  return gulp.src(jsSources)
    .pipe(babel({
      presets: ['es2015', 'react'],
    }))
    .pipe(babel({
      plugins: [
        parser(bptyConfig),
      ],
    }))
    .pipe(concat('dist.js', bptyConfig))
    .pipe(gulp.dest('./dist'));
});

gulp.task('deploy', ['js'], function () {
  var options = {
    protocol: 'http:'
    , base: 'dist'
    , auth: 'admin:admin'
    , hostname: '127.0.0.1'
    , port: 4502
    , pathname: '/etc/designs/clientlibs/components/react/CasinoFlix/js/'
    , log: 'info'
    , logAuth: true
    , rejectUnauthorized: false
  };

  return gulp.src(['./dist/dist.js'])
    .pipe(webdav(options))
});