unframer 2.0.1 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unframer",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "",
   "repository": "https://github.com/remorses/unframer",
   "bin": "bin.js",
@@ -18,7 +18,8 @@
       "types": "./dist/index.d.ts",
       "module": "./esm/index.js",
       "default": "./dist/index.js"
-    }
+    },
+    "./package.json": "./package.json"
   },
   "keywords": [],
   "author": "Tommaso De Rossi, morse <beats.by.morse@gmail.com>",

package/src/cli.test.ts

@@ -97,50 +97,3 @@ test(
     },
     1000 * 10,
 )
-test(
-    'bundle simple component',
-    async () => {
-        const tempFolder = tmp.dirSync({ unsafeCleanup: true }).name
-        console.log('tempFolder', tempFolder)
-        const url =
-            'https://framer.com/m/Logo-Ticker-1CEq.js@YtVlixDzOkypVBs3Dpav'
-        await bundle({
-            components: {
-                ticker: url,
-            },
-            cwd: tempFolder,
-        })
-    },
-    1000 * 10,
-)
-test(
-    'issue #1',
-    async () => {
-        const tempFolder = tmp.dirSync({ unsafeCleanup: true }).name
-        console.log('tempFolder', tempFolder)
-        const url = 'https://framer.com/m/Item-Qetw.js@vUDyI0yvPLONiBDf8Kzw'
-        await bundle({
-            components: {
-                item: url,
-            },
-            cwd: tempFolder,
-        })
-    },
-    1000 * 10,
-)
-test(
-    'bundle ticker variant',
-    async () => {
-        const tempFolder = tmp.dirSync({ unsafeCleanup: true }).name
-        console.log('tempFolder', tempFolder)
-        const url =
-            'https://framer.com/m/Brand-Logo-Ticker-Uc8E.js@WLfLN2D3C6m9DWtZu0ci'
-        await bundle({
-            components: {
-                logos: url,
-            },
-            cwd: tempFolder,
-        })
-    },
-    1000 * 10,
-)

package/src/css.ts

