feat(client): Add display message implementation.

packages/build/src/build/buildTypes.js

@@ -49,6 +49,7 @@ function buildTypes({ components, context }) {
   // Add loaders and basic
   basicTypes.blocks.forEach((block) => typeCounters.blocks.increment(block));
   loaderTypes.blocks.forEach((block) => typeCounters.blocks.increment(block));
+  typeCounters.blocks.increment('Message'); // Used for DisplayMessage in @lowdefy/client
 
   components.types = {
     actions: {},

packages/client/src/Client.js

@@ -18,6 +18,7 @@ import React from 'react';
 
 import Block from './block/Block.js';
 import Context from './Context.js';
+import DisplayMessage from './DisplayMessage.js';
 import Head from './Head.js';
 import ProgressBarController from './ProgressBarController.js';
 
@@ -36,11 +37,21 @@ const Client = ({
   return (
     <>
       <ProgressBarController
-        id="page-loader"
-        key={`${config.pageConfig.id}-loader`}
+        id="lowdefy-progress-bar"
+        key={`${config.pageConfig.id}-progress-bar`}
         lowdefy={lowdefy}
         resetContext={resetContext}
       />
+      <DisplayMessage
+        id="lowdefy-displayy-message"
+        key={`${config.pageConfig.id}-display-message`}
+        Component={lowdefy._internal.blockComponents.Message}
+        methods={{
+          registerMethod: (_, method) => {
+            lowdefy._internal.displayMessage = method;
+          },
+        }}
+      />
       <Context
         key={config.pageConfig.id}
         config={config.pageConfig}

packages/client/src/DisplayMessage.js

@@ -0,0 +1,35 @@
+/*
+  Copyright 2020-2022 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React from 'react';
+import { makeCssClass } from '@lowdefy/block-utils';
+
+const DisplayMessage = ({ Component, id, methods }) => {
+  return (
+    <Component
+      blockId={id}
+      key={id}
+      methods={{
+        makeCssClass,
+        registerMethod: methods.registerMethod,
+        triggerEvent: () => undefined,
+      }}
+      properties={{}}
+    />
+  );
+};
+
+export default DisplayMessage;

packages/client/src/initLowdefyContext.js

@@ -17,9 +17,9 @@
 import { urlQuery } from '@lowdefy/helpers';
 
 import callRequest from './callRequest.js';
-import setupLink from './setupLink.js';
-import createLinkComponent from './createLinkComponent.js';
 import createIcon from './createIcon.js';
+import createLinkComponent from './createLinkComponent.js';
+import setupLink from './setupLink.js';
 
 const lowdefy = {
   _internal: {