Moloko

Moloko is an embedded web based code editor built atop of Monaco.

Installation

Moloko has peer dependencies on mithril.js and Æsthetic. Both these modules need to be installed in order for moloko to be used.

pnpm add moloko

Peer Dependencies

pnpm add mithril esthetic

Use Case?

Moloko is developed for playground usage within Æsthetic and Liquify.

Requirements

Moloko is running atop of Monaco and thus it requires workers be integrated into a distribution bundle of your project.

Supported Themes

Currently Moloko provides support for a single (dark) theme:

• Potion

Supported Languages

In addition to Liquid, Moloko also supports several other languages:

• HTML
• Liquid
• XML
• JavaScript
• TypeScript
• CSS
• SCSS
• JSON
• YAML

Usage

Moloko leverages the powerful mithril.js SPA framework together with the Æsthetic beautification tool and Monaco text editor.

import moloko from 'moloko';

// Render the editor to a document element
moloko.mount(document.body, options?: Options);

Contributing

Despite running atop of Monaco, Moloko will spin up its own build and expose it. In order to support the grammars and embedded languages of the Shopify Liquid variation the module employs its own Liquid grammar.

Pre-requisites

• Git
• Node v16^
• Pnpm v7^
• VSCode

Setup

• Ensure pnpm is installed globally npm i pnpm -g
• Leverage pnpm env if you need to align node versions
• Clone this repository git clone https://github.com/panoply/moloko.git
• Run pnpm i in the root directory
• Run pnpm dev and start coding

You can run pnpm build to generate a distributed bundle.

Author

🥛 Νίκος Σαβίδης