🚧 This documentation is for the developer preview of m-ld.

m-ld Javascript clone engine

The Javascript engine can be used in a modern browser or a server engine like Node.js.

The Javascript clone engine conforms to the m-ld specification. Its support for transaction patterns is detailed below. Its API concurrency model is based on serialised consistent states.

Quick Start

The live code app below creates a domain of shared information, and then follows updates to it. In its user interface, it just presents the domain name. (You can see and edit the code by clicking the button, left-middle.)

import { clone, uuid } from 'https://js.m-ld.org/ext/index.mjs';
import { MemoryLevel } from 'https://js.m-ld.org/ext/memory-level.mjs';
import { IoRemotes } from 'https://js.m-ld.org/ext/socket.io.mjs';

const domainName = `${uuid()}.public.gw.m-ld.org`;

const state = await clone(new MemoryLevel(), IoRemotes, {
  '@id': uuid(),
  '@domain': domainName,
  genesis: true,
  io: { uri: "https://gw.m-ld.org" }
});

successDiv.removeAttribute('hidden');
domainInput.value = domainName;

for await (let [update] of state.follow()) {
  for (let { name } of update['@delete'])
    document.getElementById(`welcome_${name}`).remove();
  for (let { name } of update['@insert'])
    successDiv.insertAdjacentHTML('beforeend',
      `<h2 id="welcome_${name}" class="bounce">Welcome, ${name}!</h2>`);
}

<div id="successDiv" hidden>
  <p>🎉 Your new domain is at</p>
  <input id="domainInput" type="text" onfocus="this.select()" style="width:100%;"/>
  <hr/>
  <p><i>When you've cloned the domain below, check back here for updates...</i></p>
</div>

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); } 
}

.bounce {
  animation: bounce 1s;
}

The new domain's information is stored in memory here (and only here). The next live code app, below, allows us to make another clone of the domain. These two code blocks are sandboxed – they do not have access to each other's state via this browser.

💡 You can confirm this by trying it in another window (use the button, top right), another browser, or another device... anywhere in the world!

import { clone, uuid } from 'https://js.m-ld.org/ext/index.mjs';
import { MemoryLevel } from 'https://js.m-ld.org/ext/memory-level.mjs';
import { IoRemotes } from 'https://js.m-ld.org/ext/socket.io.mjs';

cloneButton.addEventListener('click', async () => {
  const state = await clone(new MemoryLevel(), IoRemotes, {
    '@id': uuid(),
    '@domain': domainInput.value,
    io: { uri: 'https://gw.m-ld.org' }
  });
  
  playgroundAnchor.setAttribute('href', `https://m-ld.org/playground/#domain=${domainInput.value}&txn=%7B%22name%22%3A%22George%22%7D`);
  clonedDiv.removeAttribute('hidden');
  
  addNameButton.addEventListener('click', () =>
    state.write({ name: nameInput.value }));
  
  rmNameButton.addEventListener('click', () =>
    state.write({ '@delete': { name: nameInput.value } }));
});

<div>
  <p>Paste the domain name here:</p>
  <input id="domainInput" type="text" style="width:100%;"/>
  <button id="cloneButton">Clone</button>
</div>
<div id="clonedDiv" hidden>
  <p>🎉 You have cloned the domain!</p>
  <p>Please enter your name:
    <input id="nameInput" type="text"/>
    <button id="addNameButton">Add</button>
    <button id="rmNameButton">Remove</button>
  </p>
  <p>You can also interact with this domain in the <a id="playgroundAnchor" target="_blank"><b>m-ld</b> playground</a>!</p>
</div>

The domain is using a public Gateway (gw.m-ld.org) to connect clones together. This means the m-ld playground can also see it.

💡 m-ld domain names look like IETF internet domains, and have the same rules. The internet doesn't know how to look them up yet though, so you can't just paste one into a browser.

There are more live code examples for you to try in the How-To section below.

Introduction

Packages

In Node.js, or using a bundler, use:

• npm install @m-ld/m-ld – latest stable prerelease
• npm install @m-ld/m-ld@edge – bleeding edge

Browser bundles (as used above) are served on:

• js.m-ld.org/ext – latest stable prerelease
• edge.js.m-ld.org/ext – bleeding edge

They include the core (index.mjs), bundled remotes (mqtt.mjs, ably.mjs and socket.io.mjs), in-memory backend (memory-level.mjs) and other extensions.

Some example starter projects available:

• The TodoMVC App shows one way to build a multi-collaborator application for browsers.
• The Node.js Starter Project uses Node processes to initialise two clones, and an MQTT broker for messaging.

Data Persistence

m-ld uses abstract-level to interface with a LevelDB-compatible storage backend.

