WIP

babel.config.js

@@ -5,11 +5,14 @@ module.exports = {
         [
             '@babel/preset-env',
             {
-                useBuiltIns: 'usage', // or 'entry'
                 corejs: 3, // or 2, but 3 is recommended
-                targets: "> 0.25%, not dead", // Example: browsers with >0.25% market share and not end-of-life
+                targets: "fully supports es6-module-dynamic-import", // Example: browsers with >0.25% market share and not end-of-life
             },
         ],
         ["@babel/preset-react", {"runtime": "automatic"}],
-        "@babel/preset-typescript"],
+        "@babel/preset-typescript"
+    ],
+    plugins: [
+        "@babel/plugin-syntax-dynamic-import"
+    ]
 };

package.json

@@ -1,7 +1,6 @@
 {
   "browserslist": [
-    "> 1%",
-    "last 2 versions"
+    "fully supports es6-module-dynamic-import"
   ],
   "engines": {
     "node": "18.x"
@@ -13,6 +12,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.24.4",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.24.4",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
@@ -33,6 +33,7 @@
     "eslint-plugin-you-dont-need-lodash-underscore": "^6.14.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.6.0",
+    "isomorphic-fetch": "^3.0.0",
     "mini-css-extract-plugin": "^2.8.1",
     "postcss": "^8.4.38",
     "postcss-loader": "^7.3.4",

src/components/App.tsx

@@ -1,8 +1,10 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
 
 
 import { MantineProvider, createTheme, MantineColorsTuple } from '@mantine/core';
 import FetchWithProgress from "./FetchWithProgress";
+import PyodideLoader from "./PyodideLoader";
+import pyodide from "pyodide";
 
 const myColor: MantineColorsTuple = [
     '#e4f8ff',
@@ -24,9 +26,162 @@ const theme = createTheme({
 });
 
 export const App: React.FC = () => {
+    const [data, setData] = useState<ArrayBuffer | null>(null);
+    const [pyodideModule, setPyodideModule] = useState<pyodide | null>(null);
+
+    useEffect(() => {
+        const go = async () => {
+            if (data && pyodideModule) {
+                console.warn("LOADING SQLITE");
+                await pyodideModule.loadPackage("sqlite3");
+                console.warn("LOADED!");
+
+                pyodideModule.unpackArchive(data, "zip", {
+                    extractDir: "bb"
+                });
+                pyodideModule.runPython(`
+import os.path
+import sys
+from importlib.abc import Loader, MetaPathFinder
+from importlib.util import spec_from_file_location, spec_from_loader
+
+import _frozen_importlib
+import _frozen_importlib_external
+
+
+class MyMetaFinder(MetaPathFinder):
+    def find_spec(self, fullname, path=None, target=None):
+        print(f"importing {fullname}")
+
+        if path is None or path == "":
+            path = sys.path
+        if "." in fullname:
+            *parents, name = fullname.split(".")
+        else:
+            name = fullname
+        for entry in path:
+            if os.path.isdir(os.path.join(entry, name)):
+                # this module has child modules
+                filename = os.path.join(entry, name, "__init__.py")
+                submodule_locations = [os.path.join(entry, name)]
+            else:
+                filename = os.path.join(entry, name + ".py")
+                submodule_locations = None
+            if not os.path.exists(filename):
+                continue
+
+            print(">> " + filename)
+
+            return spec_from_file_location(fullname, filename, loader=MyLoader(filename),
+                                           submodule_search_locations=submodule_locations)
+
+        # we don't know how to import this
+        return None
+
+
+class MyLoader(Loader):
+    def __init__(self, filename):
+        self.filename = filename
+
+    def create_module(self, spec):
+        # Use default module creation semantics
+        return None
+
+    def exec_module(self, module):
+        print("FILE NAME: " + self.filename)
+        if self.filename.endswith("fcntl/__init__.py"):
+            data = """
+from unittest.mock import Mock
+fcntl = Mock()
+            """
+        else:
+            with open(self.filename) as f:
+                data = f.read()
+
+        try:
+            exec(data, vars(module))
+        except Exception as e:
+            print(e)
+            raise e
+
+
+class BuiltinImporterShim(_frozen_importlib.BuiltinImporter):
+    @classmethod
+    def find_spec(cls, fullname, path=None, target=None):
+        ret = super().find_spec(fullname, path, target)
+
+        if ret:
+            print(f"shim handling: {ret}")
+        return ret
+
+
+class FrozenImporterShim:
+    _original_importer = None
+
+    @classmethod
+    def set_original_importer(cls, imp):
+        cls._original_importer = imp
+
+    @classmethod
+    def find_spec(cls, fullname, path=None, target=None):
+        if fullname == "fcntl":
+            return spec_from_loader("fcntl", MyLoader("fcntl/__init__.py"))
+        ret = cls._original_importer.find_spec(fullname, path, target)
+
+        if ret:
+            print(f"frozen shim handling: {ret}")
+        return ret
+
+print(sys.meta_path)
+js_finder = sys.meta_path.pop()
+path_finder = sys.meta_path.pop()
+frozen_finder = sys.meta_path.pop()
+builtin = sys.meta_path.pop()
+
+#sys.meta_path.append(MyMetaFinder())
+sys.meta_path.append(path_finder)
+
+i = FrozenImporterShim()
+i.set_original_importer(frozen_finder)
+sys.meta_path.append(i)
+
+sys.meta_path.append(BuiltinImporterShim())
+
+print(sys.meta_path)
+        `)
+                let file = pyodideModule.FS.readdir("./bb");
+                console.log(file);
+
+                pyodideModule.runPython(`
+                    import sys
+                    sys.path.insert(0, "./bb/bitbake-2.8.0/lib/")
+                    from bb.data_smart import DataSmart    
+                `)
+
+                let DataSmart = pyodideModule.globals.get('DataSmart');
+                const d = DataSmart();
+
+                d.setVar("A", "B");
+                d.setVar("A:test", "C");
+                d.setVar("OVERRIDES", "test");
+                d.setVarFlag("A", "p", "OK");
+
+                console.log(d.getVar("A"));
+
+                DataSmart.destroy();
+
+            } else {
+                console.warn(`data = ${!!data}, p = ${!!pyodideModule}`);
+            }
+        }
+
+        go();
+    }, [data, pyodideModule]);
+
     return (
         <MantineProvider theme={theme}>
-            <FetchWithProgress url={"assets/yocto-3.1.33.zip"}/>
+            <PyodideLoader pyodide={pyodideModule} setPyodide={setPyodideModule} />
+            <FetchWithProgress url={"assets/bitbake-2.8.0.zip"} data={data} setData={setData}/>
         </MantineProvider>
     );
 };

src/components/FetchWithProgress.tsx

@@ -1,19 +1,21 @@
 import React, { useState } from 'react';
 
+
 interface FetchProgressProps {
     url: string;
+    data: ArrayBuffer | null;
+    setData: (value: ArrayBuffer) => void,
 }
 
-const FetchWithProgress: React.FC<FetchProgressProps> = ({ url }) => {
+const FetchWithProgress: React.FC<FetchProgressProps> = (props: FetchProgressProps) => {
     const [progress, setProgress] = useState<number>(0);
-    const [data, setData] = useState<ArrayBuffer | null>(null);
     const [loading, setLoading] = useState<boolean>(false);
     const [error, setError] = useState<string | null>(null);
 
     const fetchData = () => {
         setLoading(true);
         setError(null);
-        fetch(url)
+        fetch(props.url)
             .then(response => {
                 if (!response.ok) {
                     throw new Error(`HTTP error! status: ${response.status}`);
@@ -50,22 +52,23 @@ const FetchWithProgress: React.FC<FetchProgressProps> = ({ url }) => {
                 return new Response(stream, { headers: { "Content-Type": "application/octet-stream" } });
             })
             .then(response => response.arrayBuffer())
-            .then(buffer => {
-                setData(buffer);
+            .then(async buffer => {
+                props.setData(buffer);
                 setLoading(false);
             })
             .catch(err => {
                 setError(err.message);
+                console.error(err);
                 setLoading(false);
             });
     };
 
     return (
         <div>
-            <h1>Download Progress</h1>
+            <h4>Download Progress</h4>
             {loading && <p>Progress: {progress}%</p>}
             {error && <p>Error: {error}</p>}
-            {data && <p>Download complete!</p>}
+            {props.data && <p>Download complete!</p>}
             <button onClick={fetchData} disabled={loading}>
                 {loading ? 'Downloading...' : 'Start Download'}
             </button>