Kevin Lubick | e1b36fe | 2018-08-02 11:30:33 -0400 | [diff] [blame] | 1 | A WASM version of Skia's PathOps toolkit. |
| 2 | |
Kevin Lubick | be5091c | 2018-08-31 10:45:18 -0400 | [diff] [blame^] | 3 | To use the library, run `npm install pathkit-wasm` and then simply include it: |
Kevin Lubick | e1b36fe | 2018-08-02 11:30:33 -0400 | [diff] [blame] | 4 | |
Kevin Lubick | be5091c | 2018-08-31 10:45:18 -0400 | [diff] [blame^] | 5 | <script src="/node_modules/pathkit-wasm/bin/pathkit.js"></script> |
Kevin Lubick | e1b36fe | 2018-08-02 11:30:33 -0400 | [diff] [blame] | 6 | PathKitInit({ |
Kevin Lubick | be5091c | 2018-08-31 10:45:18 -0400 | [diff] [blame^] | 7 | locateFile: (file) => '/node_modules/pathkit-wasm/bin/'+file, |
Kevin Lubick | e1b36fe | 2018-08-02 11:30:33 -0400 | [diff] [blame] | 8 | }).then((PathKit) => { |
| 9 | // Code goes here using PathKit |
| 10 | }); |
| 11 | |
| 12 | PathKit comes in two parts, a JS loader and the actual WASM code. The JS loader creates |
| 13 | a global `PathKitInit` that can be called to load the WASM code. The `locateFile` function |
| 14 | is used to tell the JS loader where to find the .wasm file. By default, it will |
| 15 | look for /pathkit.wasm, so if this is not the case, use `locateFile` to configure |
| 16 | this properly. |
| 17 | The `PathKit` object returned through the .then() callback is fully loaded and ready to use. |
| 18 | |
Kevin Lubick | f14a3c0 | 2018-08-22 09:35:32 -0400 | [diff] [blame] | 19 | See the [API page](https://skia.org/user/modules/pathkit) and |
Kevin Lubick | c7d0571 | 2018-08-31 10:03:23 -0400 | [diff] [blame] | 20 | [example.html](https://github.com/google/skia/blob/master/modules/pathkit/npm-wasm/example.html) |
Kevin Lubick | f14a3c0 | 2018-08-22 09:35:32 -0400 | [diff] [blame] | 21 | for details on how to use the library. |
Kevin Lubick | e1b36fe | 2018-08-02 11:30:33 -0400 | [diff] [blame] | 22 | |
| 23 | Using PathKit and WebPack |
| 24 | ------------------------- |
| 25 | |
| 26 | WebPack's support for WASM is still somewhat experimental, but PathKit can be |
| 27 | used with a few configuration changes. |
| 28 | |
| 29 | In the JS code, use require(): |
| 30 | |
Kevin Lubick | be5091c | 2018-08-31 10:45:18 -0400 | [diff] [blame^] | 31 | const PathKitInit = require('pathkit-wasm/bin/pathkit.js') |
Kevin Lubick | e1b36fe | 2018-08-02 11:30:33 -0400 | [diff] [blame] | 32 | PathKitInit().then((PathKit) => { |
| 33 | // Code goes here using PathKit |
| 34 | }) |
| 35 | |
| 36 | Since WebPack does not expose the entire `/node_modules/` directory, but instead |
| 37 | packages only the needed pieces, we have to copy pathkit.wasm into the build directory. |
Kevin Lubick | b3d0e3e | 2018-08-03 12:24:06 -0400 | [diff] [blame] | 38 | One such solution is to use [CopyWebpackPlugin](https://github.com/webpack-contrib/copy-webpack-plugin). |
Kevin Lubick | e1b36fe | 2018-08-02 11:30:33 -0400 | [diff] [blame] | 39 | For example, add the following plugin: |
| 40 | |
| 41 | config.plugins.push( |
| 42 | new CopyWebpackPlugin([ |
Kevin Lubick | be5091c | 2018-08-31 10:45:18 -0400 | [diff] [blame^] | 43 | { from: 'node_modules/pathkit-wasm/bin/pathkit.wasm' } |
Kevin Lubick | e1b36fe | 2018-08-02 11:30:33 -0400 | [diff] [blame] | 44 | ]) |
| 45 | ); |
| 46 | |
| 47 | If webpack gives an error similar to: |
| 48 | |
Kevin Lubick | be5091c | 2018-08-31 10:45:18 -0400 | [diff] [blame^] | 49 | ERROR in ./node_modules/pathkit-wasm/bin/pathkit.js |
Kevin Lubick | e1b36fe | 2018-08-02 11:30:33 -0400 | [diff] [blame] | 50 | Module not found: Error: Can't resolve 'fs' in '...' |
| 51 | |
| 52 | Then, add the following configuration change to the node section of the config: |
| 53 | |
| 54 | config.node = { |
| 55 | fs: 'empty' |
Kevin Lubick | 30cc00c | 2018-08-03 10:26:00 -0400 | [diff] [blame] | 56 | }; |