@builder.io/react 1.1.48-0 → 1.1.49-1

package/README.md

@@ -45,26 +45,26 @@ All data passed down is available in Builder [actions and bindings](https://www.
   model="page"
   data={{
     products: productsList,
-    myFunction: () => alert('Triggered!'),
     foo: 'bar'
   }} >
 ```
 
-You can also pass down complex data like custom objects and libraries you can use `context`. Similar to React context, context passes all the way down (e.g. through symbols, etc). This data is not observed for changes and mutations
+You can also pass down functions, complex data like custom objects and libraries you can use `context`. Similar to React context, context passes all the way down (e.g. through symbols, etc). This data is not observed for changes and mutations
 
 ```tsx
 <BuilderComponent
   model="page"
   context={{
+    addToCart: () => myService.addToCart(currentProduct),
     lodash: lodash,
   }} >
 ```
 
-Context is available in [actions and bindings](https://www.builder.io/c/docs/guides/custom-code) as `context.*`, such as `context.lodash` in the example above
+Context is available in [actions and bindings](https://www.builder.io/c/docs/guides/custom-code) as `context.*`, such as `context.lodash` or `context.myFunction()` in the example above
 
 #### Passing complex
 
-Everything passed down is available on the `state` object in data and actions - e.g. `state.products[0].name` or `state.myFunction()`
+Everything passed down is available on the `state` object in data and actions - e.g. `state.products[0].name`
 
 See more about using data passed down [here](https://www.builder.io/c/docs/react/custom-actions)
 
@@ -133,6 +133,75 @@ Builder.registerComponent(CodeBlockComponent, {
 
 See our full guide on [registering custom components here](https://www.builder.io/c/docs/custom-react-components)
 
+### BuilderContent
+
+#### Usage with Data Models
+
+Although you can already fetch data models from our Content API directly and use it as you would any other API resource, with a BuilderContent component you are able to use live Editing / Previewing / [A/B testing](https://forum.builder.io/t/a-b-testing-data-models/158) of your Data Models within the Builder Visual Editor.
+
+##### Example, setting up an editable theme:
+```tsx
+ <BuilderContent model="site-settings"> { (data, loading) => {
+   If (loading) {
+     return <Spinner />
+   }
+   return <>
+      /*pass values down to an example ThemeProvider, used as a wrapper in your application*/     
+       <ThemeProvider theme={data.theme} > 
+           {props.children}
+       </ThemeProvider>
+   </>
+   }}
+</BuilderContent>
+```
+
+
+#### Usage with Page/Section Custom Fields
+
+Page and section models in builder can be extended with [custom fields](https://www.builder.io/c/docs/custom-fields).   To enable live editing / previewing on components that uses those custom fields, you can use BuilderContent to pass input data from the model to your components that are outside the rendered content
+
+##### Example, passing Custom Field input: 
+```tsx
+<BuilderContent model="landing-page">{ (data) => {
+       /*use your data here within your custom component*/
+        return <>
+           <FeaturedImage image={data.featuredImage} />
+           <BuilderComponent content={content} model="landing-page" />
+       </>
+   }}
+</BuilderContent>
+```
+
+#### Passing content manually
+
+This is useful for doing server side rendering, e.g. with [Gatsby](https://github.com/BuilderIO/builder/tree/master/examples/gatsby) and [Next.js](https://github.com/BuilderIO/builder/tree/master/examples/next-js) or via
+loading data from other sources than our default APIs, such as data in your own database saved via [webhooks](https://www.builder.io/c/docs/webhooks)
+
+```tsx
+const content = await builder.get(‘your-data-model’, { ...options });
+if (content) {
+  /*use your data here*/
+  return <BuilderContent model="your-data-model" content={content} >
+}
+```
+
+#### Advanced querying
+When using custom [models](https://www.builder.io/c/docs/guides/getting-started-with-models) and [fields](https://www.builder.io/c/docs/custom-fields) you can do more advanced filtering of your content with [queries](<(https://www.builder.io/c/docs/custom-fields)>)
+and [targeting](https://www.builder.io/c/docs/guides/targeting-and-scheduling)
+
+```tsx
+import { BuilderContent, builder } from '@builder.io/react';
+
+builder.setUserAttributes({ isLoggedIn: false })
+
+export default () => <div>
+  <BuilderContent
+     model="your-data-model"
+     options={{ query: { 'data.something.$in': ['value a', 'value b'] } }} />
+  <!-- some other content -->
+</div>
+```
+
 ### builder
 
 The React SDK exports the core SDK's [builder object](../core), which can be used for setting things like

package/dist/builder-react-lite.cjs.js

@@ -1,4 +1,4 @@
-"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var sdk=require("@builder.io/sdk"),core=require("@emotion/core"),React=require("react"),React__default=_interopDefault(React),ReactDOM=_interopDefault(require("react-dom")),hash=_interopDefault(require("hash-sum")),version="1.1.47",_a;"undefined"!=typeof window&&(null===(_a=window.parent)||void 0===_a||_a.postMessage({type:"builder.isReactSdk",data:{value:!0,supportsPatchUpdates:"v3",priorVersion:version}},"*"))
+"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var sdk=require("@builder.io/sdk"),core=require("@emotion/core"),React=require("react"),React__default=_interopDefault(React),ReactDOM=_interopDefault(require("react-dom")),hash=_interopDefault(require("hash-sum")),version="1.1.49-0",_a;"undefined"!=typeof window&&(null===(_a=window.parent)||void 0===_a||_a.postMessage({type:"builder.isReactSdk",data:{value:!0,supportsPatchUpdates:"v3",priorVersion:version}},"*"))
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation. All rights reserved.
 Licensed under the Apache License, Version 2.0 (the "License"); you may not use