@builder.io/react 2.0.2-3 → 2.0.2-6

package/rollup.config.ts

@@ -14,9 +14,8 @@ const resolvePlugin = resolve();
 
 const externalDependencies = Object.keys(pkg.dependencies)
   .concat(Object.keys(pkg.optionalDependencies || {}))
-  .filter(item => item !== 'tslib');
-// TODO: go back to using peerDependencies once fix rollup iife issue
-// .concat(Object.keys(pkg.peerDependencies || {}))
+  .filter(item => item !== 'tslib')
+  .concat(Object.keys(pkg.peerDependencies || {}))
 
 const options = {
   input: `src/${libraryName}.ts`,
@@ -97,7 +96,7 @@ export default [
       { file: pkg.module, format: 'es', sourcemap: true },
       { file: pkg.main, format: 'cjs', sourcemap: true },
     ],
-    external: externalDependencies,
+    external: externalDependencies.concat('node-fetch'),
     plugins: options.plugins
       .filter(plugin => plugin !== resolvePlugin)
       .concat([

package/src/blocks/Text.tsx

@@ -38,7 +38,7 @@ class TextComponent extends React.Component<TextProps> {
   }
 
   evalExpression(expression: string, state: any) {
-    return expression.replace(/{{([^}]+)}}/g, (match, group) => tryEval(group, state));
+    return String(expression).replace(/{{([^}]+)}}/g, (match, group) => tryEval(group, state));
   }
 
   get allowTextEdit() {

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

@@ -1129,7 +1129,7 @@ export class BuilderComponent extends React.Component<
 
   evalExpression(expression: string) {
     const { data } = this;
-    return expression.replace(/{{([^}]+)}}/g, (match, group) => tryEval(group, data, this._errors));
+    return String(expression).replace(/{{([^}]+)}}/g, (match, group) => tryEval(group, data, this._errors));
   }
 
   async handleRequest(propertyName: string, url: string) {

package/test/__snapshots__/image.test.tsx.snap

@@ -51,6 +51,14 @@ exports[`Image Builder image url 1`] = `
     srcSet="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F755c131471fb49ab91dc0bdc45bc85b5?format=webp&width=100 100w, https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F755c131471fb49ab91dc0bdc45bc85b5?format=webp&width=200 200w, https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F755c131471fb49ab91dc0bdc45bc85b5?format=webp&width=400 400w, https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F755c131471fb49ab91dc0bdc45bc85b5?format=webp&width=800 800w, https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F755c131471fb49ab91dc0bdc45bc85b5?format=webp&width=1200 1200w, https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F755c131471fb49ab91dc0bdc45bc85b5?format=webp&width=1600 1600w, https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F755c131471fb49ab91dc0bdc45bc85b5?format=webp&width=2000 2000w, https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F755c131471fb49ab91dc0bdc45bc85b5?format=webp&width=1003 1003w"
     type="image/webp"
   />
+  <style
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": ".css-2qdlcf{opacity:1;-webkit-transition:opacity 0.2s ease-in-out;transition:opacity 0.2s ease-in-out;object-fit:cover;object-position:center;}",
+      }
+    }
+    data-emotion-css="2qdlcf"
+  />
   <img
     className="builder-image css-2qdlcf"
     loading="lazy"
@@ -68,6 +76,14 @@ exports[`Image Builder image url with width 1`] = `
     srcSet="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F755c131471fb49ab91dc0bdc45bc85b5?format=webp&width=100 100w, https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F755c131471fb49ab91dc0bdc45bc85b5?format=webp&width=200 200w, https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F755c131471fb49ab91dc0bdc45bc85b5?format=webp&width=400 400w, https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F755c131471fb49ab91dc0bdc45bc85b5?format=webp&width=800 800w, https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F755c131471fb49ab91dc0bdc45bc85b5?format=webp&width=1200 1200w, https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F755c131471fb49ab91dc0bdc45bc85b5?format=webp&width=1600 1600w, https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F755c131471fb49ab91dc0bdc45bc85b5?format=webp&width=2000 2000w, https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F755c131471fb49ab91dc0bdc45bc85b5?format=webp&width=1003 1003w"
     type="image/webp"
   />
+  <style
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": ".css-2qdlcf{opacity:1;-webkit-transition:opacity 0.2s ease-in-out;transition:opacity 0.2s ease-in-out;object-fit:cover;object-position:center;}",
+      }
+    }
+    data-emotion-css="2qdlcf"
+  />
   <img
     className="builder-image css-2qdlcf"
     loading="lazy"
@@ -90,6 +106,14 @@ exports[`Image Lazy load 1`] = `
 
 exports[`Image Shopify image url 1`] = `
 <picture>
+  <style
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": ".css-2qdlcf{opacity:1;-webkit-transition:opacity 0.2s ease-in-out;transition:opacity 0.2s ease-in-out;object-fit:cover;object-position:center;}",
+      }
+    }
+    data-emotion-css="2qdlcf"
+  />
   <img
     className="builder-image css-2qdlcf"
     loading="lazy"
@@ -155,6 +179,14 @@ exports[`Image with sizes, srcset, and alt 1`] = `
     srcSet="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F755c131471fb49ab91dc0bdc45bc85b5?format=webp&width=100 100w, https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F755c131471fb49ab91dc0bdc45bc85b5?format=webp&width=200 200w, https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F755c131471fb49ab91dc0bdc45bc85b5?format=webp&width=400 400w, https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F755c131471fb49ab91dc0bdc45bc85b5?format=webp&width=800 800w, https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F755c131471fb49ab91dc0bdc45bc85b5?format=webp&width=1200 1200w, https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F755c131471fb49ab91dc0bdc45bc85b5?format=webp&width=1600 1600w, https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F755c131471fb49ab91dc0bdc45bc85b5?format=webp&width=2000 2000w, https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F755c131471fb49ab91dc0bdc45bc85b5?format=webp&width=1003 1003w"
     type="image/webp"
   />
+  <style
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": ".css-2qdlcf{opacity:1;-webkit-transition:opacity 0.2s ease-in-out;transition:opacity 0.2s ease-in-out;object-fit:cover;object-position:center;}",
+      }
+    }
+    data-emotion-css="2qdlcf"
+  />
   <img
     alt="this great image"
     className="builder-image css-2qdlcf"

package/test/basic.test.tsx

@@ -1,3 +1,7 @@
+/**
+ * @jest-environment jsdom
+ */
+
 import * as React from 'react';
 import { renderToString } from 'react-dom/server';
 import { render } from '@testing-library/react';
@@ -7,8 +11,6 @@ import { el, block } from './functions/render-block';
 
 builder.init('null');
 
-import '@testing-library/jest-dom/extend-expect';
-
 describe('Dummy test', () => {
   it('tests run correctly', () => {
     expect(true).toBeTruthy();