Skip to content

Commit

Permalink
Merge pull request #17 from T1mL3arn/patch-2
Browse files Browse the repository at this point in the history
[html5 setup doc] new chapter about including js dependencies
  • Loading branch information
player-03 authored Jan 14, 2024
2 parents ef12e2d + 2ab23d9 commit 2acc73b
Showing 1 changed file with 41 additions and 1 deletion.
42 changes: 41 additions & 1 deletion _docs/advanced-setup/html5.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: Setup HTML5
---

Lime and OpenFL may be used to create [HTML5](https://developer.mozilla.org/en-US/docs/Glossary/HTML5) applications and games for web browsers by [compiling to JavaScript](https://haxe.org/manual/target-javascript.html)
Lime and OpenFL may be used to create [HTML5](https://developer.mozilla.org/en-US/docs/Glossary/HTML5) applications and games for web browsers by [compiling to JavaScript](https://haxe.org/manual/target-javascript.html).

## Automatic Install

Expand Down Expand Up @@ -34,6 +34,46 @@ To use an external JavaScript library with Lime, you need [Haxe externs](https:/

Members of the Haxe community have already created open source externs for a number of popular JavaScript libraries, so be sure to search [Haxelib](https://lib.haxe.org/search) or [Github](https://github.com/search) to see if JS externs exist for your library before you try to create your own.

### Adding dependencies

To actually use external JS libraries you must include them in _project.xml_. There are three options:

1. Ship the library with your project as a separate file:

```xml
<dependency path="js-libs/someLibrary.js" />
```

The _js-libs/someLibrary.js_ file will be copied into the compiled project's _lib_ directory. You can change the dependency export path (e.g. from _lib_ to _js_) with this config:

```xml
<config:html5 dependency-path="js" />
```

2. Embed the library:

```xml
<dependency path="js-libs/someLibrary.js" embed="true"/>
```

The content of _js-libs/someLibrary.js_ will be embedded into compiled application's _.js_ file.

3. Add a remote link to the library:

```xml
<dependency name="https://unpkg.com/[email protected]/simplepeer.min.js" />
```

The resulting _index.html_ will have an appropriate `<script>` tag.

### _index.html_ template

Another possible way of adding JS files is to link them directly inside your custom _index.html_ template. With this you must [configure _project.xml_ to use a custom template](../../project-files/xml-format/#template) and probably handle copying JS files to the project export directory by yourself. Similar to `<dependency />` but less convenient.

### _include.xml_

Some Haxe externs support Lime out of the box, like [haxe-simple-peer](https://github.com/ixiagames/haxe-simple-peer). You just include it with `<haxelib name="simple-peer" />` and that's all. This works because it has an [_include.xml_](../../project-files/xml-format/#includexml) file with a `<dependency />` tag so Lime knows how to include the external _simplepeer.min.js_ file.

## Forums

If you encounter any problems when setting up Lime for HTML5, please visit the [forums](http://community.openfl.org/c/help).

0 comments on commit 2acc73b

Please sign in to comment.