chore: add mendix-native dependency

configs/jsactions/rollup.config.mjs

@@ -22,7 +22,9 @@ export default async args => {
     const jsActionTargetFolder = `javascriptsource/${args.configProject ?? "nativemobileresources"}/actions`;
     const result = [];
     const posixPath = join(cwd, "src", "**/*.ts").split(sep).join(posix.sep); // Always use forward slashes
-    const files = await fg([posixPath]); // fast-glob only works with forward slashes
+    // `src/native` holds shared helpers, not actions, so it gets no bundle of its own; it lives under
+    // `src` because these packages have no tsconfig and TypeScript infers the source root from there.
+    const files = await fg([posixPath], { ignore: ["**/src/native/**"] }); // fast-glob only works with forward slashes
     const outDir = join(cwd, "dist");
 
     const nodeResolvePlugin = nodeResolve({ preferBuiltins: false, mainFields: ["module", "browser", "main"] });
@@ -143,6 +145,7 @@ export default async args => {
 
 const nativeExternal = [
     /^mendix\//,
+    /^mendix-native(\/|$)/,
     /^react-native(\/|$)/,
     /^react-native-windows(\/|$)/,
     /^react-native-web(\/|$)/,

eslint.config.js

@@ -19,5 +19,37 @@ module.exports = [
         ]
     },
     // Then extend from the legacy .eslintrc.js file
-    ...compat.extends(path.resolve(__dirname, ".eslintrc.js"))
-];
+    ...compat.extends(path.resolve(__dirname, ".eslintrc.js")),
+    // Nanoflow Commons actions also run on web, where `mendix-native` does not resolve at all, so a
+    // static import would break the web bundle even on paths that never touch native. These actions
+    // must go through src/native/mendix-native.ts, which owns the lazy import; src/native itself is
+    // exempt. Native-only packages such as mobile-resources-native import `mendix-native` directly.
+    {
+        files: ["packages/jsActions/nanoflow-actions-native/src/**/*.{ts,tsx,js,jsx}"],
+        ignores: ["packages/jsActions/nanoflow-actions-native/src/native/**"],
+        rules: {
+            "no-restricted-imports": [
+                "error",
+                {
+                    patterns: [
+                        {
+                            regex: "^mendix-native(/|$)",
+                            message:
+                                "Import from src/native/mendix-native instead, which owns the import of 'mendix-native'. In Nanoflow Commons a direct import also breaks the web bundle."
+                        }
+                    ]
+                }
+            ],
+            // no-restricted-imports does not flag `import()` expressions, so the dynamic form is
+            // matched separately.
+            "no-restricted-syntax": [
+                "error",
+                {
+                    selector: "ImportExpression > Literal[value=/^mendix-native(\\u002F|$)/]",
+                    message:
+                        "Import from src/native/mendix-native instead; that module owns the dynamic import of 'mendix-native'."
+                }
+            ]
+        }
+    }
+];

packages/jsActions/mobile-resources-native/package.json

@@ -49,6 +49,7 @@
     "@types/querystringify": "^2.0.0",
     "@types/url-parse": "^1.4.3",
     "mendix": "11.8.0",
+    "mendix-native": "https://github.com/mendix/mendix-native/releases/download/v0.5.2/mendix-native-v0.5.2.tgz",
     "rimraf": "^6.1.2"
   }
-}
+}

packages/jsActions/mobile-resources-native/src/camera/TakePicture.ts

@@ -7,6 +7,7 @@
 // Other code you write will be lost the next time you deploy the project.
 import { Big } from "big.js";
 import { Alert, Linking, NativeModules, Platform } from "react-native";
