feat(demo): ui-component render (#282)

* feat(demo): ui-component render * chore(mson): v2.8.0
redgeoff · Aug 28, 2021 · 8607c02 · 8607c02
1 parent e4037ad
commit 8607c02
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 40 deletions.
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "date-fns": "^2.15.0",
-    "mson": "^2.7.0",
+    "mson": "^2.8.0",
     "prop-types": "^15.6.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
@@ -50,7 +50,7 @@
     "gh-pages": "^3.1.0",
     "jest-environment-jsdom-fourteen": "^1.0.1",
     "lint-staged": "^10.5.3",
-    "mson": "^2.7.0",
+    "mson": "^2.8.0",
     "prettier": "^2.2.1",
     "prop-types": "^15.6.2",
     "react": "^17.0.1",

diff --git a/src/component-utils.js b/src/component-utils.js
@@ -5,7 +5,9 @@ class Utils {
   getUIComponent(component) {
     const name = component.getClassName();
     const Component = components[name];
-    if (Component !== undefined) {
+    if (component.get('render')) {
+      return component.get('render');
+    } else if (Component !== undefined) {
       return Component;
     } else if (compiler.isCompiled(compiler.getComponent(name))) {
       const Parent = Object.getPrototypeOf(component.constructor);

diff --git a/src/demo/app.js b/src/demo/app.js
@@ -16,14 +16,8 @@ import {
   CustomComponentJS,
   ReactCustomComponentJS,
 } from './components/custom-component-js';
-import {
-  CustomComponentNoProps,
-  ReactCustomComponentNoProps,
-} from './components/custom-component-no-props';
-import {
-  CustomComponentAttach,
-  ReactCustomComponentAttach,
-} from './components/custom-component-attach';
+import { CustomComponentNoProps } from './components/custom-component-no-props';
+import { CustomComponentAttach } from './components/custom-component-attach';
 
 // Set the site key when using the ReCAPTCHAField
 globals.set({ reCAPTCHASiteKey: '6LdIbGMUAAAAAJnipR9t-SnWzCbn0ZX2myXBIauh' });
@@ -35,15 +29,15 @@ compiler.registerComponent('FormEditor', FormEditor);
 uiComponents.FormEditor = FormEditorUI;
 compiler.registerComponent('FormBuilder', FormBuilder);
 
-// Register any custom components written in JS and not MSON
+// You can register custom components with the backend and frontend separately
 compiler.registerComponent('CustomComponent', CustomComponent);
 uiComponents.CustomComponent = ReactCustomComponent;
 compiler.registerComponent('CustomComponentJS', CustomComponentJS);
 uiComponents.CustomComponentJS = ReactCustomComponentJS;
+
+// You can also register UIComponents that bundle the frontend and backend together
 compiler.registerComponent('CustomComponentNoProps', CustomComponentNoProps);
-uiComponents.CustomComponentNoProps = ReactCustomComponentNoProps;
 compiler.registerComponent('CustomComponentAttach', CustomComponentAttach);
-uiComponents.CustomComponentAttach = ReactCustomComponentAttach;
 
 // Register all the components
 for (let name in components) {

diff --git a/src/demo/components/custom-component-attach.js b/src/demo/components/custom-component-attach.js
@@ -3,6 +3,21 @@ import attach from '../../attach';
 import Typography from '@material-ui/core/Typography';
 import compile from 'mson/lib/compiler/compile';
 
+let ReactCustomComponentAttach = (props) => {
+  const { name, label } = props;
+  return (
+    <div>
+      <Typography variant="h3">Name: {name}</Typography>
+      <Typography variant="h4">Label: {label}</Typography>
+    </div>
+  );
+};
+
+// Bind React props to MSON component props
+ReactCustomComponentAttach = attach(['name', 'label'])(
+  ReactCustomComponentAttach
+);
+
 const CustomComponentAttach = compile({
   component: 'UIComponent',
   name: 'CustomComponent',
@@ -19,21 +34,7 @@ const CustomComponentAttach = compile({
       },
     ],
   },
+  render: ReactCustomComponentAttach,
 });
 
-let ReactCustomComponentAttach = (props) => {
-  const { name, label } = props;
-  return (
-    <div>
-      <Typography variant="h3">Name: {name}</Typography>
-      <Typography variant="h4">Label: {label}</Typography>
-    </div>
-  );
-};
-
-// Bind React props to MSON component props
-ReactCustomComponentAttach = attach(['name', 'label'])(
-  ReactCustomComponentAttach
-);
-
-export { CustomComponentAttach, ReactCustomComponentAttach };
+export { CustomComponentAttach };
diff --git a/src/demo/components/custom-component-no-props.js b/src/demo/components/custom-component-no-props.js
@@ -2,11 +2,6 @@ import React from 'react';
 import Typography from '@material-ui/core/Typography';
 import compile from 'mson/lib/compiler/compile';
 
-const CustomComponentNoProps = compile({
-  component: 'UIComponent',
-  name: 'CustomComponentNoProps',
-});
-
 const ReactCustomComponentNoProps = (/* props */) => {
   const text = 'This text is private to the React component';
   return (
@@ -16,4 +11,10 @@ const ReactCustomComponentNoProps = (/* props */) => {
   );
 };
 
-export { CustomComponentNoProps, ReactCustomComponentNoProps };
+const CustomComponentNoProps = compile({
+  component: 'UIComponent',
+  name: 'CustomComponentNoProps',
+  render: ReactCustomComponentNoProps,
+});
+
+export { CustomComponentNoProps };
diff --git a/yarn.lock b/yarn.lock
@@ -10218,10 +10218,10 @@ ms@^2.0.0, ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
-mson@^2.7.0:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/mson/-/mson-2.7.0.tgz#1753cc60970f8eff0f96b806ae9a1adda8f2071c"
-  integrity sha512-sOY+qls0Xe0Xf/Vd/wcCtG9oE2iNHto182zYofcZ3HQ9sAgGbkaVSGEDK92Tw0Ov8svucrA6p1q8Foz5weQl2g==
+mson@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/mson/-/mson-2.8.0.tgz#5ee4e2bd09e7b84a69f305c1248d5699456a2e73"
+  integrity sha512-f/HoLffVp+mp6CtUK6ug1P8kSpRW4JlHxzEA9Jcmz6/haD8II/Kuf8x6ObKVLRCIDwstr2QeHox3nw8Kh+UScg==
   dependencies:
     "@babel/runtime" "^7.12.5"
     country-telephone-data "^0.6.3"