Chameleon Cross‑Platform Framework: Standards, Protocols, and Extending New Platforms

Chameleon defines a cross‑platform standard (MVVM + protocol) that allows developers to write a single codebase and run it on any target platform, eliminating the need to learn new frameworks for each mini‑program or native environment.

New platform integration status

Collaborations are in progress with Didi, Mango TV, Alibaba, and ByteDance to bring Chameleon support to their mini‑programs. The relevant issue trackers and repository URLs are:

Issue tracker: https://github.com/didi/chameleon/issues/157

Repository: https://github.com/chameleon-team/cml-tt-sets

Quick App team integration: issue https://github.com/didi/chameleon/issues/185 and repo https://github.com/quickappcn/cml-extplatform-quickapp

Cross‑platform principle

The core of a cross‑platform framework is unification. Chameleon compiles source files into a graph where each node (template, style, script, json, asset) is processed by standard tools (Babel for scripts, Less/Stylus for styles, etc.). The runtime then adapts the logical objects (App, Page, Component) to the target platform via three entry methods: createApp , createPage , and createComponent .

Standard protocols

API interface protocol – defines basic API capabilities.

Built‑in component protocol – defines UI component standards.

Framework protocol – defines lifecycle, routing, etc.

DSL protocol – defines view‑logic syntax.

Polymorphic implementation protocol – allows platform‑specific extensions.

How to extend a new platform

Only six npm packages need to be implemented:

chameleon-api
chameleon-ui-builtin
cml-demo-ui-builtin
cml-demo-ui
cml-demo-runtime
cml-demo-plugin

Implementing the API interface protocol

Create an npm package that follows the cml-demo-api structure. The interface for an alert method is defined as:

<script cml-type="interface">
type alertOpt = {
  message: String,
  confirmTitle: String
}
type successCallBack = (result: String) => void;
type failCallBack = (result: String) => void;
interface uiInterface {
  alert(opt: alertOpt, successCallBack: successCallBack, failCallBack: failCallBack): void,
}
</script>

Implement the interface in a platform‑specific script, for example for ByteDance mini‑programs:

<script cml-type="tt">
class Method implements uiInterface {
  alert(opt, successCallBack, failCallBack) {
    let { message, confirmTitle } = opt;
    tt.showModal({
      content: message,
      confirmText: confirmTitle,
      // ...
    });
  }
}
export default new Method();
</script>

Implementing built‑in component protocol

Two npm packages are required: chameleon-ui-builtin and cml-ui . Each component (e.g., button , radio ) must have an interface file and a demo implementation. Example for a button component:

<include src="chameleon-ui-builtin/components/button/button.interface" />

<template>
  <origin-button c-bind:tap="onclick" open-type="{{openType}}"></origin-button>
</template>
<script>
  // JavaScript implementation
</script>
<style scoped>
  // Styles
</style>
<script cml-type="json">
  // JSON configuration
</script>

Components that can be reused simply include the original implementation:

<include src="chameleon-ui-builtin/components/radio/radio.interface"></include>
<script cml-type="demo" src="chameleon-ui-builtin/components/radio/radio.cml"></script>

Implementing the DSL protocol (compile‑time plugin)

A custom plugin class registers hooks for each node type. Example skeleton:

module.exports = class DemoPlugin {
  constructor(options) { /* ... */ }
  register(compiler) {
    compiler.hook('compile-script', function(currentNode, parentNodeType) { /* ... */ })
    compiler.hook('compile-template', function(currentNode, parentNodeType) { /* ... */ })
    compiler.hook('compile-style', function(currentNode, parentNodeType) { /* ... */ })
    compiler.hook('pack', function(projectGraph) { /* write files */ })
  }
}

Implementing the framework protocol (runtime)

The runtime adapts logical objects to the target platform. For a page object:

class PageIndex {
  data = { name: 'chameleon' }
  computed = { sayName () { return 'Hello' + this.name; } }
  mounted() { }
}
export default new PageIndex();

During compilation the runtime inserts calls such as:

import { createPage } from 'cml-demo-runtime';
createPage(exports.default);

Implementations of createApp , createPage , and createComponent follow the same pattern, using <include> to bring in the official interface definitions.

Framework data management

Chameleon provides chameleon-store , a Vuex‑like state management solution, defined by the same polymorphic protocols.

For a complete example of extending a new platform, see the demo repository https://github.com/chameleon-team/cml-extplatform-demo , which includes a basic WeChat extension and a step‑by‑step tutorial at https://cml.js.org/doc/extend/quickstart.html .

More information can be found on the official site cmljs.org . The upcoming Chameleon 1.0 release is announced.