From e110319b33762c53f077903ababff424071c4193 Mon Sep 17 00:00:00 2001 From: Paris Kasidiaris Date: Fri, 29 Dec 2017 10:55:01 +0200 Subject: [PATCH] Update importing docs Also fix #11. --- Gemfile.lock | 2 +- _docs/guides/download.md | 33 +++++++++++++++++++++------------ _docs/guides/import.md | 25 +++++-------------------- 3 files changed, 27 insertions(+), 33 deletions(-) diff --git a/Gemfile.lock b/Gemfile.lock index 8cdeabe..dee1974 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -198,4 +198,4 @@ DEPENDENCIES github-pages BUNDLED WITH - 1.14.3 \ No newline at end of file + 1.14.3 diff --git a/_docs/guides/download.md b/_docs/guides/download.md index 63d5a73..c796600 100644 --- a/_docs/guides/download.md +++ b/_docs/guides/download.md @@ -3,32 +3,41 @@ title: Downloading category: Guides --- -There are several ways to download xterm.js, depending on the way you want to consume it inside your JavaScript application. We suggest strongly though using a package manager like [NPM](https://npmjs.org/package/xterm) or [Bower](https://bower.io/). +The proposes using a package manager like [NPM](https://npmjs.org/package/xterm) or [Bower](https://bower.io/). You can either download official releases of xterm.js or arbitrary commits, which is not encouraged for production usage. All the production ready releases of xterm.js are available at [https://github.com/sourcelair/xterm.js/releases](https://github.com/sourcelair/xterm.js/releases). -## NPM -The best way to download xterm.js for use in your project is through [NPM](npmjs.org/package/xterm). +## Npm and Yarn +The best way to download xterm.js for use in your project is with [`npm`](http://npmjs.org/) or [`yarn`](https://yarnpkg.com/en/). -``` +```bash +# Install with npm npm install --save xterm -``` - -## Bower -Another way to download xterm.js for your project is through [Bower](http://bower.io/). -``` -bower install --save xterm.js +# Or alternatively, install with Yarn ``` ## GitHub Releases All xterm.js releases are available as tar.gz and zip archives at [https://github.com/sourcelair/xterm.js/releases](https://github.com/sourcelair/xterm.js/releases), to download them manually. ## Clone the Git repository -You can always clone the whole xterm.js repository and checkout any arbitrary commit you would like to use. We suggest not doing this though unless you are certain about your actions, as only official tagged releases of xterm.js are considered production-ready. +You can clone the xterm.js repository and checkout any arbitrary commit you would like to use. -``` +**We do not suggest doing this** unless you are certain about your actions, as only official tagged releases of xterm.js are considered production-ready. + +Also, make sure to **manually install dependencies and build xterm.js** after cloning. + +```bash git clone https://github.com/sourcelair/xterm.js +cd xterm.js +npm install +npm run build ``` +## 📣 ⛔️ No more Bower support + +Xterm.js stopped supporting Bower since version 3.0.0. You should use [`npm`](http://npmjs.org/) or [`yarn`](https://yarnpkg.com/en/) instead. + +## Importing in your application + Next, take a look at the different ways of [importing xterm.js](/docs/guides/import) into your project. \ No newline at end of file diff --git a/_docs/guides/import.md b/_docs/guides/import.md index a2266c9..dd159b3 100644 --- a/_docs/guides/import.md +++ b/_docs/guides/import.md @@ -3,32 +3,17 @@ title: Importing category: Guides --- -Xterm.js ships its core and add-ons as [UMD modules](https://github.com/umdjs/umd), which means it should work in all mainstream JavaScript environments; from a plain browser, to Node.js and Electron app. +The preferred way to import xterm.js and its add-ons is the [`import` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) of ES6 Modules. > **⚠️ Attention!** Do not forget to import the [CSS stylesheet](https://github.com/sourcelair/xterm.js/blob/master/src/xterm.css) of xterm.js into your app to get it working appropriately. -## Native modules +## Example ```javascript -import xterm as Terminal -``` - -## CommonJS -```javascript -let Terminal = require('xterm'); -``` +import { Terminal } from 'xterm'; -## Asynchronous Module System (AMD) +let term = new Terminal(); -```javascript -define(['path/to/xterm/src/xterm'], function (Terminal) { - // Your code here -}); +term.open(document.getElementById('xterm-container')); ``` - -## Plain browser (no module system) - -```html - -``` \ No newline at end of file