• For the fastest in-memory responses, use memory-level.
• In a service or native application, use classic-level (file system storage).
• In a browser, you can use browser-level (browser-local storage).

Connecting to Other Clones

A m-ld clone uses a 'remotes' object to communicate with other clones.

• With an MQTT broker, use MqttRemotes.
• For a scalable global managed service, use AblyRemotes.
• If you have a live web server (not just CDN or serverless), you can use IoRemotes.

💡 If your architecture includes some other publish/subscribe service like AMQP or Apache Kafka, or you would like to use a fully peer-to-peer protocol, please contact us to discuss your use-case. Remotes can even utilise multiple transport protocols, for example WebRTC with a suitable signalling service.

Initialisation

The clone function initialises the m-ld engine with a leveldb back-end and the clone configuration.

import { clone, uuid } from '@m-ld/m-ld';
import { MemoryLevel } from 'memory-level';
import { MqttRemotes, MeldMqttConfig } from '@m-ld/m-ld/ext/mqtt';

const config: MeldMqttConfig = {
  '@id': uuid(),
  '@domain': 'test.example.org',
  genesis: true,
  mqtt: { hostname: 'mqtt.example.org' }
};

const meld = await clone(new MemoryLevel, MqttRemotes, config);

The clone function returns control as soon as it is safe to start making data transactions against the domain. If this clone has been re-started from persisted state, it may still be receiving updates from the domain. This can cause a UI to start showing these updates. If instead, you want to wait until the clone has the most recent data, you can add:

await meld.status.becomes({ online: true, outdated: false });

Remotes

MQTT Remotes

MQTT is a machine-to-machine (M2M)/"Internet of Things" connectivity protocol. It is convenient to use it for local development or if the deployment environment has an MQTT broker available. See below for specific broker requirements.

The MqttRemotes class and its companion configuration class MeldMqttConfig can be imported or required from '@m-ld/m-ld/ext/mqtt'. You must also install the async-mqtt package as a peer of @m-ld/m-ld.

A bundle is also available at http://js.m-ld.org/ext/mqtt.mjs.

The configuration interface adds an mqtt key to the base MeldConfig. The content of this key is a client options object for MQTT.js. It must not include the will and clientId options, as these are set internally. It must include a hostname or a host and port, e.g.

const config = {
  '@id': uuid(), '@domain': 'test.example.org', genesis: true,
  mqtt: { host: 'localhost', port: 1883 }
};

MQTT Broker Requirements

MqttRemotes requires broker support for:

1. MQTT 3.1
2. QoS 0 and 1
3. Retained messages
4. Last Will and Testament (LWT) messages

A good choice for local development is Aedes.

MQTT in the Browser

