Merge pull request #6 from AegisJSProject/patch/module-resolvers

Update/fix module resolving

CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [v1.0.3] - 2024-10-24
+
+### Added
+- Add direct support for preloading in `registerPath()`
+
+### Changed
+- Update handling of importing/preloading modules
+- Make `preloadModule()` async, resolving or rejecting based on `load` and `error` events
+
+### Fixed
+- Fix consistency or args passed to constructors/functions
+
 ## [v1.0.2] - 2024-10-23
 
 ### Added

README.md

@@ -45,8 +45,8 @@ or use an [importmap](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/
 <script type="importmap">
 {
   "imports": {
-    "@aegisjsproject/router": "https://unpkg.com/@aegisjsproject/router[@version]/router.js",
-    "@aegisjsproject/state": "https://unpkg.com/@aegisjsproject/state[@version]/state.js"
+    "@aegisjsproject/router": "https://unpkg.com/@aegisjsproject/router[@version]/router.mjs",
+    "@aegisjsproject/state": "https://unpkg.com/@aegisjsproject/state[@version]/state.mjs"
   }
 }
 </script>
@@ -65,7 +65,7 @@ or use an [importmap](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/
 
 ## Fundamentals
 
-At its core, this package matches matches URLs matching a `URLPattern` to modules to be dynamically
+At its core, this package matches URLs matching a `URLPattern` to modules to be dynamically
 imported. This yields a powerful but minimal package size, dynamic loading of "View"s as-needed,
 high reusability of code, and potentially nearly instant navigations, especially when used in
 conjunction with service workers and caches. Just create a script that has a `default` export
@@ -86,7 +86,7 @@ init({
   preload: true, // Preload all registered modules
   notFound: './views/404.js', // Set custom 404 module
   rootNode: '#root', // Declares element for base of content updates
-  intceptRoot: document.body, // Use `MutationObserver` to observer `<a>` elements and intercept naviations
+  interceptRoot: document.body, // Use `MutationObserver` to observer `<a>` elements and intercept navigations
   signal: controller.signal, // An `AbortSignal`, should you want to disable routing funcitonality
 });
 
@@ -97,7 +97,7 @@ document.querySelectorAll('[data-link]').forEach(el => {
   });
 });
 
-document.querySelectorAll('[data-nav').forEach(el => {
+document.querySelectorAll('[data-nav]').forEach(el => {
   el.addEventListener('click', ({ currentTarget }) => {
     switch (currentTarget.dataset.nav) {
       case 'back':
@@ -136,21 +136,30 @@ This observer watches for `<a>`s in the children of what it is set to observe an
 to avoid the default navigation, then calls `navigate(a.href)`.
 
 > [!NOTE]
-> While the `MutationObserver` automatically adds the necessary click handlers on all `<a>` elements under its
-> root, it cannot reach into Shadow DOM. For any web component with shadow, you should call `observeLinksOn(shadow)`
+> While the `MutationObserver` automatically adds the necessary click handlers on all `<a>` and `<form>` elements under its
+> root, it cannot reach into Shadow DOM. For any web component with shadow, you should call `interceptNav(shadow)`
 > in either the constructor or `connectedCallback`.
 
+
+
 ## 404 Pages
 You can register a module for 404 pages using either `set404()` or by passing it via `{ notFound }` in `init()`.
 This component or function will be given the current state and URL and can be dynamically generated.
 
 ## Preloading
 You can preload modules for views by using `preloadModule()` or by passing `{ preload: true }` in `init()`.
 Preloading modules will make navigation effectively instant and potentially without network traffic, however
-it will increase initial load times (though you can set low priority to let the browser decide when to preload).
+it will increase initial load times (though it defaults to a low priority).
+
+> [!IMPORTANT]
+> Be advised that there may be a functional difference between using the router in the context of a `<script type="module">`
+> vs as a non-module, namely in the availability of [`import.meta.resolve()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import.meta/resolve)
+> for preloading. Also, that importmaps are not quite univerally supported yet. For best compatibility,
+> you **SHOULD** use either absolute or relative URLs when declaring modules for routes, though use of
+> module specifiers (e.g. `@scope/package`) is supported in certain contexts, with decent browser support.
 
-## State Managment
+## State Management
 This currently uses [`@aegisjsproject/state`](https://npmjs.com/package/@aegisjsproject/state) for state
 mangement. It is a lightweight wrapper around `history.state` that uses `BroadcastChannel` to sync state
-changes between tabs/windows. It should be noted that this is `global` state and not specific to some component,
+changes between tabs/windows. It should be noted that this is *global* state and not specific to some component,
 so please avoid generic names and be aware of the global nature.

eslint.config.js

@@ -1,3 +1,3 @@
-import { node } from '@shgysk8zer0/eslint-config';
+import { browser } from '@shgysk8zer0/eslint-config';
 
-export default node({ files: ['**/*/js'], ignores: ['**/*.min.js', '**/*.cjs', '**/*.mjs'] });
+export default browser({ files: ['*.js', '**/*/js'], ignores: ['**/*.min.js', '**/*.cjs', '**/*.mjs'] });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aegisjsproject/router",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A simple but powerful router module",
   "keywords": [],
   "type": "module",