basic POC for rendering via React, state managed with CF State #2766

caldera-core.php

@@ -122,18 +122,18 @@ function caldera_forms_load()
     }
 
     add_action('plugins_loaded', array('Caldera_Forms', 'get_instance'));
-    add_action('plugins_loaded', array('Caldera_Forms_Tracking', 'get_instance'));
 
 
-	// Admin & Admin Ajax stuff.
+    add_filter( 'caldera_forms_render_assets_minify', '__return_false' );
+
+    // Admin & Admin Ajax stuff.
     if (is_admin() || defined('DOING_AJAX')) {
         add_action('plugins_loaded', array('Caldera_Forms_Admin', 'get_instance'));
         add_action('plugins_loaded', array('Caldera_Forms_Support', 'get_instance'));
         include_once CFCORE_PATH . 'includes/plugin-page-banner.php';
     }
 
 
-
 }
 
 /**

classes/core.php

@@ -23,6 +23,7 @@ class Caldera_Forms
 	 */
 	const VERSION = CFCORE_VER;
 
+	/**
 	/**
 	 * @since 1.4.2
 	 */
@@ -4205,11 +4206,11 @@ static public function render_form($atts, $entry_id = null, $shortcode = null)
 
 		do_action('caldera_forms_render_start', $form);
 
-		//aria-label="<?php echo $form[ 'name' ] . '"
+		$form_id_attribute = $form['ID'] . '_' . $current_form_count;
 		$form_attributes = array(
 			'method' => 'POST',
 			'enctype' => 'multipart/form-data',
-			'id' => $form['ID'] . '_' . $current_form_count,
+			'id' => $form_id_attribute,
 			'data-form-id' => $form['ID'],
 			'aria-label' => $form['name']
 		);
@@ -4639,6 +4640,7 @@ static public function render_form($atts, $entry_id = null, $shortcode = null)
 			$out .= "<" . $form_element . " data-instance=\"" . $current_form_count . "\" class=\"" . implode(' ',
 					$form_classes) . "\" " . implode(" ", $attributes) . ">\r\n";
 			$out .= Caldera_Forms_Render_Nonce::nonce_field($form['ID']);
