@builder.io/react 1.1.46 → 1.1.47-3

package/src/blocks/CustomCode.tsx

@@ -10,7 +10,7 @@ interface Props {
 }
 
 // TODO: settings context to pass this down. do in shopify-specific generated code
-const globalReplaceNodes = ({} as { [key: string]: Element[] }) || null;
+const globalReplaceNodes = ({} as { [key: string]: Node[] }) || null;
 
 const isShopify = Builder.isBrowser && 'Shopify' in window;
 
@@ -40,7 +40,7 @@ if (Builder.isBrowser && globalReplaceNodes) {
       const id = parent && parent.getAttribute('builder-id');
       if (id) {
         globalReplaceNodes[id] = globalReplaceNodes[id] || [];
-        globalReplaceNodes[id].push(el);
+        globalReplaceNodes[id].push(isShopify ? el : el.cloneNode(true));
       }
     });
   } catch (err) {
@@ -50,7 +50,7 @@ if (Builder.isBrowser && globalReplaceNodes) {
 
 class CustomCodeComponent extends React.Component<Props> {
   elementRef: Element | null = null;
-  originalRef: Element | null = null;
+  originalRef: Node | Element | null = null;
 
   scriptsInserted = new Set();
   scriptsRun = new Set();
@@ -80,7 +80,7 @@ class CustomCodeComponent extends React.Component<Props> {
         if (existing.length === 1) {
           const node = existing[0];
           this.originalRef = node as HTMLElement;
-          this.originalRef.remove();
+          (this.originalRef as Element).remove();
         }
       }
     }
@@ -192,11 +192,12 @@ export const CustomCode = withBuilder(CustomCodeComponent, {
     {
       name: 'scriptsClientOnly',
       type: 'boolean',
-      defaultValue: false,
-      // TODO: default true?
       helperText:
         'Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads',
       advanced: true,
+      ...(!isShopify && {
+        defaultValue: true,
+      }),
     },
   ],
 } as any);

package/src/blocks/Video.tsx

@@ -40,17 +40,21 @@ class VideoComponent extends React.Component<{
   };
 
   updateVideo() {
-    if (this.video) {
-      const attributes: Array<'muted' | 'playsInline' | 'autoPlay'> = [
+    const video = this.video;
+    if (video) {
+      // There are some issues with boolean attributes and media elements
+      // see: https://github.com/facebook/react/issues/10389
+      const boolProps: Array<'muted' | 'playsInline' | 'autoPlay'> = [
         'muted',
         'playsInline',
         'autoPlay',
       ];
-      attributes.forEach(attr => {
-        if (this.props[attr]) {
-          this.video?.setAttribute(attr.toLowerCase(), 'true');
+      boolProps.forEach(prop => {
+        const attr = prop.toLowerCase();
+        if (this.props[prop]) {
+          video.setAttribute(attr, attr);
         } else {
-          this.video?.removeAttribute(attr.toLowerCase());
+          video.removeAttribute(attr);
         }
       });
     }
@@ -151,9 +155,10 @@ class VideoComponent extends React.Component<{
           <div css={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>
             {children}
           </div>
-        ) : (
+        ) : children ? (
           <div
             css={{
+              pointerEvents: 'none',
               display: 'flex',
               flexDirection: 'column',
               alignItems: 'stretch',
@@ -166,7 +171,7 @@ class VideoComponent extends React.Component<{
           >
             {children}
           </div>
-        )}
+        ) : null}
       </div>
     );
   }
@@ -190,52 +195,6 @@ export const Video = Builder.registerComponent(withChildren(VideoComponent), {
       defaultValue:
         'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f',
       required: true,
-      onChange: (options: Map<string, any>) => {
-        const DEFAULT_ASPECT_RATIO = 0.7004048582995948;
-        function loadImage(url: string, timeout = 60000): Promise<HTMLImageElement> {
-          return new Promise((resolve, reject) => {
-            const img = document.createElement('img');
-            let loaded = false;
-            img.onload = () => {
-              loaded = true;
-              resolve(img);
-            };
-
-            img.addEventListener('error', event => {
-              console.warn('Image load failed', event.error);
-              reject(event.error);
-            });
-
-            img.src = url;
-            setTimeout(() => {
-              if (!loaded) {
-                reject(new Error('Image load timed out'));
-              }
-            }, timeout);
-          });
-        }
-
-        function round(num: number) {
-          return Math.round(num * 1000) / 1000;
-        }
-
-        // // TODO
-        const value = options.get('image');
-        const aspectRatio = options.get('aspectRatio');
-        if (value && (!aspectRatio || aspectRatio === DEFAULT_ASPECT_RATIO)) {
-          return loadImage(value).then(img => {
-            const possiblyUpdatedAspectRatio = options.get('aspectRatio');
-            if (
-              options.get('image') === value &&
-              (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)
-            ) {
-              if (img.width && img.height) {
-                options.set('aspectRatio', round(img.height / img.width));
-              }
-            }
-          });
-        }
-      },
     },
     {
       name: 'posterImage',

package/src/components/builder-block.component.tsx

@@ -361,6 +361,18 @@ export class BuilderBlock extends React.Component<
           InnerComponent = componentInfo.class;
         } else if (componentInfo && componentInfo.tag) {
           InnerComponent = componentInfo.tag;
+        } else {
+          if (componentName.startsWith('Builder:')) {
+            console.warn(
+              `Missing @builder.io/widgets installation, please install and import @builder.io/widgets to use ${
+                componentName.split(':')[1]
+              } in your content, more info here: https://github.com/BuilderIO/builder/tree/main/packages/widgets`
+            );
+          } else {
+            console.warn(
+              `Missing registration for ${componentName}, have you included the registration in your bundle?`
+            );
+          }
         }
       }
     }
@@ -630,13 +642,7 @@ export class BuilderBlock extends React.Component<
 
     if (block.repeat && block.repeat.collection) {
       const collectionPath = block.repeat.collection;
-      const collectionName = last(
-        (collectionPath || '')
-          .trim()
-          .split('(')[0]
-          .trim()
-          .split('.')
-      );
+      const collectionName = last((collectionPath || '').trim().split('(')[0].trim().split('.'));
       const itemName = block.repeat.itemName || (collectionName ? collectionName + 'Item' : 'item');
       const array = this.stringToFunction(collectionPath)(
         state.state,

package/src/components/builder-component.component.tsx

@@ -73,11 +73,11 @@ const size = (thing: object) => Object.keys(thing).length;
 
 function debounce(func: Function, wait: number, immediate = false) {
   let timeout: any;
-  return function(this: any) {
+  return function (this: any) {
     const context = this;
     const args = arguments;
     clearTimeout(timeout);
-    timeout = setTimeout(function() {
+    timeout = setTimeout(function () {
       timeout = null;
       if (!immediate) func.apply(context, args);
     }, wait);
@@ -1091,7 +1091,7 @@ export class BuilderComponent extends React.Component<
                           const useBuilderState = (initialState: any) => {
                             const [, setTick] = React.useState(0);
                             const [state] = React.useState(() =>
-                              onChange(initialState, function() {
+                              onChange(initialState, function () {
                                 setTick(tick => tick + 1);
                               })
                             );

package/src/functions/block-to-html-string.ts

@@ -1,11 +1,7 @@
 import { BuilderElement } from '@builder.io/sdk';
 
 export const htmlEscape = (str: string) =>
-  str
-    .replace(/&/g, '&')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;');
+  str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 
 // TODO: handle self closing tags
 // TODO: how allow components (e.g. react components) in templates?

package/src/functions/throttle.ts

@@ -4,13 +4,13 @@ export function throttle(func: Function, wait: number, options: any = {}) {
   let result: any;
   let timeout = null as any;
   let previous = 0;
-  const later = function() {
+  const later = function () {
     previous = options.leading === false ? 0 : Date.now();
     timeout = null;
     result = func.apply(context, args);
     if (!timeout) context = args = null;
   };
-  return function(this: any) {
+  return function (this: any) {
     const now = Date.now();
     if (!previous && options.leading === false) previous = now;
     const remaining = wait - (now - previous);

package/test/functions/render-block.ts

@@ -2,13 +2,7 @@ import { BuilderElement } from '@builder.io/sdk';
 
 export const el = (options?: Partial<BuilderElement>, useId?: number): BuilderElement => ({
   '@type': '@builder.io/sdk:Element',
-  id: `builder-${
-    useId
-      ? useId
-      : Math.random()
-          .toString()
-          .split('.')[1]
-  }`,
+  id: `builder-${useId ? useId : Math.random().toString().split('.')[1]}`,
   ...options,
 });