graphwise-reactodia 0.0.1-TR14 → 0.0.1-TR15

package/dist/cjs/graphwise-reactodia.cjs.entry.js

@@ -31894,6 +31894,14 @@ const GraphwiseReactodia = class {
          * UI language code (e.g. `en`, `fr`) for the Reactodia interface. Defaults to English.
          */
         this.language = LanguageKey.EN;
+        /**
+         * `connectedCallback` and the watchers can run before all props are set: when the component's
+         * code is already loaded, the instance is created as soon as the
+         * element is attached, and every prop set after that triggers its watcher. Rendering at that
+         * point would initialise the graph without all props. `componentDidLoad` runs once the initial
+         * props are set, so we use it to determine when it's safe to render.
+         */
+        this.isComponentLoaded = false;
     }
     onCurrentRepositoryChange() {
         this.renderGraph();
@@ -31909,9 +31917,11 @@ const GraphwiseReactodia = class {
         this.renderGraph(true);
     }
     connectedCallback() {
-        if (this.config) {
-            this.renderGraph();
-        }
+        this.renderGraph();
+    }
+    componentDidLoad() {
+        this.isComponentLoaded = true;
+        this.renderGraph();
     }
     disconnectedCallback() {
         if (this.reactRoot) {
@@ -31920,10 +31930,13 @@ const GraphwiseReactodia = class {
         }
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'b2e584a0f1de975692197473d516219a7aa0f42f' }));
+        return (index$1.h(index$1.Host, { key: 'a03aad892cb1947ab2426d77b3229e1324776c2c' }));
     }
     renderGraph(isReloading) {
         var _a;
+        if (!this.isComponentLoaded) {
+            return;
+        }
         if (!this.currentRepository) {
             throw new Error('currentRepository is required');
         }

package/dist/collection/components/graphwise-reactodia/graphwise-reactodia.js

@@ -19,6 +19,14 @@ export class GraphwiseReactodia {
          * UI language code (e.g. `en`, `fr`) for the Reactodia interface. Defaults to English.
          */
         this.language = LanguageKey.EN;
+        /**
+         * `connectedCallback` and the watchers can run before all props are set: when the component's
+         * code is already loaded, the instance is created as soon as the
+         * element is attached, and every prop set after that triggers its watcher. Rendering at that
+         * point would initialise the graph without all props. `componentDidLoad` runs once the initial
+         * props are set, so we use it to determine when it's safe to render.
+         */
+        this.isComponentLoaded = false;
     }
     onCurrentRepositoryChange() {
         this.renderGraph();
@@ -34,9 +42,11 @@ export class GraphwiseReactodia {
         this.renderGraph(true);
     }
     connectedCallback() {
-        if (this.config) {
-            this.renderGraph();
-        }
+        this.renderGraph();
+    }
+    componentDidLoad() {
+        this.isComponentLoaded = true;
+        this.renderGraph();
     }
     disconnectedCallback() {
         if (this.reactRoot) {
@@ -45,10 +55,13 @@ export class GraphwiseReactodia {
         }
     }
     render() {
-        return (h(Host, { key: 'b2e584a0f1de975692197473d516219a7aa0f42f' }));
+        return (h(Host, { key: 'a03aad892cb1947ab2426d77b3229e1324776c2c' }));
     }
     renderGraph(isReloading) {
         var _a;
+        if (!this.isComponentLoaded) {
+            return;
+        }
         if (!this.currentRepository) {
             throw new Error('currentRepository is required');
         }

package/dist/collection/pages/graphwise-reactodia/main.js

@@ -2,7 +2,13 @@
 // result. The shape has to match what the provider asks for: SELECT/ASK queries are parsed with
 // `response.json()` and would blow up on an empty body, CONSTRUCT/DESCRIBE queries are parsed as
 // turtle, where an empty body is a valid (empty) graph.
+//
+// The queries are recorded, so the tests can tell which provider settings built them.
+const sparqlQueries = [];
+window.sparqlQueries = sparqlQueries;
+
 async function stubQueryFunction(params) {
+  sparqlQueries.push(params.body);
   const accept = params.headers?.['Accept'] ?? '';
   if (accept.includes('sparql-results+json')) {
     const body = JSON.stringify({head: {vars: []}, results: {bindings: []}, boolean: false});
@@ -33,6 +39,34 @@ function setProviderSettings() {
   reactodia.providerSettings = OWL_RDFS_SETTINGS;
 }
 
+// A runtime change goes through the `providerSettings` prop. The extra prefix marks the queries built
+// with the changed settings.
+function changeProviderSettings() {
+  reactodia.providerSettings = {
+    ...OWL_RDFS_SETTINGS,
+    defaultPrefix: `${OWL_RDFS_SETTINGS.defaultPrefix}\nPREFIX changed: <http://example.com/changed#>\n`,
+  };
+}
+
+// Replaces the element with a new one the way a framework such as Angular renders it: attached first, then
+// the props set one by one. The component code is already loaded by then, so the component is initialized
+// before it has any of its props.
+function attachThenSetProps(order) {
+  const props = {
+    config: {queryFunction: stubQueryFunction, seedIris: SEED_NODES},
+    currentRepository: 'repo-a',
+    providerSettings: OWL_RDFS_SETTINGS,
+    language: 'fr',
+    theme: 'light',
+  };
+  const element = document.createElement('graphwise-reactodia');
+  element.dataset.test = 'reactodia';
+  document.querySelector('graphwise-reactodia').replaceWith(element);
+  order.forEach((prop) => {
+    element[prop] = props[prop];
+  });
+}
+
 function setSeed() {
   reactodia.config = {...reactodia.config, seedIris: SEED_NODES};
 }

package/dist/esm/graphwise-reactodia.entry.js

@@ -31892,6 +31892,14 @@ const GraphwiseReactodia = class {
          * UI language code (e.g. `en`, `fr`) for the Reactodia interface. Defaults to English.
          */
         this.language = LanguageKey.EN;
+        /**
+         * `connectedCallback` and the watchers can run before all props are set: when the component's
+         * code is already loaded, the instance is created as soon as the
+         * element is attached, and every prop set after that triggers its watcher. Rendering at that
+         * point would initialise the graph without all props. `componentDidLoad` runs once the initial
+         * props are set, so we use it to determine when it's safe to render.
+         */
+        this.isComponentLoaded = false;
     }
     onCurrentRepositoryChange() {
         this.renderGraph();
@@ -31907,9 +31915,11 @@ const GraphwiseReactodia = class {
         this.renderGraph(true);
     }
     connectedCallback() {
-        if (this.config) {
-            this.renderGraph();
-        }
+        this.renderGraph();
+    }
+    componentDidLoad() {
+        this.isComponentLoaded = true;
+        this.renderGraph();
     }
     disconnectedCallback() {
         if (this.reactRoot) {
@@ -31918,10 +31928,13 @@ const GraphwiseReactodia = class {
         }
     }
     render() {
-        return (h(Host, { key: 'b2e584a0f1de975692197473d516219a7aa0f42f' }));
+        return (h(Host, { key: 'a03aad892cb1947ab2426d77b3229e1324776c2c' }));
     }
     renderGraph(isReloading) {
         var _a;
+        if (!this.isComponentLoaded) {
+            return;
+        }
         if (!this.currentRepository) {
             throw new Error('currentRepository is required');
         }

package/dist/graphwise-reactodia/graphwise-reactodia.esm.js

@@ -1 +1 @@
-import{p as e,b as r}from"./p-Cypw7ydc.js";export{s as setNonce}from"./p-Cypw7ydc.js";import{g as t}from"./p-CalY52z6.js";(()=>{const r=import.meta.url,t={};return""!==r&&(t.resourcesUrl=new URL(".",r).href),e(t)})().then((async e=>(await t(),r([["p-0cb06f14",[[0,"graphwise-reactodia",{currentRepository:[1,"current-repository"],config:[16],language:[1],providerSettings:[16,"provider-settings"],theme:[1]},null,{currentRepository:["onCurrentRepositoryChange"],language:["onLanguageOrSettingsChange"],providerSettings:["onLanguageOrSettingsChange"],theme:["onThemeChange"]}]]]],e))));
+import{p as e,b as r}from"./p-Cypw7ydc.js";export{s as setNonce}from"./p-Cypw7ydc.js";import{g as t}from"./p-CalY52z6.js";(()=>{const r=import.meta.url,t={};return""!==r&&(t.resourcesUrl=new URL(".",r).href),e(t)})().then((async e=>(await t(),r([["p-a2c710e4",[[0,"graphwise-reactodia",{currentRepository:[1,"current-repository"],config:[16],language:[1],providerSettings:[16,"provider-settings"],theme:[1]},null,{currentRepository:["onCurrentRepositoryChange"],language:["onLanguageOrSettingsChange"],providerSettings:["onLanguageOrSettingsChange"],theme:["onThemeChange"]}]]]],e))));