MQTT remotes supports websockets for use in a browser environment. To configure, add protocol: 'ws' (or 'wss') to the mqtt configuration value. (Note that All the MQTT configuration goes through the mqtt key, even if it's actually using websockets for transport.) This requires the MQTT broker to support websocket connections, for example see the Aedes documentation.

Ably Remotes

Ably provides infrastructure and APIs to power realtime experiences at scale. It is a managed service, and includes pay-as-you-go developer pricing. It is also convenient to use for global deployments without the need to self-manage a broker.

The AblyRemotes class and its companion configuration class MeldAblyConfig can be imported or required from '@m-ld/m-ld/ext/ably'. You must also install the ably package as a peer of @m-ld/m-ld.

A bundle is also available at http://js.m-ld.org/ext/ably.mjs.

The configuration interface adds an ably key to the base MeldConfig. The content of this key is an Ably client options object. It must not include the echoMessages and clientId options, as these are set internally.

If using token authentication, ensure that the clientId the token is generated for corresponds to the @id given in the MeldConfig.

Socket.io Remotes

Socket.IO enables real-time, bidirectional and event-based communication. It works on every platform, browser or device, focusing equally on reliability and speed. It is convenient to use when the app architecture has a live web server or app server, using HTTP.

The IoRemotes class and its companion configuration class MeldIoConfig can be imported or required from '@m-ld/m-ld/ext/socket.io'. You must also install the socket.io-client package as a peer of @m-ld/m-ld.

A bundle is also available at http://js.m-ld.org/ext/socket.io.mjs.

The configuration interface adds an io key to the base MeldConfig. The value is an optional object having:

• uri: The server URL (defaults to the browser URL with no path)
• opts: A Socket.io factory options object, which can be used to customise the server connection

Socket.io Server

When using Socket.io, the server must correctly route m-ld protocol operations to their intended recipients. The Javascript engine package bundles a class for Node.js servers, IoRemotesService, which can be imported from '@m-ld/m-ld/ext/socket.io/server'.

To use, initialise the Socket.io server as normal, and then construct an IoRemotesService, passing the namespace you want to make available to m-ld. To use the global namespace, pass the sockets member of the Server class. For example:

const socket = require('socket.io');
const httpServer = require('http').createServer();
// Start the Socket.io server, and attach the m-ld message-passing service
const io = new socket.Server(httpServer);
new IoRemotesService(io.sockets);

For a complete example, see the web starter project .

For other server types, contact us.

Transactions

A m-ld transaction is a json-rql pattern, which represents a data read or a data write. See the m-ld specification for a walk-through of the syntax.

Supported pattern types for this engine are (follow the links for examples):

• Describe
• Select
• Construct
• Group or Subject (the shorthand way to insert data)
• Update (the longhand way to insert or delete data)

💡 If you have a requirement for an unsupported pattern, please contact us to discuss your use-case. You can browse the full json-rql syntax at json-rql.org.

Subjects

Subjects in the Javascript engine are accepted and presented as plain Javascript objects whose content is JSON-LD (see the m-ld Specification). Utilities are provided to help the app use and produce valid subjects.

• includeValues includes one or more given value in a subject property.
• includesValue determines whether the given subject property contains the given value.
• propertyValue gets a property value from the given subject, casted as a strict type.

Handling Updates

Clone updates obtained from a read handler specify the exact Subject property values that have been deleted or inserted during the update. Since apps often maintain subjects in memory, for example in a user interface, utilities are provided to help update these in-memory subjects based on updates:

• updateSubject applies an update to the given subject in-place.
• SubjectUpdater applies an update to more than one subject.
• asSubjectUpdates provides an alternate view of the update deletes and inserts, by Subject, for custom processing.

Concurrency

A m-ld clone contains realtime domain data in principle. This means that any clone operation may be occurring concurrently with operations on other clones, and these operations combine to realise the final convergent state of every clone.

The Javascript clone engine API supports bounded procedures on immutable state, for situations where a query or other data operation may want to operate on a state that is unaffected by concurrent operations. In general this means that in order to guarantee data consistency, it is not necessary for the app to use the clone's local clock ticks (which nevertheless appear in places in the API for consistency with other engines).

An immutable state can be obtained using the read and write methods. The state is passed to a procedure which operates on it. In both cases, the state remains immutable until the procedure's returned Promise resolves or rejects.

In the case of write, the state can be transitioned to a new state from within the procedure using its own write method, which returns a new immutable state.

In the case of read, changes to the state following the procedure can be listened to using the second parameter, a handler for new states. As well as each update in turn, this handler also receives an immutable state following the given update.

Example: Initialising an App

await clone.read(async (state: MeldReadState) => {
  // State in a procedure is locked until sync complete or returned promise resolves
  let currentData = await state.read(someQuery);
  populateTheUi(currentData);
}, async (update: MeldUpdate, state: MeldReadState) => {
  // The handler happens for every update after the proc
  // State in a handler is locked until sync complete or returned promise resolves
  updateTheUi(update); // See §Handling Updates, below
});

Example: UI Action Handler

ui.on('action', async () => {
  clone.write(async (state: MeldState) => {
    let currentData = await state.read(something);
    let externalStuff = await doExternals(currentData);
    let todo = decideWhatToDo(externalStuff);
    // Writing to the current state creates a new live state
    state = await state.write(todo);
    await checkStuff(state);
  });
});

Example: UI Show Handler

ui.on('show', () => {
  clone.read(async (state: MeldReadState) => {
    let currentData = await state.read(something);
    showTheNewUi(currentData);
  });
});

How-To

Here is a roll-up of links to usage docs and live coding examples to help get started with common patterns.

import { clone, uuid } from 'https://js.m-ld.org/ext/index.mjs';
import { MemoryLevel } from 'https://js.m-ld.org/ext/memory-level.mjs';
import { IoRemotes } from 'https://js.m-ld.org/ext/socket.io.mjs';

// m-ld extensions are loaded using their package identity (@m-ld/m-ld/ext/..).
// In a real app, this redirection should be done with an import map.
globalThis.require = module => import(module
  .replace(/@m-ld\/m-ld\/ext\/(\w+)/, 'https://js.m-ld.org/ext/$1.mjs'));

globalThis.changeDomain = async function (domain) {
  const genesis = !domain;
  if (genesis)
    domain = `${uuid()}.public.gw.m-ld.org`;
  if (window.model) {
    await window.model.state.close();
    delete window.model;
  }
  const state = await clone(new MemoryLevel(), IoRemotes, {
    '@id': uuid(),
    '@domain': domain,
    genesis,
    io: { uri: "https://gw.m-ld.org" }
  });
  // Uncomment the next line to log individual updates as they come in
  //state.follow(update => console.info('UDPATE', JSON.stringify(update)));
  domainInput.value = domain;
  appDiv.hidden = false;
  playgroundAnchor.setAttribute('href', `https://m-ld.org/playground/#domain=${domain}`);
  // Store the "model" as a global for access by other scripts, and tell them
  window.model = { domain, state, genesis };
  document.dispatchEvent(new Event('domainChanged'));
}

/**
 * Utility to populate a template. Returns an object containing the cloned
 * children of the template, also indexed by tagName and classname.
 */
globalThis.templated = template => new Proxy({ $: template.content.cloneNode(true) }, {
  get: (t, p) => t[p] ?? t.$.querySelector(p) ?? t.$.querySelector(`.${p}`)
});

document.querySelectorAll('.help').forEach(help => helpDetails.appendChild(templated(help).$));

<div>
  <a id="playgroundAnchor" target="_blank" title="go to playground">🛝</a>
  <input id="domainInput" type="text" placeholder="domain name" onfocus="this.select()"/>
  <button onclick="changeDomain(domainInput.value)">Join</button>
  <button onclick="changeDomain()">New ⭐️</button>
  <details id="helpDetails">
    <summary>🔢 help...</summary>
    <p>This live code demo shows how to share live information with <b>m-ld</b>.</p>
    <p>To get started with a new set of information (a "domain"), click New ⭐️ above. You can then interact with the mini-application below to create some information.</p>
    <p>To share the information with a duplicate of this page:<ol><li>copy the domain name above</li><li>duplicate the browser tab</li><li>paste the domain name into the new page's domain input</li><li>click Join</li></ol></p>
    <p>You can also share with the <b>m-ld</b> playground using the 🛝 button.</p>
  </details>
  <hr/>
</div>

Reading, Following and Writing

These examples show simple patterns for getting started with an app's code structure. In principle, m-ld acts as a "model", replacing (or being proxied by) the local in-memory data model. Because m-ld information is fundamentally live – it can change due to a remote edit as well as a local one – it's valuable for the local app code to react to changes that it may not have initiated itself.

import { shortId } from 'https://js.m-ld.org/ext/index.mjs';

answerButton.addEventListener('click', async () => {
  const { state } = window.model;
  const question = questionInput.value;
  if (question) {
    const knowledgeId = shortId();
    await state.write({ '@id': knowledgeId, question });
    const botAnswer = await askBot(question);
    if (botAnswer)
      state.write({ '@id': knowledgeId, answer: botAnswer });
  }
});

async function askBot(question) {
  const response = await fetch(
    `https://runkit.io/gsvarovsky/question/0.1.2?q=${encodeURIComponent(question)}`);
  return response.text();
}

<div id="appDiv" hidden>
  <h2>Collaborative Knowledge Base</h2>
  <p>
    <label for="questionInput">Ask anything!</label>
    <input id="questionInput" type="text" value="Who is Elvis?"/>
    <button id="answerButton">Answer</button>
  </p>
  <hr/>
  <template id="knowledgeTemplate">
    <div class="knowledgeDiv">
      <p class="questionText"></p>
      <ul class="answerList"></ul>
      <input class="answerInput" type="text" placeholder="Your answer"/>
      <button class="addAnswerButton">Add</button>
    </div>
  </template>
  <div id="knowledgeBaseDiv"></div>
</div>

import { array } from 'https://js.m-ld.org/ext/index.mjs';

document.addEventListener('domainChanged', async () => {
  window.model.state.read( // 1️⃣
    // Populate the UI as soon as the domain has been changed.
    state => reloadAll(state),
    // In this example, we just refresh the whole UI state on every update.
    (update, state) => reloadAll(state)
  )
});

async function reloadAll(state) {
  knowledgeBaseDiv.innerHTML = '';
  return state.read({ // 2️⃣
    '@describe': '?id', '@where': { '@id': '?id' } // 3️⃣
  }).each(({ '@id': kid, question, answer }) => { // 4️⃣
    const {
      knowledgeDiv, questionText, answerList, answerInput, addAnswerButton
    } = templated(knowledgeTemplate);
    questionText.innerText = question;
    // The `answer` field can be one string or an array
    for (let ans of array(answer))
      answerList.insertAdjacentHTML('beforeend', `<li>${ans}</li>`);
    addAnswerButton.addEventListener('click', () => {
      answerInput.value && window.model.state.write({ // 5️⃣
        '@id': kid, answer: answerInput.value
      });
    });
    knowledgeBaseDiv.insertAdjacentElement('beforeend', knowledgeDiv);
  });
}

<template class="help">
  <p>This example shows how an app can establish some user interface state from a <b>m-ld</b> domain, and then follow updates to the domain; in this case, just refreshing the UI every time. Changes arising in the app are pushed to the domain, where they are 'echoed' back as updates so that the UI presents the local user's changes, as well as any remote users, in the same way.</p>
  <p>The code demonstrates:</p>
  <ul>
    <li>1️⃣ Using a <a href="https://js.m-ld.org/interfaces/meldstatemachine.html#read">read procedure</a> with a follow handler.</li>
    <li>2️⃣ Using a <a href="https://js.m-ld.org/interfaces/meldreadstate.html#read">read request</a> to issue a structured query.</li>
    <li>3️⃣ Using a <a href="https://js.m-ld.org/interfaces/describe.html"><code>@describe</code> query</a> to obtain all the properties of all subjects in the domain.</li>
    <li>4️⃣ Using <code>each()</code> on the <a href="https://js.m-ld.org/interfaces/readresult.html">read result</a> to process each subject in turn.</li>
    <li>5️⃣ Using a <a href="https://js.m-ld.org/interfaces/meldstatemachine.html#write">write request</a> to add new information to the domain.</li>
  </ul>
</template>

import { array } from 'https://js.m-ld.org/ext/index.mjs';

document.addEventListener('domainChanged', async () => {
  window.model.state.read(
    state => {
      // Populate the UI from scratch when the domain has changed.
      knowledgeBaseDiv.innerHTML = '';
      return state.read({
        '@describe': '?id', '@where': { '@id': '?id' }
      }).each(addQuestion);
    },
    update => {
      // Our app's updates are always either one question or one answer
      const { '@insert': [knowledge] } = update; // 1️⃣
      const { '@id': kid, answer } = knowledge;
      if (answer) // A new answer
        addAnswer(document.querySelector(`#${kid} .answerList`), answer);
      else // A new knowledge item
        addQuestion(knowledge);
    }
  );
});

function addAnswer(answerList, answer) {
  answerList.insertAdjacentHTML('beforeend', `<li>${answer}</li>`);
}

function addQuestion({ '@id': kid, question, answer }) {
  const {
    knowledgeDiv, questionText, answerList, answerInput, addAnswerButton
  } = templated(knowledgeTemplate);
  questionText.innerText = question;
  // The `answer` field can be one string or an array
  for (let ans of array(answer))
    addAnswer(answerList, ans);
  addAnswerButton.addEventListener('click', () => {
    answerInput.value && window.model.state.write({
      '@id': kid, answer: answerInput.value
    });
  });
  // Set the element id so we can find it later
  knowledgeDiv.id = kid;
  knowledgeBaseDiv.insertAdjacentElement('beforeend', knowledgeDiv);
}

<template class="help">
  <p>Instead of just reloading the whole UI state when an update comes in (as in the previous example), it might be better to inspect the update to see what has changed, and act upon only the changed information. This actually fixes a bug you might have noticed with the reloading example: an answer box can get replaced while you're typing into it, if someone else makes a change.</p>
  <p>The code demonstrates:</p>
  <ul>
    <li>1️⃣ Inspecting the contents of a <a href="https://js.m-ld.org/interfaces/meldupdate.html"><b>m-ld</b> update</a> to target specific app UI components.</li>
  </ul>
</template>

import { array, SubjectUpdater } from 'https://js.m-ld.org/ext/index.mjs';

const knowledgeViews = new Map();

document.addEventListener('domainChanged', async () => {
  window.model.state.read(
    async state => {
      // Populate the UI from scratch when the domain has changed.
      knowledgeBaseDiv.innerHTML = '';
      const subjectUpdater = new SubjectUpdater(await state.read({ // 1️⃣
        '@describe': '?id', '@where': { '@id': '?id' }
      }));
      for (let kid of subjectUpdater.affectedIds)
        subjectUpdater.update(new KnowledgeView(kid));
    },
    update => {
      const subjectUpdater = new SubjectUpdater(update); // 2️⃣
      for (let kid of subjectUpdater.affectedIds)
        subjectUpdater.update(knowledgeViews.get(kid) ?? new KnowledgeView(kid));
    }
  );
});

class KnowledgeView {
  constructor(kid) {
    this['@id'] = kid;
    const {
      knowledgeDiv, questionText, answerList, answerInput, addAnswerButton
    } = templated(knowledgeTemplate);
    this.questionText = questionText;
    this.answerList = answerList;
    addAnswerButton.addEventListener('click', () => {
      answerInput.value && window.model.state.write({
        '@id': kid, answer: answerInput.value
      });
    });
    knowledgeViews.set(kid, this);
    knowledgeBaseDiv.insertAdjacentElement('beforeend', knowledgeDiv);
  }

  get question() {
    return this.questionText.innerText || [];
  }

  set question(question) {
    this.questionText.innerText = question;
  }

  get answer() {
    return [...this.answerList.children].map(li => li.innerText);
  }

  set answer(answer) {
    this.answerList.innerHTML = '';
    // The `answer` field can be one string or an array
    for (let ans of array(answer))
      this.answerList.insertAdjacentHTML('beforeend', `<li>${ans}</li>`);
  }
}

<template class="help">
  <p>As your app's features and data model scale, it becomes more complex to deconstruct updates and apply them to selected UI elements, as in the previous example. In this code, we declaratively model the knowledge UI as a class having question and answer properties. Then, we use a <a href="https://js.m-ld.org/classes/subjectupdater.html"><code>SubjectUpdater</code></a> to apply new information. This utility correctly handles all the possible changes that might apply in an update, taking into account <a href="https://spec.m-ld.org/#data-semantics"><b>m-ld</b> data semantics</a> – so, for example, it will still work when we start to allow deletion of answers, or if we include multiple questions in a single update.</p>
  <p>The code demonstrates:</p>
  <ul>
    <li>1️⃣ Constructing a <code>SubjectUpdater</code> with newly-loaded subjects, and then using it to apply the loaded property values to new knowledge views.</li>
    <li>2️⃣ Constructing a <code>SubjectUpdater</code> from an update, and then using it to apply the changed property values to knowledge views (which may be new, or already exist).</li>
  </ul>
</template>

Using Shape Constraints

One of the most common questions asked about live information models is, what happens if there is a "conflict"? Here, we handle one particular kind of conflict using declarative constraints.

import { updateSubject } from 'https://js.m-ld.org/ext/index.mjs';
import { ShapeConstrained, PropertyShape } from 'https://js.m-ld.org/ext/shacl.mjs';

document.addEventListener('domainChanged', async () => {
  if (window.model.genesis && false) { // 1️⃣
    await window.model.state.write(
      ShapeConstrained.declare(0, PropertyShape.declare({
        path: 'name', count: 1
      }))
    );
  }
  const author = {
    '@id': 'author',
    // Naive UI ↔︎ data mapping, don't do this! 2️⃣
    set name(name) { nameInput.value = name; },
    get name() { return nameInput.value.split(',').filter(v => v); }
  };
  await window.model.state.read(
    async state => updateSubject(author, await state.get('author')),
    update => updateSubject(author, update)
  );
  beginEditSession();
});

function beginEditSession() {
  window.model.state.write(state => new Promise(release => { // 3️⃣
    const oldName = nameInput.value;
    nameInput.readOnly = false;
    nameInput.focus();
    editButton.innerText = 'Enter';
    editButton.addEventListener('click', async function enter() {
      if (nameInput.value)
        await state.write({ '@update': { '@id': 'author', name: nameInput.value } });
      else
        nameInput.value = oldName; // Revert
      nameInput.readOnly = true;
      editButton.innerText = 'Edit';
      editButton.removeEventListener('click', enter);
      release();
    });
  }));
}

editButton.addEventListener('click', () => {
  if (nameInput.readOnly)
    beginEditSession();
});

<div id="appDiv" hidden>
  <h2>Author</h2>
  <label for="nameInput">Name:</label>
  <input id="nameInput" type="text" readonly/>
  <button id="editButton">Edit</button>
</div>
<template class="help">
  <p>
    This example shows how "conflicts" can arise in user sessions, and one way to change the
    default behaviour of <b>m-ld</b>, using <i>Shapes</i>.
  </p>
  <p>
    In our app, we intend that the "author" subject should have only one "name" property value. Our
    user interface presents the name, and allows us to change it using the Edit button. However, if
    another user simultaneously changes the name, it's possible for the author to end up with
    <i>both</i> entered names. (Try it by following the instructions above to duplicate this tab,
    and beginning an edit in both tabs.)
  </p>
  <ul>
    <li>
      1️⃣ Here we declare that the "name" property should have only one value. When you have
      explored the behaviour without this fix, change <code>false</code> to <code>true</code>
      in this line, and try again with a new domain.
    </li>
    <li>
      2️⃣ Here we are relying on the behaviour of an HTML text input element – if you set its value
      to an array, it will separate the array values with a comma. This won't work as expected if
      the name you enter has a comma in it, so a more robust approach would be needed in a real app.
    </li>
    <li>
      3️⃣ Using a <a href="https://js.m-ld.org/interfaces/meldstatemachine.html#write">"state procedure"</a>
      allows us to prevent <b>m-ld</b> from accepting remote updates until the returned promise
      settles. This means that we don't see the effect of a concurrent edit until our editing
      "session" is finished.
    </li>
  </ul>
</template>

#nameInput[readonly] {
  border: none;
}

