adobe / aem-spa-page-model-manager

Interface between Adobe Experience Manager and Single Page Application framework.

Page Model Manager

An interpreter between Adobe Experience Manager Editor and the Adobe Experience Manager Single Page Application (SPA) Editor. The SPA Editor is recommended solution for projects that use SPA framework (React or Angular). For more information please see the documentation.

Installation

npm install @adobe/aem-spa-page-model-manager

Documentation

• SPA Editor Overview
• SPA Architecture
• Getting Started with the AEM SPA Editor and Angular
• Getting Started with the AEM SPA Editor and React

Contributing

Contributions are welcome! Read the Contributing Guide for more information.

Licensing

This project is licensed under the Apache V2 License. See LICENSE for more information.

aem-spa-page-model-manager's Issues

[bug] using history.push() to navigate to a page result in empty page

Describe the bug

We have a site with has too many pages reaching certain depth, so we have set our structureDepth to 1.
This works fine for the most part and when clicking on links that takes to a page that is on a deeper level, it will get the new model.json file and render the page.
But this does not seem to work as expected when using history.push('/path/to/a/page'). When we do that, the url is properly updated but no json is ever requested.

We follow a similar approach to the guide:

 ModelManager.initialize().then((pageModel) => {
    const history = createBrowserHistory();
    
    ...
    ...
   <Router history={history}>
        <App
          history={history}
    ...
    ...

Then a component will just do

import { useHistory, useLocation } from 'react-router-dom';
....
...
  const history = useHistory();
....
...
 history.push(`${url}/${id}.html`);

This works fine for pages within the first level of the page (which are in the initial model.json) but fails in deeper pages.

Package version
using version 1.4.0

Inconsistent Attachment of AEM Data to Multiple Microfrontends Loaded via SingleSpa

Describe the bug

I'm loading multiple microfrontends using SingleSpa. Each microfrontend initializes its own instance of ModelManager using the following code:

ModelManager.initializeAsync({
    path: 'path',
    modelClient: new ModelClient('url'),
})

The issue is that when the page is loaded, the AEM data is correctly attached to one microfrontend but not to the others. This behavior seems to occur randomly and is associated with the last microfrontend that was loaded.

Package version
1.5.0

To Reproduce
Page initial load

Expected behavior
To see the AEM data correctly attached to each microfrontend

Screenshots
N/A

Additional context
I'm assuming the model is being overwritten by the most recent ModelManager.initializeAsync call

Custom 404 page

[bug] Build does not produce typescript definitions

Describe the bug
We use typescript for this project, but the type definitions are not built and not present/pushed to npm registry.

Package version
1.4.1

Unable to use HTML5 history push when using Model Manager without using React Router for navigation/routing

Background
In our application we already have custom routing implementation for soft loading content from AEM. Now we are integrating SPA editor. We also use Redux in our application. Our past experiences state that Redux and React Router are not the best combination for usecases. And our implementation is used across many websites within our organization. So usage of React Router may not be viable in near future.

Issue Description
With in our custom routing implementation we already use HTML5 API for updating URLs. Now, if we don't use React Router and invoke ModelManager to initialize the root model or just the current page, using a custom model client that extends ModelClient class as we have different endpoints with additional parameters, for the first time AEM editor loads perfectly fine. Now we have a button where the action upon click is to invoke HTML5 API to navigate to a different page. We have written a custom binding that shall insert new page path into model store followed by getData to retrieve model for new page. Now in this process some how the custom model client becomes null the following error appears and doesn't load the new page content even though custom model client already retrieved the data.

VM590401 aem-spa-page-model-manager.js:1 Uncaught (in promise) Error: ModelClient is undefined. Call initialize first! at Object.get modelClient [as modelClient] (VM590401 aem-spa-page-model-manager.js:1) at Object._checkDependencies (VM590401 aem-spa-page-model-manager.js:1) at eval (VM590401 aem-spa-page-model-manager.js:1)

Package version
"@adobe/aem-react-editable-components": "^1.0.0",
"@adobe/aem-spa-component-mapping": "^1.0.0",
"@adobe/aem-spa-page-model-manager": "^1.0.0",

To Reproduce
Steps to reproduce the behavior:

1. Override HTML5 API to invoke ModelManager getData or initialize method to retrieve model json for new page
2. Load SPA editor app without integrating React Router
3. Now using browser console try changing the content iframe URL to a new page
4. See error

Expected behavior
ModelManager API should allow more control towards switching the page being viewed without throwing any errors

Screenshots
Error description should enough. if desired will attach screenshots when some one requests for.

Additional context
After repeated trials and info from https://stackoverflow.com/questions/60331739/render-aem-pages-in-react-dynamically-independently-of-url-path# decided to re-initialize (instead of get data) the model manager every time we have a new page with new instance of custom client it works fine.

[bug] 400 bad request on ".model.json"

Describe the bug
The ModelManager initializes correct on my page with "us.model.json". For some reason the aem-spa-page-model-manager then makes a request to ".model.json" a resource that can't possibly exist and gets a 400 response breaking the react application.

Package version
latest

To Reproduce
I cannot reproduce this, AEM suddenly started behaving like this

Expected behavior
Only validated values should be passed

Additional context
Page was working then suddenly was not

[bug] After dialog update Boolean false being sent as empty string

Describe the bug
I've had an issue when trying to process boolean values when updating components in AEM. When switching boolean values in the dialog, trying to set it to false does not send false but instead sends an empty string ''.
The dialog sets the values to be boolean, the sling model sets it to boolean, and the .model.json also shows the update as a boolean, but the angular component receives the string.

Update in Network banner_hero.model.json?_=1645206630867 {"title":"hello world","showPattern":false,":type":"eds-aem-app/components/banner-hero"}

But the console logs show pattern true {value: ''}

I would expect that the angular component is sent false instead of an empty string.

I've added some code below to try and replicate, I've got no idea how to package stuff up.

Package version
@adobe/[email protected]
@adobe/[email protected]
@adobe/[email protected]
@angular/*@13.2.0

To Reproduce

package com.business.europe.core.models;

import com.adobe.cq.export.json.ComponentExporter;
import com.adobe.cq.export.json.ExporterConstants;
import com.fasterxml.jackson.annotation.JsonInclude;
import com.fasterxml.jackson.annotation.JsonInclude.Include;
import lombok.Getter;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Exporter;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;

@Model(
  adaptables = { SlingHttpServletRequest.class },
  adapters = { ComponentExporter.class },
  resourceType = BannerHeroModel.RESOURCE_TYPE,
  defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL
)
@Exporter(
  name = ExporterConstants.SLING_MODEL_EXPORTER_NAME,
  extensions = ExporterConstants.SLING_MODEL_EXTENSION
)
@JsonInclude(Include.NON_EMPTY)
@Getter
public class BannerHeroModel implements ComponentExporter {

  protected static final String RESOURCE_TYPE =
    "eds-aem-app/components/banner-hero";

  public String getExportedType() {
    return RESOURCE_TYPE;
  }

  @ValueMapValue
  private Boolean title;

  @ValueMapValue
  private Boolean showPattern;
}

Dialog

<?xml version="1.0" encoding="UTF-8" ?>
<jcr:root
  xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
  xmlns:cq="http://www.day.com/jcr/cq/1.0"
  xmlns:jcr="http://www.jcp.org/jcr/1.0"
  xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
  xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
  jcr:primaryType="nt:unstructured"
  jcr:title="Hero"
  sling:resourceType="cq/gui/components/authoring/dialog"
>
  <content
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/container"
  >
    <items jcr:primaryType="nt:unstructured">
      <tabs
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/tabs"
        maximized="{Boolean}true"
      >
        <items jcr:primaryType="nt:unstructured">
          <content
            jcr:primaryType="nt:unstructured"
            jcr:title="Content"
            sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
            margin="{Boolean}true"
          >
            <items jcr:primaryType="nt:unstructured">
              <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/container"
              >
                <items jcr:primaryType="nt:unstructured">
                  <title
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                    fieldLabel="Title"
                    name="./title"
                    required="{Boolean}true"
                  />
                  <showPattern
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                    text="Display Pattern?"
                    name="./showPattern"
                    checked="{Boolean}true"
                    value="{Boolean}true"
                    uncheckedValue="{Boolean}false"
                  />
                </items>
              </column>
            </items>
          </content>
        </items>
      </tabs>
    </items>
  </content>
</jcr:root>

import { MapTo } from '@adobe/aem-angular-editable-components';
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
import { Component, Input } from '@angular/core';

@Component({
  selector: 'eds-base-banner-hero',
  template: `Show Pattern: {{ showPattern }}`,
})
export class BannerHeroComponent {
  @Input() title?: string;
  @Input()
  set showPattern(value: BooleanInput) {
    this._showPattern = coerceBooleanProperty(value);
    console.log('showPattern', this._showPattern, {value});
  }
  get showPattern(): boolean {
    return this._showPattern;
  }

  private _showPattern!: boolean;
}

MapTo('eds-aem-app/components/banner-hero')(BannerHeroComponent, {
  emptyLabel: 'Hero',
  isEmpty: (cqModel: any) => !cqModel || !cqModel.title,
});

[chore] How about bump version for npm?

I worries is that (aem-spa-page-model-manager)-package has been supported for a long time on a limited version of NPM, how about trying to update it to the up-today one?

This may not be an easy task, but I believe that keeping packages up to date will help improve your product and make it more alive.

I remind you that the current version of npm is limited and has '6.14.14' and for up-today we have '8.12.1'

[bug] When i'm giving full path of model json url still it's appending the current domain with the full url

Describe the bug
In Package.json i removed the proxy configuration and updated my .env.devlopment file for model json with full AEM cloud url as
REACT_APP_PAGE_MODEL_PATH=https://publish-p76602-e663929.adobeaemcloud.com/content/wknd-spa-react/us/en.model.json.
When i'm running my dev environment in my local or in any other cloud, model url is hitting wrongly by concatenating the current domain url with the url which is given in the .env like this ** http://localhost:3000/https://publish-p76602-e663929.adobeaemcloud.com/content/wknd-spa-react/us/en.model.json**

Package version
Latest Package version: 1.4.4

To Reproduce
Steps to reproduce the behavior:

1. Setup a local environment same like prod environment without proxy in package.json. Because i'm trying to run the same local setup in my cloud machine. In that case, Proxy wont't works there..

Expected behavior
My expectation if , If we give full model json url path in .env file. It should pick that URL in the build and same have to hit while running web in local/in any cloud machine.

[feature] Allow Add Selector or Suffix to ClientModelURL

Bu default react call /..../componenet.model.json
the idea is to have componenet.model.json/group
We need to load Four types of JSON DATA for different groups of the user (Private Area)
and save the result on the cache to deliver the same content to all users memebre of group

[bug] model JSON of page is retrieved with the wrong path

Describe the bug
A clear and concise description of what the bug is.

Package version
1.3.10 upwards. 1.3.9 is working.

To Reproduce
Steps to reproduce the behavior:
1: Use SPA editor 1.0 on an AEM instance
2: Load in any page that is not included in the model root JSON so it has to be requested
3: Observe the behaviour (see screenshots)

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

1.3.9:

1.3.10+:

If applicable, add screenshots to help explain your problem.

Additional context
Add any other context about the problem here.

[feature] expose ModelManagerConfiguration

Is your feature request related to a problem? Please describe.
Export ModelManagerConfiguration interface from ModelClient.ts to root import so end user may use it.

Describe the solution you'd like
Can't do this without hax:

import { ModelManagerConfiguration } from '@adobe/aem-spa-page-model-manager';
const config: ModelManagerConfiguration = {};
config.modelClient = whatever;
ModelManager.initialize(config);

Describe alternatives you've considered
I can workaround by using import { ModelManagerConfiguration } from '@adobe/aem-spa-page-model-manager/dist/ModelManager';, but importing anything directly from a dist folder is usually risky behavior as it is more prone to implementation change without notice or documentation.

[bug] The Page Model Manager should not attempt to fetch the model of an anchor URL

Describe the bug

Following up on the issue initially reported in [0].

In [1], anchor URLs get processed to potentially fetch a model. The anchor chunk of the URL is kept when it should probably not be. This results in a regex not to perform well. But this is more a side effect. Stripping or ignoring the anchor chunk is probably the actual expectation. I such a case, we probably are interested in fetching the model of the page.

[0] adobe/aem-angular-editable-components#33
[1]

aem-spa-page-model-manager/src/PathUtils.ts

Line 245 in 3ea346c

const match = /^((?:[/a-zA-Z0-9:_-]*)+)(?:\.?)([a-zA-Z0-9._-]*)(?:\/?)([a-zA-Z0-9/._-]*)(?:\??)([a-zA-Z0-9=&]*)$/g.exec(

Package version
Provide a package version where the bug occurs.

• @adobe/cq-angular-editable-components": "^2.0.2
• Current version

To Reproduce
Steps to reproduce the behavior:

Try to navigate to a URL of the SPA that contains an anchor chunk

e.g. my-website/my-page#anchor

Experienced behavior

The following illegitimate URL is generated:

my-website/my-page#anchor.model

Expected behavior
A clear and concise description of what you expected to happen.

The following URL should be generated instead

my-website/my-page.model

Screenshots
If applicable, add screenshots to help explain your problem.

See: adobe/aem-angular-editable-components#33

Additional context
Add any other context about the problem here.

[feature] Allow vanity url/ url alias

Is your feature request related to a problem? Please describe.
Trying to implement React applications integrated in AEM, everything was working fine until we modified URLs not to expose our filesystem with /content directory on the URL.
We started using vanity URLs and then we are unable to get the correct model.json, as model url and page url are different.
We have tried many things, mainly focusing on overwrite model with the correct urls, but we are still facing issues with react router.

Describe the solution you'd like
We would like to be able to provide a path different from page path that modelManager is able to handle in order to get all pages models.

[bug] Node v13 dependency, blocks firebase support

Describe the bug
This library currently requires node >=13 to use. This limits our ability to use AEM alongside firebase, as only Node 10/12 are supported.

It is unclear why the specific dependency on an odd-numbered release when Node.JS advocate that "Production applications should only use Active LTS or Maintenance LTS releases" which are even-numbered releases.

After six months, odd-numbered releases (9, 11, etc.) become unsupported, and even-numbered releases (10, 12, etc.) move to Active LTS status and are ready for general use.

Package version
1.2.x

To Reproduce
Steps to reproduce the behavior:

1. NPM Install with Node 12, (latest supported node version in firebase)
2. See standard node engine error

error @adobe/[email protected]: The engine "node" is incompatible with this module. Expected version ">=13.10.1". Got "12.16.2"

Expected behavior
Expected to be able to use the current LTS versions of Node.

[bug] Duplicated API call for model.json on short URL pages - call for /.model.json

I have experienced additional API call in network tab for /.model.json for page which use short url like https://foo/bar/ - this call is not present for https://foo/bar.html

Expected Behaviour : For https://foo/bar/ model json call should be https://foo/bar.model.json

Actual Behaviour: For https://foo/bar/ model json call is duplicated https://foo/bar.model.json and https://foo/.model.json

On some servers where /. calls are blocked this behavior is breaking page loading - as /.model.json is rejected - and application doesn't get JSON as this second /.model.json overwriting first proper call /bar.model.json

[Question] Send Query Parameters to AEM

Is it possible to send the query parameters when fetching the data from AEM with the Model Manager?

aem-spa-page-model-manager/src/ModelManager.ts

Line 377 in 052be87

public getData<M extends Model>(config?: ModelManagerConfiguration | string): Promise<M> {

[bug] In Publish servers, Home model.json is not being fetched and populated on SPA sites

Describe the bug
With SPA client-side routing implemented, on a Published page, any time a user tries to navigate to the current site's Home path ("/", ie. https://www.example.com/) from any other given page, the model.json is not fetched, causing the page to go blank.

Package version
1.3.11

To Reproduce

1. Populate a given page in a site with a Link (ie. via a custom component)

2. Publish the site

3. Navigate to said page

4. Try to use the Link to redirect to Home

Expected behavior
The .model.json should be fetched, and the page correctly populated with the Home page content

Actual behavior
The .model.json file is never fetched, and the page goes blank

Screenshots
Will be adding these shortly.

Additional context
Based on our initial investigation, it seems this might be explicitly set, as shown here:

aem-spa-page-model-manager/src/ModelRouter.ts

Lines 174 to 179 in 948895d

	// don't fetch the model
	// for the root path
	// or when the route is excluded
	if (!path || ('/' === path) || isRouteExcluded(path)) {
	return;
	}

However, there's no context on why that is, and this seems to be a common enough use-case that should be supported.

SPA - React - Page Model Filter paths not considering in the ModelManager(_fetchActivePageModel )

I created a custom route path(localhost:3000/custom-page) in react project and refer that path in the cq:pagemodel_route_filters meta property to avoid the page model data fetching. This is working as expected when navigating from the home page (or any existing aem pages) to the custom page. If we try to hit the custom page directly(localhost:3000/custom-page), we will get an error as follows.

Expected Result:
we should able to hit the URL directly without any issues.

After debugging through the code, I think the _fetchActivePageModel method is not checking if the page path is mentioned in the page model route filters or not.

aem-spa-page-model-manager/src/ModelManager.ts

Line 333 in f8c4be5

private _fetchActivePageModel(rootModel: Model) {

I created a fix for this: master...antoantonyk:issue/fetch-active-page-model-excluded-route-path

[feature] Page model route filter examples

Hi community,

I have been figuring out and trying to play with the cq:pagemodel_route_filters but I am not sure what values are expected to filter. As per documentation, it is expecting a regular expression or a value, but I'm not quite sure what values or RegExp this filter is expecting.

I'm under the understanding that it can filter certain values of the page model, like :children but not entirely sure if this is the use case for these filtering property.

Could some examples be provided in the documentation as what type of values are expected for this property, and some use cases of when to use it and when not to use it? Thanks!

[bug]

Describe the bug
When the structureDepth for the AEM project is altered, empty page is displayed on SPA back navigation

Package version
Latest

To Reproduce
Steps to Reproduce - Expected Behavior:
B1. Go to http://localhost.twitter.com:4502/content/wknd-events/react/home.html?wcmmode=disabled
B2. Click "First Article"
B3. At the top of the page, click the (<) looking icon on the right of the yellow nav to go back to the home page
B4. Click "Second Article"
B5. Refresh the page using the browsers refresh button
B6. Click the browser's back button
B7. You should now be on the "home" page, and see content
B8. Click the browser's back button
B9. You should now be on the "First Article" page, and see content

C1. Go to http://localhost.twitter.com:4502/crx/de/index.jsp#/conf/wknd-events/settings/wcm/policies/wknd-events/components/structure/app/default
C2. Change the structureDepth property from 2 to 1

BUG:
With the crx/de update saved, repeat steps B1 - B9.
Step B9 no longer works. The "First Article" page renders as empty.

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
Add any other context about the problem here.

[bug] Package import results in window.history manipulation

Describe the bug
When importing any module exported by aem-spa-page-model-manager triggers problematic manipulation of window.history.

Package version

Version: @adobe/[email protected]

To Reproduce

Let's say we only import Constants like this:

import { Constants } from '@adobe/aem-spa-page-model-manager'

Behind the scenes this will include ModelRouter.ts and consequently on line 180 and bellow built-in history and window methods will be overwritten (per default). As a developer this is a unexpected side-effect and overwriting built-in methods is a bad practise and should be avoided.

Expected behavior

I would suggest to either add this router init behavior to a dedictated method like initModelRouter or add it to the initialize function. Overwrites should be removed in favor of browser hooks like:

window.addEventListener('popstate', handleRoutingEvent)

[feature] allow ModelClient to fetch from different origins

Option for ModelClient to fetch from different origins.

[bug] Model-Manager throws errors when using Nuxt.js (with vue-router)

Describe the bug
Currently, we at diva-e working on a support of the Nuxt.js framework for AEM based on the Vue implementation provided by Mavice.
So we replaced the regular react application in the Weekend-SPA-Example with a similar nuxt setup. The difference here is, that nuxt bootstraps the Vue application internally so we cannot intervent much in this lifecycle.

When importing the aem-spa-page-model-manager package in our nuxt application we get the following error in the browser console:

aem-spa-page-model-manager.js?64bf:1 Uncaught (in promise) Error: ModelClient is undefined. Call initialize first!

This happens as soon as we import anything from your package, even when we are just importing Constants and do nothing else with the modules.

At first this error caused our website to remain blank and no rendering was executed. But by adding some error handling, we were able to avoid this problem and the site was displayed correctly.
In our view this error is strongly related with Issue #60, our current workaround is to disable model routing completly:

meta: [
  { property: 'cq:pagemodel_router', content: 'disabled' }
]

I think in the AEM SPA preview, this property is already set, so this issue only applies for the live page.

Technical Details

The react and vue wknd samples work like this:

1. Package-Import
2. Execution of ModelManager.initialize()
3. Vue/React-Router init

In Nuxt this sequence is a bit different

1. Package-Import
2. Vue/React-Router init
3. Execution of ModelManager.initialize()

Package version

• @adobe/[email protected]
• using aem-sdk-quickstart-2021.4.5139.20210407T003220Z-210325

To Reproduce

It should be possible to reproduce this error by using either the react-wknd-spa or vue-wknd-spa (mavice) sample project and create the respective router of the framework before executing ModelManager.initialize

When calling initialize before creating the vue-router, this problem is not present.

Expected behavior

Package import and ModelManager-Init should be independet of the vue router init time. This seems to be a problem caused by #60

Screenshots

[bug] - If page is called with suffix (e.g. /page.html/suffix) it result in wrong URL for model.json

Describe the bug
Calling the page with the suffix /content/site/page.html/suffix result in a wrong URL for model.json for that page that looks like /content/site/page.model.jsonsuffix

Looking at the code it seems that the PathUtil._replaceExtension misses first /
See here:

aem-spa-page-model-manager/src/PathUtils.ts

Line 291 in 3b040b7

path += slingElementsWithoutResource.join('/');

Looks like the line 291 should be
path += '/' + slingElementsWithoutResource.join('/');

Package version
1.4.0, but issue is present in the master too

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
Calling the page with the suffix /content/site/page.html/suffix should call for model.json with a proper URL which is /content/site/page.mode.json/suffix

Screenshots
N/A

Additional context
N/A

[feature] Update to ECMAScript Modules

Is your feature request related to a problem? Please describe.
Trying to build a clientlib containing @adobe/aem-spa-page-model-manager produces this error message.

Warning: /Users/uut1/repos/europe-design-system.webapp/apps/eds-aem-clientlib/src/app/components/model-manager.service.ts depends on '@adobe/aem-spa-page-model-manager'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Describe the solution you'd like
@adobe/aem-spa-page-model-manager is compiled to an ECMAScript Module instead of CommonJS so code can be optimised.

Conditionally add async tag in page editor clientlibs

Context:
When the editor is opened inside an iframe in edit mode the corresponding clientlibs should be rendered async.

Expected Outcome:
When the PageModelManager identifies that it is loaded in the editor (isInEditor), script and style tags are being added to the DOM so that MessageChannel and placeholders can operate from within the iFrame of the Editor

[feature] How we can customize the SPA router config?

Hi Team,

I want to customize SPA router config (react-router), want to use static router in AEM and manually get the page model. this is possible? like below:

[feature] Need a way to set host for mode Manager to fetch JSON data from -for react remote spa

Is your feature request related to a problem? Please describe.
I am unable to find way that we can configure modelManager to fetch data from all together separate custom API than AEM it self, basically i want to have custom API to impose user specific business logic before its consumed by UI.

Describe the solution you'd like
ModelManager.initialize() add some config object that all models will get fetched from custom API gateway than AEM.

[bug] Package is incompatible with IE11

Describe the bug
This package is not compatible with IE11. This is because the TypeScript compilation target has been set to es2018 in tsconfig.json. IE11 does not support the features available in es2018, and throws an error when it runs into code it cannot understand.

Package version
1.2.3

Expected behavior
The package should be compatible with IE11. A possible fix for this can be to set the compilation target to es5 instead of es2018

Screenshots

[feature] Enable standalone usage of ModelStore

Is your feature request related to a problem? Please describe.

In our angular project we want to use a custom API client and custom routing and as a result we only need the ModelStore
from the aem-spa-page-model-manager project.
Furthermore it would also be great to use ModelStore as a type in TypeScript project.

Describe the solution you'd like

ModelStore should be exported in the module entrypoint (types.ts)

[bug] ModelRouter cannot properly handle query params when page path has no extension

Describe the bug
We do URL rewrite on the AEM Dispatcher level, so our URLs and extension-less, e.g. /home. We recently noticed, that when you navigate to the page containing query param with the dot . - e.g. /home/search?q=some.param.with.dots, the router logic breaks unable to load the correct page model.

Package version
1.3.6

To Reproduce
Assuming you have two valid AEM pages at /home and /home/search and home links out to /home/search

1. Go to /home
2. Click on the valid page link with some query params in it containing dots like /home/search?q=some.param.with.dots
3. See blank page and an invalid model request in the Network tab: /home/search.?q=some.model.json?q=some.model

Expected behavior
Page model should be loaded at /home/search.model.json regardless of what is in query params as long as it complies with URL spec.

Additional context
We believe that the problem is in the getModelPath method of the ModelRouter component:

export function getModelPath(url?: string | null): string {
    const localUrl = url || window.location.pathname;

    // The default value model path comes as the the content path
    let endPosition = localUrl.indexOf('.');

    if (endPosition < 0) {
        // If the path is missing extension and has query params instead eg. http://zyx/abc?test=test
        const queryPosition = localUrl.indexOf('?');

        endPosition = (queryPosition < 0) ? localUrl.length : queryPosition;
    }

    return localUrl.substr(0, endPosition);
}

I think the method is better to rewrite to first strip-off all the query params, and then extract page path without .html bit explicitly, rather than rely on dots only.

NextJS | ModelManager.initializeAsync throws 404 on / [bug]

Describe the bug
Trying to bootstrap a new SPA using adobe model manager. When used ModelManager.initializeAsync it doesn't work as expected. Proxy call to AEM Cloud is not happening throws 404

Here is my implementation:

  React.useEffect(() => {
    ModelManager.initializeAsync({
      path: '/content/my-site/us/en.model.json'
    });
  }, []);

Package version
1.3.11

To Reproduce
Steps to reproduce the behavior:

1. yarn dev
2. http://localhost:4100/
3. See error 404 -> http://localhost:4100/content/my-site/us/en.model.json

Expected behavior

• proxy call to aem cloud should happen and fetch the pageModel details.

Screenshots
NA

Additional context

• Trying to bootstrap NextJS SPA with AEM.
• In the wknd example the proxy re-direct works only when the path is /content/my-site/us/en/home.html

Editor doesn't update URLs after the active page to edit is loaded by content iframe

Describe the bug
When using ModelManager to load different pages as a result of a button click or link navigation, we see content is loading fine, but the Editor URL still points to the initial page.

Package version
"@adobe/aem-spa-page-model-manager": "^1.0.0",

To Reproduce
Steps to reproduce the behavior:

1. Use WKND guides project for React
2. Open a page that has navigation in it, and click one of the links
3. Navigation shall happen
4. See that there is ambiguity when comparing URL in Editor vs actual content

Expected behavior
URL should be updated on Editor end and all the links actions on the editor should get associated with the page being viewed in content iframe.

Additional context
Unsure if this issue is more on the AEM end and less on SPA editor. Please advise if this needs to be logged else where.