+			$out .= sprintf( '<div id="%s"></div>', esc_attr( "cf2-$form_id_attribute") );
 			$out .= "<input type=\"hidden\" name=\"_cf_frm_id\" value=\"" . $form['ID'] . "\">\r\n";
 			$out .= "<input type=\"hidden\" name=\"_cf_frm_ct\" value=\"" . $current_form_count . "\">\r\n";
 			if (!empty($form['form_ajax'])) {

classes/render/assets.php

@@ -292,7 +292,7 @@ public static function get_core_scripts(){
 			'blocks' => self::make_url( 'blocks'),
 			'editor' => self::make_url( 'editor' ),
 			'pro' => self::make_url( 'pro' ),
-			'privacy' => self::make_url( 'privacy' ),
+			//'privacy' => self::make_url( 'privacy' ),
             'render' => self::make_url( 'render' )
 		);
 

clients/privacy/build/index.min.js

@@ -696,27 +696,27 @@ module.exports = function (exec) {
 /* 23 */
 /***/ (function(module, exports) {
 
-var g;
-
-// This works in non-strict mode
-g = (function() {
-	return this;
-})();
-
-try {
-	// This works if eval is allowed (see CSP)
-	g = g || Function("return this")() || (1,eval)("this");
-} catch(e) {
-	// This works if the window reference is available
-	if(typeof window === "object")
-		g = window;
-}
-
-// g can still be undefined, but nothing to do about it...
-// We return undefined, instead of nothing here, so it's
-// easier to handle this case. if(!global) { ...}
-
-module.exports = g;
+var g;
+
+// This works in non-strict mode
+g = (function() {
+	return this;
+})();
+
+try {
+	// This works if eval is allowed (see CSP)
+	g = g || Function("return this")() || (1,eval)("this");
+} catch(e) {
+	// This works if the window reference is available
+	if(typeof window === "object")
+		g = window;
+}
+
+// g can still be undefined, but nothing to do about it...
+// We return undefined, instead of nothing here, so it's
+// easier to handle this case. if(!global) { ...}
+
+module.exports = g;
 
 
 /***/ }),
@@ -7207,30 +7207,30 @@ var result = Object(__WEBPACK_IMPORTED_MODULE_0__ponyfill_js__["a" /* default */
 /* 184 */
 /***/ (function(module, exports) {
 
-module.exports = function(originalModule) {
-	if(!originalModule.webpackPolyfill) {
-		var module = Object.create(originalModule);
-		// module.parent = undefined by default
-		if(!module.children) module.children = [];
-		Object.defineProperty(module, "loaded", {
-			enumerable: true,
-			get: function() {
-				return module.l;
-			}
-		});
-		Object.defineProperty(module, "id", {
-			enumerable: true,
-			get: function() {
-				return module.i;
-			}
-		});
-		Object.defineProperty(module, "exports", {
-			enumerable: true,
-		});
-		module.webpackPolyfill = 1;
-	}
-	return module;
-};
+module.exports = function(originalModule) {
+	if(!originalModule.webpackPolyfill) {
+		var module = Object.create(originalModule);
+		// module.parent = undefined by default
+		if(!module.children) module.children = [];
+		Object.defineProperty(module, "loaded", {
+			enumerable: true,
+			get: function() {
+				return module.l;
+			}
+		});
+		Object.defineProperty(module, "id", {
+			enumerable: true,
+			get: function() {
+				return module.i;
+			}
+		});
+		Object.defineProperty(module, "exports", {
+			enumerable: true,
+		});
+		module.webpackPolyfill = 1;
+	}
+	return module;
+};
 
 
 /***/ }),
@@ -9978,28 +9978,28 @@ TabContent.childContextTypes = childContextTypes;
 /* 213 */
 /***/ (function(module, exports) {
 
-module.exports = function(module) {
-	if(!module.webpackPolyfill) {
-		module.deprecate = function() {};
-		module.paths = [];
-		// module.parent = undefined by default
-		if(!module.children) module.children = [];
-		Object.defineProperty(module, "loaded", {
-			enumerable: true,
-			get: function() {
-				return module.l;
-			}
-		});
-		Object.defineProperty(module, "id", {
-			enumerable: true,
-			get: function() {
-				return module.i;
-			}
-		});
-		module.webpackPolyfill = 1;
-	}
-	return module;
-};
+module.exports = function(module) {
+	if(!module.webpackPolyfill) {
+		module.deprecate = function() {};
+		module.paths = [];
+		// module.parent = undefined by default
+		if(!module.children) module.children = [];
+		Object.defineProperty(module, "loaded", {
+			enumerable: true,
+			get: function() {
+				return module.l;
+			}
+		});
+		Object.defineProperty(module, "id", {
+			enumerable: true,
+			get: function() {
+				return module.i;
+			}
+		});
+		module.webpackPolyfill = 1;
+	}
+	return module;
+};
 
 
 /***/ }),
@@ -12426,9 +12426,9 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
 /**
- * The `<Portal/>` component renders its children into a new "subtree" outside of current component hierarchy.
+ * The `<RenderComponentViaPortal/>` component renders its children into a new "subtree" outside of current component hierarchy.
  * You can think of it as a declarative `appendChild()`, or jQuery's `$.fn.appendTo()`.
- * The children of `<Portal/>` component will be appended to the `container` specified.
+ * The children of `<RenderComponentViaPortal/>` component will be appended to the `container` specified.
  */
 var Portal = function (_React$Component) {
   _inherits(Portal, _React$Component);
@@ -12473,10 +12473,10 @@ var Portal = function (_React$Component) {
   return Portal;
 }(_react2.default.Component);
 
-Portal.displayName = 'Portal';
+Portal.displayName = 'RenderComponentViaPortal';
 Portal.propTypes = {
   /**
-   * A Node, Component instance, or function that returns either. The `container` will have the Portal children
+   * A Node, Component instance, or function that returns either. The `container` will have the RenderComponentViaPortal children
    * appended to it.
    */
   container: _propTypes2.default.oneOfType([_componentOrElement2.default, _propTypes2.default.func]),
@@ -15545,7 +15545,7 @@ function getComponentName(type) {
     case REACT_FRAGMENT_TYPE:
       return 'Fragment';
     case REACT_PORTAL_TYPE:
-      return 'Portal';
+      return 'RenderComponentViaPortal';
     case REACT_PROFILER_TYPE:
       return 'Profiler';
     case REACT_STRICT_MODE_TYPE:
@@ -20858,7 +20858,7 @@ function getComponentName(type) {
     case REACT_FRAGMENT_TYPE:
       return 'Fragment';
     case REACT_PORTAL_TYPE:
-      return 'Portal';
+      return 'RenderComponentViaPortal';
     case REACT_PROFILER_TYPE:
       return 'Profiler';
     case REACT_STRICT_MODE_TYPE:
@@ -36086,7 +36086,7 @@ implementation) {
   var key = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
 
   return {
-    // This tag allow us to uniquely identify this as a React Portal
+    // This tag allow us to uniquely identify this as a React RenderComponentViaPortal
     $$typeof: REACT_PORTAL_TYPE,
     key: key == null ? null : '' + key,
     children: children,
@@ -38532,7 +38532,7 @@ exports.Element = Element;
 exports.ForwardRef = ForwardRef;
 exports.Fragment = Fragment;
 exports.Profiler = Profiler;
-exports.Portal = Portal;
+exports.RenderComponentViaPortal = Portal;
 exports.StrictMode = StrictMode;
 exports.isValidElementType = isValidElementType;
 exports.isAsyncMode = isAsyncMode;
@@ -42674,7 +42674,7 @@ var modalManager = new _ModalManager2.default();
  * Love them or hate them, `<Modal/>` provides a solid foundation for creating dialogs, lightboxes, or whatever else.
  * The Modal component renders its `children` node in front of a backdrop component.
  *
- * The Modal offers a few helpful features over using just a `<Portal/>` component and some styles:
+ * The Modal offers a few helpful features over using just a `<RenderComponentViaPortal/>` component and some styles:
  *
  * - Manages dialog stacking when one-at-a-time just isn't enough.
  * - Creates a backdrop, for disabling interaction below the modal.
@@ -43602,9 +43602,9 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
 /**
- * The `<Portal/>` component renders its children into a new "subtree" outside of current component hierarchy.
+ * The `<RenderComponentViaPortal/>` component renders its children into a new "subtree" outside of current component hierarchy.
  * You can think of it as a declarative `appendChild()`, or jQuery's `$.fn.appendTo()`.
- * The children of `<Portal/>` component will be appended to the `container` specified.
+ * The children of `<RenderComponentViaPortal/>` component will be appended to the `container` specified.
  */
 var Portal = function (_React$Component) {
   _inherits(Portal, _React$Component);
@@ -43689,10 +43689,10 @@ var Portal = function (_React$Component) {
   return Portal;
 }(_react2.default.Component);
 
-Portal.displayName = 'Portal';
+Portal.displayName = 'RenderComponentViaPortal';
 Portal.propTypes = {
   /**
-   * A Node, Component instance, or function that returns either. The `container` will have the Portal children
+   * A Node, Component instance, or function that returns either. The `container` will have the RenderComponentViaPortal children
    * appended to it.
    */
   container: _propTypes2.default.oneOfType([_componentOrElement2.default, _propTypes2.default.func]),
@@ -44456,7 +44456,7 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
 /**
- * Built on top of `<Position/>` and `<Portal/>`, the overlay component is great for custom tooltip overlays.
+ * Built on top of `<Position/>` and `<RenderComponentViaPortal/>`, the overlay component is great for custom tooltip overlays.
  */
 var Overlay = function (_React$Component) {
   _inherits(Overlay, _React$Component);