How Eleme’s MorJS Enables One‑Code‑Base Across Mini‑Programs and Web

Cross‑Platform Technology Background and Evolution

Since the birth of the web in the 1990s, we have moved through PC, mobile, and now IoT eras, leading to four main cross‑end scenarios: different device platforms, operating systems, mini‑program ecosystems, and rendering containers such as WebView, React Native, and Flutter.

The mobile era dominates today, with H5, Hybrid, framework‑native, self‑rendering, and mini‑program stages each addressing fragmentation but also increasing migration costs.

Eleme’s Cross‑End Deployment Strategy

Eleme, an O2O service, must expose its business where traffic is dense, requiring support for many channels (WeChat, Alipay, Taobao, etc.) and handling high uncertainty in channel environments and business requirements.

To reduce cost and maintain performance, Eleme chose a mini‑program DSL‑based solution rather than adopting existing open‑source frameworks, which would demand massive refactoring.

Static Compilation + Runtime Compensation

Static compilation transforms immutable source parts (module imports, template syntax, configuration) via AST manipulation, handling module name changes, attribute mapping, and config conversion.

Runtime compensation addresses dynamic aspects that static compilation cannot solve, such as JSAPI calls with dynamic parameters, custom component props and lifecycles, and interface restrictions in plugins.

Static Compilation Solves

Module reference replacement and suffix changes

Template attribute mapping (e.g., a:if → wx:if)

Configuration mapping (e.g., navigation bar settings)

Runtime Compensation Solves

Dynamic JSAPI invocation

Custom component prop handling across platforms

Lifecycle differences in plugins and sub‑packages

Multi‑End and Multi‑Form Solutions

Eleme built a compilation pipeline that can output mini‑programs, plugins, sub‑packages, and web SPAs/MPAs, enabling rapid migration of existing WeChat or Alipay mini‑programs to other platforms.

Differences among mini‑program forms (standalone, plugin, sub‑package) are addressed by injecting simulated App and getApp implementations, auto‑injecting global styles, and handling NPM usage rules per channel.

Managing Complex Mini‑Programs

Complex mini‑programs involve multiple business domains, long‑term development, and many teams. Eleme introduced a two‑layer integration model:

Offline integration development : decouples host, plugins, and sub‑packages, allowing independent builds and deployments.

Online collaborative workflow : defines development, integration, and release phases with controlled windows to ensure stability.

MorJS Framework

All the above practices were encapsulated into the open‑source MorJS framework (https://github.com/eleme/morjs), which supports two DSLs (WeChat and Alipay), four compilation forms, and nine target platforms (WeChat, Alipay, Baidu, ByteDance, Kuaishou, DingTalk, Taobao, QQ, Web).

Key features include easy DSL usage, multi‑end conversion, plug‑in architecture, type support (TS, Less/SCSS, JSON5), and optional adaptation modules for projects of any size.

MorJS is documented at https://mor.eleme.io/ and aims to become a foundational infrastructure for mini‑program multi‑end development.

Future Outlook

Eleme plans to extend MorJS with more platforms (e.g., HarmonyOS, Quick App), improve conversion reliability, and deepen community collaboration.