https://github.com/mediamonks/tawang
A webpack plugin for Facebook's AR Studio.
https://github.com/mediamonks/tawang
arstudio facebook mediamonks tawang webpack webpack-plugin
Last synced: about 2 months ago
JSON representation
A webpack plugin for Facebook's AR Studio.
- Host: GitHub
- URL: https://github.com/mediamonks/tawang
- Owner: mediamonks
- Created: 2018-08-07T15:08:56.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-10-18T15:28:45.000Z (over 7 years ago)
- Last Synced: 2025-09-13T05:37:34.178Z (10 months ago)
- Topics: arstudio, facebook, mediamonks, tawang, webpack, webpack-plugin
- Language: JavaScript
- Homepage:
- Size: 316 KB
- Stars: 0
- Watchers: 10
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tawang
This plugin makes webpack compatible with [Facebook’s AR Studio](https://developers.facebook.com/products/ar-studio). With this plugin, it is possible to debug an AR Studio script using source maps.
It uses an external API to parse the source map which webpack generates. You can create such an API using the [Tawang-API](https://github.com/timstruthoff/tawang-server) Git repository.
## Install
```javascript
npm i -D @mediamonks/tawang
```
or
```javascript
yarn add -D @mediamonks/tawang
```
## Usage
To use this plugin, you first have to require it. Secondly, you have to add an instance of it to the plugin array in the webpack.config.js. Finally, you have to pass the API endpoints to the options object.
Alternatively, there is also a boilerplate project available [here](https://github.com/timstruthoff/tawang-starter), which you can just clone.
**webpack.config.js**
```javascript
const Tawang = require('@mediamonks/tawang');
module.exports = {
// ...
externals: {
Animation: "commonjs Animation",
Diagnostics: "commonjs Diagnostics",
FaceTracking: "commonjs FaceTracking",
Reactive: "commonjs Reactive",
Scene: "commonjs Scene"
},
plugins: [
new Tawang({
serverHost: 'api.com',
sourceMapEndpoint: '/source-map',
parseEndpoint: '/source-map/[id]'
})
]
}
```
### Options
You have to pass the following options to the plugin.
#### `serverHost: ` (required)
The domain name of the API without the protocol (e.g. “https://”) and with the TLD (e.g. “.com”).
Example: "api.com".
#### `sourceMapEndpoint: ` (optional)
The address of the source map POST endpoint relative to the serverHost domain. This is the address, where the plugin sends the source map during the compilation.
Example: "/source-map".
#### `parseEndpoint: ` (optional)
The address of the parsing GET endpoint relative to the serverHost domain. Any errors which occur in the AR Studio script are sent here. The API server then parses the line and column number from the error and returns the code location in the original source.
The URL should include placeholders for the source map id ("[id]"), line number ("[line]"), and column number ("[column]"). You have to enclose all placeholders in square brackets
Example: "/source-map/[id]?line=[line]&column=[column]".
### Example
This is an example `webpack.config.js` file with Babel support.
```javascript
const webpack = require("webpack");
const path = require("path");
const Tawang = require('@mediamonks/tawang');
module.exports = {
entry: "./src/script.js",
mode: "production",
devtool: "source-map",
output: {
path: "./build"),
filename: "main.bundle.js"
},
module: {
rules: [{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
},
externals: {
Animation: "commonjs Animation",
Diagnostics: "commonjs Diagnostics",
FaceTracking: "commonjs FaceTracking",
Reactive: "commonjs Reactive",
Scene: "commonjs Scene"
},
plugins: [
new Tawang({
serverHost: 'api.com',
sourceMapEndpoint: '/source-map',
parseEndpoint: '/source-map/[id]?line=[line]&column=[column]'
})
]
};
```