Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: thlorenz/brace
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: master
Choose a base ref
...
head repository: DaPulse/brace-aml
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: master
Choose a head ref
Can’t automatically merge. Don’t worry, you can still create the pull request.
  • 3 commits
  • 3 files changed
  • 2 contributors

Commits on Aug 27, 2018

  1. Update README.md

    Daniel Mittelman authored Aug 27, 2018

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    abbb618 View commit details
  2. Copy the full SHA
    5ee1e8d View commit details
  3. Update README.md

    Daniel Mittelman authored Aug 27, 2018
    Copy the full SHA
    b506bb1 View commit details
Showing with 352 additions and 95 deletions.
  1. +8 −88 README.md
  2. +338 −0 mode/aml.js
  3. +6 −7 package.json
96 changes: 8 additions & 88 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,100 +1,20 @@
# brace
# brace-aml

<a href="https://www.patreon.com/bePatron?u=8663953"><img alt="become a patron" src="https://c5.patreon.com/external/logo/become_a_patron_button.png" height="35px"></a>

[browserify](https://github.com/substack/node-browserify) compatible version of the [ace editor](http://ajaxorg.github.io/ace/).

[![browser support](https://ci.testling.com/thlorenz/brace.png)](https://ci.testling.com/thlorenz/brace)

***This badge shows which browsers support annotations, however the editor itself works in pretty much every browser.***

[![screenshot](assets/brace.png)](http://thlorenz.github.io/brace/)
*[Try it in your browser](http://thlorenz.github.io/brace/)*
For the original README, check out the origin repository ([thlorenz/brace](https://github.com/thlorenz/brace))

## Installation

npm install brace

## Example

```js
var ace = require('brace');
require('brace/mode/javascript');
require('brace/theme/monokai');

var editor = ace.edit('javascript-editor');
editor.getSession().setMode('ace/mode/javascript');
editor.setTheme('ace/theme/monokai');
```

Include the above as an **entry** in your browserify build, add a `<div id="javascript-editor"></div>` to your html page and
a JavaScript editor will appear.

This editor will show error/warning annotations if your browser supports WebWorkers
created via a blob URL (see testling support badge on top).

Please consult the [detailed example](https://github.com/thlorenz/brace/tree/master/example) for more information.

## Why not just use ace?

The ace editor creates the [WebWorker](http://www.html5rocks.com/en/tutorials/workers/basics/) via a worker script url.
This requires the worker scripts to reside on your server and forces you to host the ace editor on your server as well.
This package is not distributed via npmjs, but can be installed using npm by adding the following to `package.json`:

While that is ok in most cases, it prevents you from providing a fully working ace editor package.

With brace, you have two options:

- include brace itself when browserifying your app to get a fully working ace editor included with your bundle (no other
external scripts needed)
- create the bundle as explained above and provide it to others so they can include it in their html page simply via a
script tag
npm install brace-aml

## What if my browser doesn't support it?
## Embedding

If brace is unable to inline the web worker, it just falls back to provide the ace editor without annotation support.
This means the editor is fully functional, but doesn't display errors/warnings on the left side.

As far as I understand, the original ace editor behaves in exactly the same way.

## How does it work?

brace has an [update script](https://github.com/thlorenz/brace/blob/master/build/update.js) which automatically pulls
down the [ace builds](https://github.com/ajaxorg/ace-builds) and refactors them to provide the following:

- inline all supported workers
- automatically require the workers that a 'mode' (language) depends on inside the mode file itself
- provide the modes and themes at the same paths that ace's `setMode` and `setTheme` use (just replace 'ace' with
'brace') as seen in the above example

## Supported Workers

All workers included with ace are supported, except `php` and `xquery`, mainly because I wasn't able to properly
stringify their code (any help with that is appreciated).

## Can I use it with TypeScript?

Yes, brace includes modular type definitions so you can do normal import statements and type safety checking
with TypeScript. The example above becomes:

```ts
import * as ace from 'brace';
import 'brace/mode/javascript';
import 'brace/theme/monokai';
```js
import "brace/mode/aml";

const editor = ace.edit('javascript-editor');
editor.getSession().setMode('ace/mode/javascript');
editor.setTheme('ace/theme/monokai');
<AceEditor mode="aml"/>
```

brace exposes these type definitions in `package.json`, so they are available when you do `npm install brace`.
You do not need an additional install step or another tool to install these definitions.

These type definitions are kept up to date in the same way as the rest of brace. There is an
[update script](https://github.com/thlorenz/brace/blob/master/build/update-ts.js) which automatically pulls
down the [DefinitelyTyped definition](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/ace/index.d.ts)
and refactors it to be modular rather than global.

## Test

npm explore brace
npm test
Loading