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",