Using Lists

By default, information in m-ld is an unordered graph (just like in a relational database). This example shows how ordered lists can be embedded in the graph.

import { updateSubject } from 'https://js.m-ld.org/ext/index.mjs';

document.addEventListener('domainChanged', async () => {
  shoppingList.innerHTML = '';
  const { state, genesis } = window.model;
  if (genesis) {
    // Write some initial shopping items to the state
    state.write({
      '@id': 'shopping',
      '@list': ['bread', 'milk']
    });
  }
  // To use updateSubject for updating the DOM, we use a Javascript object-like
  // proxy pattern over the relevant Elements.
  const shopping = {
    '@id': 'shopping',
    '@list': {
      // For a List, updateSubject can apply the update to anything with a
      // `length` and an Array-like `splice` method.
      get length() {
        return shoppingList.childElementCount;
      },
      splice(index, deleteCount, ...items) {
        for (let i = 0; i < deleteCount; i++)
          shoppingList.children[index]?.remove();
        const { el, position } = index < this.length ?
          { el: shoppingList.children[index], position: 'beforebegin' } :
          { el: shoppingList, position: 'beforeend' };
        for (let item of items)
          el.insertAdjacentHTML(position, `<li>${item}</li>`);
      }
    }
  };

  state.read(
    async state => updateSubject(shopping, await state.get('shopping')),
    update => updateSubject(shopping, update)
  );
});

