diff --git a/.eslintrc.json b/.eslintrc.json
index 0b786472..53336149 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -24,12 +24,13 @@
"ecmaVersion": 2018,
"sourceType": "module"
},
- "plugins": ["react", "jest"],
+ "plugins": ["react", "jest", "import"],
"rules": {
"no-console": "off",
"no-redeclare": "off",
"no-prototype-builtins": "off",
"require-atomic-updates": "off",
- "react/prop-types": [2, { "skipUndeclared": true }]
+ "react/prop-types": [2, { "skipUndeclared": true }],
+ "import/extensions": [2, "ignorePackages"]
}
}
diff --git a/index.js b/index.js
index ebe5fbd2..35310c8a 100644
--- a/index.js
+++ b/index.js
@@ -1,8 +1,8 @@
import app from "@wq/app";
import material from "@wq/material";
import mapgl from "@wq/map-gl";
-import modules from "./modules";
-import version from "./version";
+import modules from "./modules.js";
+import version from "./version.js";
import maplibre from "maplibre-gl";
mapgl.setEngine(maplibre);
diff --git a/modules.js b/modules.js
index 1a07feed..aa69d230 100644
--- a/modules.js
+++ b/modules.js
@@ -4,8 +4,7 @@ import ReactIs from "react-is";
import PropTypes from "prop-types";
import * as formik from "formik";
import * as muiUtils from "@mui/utils";
-import ButtonBase from "@mui/material/ButtonBase";
-import Paper from "@mui/material/Paper";
+import { ButtonBase, Paper } from "@mui/material";
import Map, * as reactMapGlExports from "react-map-gl";
import MapboxDraw from "@mapbox/mapbox-gl-draw";
diff --git a/package-lock.json b/package-lock.json
index 8f8bd209..3f06201f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,6 +33,7 @@
"@rollup/plugin-replace": "^5.0.2",
"@rollup/plugin-terser": "^0.3.0",
"eslint": "^8.32.0",
+ "eslint-plugin-import": "^2.27.5",
"eslint-plugin-jest": "^27.2.1",
"eslint-plugin-react": "^7.32.1",
"fake-indexeddb": "^4.0.1",
@@ -4027,6 +4028,12 @@
"integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
"dev": true
},
+ "node_modules/@types/json5": {
+ "version": "0.0.29",
+ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+ "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
+ "dev": true
+ },
"node_modules/@types/mapbox__point-geometry": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.2.tgz",
@@ -4539,6 +4546,24 @@
"node": ">=8"
}
},
+ "node_modules/array.prototype.flat": {
+ "version": "1.3.1",
+ "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz",
+ "integrity": "sha512-roTU0KWIOmJ4DRLmwKd19Otg0/mT3qPNt0Qb3GWW8iObuZXxrjB/pzn0R3hqpRSWg4HCwqx+0vwOnWnvlOyeIA==",
+ "dev": true,
+ "dependencies": {
+ "call-bind": "^1.0.2",
+ "define-properties": "^1.1.4",
+ "es-abstract": "^1.20.4",
+ "es-shim-unscopables": "^1.0.0"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
"node_modules/array.prototype.flatmap": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz",
@@ -5725,6 +5750,102 @@
"url": "https://opencollective.com/eslint"
}
},
+ "node_modules/eslint-import-resolver-node": {
+ "version": "0.3.7",
+ "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz",
+ "integrity": "sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==",
+ "dev": true,
+ "dependencies": {
+ "debug": "^3.2.7",
+ "is-core-module": "^2.11.0",
+ "resolve": "^1.22.1"
+ }
+ },
+ "node_modules/eslint-import-resolver-node/node_modules/debug": {
+ "version": "3.2.7",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+ "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+ "dev": true,
+ "dependencies": {
+ "ms": "^2.1.1"
+ }
+ },
+ "node_modules/eslint-module-utils": {
+ "version": "2.7.4",
+ "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.4.tgz",
+ "integrity": "sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==",
+ "dev": true,
+ "dependencies": {
+ "debug": "^3.2.7"
+ },
+ "engines": {
+ "node": ">=4"
+ },
+ "peerDependenciesMeta": {
+ "eslint": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/eslint-module-utils/node_modules/debug": {
+ "version": "3.2.7",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+ "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+ "dev": true,
+ "dependencies": {
+ "ms": "^2.1.1"
+ }
+ },
+ "node_modules/eslint-plugin-import": {
+ "version": "2.27.5",
+ "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz",
+ "integrity": "sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==",
+ "dev": true,
+ "dependencies": {
+ "array-includes": "^3.1.6",
+ "array.prototype.flat": "^1.3.1",
+ "array.prototype.flatmap": "^1.3.1",
+ "debug": "^3.2.7",
+ "doctrine": "^2.1.0",
+ "eslint-import-resolver-node": "^0.3.7",
+ "eslint-module-utils": "^2.7.4",
+ "has": "^1.0.3",
+ "is-core-module": "^2.11.0",
+ "is-glob": "^4.0.3",
+ "minimatch": "^3.1.2",
+ "object.values": "^1.1.6",
+ "resolve": "^1.22.1",
+ "semver": "^6.3.0",
+ "tsconfig-paths": "^3.14.1"
+ },
+ "engines": {
+ "node": ">=4"
+ },
+ "peerDependencies": {
+ "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8"
+ }
+ },
+ "node_modules/eslint-plugin-import/node_modules/debug": {
+ "version": "3.2.7",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+ "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+ "dev": true,
+ "dependencies": {
+ "ms": "^2.1.1"
+ }
+ },
+ "node_modules/eslint-plugin-import/node_modules/doctrine": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+ "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+ "dev": true,
+ "dependencies": {
+ "esutils": "^2.0.2"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
"node_modules/eslint-plugin-jest": {
"version": "27.2.1",
"resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-27.2.1.tgz",
@@ -11683,6 +11804,39 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/tsconfig-paths": {
+ "version": "3.14.1",
+ "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",
+ "integrity": "sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==",
+ "dev": true,
+ "dependencies": {
+ "@types/json5": "^0.0.29",
+ "json5": "^1.0.1",
+ "minimist": "^1.2.6",
+ "strip-bom": "^3.0.0"
+ }
+ },
+ "node_modules/tsconfig-paths/node_modules/json5": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+ "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+ "dev": true,
+ "dependencies": {
+ "minimist": "^1.2.0"
+ },
+ "bin": {
+ "json5": "lib/cli.js"
+ }
+ },
+ "node_modules/tsconfig-paths/node_modules/strip-bom": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+ "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+ "dev": true,
+ "engines": {
+ "node": ">=4"
+ }
+ },
"node_modules/tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
@@ -15211,6 +15365,12 @@
"integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
"dev": true
},
+ "@types/json5": {
+ "version": "0.0.29",
+ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+ "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
+ "dev": true
+ },
"@types/mapbox__point-geometry": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.2.tgz",
@@ -15696,6 +15856,18 @@
"integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
"dev": true
},
+ "array.prototype.flat": {
+ "version": "1.3.1",
+ "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz",
+ "integrity": "sha512-roTU0KWIOmJ4DRLmwKd19Otg0/mT3qPNt0Qb3GWW8iObuZXxrjB/pzn0R3hqpRSWg4HCwqx+0vwOnWnvlOyeIA==",
+ "dev": true,
+ "requires": {
+ "call-bind": "^1.0.2",
+ "define-properties": "^1.1.4",
+ "es-abstract": "^1.20.4",
+ "es-shim-unscopables": "^1.0.0"
+ }
+ },
"array.prototype.flatmap": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz",
@@ -16694,6 +16866,91 @@
}
}
},
+ "eslint-import-resolver-node": {
+ "version": "0.3.7",
+ "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz",
+ "integrity": "sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==",
+ "dev": true,
+ "requires": {
+ "debug": "^3.2.7",
+ "is-core-module": "^2.11.0",
+ "resolve": "^1.22.1"
+ },
+ "dependencies": {
+ "debug": {
+ "version": "3.2.7",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+ "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+ "dev": true,
+ "requires": {
+ "ms": "^2.1.1"
+ }
+ }
+ }
+ },
+ "eslint-module-utils": {
+ "version": "2.7.4",
+ "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.4.tgz",
+ "integrity": "sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==",
+ "dev": true,
+ "requires": {
+ "debug": "^3.2.7"
+ },
+ "dependencies": {
+ "debug": {
+ "version": "3.2.7",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+ "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+ "dev": true,
+ "requires": {
+ "ms": "^2.1.1"
+ }
+ }
+ }
+ },
+ "eslint-plugin-import": {
+ "version": "2.27.5",
+ "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz",
+ "integrity": "sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==",
+ "dev": true,
+ "requires": {
+ "array-includes": "^3.1.6",
+ "array.prototype.flat": "^1.3.1",
+ "array.prototype.flatmap": "^1.3.1",
+ "debug": "^3.2.7",
+ "doctrine": "^2.1.0",
+ "eslint-import-resolver-node": "^0.3.7",
+ "eslint-module-utils": "^2.7.4",
+ "has": "^1.0.3",
+ "is-core-module": "^2.11.0",
+ "is-glob": "^4.0.3",
+ "minimatch": "^3.1.2",
+ "object.values": "^1.1.6",
+ "resolve": "^1.22.1",
+ "semver": "^6.3.0",
+ "tsconfig-paths": "^3.14.1"
+ },
+ "dependencies": {
+ "debug": {
+ "version": "3.2.7",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+ "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+ "dev": true,
+ "requires": {
+ "ms": "^2.1.1"
+ }
+ },
+ "doctrine": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+ "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+ "dev": true,
+ "requires": {
+ "esutils": "^2.0.2"
+ }
+ }
+ }
+ },
"eslint-plugin-jest": {
"version": "27.2.1",
"resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-27.2.1.tgz",
@@ -21048,6 +21305,35 @@
"resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.7.tgz",
"integrity": "sha512-/y956gpUo9ZNCb99YjxG7OaslxZWHfCHAUUfshwqOXmxUIvqLjVO581BT+gM59+QV9tFe6/CGG53tsA1Y7RSdg=="
},
+ "tsconfig-paths": {
+ "version": "3.14.1",
+ "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",
+ "integrity": "sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==",
+ "dev": true,
+ "requires": {
+ "@types/json5": "^0.0.29",
+ "json5": "^1.0.1",
+ "minimist": "^1.2.6",
+ "strip-bom": "^3.0.0"
+ },
+ "dependencies": {
+ "json5": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+ "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+ "dev": true,
+ "requires": {
+ "minimist": "^1.2.0"
+ }
+ },
+ "strip-bom": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+ "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+ "dev": true
+ }
+ }
+ },
"tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
diff --git a/package.json b/package.json
index 2b652f56..18651e62 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
"@rollup/plugin-replace": "^5.0.2",
"@rollup/plugin-terser": "^0.3.0",
"eslint": "^8.32.0",
+ "eslint-plugin-import": "^2.27.5",
"eslint-plugin-jest": "^27.2.1",
"eslint-plugin-react": "^7.32.1",
"fake-indexeddb": "^4.0.1",
diff --git a/packages/app/src/__tests__/app.js b/packages/app/src/__tests__/app.js
index 4d7f3cb8..a13e17fa 100644
--- a/packages/app/src/__tests__/app.js
+++ b/packages/app/src/__tests__/app.js
@@ -1,4 +1,4 @@
-import app from "../app";
+import app from "../app.js";
test("it loads", () => {
expect(app).toBeTruthy();
diff --git a/packages/app/src/app.js b/packages/app/src/app.js
index 14c0aa7e..4ccb5114 100644
--- a/packages/app/src/app.js
+++ b/packages/app/src/app.js
@@ -2,9 +2,9 @@ import ds from "@wq/store";
import orm from "@wq/model";
import outbox from "@wq/outbox";
import router from "@wq/router";
-import spinner from "./spinner";
-import auth from "./auth";
-import defaults from "./defaults";
+import spinner from "./spinner.js";
+import auth from "./auth.js";
+import defaults from "./defaults.js";
import Mustache from "mustache";
import deepcopy from "deepcopy";
import { setIn } from "formik";
@@ -151,8 +151,6 @@ app.init = function (config) {
app.config = config;
- app["native"] = !!window.cordova;
-
// Initialize wq/router.js
router.init(config.router);
app.base_url = router.base_url;
diff --git a/packages/map-gl-native/src/__tests__/index.js b/packages/map-gl-native/src/__tests__/index.js
index 3a25a7b6..c031b5c6 100644
--- a/packages/map-gl-native/src/__tests__/index.js
+++ b/packages/map-gl-native/src/__tests__/index.js
@@ -1,4 +1,4 @@
-import mapgl from "../index";
+import mapgl from "../index.js";
test("it loads", () => {
expect(mapgl.name).toBe("map-gl");
diff --git a/packages/map-gl-native/src/basemaps/index.js b/packages/map-gl-native/src/basemaps/index.js
index 0e7247fd..7acb8765 100644
--- a/packages/map-gl-native/src/basemaps/index.js
+++ b/packages/map-gl-native/src/basemaps/index.js
@@ -1,4 +1,4 @@
-import VectorTile from "./VectorTile";
-import Tile from "./Tile";
+import VectorTile from "./VectorTile.js";
+import Tile from "./Tile.js";
export { VectorTile, Tile };
diff --git a/packages/map-gl-native/src/components/Map.js b/packages/map-gl-native/src/components/Map.js
index 5abb9be3..04427390 100644
--- a/packages/map-gl-native/src/components/Map.js
+++ b/packages/map-gl-native/src/components/Map.js
@@ -2,7 +2,7 @@ import React, { useEffect, useMemo } from "react";
import { usePlugin } from "@wq/react";
import PropTypes from "prop-types";
import MapboxGL from "@rnmapbox/maps";
-import { findBasemapStyle } from "../util";
+import { findBasemapStyle } from "../util.js";
export default function Map({
name,
diff --git a/packages/map-gl-native/src/components/index.js b/packages/map-gl-native/src/components/index.js
index f19a626f..461cfa0e 100644
--- a/packages/map-gl-native/src/components/index.js
+++ b/packages/map-gl-native/src/components/index.js
@@ -1,7 +1,7 @@
-import Map from "./Map";
-import MapInteraction from "./MapInteraction";
-import MapAutoZoom from "./MapAutoZoom";
-import MapIdentify from "./MapIdentify";
-import MapLayers from "./MapLayers";
+import Map from "./Map.js";
+import MapInteraction from "./MapInteraction.js";
+import MapAutoZoom from "./MapAutoZoom.js";
+import MapIdentify from "./MapIdentify.js";
+import MapLayers from "./MapLayers.js";
export { Map, MapInteraction, MapAutoZoom, MapIdentify, MapLayers };
diff --git a/packages/map-gl-native/src/index.js b/packages/map-gl-native/src/index.js
index 667479f3..ba7c2b0a 100644
--- a/packages/map-gl-native/src/index.js
+++ b/packages/map-gl-native/src/index.js
@@ -6,9 +6,9 @@ import {
MapAutoZoom,
MapIdentify,
MapLayers,
-} from "./components/index";
+} from "./components/index.js";
-import { VectorTile, Tile } from "./basemaps/index";
+import { VectorTile, Tile } from "./basemaps/index.js";
import {
Geojson,
@@ -17,9 +17,9 @@ import {
Accuracy,
VectorTile as VectorTileOverlay,
Tile as TileOverlay,
-} from "./overlays/index";
+} from "./overlays/index.js";
-import { zoomToLocation } from "./util";
+import { zoomToLocation } from "./util.js";
export default {
name: "map-gl",
diff --git a/packages/map-gl-native/src/overlays/Accuracy.js b/packages/map-gl-native/src/overlays/Accuracy.js
index 83b16126..38469da9 100644
--- a/packages/map-gl-native/src/overlays/Accuracy.js
+++ b/packages/map-gl-native/src/overlays/Accuracy.js
@@ -1,5 +1,5 @@
import React from "react";
-import Geojson from "./Geojson";
+import Geojson from "./Geojson.js";
import circle from "@turf/circle";
import PropTypes from "prop-types";
diff --git a/packages/map-gl-native/src/overlays/Draw.js b/packages/map-gl-native/src/overlays/Draw.js
index 4b72447e..15ad6038 100644
--- a/packages/map-gl-native/src/overlays/Draw.js
+++ b/packages/map-gl-native/src/overlays/Draw.js
@@ -1,6 +1,6 @@
import React, { useEffect } from "react";
import { useMapInstance } from "@wq/map";
-import Geojson from "./Geojson";
+import Geojson from "./Geojson.js";
import PropTypes from "prop-types";
export default function Draw({ name, data, setData }) {
diff --git a/packages/map-gl-native/src/overlays/Geojson.js b/packages/map-gl-native/src/overlays/Geojson.js
index f5617e7e..939c0fe1 100644
--- a/packages/map-gl-native/src/overlays/Geojson.js
+++ b/packages/map-gl-native/src/overlays/Geojson.js
@@ -1,6 +1,6 @@
import React, { useMemo } from "react";
import PropTypes from "prop-types";
-import GeoJSONLayer from "./GeoJSONLayer";
+import GeoJSONLayer from "./GeoJSONLayer.js";
export default function Geojson({
name,
diff --git a/packages/map-gl-native/src/overlays/Highlight.js b/packages/map-gl-native/src/overlays/Highlight.js
index cfcab700..26120534 100644
--- a/packages/map-gl-native/src/overlays/Highlight.js
+++ b/packages/map-gl-native/src/overlays/Highlight.js
@@ -1,6 +1,6 @@
import React from "react";
import PropTypes from "prop-types";
-import GeoJSONLayer from "./GeoJSONLayer";
+import GeoJSONLayer from "./GeoJSONLayer.js";
export default function Highlight({ data }) {
return (
diff --git a/packages/map-gl-native/src/overlays/index.js b/packages/map-gl-native/src/overlays/index.js
index 3bebc0bc..00ca10c4 100644
--- a/packages/map-gl-native/src/overlays/index.js
+++ b/packages/map-gl-native/src/overlays/index.js
@@ -1,8 +1,8 @@
-import Geojson from "./Geojson";
-import Highlight from "./Highlight";
-import Draw from "./Draw";
-import Accuracy from "./Accuracy";
-import Tile from "./Tile";
-import VectorTile from "./VectorTile";
+import Geojson from "./Geojson.js";
+import Highlight from "./Highlight.js";
+import Draw from "./Draw.js";
+import Accuracy from "./Accuracy.js";
+import Tile from "./Tile.js";
+import VectorTile from "./VectorTile.js";
export { Geojson, Highlight, Draw, Accuracy, Tile, VectorTile };
diff --git a/packages/map-gl-web/src/__tests__/createObjectURL.mock.js b/packages/map-gl-web/src/__tests__/createObjectURL.mock.js
deleted file mode 100644
index 0027fdcb..00000000
--- a/packages/map-gl-web/src/__tests__/createObjectURL.mock.js
+++ /dev/null
@@ -1 +0,0 @@
-window.URL.createObjectURL = () => {};
diff --git a/packages/map-gl-web/src/__tests__/index.js b/packages/map-gl-web/src/__tests__/index.js
index ebe7efac..268a851d 100644
--- a/packages/map-gl-web/src/__tests__/index.js
+++ b/packages/map-gl-web/src/__tests__/index.js
@@ -1,8 +1,7 @@
/**
* @jest-environment jsdom
*/
-import "./createObjectURL.mock";
-import mapgl from "../index";
+import mapgl from "../index.js";
test("it loads", () => {
expect(mapgl.name).toBe("map-gl");
diff --git a/packages/map-gl-web/src/basemaps/index.js b/packages/map-gl-web/src/basemaps/index.js
index 0e7247fd..7acb8765 100644
--- a/packages/map-gl-web/src/basemaps/index.js
+++ b/packages/map-gl-web/src/basemaps/index.js
@@ -1,4 +1,4 @@
-import VectorTile from "./VectorTile";
-import Tile from "./Tile";
+import VectorTile from "./VectorTile.js";
+import Tile from "./Tile.js";
export { VectorTile, Tile };
diff --git a/packages/map-gl-web/src/components/Map.js b/packages/map-gl-web/src/components/Map.js
index 0ee6bdc3..f058fe14 100644
--- a/packages/map-gl-web/src/components/Map.js
+++ b/packages/map-gl-web/src/components/Map.js
@@ -2,7 +2,7 @@ import React, { useCallback } from "react";
import { usePlugin, usePluginReducer } from "@wq/react";
import PropTypes from "prop-types";
import Root from "react-map-gl";
-import { findBasemapStyle } from "../util";
+import { findBasemapStyle } from "../util.js";
export default function Map({
mapId,
diff --git a/packages/map-gl-web/src/components/MapAutoZoom.js b/packages/map-gl-web/src/components/MapAutoZoom.js
index 7bea8c1e..3ae263e0 100644
--- a/packages/map-gl-web/src/components/MapAutoZoom.js
+++ b/packages/map-gl-web/src/components/MapAutoZoom.js
@@ -1,6 +1,6 @@
import { useEffect } from "react";
import { computeBounds } from "@wq/map";
-import { useMapInstance } from "../hooks";
+import { useMapInstance } from "../hooks.js";
export default function MapAutoZoom({
mapId,
diff --git a/packages/map-gl-web/src/components/index.js b/packages/map-gl-web/src/components/index.js
index 5c779b5a..786a00e5 100644
--- a/packages/map-gl-web/src/components/index.js
+++ b/packages/map-gl-web/src/components/index.js
@@ -1,9 +1,9 @@
-import Map from "./Map";
-import MapProvider from "./MapProvider";
-import MapInteraction from "./MapInteraction";
-import MapAutoZoom from "./MapAutoZoom";
-import MapIdentify from "./MapIdentify";
-import MapLayers from "./MapLayers";
+import Map from "./Map.js";
+import MapProvider from "./MapProvider.js";
+import MapInteraction from "./MapInteraction.js";
+import MapAutoZoom from "./MapAutoZoom.js";
+import MapIdentify from "./MapIdentify.js";
+import MapLayers from "./MapLayers.js";
export {
Map,
diff --git a/packages/map-gl-web/src/index.js b/packages/map-gl-web/src/index.js
index 27100f60..81076e25 100644
--- a/packages/map-gl-web/src/index.js
+++ b/packages/map-gl-web/src/index.js
@@ -7,11 +7,11 @@ import {
MapAutoZoom,
MapIdentify,
MapLayers,
-} from "./components/index";
+} from "./components/index.js";
-import { useMapInstance } from "./hooks";
+import { useMapInstance } from "./hooks.js";
-import { VectorTile, Tile } from "./basemaps/index";
+import { VectorTile, Tile } from "./basemaps/index.js";
import {
Geojson,
@@ -20,15 +20,18 @@ import {
Accuracy,
VectorTile as VectorTileOverlay,
Tile as TileOverlay,
-} from "./overlays/index";
+} from "./overlays/index.js";
-import { zoomToLocation } from "./util";
+import { zoomToLocation } from "./util.js";
export default {
name: "map-gl",
dependencies: [map],
setEngine(engine) {
this.engine = engine;
+ if (engine.prewarm && typeof Worker !== "undefined") {
+ engine.prewarm();
+ }
},
components: {
Map,
diff --git a/packages/map-gl-web/src/overlays/Accuracy.js b/packages/map-gl-web/src/overlays/Accuracy.js
index 83b16126..38469da9 100644
--- a/packages/map-gl-web/src/overlays/Accuracy.js
+++ b/packages/map-gl-web/src/overlays/Accuracy.js
@@ -1,5 +1,5 @@
import React from "react";
-import Geojson from "./Geojson";
+import Geojson from "./Geojson.js";
import circle from "@turf/circle";
import PropTypes from "prop-types";
diff --git a/packages/map-gl-web/src/overlays/Geojson.js b/packages/map-gl-web/src/overlays/Geojson.js
index f5617e7e..939c0fe1 100644
--- a/packages/map-gl-web/src/overlays/Geojson.js
+++ b/packages/map-gl-web/src/overlays/Geojson.js
@@ -1,6 +1,6 @@
import React, { useMemo } from "react";
import PropTypes from "prop-types";
-import GeoJSONLayer from "./GeoJSONLayer";
+import GeoJSONLayer from "./GeoJSONLayer.js";
export default function Geojson({
name,
diff --git a/packages/map-gl-web/src/overlays/Highlight.js b/packages/map-gl-web/src/overlays/Highlight.js
index cfcab700..26120534 100644
--- a/packages/map-gl-web/src/overlays/Highlight.js
+++ b/packages/map-gl-web/src/overlays/Highlight.js
@@ -1,6 +1,6 @@
import React from "react";
import PropTypes from "prop-types";
-import GeoJSONLayer from "./GeoJSONLayer";
+import GeoJSONLayer from "./GeoJSONLayer.js";
export default function Highlight({ data }) {
return (
diff --git a/packages/map-gl-web/src/overlays/index.js b/packages/map-gl-web/src/overlays/index.js
index 3bebc0bc..00ca10c4 100644
--- a/packages/map-gl-web/src/overlays/index.js
+++ b/packages/map-gl-web/src/overlays/index.js
@@ -1,8 +1,8 @@
-import Geojson from "./Geojson";
-import Highlight from "./Highlight";
-import Draw from "./Draw";
-import Accuracy from "./Accuracy";
-import Tile from "./Tile";
-import VectorTile from "./VectorTile";
+import Geojson from "./Geojson.js";
+import Highlight from "./Highlight.js";
+import Draw from "./Draw.js";
+import Accuracy from "./Accuracy.js";
+import Tile from "./Tile.js";
+import VectorTile from "./VectorTile.js";
export { Geojson, Highlight, Draw, Accuracy, Tile, VectorTile };
diff --git a/packages/map-gl/src/__tests__/createObjectURL.mock.js b/packages/map-gl/src/__tests__/createObjectURL.mock.js
deleted file mode 100644
index 0027fdcb..00000000
--- a/packages/map-gl/src/__tests__/createObjectURL.mock.js
+++ /dev/null
@@ -1 +0,0 @@
-window.URL.createObjectURL = () => {};
diff --git a/packages/map-gl/src/__tests__/index.js b/packages/map-gl/src/__tests__/index.js
index ebe7efac..268a851d 100644
--- a/packages/map-gl/src/__tests__/index.js
+++ b/packages/map-gl/src/__tests__/index.js
@@ -1,8 +1,7 @@
/**
* @jest-environment jsdom
*/
-import "./createObjectURL.mock";
-import mapgl from "../index";
+import mapgl from "../index.js";
test("it loads", () => {
expect(mapgl.name).toBe("map-gl");
diff --git a/packages/map/src/__tests__/map.js b/packages/map/src/__tests__/map.js
index 85b1927e..f4996e1c 100644
--- a/packages/map/src/__tests__/map.js
+++ b/packages/map/src/__tests__/map.js
@@ -1,12 +1,12 @@
import React from "react";
-import map from "../map";
+import map from "../map.js";
import {
routeMapConf,
contextFeature,
contextFeatureCollection,
-} from "../hooks";
-import { AutoMap } from "../components";
-import { Geo } from "../inputs";
+} from "../hooks.js";
+import { AutoMap } from "../components/index.js";
+import { Geo } from "../inputs/index.js";
import react, { Form } from "@wq/react";
import renderTest from "@wq/react/test";
import routeConfig from "./config.json";
diff --git a/packages/map/src/components/AutoBasemap.js b/packages/map/src/components/AutoBasemap.js
index f1774b4d..f1bc88d2 100644
--- a/packages/map/src/components/AutoBasemap.js
+++ b/packages/map/src/components/AutoBasemap.js
@@ -1,6 +1,6 @@
import React from "react";
import PropTypes from "prop-types";
-import { useBasemapComponents } from "../hooks";
+import { useBasemapComponents } from "../hooks.js";
export default function AutoBasemap({ type, ...conf }) {
const basemaps = useBasemapComponents(),
diff --git a/packages/map/src/components/AutoMap.js b/packages/map/src/components/AutoMap.js
index 1c5ada59..8d0bb50b 100644
--- a/packages/map/src/components/AutoMap.js
+++ b/packages/map/src/components/AutoMap.js
@@ -1,6 +1,6 @@
import React from "react";
import { useComponents, usePlugin } from "@wq/react";
-import { useMapState, useOverlayComponents } from "../hooks";
+import { useMapState, useOverlayComponents } from "../hooks.js";
import PropTypes from "prop-types";
export default function AutoMap({
diff --git a/packages/map/src/components/AutoOverlay.js b/packages/map/src/components/AutoOverlay.js
index a90ac831..3a9faa60 100644
--- a/packages/map/src/components/AutoOverlay.js
+++ b/packages/map/src/components/AutoOverlay.js
@@ -1,6 +1,6 @@
import React from "react";
import PropTypes from "prop-types";
-import { useOverlayComponents, useDataProps } from "../hooks";
+import { useOverlayComponents, useDataProps } from "../hooks.js";
export default function AutoOverlay({ type, data, context, ...conf }) {
const overlays = useOverlayComponents(),
diff --git a/packages/map/src/components/GeoTools.js b/packages/map/src/components/GeoTools.js
index 4111529d..ddf73c62 100644
--- a/packages/map/src/components/GeoTools.js
+++ b/packages/map/src/components/GeoTools.js
@@ -1,7 +1,7 @@
import React from "react";
import { useComponents, useInputComponents } from "@wq/react";
import { useMinWidth } from "@wq/material";
-import { useGeoTools } from "../hooks";
+import { useGeoTools } from "../hooks.js";
import PropTypes from "prop-types";
export default function GeoTools({ name, type, mapId }) {
diff --git a/packages/map/src/components/index.js b/packages/map/src/components/index.js
index a53e901f..dd4fa1a2 100644
--- a/packages/map/src/components/index.js
+++ b/packages/map/src/components/index.js
@@ -1,18 +1,18 @@
-import AutoMap from "./AutoMap";
-import AutoBasemap from "./AutoBasemap";
-import AutoOverlay from "./AutoOverlay";
-import HighlightPopup from "./HighlightPopup";
-import PropertyTable from "./PropertyTable";
-import MapProvider from "./MapProvider";
-import MapContainer from "./MapContainer";
-import MapToolbar from "./MapToolbar";
-import Map from "./Map";
-import MapLayers from "./MapLayers";
-import BasemapToggle from "./BasemapToggle";
-import OverlayToggle from "./OverlayToggle";
-import Legend from "./Legend";
-import LegendIcon from "./LegendIcon";
-import GeoTools from "./GeoTools";
+import AutoMap from "./AutoMap.js";
+import AutoBasemap from "./AutoBasemap.js";
+import AutoOverlay from "./AutoOverlay.js";
+import HighlightPopup from "./HighlightPopup.js";
+import PropertyTable from "./PropertyTable.js";
+import MapProvider from "./MapProvider.js";
+import MapContainer from "./MapContainer.js";
+import MapToolbar from "./MapToolbar.js";
+import Map from "./Map.js";
+import MapLayers from "./MapLayers.js";
+import BasemapToggle from "./BasemapToggle.js";
+import OverlayToggle from "./OverlayToggle.js";
+import Legend from "./Legend.js";
+import LegendIcon from "./LegendIcon.js";
+import GeoTools from "./GeoTools.js";
export {
AutoMap,
diff --git a/packages/map/src/geotools/GeoHelp.js b/packages/map/src/geotools/GeoHelp.js
index c799e68a..d5dd0049 100644
--- a/packages/map/src/geotools/GeoHelp.js
+++ b/packages/map/src/geotools/GeoHelp.js
@@ -1,7 +1,7 @@
import React from "react";
import { useComponents, useMessages } from "@wq/react";
-import { TYPE_MAP } from "../hooks";
-import GeoHelpIcon from "./GeoHelpIcon";
+import { TYPE_MAP } from "../hooks.js";
+import GeoHelpIcon from "./GeoHelpIcon.js";
import PropTypes from "prop-types";
export default function GeoHelp({ value, type }) {
diff --git a/packages/map/src/geotools/GeoLocate.js b/packages/map/src/geotools/GeoLocate.js
index 14b09928..e8272fc9 100644
--- a/packages/map/src/geotools/GeoLocate.js
+++ b/packages/map/src/geotools/GeoLocate.js
@@ -1,6 +1,6 @@
import React, { useState, useEffect, useRef } from "react";
import { useComponents } from "@wq/react";
-import geolocation from "./geolocation";
+import geolocation from "./geolocation.js";
import PropTypes from "prop-types";
export default function GeoLocate({ type, setLocation }) {
diff --git a/packages/map/src/geotools/geolocation.js b/packages/map/src/geotools/geolocation.js
index e1cb7bf8..1d5b4b09 100644
--- a/packages/map/src/geotools/geolocation.js
+++ b/packages/map/src/geotools/geolocation.js
@@ -1,5 +1,5 @@
const geolocation = {
- supported: "geolocation" in navigator,
+ supported: typeof navigator !== "undefined" && "geolocation" in navigator,
watchPosition(onPosition, onError, options) {
return navigator.geolocation.watchPosition(
onPosition,
diff --git a/packages/map/src/geotools/index.js b/packages/map/src/geotools/index.js
index 5df4759c..2ac5bc75 100644
--- a/packages/map/src/geotools/index.js
+++ b/packages/map/src/geotools/index.js
@@ -1,6 +1,6 @@
-import GeoHelp from "./GeoHelp";
-import GeoLocate from "./GeoLocate";
-import GeoCode from "./GeoCode";
-import GeoCoords from "./GeoCoords";
+import GeoHelp from "./GeoHelp.js";
+import GeoLocate from "./GeoLocate.js";
+import GeoCode from "./GeoCode.js";
+import GeoCoords from "./GeoCoords.js";
export { GeoHelp, GeoLocate, GeoCode, GeoCoords };
diff --git a/packages/map/src/index.js b/packages/map/src/index.js
index 72050f26..e5a115b4 100644
--- a/packages/map/src/index.js
+++ b/packages/map/src/index.js
@@ -1,4 +1,4 @@
-import map from "./map";
+import map from "./map.js";
import {
useBasemapComponents,
useOverlayComponents,
@@ -11,7 +11,7 @@ import {
asGeometry,
asFeatureCollection,
computeBounds,
-} from "./hooks";
+} from "./hooks.js";
import {
AutoMap,
AutoBasemap,
@@ -22,10 +22,10 @@ import {
Legend,
LegendIcon,
GeoTools,
-} from "./components/index";
-import { Geo } from "./inputs/index";
-import { GeoHelp, GeoLocate, GeoCode, GeoCoords } from "./geotools/index";
-import { DefaultList, DefaultDetail } from "./views/index";
+} from "./components/index.js";
+import { Geo } from "./inputs/index.js";
+import { GeoHelp, GeoLocate, GeoCode, GeoCoords } from "./geotools/index.js";
+import { DefaultList, DefaultDetail } from "./views/index.js";
export default map;
diff --git a/packages/map/src/inputs/Geo.js b/packages/map/src/inputs/Geo.js
index 5b2e2b87..2141ee01 100644
--- a/packages/map/src/inputs/Geo.js
+++ b/packages/map/src/inputs/Geo.js
@@ -5,7 +5,7 @@ import {
useOverlayComponents,
useFeatureCollection,
asGeometry,
-} from "../hooks";
+} from "../hooks.js";
import { useField } from "formik";
import PropTypes from "prop-types";
diff --git a/packages/map/src/inputs/index.js b/packages/map/src/inputs/index.js
index cb10512a..bcb95e1a 100644
--- a/packages/map/src/inputs/index.js
+++ b/packages/map/src/inputs/index.js
@@ -1,3 +1,3 @@
-import Geo from "./Geo";
+import Geo from "./Geo.js";
export { Geo };
diff --git a/packages/map/src/map.js b/packages/map/src/map.js
index d0132538..d12cad85 100644
--- a/packages/map/src/map.js
+++ b/packages/map/src/map.js
@@ -14,10 +14,10 @@ import {
Legend,
LegendIcon,
GeoTools,
-} from "./components/index";
-import { Geo } from "./inputs/index";
-import { GeoHelp, GeoLocate, GeoCode, GeoCoords } from "./geotools/index";
-import { DefaultList, DefaultDetail, DefaultPopup } from "./views/index";
+} from "./components/index.js";
+import { Geo } from "./inputs/index.js";
+import { GeoHelp, GeoLocate, GeoCode, GeoCoords } from "./geotools/index.js";
+import { DefaultList, DefaultDetail, DefaultPopup } from "./views/index.js";
import reducer, {
MAP_SET_VIEW_STATE,
MAP_SHOW_OVERLAY,
@@ -28,7 +28,7 @@ import reducer, {
MAP_TOGGLE_HIGHLIGHT,
MAP_REMOVE_HIGHLIGHT,
MAP_CLEAR_HIGHLIGHT,
-} from "./reducer";
+} from "./reducer.js";
// module variable
const map = {
diff --git a/packages/map/src/reducer.js b/packages/map/src/reducer.js
index 7509e0b3..82fe8b70 100644
--- a/packages/map/src/reducer.js
+++ b/packages/map/src/reducer.js
@@ -1,4 +1,4 @@
-import { routeMapConf } from "./hooks";
+import { routeMapConf } from "./hooks.js";
const RENDER = "RENDER";
export const MAP_SET_VIEW_STATE = "MAP_SET_VIEWSTATE",
diff --git a/packages/map/src/views/DefaultDetail.js b/packages/map/src/views/DefaultDetail.js
index e0f6728f..b1e24853 100644
--- a/packages/map/src/views/DefaultDetail.js
+++ b/packages/map/src/views/DefaultDetail.js
@@ -1,5 +1,5 @@
import React from "react";
-import { useMapState } from "../hooks";
+import { useMapState } from "../hooks.js";
import { DefaultDetail, useComponents, useRenderContext } from "@wq/react";
export default function DefaultDetailWithMap() {
diff --git a/packages/map/src/views/DefaultList.js b/packages/map/src/views/DefaultList.js
index ba4b7e0a..5a85f5a8 100644
--- a/packages/map/src/views/DefaultList.js
+++ b/packages/map/src/views/DefaultList.js
@@ -1,5 +1,5 @@
import React from "react";
-import { useMapState } from "../hooks";
+import { useMapState } from "../hooks.js";
import { DefaultList, useComponents, useList } from "@wq/react";
export default function DefaultListWithMap() {
diff --git a/packages/map/src/views/index.js b/packages/map/src/views/index.js
index 306dca68..abfc520c 100644
--- a/packages/map/src/views/index.js
+++ b/packages/map/src/views/index.js
@@ -1,5 +1,5 @@
-import DefaultList from "./DefaultList";
-import DefaultDetail from "./DefaultDetail";
-import DefaultPopup from "./DefaultPopup";
+import DefaultList from "./DefaultList.js";
+import DefaultDetail from "./DefaultDetail.js";
+import DefaultPopup from "./DefaultPopup.js";
export { DefaultList, DefaultDetail, DefaultPopup };
diff --git a/packages/material-native/src/__tests__/index.js b/packages/material-native/src/__tests__/index.js
index 29d27b76..da7c0909 100644
--- a/packages/material-native/src/__tests__/index.js
+++ b/packages/material-native/src/__tests__/index.js
@@ -1,4 +1,4 @@
-import material from "../index";
+import material from "../index.js";
test("it loads", () => {
expect(material.name).toBe("material");
diff --git a/packages/material-native/src/components/CancelButton.js b/packages/material-native/src/components/CancelButton.js
index cafcde3a..5263dc2a 100644
--- a/packages/material-native/src/components/CancelButton.js
+++ b/packages/material-native/src/components/CancelButton.js
@@ -1,3 +1,3 @@
-import ButtonLink from "./ButtonLink";
+import ButtonLink from "./ButtonLink.js";
export default ButtonLink;
diff --git a/packages/material-native/src/components/index.js b/packages/material-native/src/components/index.js
index 990411d2..7563e483 100644
--- a/packages/material-native/src/components/index.js
+++ b/packages/material-native/src/components/index.js
@@ -1,59 +1,59 @@
-import Container from "./Container";
-import Header from "./Header";
-import Main from "./Main";
-import Footer from "./Footer";
-import FooterContent from "./FooterContent";
-import View from "./View";
-import ScrollView from "./ScrollView";
-import HorizontalView from "./HorizontalView";
-import Text from "./Text";
-import Typography from "./Typography";
-import FormatJson from "./FormatJson";
+import Container from "./Container.js";
+import Header from "./Header.js";
+import Main from "./Main.js";
+import Footer from "./Footer.js";
+import FooterContent from "./FooterContent.js";
+import View from "./View.js";
+import ScrollView from "./ScrollView.js";
+import HorizontalView from "./HorizontalView.js";
+import Text from "./Text.js";
+import Typography from "./Typography.js";
+import FormatJson from "./FormatJson.js";
-import Link from "./Link";
-import Button from "./Button";
-import ButtonLink from "./ButtonLink";
-import HomeLink from "./HomeLink";
-import IconButton from "./IconButton";
-import Fab from "./Fab";
-import Chip from "./Chip";
-import Switch from "./Switch";
-import CheckboxButton from "./CheckboxButton";
-import RadioButton from "./RadioButton";
+import Link from "./Link.js";
+import Button from "./Button.js";
+import ButtonLink from "./ButtonLink.js";
+import HomeLink from "./HomeLink.js";
+import IconButton from "./IconButton.js";
+import Fab from "./Fab.js";
+import Chip from "./Chip.js";
+import Switch from "./Switch.js";
+import CheckboxButton from "./CheckboxButton.js";
+import RadioButton from "./RadioButton.js";
-import List from "./List";
-import ListItem from "./ListItem";
-import ListItemLink from "./ListItemLink";
-import ListSubheader from "./ListSubheader";
-import ExpansionPanel from "./ExpansionPanel";
-import ExpandableListItem from "./ExpandableListItem";
-import Divider from "./Divider";
+import List from "./List.js";
+import ListItem from "./ListItem.js";
+import ListItemLink from "./ListItemLink.js";
+import ListSubheader from "./ListSubheader.js";
+import ExpansionPanel from "./ExpansionPanel.js";
+import ExpandableListItem from "./ExpandableListItem.js";
+import Divider from "./Divider.js";
-import Table from "./Table";
-import TableHead from "./TableHead";
-import TableBody from "./TableBody";
-import TableRow from "./TableRow";
-import TableTitle from "./TableTitle";
-import TableCell from "./TableCell";
-import TableContainer from "./TableContainer";
-import TablePagination from "./TablePagination";
+import Table from "./Table.js";
+import TableHead from "./TableHead.js";
+import TableBody from "./TableBody.js";
+import TableRow from "./TableRow.js";
+import TableTitle from "./TableTitle.js";
+import TableCell from "./TableCell.js";
+import TableContainer from "./TableContainer.js";
+import TablePagination from "./TablePagination.js";
-import FormRoot from "./FormRoot";
-import FormError from "./FormError";
-import Fieldset from "./Fieldset";
-import FlatFieldset from "./FlatFieldset";
-import FieldsetArray from "./FieldsetArray";
-import FileArray from "./FileArray";
-import CancelButton from "./CancelButton";
-import SubmitButton from "./SubmitButton";
-import IconSubmitButton from "./IconSubmitButton";
-import DeleteForm from "./DeleteForm";
+import FormRoot from "./FormRoot.js";
+import FormError from "./FormError.js";
+import Fieldset from "./Fieldset.js";
+import FlatFieldset from "./FlatFieldset.js";
+import FieldsetArray from "./FieldsetArray.js";
+import FileArray from "./FileArray.js";
+import CancelButton from "./CancelButton.js";
+import SubmitButton from "./SubmitButton.js";
+import IconSubmitButton from "./IconSubmitButton.js";
+import DeleteForm from "./DeleteForm.js";
-import Spinner from "./Spinner";
-import Popup from "./Popup";
-import SidePanel from "./SidePanel";
-import Breadcrumbs from "./Breadcrumbs";
-import Pagination from "./Pagination";
+import Spinner from "./Spinner.js";
+import Popup from "./Popup.js";
+import SidePanel from "./SidePanel.js";
+import Breadcrumbs from "./Breadcrumbs.js";
+import Pagination from "./Pagination.js";
export {
Container,
diff --git a/packages/material-native/src/index.js b/packages/material-native/src/index.js
index fccc2fbe..aaa81999 100644
--- a/packages/material-native/src/index.js
+++ b/packages/material-native/src/index.js
@@ -1,9 +1,9 @@
import react from "@wq/react";
-import App from "./App";
-import * as components from "./components/index";
-import * as inputs from "./inputs/index";
-import * as icons from "./icons";
-import { format, parse } from "./inputs/date-utils";
+import App from "./App.js";
+import * as components from "./components/index.js";
+import * as inputs from "./inputs/index.js";
+import * as icons from "./icons.js";
+import { format, parse } from "./inputs/date-utils.js";
export default {
name: "material",
@@ -39,7 +39,7 @@ export default {
};
export { App };
-export * from "./components/index";
-export * from "./inputs/index";
-export * from "./hooks";
+export * from "./components/index.js";
+export * from "./inputs/index.js";
+export * from "./hooks.js";
export { format, parse };
diff --git a/packages/material-native/src/inputs/DateTime.js b/packages/material-native/src/inputs/DateTime.js
index 11763ecc..88726e69 100644
--- a/packages/material-native/src/inputs/DateTime.js
+++ b/packages/material-native/src/inputs/DateTime.js
@@ -4,7 +4,7 @@ import { Text } from "react-native";
import { TouchableRipple, TextInput } from "react-native-paper";
import { useField } from "formik";
import PropTypes from "prop-types";
-import { format, parse } from "./date-utils";
+import { format, parse } from "./date-utils.js";
const displayFormat = {
date: (value) => parse.date(value).toLocaleDateString(),
diff --git a/packages/material-native/src/inputs/date-utils.js b/packages/material-native/src/inputs/date-utils.js
index 213fd0d9..175e472c 100644
--- a/packages/material-native/src/inputs/date-utils.js
+++ b/packages/material-native/src/inputs/date-utils.js
@@ -1,5 +1,4 @@
-import formatISO9075 from "date-fns/formatISO9075";
-import parseISO from "date-fns/parseISO";
+import { parseISO, formatISO9075 } from "date-fns";
export const format = {
date: (value) => tryFormat(value, { representation: "date" }),
diff --git a/packages/material-native/src/inputs/index.js b/packages/material-native/src/inputs/index.js
index 79051a94..b521dd41 100644
--- a/packages/material-native/src/inputs/index.js
+++ b/packages/material-native/src/inputs/index.js
@@ -1,13 +1,13 @@
-import Input from "./Input";
-import Checkbox from "./Checkbox";
-import DateTime from "./DateTime";
-import File from "./File";
-import Image from "./Image";
-import Select from "./Select";
-import Radio from "./Radio";
-import Toggle from "./Toggle";
-import Hidden from "./Hidden";
-import HelperText from "./HelperText";
+import Input from "./Input.js";
+import Checkbox from "./Checkbox.js";
+import DateTime from "./DateTime.js";
+import File from "./File.js";
+import Image from "./Image.js";
+import Select from "./Select.js";
+import Radio from "./Radio.js";
+import Toggle from "./Toggle.js";
+import Hidden from "./Hidden.js";
+import HelperText from "./HelperText.js";
const Date = DateTime;
const Time = DateTime;
diff --git a/packages/material-web/src/App.js b/packages/material-web/src/App.js
index 1b31b21b..26c7cc62 100644
--- a/packages/material-web/src/App.js
+++ b/packages/material-web/src/App.js
@@ -3,8 +3,8 @@ import { App as DefaultApp, usePlugin } from "@wq/react";
import {
createTheme as createMuiTheme,
ThemeProvider,
-} from "@mui/material/styles";
-import CssBaseline from "@mui/material/CssBaseline";
+ CssBaseline,
+} from "@mui/material";
export default function App() {
const { theme } = usePlugin("material").config,
diff --git a/packages/material-web/src/__tests__/index.js b/packages/material-web/src/__tests__/index.js
index 29d27b76..da7c0909 100644
--- a/packages/material-web/src/__tests__/index.js
+++ b/packages/material-web/src/__tests__/index.js
@@ -1,4 +1,4 @@
-import material from "../index";
+import material from "../index.js";
test("it loads", () => {
expect(material.name).toBe("material");
diff --git a/packages/material-web/src/components/Accordion.js b/packages/material-web/src/components/Accordion.js
index 4283e0ee..3d76e77a 100644
--- a/packages/material-web/src/components/Accordion.js
+++ b/packages/material-web/src/components/Accordion.js
@@ -1,8 +1,10 @@
import React from "react";
-import MuiAccordion from "@mui/material/Accordion";
-import AccordionSummary from "@mui/material/AccordionSummary";
-import AccordionDetails from "@mui/material/AccordionDetails";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import {
+ Accordion as MuiAccordion,
+ AccordionSummary,
+ AccordionDetails,
+} from "@mui/material";
+import { ExpandMore as ExpandMoreIcon } from "@mui/icons-material";
import PropTypes from "prop-types";
export default function Accordion({
diff --git a/packages/material-web/src/components/Breadcrumbs.js b/packages/material-web/src/components/Breadcrumbs.js
index b3ae1d33..c755775a 100644
--- a/packages/material-web/src/components/Breadcrumbs.js
+++ b/packages/material-web/src/components/Breadcrumbs.js
@@ -1,7 +1,6 @@
import React from "react";
-import Paper from "@mui/material/Paper";
-import MuiBreadcrumbs from "@mui/material/Breadcrumbs";
-import NavigateNextIcon from "@mui/icons-material/NavigateNext";
+import { Paper, Breadcrumbs as MuiBreadcrumbs } from "@mui/material";
+import { NavigateNext as NavigateNextIcon } from "@mui/icons-material";
import { useReverse, useComponents } from "@wq/react";
diff --git a/packages/material-web/src/components/Button.js b/packages/material-web/src/components/Button.js
index 9254a4b0..f9670cf7 100644
--- a/packages/material-web/src/components/Button.js
+++ b/packages/material-web/src/components/Button.js
@@ -1,5 +1,5 @@
import React from "react";
-import MuiButton from "@mui/material/Button";
+import { Button as MuiButton } from "@mui/material";
import { useIcon } from "@wq/react";
import PropTypes from "prop-types";
diff --git a/packages/material-web/src/components/CancelButton.js b/packages/material-web/src/components/CancelButton.js
index cafcde3a..5263dc2a 100644
--- a/packages/material-web/src/components/CancelButton.js
+++ b/packages/material-web/src/components/CancelButton.js
@@ -1,3 +1,3 @@
-import ButtonLink from "./ButtonLink";
+import ButtonLink from "./ButtonLink.js";
export default ButtonLink;
diff --git a/packages/material-web/src/components/CheckboxButton.js b/packages/material-web/src/components/CheckboxButton.js
index cdae9a26..3b2e765a 100644
--- a/packages/material-web/src/components/CheckboxButton.js
+++ b/packages/material-web/src/components/CheckboxButton.js
@@ -1,3 +1,3 @@
-import Checkbox from "@mui/material/Checkbox";
+import { Checkbox } from "@mui/material";
export default Checkbox;
diff --git a/packages/material-web/src/components/Chip.js b/packages/material-web/src/components/Chip.js
index 37997d8a..02d824d4 100644
--- a/packages/material-web/src/components/Chip.js
+++ b/packages/material-web/src/components/Chip.js
@@ -1,5 +1,5 @@
import React from "react";
-import MuiChip from "@mui/material/Chip";
+import { Chip as MuiChip } from "@mui/material";
import { useIcon } from "@wq/react";
import PropTypes from "prop-types";
diff --git a/packages/material-web/src/components/Container.js b/packages/material-web/src/components/Container.js
index a96bc0b9..9841bef7 100644
--- a/packages/material-web/src/components/Container.js
+++ b/packages/material-web/src/components/Container.js
@@ -1,5 +1,5 @@
import React from "react";
-import Box from "@mui/material/Box";
+import { Box } from "@mui/material";
import PropTypes from "prop-types";
export default function Container({ children }) {
diff --git a/packages/material-web/src/components/Divider.js b/packages/material-web/src/components/Divider.js
index 0fb9df2a..aa1edc97 100644
--- a/packages/material-web/src/components/Divider.js
+++ b/packages/material-web/src/components/Divider.js
@@ -1,3 +1,3 @@
-import Divider from "@mui/material/Divider";
+import { Divider } from "@mui/material";
export default Divider;
diff --git a/packages/material-web/src/components/ExpandableListItem.js b/packages/material-web/src/components/ExpandableListItem.js
index 8419ed35..daedc2b1 100644
--- a/packages/material-web/src/components/ExpandableListItem.js
+++ b/packages/material-web/src/components/ExpandableListItem.js
@@ -1,6 +1,6 @@
import React, { useState } from "react";
import { useComponents } from "@wq/react";
-import Collapse from "@mui/material/Collapse";
+import { Collapse } from "@mui/material";
import PropTypes from "prop-types";
export default function ExpandableListItem({
diff --git a/packages/material-web/src/components/Fab.js b/packages/material-web/src/components/Fab.js
index 639a2706..f32f3c78 100644
--- a/packages/material-web/src/components/Fab.js
+++ b/packages/material-web/src/components/Fab.js
@@ -1,5 +1,5 @@
import React from "react";
-import MuiFab from "@mui/material/Fab";
+import { Fab as MuiFab } from "@mui/material";
import { Link } from "@wq/react";
import PropTypes from "prop-types";
import { useIcon } from "@wq/react";
diff --git a/packages/material-web/src/components/Fieldset.js b/packages/material-web/src/components/Fieldset.js
index 894623c6..c730b6be 100644
--- a/packages/material-web/src/components/Fieldset.js
+++ b/packages/material-web/src/components/Fieldset.js
@@ -1,7 +1,5 @@
import React from "react";
-import Card from "@mui/material/Card";
-import Typography from "@mui/material/Typography";
-import CardContent from "@mui/material/CardContent";
+import { Card, Typography, CardContent } from "@mui/material";
import PropTypes from "prop-types";
export default function Fieldset({ label, children }) {
diff --git a/packages/material-web/src/components/FileArray.js b/packages/material-web/src/components/FileArray.js
index 829512cb..063841c9 100644
--- a/packages/material-web/src/components/FileArray.js
+++ b/packages/material-web/src/components/FileArray.js
@@ -1,10 +1,12 @@
import React, { useMemo, useCallback, useRef } from "react";
import { useField } from "formik";
-import { DropzoneArea } from "mui-file-dropzone";
-import Fieldset from "./Fieldset";
-import HelperText from "../inputs/HelperText";
+import * as MuiFileDropzone from "mui-file-dropzone";
+import Fieldset from "./Fieldset.js";
+import HelperText from "../inputs/HelperText.js";
import PropTypes from "prop-types";
+const { DropzoneArea } = MuiFileDropzone;
+
export default function FileArray({ name, label, subform, hint, maxRows }) {
const [, { initialValue = [] }, { setValue }] = useField(name),
fileField = subform.find(
diff --git a/packages/material-web/src/components/FlatFieldset.js b/packages/material-web/src/components/FlatFieldset.js
index 78b45a31..289d718b 100644
--- a/packages/material-web/src/components/FlatFieldset.js
+++ b/packages/material-web/src/components/FlatFieldset.js
@@ -1,5 +1,5 @@
import React from "react";
-import Typography from "@mui/material/Typography";
+import { Typography } from "@mui/material";
import PropTypes from "prop-types";
export default function FlatFieldset({ label, children }) {
diff --git a/packages/material-web/src/components/FormError.js b/packages/material-web/src/components/FormError.js
index 63f14fca..ecf6f1ea 100644
--- a/packages/material-web/src/components/FormError.js
+++ b/packages/material-web/src/components/FormError.js
@@ -1,6 +1,6 @@
import React from "react";
import { useField } from "formik";
-import FormHelperText from "@mui/material/FormHelperText";
+import { FormHelperText } from "@mui/material";
export default function FormError(props) {
const [, { error }] = useField("__other__");
diff --git a/packages/material-web/src/components/Header.js b/packages/material-web/src/components/Header.js
index 4e281a4d..5cae5add 100644
--- a/packages/material-web/src/components/Header.js
+++ b/packages/material-web/src/components/Header.js
@@ -1,7 +1,5 @@
import React from "react";
-import AppBar from "@mui/material/AppBar";
-import Toolbar from "@mui/material/Toolbar";
-import Typography from "@mui/material/Typography";
+import { AppBar, Toolbar, Typography } from "@mui/material";
import { useSiteTitle, useBreadcrumbs, useComponents } from "@wq/react";
export default function Header() {
diff --git a/packages/material-web/src/components/HomeLink.js b/packages/material-web/src/components/HomeLink.js
index 421f80d6..3947e89e 100644
--- a/packages/material-web/src/components/HomeLink.js
+++ b/packages/material-web/src/components/HomeLink.js
@@ -1,7 +1,7 @@
import React from "react";
import { Link } from "@wq/react";
-import Button from "@mui/material/Button";
-import HomeIcon from "@mui/icons-material/Home";
+import { Button } from "@mui/material";
+import { Home as HomeIcon } from "@mui/icons-material";
import PropTypes from "prop-types";
export default function HomeLink({ to, label, active, ...rest }) {
diff --git a/packages/material-web/src/components/HorizontalView.js b/packages/material-web/src/components/HorizontalView.js
index 30c22f16..6f289d38 100644
--- a/packages/material-web/src/components/HorizontalView.js
+++ b/packages/material-web/src/components/HorizontalView.js
@@ -1,5 +1,5 @@
import React from "react";
-import Box from "@mui/material/Box";
+import { Box } from "@mui/material";
import PropTypes from "prop-types";
export default function HorizontalView({ children, ...rest }) {
diff --git a/packages/material-web/src/components/IconButton.js b/packages/material-web/src/components/IconButton.js
index 04a0bda7..15407f87 100644
--- a/packages/material-web/src/components/IconButton.js
+++ b/packages/material-web/src/components/IconButton.js
@@ -1,6 +1,6 @@
import React from "react";
import { useIcon } from "@wq/react";
-import MuiIconButton from "@mui/material/IconButton";
+import { IconButton as MuiIconButton } from "@mui/material";
import PropTypes from "prop-types";
export default function IconButton({ icon, size = "large", ...rest }) {
diff --git a/packages/material-web/src/components/Link.js b/packages/material-web/src/components/Link.js
index ca3cd0c5..3d4c5b00 100644
--- a/packages/material-web/src/components/Link.js
+++ b/packages/material-web/src/components/Link.js
@@ -1,6 +1,6 @@
import React from "react";
import { Link as RLink } from "@wq/react";
-import MuiLink from "@mui/material/Link";
+import { Link as MuiLink } from "@mui/material";
export default function Link(props) {
return ;
diff --git a/packages/material-web/src/components/List.js b/packages/material-web/src/components/List.js
index 14211165..56a1f535 100644
--- a/packages/material-web/src/components/List.js
+++ b/packages/material-web/src/components/List.js
@@ -1,5 +1,5 @@
import React from "react";
-import MuiList from "@mui/material/List";
+import { List as MuiList } from "@mui/material";
export default function List(props) {
return ;
diff --git a/packages/material-web/src/components/ListItem.js b/packages/material-web/src/components/ListItem.js
index e5276f54..cfb22d78 100644
--- a/packages/material-web/src/components/ListItem.js
+++ b/packages/material-web/src/components/ListItem.js
@@ -1,8 +1,10 @@
import React from "react";
-import MuiListItem from "@mui/material/ListItem";
-import ListItemText from "@mui/material/ListItemText";
-import ListItemIcon from "@mui/material/ListItemIcon";
-import ListItemSecondaryAction from "@mui/material/ListItemSecondaryAction";
+import {
+ ListItem as MuiListItem,
+ ListItemText,
+ ListItemIcon,
+ ListItemSecondaryAction,
+} from "@mui/material";
import PropTypes from "prop-types";
import { useIcon } from "@wq/react";
diff --git a/packages/material-web/src/components/ListSubheader.js b/packages/material-web/src/components/ListSubheader.js
index a2f4aecb..50cc3253 100644
--- a/packages/material-web/src/components/ListSubheader.js
+++ b/packages/material-web/src/components/ListSubheader.js
@@ -1,3 +1,3 @@
-import ListSubheader from "@mui/material/ListSubheader";
+import { ListSubheader } from "@mui/material";
export default ListSubheader;
diff --git a/packages/material-web/src/components/Main.js b/packages/material-web/src/components/Main.js
index 43cae988..514352de 100644
--- a/packages/material-web/src/components/Main.js
+++ b/packages/material-web/src/components/Main.js
@@ -1,5 +1,5 @@
import React from "react";
-import Box from "@mui/material/Box";
+import { Box } from "@mui/material";
import PropTypes from "prop-types";
export default function Main({ children }) {
diff --git a/packages/material-web/src/components/Pagination.js b/packages/material-web/src/components/Pagination.js
index 7dbfec14..be890d4e 100644
--- a/packages/material-web/src/components/Pagination.js
+++ b/packages/material-web/src/components/Pagination.js
@@ -1,7 +1,6 @@
import React from "react";
-import TablePagination from "@mui/material/TablePagination";
-import Paper from "@mui/material/Paper";
+import { TablePagination, Paper } from "@mui/material";
import { useRenderContext, useRouteInfo, useReverse, useNav } from "@wq/react";
diff --git a/packages/material-web/src/components/Popup.js b/packages/material-web/src/components/Popup.js
index 9b6da45c..5ecca16f 100644
--- a/packages/material-web/src/components/Popup.js
+++ b/packages/material-web/src/components/Popup.js
@@ -1,5 +1,5 @@
import React from "react";
-import Drawer from "@mui/material/Drawer";
+import { Drawer } from "@mui/material";
import PropTypes from "prop-types";
export default function Popup({
diff --git a/packages/material-web/src/components/RadioButton.js b/packages/material-web/src/components/RadioButton.js
index 3f928058..03a9ba78 100644
--- a/packages/material-web/src/components/RadioButton.js
+++ b/packages/material-web/src/components/RadioButton.js
@@ -1,3 +1,3 @@
-import Radio from "@mui/material/Radio";
+import { Radio } from "@mui/material";
export default Radio;
diff --git a/packages/material-web/src/components/SidePanel.js b/packages/material-web/src/components/SidePanel.js
index 39012a5029..7f92f06c 100644
--- a/packages/material-web/src/components/SidePanel.js
+++ b/packages/material-web/src/components/SidePanel.js
@@ -1,7 +1,6 @@
import React, { useState, useEffect } from "react";
import { useComponents } from "@wq/react";
-import Drawer from "@mui/material/Drawer";
-import useMediaQuery from "@mui/material/useMediaQuery";
+import { Drawer, useMediaQuery } from "@mui/material";
import PropTypes from "prop-types";
export default function SidePanel({ children, compactChildren, onChange }) {
diff --git a/packages/material-web/src/components/Spinner.js b/packages/material-web/src/components/Spinner.js
index 54a01fb9..b44819d8 100644
--- a/packages/material-web/src/components/Spinner.js
+++ b/packages/material-web/src/components/Spinner.js
@@ -1,6 +1,5 @@
import React from "react";
-import Modal from "@mui/material/Modal";
-import CircularProgress from "@mui/material/CircularProgress";
+import { Modal, CircularProgress } from "@mui/material";
import { useSpinner } from "@wq/react";
export default function Spinner() {
diff --git a/packages/material-web/src/components/Switch.js b/packages/material-web/src/components/Switch.js
index 52dc5502..36624e22 100644
--- a/packages/material-web/src/components/Switch.js
+++ b/packages/material-web/src/components/Switch.js
@@ -1,3 +1,3 @@
-import Switch from "@mui/material/Switch";
+import { Switch } from "@mui/material";
export default Switch;
diff --git a/packages/material-web/src/components/Table.js b/packages/material-web/src/components/Table.js
index 59db28c5..469fe3d2 100644
--- a/packages/material-web/src/components/Table.js
+++ b/packages/material-web/src/components/Table.js
@@ -1,3 +1,3 @@
-import Table from "@mui/material/Table";
+import { Table } from "@mui/material";
export default Table;
diff --git a/packages/material-web/src/components/TableBody.js b/packages/material-web/src/components/TableBody.js
index bbf00018..bc6ce46e 100644
--- a/packages/material-web/src/components/TableBody.js
+++ b/packages/material-web/src/components/TableBody.js
@@ -1,3 +1,3 @@
-import TableBody from "@mui/material/TableBody";
+import { TableBody } from "@mui/material";
export default TableBody;
diff --git a/packages/material-web/src/components/TableCell.js b/packages/material-web/src/components/TableCell.js
index dab02ee5..e85960cb 100644
--- a/packages/material-web/src/components/TableCell.js
+++ b/packages/material-web/src/components/TableCell.js
@@ -1,3 +1,3 @@
-import TableCell from "@mui/material/TableCell";
+import { TableCell } from "@mui/material";
export default TableCell;
diff --git a/packages/material-web/src/components/TableContainer.js b/packages/material-web/src/components/TableContainer.js
index 188b5915..e03d47a0 100644
--- a/packages/material-web/src/components/TableContainer.js
+++ b/packages/material-web/src/components/TableContainer.js
@@ -1,3 +1,3 @@
-import TableContainer from "@mui/material/TableContainer";
+import { TableContainer } from "@mui/material";
export default TableContainer;
diff --git a/packages/material-web/src/components/TableHead.js b/packages/material-web/src/components/TableHead.js
index ab097591..64253540 100644
--- a/packages/material-web/src/components/TableHead.js
+++ b/packages/material-web/src/components/TableHead.js
@@ -1,3 +1,3 @@
-import TableHead from "@mui/material/TableHead";
+import { TableHead } from "@mui/material";
export default TableHead;
diff --git a/packages/material-web/src/components/TablePagination.js b/packages/material-web/src/components/TablePagination.js
index ba7235ce..8a5ab422 100644
--- a/packages/material-web/src/components/TablePagination.js
+++ b/packages/material-web/src/components/TablePagination.js
@@ -1,3 +1,3 @@
-import TablePagination from "@mui/material/TablePagination";
+import { TablePagination } from "@mui/material";
export default TablePagination;
diff --git a/packages/material-web/src/components/TableRow.js b/packages/material-web/src/components/TableRow.js
index cd72ea55..6dcaf8c6 100644
--- a/packages/material-web/src/components/TableRow.js
+++ b/packages/material-web/src/components/TableRow.js
@@ -1,3 +1,3 @@
-import TableRow from "@mui/material/TableRow";
+import { TableRow } from "@mui/material";
export default TableRow;
diff --git a/packages/material-web/src/components/TableTitle.js b/packages/material-web/src/components/TableTitle.js
index dab02ee5..e85960cb 100644
--- a/packages/material-web/src/components/TableTitle.js
+++ b/packages/material-web/src/components/TableTitle.js
@@ -1,3 +1,3 @@
-import TableCell from "@mui/material/TableCell";
+import { TableCell } from "@mui/material";
export default TableCell;
diff --git a/packages/material-web/src/components/Typography.js b/packages/material-web/src/components/Typography.js
index e2bc306e..ae0d0d39 100644
--- a/packages/material-web/src/components/Typography.js
+++ b/packages/material-web/src/components/Typography.js
@@ -1,3 +1,3 @@
-import Typography from "@mui/material/Typography";
+import { Typography } from "@mui/material";
export default Typography;
diff --git a/packages/material-web/src/components/index.js b/packages/material-web/src/components/index.js
index 94fd4286..9d31b8c7 100644
--- a/packages/material-web/src/components/index.js
+++ b/packages/material-web/src/components/index.js
@@ -1,59 +1,59 @@
-import Container from "./Container";
-import Header from "./Header";
-import Main from "./Main";
-import Footer from "./Footer";
-import FooterContent from "./FooterContent";
-import View from "./View";
-import ScrollView from "./ScrollView";
-import HorizontalView from "./HorizontalView";
-import Text from "./Text";
-import Typography from "./Typography";
-import FormatJson from "./FormatJson";
+import Container from "./Container.js";
+import Header from "./Header.js";
+import Main from "./Main.js";
+import Footer from "./Footer.js";
+import FooterContent from "./FooterContent.js";
+import View from "./View.js";
+import ScrollView from "./ScrollView.js";
+import HorizontalView from "./HorizontalView.js";
+import Text from "./Text.js";
+import Typography from "./Typography.js";
+import FormatJson from "./FormatJson.js";
-import Link from "./Link";
-import Button from "./Button";
-import ButtonLink from "./ButtonLink";
-import HomeLink from "./HomeLink";
-import IconButton from "./IconButton";
-import Fab from "./Fab";
-import Chip from "./Chip";
-import Switch from "./Switch";
-import CheckboxButton from "./CheckboxButton";
-import RadioButton from "./RadioButton";
+import Link from "./Link.js";
+import Button from "./Button.js";
+import ButtonLink from "./ButtonLink.js";
+import HomeLink from "./HomeLink.js";
+import IconButton from "./IconButton.js";
+import Fab from "./Fab.js";
+import Chip from "./Chip.js";
+import Switch from "./Switch.js";
+import CheckboxButton from "./CheckboxButton.js";
+import RadioButton from "./RadioButton.js";
-import List from "./List";
-import ListItem from "./ListItem";
-import ListItemLink from "./ListItemLink";
-import ListSubheader from "./ListSubheader";
-import Accordion from "./Accordion";
-import ExpandableListItem from "./ExpandableListItem";
-import Divider from "./Divider";
+import List from "./List.js";
+import ListItem from "./ListItem.js";
+import ListItemLink from "./ListItemLink.js";
+import ListSubheader from "./ListSubheader.js";
+import Accordion from "./Accordion.js";
+import ExpandableListItem from "./ExpandableListItem.js";
+import Divider from "./Divider.js";
-import Table from "./Table";
-import TableHead from "./TableHead";
-import TableBody from "./TableBody";
-import TableRow from "./TableRow";
-import TableTitle from "./TableTitle";
-import TableCell from "./TableCell";
-import TableContainer from "./TableContainer";
-import TablePagination from "./TablePagination";
+import Table from "./Table.js";
+import TableHead from "./TableHead.js";
+import TableBody from "./TableBody.js";
+import TableRow from "./TableRow.js";
+import TableTitle from "./TableTitle.js";
+import TableCell from "./TableCell.js";
+import TableContainer from "./TableContainer.js";
+import TablePagination from "./TablePagination.js";
-import FormRoot from "./FormRoot";
-import FormError from "./FormError";
-import Fieldset from "./Fieldset";
-import FlatFieldset from "./FlatFieldset";
-import FieldsetArray from "./FieldsetArray";
-import FileArray from "./FileArray";
-import CancelButton from "./CancelButton";
-import SubmitButton from "./SubmitButton";
-import IconSubmitButton from "./IconSubmitButton";
-import DeleteForm from "./DeleteForm";
+import FormRoot from "./FormRoot.js";
+import FormError from "./FormError.js";
+import Fieldset from "./Fieldset.js";
+import FlatFieldset from "./FlatFieldset.js";
+import FieldsetArray from "./FieldsetArray.js";
+import FileArray from "./FileArray.js";
+import CancelButton from "./CancelButton.js";
+import SubmitButton from "./SubmitButton.js";
+import IconSubmitButton from "./IconSubmitButton.js";
+import DeleteForm from "./DeleteForm.js";
-import Spinner from "./Spinner";
-import Popup from "./Popup";
-import SidePanel from "./SidePanel";
-import Breadcrumbs from "./Breadcrumbs";
-import Pagination from "./Pagination";
+import Spinner from "./Spinner.js";
+import Popup from "./Popup.js";
+import SidePanel from "./SidePanel.js";
+import Breadcrumbs from "./Breadcrumbs.js";
+import Pagination from "./Pagination.js";
export {
Container,
diff --git a/packages/material-web/src/hooks.js b/packages/material-web/src/hooks.js
index f3f2bf25..34c41c54 100644
--- a/packages/material-web/src/hooks.js
+++ b/packages/material-web/src/hooks.js
@@ -1,4 +1,4 @@
-import useMediaQuery from "@mui/material/useMediaQuery";
+import { useMediaQuery } from "@mui/material";
export function useMinWidth(minWidth) {
return useMediaQuery(`(min-width:${minWidth}px)`);
diff --git a/packages/material-web/src/icons.js b/packages/material-web/src/icons.js
index c159fc5d..72f3a6e7 100644
--- a/packages/material-web/src/icons.js
+++ b/packages/material-web/src/icons.js
@@ -1,17 +1,19 @@
-import Add from "@mui/icons-material/Add";
-import Edit from "@mui/icons-material/Edit";
-import Delete from "@mui/icons-material/Delete";
-import Success from "@mui/icons-material/Done";
-import Error from "@mui/icons-material/Error";
-import Pending from "@mui/icons-material/Sync";
-import Close from "@mui/icons-material/Close";
-import Expand from "@mui/icons-material/ExpandMore";
-import Collapse from "@mui/icons-material/ExpandLess";
-import PanelOpen from "@mui/icons-material/ChevronRight";
-import PanelClose from "@mui/icons-material/ChevronLeft";
-import GpsStart from "@mui/icons-material/GpsFixed";
-import GpsStop from "@mui/icons-material/GpsOff";
-import Search from "@mui/icons-material/Search";
+import {
+ Add,
+ Edit,
+ Delete,
+ Done as Success,
+ Error,
+ Sync as Pending,
+ Close,
+ ExpandMore as Expand,
+ ExpandLess as Collapse,
+ ChevronRight as PanelOpen,
+ ChevronLeft as PanelClose,
+ GpsFixed as GpsStart,
+ GpsOff as GpsStop,
+ Search,
+} from "@mui/icons-material";
export {
Add,
diff --git a/packages/material-web/src/index.js b/packages/material-web/src/index.js
index fccc2fbe..aaa81999 100644
--- a/packages/material-web/src/index.js
+++ b/packages/material-web/src/index.js
@@ -1,9 +1,9 @@
import react from "@wq/react";
-import App from "./App";
-import * as components from "./components/index";
-import * as inputs from "./inputs/index";
-import * as icons from "./icons";
-import { format, parse } from "./inputs/date-utils";
+import App from "./App.js";
+import * as components from "./components/index.js";
+import * as inputs from "./inputs/index.js";
+import * as icons from "./icons.js";
+import { format, parse } from "./inputs/date-utils.js";
export default {
name: "material",
@@ -39,7 +39,7 @@ export default {
};
export { App };
-export * from "./components/index";
-export * from "./inputs/index";
-export * from "./hooks";
+export * from "./components/index.js";
+export * from "./inputs/index.js";
+export * from "./hooks.js";
export { format, parse };
diff --git a/packages/material-web/src/inputs/Checkbox.js b/packages/material-web/src/inputs/Checkbox.js
index f8c5153d..bc02c367 100644
--- a/packages/material-web/src/inputs/Checkbox.js
+++ b/packages/material-web/src/inputs/Checkbox.js
@@ -1,7 +1,7 @@
import React from "react";
import { Field } from "formik";
import { CheckboxWithLabel } from "formik-mui";
-import HelperText from "./HelperText";
+import HelperText from "./HelperText.js";
import PropTypes from "prop-types";
export default function Input({ label, ...props }) {
diff --git a/packages/material-web/src/inputs/DateTime.js b/packages/material-web/src/inputs/DateTime.js
index 6a56a13d..85707cdb 100644
--- a/packages/material-web/src/inputs/DateTime.js
+++ b/packages/material-web/src/inputs/DateTime.js
@@ -9,8 +9,8 @@ import { LocalizationProvider } from "@mui/x-date-pickers";
import DateFnsUtils from "@date-io/date-fns";
import PropTypes from "prop-types";
import { usePlugin } from "@wq/react";
-import { format, parse } from "./date-utils";
-import Input from "./Input";
+import { format, parse } from "./date-utils.js";
+import Input from "./Input.js";
function makeUtils(type) {
class Utils extends DateFnsUtils {
diff --git a/packages/material-web/src/inputs/File.js b/packages/material-web/src/inputs/File.js
index c96cebfd..72f8a5cb 100644
--- a/packages/material-web/src/inputs/File.js
+++ b/packages/material-web/src/inputs/File.js
@@ -1,10 +1,12 @@
import React, { useMemo, useCallback, useRef } from "react";
import { useField } from "formik";
-import { DropzoneArea } from "mui-file-dropzone";
-import InputLabel from "@mui/material/InputLabel";
-import HelperText from "./HelperText";
+import * as MuiFileDropzone from "mui-file-dropzone";
+import { InputLabel } from "@mui/material";
+import HelperText from "./HelperText.js";
import PropTypes from "prop-types";
+const { DropzoneArea } = MuiFileDropzone;
+
export default function File({ name, accept, hint, label }) {
const [, { initialValue }, { setValue }] = useField(name),
loadedRef = useRef(null);
diff --git a/packages/material-web/src/inputs/HelperText.js b/packages/material-web/src/inputs/HelperText.js
index 2c45a8c0..e8702a3c 100644
--- a/packages/material-web/src/inputs/HelperText.js
+++ b/packages/material-web/src/inputs/HelperText.js
@@ -1,6 +1,6 @@
import React from "react";
import { useFormikContext, getIn } from "formik";
-import FormHelperText from "@mui/material/FormHelperText";
+import { FormHelperText } from "@mui/material";
import PropTypes from "prop-types";
export default function HelperText({ name, hint }) {
diff --git a/packages/material-web/src/inputs/Hidden.js b/packages/material-web/src/inputs/Hidden.js
index 22238fb0..eef8a7a1 100644
--- a/packages/material-web/src/inputs/Hidden.js
+++ b/packages/material-web/src/inputs/Hidden.js
@@ -1,6 +1,6 @@
import React from "react";
import { Field } from "formik";
-import HelperText from "./HelperText";
+import HelperText from "./HelperText.js";
import PropTypes from "prop-types";
export default function Hidden(props) {
diff --git a/packages/material-web/src/inputs/Image.js b/packages/material-web/src/inputs/Image.js
index b74b72bd..ec717e97 100644
--- a/packages/material-web/src/inputs/Image.js
+++ b/packages/material-web/src/inputs/Image.js
@@ -1,5 +1,5 @@
import React from "react";
-import File from "./File";
+import File from "./File.js";
export default function Image(props) {
return ;
diff --git a/packages/material-web/src/inputs/Radio.js b/packages/material-web/src/inputs/Radio.js
index de673b45..7498e523 100644
--- a/packages/material-web/src/inputs/Radio.js
+++ b/packages/material-web/src/inputs/Radio.js
@@ -1,11 +1,13 @@
import React from "react";
import { Field } from "formik";
import { RadioGroup } from "formik-mui";
-import FormControl from "@mui/material/FormControl";
-import FormLabel from "@mui/material/FormLabel";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import MuiRadio from "@mui/material/Radio";
-import HelperText from "./HelperText";
+import {
+ FormControl,
+ FormLabel,
+ FormControlLabel,
+ Radio as MuiRadio,
+} from "@mui/material";
+import HelperText from "./HelperText.js";
import PropTypes from "prop-types";
export default function Radio({ choices, label, ...rest }) {
diff --git a/packages/material-web/src/inputs/Select.js b/packages/material-web/src/inputs/Select.js
index a25561d8..9dcb2d17 100644
--- a/packages/material-web/src/inputs/Select.js
+++ b/packages/material-web/src/inputs/Select.js
@@ -1,15 +1,17 @@
import React, { useMemo } from "react";
import { Field, getIn } from "formik";
import { Select as FMuiSelect } from "formik-mui";
-import MenuItem from "@mui/material/MenuItem";
-import Checkbox from "@mui/material/Checkbox";
-import ListItemText from "@mui/material/ListItemText";
-import ListSubheader from "@mui/material/ListSubheader";
-import InputLabel from "@mui/material/InputLabel";
-import FormControl from "@mui/material/FormControl";
+import {
+ MenuItem,
+ Checkbox,
+ ListItemText,
+ ListSubheader,
+ InputLabel,
+ FormControl,
+} from "@mui/material";
import PropTypes from "prop-types";
import { useFormikContext } from "formik";
-import HelperText from "./HelperText";
+import HelperText from "./HelperText.js";
function ContextCheckbox({ value, field }) {
const { values } = useFormikContext();
diff --git a/packages/material-web/src/inputs/Toggle.js b/packages/material-web/src/inputs/Toggle.js
index 23658295..21a25c99 100644
--- a/packages/material-web/src/inputs/Toggle.js
+++ b/packages/material-web/src/inputs/Toggle.js
@@ -1,10 +1,8 @@
import React from "react";
import { Field } from "formik";
-import ToggleButton from "@mui/material/ToggleButton";
+import { ToggleButton, FormControl, FormLabel } from "@mui/material";
import { ToggleButtonGroup } from "formik-mui";
-import FormControl from "@mui/material/FormControl";
-import FormLabel from "@mui/material/FormLabel";
-import HelperText from "./HelperText";
+import HelperText from "./HelperText.js";
import PropTypes from "prop-types";
export default function Toggle({ choices, label, ...rest }) {
diff --git a/packages/material-web/src/inputs/date-utils.js b/packages/material-web/src/inputs/date-utils.js
index 213fd0d9..175e472c 100644
--- a/packages/material-web/src/inputs/date-utils.js
+++ b/packages/material-web/src/inputs/date-utils.js
@@ -1,5 +1,4 @@
-import formatISO9075 from "date-fns/formatISO9075";
-import parseISO from "date-fns/parseISO";
+import { parseISO, formatISO9075 } from "date-fns";
export const format = {
date: (value) => tryFormat(value, { representation: "date" }),
diff --git a/packages/material-web/src/inputs/index.js b/packages/material-web/src/inputs/index.js
index 79051a94..b521dd41 100644
--- a/packages/material-web/src/inputs/index.js
+++ b/packages/material-web/src/inputs/index.js
@@ -1,13 +1,13 @@
-import Input from "./Input";
-import Checkbox from "./Checkbox";
-import DateTime from "./DateTime";
-import File from "./File";
-import Image from "./Image";
-import Select from "./Select";
-import Radio from "./Radio";
-import Toggle from "./Toggle";
-import Hidden from "./Hidden";
-import HelperText from "./HelperText";
+import Input from "./Input.js";
+import Checkbox from "./Checkbox.js";
+import DateTime from "./DateTime.js";
+import File from "./File.js";
+import Image from "./Image.js";
+import Select from "./Select.js";
+import Radio from "./Radio.js";
+import Toggle from "./Toggle.js";
+import Hidden from "./Hidden.js";
+import HelperText from "./HelperText.js";
const Date = DateTime;
const Time = DateTime;
diff --git a/packages/material/src/__tests__/index.js b/packages/material/src/__tests__/index.js
index 29d27b76..da7c0909 100644
--- a/packages/material/src/__tests__/index.js
+++ b/packages/material/src/__tests__/index.js
@@ -1,4 +1,4 @@
-import material from "../index";
+import material from "../index.js";
test("it loads", () => {
expect(material.name).toBe("material");
diff --git a/packages/model/src/__tests__/model.js b/packages/model/src/__tests__/model.js
index 4ed0d3f6..cc086289 100644
--- a/packages/model/src/__tests__/model.js
+++ b/packages/model/src/__tests__/model.js
@@ -1,5 +1,5 @@
import store from "@wq/store";
-import { model } from "../model";
+import { model } from "../model.js";
global.structuredClone = (val) => val;
diff --git a/packages/model/src/index.js b/packages/model/src/index.js
index 30045e59..1838d760 100644
--- a/packages/model/src/index.js
+++ b/packages/model/src/index.js
@@ -26,7 +26,7 @@ const orm = {
},
reducer(state, action) {
if (!this._orm) {
- return state;
+ return state || {};
}
return this._orm.reducer(state, action);
},
diff --git a/packages/model/src/model.js b/packages/model/src/model.js
index e2da4819..aee0be50 100644
--- a/packages/model/src/model.js
+++ b/packages/model/src/model.js
@@ -1,12 +1,8 @@
import ds from "@wq/store";
import deepcopy from "deepcopy";
-import {
- Model as ORMModel,
- ORM,
- attr,
- fk,
- ForeignKey,
-} from "redux-orm/src/index.js";
+import * as ReduxORM from "redux-orm";
+
+const { Model: ORMModel, ORM, attr, fk, ForeignKey } = ReduxORM;
function model(config) {
return new Model(config);
diff --git a/packages/outbox/src/__tests__/batch.js b/packages/outbox/src/__tests__/batch.js
index 30fe0552..bd59fe89 100644
--- a/packages/outbox/src/__tests__/batch.js
+++ b/packages/outbox/src/__tests__/batch.js
@@ -1,6 +1,6 @@
import store from "@wq/store";
import router from "@wq/router";
-import outboxMod from "../outbox";
+import outboxMod from "../outbox.js";
import { model } from "@wq/model";
global.structuredClone = (val) => val;
diff --git a/packages/outbox/src/__tests__/outbox.js b/packages/outbox/src/__tests__/outbox.js
index b4db19e8..6fd3b47f 100644
--- a/packages/outbox/src/__tests__/outbox.js
+++ b/packages/outbox/src/__tests__/outbox.js
@@ -1,5 +1,5 @@
import store from "@wq/store";
-import outboxMod from "../outbox";
+import outboxMod from "../outbox.js";
import { model } from "@wq/model";
global.structuredClone = (val) => val;
diff --git a/packages/outbox/src/offline.js b/packages/outbox/src/offline.js
index 51c79946..f8a41cb4 100644
--- a/packages/outbox/src/offline.js
+++ b/packages/outbox/src/offline.js
@@ -1,6 +1,8 @@
import { createOffline } from "@redux-offline/redux-offline";
-import offlineConfig from "@redux-offline/redux-offline/lib/defaults";
-import { RESET_STATE } from "@redux-offline/redux-offline/lib/constants";
-import { busy } from "@redux-offline/redux-offline/lib/actions";
+import offlineDefaults from "@redux-offline/redux-offline/lib/defaults/index.js";
+import { RESET_STATE } from "@redux-offline/redux-offline/lib/constants.js";
+import { busy } from "@redux-offline/redux-offline/lib/actions.js";
+
+const offlineConfig = offlineDefaults.default || offlineDefaults;
export { createOffline, offlineConfig, RESET_STATE, busy };
diff --git a/packages/outbox/src/outbox.js b/packages/outbox/src/outbox.js
index 674b3d5a..6bd53288 100644
--- a/packages/outbox/src/outbox.js
+++ b/packages/outbox/src/outbox.js
@@ -1,7 +1,7 @@
import ds from "@wq/store";
import { model } from "@wq/model";
-import { convert } from "../vendor/json-forms";
-import { createOffline, offlineConfig, RESET_STATE, busy } from "./offline";
+import { convert } from "../vendor/json-forms.js";
+import { createOffline, offlineConfig, RESET_STATE, busy } from "./offline.js";
const { discard: defaultDiscard, retry: defaultRetry } = offlineConfig;
diff --git a/packages/react/.gitignore b/packages/react/.gitignore
index 3fa7e563..7c74bafa 100644
--- a/packages/react/.gitignore
+++ b/packages/react/.gitignore
@@ -1,11 +1,13 @@
+/react.js
/index.js
+/index.native.js
+/index.expo.js
/App.js
/App.native.js
/hooks.js
/hooks.native.js
/icons.js
/init.js
-/init.expo.js
/init.native.js
/messages.js
/validate.js
diff --git a/packages/react/package.json b/packages/react/package.json
index dec32a7a..717d99da 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -4,7 +4,8 @@
"description": "React renderer for use with @wq/app",
"type": "module",
"main": "index.js",
- "react-native": "src/index.js",
+ "react-native": "src/index.native.js",
+ "expo": "src/index.expo.js",
"scripts": {
"test": "cd ../../ && npm run jest packages/react",
"build": "npm run babel && npm run prettier",
diff --git a/packages/react/src/App.js b/packages/react/src/App.js
index a9b26c8e..3aebfab9 100644
--- a/packages/react/src/App.js
+++ b/packages/react/src/App.js
@@ -6,7 +6,7 @@ import {
useComponents,
useViewComponents,
usePluginContent,
-} from "./hooks";
+} from "./hooks.js";
import PropTypes from "prop-types";
const HTML = "@@HTML", // @wq/router
diff --git a/packages/react/src/App.native.js b/packages/react/src/App.native.js
index f67bf02c..96781896 100644
--- a/packages/react/src/App.native.js
+++ b/packages/react/src/App.native.js
@@ -8,7 +8,7 @@ import {
navRef,
useNavigationProps,
useCreateNavigator,
-} from "./hooks";
+} from "./hooks.native.js";
import { NavigationContainer } from "@react-navigation/native";
import PropTypes from "prop-types";
diff --git a/packages/react/src/__tests__/index.js b/packages/react/src/__tests__/index.js
index 01465825..ebf91b24 100644
--- a/packages/react/src/__tests__/index.js
+++ b/packages/react/src/__tests__/index.js
@@ -1,4 +1,4 @@
-import reactRenderer from "../index";
+import reactRenderer from "../index.js";
test("it loads", () => {
expect(reactRenderer.name).toBe("react");
diff --git a/packages/react/src/components/AutoForm.js b/packages/react/src/components/AutoForm.js
index 37b7637b..b8b5c329 100644
--- a/packages/react/src/components/AutoForm.js
+++ b/packages/react/src/components/AutoForm.js
@@ -1,5 +1,5 @@
import React from "react";
-import { useComponents } from "../hooks";
+import { useComponents } from "../hooks.js";
import PropTypes from "prop-types";
export default function AutoForm({
diff --git a/packages/react/src/components/AutoInput.js b/packages/react/src/components/AutoInput.js
index db675978..b124d754 100644
--- a/packages/react/src/components/AutoInput.js
+++ b/packages/react/src/components/AutoInput.js
@@ -1,5 +1,5 @@
import React from "react";
-import { useComponents, useInputComponents } from "../hooks";
+import { useComponents, useInputComponents } from "../hooks.js";
import PropTypes from "prop-types";
import { pascalCase } from "pascal-case";
diff --git a/packages/react/src/components/AutoSubform.js b/packages/react/src/components/AutoSubform.js
index 0c5ebe92..185a97ca 100644
--- a/packages/react/src/components/AutoSubform.js
+++ b/packages/react/src/components/AutoSubform.js
@@ -1,5 +1,5 @@
import React from "react";
-import { useComponents } from "../hooks";
+import { useComponents } from "../hooks.js";
import PropTypes from "prop-types";
import { pascalCase } from "pascal-case";
diff --git a/packages/react/src/components/AutoSubformArray.js b/packages/react/src/components/AutoSubformArray.js
index 20572cd8..b771a061 100644
--- a/packages/react/src/components/AutoSubformArray.js
+++ b/packages/react/src/components/AutoSubformArray.js
@@ -1,8 +1,8 @@
import React, { useCallback } from "react";
-import { useComponents } from "../hooks";
+import { useComponents } from "../hooks.js";
import { FieldArray, getIn } from "formik";
import PropTypes from "prop-types";
-import { initData } from "./AutoForm";
+import { initData } from "./AutoForm.js";
import { pascalCase } from "pascal-case";
export default function AutoSubformArray({ name, label, subform, ...rest }) {
diff --git a/packages/react/src/components/Breadcrumbs.js b/packages/react/src/components/Breadcrumbs.js
index 41bf1453..b0509fdd 100644
--- a/packages/react/src/components/Breadcrumbs.js
+++ b/packages/react/src/components/Breadcrumbs.js
@@ -1,5 +1,5 @@
import React from "react";
-import { useComponents } from "../hooks";
+import { useComponents } from "../hooks.js";
import PropTypes from "prop-types";
export default function Breadcrumbs({ links }) {
diff --git a/packages/react/src/components/ButtonLink.js b/packages/react/src/components/ButtonLink.js
index 14d5b3d4..f23300fa 100644
--- a/packages/react/src/components/ButtonLink.js
+++ b/packages/react/src/components/ButtonLink.js
@@ -1,5 +1,7 @@
import React from "react";
-import { NavLink } from "redux-first-router-link";
+import * as ReduxFirstRouterLink from "redux-first-router-link";
+
+const { NavLink } = ReduxFirstRouterLink;
export default function ButtonLink(props) {
return (
diff --git a/packages/react/src/components/CancelButton.js b/packages/react/src/components/CancelButton.js
index cafcde3a..5263dc2a 100644
--- a/packages/react/src/components/CancelButton.js
+++ b/packages/react/src/components/CancelButton.js
@@ -1,3 +1,3 @@
-import ButtonLink from "./ButtonLink";
+import ButtonLink from "./ButtonLink.js";
export default ButtonLink;
diff --git a/packages/react/src/components/Chip.js b/packages/react/src/components/Chip.js
index 9852231f..4b01fe1e 100644
--- a/packages/react/src/components/Chip.js
+++ b/packages/react/src/components/Chip.js
@@ -1,5 +1,5 @@
import React from "react";
-import { useComponents, useIcon } from "../hooks";
+import { useComponents, useIcon } from "../hooks.js";
import PropTypes from "prop-types";
export default function Chip({ label, icon, onDelete, ...rest }) {
diff --git a/packages/react/src/components/DebugContext.js b/packages/react/src/components/DebugContext.js
index 4e6a16f3..e2e72112 100644
--- a/packages/react/src/components/DebugContext.js
+++ b/packages/react/src/components/DebugContext.js
@@ -1,5 +1,5 @@
import React from "react";
-import { useRenderContext, useRouteInfo, useComponents } from "../hooks";
+import { useRenderContext, useRouteInfo, useComponents } from "../hooks.js";
const SKIP = [
"app_config",
diff --git a/packages/react/src/components/DeleteForm.js b/packages/react/src/components/DeleteForm.js
index 5364ed66..c7d05ee0 100644
--- a/packages/react/src/components/DeleteForm.js
+++ b/packages/react/src/components/DeleteForm.js
@@ -1,5 +1,5 @@
import React from "react";
-import { useComponents, useMessages } from "../hooks";
+import { useComponents, useMessages } from "../hooks.js";
import PropTypes from "prop-types";
export default function DeleteForm({ action }) {
diff --git a/packages/react/src/components/Fab.js b/packages/react/src/components/Fab.js
index bfa0f91e..4e30e0a0 100644
--- a/packages/react/src/components/Fab.js
+++ b/packages/react/src/components/Fab.js
@@ -1,5 +1,5 @@
import React from "react";
-import { useComponents, useIcon } from "../hooks";
+import { useComponents, useIcon } from "../hooks.js";
import PropTypes from "prop-types";
export default function Fab({ icon, to, ...rest }) {
diff --git a/packages/react/src/components/FieldsetArray.js b/packages/react/src/components/FieldsetArray.js
index 796820e1..9d16a36c 100644
--- a/packages/react/src/components/FieldsetArray.js
+++ b/packages/react/src/components/FieldsetArray.js
@@ -1,5 +1,5 @@
import React from "react";
-import { useComponents } from "../hooks";
+import { useComponents } from "../hooks.js";
import PropTypes from "prop-types";
export default function FieldsetArray({ label, children, addRow }) {
diff --git a/packages/react/src/components/FileArray.js b/packages/react/src/components/FileArray.js
index ff12ad04..d7562e3d 100644
--- a/packages/react/src/components/FileArray.js
+++ b/packages/react/src/components/FileArray.js
@@ -1,3 +1,3 @@
-import FieldsetArray from "./FieldsetArray";
+import FieldsetArray from "./FieldsetArray.js";
export default FieldsetArray;
diff --git a/packages/react/src/components/FileLink.js b/packages/react/src/components/FileLink.js
index 79554a52..5b1c1fb9 100644
--- a/packages/react/src/components/FileLink.js
+++ b/packages/react/src/components/FileLink.js
@@ -1,5 +1,5 @@
import React from "react";
-import { useComponents } from "../hooks";
+import { useComponents } from "../hooks.js";
import PropTypes from "prop-types";
export default function FileLink({ value }) {
diff --git a/packages/react/src/components/Footer.js b/packages/react/src/components/Footer.js
index 5c5ae5f7..da6dbfde 100644
--- a/packages/react/src/components/Footer.js
+++ b/packages/react/src/components/Footer.js
@@ -1,5 +1,5 @@
import React from "react";
-import { useComponents } from "../hooks";
+import { useComponents } from "../hooks.js";
export default function Footer() {
const { FooterContent } = useComponents();
diff --git a/packages/react/src/components/Form.js b/packages/react/src/components/Form.js
index f972140b..8b6a8483 100644
--- a/packages/react/src/components/Form.js
+++ b/packages/react/src/components/Form.js
@@ -1,5 +1,5 @@
import React from "react";
-import { useApp, useComponents, useValidate } from "../hooks";
+import { useApp, useComponents, useValidate } from "../hooks.js";
import { Formik } from "formik";
import PropTypes from "prop-types";
diff --git a/packages/react/src/components/Header.js b/packages/react/src/components/Header.js
index 99c145ad..99b1b038 100644
--- a/packages/react/src/components/Header.js
+++ b/packages/react/src/components/Header.js
@@ -1,5 +1,5 @@
import React from "react";
-import { useSiteTitle, useComponents, useBreadcrumbs } from "../hooks";
+import { useSiteTitle, useComponents, useBreadcrumbs } from "../hooks.js";
export default function Header() {
const title = useSiteTitle(),
diff --git a/packages/react/src/components/IconButton.js b/packages/react/src/components/IconButton.js
index 1fd9e28b..1306f75b 100644
--- a/packages/react/src/components/IconButton.js
+++ b/packages/react/src/components/IconButton.js
@@ -1,5 +1,5 @@
import React from "react";
-import { useIcon } from "../hooks";
+import { useIcon } from "../hooks.js";
import PropTypes from "prop-types";
export default function IconButton({ icon, type = "button", ...rest }) {
diff --git a/packages/react/src/components/IconSubmitButton.js b/packages/react/src/components/IconSubmitButton.js
index 70bb7ba5..b73aa2d3 100644
--- a/packages/react/src/components/IconSubmitButton.js
+++ b/packages/react/src/components/IconSubmitButton.js
@@ -1,5 +1,5 @@
import React from "react";
-import { useComponents } from "../hooks";
+import { useComponents } from "../hooks.js";
import { useFormikContext } from "formik";
export default function IconSubmitButton(props) {
diff --git a/packages/react/src/components/ImagePreview.js b/packages/react/src/components/ImagePreview.js
index e669fd15..e4035df7 100644
--- a/packages/react/src/components/ImagePreview.js
+++ b/packages/react/src/components/ImagePreview.js
@@ -1,5 +1,5 @@
import React, { useState } from "react";
-import { useComponents } from "../hooks";
+import { useComponents } from "../hooks.js";
import PropTypes from "prop-types";
export default function ImagePreview({ value }) {
diff --git a/packages/react/src/components/Link.js b/packages/react/src/components/Link.js
index 3057bfc3..3df355c5 100644
--- a/packages/react/src/components/Link.js
+++ b/packages/react/src/components/Link.js
@@ -1,5 +1,7 @@
import React from "react";
-import { NavLink } from "redux-first-router-link";
+import * as ReduxFirstRouterLink from "redux-first-router-link";
+
+const { NavLink } = ReduxFirstRouterLink;
export default function Link(props) {
return ;
diff --git a/packages/react/src/components/ListItem.js b/packages/react/src/components/ListItem.js
index 1f277c5c..69501740 100644
--- a/packages/react/src/components/ListItem.js
+++ b/packages/react/src/components/ListItem.js
@@ -1,5 +1,5 @@
import React from "react";
-import { useIcon } from "../hooks";
+import { useIcon } from "../hooks.js";
import PropTypes from "prop-types";
export default function ListItem({ children, description, icon, ...rest }) {
diff --git a/packages/react/src/components/ListItemLink.js b/packages/react/src/components/ListItemLink.js
index 6462f055..fecc8c98 100644
--- a/packages/react/src/components/ListItemLink.js
+++ b/packages/react/src/components/ListItemLink.js
@@ -1,5 +1,5 @@
import React from "react";
-import { useComponents } from "../hooks";
+import { useComponents } from "../hooks.js";
import PropTypes from "prop-types";
export default function ListItemLink({ children, icon, description, ...rest }) {
diff --git a/packages/react/src/components/Message.js b/packages/react/src/components/Message.js
index 83b3f5b7..e7a38625 100644
--- a/packages/react/src/components/Message.js
+++ b/packages/react/src/components/Message.js
@@ -1,5 +1,5 @@
import React from "react";
-import { useMessages } from "../hooks";
+import { useMessages } from "../hooks.js";
import PropTypes from "prop-types";
export default function Message({ id }) {
diff --git a/packages/react/src/components/Pagination.js b/packages/react/src/components/Pagination.js
index 69623f43..bd15a8a1 100644
--- a/packages/react/src/components/Pagination.js
+++ b/packages/react/src/components/Pagination.js
@@ -1,5 +1,5 @@
import React from "react";
-import { useRenderContext, useComponents } from "../hooks";
+import { useRenderContext, useComponents } from "../hooks.js";
export default function Pagination() {
const { Link } = useComponents(),
diff --git a/packages/react/src/components/PropertyTable.js b/packages/react/src/components/PropertyTable.js
index dd9620ef..3289d034 100644
--- a/packages/react/src/components/PropertyTable.js
+++ b/packages/react/src/components/PropertyTable.js
@@ -1,5 +1,5 @@
import React from "react";
-import { useComponents } from "../hooks";
+import { useComponents } from "../hooks.js";
import PropTypes from "prop-types";
const Value = ({ values, field }) => {
diff --git a/packages/react/src/components/Spinner.js b/packages/react/src/components/Spinner.js
index 9de325ac..822d9cb0 100644
--- a/packages/react/src/components/Spinner.js
+++ b/packages/react/src/components/Spinner.js
@@ -1,5 +1,5 @@
import React from "react";
-import { useSpinner } from "../hooks";
+import { useSpinner } from "../hooks.js";
const style = {
position: "absolute",
diff --git a/packages/react/src/components/SubmitButton.js b/packages/react/src/components/SubmitButton.js
index 870e6275..58eba0e3 100644
--- a/packages/react/src/components/SubmitButton.js
+++ b/packages/react/src/components/SubmitButton.js
@@ -1,5 +1,5 @@
import React from "react";
-import { useComponents } from "../hooks";
+import { useComponents } from "../hooks.js";
import { useFormikContext } from "formik";
export default function SubmitButton(props) {
diff --git a/packages/react/src/components/index.js b/packages/react/src/components/index.js
index c1c2cb7c..dd6aa00b 100644
--- a/packages/react/src/components/index.js
+++ b/packages/react/src/components/index.js
@@ -1,69 +1,69 @@
-import Container from "./Container";
-import Header from "./Header";
-import Main from "./Main";
-import Footer from "./Footer";
-import FooterContent from "./FooterContent";
-import View from "./View";
-import ScrollView from "./ScrollView";
-import HorizontalView from "./HorizontalView";
-import Text from "./Text";
-import Image from "./Image";
-import Typography from "./Typography";
-import FormatJson from "./FormatJson";
+import Container from "./Container.js";
+import Header from "./Header.js";
+import Main from "./Main.js";
+import Footer from "./Footer.js";
+import FooterContent from "./FooterContent.js";
+import View from "./View.js";
+import ScrollView from "./ScrollView.js";
+import HorizontalView from "./HorizontalView.js";
+import Text from "./Text.js";
+import Image from "./Image.js";
+import Typography from "./Typography.js";
+import FormatJson from "./FormatJson.js";
-import Message from "./Message";
+import Message from "./Message.js";
-import Link from "./Link";
-import Button from "./Button";
-import ButtonLink from "./ButtonLink";
-import IconButton from "./IconButton";
-import Fab from "./Fab";
-import Chip from "./Chip";
-import Switch from "./Switch";
-import CheckboxButton from "./CheckboxButton";
-import RadioButton from "./RadioButton";
+import Link from "./Link.js";
+import Button from "./Button.js";
+import ButtonLink from "./ButtonLink.js";
+import IconButton from "./IconButton.js";
+import Fab from "./Fab.js";
+import Chip from "./Chip.js";
+import Switch from "./Switch.js";
+import CheckboxButton from "./CheckboxButton.js";
+import RadioButton from "./RadioButton.js";
-import List from "./List";
-import ListItem from "./ListItem";
-import ListItemLink from "./ListItemLink";
-import ListSubheader from "./ListSubheader";
-import ExpansionPanel from "./ExpansionPanel";
-import Divider from "./Divider";
+import List from "./List.js";
+import ListItem from "./ListItem.js";
+import ListItemLink from "./ListItemLink.js";
+import ListSubheader from "./ListSubheader.js";
+import ExpansionPanel from "./ExpansionPanel.js";
+import Divider from "./Divider.js";
-import Table from "./Table";
-import TableHead from "./TableHead";
-import TableBody from "./TableBody";
-import TableRow from "./TableRow";
-import TableTitle from "./TableTitle";
-import TableCell from "./TableCell";
-import TableContainer from "./TableContainer";
-import TablePagination from "./TablePagination";
+import Table from "./Table.js";
+import TableHead from "./TableHead.js";
+import TableBody from "./TableBody.js";
+import TableRow from "./TableRow.js";
+import TableTitle from "./TableTitle.js";
+import TableCell from "./TableCell.js";
+import TableContainer from "./TableContainer.js";
+import TablePagination from "./TablePagination.js";
-import AutoForm from "./AutoForm";
-import AutoInput from "./AutoInput";
-import AutoSubform from "./AutoSubform";
-import AutoSubformArray from "./AutoSubformArray";
-import PropertyTable from "./PropertyTable";
-import ImagePreview from "./ImagePreview";
-import FileLink from "./FileLink";
-import Form from "./Form";
-import FormRoot from "./FormRoot";
-import FormError from "./FormError";
-import Fieldset from "./Fieldset";
-import FlatFieldset from "./FlatFieldset";
-import FieldsetArray from "./FieldsetArray";
-import FileArray from "./FileArray";
-import CancelButton from "./CancelButton";
-import SubmitButton from "./SubmitButton";
-import IconSubmitButton from "./IconSubmitButton";
-import DeleteForm from "./DeleteForm";
+import AutoForm from "./AutoForm.js";
+import AutoInput from "./AutoInput.js";
+import AutoSubform from "./AutoSubform.js";
+import AutoSubformArray from "./AutoSubformArray.js";
+import PropertyTable from "./PropertyTable.js";
+import ImagePreview from "./ImagePreview.js";
+import FileLink from "./FileLink.js";
+import Form from "./Form.js";
+import FormRoot from "./FormRoot.js";
+import FormError from "./FormError.js";
+import Fieldset from "./Fieldset.js";
+import FlatFieldset from "./FlatFieldset.js";
+import FieldsetArray from "./FieldsetArray.js";
+import FileArray from "./FileArray.js";
+import CancelButton from "./CancelButton.js";
+import SubmitButton from "./SubmitButton.js";
+import IconSubmitButton from "./IconSubmitButton.js";
+import DeleteForm from "./DeleteForm.js";
-import Spinner from "./Spinner";
-import Popup from "./Popup";
-import SidePanel from "./SidePanel";
-import Breadcrumbs from "./Breadcrumbs";
-import Pagination from "./Pagination";
-import DebugContext from "./DebugContext";
+import Spinner from "./Spinner.js";
+import Popup from "./Popup.js";
+import SidePanel from "./SidePanel.js";
+import Breadcrumbs from "./Breadcrumbs.js";
+import Pagination from "./Pagination.js";
+import DebugContext from "./DebugContext.js";
export {
Container,
diff --git a/packages/react/src/hooks.js b/packages/react/src/hooks.js
index db95839e..6596b065 100644
--- a/packages/react/src/hooks.js
+++ b/packages/react/src/hooks.js
@@ -1,13 +1,12 @@
import React, { useMemo, useCallback, useContext } from "react";
import { useSelector, useDispatch } from "react-redux";
-import { createSelector } from "redux-orm/src/index.js";
-import {
- pathToAction,
- getOptions,
- selectLocationState,
-} from "redux-first-router";
+import * as ReduxORM from "redux-orm";
+import * as ReduxFirstRouter from "redux-first-router";
import { paramCase } from "param-case";
-import { useHtmlInput } from "./inputs/Input";
+import { useHtmlInput } from "./inputs/Input.js";
+
+const { createSelector } = ReduxORM;
+const { pathToAction, getOptions, selectLocationState } = ReduxFirstRouter;
const isAction = (path) => path && path.type;
diff --git a/packages/react/src/index.expo.js b/packages/react/src/index.expo.js
new file mode 100644
index 00000000..df898437
--- /dev/null
+++ b/packages/react/src/index.expo.js
@@ -0,0 +1,5 @@
+import "expo/build/Expo.fx";
+import react from "./index.native.js";
+
+export default react;
+export * from "./index.native.js";
diff --git a/packages/react/src/index.js b/packages/react/src/index.js
index ca8dd96e..ff73df96 100644
--- a/packages/react/src/index.js
+++ b/packages/react/src/index.js
@@ -1,158 +1,9 @@
-import React from "react";
-import orm from "@wq/model";
-import { Provider as StoreProvider } from "react-redux";
-import { AppContext } from "./hooks";
+import react from "./react.js";
+import App from "./App.js";
+import { init, start, unmount } from "./init.js";
-import App from "./App";
+react.setEngine({ init, start, unmount, App });
-import messages from "./messages";
-import * as components from "./components/index";
-import * as inputs from "./inputs/index";
-import * as icons from "./icons";
-import * as views from "./views/index";
-import { init, start, unmount } from "./init";
-import validate from "./validate";
-
-export default {
- name: "react",
- type: "renderer",
- dependencies: [orm],
-
- config: {
- messages: { ...messages },
- },
-
- registry: {
- components: {
- App,
- ...components,
- },
- inputs: { ...inputs },
- icons: { ...icons },
- views: { ...views },
- },
-
- init(config) {
- if (config) {
- Object.assign(this.config, config);
- }
- Object.values(this.app.plugins).forEach((plugin) => {
- if (plugin.messages) {
- Object.assign(this.config.messages, plugin.messages);
- }
- if (plugin.components) {
- Object.assign(this.registry.components, plugin.components);
- }
- if (plugin.inputs) {
- Object.assign(this.registry.inputs, plugin.inputs);
- }
- if (plugin.icons) {
- Object.assign(this.registry.icons, plugin.icons);
- }
- if (plugin.views) {
- Object.assign(this.registry.views, plugin.views);
- }
- });
- init.call(this);
- },
-
- getRootComponent() {
- const { app, registry } = this,
- { components } = registry,
- { App } = components;
- const AppRoot = () => (
-
-
-
-
-
- );
- AppRoot.displayName = "AppRoot";
- return AppRoot;
- },
-
- start,
- validate,
-
- createInstance(component, root, app) {
- if (!app) {
- app = this.app;
- }
- const tempPlugin = {
- app: {
- ...app,
- plugins: { ...app.plugins },
- },
- config: { messages: {} },
- registry: {
- components: {},
- inputs: {},
- icons: {},
- views: {},
- },
- root,
- getRootComponent: this.getRootComponent,
- };
-
- this.init.call(tempPlugin);
-
- tempPlugin.app.plugins.react = tempPlugin;
- tempPlugin.registry.components.App = component;
-
- return {
- start: () => this.start.call(tempPlugin),
- getRootComponent: () => tempPlugin.getRootComponent(),
- stop: () => unmount.call(tempPlugin),
- };
- },
-
- attach(component, root, app) {
- const instance = this.createInstance(component, root, app);
- instance.start();
- return () => instance.stop();
- },
-
- wrap(component, app) {
- const emptyRoot = {},
- instance = this.createInstance(component, emptyRoot, app);
- return instance.getRootComponent();
- },
-};
-
-export * from "./hooks";
-export * from "./views/index";
-
-const {
- Link,
- Message,
- Form,
- FormError,
- AutoForm,
- AutoInput,
- AutoSubform,
- AutoSubformArray,
- PropertyTable,
- ImagePreview,
- FileLink,
- DebugContext,
-} = components;
-
-export {
- App,
- Message,
- Link,
- Form,
- FormError,
- AutoForm,
- AutoInput,
- AutoSubform,
- AutoSubformArray,
- PropertyTable,
- ImagePreview,
- FileLink,
- DebugContext,
-};
-
-const { ForeignKey } = inputs;
-
-export { ForeignKey };
+export default react;
+export * from "./react.js";
+export { App };
diff --git a/packages/react/src/index.native.js b/packages/react/src/index.native.js
new file mode 100644
index 00000000..0ad61f77
--- /dev/null
+++ b/packages/react/src/index.native.js
@@ -0,0 +1,9 @@
+import react from "./react.js";
+import App from "./App.native.js";
+import { init, start, unmount } from "./init.native.js";
+
+react.setEngine({ init, start, unmount, App });
+
+export default react;
+export * from "./react.js";
+export { App };
diff --git a/packages/react/src/init.expo.js b/packages/react/src/init.expo.js
deleted file mode 100644
index cf4ac863..00000000
--- a/packages/react/src/init.expo.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import "expo/build/Expo.fx";
-import { init, start, unmount } from "./init.native.js";
-
-export { init, start, unmount };
diff --git a/packages/react/src/init.js b/packages/react/src/init.js
index 1b9ea0bb..ddff8b23 100644
--- a/packages/react/src/init.js
+++ b/packages/react/src/init.js
@@ -1,5 +1,5 @@
import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
export function init() {
if (!this.root) {
@@ -10,9 +10,12 @@ export function init() {
export function start() {
const RootComponent = this.getRootComponent();
- ReactDOM.render(, this.root);
+ this._reactRoot = createRoot(this.root);
+ this._reactRoot.render();
}
export function unmount() {
- ReactDOM.unmountComponentAtNode(this.root);
+ if (this._reactRoot) {
+ this._reactRoot.unmount();
+ }
}
diff --git a/packages/react/src/init.native.js b/packages/react/src/init.native.js
index b766eb4c..87f35125 100644
--- a/packages/react/src/init.native.js
+++ b/packages/react/src/init.native.js
@@ -1,6 +1,6 @@
import React, { useState } from "react";
import { AppRegistry } from "react-native";
-import { navRef, nav } from "./hooks";
+import { navRef, nav } from "./hooks.native.js";
export function init() {
const { router, store } = this.app;
diff --git a/packages/react/src/inputs/Checkbox.js b/packages/react/src/inputs/Checkbox.js
index 523987d6..b7d79a1f 100644
--- a/packages/react/src/inputs/Checkbox.js
+++ b/packages/react/src/inputs/Checkbox.js
@@ -1,3 +1,3 @@
-import Input from "./Input";
+import Input from "./Input.js";
export default Input;
diff --git a/packages/react/src/inputs/DateTime.js b/packages/react/src/inputs/DateTime.js
index 523987d6..b7d79a1f 100644
--- a/packages/react/src/inputs/DateTime.js
+++ b/packages/react/src/inputs/DateTime.js
@@ -1,3 +1,3 @@
-import Input from "./Input";
+import Input from "./Input.js";
export default Input;
diff --git a/packages/react/src/inputs/ForeignKey.js b/packages/react/src/inputs/ForeignKey.js
index 4757b58b..492abf2a 100644
--- a/packages/react/src/inputs/ForeignKey.js
+++ b/packages/react/src/inputs/ForeignKey.js
@@ -1,5 +1,5 @@
import React from "react";
-import { useModel, useUnsynced, useInputComponents } from "../hooks";
+import { useModel, useUnsynced, useInputComponents } from "../hooks.js";
import { useFormikContext, getIn } from "formik";
function useChoices(modelName, group_by) {
diff --git a/packages/react/src/inputs/Image.js b/packages/react/src/inputs/Image.js
index b74b72bd..ec717e97 100644
--- a/packages/react/src/inputs/Image.js
+++ b/packages/react/src/inputs/Image.js
@@ -1,5 +1,5 @@
import React from "react";
-import File from "./File";
+import File from "./File.js";
export default function Image(props) {
return ;
diff --git a/packages/react/src/inputs/Toggle.js b/packages/react/src/inputs/Toggle.js
index 091b2c4f..699bd43f 100644
--- a/packages/react/src/inputs/Toggle.js
+++ b/packages/react/src/inputs/Toggle.js
@@ -1,5 +1,5 @@
import React from "react";
-import Radio from "./Radio";
+import Radio from "./Radio.js";
export default function Toggle(props) {
return ;
diff --git a/packages/react/src/inputs/index.js b/packages/react/src/inputs/index.js
index fd9eab24..9feef45c 100644
--- a/packages/react/src/inputs/index.js
+++ b/packages/react/src/inputs/index.js
@@ -1,14 +1,14 @@
-import Input from "./Input";
-import Checkbox from "./Checkbox";
-import DateTime from "./DateTime";
-import File from "./File";
-import Image from "./Image";
-import Select from "./Select";
-import ForeignKey from "./ForeignKey";
-import Radio from "./Radio";
-import Toggle from "./Toggle";
-import Hidden from "./Hidden";
-import HelperText from "./HelperText";
+import Input from "./Input.js";
+import Checkbox from "./Checkbox.js";
+import DateTime from "./DateTime.js";
+import File from "./File.js";
+import Image from "./Image.js";
+import Select from "./Select.js";
+import ForeignKey from "./ForeignKey.js";
+import Radio from "./Radio.js";
+import Toggle from "./Toggle.js";
+import Hidden from "./Hidden.js";
+import HelperText from "./HelperText.js";
const Date = DateTime;
const Time = DateTime;
diff --git a/packages/react/src/react.js b/packages/react/src/react.js
new file mode 100644
index 00000000..1ddbeb3b
--- /dev/null
+++ b/packages/react/src/react.js
@@ -0,0 +1,162 @@
+import React from "react";
+import orm from "@wq/model";
+import { Provider as StoreProvider } from "react-redux";
+import { AppContext } from "./hooks.js";
+
+import messages from "./messages.js";
+import * as components from "./components/index.js";
+import * as inputs from "./inputs/index.js";
+import * as icons from "./icons.js";
+import * as views from "./views/index.js";
+import validate from "./validate.js";
+
+export default {
+ name: "react",
+ type: "renderer",
+ dependencies: [orm],
+
+ config: {
+ messages: { ...messages },
+ },
+
+ registry: {
+ components: { ...components },
+ inputs: { ...inputs },
+ icons: { ...icons },
+ views: { ...views },
+ },
+
+ setEngine({ init, start, unmount, App }) {
+ this.engine = { init, start, unmount };
+ this.registry.components.App = App;
+ },
+
+ init(config) {
+ if (!this.engine) {
+ throw new Error("Missing react engine!");
+ }
+ if (config) {
+ Object.assign(this.config, config);
+ }
+ Object.values(this.app.plugins).forEach((plugin) => {
+ if (plugin.messages) {
+ Object.assign(this.config.messages, plugin.messages);
+ }
+ if (plugin.components) {
+ Object.assign(this.registry.components, plugin.components);
+ }
+ if (plugin.inputs) {
+ Object.assign(this.registry.inputs, plugin.inputs);
+ }
+ if (plugin.icons) {
+ Object.assign(this.registry.icons, plugin.icons);
+ }
+ if (plugin.views) {
+ Object.assign(this.registry.views, plugin.views);
+ }
+ });
+ this.engine.init.call(this);
+ },
+
+ getRootComponent() {
+ const { app, registry } = this,
+ { components } = registry,
+ { App } = components;
+ const AppRoot = () => (
+
+
+
+
+
+ );
+ AppRoot.displayName = "AppRoot";
+ return AppRoot;
+ },
+
+ start() {
+ this.engine.start.call(this);
+ },
+ validate,
+
+ createInstance(component, root, app) {
+ if (!app) {
+ app = this.app;
+ }
+ const tempPlugin = {
+ app: {
+ ...app,
+ plugins: { ...app.plugins },
+ },
+ config: { messages: {} },
+ engine: this.engine,
+ registry: {
+ components: {},
+ inputs: {},
+ icons: {},
+ views: {},
+ },
+ root,
+ getRootComponent: this.getRootComponent,
+ };
+
+ this.init.call(tempPlugin);
+
+ tempPlugin.app.plugins.react = tempPlugin;
+ tempPlugin.registry.components.App = component;
+
+ return {
+ start: () => this.start.call(tempPlugin),
+ getRootComponent: () => tempPlugin.getRootComponent(),
+ stop: () => this.engine.unmount.call(tempPlugin),
+ };
+ },
+
+ attach(component, root, app) {
+ const instance = this.createInstance(component, root, app);
+ instance.start();
+ return () => instance.stop();
+ },
+
+ wrap(component, app) {
+ const emptyRoot = {},
+ instance = this.createInstance(component, emptyRoot, app);
+ return instance.getRootComponent();
+ },
+};
+
+export * from "./hooks.js";
+export * from "./views/index.js";
+
+const {
+ Link,
+ Message,
+ Form,
+ FormError,
+ AutoForm,
+ AutoInput,
+ AutoSubform,
+ AutoSubformArray,
+ PropertyTable,
+ ImagePreview,
+ FileLink,
+ DebugContext,
+} = components;
+
+export {
+ Message,
+ Link,
+ Form,
+ FormError,
+ AutoForm,
+ AutoInput,
+ AutoSubform,
+ AutoSubformArray,
+ PropertyTable,
+ ImagePreview,
+ FileLink,
+ DebugContext,
+};
+
+const { ForeignKey } = inputs;
+
+export { ForeignKey };
diff --git a/packages/react/src/views/Default.js b/packages/react/src/views/Default.js
index 2399b0a8..2ea78945 100644
--- a/packages/react/src/views/Default.js
+++ b/packages/react/src/views/Default.js
@@ -1,5 +1,5 @@
import React from "react";
-import { useRouteInfo, useComponents } from "../hooks";
+import { useRouteInfo, useComponents } from "../hooks.js";
import { pascalCase } from "pascal-case";
export default function Default() {
diff --git a/packages/react/src/views/DefaultDetail.js b/packages/react/src/views/DefaultDetail.js
index bf2827eb..8334b8d5 100644
--- a/packages/react/src/views/DefaultDetail.js
+++ b/packages/react/src/views/DefaultDetail.js
@@ -4,7 +4,7 @@ import {
useRouteInfo,
useComponents,
useReverse,
-} from "../hooks";
+} from "../hooks.js";
export default function DefaultDetail() {
const reverse = useReverse(),
diff --git a/packages/react/src/views/DefaultEdit.js b/packages/react/src/views/DefaultEdit.js
index 762c75a7..36bfecc0 100644
--- a/packages/react/src/views/DefaultEdit.js
+++ b/packages/react/src/views/DefaultEdit.js
@@ -4,7 +4,7 @@ import {
useRouteInfo,
useComponents,
useReverse,
-} from "../hooks";
+} from "../hooks.js";
export default function DefaultEdit() {
const reverse = useReverse(),
diff --git a/packages/react/src/views/DefaultList.js b/packages/react/src/views/DefaultList.js
index 53fd2ed5..a97d598b 100644
--- a/packages/react/src/views/DefaultList.js
+++ b/packages/react/src/views/DefaultList.js
@@ -4,7 +4,7 @@ import {
useViewComponents,
useReverse,
useList,
-} from "../hooks";
+} from "../hooks.js";
export default function DefaultList() {
const reverse = useReverse(),
diff --git a/packages/react/src/views/IndexView.js b/packages/react/src/views/IndexView.js
index 5b23c03e..95a7a2f6 100644
--- a/packages/react/src/views/IndexView.js
+++ b/packages/react/src/views/IndexView.js
@@ -1,5 +1,10 @@
import React from "react";
-import { useSitemap, useReverse, useRouteTitle, useComponents } from "../hooks";
+import {
+ useSitemap,
+ useReverse,
+ useRouteTitle,
+ useComponents,
+} from "../hooks.js";
import PropTypes from "prop-types";
export default function Index() {
diff --git a/packages/react/src/views/Loading.js b/packages/react/src/views/Loading.js
index 1297fc11..8c769b35 100644
--- a/packages/react/src/views/Loading.js
+++ b/packages/react/src/views/Loading.js
@@ -1,5 +1,5 @@
import React from "react";
-import { useComponents } from "../hooks";
+import { useComponents } from "../hooks.js";
export default function Loading() {
const { Message, Text } = useComponents();
diff --git a/packages/react/src/views/Login.js b/packages/react/src/views/Login.js
index d0a52bb6..b02fd239 100644
--- a/packages/react/src/views/Login.js
+++ b/packages/react/src/views/Login.js
@@ -4,7 +4,7 @@ import {
useInputComponents,
useReverse,
useRenderContext,
-} from "../hooks";
+} from "../hooks.js";
export default function Login() {
const reverse = useReverse(),
diff --git a/packages/react/src/views/Logout.js b/packages/react/src/views/Logout.js
index e2bbb79c..d79179d9 100644
--- a/packages/react/src/views/Logout.js
+++ b/packages/react/src/views/Logout.js
@@ -1,5 +1,5 @@
import React from "react";
-import { useRenderContext, useComponents } from "../hooks";
+import { useRenderContext, useComponents } from "../hooks.js";
export default function Logout() {
const { is_authenticated } = useRenderContext(),
diff --git a/packages/react/src/views/NotFound.js b/packages/react/src/views/NotFound.js
index 70404cbf..79625b79 100644
--- a/packages/react/src/views/NotFound.js
+++ b/packages/react/src/views/NotFound.js
@@ -1,5 +1,5 @@
import React from "react";
-import { useRenderContext } from "../hooks";
+import { useRenderContext } from "../hooks.js";
export default function NotFound() {
const { url } = useRenderContext();
diff --git a/packages/react/src/views/OutboxList.js b/packages/react/src/views/OutboxList.js
index e988088c..5374d51d 100644
--- a/packages/react/src/views/OutboxList.js
+++ b/packages/react/src/views/OutboxList.js
@@ -5,7 +5,7 @@ import {
useRouteTitle,
useComponents,
useOutbox,
-} from "../hooks";
+} from "../hooks.js";
import PropTypes from "prop-types";
export default function OutboxList({ modelConf }) {
diff --git a/packages/react/src/views/Server.js b/packages/react/src/views/Server.js
index 6861cc64..1df672e8 100644
--- a/packages/react/src/views/Server.js
+++ b/packages/react/src/views/Server.js
@@ -1,5 +1,5 @@
import React from "react";
-import { useRenderContext } from "../hooks";
+import { useRenderContext } from "../hooks.js";
const HTML = "@@HTML";
diff --git a/packages/react/src/views/index.js b/packages/react/src/views/index.js
index 91f7bda9..a6f8ee65 100644
--- a/packages/react/src/views/index.js
+++ b/packages/react/src/views/index.js
@@ -1,14 +1,14 @@
-import Default from "./Default";
-import DefaultList from "./DefaultList";
-import DefaultDetail from "./DefaultDetail";
-import DefaultEdit from "./DefaultEdit";
-import Index from "./IndexView";
-import Login from "./Login";
-import Logout from "./Logout";
-import OutboxList from "./OutboxList";
-import Loading from "./Loading";
-import NotFound from "./NotFound";
-import Server from "./Server";
+import Default from "./Default.js";
+import DefaultList from "./DefaultList.js";
+import DefaultDetail from "./DefaultDetail.js";
+import DefaultEdit from "./DefaultEdit.js";
+import Index from "./IndexView.js";
+import Login from "./Login.js";
+import Logout from "./Logout.js";
+import OutboxList from "./OutboxList.js";
+import Loading from "./Loading.js";
+import NotFound from "./NotFound.js";
+import Server from "./Server.js";
export {
Default,
diff --git a/packages/router/src/__tests__/router.js b/packages/router/src/__tests__/router.js
index 1d6bb5bf..a27c927b 100644
--- a/packages/router/src/__tests__/router.js
+++ b/packages/router/src/__tests__/router.js
@@ -1,4 +1,4 @@
-import router from "../router";
+import router from "../router.js";
var handleRender;
diff --git a/packages/router/src/router.js b/packages/router/src/router.js
index 47c25a53..51270f3c 100644
--- a/packages/router/src/router.js
+++ b/packages/router/src/router.js
@@ -1,8 +1,10 @@
-import { connectRoutes, push, NOT_FOUND, ADD_ROUTES } from "redux-first-router";
+import * as ReduxFirstRouter from "redux-first-router";
import queryString from "query-string";
import { capitalCase } from "capital-case";
import { getStore } from "@wq/store";
+const { connectRoutes, push, NOT_FOUND, ADD_ROUTES } = ReduxFirstRouter;
+
const HTML = "@@HTML",
RENDER = "RENDER",
FIRST = "@@FIRST",
diff --git a/packages/store/index.js b/packages/store/index.js
deleted file mode 100644
index 48f290cf..00000000
--- a/packages/store/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import ds, { Store, getStore } from "./src/store.js";
-export default ds;
-export { Store, getStore };
diff --git a/packages/store/package.json b/packages/store/package.json
index 6068ad56..d5c58ccd 100644
--- a/packages/store/package.json
+++ b/packages/store/package.json
@@ -3,7 +3,8 @@
"version": "1.3.0",
"description": "Locally-persistent, optionally server-populated JSON datastore(s)",
"type": "module",
- "main": "index.js",
+ "main": "src/index.js",
+ "react-native": "src/index.native.js",
"scripts": {
"test": "cd ../../ && npm run jest packages/store",
"prettier": "cd ../../ && npm run prettier -- --write packages/store/",
diff --git a/packages/store/src/__tests__/store.js b/packages/store/src/__tests__/store.js
index cf9a6bc9..e56d4b74 100644
--- a/packages/store/src/__tests__/store.js
+++ b/packages/store/src/__tests__/store.js
@@ -1,4 +1,4 @@
-import ds from "../store";
+import ds from "../index.js";
beforeAll(async () => {
ds.init({
diff --git a/packages/store/src/index.js b/packages/store/src/index.js
new file mode 100644
index 00000000..ab60dbae
--- /dev/null
+++ b/packages/store/src/index.js
@@ -0,0 +1,7 @@
+import ds, { Store, getStore } from "./store.js";
+import * as storage from "./storage.js";
+
+ds.setEngine(storage);
+
+export default ds;
+export { Store, getStore };
diff --git a/packages/store/src/index.native.js b/packages/store/src/index.native.js
new file mode 100644
index 00000000..72d19a93
--- /dev/null
+++ b/packages/store/src/index.native.js
@@ -0,0 +1,7 @@
+import ds, { Store, getStore } from "./store.js";
+import * as storage from "./storage.native.js";
+
+ds.setStorage(storage);
+
+export default ds;
+export { Store, getStore };
diff --git a/packages/store/src/store.js b/packages/store/src/store.js
index 88a0b596..bdd8e8e7 100644
--- a/packages/store/src/store.js
+++ b/packages/store/src/store.js
@@ -7,8 +7,7 @@ import {
} from "redux";
import logger from "redux-logger";
import { persistStore, persistReducer, createTransform } from "redux-persist";
-import autoMergeLevel2 from "redux-persist/lib/stateReconciler/autoMergeLevel2";
-import { createStorage, serialize, deserialize } from "./storage";
+import autoMergeLevel2 from "redux-persist/lib/stateReconciler/autoMergeLevel2.js";
const REMOVE = "@@KVP_REMOVE";
const SET = "@@KVP_SET";
@@ -63,6 +62,10 @@ class Store {
);
}
+ setEngine({ createStorage, serialize, deserialize }) {
+ this.engine = { createStorage, serialize, deserialize };
+ }
+
init(opts = {}) {
var self = this;
var optlist = [
@@ -101,12 +104,15 @@ class Store {
applyMiddleware(...this._middleware)
);
+ const { createStorage, serialize, deserialize } =
+ this.engine || ds.engine;
+
this.lf = createStorage(this.name);
const persistConfig = {
key: "root",
storage: this.lf,
- stateReconciler: autoMergeLevel2,
+ stateReconciler: autoMergeLevel2.default || autoMergeLevel2,
serialize,
deserialize,
transforms: this._transforms,
diff --git a/rollup.config.js b/rollup.config.js
index bc36f484..e292dbe2 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -27,7 +27,7 @@ const banner = `/*!
const deps = {
"@wq/app": "./packages/app/src/app.js",
- "@wq/store": "./packages/store/src/store.js",
+ "@wq/store": "./packages/store/src/index.js",
"@wq/router": "./packages/router/src/router.js",
"@wq/model": "./packages/model/src/index.js",
"@wq/outbox": "./packages/outbox/src/outbox.js",