js-modern

js-modern

Write modern JavaScript and TypeScript for Salesforce Commerce platforms.

Before Writing Code

Always fetch the latest official documentation BEFORE writing JavaScript:

• MDN JavaScript Reference: WebSearch "MDN JavaScript reference ES6 2026" and WebFetch official docs
• TypeScript Documentation: WebSearch "TypeScript handbook 2026" and WebFetch official docs
• Platform-Specific Docs: WebSearch for "Salesforce B2C Commerce server-side JavaScript API 2026" (SFCC), "PWA Kit JavaScript TypeScript 2026" (PWA Kit), or "Lightning Web Components JavaScript 2026" (LWC)

This ensures you're using the latest syntax, APIs, and best practices for each platform.

Conceptual Architecture

Platform Runtime Constraints

This is the most critical concept. Three Salesforce Commerce platforms have fundamentally different JavaScript runtimes:

| Constraint | SFCC Server-Side | PWA Kit | LWC (B2B) | |-----------|-----------------|---------|------------| | Engine | Rhino (Java-based) | Node.js + V8 | Browser (V8/SpiderMonkey) | | Module system | CommonJS (require) | ES Modules (import) | ES Modules (import) | | async/await | Not supported | Fully supported | Fully supported | | Promises | Not supported | Fully supported | Fully supported | | Template literals | Limited contexts | Fully supported | Fully supported | | Arrow functions | Supported | Supported | Supported | | Destructuring | Supported | Supported | Supported | | Optional chaining | Not supported | Supported | Supported | | Classes | Not supported | Supported | Required (extends LightningElement) | | Decorators | Not applicable | Not applicable | Required (@api, @track, @wire) | | DOM access | Not applicable | Standard DOM | Shadow DOM only (Locker/LWS) |

SFCC Server-Side JavaScript

The Rhino engine imposes strict limitations. Every SFCC script must account for these:

• Use var or let/const (recent versions) -- verify against your instance
• No async/await, no Promise -- all I/O is synchronous
• No ES modules -- use require('dw/...') and module.exports
• Access platform APIs via dw.* namespace (e.g., dw/catalog/ProductMgr)
• Use module.superModule for cartridge overlay inheritance

// Pattern: SFCC module import
var ProductMgr = require('dw/catalog/ProductMgr');
// Fetch live docs for dw.* API signatures

// Pattern: module.superModule extension
var base = module.superModule;
// Fetch live docs for superModule behavior

PWA Kit JavaScript/TypeScript

Full modern JavaScript and TypeScript are available:

| Feature | Stack | |---------|-------| | React | 17+ with hooks | | TypeScript | Full support, recommended | | Node.js SSR | Server-side rendering | | Commerce SDK | commerce-sdk-isomorphic | | Bundler | Webpack with code splitting |

// Pattern: PWA Kit component with Commerce SDK
// Fetch live docs for useProducts hook API
import { useProducts } from '@salesforce/commerce-sdk-react';

LWC JavaScript Constraints

LWC uses modern ES modules but enforces security boundaries:

| Allowed | Not Allowed | |---------|-------------| | ES modules (import/export) | Direct window/document manipulation | | async/await, Promises | eval(), Function() constructor | | Template literals, destructuring | Third-party DOM libraries (jQuery) | | @api, @track, @wire decorators | setTimeout(string) | | this.template.querySelector() | document.getElementById() | | NavigationMixin | window.location = ... |

// Pattern: LWC component skeleton
// Fetch live docs for decorator behavior
import { LightningElement, api, wire } from 'lwc';

Module Systems Comparison

| System | Syntax | Platform | |--------|--------|----------| | CommonJS | require() / module.exports | SFCC server-side | | ES Modules | import / export | PWA Kit, LWC | | SFCC Overlay | module.superModule | SFCC cartridge extension | | SFCC Wildcard | require('*/cartridge/...') | Cross-cartridge resolution |

Best Practices

Platform Adaptation

• Always verify which JS features your target platform supports before coding
• SFCC: Use CommonJS, avoid async/await, leverage dw.* API
• PWA Kit: Use full modern JS/TS, React hooks, Commerce SDK
• LWC: Use ES modules, decorators, respect Lightning Web Security

Code Quality

• Use const by default, let when reassignment is needed, never var (except SFCC if required)
• Prefer modern array methods (map, filter, reduce) over imperative loops
• Use optional chaining (?.) and nullish coalescing (??) where supported
• Destructure to extract values for cleaner, more readable code

TypeScript (PWA Kit)

• Use TypeScript for type safety and better IDE support
• Leverage Commerce SDK types for API responses
• Use Partial<T>, Pick<T>, Omit<T> for flexible type definitions

Fetch MDN, TypeScript handbook, and platform-specific Salesforce docs for exact syntax support and API signatures before implementing.