Merge pull request #1107 from lowdefy/link-component

Implementation of next link on server-dev

packages/docs/concepts/custom-blocks.yaml

@@ -132,11 +132,11 @@ _ref:
                 - `input: object`: When the link is clicked, pass data as the input object to the next Lowdefy page.  Can only be used with pageId link and newTab false. See [Input]( TODO: Link to input page? ).
                 - `newTab: boolean`: When the link is clicked, open the page in a new browser tab.
                 - `pageId: string`: When the link is clicked, route to the provided Lowdefy page.
-                - `rel: string`: Overwrite `<a/>` tag  property.
+                - `rel: string`: The relationship of the linked URL as space-separated link types.
                 - `replace: boolean`: Prevent adding a new entry into browser history by replacing the url instead of pushing into history. Can only be used with pageId link and newTab false.
                 - `scroll: boolean`: Disable scrolling to the top of the page after page transition. Can only be used with pageId link and newTab false.
                 - `url: string`: When the link is clicked, route to an external url.
-                - `urlQuery: object`: When the link is clicked, pass data as a url query to the next Lowdefy page. See [url query]( TODO: Link to url query page? ).
+                - `urlQuery: object`: When the link is clicked, pass data as a url query to the next page. See [url query]( TODO: Link to url query page? ).
             - `content: object`: Passed to `container` and `context` block categories. The `content` object with methods to render sub blocks into content areas. The method name is the same as the area key, for example, 'content.content()` renders a blocks default `content` area.
             - `events: object`: All events defined on the block in the Lowdefy app config.
               - `[event_key]: object`: Event keys gives a handle name to the event details.

packages/docs/templates/blog.yaml.njk

@@ -183,7 +183,7 @@ areas:
                 type: Anchor
                 properties:
                   icon: LinkOutlined
-                  href: /{{ item.pageId }}
+                  pageId: {{ item.pageId }}
                   title: {{ item.title }}
               {% endfor %}
 

packages/docs/templates/footer.yaml.njk

@@ -250,7 +250,7 @@
         size: auto
       properties:
         title: Edit this page on Github
-        href: https://github.com/lowdefy/lowdefy/blob/main/packages/docs/{{ filePath }}
+        url: https://github.com/lowdefy/lowdefy/blob/main/packages/docs/{{ filePath }}
         newTab: true
 {% endif %}
 
@@ -474,43 +474,43 @@
           type: Anchor
           properties:
             title: Why Lowdefy
-            href: https://lowdefy.com
-            ref: 'noopener'
+            url: https://lowdefy.com
+            rel: 'noopener'
         - id: tutorial_anchor
           type: Anchor
           properties:
             title: Quick Start Tutorial
-            href: /tutorial-development-server
+            pageId: /tutorial-development-server
             rel: 'noopener'
         - id: netlify_anchor
           type: Anchor
           properties:
             title: Deploy to Netlify
-            href: /tutorial-start
+            pageId: /tutorial-start
             rel: 'noopener'
         - id: concepts_anchor
           type: Anchor
           properties:
             title: How Lowdefy Works
-            href: /overview
+            pageId: /overview
             rel: 'noopener'
         - id: github_anchor
           type: Anchor
           properties:
             title: Github Repository
-            href: https://github.com/lowdefy/lowdefy
+            url: https://github.com/lowdefy/lowdefy
             newTab: true
         - id: changelog_anchor
           type: Anchor
           properties:
             title: Version Changelog
-            href: https://github.com/lowdefy/lowdefy/blob/main/CHANGELOG.md
+            url: https://github.com/lowdefy/lowdefy/blob/main/CHANGELOG.md
             newTab: true
         - id: license_anchor
           type: Anchor
           properties:
             title: Apache-2.0 License
-            href: https://github.com/lowdefy/lowdefy/blob/main/LICENSE
+            url: https://github.com/lowdefy/lowdefy/blob/main/LICENSE
             newTab: true
     - id: footer_logo_box_sm
       type: Box

packages/engine/src/createLink.js