addItem.addEventListener('click', () => {
  window.model.state.write({
    '@id': 'shopping',
    // When writing list items, we can use an object with integer keys instead
    // of an array. Here we're inserting at the end of the list.
    '@list': { [shoppingList.childElementCount]: itemToAdd.value }
  });
});

removeItem.addEventListener('click', () => {
  window.model.state.write({
    '@delete': {
      '@id': 'shopping',
      // When deleting list items, we can pattern-match using variables. Here,
      // we want to delete the removed item wherever it appears in the list.
      '@list': { '?': itemToRemove.value }
    }
  });
});

<div id="appDiv" hidden>
  <h2>Shopping</h2>
  <ol id="shoppingList"></ol>
  <p>
    <input id="itemToAdd" type="text" placeholder="new shopping item"/>
    <button id="addItem">+ Add</button>
  </p>
  <p>
    <input id="itemToRemove" type="text" placeholder="shopping item to remove"/>
    <button id="removeItem">- Remove</button>
  </p>
  <hr/>
</div>

Using Collaborative Text

Text embedded in a structured graph of information might need to be editable by multiple users at the same time, like an online document. This example shows the use of an embedded data type and a supporting HTML control, to enable multi-player text editing.

import { TSeqText } from 'https://js.m-ld.org/ext/tseq.mjs';
import { updateSubject } from 'https://js.m-ld.org/ext/index.mjs';
import { ElementSpliceText } from 'https://js.m-ld.org/ext/html.mjs';