+import { NativeFileSystem } from "mendix-native";
 import {
     CameraOptions,
     ErrorCode,
@@ -118,7 +119,7 @@ export async function TakePicture(
 
     async function safeRemove(filePath: string): Promise<void> {
         try {
-            await NativeModules.MxFileSystem.remove(filePath);
+            await NativeFileSystem.remove(filePath);
         } catch (error) {
             console.warn(`Failed to remove file at ${filePath}. Error: ${error}`);
             // ignore error
@@ -127,8 +128,8 @@ export async function TakePicture(
 
     function storeFile(imageObject: mendix.lib.MxObject, uri: string): Promise<boolean> {
         return new Promise((resolve, reject) => {
-            NativeModules.MxFileSystem.read(uri.replace("file://", ""))
-                .then((nativeBlob: unknown) => {
+            NativeFileSystem.read(uri.replace("file://", ""))
+                .then(nativeBlob => {
                     const blob = new Blob();
                     Object.assign(blob, { data: nativeBlob });
                     // eslint-disable-next-line no-useless-escape

packages/jsActions/mobile-resources-native/src/camera/TakePictureAdvanced.ts

@@ -7,6 +7,7 @@
 // Other code you write will be lost the next time you deploy the project.
 import { Big } from "big.js";
 import { Alert, Linking, NativeModules, Platform } from "react-native";
+import { NativeFileSystem } from "mendix-native";
 import {
     CameraOptions,
     ErrorCode,
@@ -171,7 +172,7 @@ export async function TakePictureAdvanced(
 
     async function safeRemove(filePath: string): Promise<void> {
         try {
-            await NativeModules.MxFileSystem.remove(filePath);
+            await NativeFileSystem.remove(filePath);
         } catch (error) {
             console.warn(`Failed to remove file at ${filePath}. Error: ${error}`);
             // ignore error
@@ -180,8 +181,8 @@ export async function TakePictureAdvanced(
 
     function storeFile(imageObject: mendix.lib.MxObject, uri: string): Promise<boolean> {
         return new Promise((resolve, reject) => {
-            NativeModules.MxFileSystem.read(uri.replace("file://", ""))
-                .then((nativeBlob: unknown) => {
+            NativeFileSystem.read(uri.replace("file://", ""))
+                .then(nativeBlob => {
                     const blob = new Blob();
                     Object.assign(blob, { data: nativeBlob });
                     // eslint-disable-next-line no-useless-escape

packages/jsActions/nanoflow-actions-native/package.json

@@ -35,6 +35,7 @@
   },
   "devDependencies": {
     "@mendix/pluggable-widgets-tools": "*",
-    "mendix": "11.8.0"
+    "mendix": "11.8.0",
+    "mendix-native": "https://github.com/mendix/mendix-native/releases/download/v0.5.2/mendix-native-v0.5.2.tgz"
   }
-}
+}

packages/jsActions/nanoflow-actions-native/src/native/mendix-native.ts

@@ -0,0 +1,10 @@
+// Single entry point for `mendix-native`.
+//
+// The package is provided at runtime by native-template (native code) and the AppDev client (JS),
+// and is listed in `nativeExternal` in configs/jsactions/rollup.config.mjs so it is never bundled
+// into the MPK. Nanoflow Commons actions also run on web, where the module does not resolve at all,
+// so actions must reach it through the dynamic import below instead of a static one. Rollup inlines
+// this module into each action bundle and leaves the `import()` untouched.
+export type MendixNative = typeof import("mendix-native");
+
+export const loadMendixNative = async (): Promise<MendixNative> => import("mendix-native");

packages/jsActions/nanoflow-actions-native/src/other/Base64DecodeToImage.ts

@@ -7,7 +7,7 @@
 // Other code you write will be lost the next time you deploy the project.
 import { Base64 } from "js-base64";
 import RNBlobUtil from "react-native-blob-util";
-import { NativeModules } from "react-native";
+import { loadMendixNative } from "../native/mendix-native";
 
 // BEGIN EXTRA CODE
 // END EXTRA CODE
@@ -56,7 +56,8 @@ export async function Base64DecodeToImage(base64: string, image: mendix.lib.MxOb
             // NativeFileBackend.storeFile calls NativeFileSystem.save(blob.data, path)
             // and blob.close() — a plain object has no .data getter or .close(), which
             // crashes iOS via [NSInvocation invokeWithTarget:].
-            const nativeBlob = await NativeModules.MxFileSystem.read(tempPath.replace("file://", ""));
+            const { NativeFileSystem } = await loadMendixNative();
+            const nativeBlob = await NativeFileSystem.read(tempPath.replace("file://", ""));
             // Normalize: MxFileSystem.read may return 'length' instead of 'size'.
             const blobData = { ...(nativeBlob as any) };
             if (blobData.size === undefined && blobData.length !== undefined) {