feat: Add blocklypy package and import functionality

This commit adds the "blocklypy" package as a dependency in the package.json file. It also introduces the import functionality for LLSP3 files in the handleExplorerImportFiles function in sagas.ts. The imported LLSP3 files are converted to Python code using the "convertFlipperProjectToPython" function from the blocklypy package. The converted Python code is then imported into the project.

package.json

@@ -47,6 +47,7 @@
         "babel-plugin-transform-import-meta": "^2.2.1",
         "babel-preset-react-app": "^10.0.1",
         "bfj": "^8.0.0",
+        "blocklypy": "^0.0.1",
         "browser-fs-access": "^0.35.0",
         "browserslist": "^4.22.2",
         "camelcase": "^8.0.0",

src/explorer/sagas.ts

@@ -1,6 +1,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2022-2024 The Pybricks Authors
 
+import { convertFlipperProjectToPython } from 'blocklypy';
 import { fileOpen, fileSave } from 'browser-fs-access';
 import JSZip from 'jszip';
 import {
@@ -333,19 +334,42 @@ function* handleExplorerImportFiles(): Generator {
                     // TODO: translate description
                     description: 'ZIP Files',
                 },
+                {
+                    // mimeTypes: [zipFileMimeType],
+                    extensions: ['.llsp3'],
+                    // TODO: translate description
+                    description: 'LLSP3 Files',
+                },
             ]),
         );
 
         const context: ImportContext = {};
 
         for (const file of selectedFiles) {
+            // console.log(`file type "${file.type}"`);
             switch (file.type) {
                 case '': // empty string means "could not be determined"
                 case pythonFileMimeType:
                     {
-                        // getting the text now to catch possible error *before* user interaction
-                        const text = yield* call(() => file.text());
-                        yield* importPythonFile(file.name, text, context);
+                        const extension = file.name.includes('.')
+                            ? '.' + file.name.split('.').pop()
+                            : '';
+                        // console.log('>>>>', extension);
+                        let text;
+                        let filename = file.name;
+                        if (extension === '.llsp3') {
+                            const arraybuffer = yield* call(() => file.arrayBuffer());
+                            const result = yield* call(() =>
+                                convertFlipperProjectToPython(arraybuffer, {}),
+                            );
+                            // console.log(result);
+                            text = result.pycode ?? '';
+                            filename = filename.replace('.', '_') + '.py';
+                        } else {
+                            // getting the text now to catch possible error *before* user interaction
+                            text = yield* call(() => file.text());
+                        }
+                        yield* importPythonFile(filename, text, context);
                     }
                     break;
                 case zipFileMimeType:

yarn.lock

@@ -3012,6 +3012,7 @@ __metadata:
     babel-plugin-transform-import-meta: ^2.2.1
     babel-preset-react-app: ^10.0.1
     bfj: ^8.0.0
+    blocklypy: ^0.0.1
     browser-fs-access: ^0.35.0
     browserslist: ^4.22.2
     camelcase: ^8.0.0
@@ -6910,6 +6911,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"blocklypy@npm:^0.0.1":
+  version: 0.0.1
+  resolution: "blocklypy@npm:0.0.1"
+  dependencies:
+    jszip: ^3.10.1
+  checksum: a168589741729c55c1c4785d3c07fb374708a601355aea97f1bc4e1670dcf6e051b23f385c6c57f8211b476d4051bb32630b41f0f5710ce23b4f625a22c89e29
+  languageName: node
+  linkType: hard
+
 "bluebird@npm:^3.7.2":
   version: 3.7.2
   resolution: "bluebird@npm:3.7.2"