unframer 2.25.4 → 2.26.0

package/src/css.ts

@@ -91,7 +91,7 @@ export function getFontsStyles(_fontsDefs: ComponentFontBundle[]) {
                     let str = ''
                     str += dedent`
                     @font-face {
-                        font-family: '${x.family}'; 
+                        font-family: '${x.family}';
                         src: url('${x.url}');\n
                     `
                     if (x.style) {
@@ -132,7 +132,7 @@ export const breakpointsStylesLegacy = (breakpointSizes?: BreakpointSizes) => {
 @media (min-width: ${breakpointSizes.base}px) and (max-width: ${
         breakpointSizes.sm - 1
     }px) {
-    .unframer-hidden.unframer-base { 
+    .unframer-hidden.unframer-base {
         display: contents;
     }
 }
@@ -141,7 +141,7 @@ export const breakpointsStylesLegacy = (breakpointSizes?: BreakpointSizes) => {
 @media (min-width: ${breakpointSizes.sm}px) and (max-width: ${
         breakpointSizes.md - 1
     }px) {
-    .unframer-hidden.unframer-sm { 
+    .unframer-hidden.unframer-sm {
         display: contents;
     }
 }
@@ -150,7 +150,7 @@ export const breakpointsStylesLegacy = (breakpointSizes?: BreakpointSizes) => {
 @media (min-width: ${breakpointSizes.md}px) and (max-width: ${
         breakpointSizes.lg - 1
     }px) {
-    .unframer-hidden.unframer-md { 
+    .unframer-hidden.unframer-md {
         display: contents;
     }
 }
@@ -159,7 +159,7 @@ export const breakpointsStylesLegacy = (breakpointSizes?: BreakpointSizes) => {
 @media (min-width: ${breakpointSizes.lg}px) and (max-width: ${
         breakpointSizes.xl - 1
     }px) {
-    .unframer-hidden.unframer-lg { 
+    .unframer-hidden.unframer-lg {
         display: contents;
     }
 }
@@ -168,14 +168,14 @@ export const breakpointsStylesLegacy = (breakpointSizes?: BreakpointSizes) => {
 @media (min-width: ${breakpointSizes.xl}px) and (max-width: ${
         breakpointSizes['2xl'] - 1
     }px) {
-    .unframer-hidden.unframer-xl { 
+    .unframer-hidden.unframer-xl {
         display: contents;
     }
 }
 
 /* 2 Extra Large */
 @media (min-width: ${breakpointSizes['2xl']}px) {
-    .unframer-hidden.unframer-2xl { 
+    .unframer-hidden.unframer-2xl {
         display: contents;
     }
 }
@@ -190,42 +190,42 @@ export const breakpointsStyles = (breakpointSizes?: BreakpointSizes) => {
     return /* css */ `
 /* Base */
 @media (min-width: ${breakpointSizes.base}px) and (max-width: ${breakpointSizes.sm - 1}px) {
-    .unframer:not(.unframer-base) { 
+    .unframer:not(.unframer-base) {
         display: none !important;
     }
 }
 
 /* Small */
 @media (min-width: ${breakpointSizes.sm}px) and (max-width: ${breakpointSizes.md - 1}px) {
-    .unframer:not(.unframer-sm) { 
+    .unframer:not(.unframer-sm) {
         display: none !important;
     }
 }
 
 /* Medium */
 @media (min-width: ${breakpointSizes.md}px) and (max-width: ${breakpointSizes.lg - 1}px) {
-    .unframer:not(.unframer-md) { 
+    .unframer:not(.unframer-md) {
         display: none !important;
     }
 }
 
 /* Large */
 @media (min-width: ${breakpointSizes.lg}px) and (max-width: ${breakpointSizes.xl - 1}px) {
-    .unframer:not(.unframer-lg) { 
+    .unframer:not(.unframer-lg) {
         display: none !important;
     }
 }
 
 /* Extra Large */
 @media (min-width: ${breakpointSizes.xl}px) and (max-width: ${breakpointSizes['2xl'] - 1}px) {
-    .unframer:not(.unframer-xl) { 
+    .unframer:not(.unframer-xl) {
         display: none !important;
     }
 }
 
 /* 2 Extra Large */
 @media (min-width: ${breakpointSizes['2xl']}px) {
-    .unframer:not(.unframer-2xl) { 
+    .unframer:not(.unframer-2xl) {
         display: none !important;
     }
 }

package/src/esbuild.ts

@@ -1,8 +1,11 @@
 import { fetch } from 'undici'
-import { dispatcher, logger, spinner } from './utils'
+import { RateLimit, Sema } from 'async-sema'
+import { logger, spinner } from './utils'
 
 import { Plugin, transform, type OnResolveArgs } from 'esbuild'
 import { resolvePackage } from './exporter'
+import { notifyError } from './sentry'
+import { dispatcher } from './undici-dispatcher'
 
 export const defaultExternalPackages = [
     'react',
@@ -150,86 +153,94 @@ export function esbuildPluginBundleDependencies({
             })
 
             build.onLoad({ filter: /.*/, namespace }, async (args) => {
-                if (signal?.aborted) {
-                    throw new Error('aborted')
-                }
-                const url = args.path
-
-                const resolved = await resolveRedirect({
-                    url,
-                    redirectCache,
-                    signal,
-                })
-                if (codeCache.has(url)) {
-                    const code = await codeCache.get(url)
-                    return {
-                        contents: code,
-                        loader: 'js',
+                try {
+                    if (signal?.aborted) {
+                        throw new Error('aborted')
                     }
-                }
-                let loader = 'jsx' as any
-                const promise = Promise.resolve().then(async () => {
-                    logger.log('fetching', url, 'because of', args.path)
-                    spinner.update(`Fetching ${url.replace(/https?:\/\//, '')}`)
+                    const url = args.path
 
-                    const res = await fetchWithRetry(resolved, {
+                    const resolved = await resolveRedirect({
+                        url,
+                        redirectCache,
                         signal,
-                        dispatcher,
                     })
-                    if (!res.ok) {
-                        throw new Error(
-                            `Cannot fetch ${resolved}: ${res.status} ${res.statusText}`,
-                        )
-                    }
-                    // console.log('type', res.headers.get('content-type'))
-                    if (
-                        res.headers
-                            .get('content-type')
-                            ?.startsWith('application/json')
-                    ) {
-                        loader = 'json'
-                        return await res.text()
+                    if (codeCache.has(url)) {
+                        const code = await codeCache.get(url)
+                        return {
+                            contents: code,
+                            loader: 'js',
+                        }
                     }
-                    let text = await res.text()
+                    let loader = 'jsx' as any
+                    const promise = Promise.resolve().then(async () => {
+                        logger.log('fetching', url, 'because of', args.path)
+                        spinner.update(
+                            `Fetching ${url.replace(/https?:\/\//, '')}`,
+                        )
 
-                    // when it finds a line with /* webpackIgnore: true */
-                    // it also adds /* @vite-ignore */
-                    text = text.replace(
-                        /(\/\* webpackIgnore: true \*\/)/g,
-                        '$1 /* @vite-ignore */',
-                    )
-                    // if (!text.includes('import.meta.url')) {
-                    //     return text
-                    // }
+                        const res = await fetchWithRetry(resolved, {
+                            signal,
+                            dispatcher,
+                        })
+                        if (!res.ok) {
+                            throw new Error(
+                                `Cannot fetch ${resolved}: ${res.status} ${res.statusText}`,
+                            )
+                        }
+                        // console.log('type', res.headers.get('content-type'))
+                        if (
+                            res.headers
+                                .get('content-type')
+                                ?.startsWith('application/json')
+                        ) {
+                            loader = 'json'
+                            return await res.text()
+                        }
+                        let text = await res.text()
 
-                    logger.log('transforming', url)
-                    const transformed = await transform(text, {
-                        define: {
-                            'import.meta.url': JSON.stringify(resolved),
-                            navigator: '__unframerNavigator',
-                        },
-                        // Fix lottie: https://github.com/airbnb/lottie-web/issues/3047
-                        banner: `var __unframerNavigator = typeof window !== 'undefined' ? navigator : undefined;`,
-                        minify: false,
-                        format: 'esm',
-                        jsx: 'transform',
-                        logLevel: 'error',
-                        loader,
-                        platform: 'browser',
+                        // when it finds a line with /* webpackIgnore: true */
+                        // it also adds /* @vite-ignore */
+                        text = text.replace(
+                            /(\/\* webpackIgnore: true \*\/)/g,
+                            '$1 /* @vite-ignore */',
+                        )
+                        // if (!text.includes('import.meta.url')) {
+                        //     return text
+                        // }
+
+                        logger.log('transforming', url)
+                        const transformed = await transform(text, {
+                            define: {
+                                'import.meta.url': JSON.stringify(resolved),
+                                navigator: '__unframerNavigator',
+                            },
+                            // Fix lottie: https://github.com/airbnb/lottie-web/issues/3047
+                            banner: `var __unframerNavigator = typeof window !== 'undefined' ? navigator : undefined;`,
+                            minify: false,
+                            format: 'esm',
+                            jsx: 'transform',
+                            logLevel: 'error',
+                            loader,
+                            platform: 'browser',
+                        })
+                        // console.log('transformed', resolved)
+                        return transformed.code
                     })
-                    // console.log('transformed', resolved)
-                    return transformed.code
-                })
 
-                if (loader === 'jsx') {
-                    codeCache.set(url, promise)
-                }
-                const code = await promise
+                    if (loader === 'jsx') {
+                        codeCache.set(url, promise)
+                    }
+                    const code = await promise
 
-                return {
-                    contents: code,
+                    return {
+                        contents: code,
 
-                    loader,
+                        loader,
+                    }
+                } catch (e) {
+                    logger.error(e.message)
+                    notifyError(e)
+                    process.exit(1)
                 }
             })
         },
@@ -287,12 +298,20 @@ export async function recursiveResolveRedirect(
 
     return url
 }
+let semaphore = new Sema(3)
+let rateLimiter = RateLimit(20, { timeUnit: 1000 })
+
 export const fetchWithRetry = retryTwice(
-    (url: string, options?: RequestInit) => {
+    async (url: string, options?: RequestInit) => {
+        await semaphore.acquire()
+
         const timeout = setTimeout(() => {
-            logger.error('fetch taking more than 5s', url)
-        }, 5000)
-        return fetch(url, options as any).finally(() => clearTimeout(timeout))
+            logger.error('fetch taking more than 10s', url)
+        }, 10000)
+        return await fetch(url, options as any).finally(() => {
+            clearTimeout(timeout)
+            semaphore.release()
+        })
     },
 ) as typeof fetch
 

package/src/example-code.test.ts

@@ -1,7 +1,6 @@
-import { expect, describe, test } from 'vitest'
+import { describe, expect, test } from 'vitest'
+import { configFromFetch } from './cli.js'
 import { createExampleComponentCode } from './exporter.js'
-import { componentNameToPath } from './utils.js'
-import { Config, configFromFetch } from './cli.js'
 
 describe('createExampleComponentCode', () => {
     test('should create example component code', async () => {
@@ -28,44 +27,44 @@ describe('createExampleComponentCode', () => {
           import ArticlesCardFramerComponent from './src/articles-card'
 
           export default function App() {
-              return (
-                  <div className='flex flex-col'>
-                      <NavigationFramerComponent.Responsive
-                          ctaVariant={"ia7uVki50"}
-                      />
-                      <HeroFramerComponent.Responsive/>
-                      <PricingBannerFramerComponent.Responsive/>
-                      <FooterFramerComponent.Responsive
-                          year={"2024"}
-                      />
-                      <FeatureListFramerComponent.Responsive/>
-                      <ServiceSliderFramerComponent.Responsive/>
-                      <SectionTitleFramerComponent.Responsive
-                          text={"We are pioneers in harnessing the power of Blockchain and Web3 technologies to drive innovation, security, and decentralization."}
-                          title={"Smart Automation"}
-                          tagline={"Systems and Building Web3"}
-                          iconVisible={true}
-                          textVisible={true}
-                      />
-                      <ButtonFramerComponent.Responsive
-                          link={"/news"}
-                          buttonTitle={"Read all blog"}
-                          iconVisibility={true}
-                      />
-                      <BrandLogoFramerComponent.Responsive/>
-                      <TestmonialItemFramerComponent.Responsive
-                          name1={"Wade Warren"}
-                          paragraph={"Security is non-negotiable in the decentralized world, and we take this aspect very seriously. Our solutions are built with a robust emphasis on security, utilizing advanced cryptographic"}
-                          designation={"Flutter Developer"}
-                      />
-                      <ArticlesCardFramerComponent.Responsive
-                          date={"Mar 06, 2024 "}
-                          link={"/news/:slug"}
-                          title={"Discoveries from Our Thinkers"}
-                          excerpt={"Experience seamless integration with decentralized applications (DApps)."}
-                      />
-                  </div>
-              );
+            return (
+              <div className='flex flex-col items-center gap-3 '>
+                <NavigationFramerComponent.Responsive
+                  ctaVariant={"Primary"}
+                />
+                <HeroFramerComponent.Responsive/>
+                <PricingBannerFramerComponent.Responsive/>
+                <FooterFramerComponent.Responsive
+                  year={"2024"}
+                />
+                <FeatureListFramerComponent.Responsive/>
+                <ServiceSliderFramerComponent.Responsive/>
+                <SectionTitleFramerComponent.Responsive
+                  text={"We are pioneers in harnessing the power of Blockchain and Web3 technologies to drive innovation, security, and decentralization."}
+                  title={"Smart Automation"}
+                  tagline={"Systems and Building Web3"}
+                  iconVisible={true}
+                  textVisible={true}
+                />
+                <ButtonFramerComponent.Responsive
+                  link={"/news"}
+                  buttonTitle={"Read all blog"}
+                  iconVisibility={true}
+                />
+                <BrandLogoFramerComponent.Responsive/>
+                <TestmonialItemFramerComponent.Responsive
+                  name1={"Wade Warren"}
+                  paragraph={"Security is non-negotiable in the decentralized world, and we take this aspect very seriously. Our solutions are built with a robust emphasis on security, utilizing advanced cryptographic"}
+                  designation={"Flutter Developer"}
+                />
+                <ArticlesCardFramerComponent.Responsive
+                  date={"Mar 06, 2024 "}
+                  link={"/news/:slug"}
+                  title={"Discoveries from Our Thinkers"}
+                  excerpt={"Experience seamless integration with decentralized applications (DApps)."}
+                />
+              </div>
+            );
           };"
         `)
     })