@@ -80,7 +80,9 @@ export function getFontsStyles(_fontsDefs: ComponentFontBundle[]) {
     const allFonts = deduplicateByKey(
         _fontsDefs.flatMap((x) => x.fonts),
         (x) => x?.url,
-    ).filter((x) => x.url)
+    )
+        .filter((x) => x.url)
+        .sort((a, b) => a.url.localeCompare(b.url))
 
     // group fonts by the filenames users
     const grouped = groupBy(allFonts, (x) => {

package/src/exporter.ts

@@ -26,7 +26,11 @@ import {
 } from './css.js'
 import dedent from 'dedent'
 import { logger } from './utils.js'
-import { esbuildPluginBundleDependencies, resolveRedirect, externalPackages } from './esbuild'
+import {
+    esbuildPluginBundleDependencies,
+    resolveRedirect,
+    externalPackages,
+} from './esbuild'
 
 function validateUrl(url: string) {
     try {
@@ -69,6 +73,7 @@ export async function bundle({
         metafile: true,
         format: 'esm',
         minify: false,
+
         treeShaking: true,
         splitting: true,
         // splitting: true,
@@ -132,12 +137,14 @@ export async function bundle({
                 .readFile(file.path, 'utf-8')
                 .catch(() => null)
 
-            const codeNew = dprint.format(resultPathAbs, file.text, {
-                lineWidth: 140,
-                quoteStyle: 'alwaysSingle',
-                trailingCommas: 'always',
-                semiColons: 'always',
-            })
+            let codeNew =
+                `/* eslint-disable */\n` +
+                dprint.format(resultPathAbs, file.text, {
+                    lineWidth: 140,
+                    quoteStyle: 'alwaysSingle',
+                    trailingCommas: 'always',
+                    semiColons: 'always',
+                })
             const lines = findRelativeLinks(codeNew)
             if (lines.length) {
                 logger.error(

package/src/framer.js

@@ -9089,7 +9089,7 @@ var cancelSync = stepsOrder.reduce((acc, key7,) => {
   return acc;
 }, {},);
 
-// https :https://app.framerstatic.com/framer.L736M3IJ.js
+// https :https://app.framerstatic.com/framer.PRO3WDEJ.js
 import { Component as Component2, } from 'react';
 import React12 from 'react';
 import { jsx as _jsx5, } from 'react/jsx-runtime';
@@ -9288,13 +9288,13 @@ import { jsx as jsx54, jsxs as jsxs18, } from 'react/jsx-runtime';
 import { jsx as jsx55, } from 'react/jsx-runtime';
 import { jsx as jsx56, } from 'react/jsx-runtime';
 import { jsx as jsx57, } from 'react/jsx-runtime';
+import React85 from 'react';
 import { jsx as jsx58, } from 'react/jsx-runtime';
-import { useRef as useRef18, } from 'react';
 import { jsx as jsx59, } from 'react/jsx-runtime';
-import { useRef as useRef19, } from 'react';
-import { jsx as jsx60, } from 'react/jsx-runtime';
-import React85 from 'react';
-import { jsx as jsx61, jsxs as jsxs19, } from 'react/jsx-runtime';
+import React86 from 'react';
+import { jsx as jsx60, jsxs as jsxs19, } from 'react/jsx-runtime';
+import React87 from 'react';
+import { jsx as jsx61, jsxs as jsxs20, } from 'react/jsx-runtime';
 import {
   Children as Children32,
   cloneElement as cloneElement32,
@@ -9302,10 +9302,10 @@ import {
   isValidElement as isValidElement32,
   useContext as useContext162,
   useInsertionEffect as useInsertionEffect42,
-  useRef as useRef21,
+  useRef as useRef19,
 } from 'react';
-import * as React86 from 'react';
-import { useRef as useRef20, } from 'react';
+import * as React88 from 'react';
+import { useRef as useRef18, } from 'react';
 import { jsx as jsx62, } from 'react/jsx-runtime';
 import { jsx as jsx63, } from 'react/jsx-runtime';
 import { useEffect as useEffect142, useState as useState22, } from 'react';
@@ -10463,12 +10463,13 @@ var require_fontfaceobserver_standalone = __commonJS({
   },
 },);
 function renderPage(Page4, defaultPageStyle,) {
-  return React12.isValidElement(Page4,)
-    ? React12.cloneElement(Page4, { style: defaultPageStyle, },)
-    : React12.createElement(Page4, { style: defaultPageStyle, },);
+  const style = { style: defaultPageStyle, };
+  return React12.isValidElement(Page4,) ? React12.cloneElement(Page4, style,) : React12.createElement(Page4, style,);
 }
 var NotFoundError = class extends Error {
 };
+var ErrorBoundaryCaughtError = class extends Error {
+};
 var ErrorBoundary = class extends Component2 {
   constructor(props,) {
     super(props,);
@@ -10495,7 +10496,9 @@ var ErrorBoundary = class extends Component2 {
       return this.props.children;
     }
     if (!(this.state.error instanceof NotFoundError)) {
-      throw this.state.error;
+      const error = new ErrorBoundaryCaughtError();
+      error.cause = this.state.error;
+      throw error;
     }
     const { notFoundPage, defaultPageStyle, } = this.props;
     if (!notFoundPage) {
@@ -11377,17 +11380,17 @@ function RoutesProvider({ routes, children, },) {
   return _jsx2(RouterContext.Provider, { value: { getRoute, }, children, },);
 }
 var SuspenseErrorBoundary = class extends Component22 {
-  constructor(props,) {
-    super(props,);
+  constructor() {
+    super(...arguments,);
     this.state = { error: void 0, };
   }
   static getDerivedStateFromError(error,) {
-    console.error('Error in SuspenseErrorBoundary (getDerivedStateFromError).', error,);
+    console.error('Derived error in SuspenseErrorBoundary', error,);
     return { error, };
   }
   componentDidCatch(error, errorInfo,) {
     var _a;
-    console.error('Caught error in in SuspenseErrorBoundary.', error, errorInfo,);
+    console.error('Caught error in SuspenseErrorBoundary', error, errorInfo,);
     (_a = window.__framer_events) === null || _a === void 0 ? void 0 : _a.push([
       'published_site_load_recoverable_error',
       {
@@ -11400,6 +11403,9 @@ var SuspenseErrorBoundary = class extends Component22 {
     if (this.state.error === void 0) {
       return this.props.children;
     }
+    if (this.state.error instanceof ErrorBoundaryCaughtError) {
+      throw this.state.error.cause;
+    }
     return _jsx3(Suspense, { children: this.props.fallbackChildren, },);
   }
 };
@@ -17030,6 +17036,7 @@ var hideScrollbars = [
   `[data-hide-scrollbars="true"]::-webkit-scrollbar { width: 0px; height: 0px; }`,
   `[data-hide-scrollbars="true"]::-webkit-scrollbar-thumb { background: transparent; }`,
 ];
+var formInputRules = [`[data-framer-component-type="Form"] input { padding: var(--input-padding); }`,];
 var frameCSSRules = (isPreview,) => {
   return isPreview ? frameCSS : [];
 };
@@ -17051,6 +17058,7 @@ var combineCSSRules = (isPreview,) => [
   ...svgCSSRules,
   ...resetCSS,
   ...hideScrollbars,
+  ...formInputRules,
 ];
 export var combinedCSSRules = combineCSSRules(false,);
 var combinedCSSRulesForPreview = combineCSSRules(true,);
@@ -20674,7 +20682,7 @@ var VisibleFrame = /* @__PURE__ */ forwardRef4(function VisibleFrame2(props, for
   const fallbackRef = useRef62(null,);
   const ref = forwardedRef ?? fallbackRef;
   const dataProps = {
-    'data-framer-component-type': 'Frame',
+    'data-framer-component-type': props.componentType ?? 'Frame',
     'data-framer-cursor': cursor,
     'data-framer-highlight': cursor === 'pointer' ? true : void 0,
     'data-layoutid': layoutId,
@@ -24573,6 +24581,9 @@ function makePaddingString({
   bottom,
   right,
 },) {
+  if (top === right && right === bottom && bottom === left) {
+    return `${top}px`;
+  }
   return `${top}px ${right}px ${bottom}px ${left}px`;
 }
 function triggerStackReflow(element, display,) {
@@ -28220,6 +28231,9 @@ function useStyleTransform({
             if (pageInputRange.length !== outputRange[key7].length) {
               continue;
             }
+            if (outputRange[key7][0] === void 0) {
+              continue;
+            }
             effect.values[key7].set(transform(scrollY.progress, pageInputRange, outputRange[key7],),);
           }
         },
@@ -28249,6 +28263,9 @@ function useStyleTransform({
           if (scrollYInputRange.length !== effectKeyOutputRange[key7].length) {
             continue;
           }
+          if (effectKeyOutputRange[key7][0] === void 0) {
+            continue;
+          }
           effect.values[key7].set(transform(scrollY.current, scrollYInputRange, effectKeyOutputRange[key7],),);
         }
       },);
@@ -37658,37 +37675,37 @@ function CustomProperties({
 },) {
   return /* @__PURE__ */ jsx57('div', { style: customProperties, children, },);
 }
-var FormContainer = (props,) => {
-  return /* @__PURE__ */ jsx58(FrameWithMotion, { ...props, as: 'form', },);
-};
-var FormButton = (props,) => {
-  const { __fromCanvasComponent, style: baseStyle2, } = props;
-  const layoutId = useLayoutId2(props,);
-  const ref = useRef18(null,);
+var FormButton = /* @__PURE__ */ React85.forwardRef(function FormButon(props, ref,) {
+  const [submitting, setSubmitting,] = React85.useState(false,);
+  const { style: baseStyle2, } = props;
   const style = mergeWithDefaultStyle(baseStyle2 ?? {},);
-  const dataProps = {
-    'data-layoutid': layoutId,
+  const onSubmit = () => {
+    setSubmitting(true,);
+    setTimeout(() => {
+      setSubmitting(false,);
+    }, 500,);
   };
-  const isDisabled = Boolean(__fromCanvasComponent,);
-  useMeasureLayout(props, ref,);
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx58(
     motion.input,
     {
       type: props.type,
-      disabled: isDisabled,
-      ...dataProps,
-      layoutId,
+      'data-submitting': submitting,
+      disabled: props.isDisabled || submitting,
       ref,
-      style: { ...baseStyle2, ...style, },
-      value: props.value ?? 'Submit',
+      style,
+      value: submitting ? 'Submitting' : props.value ?? 'Submit',
+      onClick: onSubmit,
     },
   );
-};
+},);
 function mergeWithDefaultStyle(style,) {
   return {
     display: 'block',
     padding: '12px',
+    fontSize: '14px',
     width: '100%',
+    fontWeight: 'bold',
+    cursor: 'pointer',
     background: '#222',
     color: '#fff',
     borderRadius: '10px',
@@ -37696,45 +37713,88 @@ function mergeWithDefaultStyle(style,) {
     ...style,
   };
 }
-var FormPlainTextInput = (props,) => {
-  const { __fromCanvasComponent, } = props;
-  const layoutId = useLayoutId2(props,);
-  const ref = useRef19(null,);
+var FormContainer = ({ action: _, formId, ...props },) => {
+  const handleSubmit = async (event,) => {
+    event.preventDefault();
+    const data2 = new URLSearchParams();
+    for (const [key7, value,] of new FormData(event.currentTarget,)) {
+      data2.append(key7, value,);
+    }
+    await fetch('https://hooks.zapier.com/hooks/catch/8935032/3pzgf76/', {
+      body: new URLSearchParams(data2,),
+      method: 'POST',
+    },);
+  };
+  return /* @__PURE__ */ jsx59(motion.form, { ...props, 'data-formid': formId, onSubmit: handleSubmit, children: props.children, },);
+};
+var passwordManagerIgnoreDataProps = {
+  // 1Password
+  'data-1p-ignore': true,
+  // LastPass
+  'data-lpignore': true,
+};
+var sensibleInputDefaults = {
+  autocomplete: 'off',
+};
+var labelStyles = {
+  display: 'block',
+  marginBottom: 8,
+  fontSize: 12,
+  color: '#000',
+  width: '100%',
+  fontWeight: 'bold',
+  textTransform: 'capitalize',
+};
+var FormPlainTextInput = /* @__PURE__ */ React86.forwardRef(function FormPlainTextInput2(props, ref,) {
   const dataProps = {
-    'data-layoutid': layoutId,
+    ...sensibleInputDefaults,
+    ...passwordManagerIgnoreDataProps,
   };
-  const isDisabled = Boolean(__fromCanvasComponent,);
-  useMeasureLayout(props, ref,);
   const baseStyle2 = {
-    padding: '12px',
+    fontSize: '14px',
     width: '100%',
     background: '#f5f5f5',
     borderRadius: '10px',
     border: '1px solid rgba(0,0,0,0.05)',
   };
-  return /* @__PURE__ */ jsx60(
+  const input = /* @__PURE__ */ jsx60(
     motion.input,
     {
-      disabled: isDisabled,
+      id: props.inputName,
+      disabled: props.isDisabled,
       ...dataProps,
-      layoutId,
-      ref,
-      style: {
-        ...baseStyle2,
-        ...props.style,
-      },
+      type: props.type,
+      required: props.required,
+      autoFocus: props.autoFocus,
+      name: props.inputName,
+      style: baseStyle2,
       placeholder: props.placeholder,
     },
   );
-};
-var Image2 = /* @__PURE__ */ React85.forwardRef(function Image3(props, ref,) {
+  if (props.label) {
+    return /* @__PURE__ */ jsx60('div', {
+      ref,
+      style: { width: '100%', },
+      children: /* @__PURE__ */ jsxs19('label', {
+        style: { width: '100%', },
+        htmlFor: props.inputName,
+        children: [
+          /* @__PURE__ */ jsx60('span', { style: labelStyles, children: props.label, },),
+          input,
+        ],
+      },),
+    },);
+  }
+  return /* @__PURE__ */ jsx60('div', { ref, style: { width: '100%', }, children: input, },);
+},);
+var Image2 = /* @__PURE__ */ React87.forwardRef(function Image3(props, ref,) {
   const { background, children, alt, ...rest } = props;
   const style = { ...rest.style, };
   if (background) {
     delete style.background;
   }
   const MotionComponent = htmlElementAsMotionComponent(props.as,);
-  return /* @__PURE__ */ jsxs19(MotionComponent, {
+  return /* @__PURE__ */ jsxs20(MotionComponent, {
     ...rest,
     style,
     ref,
@@ -37874,7 +37934,7 @@ function escapeHTML2(str,) {
 }
 var deprecatedRichTextPlaceholder = '{{ text-placeholder }}';
 var richTextWrapperClassName = 'rich-text-wrapper';
-var DeprecatedRichText = /* @__PURE__ */ React86.forwardRef(
+var DeprecatedRichText = /* @__PURE__ */ React88.forwardRef(
   function Text3(props, forwardedRef,) {
     const {
       id: id3,
@@ -37916,13 +37976,13 @@ var DeprecatedRichText = /* @__PURE__ */ React86.forwardRef(
     } = props;
     const parentSize = useParentSize();
     const layoutId = useLayoutId2(props,);
-    const fallbackLayoutRef = useRef20(null,);
+    const fallbackLayoutRef = useRef18(null,);
     const layoutRef = forwardedRef ?? fallbackLayoutRef;
     const { navigate, getRoute, } = useRouter();
     const currentRoute = useCurrentRoute();
     useRoutePreloader(props.preload ?? [],);
     useMeasureLayout(props, layoutRef,);
-    const inCodeComponent = React86.useContext(ComponentContainerContext,);
+    const inCodeComponent = React88.useContext(ComponentContainerContext,);
     const isOnCanvas = useIsOnFramerCanvas();
     let textOrOverride = text;
     const forwardedOverrideId = _forwardedOverrideId ?? id3;
@@ -37945,13 +38005,13 @@ var DeprecatedRichText = /* @__PURE__ */ React86.forwardRef(
       innerHTML = htmlFromDesign;
     }
     const implicitPathVariables = useImplicitPathVariables();
-    const innerHTMLWithReplacedFramerPageLinks = React86.useMemo(() => {
+    const innerHTMLWithReplacedFramerPageLinks = React88.useMemo(() => {
       if (isOnCanvas || !getRoute || !currentRoute) {
         return innerHTML;
       }
       return replaceFramerPageLinks(innerHTML, getRoute, currentRoute, implicitPathVariables,);
     }, [isOnCanvas, innerHTML, getRoute, currentRoute, implicitPathVariables,],);
-    React86.useEffect(() => {
+    React88.useEffect(() => {
       const container = layoutRef.current;
       if (container === null) {
         return;
@@ -37972,7 +38032,7 @@ var DeprecatedRichText = /* @__PURE__ */ React86.forwardRef(
       };
     }, [navigate, implicitPathVariables,],);
     useLoadFonts(fonts, __fromCanvasComponent, layoutRef,);
-    React86.useInsertionEffect(() => {
+    React88.useInsertionEffect(() => {
       injectComponentCSSRules();
     }, [],);
     if (!visible) {
@@ -38057,7 +38117,7 @@ function convertVerticalAlignment2(verticalAlignment,) {
   }
 }
 function useLoadFonts(fonts, fromCanvasComponent, containerRef,) {
-  const prevFontsRef = useRef20([],);
+  const prevFontsRef = useRef18([],);
   if (!isShallowEqualArray(prevFontsRef.current, fonts,)) {
     prevFontsRef.current = fonts;
     fontStore.loadFonts(fonts,).then(({ newlyLoadedFontCount, },) => {
@@ -38133,7 +38193,7 @@ var RichTextContainer = /* @__PURE__ */ forwardRef52(
     const isOnCanvas = useIsOnFramerCanvas();
     const inCodeComponent = useContext162(ComponentContainerContext,);
     const layoutId = useLayoutId2(props,);
-    const fallbackRef = useRef21(null,);
+    const fallbackRef = useRef19(null,);
     const containerRef = ref ?? fallbackRef;
     useMeasureLayout(props, containerRef,);
     useLoadFonts(fonts, __fromCanvasComponent, containerRef,);
@@ -38697,7 +38757,9 @@ var package_default = {
   scripts: {
     prepublishOnly: 'make build',
     coverage: 'yarn :jest --coverage',
-    lint: 'yarn :eslint ./src --ext .ts,.tsx --format codeframe --quiet',
+    lint: 'yarn format-check:ts && yarn :eslint ./src --ext .ts,.tsx --format codeframe --quiet',
+    'format:ts': 'yarn :format "src/**/*.{ts,tsx}"',
+    'format-check:ts': 'yarn :format-check "src/**/*.{ts,tsx}"',
     'lint:fix': 'yarn lint --fix --cache',
     test: 'yarn :jest',
     watch: 'yarn :jest --watch',