document.addEventListener('domainChanged', () => {
  if (window.model.genesis) {
    window.model.state.write(TSeqText.declare(0, 'text'))
      // Write some initial document content
      .then(() => window.model.state.write({
        '@id': 'document',
        'text': `Document created ${new Date().toLocaleString()}`
      }));
  }
  let documentTextProxy = null;
  const doc = {
    '@id': 'document',
    set text(initialText) {
      documentTextProxy = new ElementSpliceText(
        documentTextDiv,
        window.model.state,
        'document',
        'text',
        initialText
      );
    },
    get text() {
      return documentTextProxy;
    }
  };
  window.model.state.read(
    async state => updateSubject(doc, await state.get('document')),
    update => updateSubject(doc, update)
  );
});

<div id="appDiv" hidden>
  <h2>Document</h2>
  <div contenteditable="plaintext-only" id="documentTextDiv"></div>
</div>

div[contenteditable] {
    border: 1px inset #ccc;
    padding: 5px;
    background-color: white;
    font-family: monospace;
    height: 20em;
}

Using the RDF/JS API

The information in m-ld is stored using the W3C standard data representation RDF (Resource Description Framework). For RDF-native apps, the Javascript engine API supports direct access to the RDF graph.

document.addEventListener('domainChanged', async () => {
  updatesDiv.innerHTML = '';

  for await (let [update] of window.model.state.follow()) {
    const { details, summary, deleteTextarea, insertTextarea } =
      templated(updateTemplate);
    summary.innerText = `Update ${update['@ticks']}`;

    const deleted = update['@delete'].quads;
    const inserted = update['@insert'].quads;

    deleteTextarea.value = await toTurtle(deleted);
    insertTextarea.value = await toTurtle(inserted);
    updatesDiv.insertAdjacentElement('afterbegin', details);
  }
});

