Locale sync - fix possible out of memory export crash

plugins/locale-sync/package.json

@@ -13,7 +13,7 @@
         "check-typescript": "run g:check-typescript"
     },
     "dependencies": {
-        "framer-plugin": "3.11.0-alpha.12",
+        "@framer/plugin": "4.2.0-beta.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
     },

plugins/locale-sync/src/App.tsx

@@ -1,6 +1,6 @@
-import type { Locale } from "framer-plugin"
+import type { Locale, LocalizationGroup } from "@framer/plugin"
 
-import { framer, useIsAllowedTo } from "framer-plugin"
+import { framer, useIsAllowedTo } from "@framer/plugin"
 import { useEffect, useState } from "react"
 import "./App.css"
 import { downloadBlob, importFileAsText } from "./files"
@@ -35,18 +35,15 @@ function importXliff() {
 }
 
 async function exportXliff(defaultLocale: Locale, targetLocale: Locale) {
-    const filename = `locale_${targetLocale.code}.xlf`
+    const groups: LocalizationGroup[] = []
+    for await (const group of framer.listLocalizationGroups()) {
+        groups.push(group)
+    }
 
-    try {
-        const groups = await framer.getLocalizationGroups()
-        const xliff = generateXliff(defaultLocale, targetLocale, groups)
-        downloadBlob(xliff, filename, "application/x-xliff+xml")
+    const xliff = generateXliff(defaultLocale, targetLocale, groups)
+    const filename = `locale_${targetLocale.code}.xlf`
 
-        framer.notify(`Successfully exported ${filename}`)
-    } catch (error) {
-        console.error(error)
-        framer.notify(`Error exporting ${filename}`, { variant: "error" })
-    }
+    downloadBlob(xliff, filename, "application/x-xliff+xml")
 }
 
 export function App() {
@@ -55,6 +52,7 @@ export function App() {
     const [selectedLocaleId, setSelectedLocaleId] = useState<string>("")
     const [locales, setLocales] = useState<readonly Locale[]>([])
     const [defaultLocale, setDefaultLocale] = useState<Locale | null>(null)
+    const [isExporting, setIsExporting] = useState(false)
 
     useEffect(() => {
         async function loadLocales() {
@@ -72,15 +70,26 @@ export function App() {
         void loadLocales()
     }, [])
 
-    function handleExport() {
-        if (!selectedLocaleId || !defaultLocale) return
+    async function handleExport() {
+        if (isExporting || !selectedLocaleId || !defaultLocale) return
 
         const targetLocale = locales.find(locale => locale.id === selectedLocaleId)
         if (!targetLocale) {
-            throw new Error(`Could not find locale with id ${selectedLocaleId}`)
+            console.error(`Could not find locale with id ${selectedLocaleId}`)
+            framer.notify("Could not find the selected locale.", { variant: "error" })
+            return
         }
 
-        void exportXliff(defaultLocale, targetLocale)
+        setIsExporting(true)
+
+        try {
+            await exportXliff(defaultLocale, targetLocale)
+        } catch (error) {
+            console.error(error)
+            framer.notify(`Failed to export.`, { variant: "error" })
+        } finally {
+            setIsExporting(false)
+        }
     }
 
     return (
@@ -111,10 +120,11 @@ export function App() {
                 <button
                     type="button"
                     className="framer-button-primary"
-                    onClick={handleExport}
-                    disabled={!selectedLocaleId}
+                    onClick={() => void handleExport()}
+                    disabled={!selectedLocaleId || isExporting}
+                    aria-label={isExporting ? "Exporting" : "Export"}
                 >
-                    Export
+                    {isExporting ? <div className="framer-spinner" /> : "Export"}
                 </button>
             </div>
         </main>

plugins/locale-sync/src/main.tsx

@@ -1,4 +1,4 @@
-import "framer-plugin/framer.css"
+import "@framer/plugin/framer.css"
 
 import React from "react"
 import ReactDOM from "react-dom/client"

plugins/locale-sync/src/xliff.ts

@@ -4,7 +4,7 @@ import type {
     LocalizationGroup,
     LocalizationSource,
     LocalizedValueStatus,
-} from "framer-plugin"
+} from "@framer/plugin"
 import "./App.css"
 
 function escapeXml(unsafe: string): string {

yarn.lock

@@ -753,6 +753,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@framer/plugin@npm:4.2.0-beta.0":
+  version: 4.2.0-beta.0
+  resolution: "@framer/plugin@npm:4.2.0-beta.0"
+  peerDependencies:
+    csstype: ^3.1.1
+    react: ^18.2.0
+    react-dom: ^18.2.0
+  checksum: 10/290c3d761661dfa898c60e35fc272c2ca616a19a2c4e12bff6661920f10c056eaf8eca3a1dabde16c9c47572df965d9f63cdc1f00e68d3a6e86a07fbb8845000
+  languageName: node
+  linkType: hard
+
 "@framer/plugin@npm:^4":
   version: 4.0.0
   resolution: "@framer/plugin@npm:4.0.0"
@@ -5840,9 +5851,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "locale-sync@workspace:plugins/locale-sync"
   dependencies:
+    "@framer/plugin": "npm:4.2.0-beta.0"
     "@types/react": "npm:^18.3.24"
     "@types/react-dom": "npm:^18.3.7"
-    framer-plugin: "npm:3.11.0-alpha.12"
     react: "npm:^18.3.1"
     react-dom: "npm:^18.3.1"
   languageName: unknown