unframer 2.2.1 → 2.3.0

package/esm/react.d.ts

@@ -1,6 +1,6 @@
 import { ComponentType } from 'react';
-import { breakpointSizes } from './css.js';
-export type UnframerBreakpoint = keyof typeof breakpointSizes;
+import { defaultBreakpointSizes } from './css.js';
+export type UnframerBreakpoint = keyof typeof defaultBreakpointSizes;
 /**
  * @deprecated Use styles.css import instead
  */

package/esm/react.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEH,aAAa,EAKhB,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,eAAe,EAAqC,MAAM,UAAU,CAAA;AAW7E,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,eAAe,CAAA;AA+B7D;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAAE,UAAwB,EAAE;;CAAA,GAAG,GAAG,CAiD9D;AAED,eAAO,MAAM,qBAAqB;;kBACM,GAAG;;;;;cAAH,GAAG;;uDA2EzC,CAAA"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEH,aAAa,EAKhB,MAAM,OAAO,CAAA;AACd,OAAO,EAEH,sBAAsB,EAEzB,MAAM,UAAU,CAAA;AAWjB,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,sBAAsB,CAAA;AA8BpE;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAAE,UAAwB,EAAE;;CAAA,GAAG,GAAG,CAmD9D;AAED,eAAO,MAAM,qBAAqB;;kBACM,GAAG;;;;;cAAH,GAAG;;uDA2EzC,CAAA"}

package/esm/react.js

@@ -13,14 +13,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { combinedCSSRules } from './framer';
 import { forwardRef, useId, useMemo, useSyncExternalStore, } from 'react';
-import { breakpointSizes, breakpointsStyles, getFontsStyles } from './css.js';
+import { breakpointsStyles, defaultBreakpointSizes, getFontsStyles, } from './css.js';
 function classNames(...args) {
     return args.filter(Boolean).join(' ');
 }
 // breakpoints from the higher to the lower
