Adds a web build to Oxigraph JS

Generates archives on build & release

.github/workflows/artifacts.yml

@@ -136,6 +136,19 @@ jobs:
           name: pyoxigraph_wheel_x86_64_windows
           path: target/wheels/*.whl
 
+  npm_tarball:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - run: rustup update
+      - run: cargo install wasm-pack
+      - run: npm run pack
+        working-directory: ./js
+      - uses: actions/upload-artifact@v2
+        with:
+          name: oxigraph_wasm_npm
+          path: js/*.tgz
+
   docker:
     runs-on: ubuntu-latest
     steps:

.github/workflows/release.yml

@@ -157,12 +157,14 @@ jobs:
       - run: cargo install wasm-pack
       - run: npm install
         working-directory: ./js
-      - run: npm run build
-        working-directory: ./js
       - run: npm run release
         working-directory: ./js
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - run: npm run pack
+      - uses: softprops/action-gh-release@v1
+        with:
+          files: js/*.tgz
 
   publish_python_doc:
     runs-on: ubuntu-latest

js/README.md

@@ -13,31 +13,75 @@ Oxigraph for JavaScript is a work in progress and currently offers a simple in-m
 
 The store is also able to load RDF serialized in [Turtle](https://www.w3.org/TR/turtle/), [TriG](https://www.w3.org/TR/trig/), [N-Triples](https://www.w3.org/TR/n-triples/), [N-Quads](https://www.w3.org/TR/n-quads/) and [RDF/XML](https://www.w3.org/TR/rdf-syntax-grammar/).
 
+It is distributed using a [a NPM package](https://www.npmjs.com/package/oxigraph) that should work with Node.JS 12+ and modern web browsers compatible with WebAssembly.
 
-It is distributed using a [a NPM package](https://www.npmjs.com/package/oxigraph) that should work with nodeJS 12+.
-
+To install:
 ```bash
 npm install oxigraph
 ```
 
+To load with Node.JS:
 ```js
 const oxigraph = require('oxigraph');
 ```
 
-## Example
+or with ES modules:
+```js
+import oxigraph from './node_modules/oxigraph/node.js';
+```
+
+To load on an HTML web page:
+```html
+<script type="module">
+    import init, * as oxigraph from './node_modules/oxigraph/web.js'
+
+    (async function () {
+        await init(); // Required to compile the WebAssembly code.
+
+        // We can use here Oxigraph methods
+    })()
+</script>
+```
+
+## Node.JS Example
+
+Insert the triple `<http://example/> <http://schema.org/name> "example"` and log the name of `<http://example/>` in  SPARQL:
 
-Insert the triple `<http://example/> <http://schema.org/name> "example"` and log the name of `<http://example/>` in SPARQL:
 ```js
 const oxigraph = require('oxigraph');
 const store = new oxigraph.Store();
 const ex = oxigraph.namedNode("http://example/");
 const schemaName = oxigraph.namedNode("http://schema.org/name");
 store.add(oxigraph.triple(ex, schemaName, oxigraph.literal("example")));
-for (binding of store.query("SELECT ?name WHERE { <http://example/> <http://schema.org/name> ?name }")) {
+for (const binding of store.query("SELECT ?name WHERE { <http://example/> <http://schema.org/name> ?name }")) {
     console.log(binding.get("name").value);
 }
 ```
 
+## Web Example
+
+Insert the triple `<http://example/> <http://schema.org/name> "example"` and log the name of `<http://example/>` in
+SPARQL:
+
+```html
+
+<script type="module">
+    import init, * as oxigraph from './node_modules/oxigraph/web.js'
+
+    (async function () {
+        await init(); // Required to compile the WebAssembly.
+
+        const store = new oxigraph.Store();
+        const ex = oxigraph.namedNode("http://example/");
+        const schemaName = oxigraph.namedNode("http://schema.org/name");
+        store.add(oxigraph.triple(ex, schemaName, oxigraph.literal("example")));
+        for (const binding of store.query("SELECT ?name WHERE { <http://example/> <http://schema.org/name> ?name }")) {
+            console.log(binding.get("name").value);
+        }
+    })()
+</script>
+```
+
 ## API
 
 Oxigraph currently provides a simple JS API.

js/build_package.js

@@ -0,0 +1,31 @@
+#! /usr/bin/env node
+
+const fs = require('fs')
+
+// We copy file to the new directory
+fs.mkdirSync('pkg')
+for (const file of fs.readdirSync('./pkg-web')) {
+  fs.copyFileSync('./pkg-web/' + file, './pkg/' + file)
+}
+for (const file of fs.readdirSync('./pkg-node')) {
+  fs.copyFileSync('./pkg-node/' + file, './pkg/' + file)
+}
+
+const pkg = JSON.parse(fs.readFileSync('./pkg/package.json'))
+pkg.name = 'oxigraph'
+pkg.main = 'node.js'
+pkg.browser = 'web.js'
+pkg.files = [
+  '*.{js,wasm,d.ts}'
+]
+pkg.homepage = 'https://github.com/oxigraph/oxigraph/tree/master/js'
+pkg.bugs = {
+  url: 'https://github.com/oxigraph/oxigraph/issues'
+}
+pkg.collaborators = undefined
+pkg.repository = {
+  type: 'git',
+  url: 'https://github.com/oxigraph/oxigraph.git',
+  directory: 'js'
+}
+fs.writeFileSync('./pkg/package.json', JSON.stringify(pkg, null, 2))

js/package.json

@@ -8,8 +8,14 @@
     "standard": "^16.0.0"
   },
   "scripts": {
-    "test": "standard test/* && wasm-pack build --dev --target nodejs && mocha",
-    "build": "wasm-pack build --release --target nodejs && sed -i 's/oxigraph_js/oxigraph/g' pkg/package.json",
-    "release": "wasm-pack pack && wasm-pack publish"
+    "test": "standard && wasm-pack build --debug --target nodejs && mocha",
+    "build": "rm -rf pkg && wasm-pack build --release --target web --out-name web && mv pkg pkg-web && wasm-pack build --release --target nodejs --out-name node && mv pkg pkg-node && node build_package.js && rm -r pkg-web && rm -r pkg-node",
+    "release": "npm run build && npm publish ./pkg",
+    "pack": "npm run build && npm pack ./pkg"
+  },
+  "standard": {
+    "ignore": [
+      "pkg*"
+    ]
   }
 }