updateButton.addEventListener('click', async () => {
  const parser = new N3.Parser();
  window.model.state.updateQuads({
    delete: await parser.parse(deleteTextarea.value),
    insert: await parser.parse(insertTextarea.value)
  });
});

function toTurtle(quads) {
  return new Promise((resolve, reject) => {
    const writer = new N3.Writer();
    for (let quad of quads)
      writer.addQuad(quad);
    writer.end((err, result) => err ? reject(err) : resolve(result));
  });
}

<div id="appDiv" hidden>
  <label for="deleteTextarea">DELETE triples</label>
  <textarea id="deleteTextarea" rows="5"></textarea>
  <label for="insertTextarea">INSERT triples</label>
  <textarea id="insertTextarea" rows="5">
PREFIX c: <http://example.org/cartoons#>
   c:Tom a c:Cat.
   c:Jerry a c:Mouse;
           c:smarterThan c:Tom.
  </textarea>
  <button id="updateButton">
    Do Update
  </button>
  <hr/>
  <div id="updatesDiv"></div>
  <template id="updateTemplate">
    <details class="updateDetails">
      <summary>Update</summary>
      <hr/>
      <label>DELETED triples</label>
      <textarea class="deleteTextarea" rows="5"></textarea>
      <label>INSERTED triples</label>
      <textarea class="insertTextarea" rows="5"></textarea>
    </details>
  </template>
