Solve module compatibility issues, clean up project.

.babelrc

@@ -0,0 +1,16 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": 10,
+          "browsers": ">1%, not IE 11"
+        },
+        "modules": true,
+        "shippedProposals": true,
+        "loose": true
+      }
+    ]
+  ]
+}

.gitignore

@@ -1,41 +1,122 @@
-# sublime text files
-*.sublime*
-*.*~*.TMP
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
 
-# temp files
-.DS_Store
-Thumbs.db
-Desktop.ini
-npm-debug.log
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
-# project files
-.project
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
 
-# vim swap files
-*.sw*
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
 
-# emacs temp files
-*~
-\#*#
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
 
-# project ignores
-!.gitkeep
-*__temp
-node_modules
-docs/
+# nyc test coverage
+.nyc_output
 
-# jetBrains IDE ignores
-.idea
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
 
-# tsc compile
-compile
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
 
-# yarn
-yarn.lock
+# dotenv environment variables file
+.env
+.env.test
 
-# CommonJS
-dist/pixi-tilemap.js
-dist/pixi-tilemap.js.map
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
 
-# ESM
-lib
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# typescipt output
+compile
+docs
+dist
+lib

.travis.yml

@@ -3,11 +3,8 @@ language: node_js
 node_js:
   - "10"
 
-cache:
-  yarn: true
-
 before_script:
-  - yarn
+  - npm install
 
 script:
-  - yarn build
+  - npm run build

README.md

