@lowdefy/server 4.0.0-alpha.6 → 4.0.0-alpha.7

package/next.config.js

@@ -1,7 +1,9 @@
 const withLess = require('next-with-less');
 const lowdefyConfig = require('./build/config.json');
 
+// TODO: Trance env and args from cli that is required on the server.
 module.exports = withLess({
+  basePath: process.env.LOWDEFY_BASE_PATH || lowdefyConfig.basePath,
   lessLoaderOptions: {
     lessOptions: {
       modifyVars: lowdefyConfig.theme.lessVariables,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/server",
-  "version": "4.0.0-alpha.6",
+  "version": "4.0.0-alpha.7",
   "license": "Apache-2.0",
   "description": "",
   "homepage": "https://lowdefy.com",
@@ -34,36 +34,35 @@
   "scripts": {
     "build:lowdefy": "lowdefy-build",
     "build:next": "next build",
-    "dev": "yarn build:lowdefy && yarn && next dev",
-    "dev:prod": "yarn build:lowdefy && yarn && yarn build:next && next start",
+    "dev": "next dev",
     "start": "next start",
     "lint": "next lint",
     "next": "next"
   },
   "dependencies": {
-    "@lowdefy/api": "4.0.0-alpha.6",
-    "@lowdefy/block-utils": "4.0.0-alpha.6",
-    "@lowdefy/engine": "4.0.0-alpha.6",
-    "@lowdefy/helpers": "4.0.0-alpha.6",
-    "@lowdefy/layout": "4.0.0-alpha.6",
-    "@lowdefy/node-utils": "4.0.0-alpha.6",
-    "@lowdefy/operators-js": "4.0.0-alpha.6",
-    "next": "12.0.3",
-    "next-auth": "4.0.0-beta.6",
+    "@lowdefy/api": "4.0.0-alpha.7",
+    "@lowdefy/block-utils": "4.0.0-alpha.7",
+    "@lowdefy/engine": "4.0.0-alpha.7",
+    "@lowdefy/helpers": "4.0.0-alpha.7",
+    "@lowdefy/layout": "4.0.0-alpha.7",
+    "@lowdefy/node-utils": "4.0.0-alpha.7",
+    "@lowdefy/operators-js": "4.0.0-alpha.7",
+    "next": "12.0.10",
+    "next-auth": "4.1.2",
     "process": "0.11.10",
-    "react": "18.0.0-alpha-327d5c484-20211106",
-    "react-dom": "18.0.0-alpha-327d5c484-20211106",
+    "react": "18.0.0-rc.0",
+    "react-dom": "18.0.0-rc.0",
     "react-icons": "4.3.1"
   },
   "devDependencies": {
-    "@lowdefy/build": "4.0.0-alpha.6",
-    "@next/eslint-plugin-next": "12.0.4",
+    "@lowdefy/build": "4.0.0-alpha.7",
+    "@next/eslint-plugin-next": "12.0.10",
     "less": "4.1.2",
     "less-loader": "10.2.0",
-    "next-with-less": "2.0.2"
+    "next-with-less": "2.0.4"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2530e31af795b6a3c75ac8f72c8dbe0ab5d1251b"
+  "gitHead": "52ec14639d00de910cf9b8ab25bf933ca891cff5"
 }

package/src/components/LowdefyContext.js

@@ -16,34 +16,35 @@
 
 import React from 'react';
 
+import actions from '../../build/plugins/actions.js';
 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 = {
+      actions,
       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;

package/src/components/Page.js

@@ -16,25 +16,29 @@
 
 import React from 'react';
 
+import { urlQuery } from '@lowdefy/helpers';
 import { useRouter } from 'next/router';
 
 import Context from './Context.js';
 import Head from './Head.js';
 import Block from './block/Block.js';
 import setupLink from '../utils/setupLink.js';
+import createComponents from './createComponents.js';
 
 const LoadingBlock = () => <div>Loading...</div>;
 
 const Page = ({ lowdefy, pageConfig, rootConfig }) => {
   const router = useRouter();
-  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._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.urlQuery = urlQuery.parse(window.location.search.slice(1));
+
   return (
     <Context config={pageConfig} lowdefy={lowdefy}>
       {(context, loading) => {

package/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}

package/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}

package/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}

package/src/components/{components.js → 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;

package/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;

package/src/pages/[pageId].js

@@ -23,8 +23,6 @@ export async function getServerSideProps(context) {
   // TODO: get the right api context options
   const apiContext = await createApiContext({ buildDirectory: './build' });
 
-  // TODO: Maybe we can only get rootConfig once?
-  // We can't do getServerSideProps on _app :(
   const [rootConfig, pageConfig] = await Promise.all([
     getRootConfig(apiContext),
     getPageConfig(apiContext, { pageId }),

package/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>

package/src/pages/index.js

@@ -19,6 +19,7 @@ import { createApiContext, getPageConfig, getRootConfig } from '@lowdefy/api';
 import Page from '../components/Page.js';
 
 export async function getServerSideProps() {
+  // TODO: is this build directory configurable from the cli?
   const apiContext = await createApiContext({ buildDirectory: './build' });
   const rootConfig = await getRootConfig(apiContext);
   const { home } = rootConfig;

package/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 router.push({
-        pathname: path,
-        // TODO: Do we handle urlQuery as a param here?
-        // query: {},
-      });
+      return window.location.assign(`${url}${query ? `?${query}` : ''}`);
     }
   };
-  const newOriginLink = (path, newTab) => {
+  const sameOriginLink = ({ newTab, pathname, query, setInput }) => {
     if (newTab) {
-      return window.open(path, '_blank').focus();
+      return window
+        .open(
+          `${window.location.origin}${lowdefy.basePath}${pathname}${query ? `?${query}` : ''}`,
+          '_blank'
+        )
+        .focus();
     } else {
-      return (window.location.href = path);
+      setInput();
+      return router.push({
+        pathname,
+        query,
+      });
     }
   };
-  const backLink = () => window.history.back();
-  return createLink({ backLink, lowdefy, newOriginLink, sameOriginLink });
+  const noLink = () => {
+    throw new Error(`Invalid Link.`);
+  };
+  return createLink({ backLink, disabledLink, lowdefy, newOriginLink, noLink, sameOriginLink });
 }
 
 export default setupLink;