[skottiekit] Initial npm files

As per convention, skottiekit/skottiekit is the folder that
will be published to npm. It has a bin directory that has the
full skottiekit build.

Change-Id: I95cbb80158bc8e6dbe3b0d8ae4ffcadd59a7bf9b
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/303925
Reviewed-by: Florin Malita <fmalita@chromium.org>

experimental/skottiekit/.gitignore

@@ -0,0 +1 @@
+bin/

experimental/skottiekit/CHANGELOG.md

@@ -6,4 +6,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-Beginning of Changelog history
+## [0.1.0] 2020-07-21
+
+Beginning of changelog.

experimental/skottiekit/Makefile

@@ -30,10 +30,19 @@ release_full: clean_examples
 	cp ../../out/skottiekit/skottiekit.js       ./examples/bin
 	cp ../../out/skottiekit/skottiekit.wasm     ./examples/bin
 
+npm: clean_npm
+	./compile.sh full-build
+	cp ../../out/skottiekit/skottiekit.js       ./skottiekit/bin
+	cp ../../out/skottiekit/skottiekit.wasm     ./skottiekit/bin
+
 clean_examples:
 	rm -f ./examples/bin/*
 	mkdir -p ./examples/bin
 
+clean_npm:
+	rm -f ./skottiekit/bin/*
+	mkdir -p ./skottiekit/bin
+
 serve:
 	echo "Go check out http://localhost:8001/"
 	cd examples && python ../serve.py

experimental/skottiekit/examples/index.html

@@ -34,8 +34,6 @@
       return resp.text();
     });
 
-
-
     function SkottieDemo(values, canvasID, width=400, height=400) {
       const [SkottieKit, legoJSON] = values;
       const animation = SkottieKit.MakeManagedAnimation(legoJSON);

experimental/skottiekit/skottiekit/README.md

@@ -0,0 +1,41 @@
+A WASM version of Skottie (Lottie with Skia).
+
+# Getting Started
+
+To use the library, run `npm install skottiekit-wasm` and then simply include it:
+
+    <script src="/node_modules/skottiekit-wasm/bin/skottiekit.js"></script>
+    const loadKit = SkottieKitInit({
+        locateFile: (file) => '/node_modules/skottiekit-wasm/bin/'+file,
+    });
+    // Load the animation Lottie JSON file.
+    const loadLottie = fetch('/path/to/lottie.json').then((resp) => resp.text());
+
+    Promise.all([loadKit, loadLottie]).then((values) => {
+        const [SkottieKit, lottieJSON] = values;
+        const animation = SkottieKit.MakeManagedAnimation(lottieJSON);
+        const duration = animation.duration() * 1000;
+        // Assumes there's a <canvas id="my_canvas"> somewhere
+        const surface = SkottieKit.MakeCanvasSurface("my_canvas");
+
+        const firstFrame = Date.now();
+        const clearColor = SkottieKit.WHITE;
+
+        function drawFrame(canvas) {
+            // seek takes a float from 0.0 to 1.0
+            const seek = ((Date.now() - firstFrame) / duration) % 1.0;
+            animation.seek(seek);
+
+            canvas.clear(clearColor);
+            animation.render(canvas, bounds);
+            surface.requestAnimationFrame(drawFrame);
+        }
+        surface.requestAnimationFrame(drawFrame);
+    })
+
+As with all npm packages, there's a freely available CDN via unpkg.com:
+
+    <script src="https://unpkg.com/skottiekit-wasm@0.1.0/bin/skottiekit.js"></script>
+    const loadKit SkottieKitInit({
+         locateFile: (file) => 'https://unpkg.com/skottiekit-wasm@0.1.0/bin/'+file,
+    })

experimental/skottiekit/skottiekit/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "skottiekit-wasm",
+  "version": "0.1.0",
+  "description": "A WASM version of Skottie",
+  "homepage": "https://skia.org/user/modules/skottie",
+  "bugs": {
+    "url": "https://bugs.chromium.org/p/skia/issues/entry"
+  },
+  "permsRepo": "skia-dev/.github",
+  "publishConfig": {
+    "registry":"https://wombat-dressing-room.appspot.com"
+  },
+  "license": "BSD-3-Clause"
+}