@@ -1,23 +1,108 @@
 # pixi-tilemap
 
 [![Build Status](https://travis-ci.org/pixijs/pixi-tilemap.svg?branch=master)](https://travis-ci.org/pixijs/pixi-tilemap)
+
 <p align="center">
 <img src="https://i.imgur.com/hfoiBRk.png" width="1280px" />
 <p/>
 
 Library that helps with tilemaps, provide special shaders and canvas fallback. Works with pixi >= 5.0.4
 
+## Plugin Registration (Breaking Change!)
+
+You have to register the plugin before you can use it.  
+Since the CanvasRenderer is only supported by `pixi-legacy` you have to register
+the renderer which fits your needs by yourself.
+
+### umd
+
+**Note** used by the examples
+
+```js
+// the plugin is exposed to the global scope via `pixi_tilemap`
+PIXI.Renderer.registerPlugin('tilemap', pixi_tilemap.TileRenderer);
+
+const renderer = PIXI.autoDetectRenderer({ width: 800, height: 600 });
+// ....
+```
+
+### CommonJS (require)
+
+**Note** currently not tested, but should work.
+
+```js
+const { Renderer } = require('pixi.js');
+const { TileRenderer } = require('pixi-tilemap');
+
+// the plugin must be registered before a pixi application is created
+Renderer.registerPlugin('tilemap', TileRenderer);
+
+const renderer = autoDetectRenderer({ width: 800, height: 600 });
+// ....
+```
+
+### ES Modules (import)
+
+```js
+import { Renderer } from 'pixi.js';
+import { TileRenderer } from 'pixi-tilemap';
+
+// the plugin must be registered before a pixi application is created
+Renderer.registerPlugin('tilemap', TileRenderer);
+
+const renderer = autoDetectRenderer({ width: 800, height: 600 });
+// ....
+```
+
 ## Type of builds (**Important!**)
 
-Beware, we've changed the filename of good old ES5 build, according to pixi-build-tools rollup config!
+This package supports all commonly used js module formats.
+
+**Note**:
 
+- the package is set to be a commonjs package by default. See [package.json#type](https://nodejs.org/api/packages.html#packages_type)
+- The [package.json#exports](https://nodejs.org/api/packages.html#packages_exports) is used to aid the module resolution in finding the correct entry point
+
+```json
+// package.json#exports
+{
+  "exports": {
+    "import": "./dist/esm/index.js",
+    "require": "./dist/index.js",
+    "browser": "./dist/pixi-tilemap.umd.production.min.js"
+  }
+}
+```
+
+### umd (production build / minified)
+
+```html
+<script src="dist/pixi-tilemap.umd.production.min.js"></script>
 ```
-<script src="dist/pixi-tilemap.umd.js"></script>
+
+### umd (development build)
+
+```html
+<script src="dist/pixi-tilemap.umd.development.js"></script>
+```
+
+### commonjs
+
+```js
+const pixiTilemap = require('pixi-tilemap');
+// or
+const { TileRenderer } = require('pixi-tilemap');
+
+// depending on your current NODE_ENV the dev or prod bundle is required
 ```
 
-CommonJS build is located in `dist/pixi-tilemap.js`.
+### esm
 
-ESM is specified in `package.json`.
+```js
+import * as pixiTilemap from 'pixi-tilemap';
+// or
+import { TileRenderer } from 'pixi-tilemap';
+```
 
 ## Multi-texture Configuration (**Important!**) :page_facing_up:
 
@@ -59,6 +144,8 @@ Please use [v3 branch](https://github.com/pixijs/pixi-tilemap/tree/pixiv3) for p
 
 Canvas fallback is 5x slower than vanilla rpgmaker. Webgl version is faster and doesnt use extra textures.
 
+## Demos
+
 ### RPGMaker demo
 
 [webgl](https://pixijs.github.io/pixi-tilemap/): [zoomin](https://pixijs.github.io/pixi-tilemap/?scale=0.6) and [zoomout](https://pixijs.github.io/pixi-tilemap/?scale=1.4)
@@ -82,25 +169,39 @@ document.body.appendChild(renderer.view);
 var loader = new PIXI.loaders.Loader();
 loader.add('atlas', 'basic/atlas.json');
 loader.load(function(loader, resources) {
-	var tilemap = new PIXI.tilemap.CompositeRectTileLayer(0, [resources['atlas_image'].texture]);
-    var size = 32;
-    // bah, im too lazy, i just want to specify filenames from atlas
-    for (var i=0;i<7;i++)
-        for (var j=0;j<7;j++) {
-            tilemap.addFrame("grass.png", i*size, j*size);
-            if (i%2==1 && j%2==1)
-                tilemap.addFrame("tough.png", i*size, j*size);
-        }
-
-    // if you are lawful citizen, please use textures from the loader
-    var textures = resources.atlas.textures;
-    tilemap.addFrame(textures["brick.png"], 2*size, 2*size);
-    tilemap.addFrame(textures["brick_wall.png"], 2*size, 3*size);
-
-    renderer.render(tilemap);
+  var tilemap = new PIXI.tilemap.CompositeRectTileLayer(0, [
+    resources['atlas_image'].texture,
+  ]);
+  var size = 32;
+  // bah, im too lazy, i just want to specify filenames from atlas
+  for (var i = 0; i < 7; i++)
+    for (var j = 0; j < 7; j++) {
+      tilemap.addFrame('grass.png', i * size, j * size);
+      if (i % 2 == 1 && j % 2 == 1)
+        tilemap.addFrame('tough.png', i * size, j * size);
+    }
+
+  // if you are lawful citizen, please use textures from the loader
+  var textures = resources.atlas.textures;
+  tilemap.addFrame(textures['brick.png'], 2 * size, 2 * size);
+  tilemap.addFrame(textures['brick_wall.png'], 2 * size, 3 * size);
+
+  renderer.render(tilemap);
 });
 ```
 
-### More tutorials :link:
+## Serving the examples locally
+
+You can serve the examples after checking out this repository and installing it,
+by running the following command.
+
+```
+npm run serve
+```
+
+rpgmaker -> `http://localhost:5000/`
+basic -> `http://localhost:5000/basic`
+
+## More tutorials :link:
 
 [Alan01252 tutorial](https://github.com/Alan01252/pixi-tilemap-tutorial)

basic.html

@@ -3,12 +3,12 @@
 <head lang="en">
     <meta charset="UTF-8">
     <title>PIXI-TILEMAP minimal test</title>
-    <link type="text/css" media="all" rel="stylesheet" href="css/main.css"/>
-    <script src="https://pixijs.download/dev/pixi-legacy.js"></script>
+    <link type="text/css" media="all" rel="stylesheet" href="public/css/main.css"/>
+    <script src="https://pixijs.download/dev/pixi.js"></script>
 <!--    <script src="lib/pixi.js"></script>-->
-    <script src="dist/pixi-tilemap.umd.js"></script>
+    <script src="dist/pixi-tilemap.umd.development.js"></script>
 </head>
 <body>
-<script src="demo/basic.js" type="text/javascript"></script>
+<script src="public/basic.js" type="text/javascript"></script>
 </body>
 </html>