@jeroendruwe/vite-aem-clientlib-generator

vite-aem-clientlib-generator

Creates a AEM clientlib based on the manifest.json generated by Vite

• Usage
• Commands
• Configuration

Usage

$ npm install -g @jeroendruwe/vite-aem-clientlib-generator
$ vite-aem-lib COMMAND
running command...
$ vite-aem-lib (-v|--version|version)
@jeroendruwe/vite-aem-clientlib-generator/0.0.1 darwin-x64 node-v14.18.1
$ vite-aem-lib --help [COMMAND]
USAGE
  $ vite-aem-lib COMMAND
...

Commands

• vite-aem-lib generate
• vite-aem-lib help [COMMAND]

vite-aem-lib generate

Generate the AEM clientlib

USAGE
  $ vite-aem-lib generate

See code: src/commands/generate.ts

vite-aem-lib help [COMMAND]

display help for vite-aem-lib

USAGE
  $ vite-aem-lib help [COMMAND]

ARGUMENTS
  COMMAND  command to show help for

OPTIONS
  --all  see all commands in CLI

See code: @oclif/plugin-help

Configuration

Place a vite.lib.config.js configuration file next to where you run the generate command.

Required properties:

• manifest
  • location of the Vite generated manifest.json file
• resourcesDir
  • location of the Vite generated output
• clientlibDir
  • location of the to be generated clientlib
• categories
  • will be copied over to the clientlib categories property

Optional properties

• properties
  • list of properties that will be directly added to the clientlib

Simple example

module.exports = {
  libs: [
    {
      manifest: 'dist/manifest.json',
      resourcesDir: 'dist/etc.clientlibs/project/clientlibs/demo-clientlib/resources',
      clientlibDir: '../ui.apps/src/main/content/jcr_root/apps/project/clientlibs/demo-clientlib',
      categories: ['demo-category'],
      properties: {
        moduleIdentifier: 'vite',
      },
    },
  ],
}

Multiple example

Once you start using Vite for multiple clientlibs, it makes sense to create some helper functions:

const buildManifest = (name) => {
  return path.join(__dirname, 'dist', name, 'manifest.json');
};

const buildResourcesDir = (name) => {
  return path.join(
    __dirname,
    'dist',
    name,
    'etc.clientlibs',
    'aem-vite-demo',
    'clientlibs',
    name,
    'resources'
  );
};

const buildClientlibDir = (name) => {
  return path.join(
    __dirname,
    '..',
    'ui.apps',
    'src',
    'main',
    'content',
    'jcr_root',
    'apps',
    'aem-vite-demo',
    'clientlibs',
    name
  );
};

const createLib = (name, categories) => {
  return {
    manifest: buildManifest(name),
    resourcesDir: buildResourcesDir(name),
    clientlibDir: buildClientlibDir(name),
    categories: [...categories],
    properties: {
      moduleIdentifier: 'vite',
    },
  };
};

module.exports = {
  libs: [
    createLib('clientlib-esmodule', ['aem-vite-demo.esmodule']),
    createLib('clientlib-esmodule-another', ['aem-vite-demo.esmodule.another']),
  ],
};