-const defaultBreakpoints = Object.keys(breakpointSizes).reverse();
+const defaultBreakpoints = Object.keys(defaultBreakpointSizes).reverse();
 function getBreakpointNameFromWindowWidth(windowWidth) {
-    return defaultBreakpoints.find((name) => windowWidth >= breakpointSizes[name]);
+    return defaultBreakpoints.find((name) => windowWidth >= defaultBreakpointSizes[name]);
 }
 function fillBreakpoints(breakpoints) {
     const breakpointsOrder = ['base', 'sm', 'md', 'lg', 'xl', '2xl'];
@@ -43,7 +43,9 @@ const nothing = () => {
  */
 export function FramerStyles({ Components = [] }) {
     const isClient = useSyncExternalStore(nothing, () => true, () => false);
-    const breakpoints = (_jsx("style", { dangerouslySetInnerHTML: { __html: breakpointsStyles }, suppressHydrationWarning: true, hidden: true }, 'breakpointsStyles'));
+    const breakpoints = (_jsx("style", { dangerouslySetInnerHTML: {
+            __html: breakpointsStyles(defaultBreakpointSizes),
+        }, suppressHydrationWarning: true, hidden: true }, 'breakpointsStyles'));
     const fonts = (_jsx("style", { dangerouslySetInnerHTML: {
             __html: getFontsStyles(Components.map((x) => x.fonts || []).flat()),
         }, suppressHydrationWarning: true, hidden: true }, 'fonts'));

package/esm/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "unframer",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "",
+  "sideEffects": false,
   "repository": "https://github.com/remorses/unframer",
   "bin": "bin.js",
   "files": [
@@ -43,16 +44,27 @@
     "json5": "^2.2.3",
     "native-fetch": "^4.0.2",
     "picocolors": "^1.0.0",
-    "real-framer-motion": "npm:framer-motion@11.0.14",
+    "real-framer-motion": "npm:framer-motion@11.1.7",
     "tmp": "^0.2.1"
   },
   "devDependencies": {
+    "@babel/core": "^7.24.5",
+    "@babel/helper-annotate-as-pure": "^7.22.5",
+    "@babel/helper-environment-visitor": "^7.22.20",
+    "@babel/helper-split-export-declaration": "^7.24.5",
+    "@babel/plugin-transform-react-pure-annotations": "^7.24.1",
+    "@babel/traverse": "^7.24.5",
+    "@babel/types": "^7.24.5",
+    "@types/babel__core": "^7.20.5",
+    "@types/babel__traverse": "^7.20.5",
     "@types/fs-extra": "^11.0.1",
     "@types/node": "^20.5.7",
     "@xmorse/deployment-utils": "^0.1.0",
+    "openai": "^4.40.2",
     "posthtml": "^0.16.6",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "tiktoken": "^1.0.14"
   },
   "scripts": {
     "build": "rm -rf dist && tsc -m esnext --outDir esm && tsc && cp ../README.md ./README.md && cp ./src/framer.d.ts ./dist/framer.d.ts && cp ./src/framer.d.ts ./esm/framer.d.ts",

package/src/cli.tsx

@@ -10,6 +10,7 @@ import path from 'path'
 const configName = 'unframer.json'
 import { cac } from 'cac'
 import { logger } from './utils.js'
+import { BreakpointSizes } from './css.js'
 
 export const cli = cac()
 
@@ -123,6 +124,7 @@ type Config = {
     components: {
         [name: string]: string
     }
+    breakpoints?: BreakpointSizes
     outDir?: string
 }
 async function processConfig({
@@ -135,7 +137,7 @@ async function processConfig({
     signal?: AbortSignal
 }) {
     try {
-        const { components, outDir } = config || {}
+        const { components, breakpoints, outDir } = config || {}
         const installDir = path.resolve(process.cwd(), outDir || 'framer')
         if (!components) {
             logger.log(`No components found in ${configName}`)
@@ -144,6 +146,7 @@ async function processConfig({
 
         await bundle({
             components,
+            breakpoints,
             cwd: installDir,
             watch,
             signal,

package/src/css.ts

@@ -1,15 +1,6 @@
 import dedent from 'dedent'
 import { ComponentFont } from './framer.js'
 
-export const breakpointSizes = {
-    base: 0,
-    sm: 320,
-    md: 768,
-    lg: 960,
-    xl: 1200,
-    '2xl': 1536,
-} as const
-
 function deduplicateByKey<T>(arr: T[], key: (k: T) => string): T[] {
     let map = new Map()
     for (let item of arr) {
@@ -121,11 +112,24 @@ export function getFontsStyles(_fontsDefs: ComponentFontBundle[]) {
     return str
 }
 
-export const breakpointsStyles = /* css */ `
+export const defaultBreakpointSizes = {
+    base: 0,
+    sm: 320,
+    md: 768,
+    lg: 960,
+    xl: 1200,
+    '2xl': 1536,
+} as const
+
+export type BreakpointSizes = typeof defaultBreakpointSizes
+
+export const breakpointsStyles = (breakpointSizes?: BreakpointSizes) => {
+    breakpointSizes = { ...defaultBreakpointSizes, ...breakpointSizes }
+    return /* css */ `
 /* Base */
 @media (min-width: ${breakpointSizes.base}px) and (max-width: ${
-    breakpointSizes.sm - 1
-}px) {
+        breakpointSizes.sm - 1
+    }px) {
     .unframer-hidden.unframer-base { 
         display: contents;
     }
@@ -133,8 +137,8 @@ export const breakpointsStyles = /* css */ `
 
 /* Small */
 @media (min-width: ${breakpointSizes.sm}px) and (max-width: ${
-    breakpointSizes.md - 1
-}px) {
+        breakpointSizes.md - 1
+    }px) {
     .unframer-hidden.unframer-sm { 
         display: contents;
     }
@@ -142,8 +146,8 @@ export const breakpointsStyles = /* css */ `
 
 /* Medium */
 @media (min-width: ${breakpointSizes.md}px) and (max-width: ${
-    breakpointSizes.lg - 1
-}px) {
+        breakpointSizes.lg - 1
+    }px) {
     .unframer-hidden.unframer-md { 
         display: contents;
     }
@@ -151,8 +155,8 @@ export const breakpointsStyles = /* css */ `
 
 /* Large */
 @media (min-width: ${breakpointSizes.lg}px) and (max-width: ${
-    breakpointSizes.xl - 1
-}px) {
+        breakpointSizes.xl - 1
+    }px) {
     .unframer-hidden.unframer-lg { 
         display: contents;
     }
@@ -160,8 +164,8 @@ export const breakpointsStyles = /* css */ `
 
 /* Extra Large */
 @media (min-width: ${breakpointSizes.xl}px) and (max-width: ${
-    breakpointSizes['2xl'] - 1
-}px) {
+        breakpointSizes['2xl'] - 1
+    }px) {
     .unframer-hidden.unframer-xl { 
         display: contents;
     }
@@ -178,6 +182,7 @@ export const breakpointsStyles = /* css */ `
     display: none;
 }
 `
+}
 
 export function groupBy<T>(arr: T[], key: (x: T) => string) {
     const map = new Map<string, T[]>()

package/src/exporter.ts

@@ -19,6 +19,7 @@ import fs from 'fs'
 import path from 'path'
 import { exec, execSync } from 'child_process'
 import {
+    BreakpointSizes,
     ComponentFontBundle,
     breakpointsStyles,
     getFontsStyles,
@@ -45,6 +46,7 @@ export async function bundle({
     cwd: out = '',
     watch = false,
     components = {} as Record<string, string>,
+    breakpoints = {} as BreakpointSizes,
     signal = undefined as AbortSignal | undefined,
 }) {
     out ||= path.resolve(process.cwd(), 'example')
@@ -220,7 +222,7 @@ export async function bundle({
 
         const cssString =
             '/* This css file has all the necessary styles to run all your components */\n' +
-            breakpointsStyles +
+            breakpointsStyles(breakpoints) +
             '\n\n' +
             combinedCSSRules
                 .map((x) => (x?.startsWith('  ') ? dedent(x) : x))