quadstore works with webpack. closes #1

retog · Oct 24, 2020 · 23e45ec · 23e45ec
1 parent 4ad624e
commit 23e45ec
Show file tree

Hide file tree

Showing 8 changed files with 280 additions and 139 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,4 @@
 /node_modules/
 /public/build/
-
+/pubic/bundle.js
 .DS_Store
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "license": "ISC",
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack",
-    "dev": "webpack-dev-server --content-base public",
+    "dev": "webpack serve",
     "deploy-app": "patchboot-install public/build/bundle.js 'patchgraph' 'collaboratively create a knowledge graph in scuttleverse'",
     "deploy": "run-s build deploy-app"
   },
@@ -22,18 +22,22 @@
     "webpack-cli": "^4.1.0",
     "webpack-dev-server": "^3.11.0",
     "svelte": "3.29.0",
-    "web-ext": "^5.3.0"
-  },
-  "dependencies": {
+    "web-ext": "^5.3.0",
     "@rdfjs/data-model": "git+https://github.com/tpluscode/data-model.git#named-exports",
     "@rdfjs/dataset": "^1.0.1",
     "@triply/yasqe": "4.1.3",
     "@triply/yasr": "4.1.3",
     "memdown": "^5.1.0",
     "n3": "^1.6.3",
-    "quadstore": "v7.0.1-alpha.11",
+    "level-js": "^5.0.2",
+    "quadstore": "^7.0.1-alpha.12",
     "rdfjs-svelte": "0.9.7",
     "sirv-cli": "^1.0.8",
     "svelte-spa-router": "3.0.3"
+  },
+  "dependencies": {},
+  "engineStrict": true,
+  "engines": {
+    "node": ">=10.0.0"
   }
 }
diff --git a/public/bundle.js b/public/bundle.js
diff --git a/public/index.html b/public/index.html
@@ -8,9 +8,7 @@
 
 	<link rel='icon' type='image/png' href='/favicon.png'>
 	<link rel='stylesheet' href='/global.css'>
-	<link rel='stylesheet' href='/build/bundle.css'>
-	<link rel='stylesheet' href='/build/extra.css'>
-	<script defer src='/build/bundle.js'></script>
+	<script defer src='./bundle.js'></script>
 </head>
 
 <body>

diff --git a/src/Sparql.svelte b/src/Sparql.svelte
@@ -2,33 +2,52 @@
   import YASQE from '@triply/yasqe'
   import YASR from '@triply/yasr'
   import {afterUpdate} from 'svelte'
-  import {RdfStore} from 'quadstore'
+  import {Quadstore} from 'quadstore'
   import * as dataFactory from '@rdfjs/data-model'
-  import memdown from 'memdown'
+  import leveljs from 'level-js';
 
-  const db = memdown()
 
-  const opts = {
-    backend: db,
-    dataFactory 
-  }
+  const main = async () => {
+    console.log('Ok, if we\'re here the browser has loaded everything correctly');
+    console.log('lelevjs', leveljs)
+    const backend = leveljs('quadstore')
+    const store = new Quadstore({
+      dataFactory,
+      backend: leveljs('quadstore'),
+    });
+    console.log('We have instantiated the store');
+    await store.open();
+    console.log('We have opened the store');
+    await store.put(dataFactory.quad(
+      dataFactory.namedNode('http://example.com/theanswer'),
+      dataFactory.namedNode('http://example.com/is'),
+      dataFactory.literal('42', dataFactory.namedNode('https://www.w3.org/2001/XMLSchema#interger')),
+    ));
+    console.log('We have added a quad');
+    const results = await store.get({});
+    console.log('We have queried the store and got the following quads', results.items);
 
-  const store = new RdfStore(opts);
-
-  const quads = [];
-  for (let i = 0; i < 20; i++) {
-    quads.push(
-      quad(
-        namedNode("http://ex.com/s" + i),
-        namedNode("http://ex.com/p" + i),
-        namedNode("http://ex.com/o" + i)/*,
-        namedNode("http://ex.com/g")*/
-      )
-    );
-  }
-  store.put(quads).then(() => {
+    for (let i = 0; i < 20; i++) {
+      await store.put(
+        dataFactory.quad(
+          dataFactory.namedNode("http://ex.com/s" + i),
+          dataFactory.namedNode("http://ex.com/p" + i),
+          dataFactory.namedNode("http://ex.com/o" + i),
+          dataFactory.namedNode("http://ex.com/g")
+        )
+      );
+    }
+    
     console.log("Put succeded.");
+    
+    await store.close();
+    console.log('We have closed the store');
+  };
+
+  main().catch((err) => {
+    console.error(err);
   });
+
   
 
   let queryElement

diff --git a/src/main.js b/src/main.js
@@ -1,7 +1,9 @@
 import App from './App.svelte';
 
+const target = typeof variable === 'undefined' ? document.body : root;
+
 const app = new App({
-	target: root
+  target
 });
 
 export default app;
diff --git a/webpack.config.js b/webpack.config.js
@@ -48,5 +48,17 @@ module.exports = {
 	plugins: [
 
 	],
-	devtool: prod ? false: 'source-map'
+  devtool: prod ? false: 'source-map',
+  devServer: {
+    contentBase: path.join(__dirname, 'public'),
+  },
+  target: 'web',
+  externals: [
+    (context, request, callback) => {
+      if (request.startsWith('_webpack_ignored_')) {
+        return callback(null, 'commonjs2 ' + request);
+      }
+      callback();
+    },
+  ]
 };