@render-kit/schema-loader v0.2.0

@render-kit/schema-loader

Installation

npm install -D @render-kit/schema-loader

yarn add -D @render-kit/schema-loader

Usage

const { SchemaLoaderPlugin } = require('@render-kit/schema-loader')

module.exports = {
  module: {
    rules: [
      {
        test: /schema.jsonc$/,
        use: '@render-kit/schema-loader',
      },
    ],
  },
  plugins: [
    new SchemaLoaderPlugin(),
  ],
}

Options

entry

string = 'entry.js'

The file name of remote entry.

manifest

string = 'jet-cells-manifest.json'

The file name of manifest.

transform

Function

Transform schemas before emit.

Example

// -> webpack.config.js
/**
 * Customize manifest path.
 */
const { readdirSync } = require('fs')
const { SchemaLoaderPlugin } = require('@render-kit/schema-loader')
const { pascalCase } = require('change-case')
const { ModuleFederationPlugin } = require('webpack').container

const REMOTE_ENTRY = 'remoteEntry.js'

/**
 * @param {string} directory
 * @returns {string}
 */
function resolveCellName(directory) {
  return pascalCase(directory)
}

/**
 * @param {string} path
 * @returns {object}
 */
function resolveExposes(path) {
  return readdirSync(path, { withFileTypes: true }).reduce((acc, file) => {
    if (file.isFile()) return acc
    return Object.assign(acc, {
      [resolveCellName(file.name)]: `./${path}/${file.name}`,
    })
  }, {})
}

/**
 * @param {string} name
 * @returns {string}
 */
function sanitizeName(name) {
  return name
    .replace(/@/g, '_at_')
    .replace(/-/g, '_dash_')
    .replace(/\//g, '_slash_')
}

module.exports = {
  module: {
    rules: [
      {
        test: /schema.jsonc$/,
        use: '@render-kit/schema-loader',
      },
    ],
  },
  plugins: [
    new SchemaLoaderPlugin({
      entry: REMOTE_ENTRY,
    }),
    new ModuleFederationPlugin({
      name: sanitizeName(process.env.npm_package_name),
      filename: REMOTE_ENTRY,
      exposes: resolveExposes('src'),
    }),
  ],
}

## input
$ tree src
src
└── input
    ├── index.ts
    ├── input.vue
    └── schema.jsonc

1 directory, 3 files

## output
$ tree dist
dist
├── 144.js
├── 393.js
├── 689.js
├── input.json
├── jet-cells-manifest.json
└── remoteEntry.js

0 directories, 6 files
## jet-cells-manifest.json
$ cat dist/jet-cells-manifest.json
{
  "directory": "dist",
  "entry": "remoteEntry.js",
  "cells": {
    "Input":"input.json"
  }
}