Introduce VM feature "enableComponentSrcDataKey" as a config option (#38

)

* Add hot reload

* Fix enableHotReload test

* Fix tests

* Fix tests

* Refactor

* Revert style changes

* Fix socket address

* Fix ws address

test structure

WIP: websocket test

WIP: hot realod websocket test

Remove test

* update docs

* adds tests

* adds component

* WIP: working test on port 3001

* Fix test, not time dependend now

* Move hotReload to config

* Single param for hotReload

* adds config object

* clean up

* fix readme

* formatting

* formatting

* Failing test

* Working test

* Fixing tests

* Fix test

* Update readme

---------

Co-authored-by: Elliot Braem <16282460+elliotBraem@users.noreply.github.com>

README.md

@@ -76,7 +76,13 @@ To support specific features of the VM or an accompanying development server, pr
       "enabled": boolean, // Determines if hot reload is enabled (e.g., true)
       "wss": string // WebSocket server URL to connect to. Optional. Defaults to `ws://${window.location.host}` (e.g., "ws://localhost:3001")
     }
-  }
+  },
+  // Configuration options for the VM
+  "vm": {
+    "features": {
+    	"enableComponentSrcDataKey": boolean, // adds the "data-component" attribute specifying the rendered component's "src"
+		}
+	}
 }
 ```
 

playwright-tests/tests/config.spec.js

@@ -0,0 +1,47 @@
+import { describe, expect, test } from "@playwright/test";
+import { waitForSelectorToBeVisible } from "../testUtils";
+
+async function setupNearSocialViewer(page, src, config) {
+  await page.evaluate(
+    ({ src, config }) => {
+      document.body.innerHTML = `<near-social-viewer src="${src}" config='${JSON.stringify(config)}'></near-social-viewer>`;
+    },
+    { src, config }
+  );
+}
+
+describe("test data-component attribute", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/");
+  });
+
+  test("by default there will be no data-component attribute", async ({
+    page,
+  }) => {
+    await page.evaluate(() => {
+      const src = "zavodil.near/widget/Lido";
+
+      document.body.innerHTML = `<near-social-viewer src="${src}"></near-social-viewer>`;
+    });
+
+    const dataComponentElements = page.locator("div[data-component]");
+    await expect(dataComponentElements).toHaveCount(0);
+  });
+
+  test("with the correct configuration there will be a data-component property in the components", async ({
+    page,
+  }) => {
+    const src = "zavodil.near/widget/Lido";
+		const config = { "vm": { "features": {"enableComponentSrcDataKey": true }}}
+
+    await setupNearSocialViewer(page, src, config);
+
+    await waitForSelectorToBeVisible(page, "div[data-component]");
+    const dataComponentValue = await page.getAttribute(
+      "div[data-component]",
+      "data-component"
+    );
+
+    expect(dataComponentValue).toBe(src);
+  });
+});

playwright-tests/tests/network.spec.js

@@ -14,8 +14,10 @@ test("should use default network (mainnet) when network value not provided", asy
   await page.goto("/");
 
   await page.evaluate(() => {
+		const config = JSON.stringify({ "vm": { "features": {"enableComponentSrcDataKey": true }}})
+
     document.body.innerHTML = `
-    <near-social-viewer src="devs.near/widget/default"></near-social-viewer>
+    <near-social-viewer src="devs.near/widget/default" config='${config}'></near-social-viewer>
     `;
   });
 
@@ -53,8 +55,10 @@ test("should use testnet network when network attribute is provided", async ({
 
   // Set the netork attribute to testnet
   await page.evaluate(() => {
+		const config = JSON.stringify({ "vm": { "features": {"enableComponentSrcDataKey": true }}})
+
     document.body.innerHTML = `
-    <near-social-viewer src="neardevs.testnet/widget/default" network="testnet"></near-social-viewer>
+    <near-social-viewer src="neardevs.testnet/widget/default" network="testnet" config='${config}'></near-social-viewer>
     `;
   });
 

playwright-tests/tests/router.spec.js

@@ -11,8 +11,10 @@ test("Verify default route loads successfully and displays expected content", as
   await page.goto("/");
 
   await page.evaluate(() => {
+		const config = JSON.stringify({ "vm": { "features": {"enableComponentSrcDataKey": true }}})
+
     document.body.innerHTML = `
-    <near-social-viewer src="devs.near/widget/default" initialprops='{"message": "hello world!"}'></near-social-viewer>
+    <near-social-viewer src="devs.near/widget/default" initialprops='{"message": "hello world!"}' config='${config}'></near-social-viewer>
     `;
   });
 
@@ -53,8 +55,8 @@ test("should load the other routes with params when provided", async ({
 
   // Verify route loads
   await waitForSelectorToBeVisible(
-    page,
-    'div[data-component="efiz.near/widget/Node"]'
+    page, 
+		'body > near-social-viewer > div > div > div > div'
   );
 
   // Verify provided props are active
@@ -68,8 +70,10 @@ test("should be possible to set initialProps and src widget for the root path",
 }) => {
   await page.goto("/");
   await page.evaluate(() => {
+		const config = JSON.stringify({ "vm": { "features": {"enableComponentSrcDataKey": true }}})
+
     document.body.innerHTML = `
-    <near-social-viewer src="devhub.near/widget/app" initialProps='{"page": "community", "handle": "webassemblymusic"}'></near-social-viewer>
+    <near-social-viewer src="devhub.near/widget/app" initialProps='{"page": "community", "handle": "webassemblymusic"}' config='${config}'></near-social-viewer>
     `;
   });
   await expect(

playwright-tests/tests/rpc.spec.js

@@ -14,8 +14,11 @@ test("Verify default RPC is called when value not provided", async ({
   await page.goto("/");
 
   await page.evaluate(() => {
+		const config = JSON.stringify({ "vm": { "features": {"enableComponentSrcDataKey": true }}})
+
+
     document.body.innerHTML = `
-    <near-social-viewer src="devs.near/widget/default"></near-social-viewer>
+    <near-social-viewer src="devs.near/widget/default" config='${config}'></near-social-viewer>
     `;
   });
 
@@ -62,8 +65,10 @@ test("Verify custom RPC is called when provided", async ({ page }) => {
 
   // Set the rpc attribute to a custom rpc value
   await page.evaluate((url) => {
+		const config = JSON.stringify({ "vm": { "features": {"enableComponentSrcDataKey": true }}})
+
     document.body.innerHTML = `
-    <near-social-viewer src="devs.near/widget/default" rpc="${url}"></near-social-viewer>
+    <near-social-viewer src="devs.near/widget/default" rpc="${url}" config='${config}'></near-social-viewer>
     `;
   }, CUSTOM_RPC_URL);
 

src/App.js

@@ -82,7 +82,7 @@ function App(props) {
         },
       },
       features: {
-        enableComponentSrcDataKey: true,
+        enableComponentSrcDataKey: config?.vm?.features?.enableComponentSrcDataKey,
       },
       config: {
         defaultFinality: undefined,