[PathKit] Remove experimental- from package names
On the demo page, we use the skia-cdn bucket to hopefully
have better performance than unpkg.
Additionally, on the demo page, we default to using the
WASM version if supported by the browser.
Docs-Preview: https://skia.org/?cl=150904
Bug: skia:8216
Change-Id: I901016e95b8d66803053680691aac4d314821d18
Reviewed-on: https://skia-review.googlesource.com/150904
Reviewed-by: Joe Gregorio <jcgregorio@google.com>
diff --git a/modules/pathkit/Makefile b/modules/pathkit/Makefile
index 167eda0..7694cf1 100644
--- a/modules/pathkit/Makefile
+++ b/modules/pathkit/Makefile
@@ -93,38 +93,38 @@
cp ../../out/pathkit/pathkit.js.map ./npm-asmjs/bin/debug/pathkit.js.map
example:
- npm install experimental-pathkit-wasm
+ npm install pathkit-asmjs pathkit-wasm
echo "Go check out localhost:8000/npm-wasm/example.html"
python serve.py
local-example:
- rm -rf node_modules/experimental-pathkit-wasm
- rm -rf node_modules/experimental-pathkit-asmjs
+ rm -rf node_modules/pathkit-wasm
+ rm -rf node_modules/pathkit-asmjs
mkdir -p node_modules
- ln -s -T ../npm-wasm node_modules/experimental-pathkit-wasm
- ln -s -T ../npm-asmjs node_modules/experimental-pathkit-asmjs
+ ln -s -T ../npm-wasm node_modules/pathkit-wasm
+ ln -s -T ../npm-asmjs node_modules/pathkit-asmjs
echo "Go check out http://localhost:8000/npm-wasm/example.html"
echo "or http://localhost:8000/npm-asmjs/example.html"
python serve.py
local-example-test:
- rm -rf node_modules/experimental-pathkit-wasm
- rm -rf node_modules/experimental-pathkit-asmjs
- mkdir -p node_modules/experimental-pathkit-wasm
- mkdir -p node_modules/experimental-pathkit-asmjs
- ln -s -T ../../npm-wasm/bin/test node_modules/experimental-pathkit-wasm/bin
- ln -s -T ../../npm-asmjs/bin/test node_modules/experimental-pathkit-asmjs/bin
+ rm -rf node_modules/pathkit-wasm
+ rm -rf node_modules/pathkit-asmjs
+ mkdir -p node_modules/pathkit-wasm
+ mkdir -p node_modules/pathkit-asmjs
+ ln -s -T ../../npm-wasm/bin/test node_modules/pathkit-wasm/bin
+ ln -s -T ../../npm-asmjs/bin/test node_modules/pathkit-asmjs/bin
echo "Go check out localhost:8000/npm-wasm/example.html"
echo "or http://localhost:8000/npm-asmjs/example.html"
python serve.py
local-example-debug:
- rm -rf node_modules/experimental-pathkit-wasm
- rm -rf node_modules/experimental-pathkit-asmjs
- mkdir -p node_modules/experimental-pathkit-wasm
- mkdir -p node_modules/experimental-pathkit-asmjs
- ln -s -T ../../npm-wasm/bin/debug node_modules/experimental-pathkit-wasm/bin
- ln -s -T ../../npm-asmjs/bin/debug node_modules/experimental-pathkit-asmjs/bin
+ rm -rf node_modules/pathkit-wasm
+ rm -rf node_modules/pathkit-asmjs
+ mkdir -p node_modules/pathkit-wasm
+ mkdir -p node_modules/pathkit-asmjs
+ ln -s -T ../../npm-wasm/bin/debug node_modules/pathkit-wasm/bin
+ ln -s -T ../../npm-asmjs/bin/debug node_modules/pathkit-asmjs/bin
echo "Go check out localhost:8000/npm-wasm/example.html"
echo "or http://localhost:8000/npm-asmjs/example.html"
python serve.py
\ No newline at end of file
diff --git a/modules/pathkit/README.md b/modules/pathkit/README.md
index 10c2c3a..e3316bf 100644
--- a/modules/pathkit/README.md
+++ b/modules/pathkit/README.md
@@ -12,4 +12,19 @@
Set the EMSDK environment variable to the directory you installed it to.
Run `./compile.sh` to compile a production, WASM build to `$SKIA_HOME/out/pathkit`.
-Add "--help" for more options.
\ No newline at end of file
+Add "--help" for more options.
+
+
+Deploying to npm
+----------------
+
+ # Build all 3 versions (release, test, debug) for both asmjs and WASM
+ # These binaries will be placed in the proper places of npm-*/bin
+ # This takes 5-10 minutes.
+ make npm
+
+ # Update the package.json files of both npm-asmjs and npm-wasm
+ make update-patch # or update-minor or update-major
+
+ # Publish both repos
+ make publish
diff --git a/modules/pathkit/npm-asmjs/README.md b/modules/pathkit/npm-asmjs/README.md
index e8bcf2f..a04007f 100644
--- a/modules/pathkit/npm-asmjs/README.md
+++ b/modules/pathkit/npm-asmjs/README.md
@@ -1,10 +1,10 @@
An asm.js version of Skia's PathOps toolkit.
-To use the library, run `npm install experimental-pathkit-asmjs` and then simply include it:
+To use the library, run `npm install pathkit-asmjs` and then simply include it:
- <script src="/node_modules/experimental-pathkit-asmjs/bin/pathkit.js"></script>
+ <script src="/node_modules/pathkit-asmjs/bin/pathkit.js"></script>
PathKitInit({
- locateFile: (file) => '/node_modules/experimental-pathkit-asmjs/bin/'+file,
+ locateFile: (file) => '/node_modules/pathkit-asmjs/bin/'+file,
}).then((PathKit) => {
// Code goes here using PathKit
});
@@ -28,7 +28,7 @@
In the JS code, use require():
- const PathKitInit = require('experimental-pathkit-asmjs/bin/pathkit.js')
+ const PathKitInit = require('pathkit-asmjs/bin/pathkit.js')
PathKitInit().then((PathKit) => {
// Code goes here using PathKit
})
@@ -40,13 +40,13 @@
config.plugins.push(
new CopyWebpackPlugin([
- { from: 'node_modules/experimental-pathkit-asmjs/bin/pathkit.js.mem' }
+ { from: 'node_modules/pathkit-asmjs/bin/pathkit.js.mem' }
])
);
If webpack gives an error similar to:
- ERROR in ./node_modules/experimental-pathkit-asmjs/bin/pathkit.js
+ ERROR in ./node_modules/pathkit-asmjs/bin/pathkit.js
Module not found: Error: Can't resolve 'fs' in '...'
Then, add the following configuration change to the node section of the config:
diff --git a/modules/pathkit/npm-asmjs/example.html b/modules/pathkit/npm-asmjs/example.html
index e5c85e7..395caa0 100644
--- a/modules/pathkit/npm-asmjs/example.html
+++ b/modules/pathkit/npm-asmjs/example.html
@@ -44,12 +44,12 @@
<svg id=svg2 xmlns='http://www.w3.org/2000/svg' width=200 height=200></svg>
<svg id=svg3 xmlns='http://www.w3.org/2000/svg' width=200 height=200></svg>
-<script type="text/javascript" src="/node_modules/experimental-pathkit-asmjs/bin/pathkit.js"></script>
+<script type="text/javascript" src="/node_modules/pathkit-asmjs/bin/pathkit.js"></script>
<script type="text/javascript" charset="utf-8">
PathKitInit({
- locateFile: (file) => '/node_modules/experimental-pathkit-asmjs/bin/'+file,
+ locateFile: (file) => '/node_modules/pathkit-asmjs/bin/'+file,
}).then((PathKit) => {
window.PathKit = PathKit;
OutputsExample(PathKit);
diff --git a/modules/pathkit/npm-asmjs/package.json b/modules/pathkit/npm-asmjs/package.json
index 56436b2..eb4adda 100644
--- a/modules/pathkit/npm-asmjs/package.json
+++ b/modules/pathkit/npm-asmjs/package.json
@@ -1,6 +1,6 @@
{
- "name": "experimental-pathkit-asmjs",
- "version": "0.3.1",
+ "name": "pathkit-asmjs",
+ "version": "0.4.0",
"description": "A asm.js version of Skia's PathOps toolkit",
"main": "bin/pathkit.js",
"homepage": "https://github.com/google/skia/tree/master/modules/pathkit",
diff --git a/modules/pathkit/npm-wasm/README.md b/modules/pathkit/npm-wasm/README.md
index 89374da..571bcfa 100644
--- a/modules/pathkit/npm-wasm/README.md
+++ b/modules/pathkit/npm-wasm/README.md
@@ -1,10 +1,10 @@
A WASM version of Skia's PathOps toolkit.
-To use the library, run `npm install experimental-pathkit-wasm` and then simply include it:
+To use the library, run `npm install pathkit-wasm` and then simply include it:
- <script src="/node_modules/experimental-pathkit-wasm/bin/pathkit.js"></script>
+ <script src="/node_modules/pathkit-wasm/bin/pathkit.js"></script>
PathKitInit({
- locateFile: (file) => '/node_modules/experimental-pathkit-wasm/bin/'+file,
+ locateFile: (file) => '/node_modules/pathkit-wasm/bin/'+file,
}).then((PathKit) => {
// Code goes here using PathKit
});
@@ -28,7 +28,7 @@
In the JS code, use require():
- const PathKitInit = require('experimental-pathkit-wasm/bin/pathkit.js')
+ const PathKitInit = require('pathkit-wasm/bin/pathkit.js')
PathKitInit().then((PathKit) => {
// Code goes here using PathKit
})
@@ -40,13 +40,13 @@
config.plugins.push(
new CopyWebpackPlugin([
- { from: 'node_modules/experimental-pathkit-wasm/bin/pathkit.wasm' }
+ { from: 'node_modules/pathkit-wasm/bin/pathkit.wasm' }
])
);
If webpack gives an error similar to:
- ERROR in ./node_modules/experimental-pathkit-wasm/bin/pathkit.js
+ ERROR in ./node_modules/pathkit-wasm/bin/pathkit.js
Module not found: Error: Can't resolve 'fs' in '...'
Then, add the following configuration change to the node section of the config:
diff --git a/modules/pathkit/npm-wasm/example.html b/modules/pathkit/npm-wasm/example.html
index a6c8cca..063454f 100644
--- a/modules/pathkit/npm-wasm/example.html
+++ b/modules/pathkit/npm-wasm/example.html
@@ -44,12 +44,12 @@
<svg id=svg2 xmlns='http://www.w3.org/2000/svg' width=200 height=200></svg>
<svg id=svg3 xmlns='http://www.w3.org/2000/svg' width=200 height=200></svg>
-<script type="text/javascript" src="/node_modules/experimental-pathkit-wasm/bin/pathkit.js"></script>
+<script type="text/javascript" src="/node_modules/pathkit-wasm/bin/pathkit.js"></script>
<script type="text/javascript" charset="utf-8">
PathKitInit({
- locateFile: (file) => '/node_modules/experimental-pathkit-wasm/bin/'+file,
+ locateFile: (file) => '/node_modules/pathkit-wasm/bin/'+file,
}).then((PathKit) => {
window.PathKit = PathKit;
OutputsExample(PathKit);
diff --git a/modules/pathkit/npm-wasm/package.json b/modules/pathkit/npm-wasm/package.json
index 2999478..f501a89 100644
--- a/modules/pathkit/npm-wasm/package.json
+++ b/modules/pathkit/npm-wasm/package.json
@@ -1,6 +1,6 @@
{
- "name": "experimental-pathkit-wasm",
- "version": "0.3.1",
+ "name": "pathkit-wasm",
+ "version": "0.4.0",
"description": "A WASM version of Skia's PathOps toolkit",
"main": "bin/pathkit.js",
"homepage": "https://github.com/google/skia/tree/master/modules/pathkit",
diff --git a/modules/pathkit/package.json b/modules/pathkit/package.json
index 7279632..0f35a49 100644
--- a/modules/pathkit/package.json
+++ b/modules/pathkit/package.json
@@ -5,7 +5,8 @@
"private": true,
"main": "index.js",
"dependencies": {
- "experimental-pathkit-wasm": "^0.2.0"
+ "pathkit-asmjs": "^0.4.0",
+ "pathkit-wasm": "^0.4.0"
},
"devDependencies": {
"is-docker": "^1.1.0",
diff --git a/site/user/modules/pathkit.md b/site/user/modules/pathkit.md
index 30aaef7..ecfc93e 100644
--- a/site/user/modules/pathkit.md
+++ b/site/user/modules/pathkit.md
@@ -7,8 +7,8 @@
Download the library
--------------------
-See the the npm page for either the [WebAssembly](https://www.npmjs.com/package/experimental-pathkit-wasm) version
-or the [asm.js](https://www.npmjs.com/package/experimental-pathkit-asmjs) version
+See the the npm page for either the [WebAssembly](https://www.npmjs.com/package/pathkit-wasm) version
+or the [asm.js](https://www.npmjs.com/package/pathkit-asmjs) version
for details on downloading and getting started.
WebAssembly has faster load times and better overall performance but is
@@ -45,21 +45,34 @@
<canvas class=patheffect id=canvasTransform title="Transform: A drawn star moved and rotated by an Affine Matrix"></canvas>
</div>
-<script src="https://unpkg.com/experimental-pathkit-asmjs@0.3.0/bin/pathkit.js"></script>
+<script type="text/javascript" charset="utf-8">
+ //Tries to load the WASM version if supported, then falls back to asmjs
+ let s = document.createElement('script');
+ if (window.WebAssembly && typeof window.WebAssembly.compile === "function") {
+ console.log('WebAssembly is supported! Using the wasm version of PathKit');
+ window.__pathkit_locate_file = 'https://storage.googleapis.com/skia-cdn/pathkit-wasm/0.3.1/bin/';
+ } else {
+ console.log('WebAssembly is not supported (yet) on this browser. Using the asmjs version of PathKit');
+ window.__pathkit_locate_file = 'https://storage.googleapis.com/skia-cdn/pathkit-asmjs/0.3.1/bin/';
+ }
+ s.src = window.__pathkit_locate_file+'pathkit.js';
+ document.write(s.outerHTML);
+</script>
+
<script>
try {
PathKitInit({
- locateFile: (file) => 'https://unpkg.com/experimental-pathkit-asmjs@0.3.0/bin/'+file,
+ locateFile: (file) => window.__pathkit_locate_file+file,
}).then((PathKit) => {
// Code goes here using PathKit
PathEffectsExample(PathKit);
MatrixTransformExample(PathKit);
});
- }
- catch(error) {
- console.warn(error, 'falling back to image');
- docment.getElementById('effects').innerHTML = '<img width=800 src="./PathKit_effects.png"/>'
+ }
+ catch(error) {
+ console.warn(error, 'falling back to image');
+ docment.getElementById('effects').innerHTML = '<img width=800 src="./PathKit_effects.png"/>'
}
function setCanvasSize(ctx, width, height) {