@appollo-ui/lwr-plugins

LWR plugins for Salesforce development - Icon Manager, Tailwind CSS, and SFDC providers.

Installation

npm install @appollo-ui/lwr-plugins

Plugins

| Plugin | Import | Description | |--------|--------|-------------| | Icon Manager | @appollo-ui/lwr-plugins/icon-manager | Auto-fetch Lucide icons on demand | | Tailwind CSS | @appollo-ui/lwr-plugins/tailwindcss | PostCSS/Tailwind CSS integration | | SFDC Apex | @appollo-ui/lwr-plugins/sfdc/apex | Mock @salesforce/apex/* imports | | SFDC Labels | @appollo-ui/lwr-plugins/sfdc/labels | Mock @salesforce/label/* imports | | SFDC Resources | @appollo-ui/lwr-plugins/sfdc/resources | Mock lightning/platformResourceLoader | | SFDC LWC | @appollo-ui/lwr-plugins/sfdc/lwc | TypeScript LWC module resolution |

Quick Start

Icon Manager

Auto-fetches Lucide icons based on usage in your components:

{
  "moduleProviders": [
    [
      "@appollo-ui/lwr-plugins/icon-manager",
      {
        "systems": [{
          "name": "Production",
          "iconDir": "$rootDir/src/components/icons",
          "scanDirs": ["$rootDir/src"],
          "componentTag": "c-lucide-icon"
        }]
      }
    ]
  ]
}

Tailwind CSS

Compiles Tailwind CSS on startup:

{
  "moduleProviders": [
    [
      "@appollo-ui/lwr-plugins/tailwindcss",
      {
        "files": [{
          "src": "$rootDir/src/styles/input.css",
          "dest": "$rootDir/public/styles/output.css"
        }]
      }
    ]
  ]
}

Salesforce Providers

Mock Salesforce platform imports for local development:

{
  "moduleProviders": [
    "@appollo-ui/lwr-plugins/sfdc/resources",
    ["@appollo-ui/lwr-plugins/sfdc/apex", {
      "apexDirs": ["$rootDir/force-app/main/classes"],
      "mockDataDir": "$rootDir/mock-data"
    }],
    ["@appollo-ui/lwr-plugins/sfdc/labels", {
      "labels": [{
        "filePath": "$rootDir/force-app/labels/CustomLabels.labels-meta.xml",
        "package": "@salesforce/label",
        "namespace": "c"
      }]
    }],
    ["@appollo-ui/lwr-plugins/sfdc/lwc", {
      "dirs": [{
        "lwcDir": "$rootDir/force-app/main/lwc",
        "namespace": "c"
      }]
    }]
  ]
}

Development

# Install dependencies
pnpm install

# Build
pnpm build

# Run tests
pnpm test

# Create a changeset for versioning
pnpm changeset

Publishing

This repo uses Changesets for versioning and publishing.

1. Make your changes
2. Run pnpm changeset to create a changeset
3. Commit and push to main
4. The GitHub Action will create a "Version Packages" PR
5. Merge the PR to publish to npm