vinerz/spark-webpack-project

A Webpack ready project for your scripting needs

SparkAR Webpack Project

This repository contains a Webpack-powered scripting environment for SparkAR.

Why

With this setup, you can enjoy all neat features from NPM packages, node and ESNEXT at your filters.

If you are a heavy scripter like me, you must feel very frustrated by the scripting limitations from the SparkAR engine.

Throwing everything into a single file isn't a best practice and results into large, confusing and poorly written code.

Now you can create and reuse modules within your project.

Features

• Webpack bundling
• Babel
  • preset-env transpiling;
  • Optional Chaining;
  • Object Rest Spread.
• ESLint
  • Airbnb ruleset derivated.
• TypeScript types
  • Contains all the SparkAR type system for VSCode IntelliSense (updated to 30/09/2019 v71).

Downloads

Download the project

Usage

Install the project dependencies

yarn install

Development

You should develop the filter using the watch script. This way Webpack will detect any changes and recompile the script on the fly. You must *never* export the development version to Spark HUB as it contains a lot of boilerplate code and system comments. Only use the watch script for development purposes.

yarn watch

Deployment

BEFORE sending your filter to Spark HUB, use the build script. Webpack will then minify the code bundle and make it as smaller and efficient as it can possibly be.

yarn build

Known issues

For now, this setup adds 989 bytes of overhead code to the script. As SparkAR itself adds a lot of comments and the code isn't optimized by default, I think that in the end these bytes will be less than what we usually send to Facebook servers.