@@ -30,25 +30,34 @@ function createLink({ backLink, disabledLink, lowdefy, newOriginLink, noLink, sa
       // Cannot set input or urlQuery on back
       return backLink(props);
     }
-    const lowdefyUrlQuery = type.isNone(props.urlQuery)
-      ? ''
-      : `?${urlQueryFn.stringify(props.urlQuery)}`;
+    const query = type.isNone(props.urlQuery) ? '' : `${urlQueryFn.stringify(props.urlQuery)}`;
     if (props.home === true) {
-      lowdefy.inputs[`page:${lowdefy.home.pageId}`] = props.input || {};
+      const pathname = `/${lowdefy.home.configured ? '' : lowdefy.home.pageId}`;
       return sameOriginLink({
-        href: `/${lowdefy.home.configured ? '' : lowdefy.home.pageId}${lowdefyUrlQuery}`,
         ...props,
+        pathname,
+        query,
+        setInput: () => {
+          lowdefy.inputs[`page:${lowdefy.home.pageId}`] = props.input || {};
+        },
       });
     }
     if (type.isString(props.pageId)) {
-      lowdefy.inputs[`page:${props.pageId}`] = props.input || {};
-      return sameOriginLink({ href: `/${props.pageId}${lowdefyUrlQuery}`, ...props });
+      return sameOriginLink({
+        ...props,
+        pathname: `/${props.pageId}`,
+        query,
+        setInput: () => {
+          lowdefy.inputs[`page:${props.pageId}`] = props.input || {};
+        },
+      });
     }
     if (type.isString(props.url)) {
       const protocol = props.url.includes(':') ? '' : 'https://';
       return newOriginLink({
-        href: `${protocol}${props.url}${lowdefyUrlQuery}`,
         ...props,
+        url: `${protocol}${props.url}`,
+        query,
       });
     }
     return noLink(props);

packages/engine/test/createLink.test.js

@@ -30,23 +30,37 @@ test('createLink, link with pageId', () => {
   expect(mockDisabledLink.mock.calls).toEqual([]);
   expect(mockNewOriginLink.mock.calls).toEqual([]);
   expect(mockNoLink.mock.calls).toEqual([]);
-  expect(mockSameOriginLink.mock.calls).toEqual([
-    [
-      {
-        href: '/page_1',
-        pageId: 'page_1',
-      },
-    ],
-    [
-      {
-        href: '/page_1?p=3',
-        pageId: 'page_1',
-        urlQuery: {
-          p: 3,
+  expect(mockSameOriginLink.mock.calls).toMatchInlineSnapshot(`
+    Array [
+      Array [
+        Object {
+          "pageId": "page_1",
+          "pathname": "/page_1",
+          "query": "",
+          "setInput": [Function],
         },
-      },
-    ],
-  ]);
+      ],
+      Array [
+        Object {
+          "pageId": "page_1",
+          "pathname": "/page_1",
+          "query": "p=3",
+          "setInput": [Function],
+          "urlQuery": Object {
+            "p": 3,
+          },
+        },
+      ],
+    ]
+  `);
+  mockSameOriginLink.mock.calls[0][0].setInput();
+  expect(lowdefy.inputs).toEqual({
+    'page:page_1': {},
+  });
+  mockSameOriginLink.mock.calls[1][0].setInput();
+  expect(lowdefy.inputs).toEqual({
+    'page:page_1': {},
+  });
 });
 
 test('createLink, link with pageId new tab', () => {
@@ -65,25 +79,31 @@ test('createLink, link with pageId new tab', () => {
   expect(mockDisabledLink.mock.calls).toEqual([]);
   expect(mockNewOriginLink.mock.calls).toEqual([]);
   expect(mockNoLink.mock.calls).toEqual([]);
-  expect(mockSameOriginLink.mock.calls).toEqual([
-    [
-      {
-        href: '/page_1',
-        pageId: 'page_1',
-        newTab: true,
-      },
-    ],
-    [
-      {
-        href: '/page_1?p=3',
-        pageId: 'page_1',
-        newTab: true,
-        urlQuery: {
-          p: 3,
+  expect(mockSameOriginLink.mock.calls).toMatchInlineSnapshot(`
+    Array [
+      Array [
+        Object {
+          "newTab": true,
+          "pageId": "page_1",
+          "pathname": "/page_1",
+          "query": "",
+          "setInput": [Function],
         },
-      },
-    ],
-  ]);
+      ],
+      Array [
+        Object {
+          "newTab": true,
+          "pageId": "page_1",
+          "pathname": "/page_1",
+          "query": "p=3",
+          "setInput": [Function],
+          "urlQuery": Object {
+            "p": 3,
+          },
+        },
+      ],
+    ]
+  `);
 });
 
 test('createLink, link with pageId with inputs', () => {
@@ -102,29 +122,37 @@ test('createLink, link with pageId with inputs', () => {
   expect(mockDisabledLink.mock.calls).toEqual([]);
   expect(mockNewOriginLink.mock.calls).toEqual([]);
   expect(mockNoLink.mock.calls).toEqual([]);
-  expect(mockSameOriginLink.mock.calls).toEqual([
-    [
-      {
-        href: '/page_1',
-        input: {
-          a: 1,
+  expect(mockSameOriginLink.mock.calls).toMatchInlineSnapshot(`
+    Array [
+      Array [
+        Object {
+          "input": Object {
+            "a": 1,
+          },
+          "pageId": "page_1",
+          "pathname": "/page_1",
+          "query": "",
+          "setInput": [Function],
         },
-        pageId: 'page_1',
-      },
-    ],
-    [
-      {
-        href: '/page_2?p=3',
-        input: {
-          a: 2,
+      ],
+      Array [
+        Object {
+          "input": Object {
+            "a": 2,
+          },
+          "pageId": "page_2",
+          "pathname": "/page_2",
+          "query": "p=3",
+          "setInput": [Function],
+          "urlQuery": Object {
+            "p": 3,
+          },
         },
-        pageId: 'page_2',
-        urlQuery: {
-          p: 3,
-        },
-      },
-    ],
-  ]);
+      ],
+    ]
+  `);
+  mockSameOriginLink.mock.calls[0][0].setInput();
+  mockSameOriginLink.mock.calls[1][0].setInput();
   expect(lowdefy.inputs).toEqual({
     'page:page_1': { a: 1 },
     'page:page_2': { a: 2 },
@@ -146,23 +174,25 @@ test('createLink, link with url and protocol', () => {
   expect(mockBackLink.mock.calls).toEqual([]);
   expect(mockDisabledLink.mock.calls).toEqual([]);
   expect(mockNoLink.mock.calls).toEqual([]);
-  expect(mockNewOriginLink.mock.calls).toEqual([
-    [
-      {
-        href: 'http://localhost:8080/test',
-        url: 'http://localhost:8080/test',
-      },
-    ],
-    [
-      {
-        href: 'http://localhost:8080/test?p=3',
-        url: 'http://localhost:8080/test',
-        urlQuery: {
-          p: 3,
+  expect(mockNewOriginLink.mock.calls).toMatchInlineSnapshot(`
+    Array [
+      Array [
+        Object {
+          "query": "",
+          "url": "http://localhost:8080/test",
         },
-      },
-    ],
-  ]);
+      ],
+      Array [
+        Object {
+          "query": "p=3",
+          "url": "http://localhost:8080/test",
+          "urlQuery": Object {
+            "p": 3,
+          },
+        },
+      ],
+    ]
+  `);
   expect(mockSameOriginLink.mock.calls).toEqual([]);
 });
 
@@ -181,25 +211,27 @@ test('createLink, link with url new tab and protocol', () => {
   expect(mockBackLink.mock.calls).toEqual([]);
   expect(mockDisabledLink.mock.calls).toEqual([]);
   expect(mockNoLink.mock.calls).toEqual([]);
-  expect(mockNewOriginLink.mock.calls).toEqual([
-    [
-      {
-        href: 'http://localhost:8080/test',
-        url: 'http://localhost:8080/test',
-        newTab: true,
-      },
-    ],
-    [
-      {
-        href: 'http://localhost:8080/test?p=3',
-        url: 'http://localhost:8080/test',
-        urlQuery: {
-          p: 3,
+  expect(mockNewOriginLink.mock.calls).toMatchInlineSnapshot(`
+    Array [
+      Array [
+        Object {
+          "newTab": true,
+          "query": "",
+          "url": "http://localhost:8080/test",
         },
-        newTab: true,
-      },
-    ],
-  ]);
+      ],
+      Array [
+        Object {
+          "newTab": true,
+          "query": "p=3",
+          "url": "http://localhost:8080/test",
+          "urlQuery": Object {
+            "p": 3,
+          },
+        },
+      ],
+    ]
+  `);
   expect(mockSameOriginLink.mock.calls).toEqual([]);
 });
 
@@ -218,25 +250,27 @@ test('createLink, link with url and no protocol', () => {
   expect(mockBackLink.mock.calls).toEqual([]);
   expect(mockDisabledLink.mock.calls).toEqual([]);
   expect(mockNoLink.mock.calls).toEqual([]);
-  expect(mockNewOriginLink.mock.calls).toEqual([
-    [
-      {
-        href: 'https://external.com/test',
-        url: 'external.com/test',
-        newTab: true,
-      },
-    ],
-    [
-      {
-        href: 'https://external.com/test?p=3',
-        url: 'external.com/test',
-        urlQuery: {
-          p: 3,
+  expect(mockNewOriginLink.mock.calls).toMatchInlineSnapshot(`
+    Array [
+      Array [
+        Object {
+          "newTab": true,
+          "query": "",
+          "url": "https://external.com/test",
         },
-        newTab: true,
-      },
-    ],
-  ]);
+      ],
+      Array [
+        Object {
+          "newTab": true,
+          "query": "p=3",
+          "url": "https://external.com/test",
+          "urlQuery": Object {
+            "p": 3,
+          },
+        },
+      ],
+    ]
+  `);
   expect(mockSameOriginLink.mock.calls).toEqual([]);
 });
 
@@ -256,23 +290,37 @@ test('createLink, link with home, not configured', () => {
   expect(mockDisabledLink.mock.calls).toEqual([]);
   expect(mockNoLink.mock.calls).toEqual([]);
   expect(mockNewOriginLink.mock.calls).toEqual([]);
-  expect(mockSameOriginLink.mock.calls).toEqual([
-    [
-      {
-        home: true,
-        href: '/home',
-      },
-    ],
-    [
-      {
-        home: true,
-        href: '/home?p=3',
-        urlQuery: {
-          p: 3,
+  expect(mockSameOriginLink.mock.calls).toMatchInlineSnapshot(`
+    Array [
+      Array [
+        Object {
+          "home": true,
+          "pathname": "/home",
+          "query": "",
+          "setInput": [Function],
         },
-      },
-    ],
-  ]);
+      ],
+      Array [
+        Object {
+          "home": true,
+          "pathname": "/home",
+          "query": "p=3",
+          "setInput": [Function],
+          "urlQuery": Object {
+            "p": 3,
+          },
+        },
+      ],
+    ]
+  `);
+  mockSameOriginLink.mock.calls[0][0].setInput();
+  expect(lowdefy.inputs).toEqual({
+    'page:home': {},
+  });
+  mockSameOriginLink.mock.calls[1][0].setInput();
+  expect(lowdefy.inputs).toEqual({
+    'page:home': {},
+  });
 });
 
 test('createLink, link with home, configured', () => {
@@ -291,23 +339,29 @@ test('createLink, link with home, configured', () => {
   expect(mockDisabledLink.mock.calls).toEqual([]);
   expect(mockNoLink.mock.calls).toEqual([]);
   expect(mockNewOriginLink.mock.calls).toEqual([]);
-  expect(mockSameOriginLink.mock.calls).toEqual([
-    [
-      {
-        home: true,
-        href: '/',
-      },
-    ],
-    [
-      {
-        home: true,
-        href: '/?p=3',
-        urlQuery: {
-          p: 3,
+  expect(mockSameOriginLink.mock.calls).toMatchInlineSnapshot(`
+    Array [
+      Array [
+        Object {
+          "home": true,
+          "pathname": "/",
+          "query": "",
+          "setInput": [Function],
         },
-      },
-    ],
-  ]);
+      ],
+      Array [
+        Object {
+          "home": true,
+          "pathname": "/",
+          "query": "p=3",
+          "setInput": [Function],
+          "urlQuery": Object {
+            "p": 3,
+          },
+        },
+      ],
+    ]
+  `);
 });
 
 test('createLink, link with home new tab, not configured', () => {
@@ -326,19 +380,31 @@ test('createLink, link with home new tab, not configured', () => {
   expect(mockDisabledLink.mock.calls).toEqual([]);
   expect(mockNoLink.mock.calls).toEqual([]);
   expect(mockNewOriginLink.mock.calls).toEqual([]);
-  expect(mockSameOriginLink.mock.calls).toEqual([
-    [{ home: true, href: '/home', newTab: true }],
-    [
-      {
-        home: true,
-        href: '/home?p=3',
-        newTab: true,
-        urlQuery: {
-          p: 3,
+  expect(mockSameOriginLink.mock.calls).toMatchInlineSnapshot(`
+    Array [
+      Array [
+        Object {
+          "home": true,
+          "newTab": true,
+          "pathname": "/home",
+          "query": "",
+          "setInput": [Function],
         },
-      },
-    ],
-  ]);
+      ],
+      Array [
+        Object {
+          "home": true,
+          "newTab": true,
+          "pathname": "/home",
+          "query": "p=3",
+          "setInput": [Function],
+          "urlQuery": Object {
+            "p": 3,
+          },
+        },
+      ],
+    ]
+  `);
 });
 
 test('createLink, link with home with inputs, not configured', () => {
@@ -356,17 +422,22 @@ test('createLink, link with home with inputs, not configured', () => {
   expect(mockDisabledLink.mock.calls).toEqual([]);
   expect(mockNoLink.mock.calls).toEqual([]);
   expect(mockNewOriginLink.mock.calls).toEqual([]);
-  expect(mockSameOriginLink.mock.calls).toEqual([
-    [
-      {
-        home: true,
-        href: '/home',
-        input: {
-          a: 1,
+  expect(mockSameOriginLink.mock.calls).toMatchInlineSnapshot(`
+    Array [
+      Array [
+        Object {
+          "home": true,
+          "input": Object {
+            "a": 1,
+          },
+          "pathname": "/home",
+          "query": "",
+          "setInput": [Function],
         },
-      },
-    ],
-  ]);
+      ],
+    ]
+  `);
+  mockSameOriginLink.mock.calls[0][0].setInput();
   expect(lowdefy.inputs).toEqual({
     'page:home': { a: 1 },
   });

packages/plugins/blocks/blocks-basic/src/blocks/Anchor/examples.yaml

@@ -50,26 +50,26 @@
   properties:
     strong: true
     title: Strong
-- id: properties.href
+- id: properties.url
   type: Anchor
   properties:
-    href: https://lowdefy.com
-- id: properties.href, title and target
+    url: https://lowdefy.com
+- id: properties.url, title and target
   type: Anchor
   properties:
-    href: https://lowdefy.com
+    url: https://lowdefy.com
     newTab: true
     title: New tab Website
-- id: properties.href and target
+- id: properties.pageId and target
   type: Anchor
   properties:
-    href: /Button
+    pageId: /Button
     newTab: true
     title: To Button
-- id: properties.href and rel
+- id: properties.pageId and rel
   type: Anchor
   properties:
-    href: https://lowdefy.com
+    pageId: https://lowdefy.com
     rel: 'noopener'
 - id: properties.style
   type: Anchor

packages/plugins/blocks/blocks-basic/src/blocks/Anchor/schema.json

@@ -4,6 +4,32 @@
     "type": "object",
     "additionalProperties": false,
     "properties": {
+      "ariaLabel": {
+        "type": "string",
+        "description": "Arial-label to apply to link tag."
+      },
+      "back": {
+        "type": "boolean",
+        "description": "When the link is clicked, trigger the browser back."
+      },
+      "home": {
+        "type": "boolean",
+        "description": "When the link is clicked, route to the home page."
+      },
+      "input": {
+        "type": "object",
+        "description": "When the link is clicked, pass data as the input object to the next Lowdefy page.  Can only be used with pageId link and newTab false.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      },
+      "urlQuery": {
+        "type": "object",
+        "description": "When the link is clicked, pass data as a url query to the next page.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      },
       "disabled": {
         "type": "boolean",
         "default": false,
@@ -16,9 +42,13 @@
           "displayType": "icon"
         }
       },
-      "href": {
+      "pageId": {
         "type": "string",
-        "description": "Anchor element href property."
+        "description": "When the link is clicked, route to the provided Lowdefy page."
+      },
+      "url": {
+        "type": "string",
+        "description": "External url to link to when the anchor link is clicked."
       },
       "rel": {
         "type": "string",
@@ -30,10 +60,15 @@
         "default": false,
         "description": "Open link in a new tab when the anchor link is clicked."
       },
-      "strong": {
+      "replace": {
         "type": "boolean",
         "default": false,
-        "description": "Makes the text bold when true."
+        "description": "Prevent adding a new entry into browser history by replacing the url instead of pushing into history. Can only be used with pageId link and newTab false."
+      },
+      "scroll": {
+        "type": "boolean",
+        "default": false,
+        "description": "Disable scrolling to the top of the page after page transition. Can only be used with pageId link and newTab false."
       },
       "style": {
         "type": "object",

packages/server-dev/src/components/App.js

@@ -16,6 +16,7 @@
 
 import React from 'react';
 
+import { urlQuery } from '@lowdefy/helpers';
 import { useRouter } from 'next/router';
 
 import Page from './Page.js';
@@ -23,22 +24,23 @@ import Reload from './Reload.js';
 import setPageId from '../utils/setPageId.js';
 import setupLink from '../utils/setupLink.js';
 import useRootConfig from '../utils/useRootConfig.js';
+import createComponents from './createComponents.js';
 
 const App = ({ lowdefy }) => {
   const router = useRouter();
-  const { data: rootConfig } = useRootConfig();
+  const { data: rootConfig } = useRootConfig(router.basePath);
 
   window.lowdefy = lowdefy;
 
+  lowdefy._internal.router = router;
+  lowdefy._internal.link = setupLink(lowdefy);
+  lowdefy._internal.components = createComponents(lowdefy);
+
+  lowdefy.basePath = lowdefy._internal.router.basePath;
   lowdefy.home = rootConfig.home;
   lowdefy.lowdefyGlobal = rootConfig.lowdefyGlobal;
   lowdefy.menus = rootConfig.menus;
-
-  lowdefy._internal.basePath = router.basePath;
-  lowdefy._internal.pathname = router.pathname;
-  lowdefy._internal.query = router.query;
-  lowdefy._internal.router = router;
-  lowdefy._internal.link = setupLink({ lowdefy });
+  lowdefy.urlQuery = urlQuery.parse(window.location.search.slice(1));
 
   const redirect = setPageId(lowdefy);
   if (redirect) {

packages/server-dev/src/components/LowdefyContext.js

@@ -19,32 +19,30 @@ import React from 'react';
 import callRequest from '../utils/callRequest.js';
 import blockComponents from '../../build/plugins/blocks.js';
 import operators from '../../build/plugins/operatorsClient.js';
-import components from './components.js';
 
-const LowdefyContext = ({ children }) => {
-  const lowdefy = {
-    _internal: {
+const LowdefyContext = ({ children, lowdefy }) => {
+  if (!lowdefy._internal) {
+    lowdefy._internal = {
       blockComponents,
       callRequest,
-      components,
+      components: {},
       document,
       operators,
       updaters: {},
       window,
       displayMessage: ({ content }) => {
-        alert(content);
+        console.log(content);
         return () => undefined;
       },
       link: () => undefined,
-    },
-    contexts: {},
-    inputs: {},
-    lowdefyGlobal: {},
-  };
+    };
+    lowdefy.contexts = {};
+    lowdefy.inputs = {};
+    lowdefy.lowdefyGlobal = {};
+  }
   lowdefy._internal.updateBlock = (blockId) =>
     lowdefy._internal.updaters[blockId] && lowdefy._internal.updaters[blockId]();
-
-  return <>{children(lowdefy)}</>;
+  return <>{children}</>;
 };
 
 export default LowdefyContext;

packages/server-dev/src/components/Page.js

@@ -24,7 +24,7 @@ import usePageConfig from '../utils/usePageConfig.js';
 const LoadingBlock = () => <div>Loading...</div>;
 
 const Page = ({ lowdefy }) => {
-  const { data: pageConfig } = usePageConfig(lowdefy.pageId);
+  const { data: pageConfig } = usePageConfig(lowdefy.pageId, lowdefy.basePath);
   if (!pageConfig) {
     lowdefy._internal.router.replace(`/404`);
     return <LoadingBlock />;

packages/server-dev/src/components/Reload.js

@@ -20,9 +20,9 @@ import useMutateCache from '../utils/useMutateCache.js';
 import waitForRestartedServer from '../utils/waitForRestartedServer.js';
 
 const Reload = ({ children, lowdefy }) => {
-  const mutateCache = useMutateCache();
+  const mutateCache = useMutateCache(lowdefy.basePath);
   useEffect(() => {
-    const sse = new EventSource('/api/reload');
+    const sse = new EventSource(`${lowdefy.basePath}/api/reload`);
 
     sse.addEventListener('reload', () => {
       mutateCache();

packages/server-dev/src/components/block/CategorySwitch.js

@@ -64,12 +64,10 @@ const CategorySwitch = ({ block, Blocks, context, lowdefy }) => {
               setValue: block.setValue,
               triggerEvent: block.triggerEvent,
             })}
-            // TODO: React throws a  basePath warning
-            basePath={lowdefy._internal.basePath}
+            basePath={lowdefy.basePath}
             blockId={block.blockId}
             components={lowdefy._internal.components}
             events={block.eval.events}
-            homePageId={lowdefy.home.pageId}
             key={block.blockId}
             loading={block.loading}
             menus={lowdefy.menus}
@@ -98,11 +96,10 @@ const CategorySwitch = ({ block, Blocks, context, lowdefy }) => {
               registerMethod: block.registerMethod,
               triggerEvent: block.triggerEvent,
             })}
-            basePath={lowdefy._internal.basePath}
+            basePath={lowdefy.basePath}
             blockId={block.blockId}
             components={lowdefy._internal.components}
             events={block.eval.events}
-            homePageId={lowdefy.home.pageId}
             key={block.blockId}
             loading={block.loading}
             menus={lowdefy.menus}

packages/server-dev/src/components/block/Container.js

@@ -65,12 +65,11 @@ const Container = ({ block, Blocks, Component, context, lowdefy }) => {
           registerMethod: block.registerMethod,
           triggerEvent: block.triggerEvent,
         })}
-        basePath={lowdefy._internal.basePath}
+        basePath={lowdefy.basePath}
         blockId={block.blockId}
         components={lowdefy._internal.components}
         content={content}
         events={block.eval.events}
-        homePageId={lowdefy.home.pageId}
         key={block.blockId}
         loading={block.loading}
         menus={lowdefy.menus}

packages/server-dev/src/components/block/List.js

@@ -72,11 +72,10 @@ const List = ({ block, Blocks, Component, context, lowdefy }) => {
           triggerEvent: block.triggerEvent,
           unshiftItem: block.unshiftItem,
         })}
-        basePath={lowdefy._internal.basePath}
+        basePath={lowdefy.basePath}
         blockId={block.blockId}
         components={lowdefy._internal.components}
         events={block.eval.events}
-        homePageId={lowdefy.home.pageId}
         key={block.blockId}
         list={contentList}
         loading={block.loading}

packages/server-dev/src/components/createComponents.js

@@ -14,12 +14,16 @@
   limitations under the License.
 */
 
-import Link from 'next/link';
 import { createIcon } from '@lowdefy/block-utils';
 
+import createLinkComponent from './createLinkComponent.js';
 import icons from '../../build/plugins/icons.js';
 
-export default {
-  Link,
-  Icon: createIcon(icons),
+const createComponents = (lowdefy) => {
+  return {
+    Link: createLinkComponent(lowdefy),
+    Icon: createIcon(icons),
+  };
 };
+
+export default createComponents;

packages/server-dev/src/components/createLinkComponent.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import NextLink from 'next/link';
+import { createLink } from '@lowdefy/engine';
+import { type } from '@lowdefy/helpers';
+
+const createLinkComponent = (lowdefy) => {
+  const backLink = ({ ariaLabel, children, className, id, rel }) => (
+    <a
+      id={id}
+      onClick={() => lowdefy._internal.router.back()}
+      className={className}
+      rel={rel}
+      aria-label={ariaLabel || 'back'}
+    >
+      {type.isFunction(children) ? children(id) : children}
+    </a>
+  );
+  const newOriginLink = ({
+    ariaLabel,
+    children,
+    className,
+    id,
+    newTab,
+    pageId,
+    query,
+    rel,
+    url,
+  }) => {
+    return (
+      <a
+        id={id}
+        aria-label={ariaLabel}
+        className={className}
+        href={`${url}${query ? `?${query}` : ''}`}
+        rel={rel || (newTab && 'noopener noreferrer')}
+        target={newTab && '_blank'}
+      >
+        {type.isFunction(children) ? children(pageId || url || id) : children}
+      </a>
+    );
+  };
+  const sameOriginLink = ({
+    ariaLabel,
+    children,
+    className,
+    id,
+    newTab,
+    pageId,
+    pathname,
+    query,
+    rel,
+    replace,
+    scroll,
+    setInput,
+    url,
+  }) => {
+    if (newTab) {
+      return (
+        // eslint-disable-next-line react/jsx-no-target-blank
+        <a
+          id={id}
+          aria-label={ariaLabel}
+          className={className}
+          href={`${window.location.origin}${lowdefy.basePath}${pathname}${
+            query ? `?${query}` : ''
+          }`}
+          rel={rel || 'noopener noreferrer'}
+          target="_blank"
+        >
+          {type.isFunction(children) ? children(pageId || url || id) : children}
+        </a>
+      );
+    }
+    return (
+      <NextLink href={{ pathname, query }} replace={replace} scroll={scroll}>
+        <a id={id} aria-label={ariaLabel} className={className} rel={rel} onClick={setInput}>
+          {type.isFunction(children) ? children(pageId || url || id) : children}
+        </a>
+      </NextLink>
+    );
+  };
+  const noLink = ({ className, children, id }) => (
+    <span id={id} className={className}>
+      {type.isFunction(children) ? children(id) : children}
+    </span>
+  );
+  return createLink({
+    backLink,
+    lowdefy,
+    newOriginLink,
+    sameOriginLink,
+    noLink,
+    disabledLink: noLink,
+  });
+};
+
+export default createLinkComponent;

packages/server-dev/src/pages/_app.js

@@ -22,12 +22,14 @@ import LowdefyContext from '../components/LowdefyContext.js';
 
 import '../../build/plugins/styles.less';
 
+const lowdefy = {};
+
 function App({ Component, pageProps }) {
   return (
     <ErrorBoundary>
       <Suspense>
-        <LowdefyContext>
-          {(lowdefy) => <Component lowdefy={lowdefy} {...pageProps} />}
+        <LowdefyContext lowdefy={lowdefy}>
+          <Component lowdefy={lowdefy} {...pageProps} />
         </LowdefyContext>
       </Suspense>
     </ErrorBoundary>

packages/server-dev/src/pages/api/request/[pageId]/[requestId].js

@@ -25,6 +25,7 @@ export default async function handler(req, res) {
       throw new Error('Only POST requests are supported.');
     }
     // TODO: configure API context
+    // TODO: configure build directory?
     const apiContext = await createApiContext({
       buildDirectory: './build',
       connections,

packages/server-dev/src/utils/callRequest.js

@@ -16,9 +16,9 @@
 
 import request from './request.js';
 
-function callRequest({ pageId, payload, requestId }) {
+function callRequest(apiContext, { pageId, payload, requestId }) {
   return request({
-    url: `/api/request/${pageId}/${requestId}`,
+    url: `${apiContext.config.basePath}/api/request/${pageId}/${requestId}`,
     method: 'POST',
     body: { payload },
   });

packages/server-dev/src/utils/setPageId.js

@@ -15,18 +15,18 @@
 */
 
 function setPageId(lowdefy) {
-  if (lowdefy._internal.pathname === '/404') {
+  if (lowdefy._internal.router.pathname === `/404`) {
     lowdefy.pageId = '404';
     return false;
   }
-  if (!lowdefy._internal.query.pageId) {
+  if (!lowdefy._internal.router.query.pageId) {
     lowdefy.pageId = lowdefy.home.pageId;
     if (lowdefy.home.configured === false) {
       return true;
     }
     return false;
   }
-  lowdefy.pageId = lowdefy._internal.query.pageId;
+  lowdefy.pageId = lowdefy._internal.router.query.pageId;
   return false;
 }
 

packages/server-dev/src/utils/setupLink.js

@@ -16,29 +16,37 @@
 
 import { createLink } from '@lowdefy/engine';
 
-function setupLink({ lowdefy }) {
+function setupLink(lowdefy) {
   const { router, window } = lowdefy._internal;
-  const sameOriginLink = (path, newTab) => {
+  const backLink = () => router.back();
+  const disabledLink = () => {};
+  const newOriginLink = ({ url, query, newTab }) => {
     if (newTab) {
-      return window.open(`${window.location.origin}${lowdefy.basePath}${path}`, '_blank').focus();
+      return window.open(`${url}${query ? `?${query}` : ''}`, '_blank').focus();
     } else {
-      // Next handles the basePath here.
+      return window.location.assign(`${url}${query ? `?${query}` : ''}`);
+    }
+  };
+  const sameOriginLink = ({ newTab, pathname, query, setInput }) => {
+    if (newTab) {
+      return window
+        .open(
+          `${window.location.origin}${lowdefy.basePath}${pathname}${query ? `?${query}` : ''}`,
+          '_blank'
+        )
+        .focus();
+    } else {
+      setInput();
       return router.push({
-        pathname: path,
-        // TODO: Do we handle urlQuery as a param here?
-        // query: {},
+        pathname,
+        query,
       });
     }
   };
-  const newOriginLink = (path, newTab) => {
-    if (newTab) {
-      return window.open(path, '_blank').focus();
-    } else {
-      return (window.location.href = path);
-    }
+  const noLink = () => {
+    throw new Error(`Invalid Link.`);
   };
-  const backLink = () => window.history.back();
-  return createLink({ backLink, lowdefy, newOriginLink, sameOriginLink });
+  return createLink({ backLink, disabledLink, lowdefy, newOriginLink, noLink, sameOriginLink });
 }
 
 export default setupLink;

packages/server-dev/src/utils/useMutateCache.js

@@ -16,13 +16,13 @@
 
 import { useSWRConfig } from 'swr';
 
-function useMutateCache() {
+function useMutateCache(basePath) {
   const { cache, mutate } = useSWRConfig();
   return () => {
-    const keys = ['/api/root'];
+    const keys = [`${basePath}/api/root`];
 
     for (const key of cache.keys()) {
-      if (key.startsWith('/api/page')) {
+      if (key.startsWith(`${basePath}/api/page`)) {
         keys.push(key);
       }
     }

packages/server-dev/src/utils/usePageConfig.js

@@ -21,11 +21,8 @@ function fetchPageConfig(url) {
   return request({ url });
 }
 
-function usePageConfig(pageId) {
-  if (!pageId) {
-    pageId = 'NULL';
-  }
-  const { data } = useSWR(`/api/page/${pageId}`, fetchPageConfig, { suspense: true });
+function usePageConfig(pageId, basePath) {
+  const { data } = useSWR(`${basePath}/api/page/${pageId}`, fetchPageConfig, { suspense: true });
   return { data };
 }
 

packages/server-dev/src/utils/useRootConfig.js

@@ -17,12 +17,12 @@ import request from './request.js';
 
 // TODO: Handle TokenExpiredError
 
-function fetchRootConfig() {
-  return request({ url: '/api/root' });
+function fetchRootConfig(url) {
+  return request({ url });
 }
 
-function useRootConfig() {
-  const { data } = useSWR('root', fetchRootConfig, { suspense: true });
+function useRootConfig(basePath) {
+  const { data } = useSWR(`${basePath}/api/root`, fetchRootConfig, { suspense: true });
   return { data };
 }
 

packages/server-dev/src/utils/waitForRestartedServer.js

@@ -20,7 +20,7 @@ function waitForRestartedServer(lowdefy) {
   setTimeout(async () => {
     try {
       await request({
-        url: '/api/ping',
+        url: `${lowdefy.basePath}/api/ping`,
       });
       lowdefy._internal.window.location.reload();
     } catch (error) {

packages/server/src/components/createLinkComponent.js

@@ -19,10 +19,10 @@ const createLinkComponent = (lowdefy) => {
     ariaLabel,
     children,
     className,
-    href,
     id,
     newTab,
     pageId,
+    query,
     rel,
     url,
   }) => {
@@ -31,7 +31,7 @@ const createLinkComponent = (lowdefy) => {
         id={id}
         aria-label={ariaLabel}
         className={className}
-        href={href}
+        href={`${url}${query ? `?${query}` : ''}`}
         rel={rel || (newTab && 'noopener noreferrer')}
         target={newTab && '_blank'}
       >
@@ -43,22 +43,27 @@ const createLinkComponent = (lowdefy) => {
     ariaLabel,
     children,
     className,
-    href,
     id,
     newTab,
     pageId,
+    pathname,
+    query,
     rel,
     replace,
     scroll,
+    setInput,
     url,
   }) => {
     if (newTab) {
       return (
+        // eslint-disable-next-line react/jsx-no-target-blank
         <a
           id={id}
           aria-label={ariaLabel}
           className={className}
-          href={`${window.location.origin}${lowdefy.basePath}${href}`}
+          href={`${window.location.origin}${lowdefy.basePath}${pathname}${
+            query ? `?${query}` : ''
+          }`}
           rel={rel || 'noopener noreferrer'}
           target="_blank"
         >
@@ -67,8 +72,8 @@ const createLinkComponent = (lowdefy) => {
       );
     }
     return (
-      <NextLink href={href} replace={replace} scroll={scroll}>
-        <a id={id} aria-label={ariaLabel} className={className} rel={rel}>
+      <NextLink href={{ pathname, query }} replace={replace} scroll={scroll}>
+        <a id={id} aria-label={ariaLabel} className={className} rel={rel} onClick={setInput}>
           {type.isFunction(children) ? children(pageId || url || id) : children}
         </a>
       </NextLink>

packages/server/src/utils/setupLink.js

@@ -20,19 +20,26 @@ function setupLink(lowdefy) {
   const { router, window } = lowdefy._internal;
   const backLink = () => router.back();
   const disabledLink = () => {};
-  const newOriginLink = ({ href, newTab }) => {
+  const newOriginLink = ({ url, query, newTab }) => {
     if (newTab) {
-      return window.open(href, '_blank').focus();
+      return window.open(`${url}${query ? `?${query}` : ''}`, '_blank').focus();
     } else {
-      return window.location.assign(href);
+      return window.location.assign(`${url}${query ? `?${query}` : ''}`);
     }
   };
-  const sameOriginLink = ({ href, newTab }) => {
+  const sameOriginLink = ({ newTab, pathname, query, setInput }) => {
     if (newTab) {
-      return window.open(`${window.location.origin}${lowdefy.basePath}${href}`, '_blank').focus();
+      return window
+        .open(
+          `${window.location.origin}${lowdefy.basePath}${pathname}${query ? `?${query}` : ''}`,
+          '_blank'
+        )
+        .focus();
     } else {
+      setInput();
       return router.push({
-        pathname: href, // href includes the urlQuery as defined by engine
+        pathname,
+        query,
       });
     }
   };