unframer 0.6.0

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "unframer",
+  "version": "0.6.0",
+  "description": "",
+  "type": "module",
+  "repository": "https://github.com/remorses/unframer",
+  "bin": "bin.mjs",
+  "files": [
+    "dist",
+    "framer-fixed",
+    "bin.mjs",
+    "src",
+    "README.md",
+    "esm"
+  ],
+  "exports": {
+    "./dist/framer": {
+      "default": "./dist/framer.js"
+    },
+    "./dist/react": {
+      "default": "./dist/react.js"
+    }
+  },
+  "keywords": [],
+  "author": "Tommaso De Rossi, morse <beats.by.morse@gmail.com>",
+  "license": "",
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "dependencies": {
+    "@juggle/resize-observer": "^3.3.1",
+    "chokidar": "^3.5.3",
+    "csstype": "^3.1.2",
+    "dprint-node": "^1.0.8",
+    "esbuild": "^0.20.2",
+    "esbuild-plugin-polyfill-node": "^0.3.0",
+    "eventemitter3": "^3.1.0",
+    "find-up": "^6.3.0",
+    "fontfaceobserver": "^2.1.0",
+    "framer-motion": "11.0.13",
+    "fs-extra": "^11.1.1",
+    "hey-listen": "^1.0.8",
+    "hoist-non-react-statics": "^3.3.2",
+    "hsluv": "^0.0.3",
+    "native-fetch": "^4.0.2",
+    "picocolors": "^1.0.0",
+    "popmotion": "^11.0.5",
+    "style-value-types": "^5.1.2",
+    "tmp": "^0.2.1",
+    "undici": "^5.22.1"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.1",
+    "@types/node": "^20.5.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "scripts": {
+    "build": "tsc && cp ../README.md ./README.md",
+    "watch": "tsc -w"
+  }
+}

package/src/cli.test.ts

@@ -0,0 +1,52 @@
+import tmp from 'tmp'
+import path from 'path'
+import { test, expect } from 'vitest'
+import { bundle } from './exporter.js'
+
+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/cli.tsx

@@ -0,0 +1,114 @@
+import { bundle, logger } from './exporter.js'
+import chokidar from 'chokidar'
+import fs from 'fs-extra'
+import { findUp } from 'find-up'
+import tmp from 'tmp'
+import path from 'path'
+const configName = 'unframer.json'
+
+const __dirname = path.dirname(new URL(import.meta.url).pathname)
+
+export async function cli() {
+    const cwd = process.cwd()
+    const watch = process.argv.includes('--watch')
+    logger.log(`Looking for ${configName} in ${cwd}`)
+    const configPath = await findUp([configName], { cwd })
+    if (!configPath) {
+        logger.log(`No ${configName} found`)
+        return
+    }
+    const configContent = fs.readFileSync(configPath, 'utf8')
+    if (!configContent) {
+        logger.log(`No ${configName} contents found`)
+        return
+    }
+    let config = JSON.parse(configContent)
+
+    await processConfig(config)
+    if (watch) {
+        const watcher = chokidar.watch(configPath, {
+            persistent: true,
+        })
+        let controller = new AbortController()
+
+        watcher.on('change', async (path) => {
+            console.log()
+            controller.abort()
+            controller = new AbortController()
+
+            const newConfig = safeJsonParse(fs.readFileSync(configPath, 'utf8'))
+            if (!newConfig) {
+                logger.log(`Invalid ${configName} file`)
+                return
+            }
+            const newNames = getNewNames(config, newConfig)
+            if (newNames.length) {
+                logger.log(`New components found: ${newNames.join(', ')}`)
+                await processConfig(
+                    {
+                        ...newConfig,
+                        components: pluck(newConfig.components, newNames),
+                    },
+                    controller.signal,
+                )
+            }
+            config = newConfig
+        })
+    }
+}
+function safeJsonParse(json: string) {
+    try {
+        return JSON.parse(json)
+    } catch (e) {
+        return null
+    }
+}
+
+function pluck<T, K extends keyof T>(o: T, names: K[]): { [k: string]: T[K] } {
+    return Object.fromEntries(names.map((n) => [n, o[n]]))
+}
+
+function getNewNames(oldConfig: Config, newConfig: Config) {
+    // get the new names, also check if the previous url (object value) has changed
+    const oldKeys = Object.keys(oldConfig.components)
+    const newKeys = Object.keys(newConfig.components)
+    const newNames = newKeys.filter((key) => {
+        if (!oldKeys.includes(key)) {
+            return true
+        }
+        if (oldConfig.components[key] !== newConfig.components[key]) {
+            return true
+        }
+        return false
+    })
+    return newNames
+}
+
+type Config = {
+    components: {
+        [name: string]: string
+    }
+    outDir?: string
+}
+async function processConfig(config: Config, signal?: AbortSignal) {
+    try {
+        const { components, outDir } = config || {}
+        const installDir = path.resolve(process.cwd(), outDir || 'framer')
+        if (!components) {
+            logger.log(`No components found in ${configName}`)
+            return
+        }
+
+        await bundle({
+            components,
+            cwd: installDir,
+            signal,
+        })
+    } catch (e: any) {
+        if (signal) {
+            logger.log('Error processing config', e.message)
+            return
+        }
+        throw e
+    }
+}