@mediamonks/tawang

    0.2.4 • Public • Published

    Tawang

    This plugin makes webpack compatible with Facebook’s 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 Git repository.

    Install

    npm i -D @mediamonks/tawang

    or

    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, which you can just clone.

    webpack.config.js

    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: <String> (required)

    The domain name of the API without the protocol (e.g. “https://”) and with the TLD (e.g. “.com”). Example: "api.com".

    sourceMapEndpoint: <String> (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: <String> (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.

    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]'
        })
      ]
    };

    Install

    npm i @mediamonks/tawang

    DownloadsWeekly Downloads

    20

    Version

    0.2.4

    License

    MIT

    Unpacked Size

    147 kB

    Total Files

    25

    Last publish

    Collaborators

    • n0cha
    • larsvanbraam
    • mientjan
    • devmonk
    • thanarie
    • thi.js
    • psimk
    • nathanuphoff