Ui and code improvements

blaze-react-component/blaze-react-component-client.js

@@ -1,69 +1,73 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { Blaze } from 'meteor/blaze';
 import { ReactiveVar } from 'meteor/reactive-var';
 import { Template } from 'meteor/templating';
 
-class BlazeReactComponent extends Component {
+const BlazeReactComponent = ({
+  template: blazeTemplateOrTemplateName,
+  __template__,
+  ...props
+}) => {
+  const blazeData = {
+    template: __template__,
+    ...props,
+  };
+  const containerRef = useRef();
+  const reactiveBlazeDataRef = useRef(new ReactiveVar(blazeData));
+  const blazeViewRef = useRef();
 
-  componentDidMount() {
-    this.renderBlazeView();
-  }
+  const getTemplate = useCallback(() => {
+    if (typeof blazeTemplateOrTemplateName === 'string') {
+      if (!Template[blazeTemplateOrTemplateName]) {
+        throw new Error([
+          `No Template["${blazeTemplateOrTemplateName}"] exists.  If this template`,
+          'originates in your app, make sure you have the `templating`',
+          'package installed (and not, for e.g. `static-html`)',
+        ].join(' '));
+      }
 
-  componentDidUpdate(prevProps) {
-    if (prevProps.template != this.props.template) {
-      Blaze.remove(this._blazeView);
-      this.renderBlazeView();
+      return Template[blazeTemplateOrTemplateName];
     }
-  }
 
-  renderBlazeView() {
-    this._blazeData = new ReactiveVar(_.omit(this.props, 'template'));
-
-    let template, tArg = this.props.template;
-    if (typeof tArg === 'string') {
-      template = Template[tArg];
-      if (!template)
-        throw new Error(`No Template["${tArg}"] exists.  If this template `
-          + "originates in your app, make sure you have the `templating` "
-          + "package installed (and not, for e.g. `static-html`)");
-    } else if (tArg instanceof Blaze.Template) {
-      template = tArg;
-    } else {
-        throw new Error("Invalid template= argument specified.  Expected "
-          + "the string name of an existing Template, or the template "
-          + "itself, instead got ''" + typeof tArg + ": "
-          + JSON.stringify(tArg));
+    if (blazeTemplateOrTemplateName instanceof Blaze.Template) {
+      return blazeTemplateOrTemplateName;
     }
 
-    this._blazeView = Blaze.renderWithData(
+    throw new Error([
+      'Invalid template= argument specified.  Expected',
+      'the string name of an existing Template, or the template',
+      `itself, instead got '${typeof blazeTemplateOrTemplateName}':`,
+      JSON.stringify(blazeTemplateOrTemplateName),
+    ].join(' '));
+  }, [blazeTemplateOrTemplateName]);
+
+  // Render Blaze View;
+  useEffect(() => {
+    const template = getTemplate();
+
+    blazeViewRef.current = Blaze.renderWithData(
       template,
-      () => this._blazeData.get(),
-      ReactDOM.findDOMNode(this._blazeRef)
+      () => reactiveBlazeDataRef.current.get(),
+      containerRef.current,
     );
-  }
-
-  shouldComponentUpdate(nextProps) {
-    // this used to be in (the now deprecated) componentWillReceiveProps
-    this._blazeData.set(_.omit(nextProps, 'template'));
 
-    // Never call render() for props except template again; Blaze will do what's necessary.
-    return nextProps.template !== this.props.template;
-  }
+    return () => {
+      Blaze.remove(blazeViewRef.current);
+    };
 
-  componentWillUnmount() {
-    Blaze.remove(this._blazeView);
-  }
+    // Never render() for props except template again; Blaze will do what's necessary.
+  }, [blazeTemplateOrTemplateName]);
 
-  render() {
-    return ( <span className={this.props.className || ''} ref={(c) => this._blazeRef = c} /> );
-  }
+  useEffect(() => {
+    reactiveBlazeDataRef.current.set(blazeData);
+  }, [blazeData]);
 
-}
+  return <span style={{ display: 'contents' }} ref={containerRef} />;
+};
 
-blazeToReact = function(template) {
-  return (props) => <BlazeReactComponent {...props} template={template} />;
-}
+const blazeToReact = template => ({ templateProp, ...props }) => (
+  <BlazeReactComponent __template__={templateProp} {...props} template={template} />
+);
 
 export { blazeToReact };
 export default BlazeReactComponent;

blaze-react-component/blaze-react-component-server.js

@@ -1,22 +1,20 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
+import React from 'react';
 import { Blaze } from 'meteor/blaze';
-import { ReactiveVar } from 'meteor/reactive-var';
 
-const BlazeComponent = (props) => {
+const BlazeComponent = ({ template, ...props }) => {
   const html = {
     __html: Blaze.toHTMLWithData(
-      props.template,
-      _.omit(props, 'template')
-   )
+      template,
+      props,
+    ),
   };
 
-  return ( <span dangerouslySetInnerHTML={html} /> );
-}
+  return <span style={{ display: 'contents' }} dangerouslySetInnerHTML={html} />;
+};
 
-blazeToReact = function(template) {
-  return (props) => <BlazeComponent {...props} template={template} />;
-}
+const blazeToReact = template => ({ templateProp, ...props }) => (
+  <BlazeComponent __template__={templateProp} {...props} template={template} />
+);
 
 export { blazeToReact };
 export default BlazeComponent;