</div>
<!-- https://www.npmjs.com/package/n3 -->
<script src="https://unpkg.com/n3/browser/n3.min.js"></script>

textarea {
    width: 100%;
}
.updateDetails {
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 0.5em;
}

Security

To mitigate integrity, confidentiality and availability threats to m-ld domain data, we recommend the following baseline security controls for your app.

1. Apply authorisation controls to remote connections, restricting access to authorised users of the app. This typically requires users to be authenticated in the app prior to connecting the m-ld clone. Authentication credentials can be passed to the remotes implementation via the configuration object.
2. Apply operating-system access control to the storage location used for persistence, restricting access to authorised users of the app.
3. Encrypt remote connection transports, for example by applying transport layer security (TLS) to server connections, if applicable.
4. Apply secure application development practices, for example as recommended in the UK National Cyber Security Centre Guidelines.

A more general discussion of security considerations in m-ld can be found on the website.

🧪 This library additionally includes an experimental extension for controlling access based on an Access Control List (ACL) in the domain data. Please see our Security Project for more details of our ongoing security research, and contact us to discuss your security requirements!

Extensions

m-ld supports extensions to its core engine. You can choose which extensions to use in an app; some are bundled in the engine package, others you can write yourself.

Some extensions must be pre-selected by the app in order to connect a new clone to a domain of information. Other extensions can be declared in the data and loaded dynamically by the engine at runtime. This allows authors to add features to the shared information, without the need for a central authority over features. This is decentralised extensibility, similar to how a web page can declare scripts that extend its features in the browser. See our introductory short paper for more about this vision.

The Javascript engine package bundles the following extensions – follow the links to learn more:

• Remotes are pre-selected in the call to clone, as described above.
• Lists have a default implementation, which is replaceable.
• Shapes are used to enforce a 'schema' or 'object model' on the domain's data.
• Text subject properties can be made collaboratively-editable.
• Transport Security allows an app to encrypt and apply digital signatures to m-ld protocol network traffic.
• Statutes allow an app to require that certain changes, such as changes to access controls, are agreed before they are shared in the domain.
• Write Permissions allow an app to add fine-grained access controls based on data shapes.

The extension's code module must be available to a global CommonJS-style require method in all clones using the Javascript engine. For bundled extensions:

• In Node.js, the module is packaged in @m-ld/m-ld; no additional configuration is required.
• In the browser, require is typically provided by the bundler. Since the module will be loaded dynamically, the bundler may need to be configured to guarantee the module is bundled, since it may not be referenced statically by any code.

💡 While it's possible to change extensions at runtime (by changing their declarations in the data), this may require coordination between clones, to prevent outdated clones from acting incorrectly in ways that could cause data corruption or compromise security. Consult the extension's documentation for safe operation.

Writing Extensions

Extension code is executed as required by the core engine or by another extension. Besides remotes, there are currently four types of custom extension called by the core engine, defined in the MeldExtensions API interface. To write an extension to the core, you must implement one or more of these types.

💡 Please do contact us if you would like to understand more about extensions.

{
  "@select": "?name",
  "@where": { "employeeNo": 7, "name": "?name" }
}