",
12 | "license": "Apache-2.0",
13 | "repository": "github:adobe/aem-spa-page-model-manager",
14 | "homepage": "https://docs.adobe.com/content/help/en/experience-manager-65/developing/headless/spas/spa-reference-materials.html",
15 | "bugs": {
16 | "url": "https://github.com/adobe/aem-spa-page-model-manager/issues"
17 | },
18 | "engines": {
19 | "npm": ">=6.14.15",
20 | "node": ">=12.16.2"
21 | },
22 | "main": "dist/aem-spa-page-model-manager.js",
23 | "types": "dist/types.d.ts",
24 | "scripts": {
25 | "build:production": "NODE_ENV=production npm run build",
26 | "build:types": "tsc -p src/tsconfig.types.json",
27 | "build": "npm run clean && npm run lint && webpack && npm run build:types",
28 | "clean": "rm -rf dist/",
29 | "docs": "npm i && npx typedoc --entryPointStrategy expand --excludePrivate ./src --out ./dist/docs",
30 | "lint": "eslint .",
31 | "semantic-release": "semantic-release",
32 | "test:coverage": "jest --clearCache && jest --coverage",
33 | "test:debug": "jest --coverage --watchAll",
34 | "test": "jest --clearCache && jest"
35 | },
36 | "dependencies": {
37 | "clone": "^2.1.2",
38 | "path-browserify": "^1.0.1",
39 | "url": "^0.11.0"
40 | },
41 | "devDependencies": {
42 | "@adobe/eslint-config-editorxp": "^1.0.3",
43 | "@semantic-release/changelog": "^6.0.1",
44 | "@semantic-release/git": "^10.0.1",
45 | "@semantic-release/github": "^8.0.4",
46 | "@types/clone": "^2.1.0",
47 | "@types/jest": "^26.0.14",
48 | "@types/node": "^14.11.5",
49 | "@typescript-eslint/eslint-plugin": "^4.4.0",
50 | "@typescript-eslint/parser": "^4.4.0",
51 | "clean-webpack-plugin": "^3.0.0",
52 | "commitizen": "^4.2.4",
53 | "cz-conventional-changelog": "^3.0.1",
54 | "eslint": "^7.10.0",
55 | "eslint-plugin-header": "^3.1.0",
56 | "eslint-plugin-json": "^2.1.2",
57 | "jest": "^26.5.2",
58 | "jest-fetch-mock": "^3.0.3",
59 | "semantic-release": "^19.0.2",
60 | "ts-jest": "^26.4.1",
61 | "ts-loader": "^8.1.0",
62 | "ts-mockito": "^2.6.1",
63 | "typedoc": "^0.23.0",
64 | "typescript": "^4.0.3",
65 | "webpack": "^5.0.0",
66 | "webpack-cli": "^4.0.0",
67 | "webpack-node-externals": "^2.5.2"
68 | },
69 | "files": [
70 | "dist/**/*.{js,ts,map}",
71 | "!**/{docs,coverage}/"
72 | ],
73 | "config": {
74 | "commitizen": {
75 | "path": "./node_modules/cz-conventional-changelog"
76 | }
77 | },
78 | "eslintConfig": {
79 | "root": true,
80 | "extends": [
81 | "@adobe/eslint-config-editorxp/typescript"
82 | ]
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Adobe Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | In the interest of fostering an open and welcoming environment, we as
6 | contributors and maintainers pledge to making participation in our project and
7 | our community a harassment-free experience for everyone, regardless of age, body
8 | size, disability, ethnicity, gender identity and expression, level of experience,
9 | nationality, personal appearance, race, religion, or sexual identity and
10 | orientation.
11 |
12 | ## Our Standards
13 |
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 |
17 | * Using welcoming and inclusive language.
18 | * Being respectful of differing viewpoints and experiences.
19 | * Gracefully accepting constructive criticism.
20 | * Focusing on what is best for the community.
21 | * Showing empathy towards other community members.
22 |
23 | Examples of unacceptable behavior by participants include:
24 |
25 | * The use of sexualized language or imagery and unwelcome sexual attention or
26 | advances.
27 | * Trolling, insulting/derogatory comments, and personal or political attacks.
28 | * Public or private harassment.
29 | * Publishing others' private information, such as a physical or electronic
30 | address, without explicit permission.
31 | * Other conduct which could reasonably be considered inappropriate in a
32 | professional setting.
33 |
34 | ## Our Responsibilities
35 |
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 |
40 | Project maintainers have the right and responsibility to remove, edit, or
41 | reject comments, commits, code, wiki edits, issues, and other contributions
42 | that are not aligned to this Code of Conduct, or to ban temporarily or
43 | permanently any contributor for other behaviors that they deem inappropriate,
44 | threatening, offensive, or harmful.
45 |
46 | ## Scope
47 |
48 | This Code of Conduct applies both within project spaces and in public spaces
49 | when an individual is representing the project or its community. Examples of
50 | representing a project or community include using an official project e-mail
51 | address, posting via an official social media account, or acting as an appointed
52 | representative at an online or offline event. Representation of a project may be
53 | further defined and clarified by project maintainers.
54 |
55 | ## Enforcement
56 |
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project team at Grp-opensourceoffice@adobe.com. All
59 | complaints will be reviewed and investigated and will result in a response that
60 | is deemed necessary and appropriate to the circumstances. The project team is
61 | obligated to maintain confidentiality with regard to the reporter of an incident.
62 | Further details of specific enforcement policies may be posted separately.
63 |
64 | Project maintainers who do not follow or enforce the Code of Conduct in good
65 | faith may face temporary or permanent repercussions as determined by other
66 | members of the project's leadership.
67 |
68 | ## Attribution
69 |
70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71 | available at [https://contributor-covenant.org/version/1/4][version].
72 |
73 | [homepage]: https://contributor-covenant.org
74 | [version]: https://contributor-covenant.org/version/1/4/
--------------------------------------------------------------------------------
/test/data/EditorClientData.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2020 Adobe. All rights reserved.
3 | * This file is licensed to you under the Apache License, Version 2.0 (the "License");
4 | * you may not use this file except in compliance with the License. You may obtain a copy
5 | * of the License at http://www.apache.org/licenses/LICENSE-2.0
6 | *
7 | * Unless required by applicable law or agreed to in writing, software distributed under
8 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9 | * OF ANY KIND, either express or implied. See the License for the specific language
10 | * governing permissions and limitations under the License.
11 | */
12 |
13 | import { PageModel, ResponsiveGridModel } from './types';
14 |
15 | const DEFAULT_PAGE_MODEL_PATH = window.location.pathname.replace(/\.htm(l)?$/, '');
16 |
17 | export const CHILD0000_MODEL_JSON: ResponsiveGridModel = {
18 | 'gridClassNames': 'aem-Grid aem-Grid--12 aem-Grid--default--12',
19 | 'columnCount': 12,
20 | ':itemsOrder': [ 'child0010', 'child0011' ],
21 | ':items': {
22 | 'child0010': { ':type': 'test/components/componentchild0' },
23 | 'child0011': { ':type': 'test/components/componentchild1' }
24 | },
25 | ':type': 'wcm/foundation/components/responsivegrid'
26 | };
27 |
28 | export const root: ResponsiveGridModel = {
29 | 'gridClassNames': 'aem-Grid aem-Grid--12 aem-Grid--default--12',
30 | 'columnCount': 12,
31 | ':itemsOrder': [ 'child0000', 'child0001' ],
32 | ':items': {
33 | 'child0000': CHILD0000_MODEL_JSON,
34 | 'child0001': { ':type': 'test/components/componentchild1' }
35 | },
36 | ':type': 'wcm/foundation/components/responsivegrid'
37 | };
38 |
39 | export const dummyResponsiveGrid: ResponsiveGridModel = {
40 | 'gridClassNames': 'aem-Grid aem-Grid--12 aem-Grid--default--12',
41 | 'columnCount': 12,
42 | ':type': 'wcm/foundation/components/responsivegrid'
43 | };
44 |
45 | export const childPage1Root: ResponsiveGridModel = {
46 | 'gridClassNames': 'aem-Grid aem-Grid--12 aem-Grid--default--12',
47 | 'columnCount': 12,
48 | ':itemsOrder': [ 'child1000', 'child1001' ],
49 | ':items': {
50 | 'child1000': dummyResponsiveGrid,
51 | 'child1001': { ':type': 'test/components/componentchild1' }
52 | },
53 | ':type': 'wcm/foundation/components/responsivegrid'
54 | };
55 |
56 | export const childPage2Root: ResponsiveGridModel = {
57 | 'gridClassNames': 'aem-Grid aem-Grid--12 aem-Grid--default--12',
58 | 'columnCount': 12,
59 | ':itemsOrder': [ 'child2000', 'child2001' ],
60 | ':items': {
61 | 'child2000': dummyResponsiveGrid,
62 | 'child2001': { ':type': 'test/components/componentchild1' }
63 | },
64 | ':type': 'wcm/foundation/components/responsivegrid'
65 | };
66 |
67 | export const PAGE_MODEL_JSON: PageModel = {
68 | ':path': DEFAULT_PAGE_MODEL_PATH,
69 | 'designPath': '/libs/settings/wcm/designs/default',
70 | 'title': 'React sample page',
71 | 'lastModifiedDate': 1512116041058,
72 | 'templateName': 'sample-template',
73 | 'cssClassNames': 'page',
74 | 'language': 'en-US',
75 | ':itemsOrder': [
76 | 'root'
77 | ],
78 | ':items': {
79 | 'root': root
80 | },
81 | ':hierarchyType': 'page',
82 | ':children': {
83 | '/content/test/child_page_1': {
84 | ':type': 'we-retail-journal/react/components/structure/page',
85 | ':items': {
86 | 'root': childPage1Root
87 | },
88 | ':itemsOrder': [
89 | 'root'
90 | ]
91 | },
92 | '/content/test/subpage2': {
93 | ':type': 'we-retail-journal/react/components/structure/page',
94 | ':items': {
95 | 'root': childPage2Root
96 | },
97 | ':itemsOrder': [
98 | 'root'
99 | ]
100 | }
101 | },
102 | ':type': 'we-retail-react/components/structure/page'
103 | };
104 |
--------------------------------------------------------------------------------
/test/ModelClient.test.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2020 Adobe. All rights reserved.
3 | * This file is licensed to you under the Apache License, Version 2.0 (the "License");
4 | * you may not use this file except in compliance with the License. You may obtain a copy
5 | * of the License at http://www.apache.org/licenses/LICENSE-2.0
6 | *
7 | * Unless required by applicable law or agreed to in writing, software distributed under
8 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9 | * OF ANY KIND, either express or implied. See the License for the specific language
10 | * governing permissions and limitations under the License.
11 | */
12 |
13 | import * as assert from 'assert';
14 | import fetchMock from 'jest-fetch-mock';
15 | import { Model } from '../src/Model';
16 | import { ModelClient } from '../src/ModelClient';
17 | import { content_test_child_page_1, PAGE_MODEL } from './data/MainPageData';
18 |
19 | const NON_EXISTING_URL = '/content/test/undefined';
20 | const PAGE_URL = '/content/test/page';
21 | const CHILD_PAGE_URL = '/content/test/child_page_1';
22 | const CHILD_PAGE_404_URL = '/content/test/child_page_404';
23 | const myEndPoint = 'http://localhost:4523';
24 |
25 | function getJSONResponse(body: Model) {
26 | return {
27 | status: 200,
28 | body: JSON.stringify(body),
29 | headers: {
30 | 'Content-type': 'application/json'
31 | }
32 | };
33 | }
34 |
35 | function mockTheFetch() {
36 | fetchMock.doMock((req) => {
37 | switch (req.url) {
38 | case myEndPoint + CHILD_PAGE_URL:
39 | return Promise.resolve(getJSONResponse(content_test_child_page_1));
40 |
41 | case myEndPoint + PAGE_URL:
42 | return Promise.resolve(getJSONResponse(PAGE_MODEL));
43 |
44 | case myEndPoint + CHILD_PAGE_404_URL:
45 | default:
46 | return Promise.reject({ code: 404, body: 'Not found' });
47 | }
48 | });
49 | }
50 |
51 | describe('ModelClient ->', () => {
52 | beforeEach(() => {
53 | fetchMock.resetMocks();
54 | mockTheFetch();
55 | });
56 |
57 | describe('fetch ->', () => {
58 | it('should reject when the remote model endpoint is not found', () => {
59 | const modelClient = new ModelClient(myEndPoint);
60 |
61 | return modelClient.fetch(NON_EXISTING_URL).then((data) => {
62 | assert.fail(data, undefined);
63 | }).catch((error) => {
64 | expect(error.code).toEqual(404);
65 | });
66 | });
67 |
68 | it('should return the expected data', () => {
69 | const modelClient = new ModelClient(myEndPoint);
70 |
71 | return modelClient.fetch(PAGE_URL).then((data) => {
72 | assert.deepEqual(data, PAGE_MODEL);
73 |
74 | return modelClient.fetch(CHILD_PAGE_URL);
75 | }).then((data) => {
76 | assert.deepEqual(data, content_test_child_page_1);
77 |
78 | return modelClient.fetch(CHILD_PAGE_404_URL);
79 | }).catch((error) => {
80 | expect(error.code).toEqual(404);
81 | });
82 | });
83 |
84 | describe('handling incorrect parameter', () => {
85 | const modelClient = new ModelClient(myEndPoint);
86 |
87 | // failing as the undefined is passed to the PathUtils which can not handle this case
88 | // it('should resolve with Error - when no URL provided', (done) => {
89 | //
90 | // modelClient.fetch(undefined).catch((e) => {
91 | // assert.isNotNull(e);
92 | // done();
93 | // });
94 | // });
95 |
96 | it('should resolve with Error - when empty URL provided', (done) => {
97 | modelClient.fetch('').catch((error) => {
98 | expect(error.message).toBeDefined();
99 | done();
100 | });
101 | });
102 | });
103 | });
104 | });
105 |
--------------------------------------------------------------------------------
/src/EditorClient.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2020 Adobe. All rights reserved.
3 | * This file is licensed to you under the Apache License, Version 2.0 (the "License");
4 | * you may not use this file except in compliance with the License. You may obtain a copy
5 | * of the License at http://www.apache.org/licenses/LICENSE-2.0
6 | *
7 | * Unless required by applicable law or agreed to in writing, software distributed under
8 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9 | * OF ANY KIND, either express or implied. See the License for the specific language
10 | * governing permissions and limitations under the License.
11 | */
12 |
13 | import clone from 'clone';
14 | import EventType from './EventType';
15 | import { ModelManager } from './ModelManager';
16 | import { PathUtils } from './PathUtils';
17 |
18 | /**
19 | * Broadcast an event to indicate the page model has been loaded
20 | * @param model - model item to be added to the broadcast payload
21 | * @fires cq-pagemodel-loaded
22 | * @private
23 | */
24 | export function triggerPageModelLoaded(model: any): void {
25 | // Deep copy to protect the internal state of the page mode
26 | PathUtils.dispatchGlobalCustomEvent(EventType.PAGE_MODEL_LOADED, {
27 | detail: {
28 | model: clone(model)
29 | }
30 | });
31 | }
32 |
33 | /**
34 | * The EditorClient is responsible for the interactions with the Page Editor.
35 | * @private
36 | */
37 | export class EditorClient {
38 | public _modelManager: ModelManager;
39 | public _windowListener: any;
40 |
41 | constructor(modelManager: ModelManager) {
42 | this._modelManager = modelManager;
43 |
44 | this._windowListener = (event: any) => {
45 | if (!event || !event.detail || !event.detail.msg) {
46 | console.error('EditorService.js', 'No message passed to cq-pagemodel-update', event);
47 |
48 | return;
49 | }
50 |
51 | this._updateModel(event.detail.msg);
52 | };
53 |
54 | if (PathUtils.isBrowser()) {
55 | window.addEventListener(EventType.PAGE_MODEL_UPDATE, this._windowListener);
56 | }
57 | }
58 |
59 | /**
60 | * Updates the page model with the given data
61 | *
62 | * @param {Object} msg - Object containing the data to update the page model
63 | * @property {String} msg.dataPath - Relative data path in the PageModel which needs to be updated
64 | * @property {String} msg.pagePath - Absolute page path corresponding to the page in the PageModel which needs to be updated
65 | * @param {String} msg.cmd - Command Action requested via Editable on the content Node
66 | * @param {Object} msg.data - Data that needs to be updated in the PageModel at {path}
67 | * @fires cq-pagemodel-loaded
68 | * @private
69 | */
70 | public _updateModel(msg: any) {
71 | if (!msg || !msg.cmd || !msg.path) {
72 | console.error('PageModelManager.js', 'Not enough data received to update the page model');
73 |
74 | return;
75 | }
76 |
77 | // Path in the PageModel which needs to be updated
78 | const path = msg.path;
79 |
80 | // Command Action requested via Editable on the content Node
81 | const cmd = msg.cmd;
82 |
83 | // Data that needs to be updated in the page model at the given path
84 | const data = clone(msg.data);
85 |
86 | let siblingName;
87 | let itemPath;
88 | let insertBefore;
89 | const parentNodePath = PathUtils.getParentNodePath(path);
90 |
91 | switch (cmd) {
92 | case 'replace':
93 | this._modelManager.modelStore.setData(path, data);
94 | this._modelManager._notifyListeners(path);
95 | break;
96 |
97 | case 'delete':
98 | this._modelManager.modelStore.removeData(path);
99 |
100 | if (parentNodePath) {
101 | this._modelManager._notifyListeners(parentNodePath);
102 | }
103 |
104 | break;
105 |
106 | case 'insertBefore':
107 | insertBefore = true;
108 | // No break as we want both insert command to be treated the same way
109 | // eslint-disable-next-line no-fallthrough
110 |
111 | case 'insertAfter':
112 | // The logic relative to the item path and sibling between the editor and the ModelManager is reversed
113 | // Adapting the command to the ModelManager API
114 | siblingName = PathUtils.getNodeName(path);
115 |
116 | if (parentNodePath) {
117 | itemPath = parentNodePath + '/' + data.key;
118 | this._modelManager.modelStore.insertData(itemPath, data.value, siblingName, insertBefore);
119 | this._modelManager._notifyListeners(parentNodePath);
120 | }
121 |
122 | break;
123 |
124 | default:
125 | // 'replaceContent' command not supported
126 | // 'moveBefore', 'moveAfter' commands not supported.
127 | // As instead, we are replacing source and destination parents because they can contain data about the item we want to relocate
128 | console.log('EditorClient', 'unsupported command:', cmd);
129 | }
130 |
131 | triggerPageModelLoaded(this._modelManager.modelStore.dataMap);
132 | }
133 |
134 | /**
135 | * @private
136 | */
137 | public destroy() {
138 | if (PathUtils.isBrowser()) {
139 | window.removeEventListener(EventType.PAGE_MODEL_UPDATE, this._windowListener);
140 | }
141 | }
142 | }
143 |
--------------------------------------------------------------------------------
/test/data/MainPageData.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2020 Adobe. All rights reserved.
3 | * This file is licensed to you under the Apache License, Version 2.0 (the "License");
4 | * you may not use this file except in compliance with the License. You may obtain a copy
5 | * of the License at http://www.apache.org/licenses/LICENSE-2.0
6 | *
7 | * Unless required by applicable law or agreed to in writing, software distributed under
8 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9 | * OF ANY KIND, either express or implied. See the License for the specific language
10 | * governing permissions and limitations under the License.
11 | */
12 |
13 | import { Model } from '../../src/Model';
14 | import { PageModel, ResponsiveGridModel } from './types';
15 |
16 | export const content_test_page_root_child0000_child0010: Model = { ':type': 'test/components/componentchild0' };
17 | export const content_test_page_root_child0000_child0011: Model = { ':type': 'test/components/componentchild1' };
18 |
19 | export const content_test_page_root_child0000: ResponsiveGridModel = {
20 | 'gridClassNames': 'aem-Grid aem-Grid--12 aem-Grid--default--12',
21 | 'columnCount': 12,
22 | ':itemsOrder': [ 'child0010', 'child0011' ],
23 | ':items': {
24 | 'child0010': content_test_page_root_child0000_child0010,
25 | 'child0011': content_test_page_root_child0000_child0011
26 | },
27 | ':type': 'wcm/foundation/components/responsivegrid'
28 | };
29 |
30 | export const content_test_page_root_child0001: Model = { ':type': 'test/components/componentchild1' };
31 | export const content_test_page_root: ResponsiveGridModel = {
32 | 'gridClassNames': 'aem-Grid aem-Grid--12 aem-Grid--default--12',
33 | 'columnCount': 12,
34 | ':itemsOrder': [ 'child0000', 'child0001' ],
35 | ':items': {
36 | 'child0000': content_test_page_root_child0000,
37 | 'child0001': content_test_page_root_child0001
38 | },
39 | ':type': 'wcm/foundation/components/responsivegrid'
40 | };
41 |
42 | export const content_test_child_page_1_root_child1001: Model = { ':type': 'test/components/componentchild1' };
43 |
44 | export const content_test_child_page_1_root_child1000: ResponsiveGridModel = {
45 | 'gridClassNames': 'aem-Grid aem-Grid--12 aem-Grid--default--12',
46 | 'columnCount': 12,
47 | ':type': 'wcm/foundation/components/responsivegrid'
48 | };
49 |
50 | export const content_test_child_page_1_root: ResponsiveGridModel = {
51 | 'gridClassNames': 'aem-Grid aem-Grid--12 aem-Grid--default--12',
52 | 'columnCount': 12,
53 | ':itemsOrder': [ 'child1000', 'child1001' ],
54 | ':items': {
55 | 'child1000': content_test_child_page_1_root_child1000,
56 | 'child1001': content_test_child_page_1_root_child1001
57 | },
58 | ':type': 'wcm/foundation/components/responsivegrid'
59 | };
60 |
61 | export const content_test_child_page_1: PageModel = {
62 | ':type': 'we-retail-journal/react/components/structure/page',
63 | ':path': '/content/test/child_page_1',
64 | ':items': {
65 | 'root': content_test_child_page_1_root
66 | },
67 | ':itemsOrder': [
68 | 'root'
69 | ]
70 | };
71 |
72 | export const content_test_subpage2_root_child2000: ResponsiveGridModel = {
73 | 'gridClassNames': 'aem-Grid aem-Grid--12 aem-Grid--default--12',
74 | 'columnCount': 12,
75 | ':type': 'wcm/foundation/components/responsivegrid'
76 | };
77 |
78 | export const content_test_subpage2_root_child2001: Model = { ':type': 'test/components/componentchild1' };
79 |
80 | export const content_test_subpage2_root: ResponsiveGridModel = {
81 | 'gridClassNames': 'aem-Grid aem-Grid--12 aem-Grid--default--12',
82 | 'columnCount': 12,
83 | ':itemsOrder': [ 'child2000', 'child2001' ],
84 | ':items': {
85 | 'child2000': content_test_subpage2_root_child2000,
86 | 'child2001': content_test_subpage2_root_child2001
87 | },
88 | ':type': 'wcm/foundation/components/responsivegrid'
89 | };
90 |
91 | export const content_test_subpage2: PageModel = {
92 | ':type': 'we-retail-journal/react/components/structure/page',
93 | ':items': {
94 | 'root': content_test_subpage2_root
95 | },
96 | ':itemsOrder': [
97 | 'root'
98 | ]
99 | };
100 |
101 | export const content_test_subpage2_root_page: PageModel = { ':type': 'test/components/page' };
102 |
103 | export const content_test_subpage2_rootPage: PageModel = {
104 | ':type': 'we-retail-journal/react/components/structure/page',
105 | ':items': {
106 | 'page': content_test_subpage2_root_page
107 | },
108 | ':itemsOrder': [
109 | 'page'
110 | ]
111 | };
112 |
113 | export const PAGE_MODEL: PageModel = {
114 | 'designPath': '/libs/settings/wcm/designs/default',
115 | 'title': 'React sample page',
116 | 'lastModifiedDate': 1512116041058,
117 | 'templateName': 'sample-template',
118 | 'cssClassNames': 'page',
119 | 'language': 'en-US',
120 | ':itemsOrder': [
121 | 'root'
122 | ],
123 | ':items': {
124 | 'root': content_test_page_root
125 | },
126 | ':hierarchyType': 'page',
127 | ':children': {
128 | '/content/test/child_page_1': content_test_child_page_1,
129 | '/content/test/subpage2/subpage22': content_test_subpage2_rootPage,
130 | '/content/test/subpage2': content_test_subpage2
131 | },
132 | ':path': '/content/test/page',
133 | ':type': 'we-retail-react/components/structure/page'
134 | };
135 |
136 | export const ERROR_PAGE_MODEL_404: PageModel = {
137 | 'designPath': '/libs/settings/wcm/designs/default',
138 | 'title': 'Example Error Page 404',
139 | 'lastModifiedDate': 1512116041058,
140 | 'templateName': 'sample-template',
141 | 'cssClassNames': 'page',
142 | 'language': 'en-US',
143 | ':itemsOrder': [
144 | 'root'
145 | ],
146 | ':items': {
147 | 'root': content_test_page_root
148 | },
149 | ':hierarchyType': 'page',
150 | ':children': {},
151 | ':path': '/content/test/page',
152 | ':type': 'we-retail-react/components/structure/page'
153 | };
154 |
155 | export const ERROR_PAGE_MODEL_500: PageModel = {
156 | 'designPath': '/libs/settings/wcm/designs/default',
157 | 'title': 'Example Error Page 500',
158 | 'lastModifiedDate': 1512116041058,
159 | 'templateName': 'sample-template',
160 | 'cssClassNames': 'page',
161 | 'language': 'en-US',
162 | ':itemsOrder': [
163 | 'root'
164 | ],
165 | ':items': {
166 | 'root': content_test_page_root
167 | },
168 | ':hierarchyType': 'page',
169 | ':children': {},
170 | ':path': '/content/test/page',
171 | ':type': 'we-retail-react/components/structure/page'
172 | };
173 |
--------------------------------------------------------------------------------
/src/ModelRouter.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2020 Adobe. All rights reserved.
3 | * This file is licensed to you under the Apache License, Version 2.0 (the "License");
4 | * you may not use this file except in compliance with the License. You may obtain a copy
5 | * of the License at http://www.apache.org/licenses/LICENSE-2.0
6 | *
7 | * Unless required by applicable law or agreed to in writing, software distributed under
8 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9 | * OF ANY KIND, either express or implied. See the License for the specific language
10 | * governing permissions and limitations under the License.
11 | */
12 |
13 | import EventType from './EventType';
14 | import MetaProperty from './MetaProperty';
15 | import ModelManager from './ModelManager';
16 | import { PathUtils } from './PathUtils';
17 |
18 | /**
19 | * The ModelRouter listens for HTML5 History API popstate events
20 | * and calls {@link PageModelManager#getData()} with the model path it extracted from the URL.
21 | *
22 | * Configuration
23 | *
24 | * The Model Router can be configured using meta properties located in the head section of the document.
25 | *
26 | * Meta properties
27 | *
28 | * - cq:page_model_router - default=undefined, options=disable
29 | * - cq:page_model_route_filters - default=undefined, options=RegExp<>
30 | *
31 | *
32 | * Defaults
33 | *
34 | * - The ModelRouter is enabled and uses the History API to extract the model path from the current content path
35 | *
36 | *
37 | * Examples and Usages
38 | *
39 | * Disables the page model router
40 | *
41 | * e.g. <meta property="cq:page_model_router" content="disable"\>
42 | *
43 | *
44 | * Filters paths from the model routing with the given patterns
45 | *
46 | * e.g. <meta property="cq:page_model_route_filters" content="route/not/found,^(.*)(?:exclude/path)(.*)"\>
47 | *
48 | *
49 | * @module ModelRouter
50 | */
51 |
52 | /**
53 | * Modes in which the Model Router operates.
54 | * @private
55 | */
56 | export class RouterModes {
57 | /**
58 | * Flag that indicates that the model router should be disabled.
59 | */
60 | public static readonly DISABLED = 'disabled';
61 |
62 | /**
63 | * Flag that indicates that the model router should extract the model path from the content path section of the URL.
64 | */
65 | public static readonly CONTENT_PATH = 'path';
66 |
67 | private constructor() {
68 | // hide constructor
69 | }
70 | }
71 |
72 | /**
73 | * Returns the model path. If no URL is provided the current window URL is used
74 | * @param [url] url from which to extract the model path
75 | * @private
76 | * @return
77 | */
78 | export function getModelPath(url?: string | null | URL): string | null {
79 | const localUrl = (url || (PathUtils.isBrowser() && window.location.pathname)) as string;
80 |
81 | if (localUrl) {
82 | return PathUtils.sanitize(localUrl);
83 | }
84 |
85 | return null;
86 | }
87 |
88 | /**
89 | * Returns the list of provided route filters
90 | *
91 | * @returns {string[]}
92 | *
93 | * @private
94 | */
95 | export function getRouteFilters(): string[] {
96 | const routeFilters = PathUtils.getMetaPropertyValue(MetaProperty.PAGE_MODEL_ROUTE_FILTERS);
97 |
98 | return routeFilters ? routeFilters.split(',') : [];
99 | }
100 |
101 | /**
102 | * Should the route be excluded
103 | *
104 | * @param route
105 | * @returns {boolean}
106 | *
107 | * @private
108 | */
109 | export function isRouteExcluded(route: string): boolean {
110 | const routeFilters = getRouteFilters();
111 |
112 | for (let i = 0, length = routeFilters.length; i < length; i++) {
113 | if (new RegExp(routeFilters[i]).test(route)) {
114 | return true;
115 | }
116 | }
117 |
118 | return false;
119 | }
120 |
121 | /**
122 | * Is the model router enabled. Enabled by default
123 | * @returns {boolean}
124 | * @private
125 | */
126 | export function isModelRouterEnabled(): boolean {
127 | if (!PathUtils.isBrowser()) {
128 | return false;
129 | }
130 |
131 | const modelRouterMetaType = PathUtils.getMetaPropertyValue(MetaProperty.PAGE_MODEL_ROUTER);
132 |
133 | // Enable the the page model routing by default
134 | return !modelRouterMetaType || (RouterModes.DISABLED !== modelRouterMetaType);
135 | }
136 |
137 | /**
138 | * Fetches the model from the PageModelManager and then dispatches it
139 | *
140 | * @fires cq-pagemodel-route-changed
141 | *
142 | * @param {string} [path] - path of the model to be dispatched
143 | *
144 | * @private
145 | */
146 | export function dispatchRouteChanged(path: string): void {
147 | // Triggering the page model manager to load a new child page model
148 | // No need to use a cache as the PageModelManager already does it
149 | ModelManager.getData({ path }).then((model) => {
150 | PathUtils.dispatchGlobalCustomEvent(EventType.PAGE_MODEL_ROUTE_CHANGED, {
151 | detail: {
152 | model
153 | }
154 | });
155 | });
156 | }
157 |
158 | /**
159 | * Triggers the PageModelManager to fetch data based on the current route
160 | *
161 | * @fires cq-pagemodel-route-changed - with the root page model object
162 | *
163 | * @param {string} [url] - url from which to extract the model path
164 | *
165 | * @private
166 | */
167 | export function routeModel(url?: string | undefined | null | URL): void {
168 | if (!isModelRouterEnabled()) {
169 | return;
170 | }
171 |
172 | const path = getModelPath(url);
173 |
174 | // don't fetch the model
175 | // for the root path
176 | // or when the route is excluded
177 | if (!path || ('/' === path) || isRouteExcluded(path)) {
178 | return;
179 | }
180 |
181 | dispatchRouteChanged(path);
182 | }
183 |
184 | export function initModelRouter(): void {
185 | // Activate the model router
186 | if (isModelRouterEnabled() && PathUtils.isBrowser()) {
187 | // Encapsulate the history.pushState and history.replaceState functions to prefetch the page model for the current route
188 | const pushState = window.history.pushState;
189 | const replaceState = window.history.replaceState;
190 |
191 | window.addEventListener('popstate', e => {
192 | const target = e?.target as Window;
193 |
194 | routeModel(target?.location?.pathname || null);
195 | });
196 |
197 | window.history.pushState = (state, title, url) => {
198 | routeModel(url);
199 |
200 | return pushState.apply(history, [ state, title, url ]);
201 | };
202 |
203 | window.history.replaceState = (state, title, url) => {
204 | routeModel(url || null);
205 |
206 | return replaceState.apply(history, [ state, title, url ]);
207 | };
208 | }
209 | }
210 |
--------------------------------------------------------------------------------
/test/ModelRouter.test.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2020 Adobe. All rights reserved.
3 | * This file is licensed to you under the Apache License, Version 2.0 (the "License");
4 | * you may not use this file except in compliance with the License. You may obtain a copy
5 | * of the License at http://www.apache.org/licenses/LICENSE-2.0
6 | *
7 | * Unless required by applicable law or agreed to in writing, software distributed under
8 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9 | * OF ANY KIND, either express or implied. See the License for the specific language
10 | * governing permissions and limitations under the License.
11 | */
12 |
13 | import MetaProperty from '../src/MetaProperty';
14 | import { Model } from '../src/Model';
15 | import ModelManager from '../src/ModelManager';
16 | import {
17 | dispatchRouteChanged, getModelPath, getRouteFilters, initModelRouter, isModelRouterEnabled, isRouteExcluded, routeModel, RouterModes
18 | } from '../src/ModelRouter';
19 | import { PathUtils } from '../src/PathUtils';
20 |
21 | let metaProps: { [key: string]: string } = {};
22 | const modelManagerSpy: jest.SpyInstance> = jest.spyOn(ModelManager, 'getData');
23 |
24 | describe('ModelRouter ->', () => {
25 | const DEFAULT_PAGE_MODEL_PATH = window.location.pathname.replace(/\.htm(l)?$/, '');
26 | const TEST_PATH = '/test';
27 | const TEST_MODEL = { test: 'model' };
28 | const MODEL_ROUTE_FILTERS = [ 'f1', 'f2', 'f3' ];
29 | const MODEL_ROUTE_FILTERS_STR = MODEL_ROUTE_FILTERS.join(',');
30 |
31 | beforeEach(() => {
32 | metaProps = {};
33 | jest.spyOn(PathUtils, 'getMetaPropertyValue').mockImplementation((val) => metaProps[val]);
34 | });
35 |
36 | describe('getModelPath ->', () => {
37 | it('should get the current window URL', () => {
38 | expect(getModelPath()).toEqual(DEFAULT_PAGE_MODEL_PATH);
39 | });
40 |
41 | it('should get the current window URL', () => {
42 | expect(getModelPath('/path.model.json')).toEqual('/path');
43 | });
44 |
45 | it('should get the current window URL', () => {
46 | expect(getModelPath('/zyx/abc?test=test')).toEqual('/zyx/abc');
47 | });
48 |
49 | it('should get the current window URL', () => {
50 | expect(getModelPath('/zyx/abc?date=03.10.2021')).toEqual('/zyx/abc');
51 | });
52 | it('should return null', () => {
53 | const isBrowserSpy = jest.spyOn(PathUtils, 'isBrowser').mockImplementation(() => false);
54 |
55 | expect(getModelPath()).toBeNull();
56 | isBrowserSpy.mockRestore();
57 | });
58 | });
59 |
60 | describe('dispatchRouteChanged ->', () => {
61 | beforeEach(() => {
62 | modelManagerSpy.mockResolvedValue(TEST_MODEL as Model);
63 | });
64 |
65 | afterEach(() => {
66 | modelManagerSpy.mockReset();
67 | });
68 |
69 | it('should get the current window URL', () => {
70 | dispatchRouteChanged(TEST_PATH);
71 | expect(modelManagerSpy).toHaveBeenCalledWith({ path: TEST_PATH });
72 | });
73 | });
74 |
75 | describe('routeModel ->', () => {
76 | beforeEach(() => {
77 | modelManagerSpy.mockResolvedValue(TEST_MODEL as Model);
78 | });
79 |
80 | afterEach(() => {
81 | modelManagerSpy.mockReset();
82 | });
83 |
84 | it('should route the model based on the window URL', () => {
85 | const { location } = window;
86 |
87 | // @ts-ignore
88 | delete window.location;
89 |
90 | // @ts-ignore
91 | window.location = {
92 | pathname: '/some/path/name'
93 | };
94 |
95 | routeModel();
96 | expect(modelManagerSpy).toHaveBeenCalledWith({ path: '/some/path/name' });
97 |
98 | window.location = location;
99 | });
100 |
101 | it('should route the model based on provided path', () => {
102 | routeModel(TEST_PATH);
103 | expect(modelManagerSpy).toHaveBeenCalledWith({ path: TEST_PATH });
104 | });
105 | });
106 |
107 | describe('getRouteFilters ->', () => {
108 | afterEach(() => {
109 | metaProps = {};
110 | });
111 |
112 | it('should return an empty list of route filters', () => {
113 | expect(getRouteFilters()).toEqual([]);
114 | });
115 |
116 | it('should return a list of route filters', () => {
117 | metaProps[MetaProperty.PAGE_MODEL_ROUTE_FILTERS] = MODEL_ROUTE_FILTERS_STR;
118 | expect(getRouteFilters()).toEqual(expect.arrayContaining(MODEL_ROUTE_FILTERS));
119 | });
120 | });
121 |
122 | describe('isModelRouterEnabled ->', () => {
123 | afterEach(() => {
124 | metaProps = {};
125 | });
126 |
127 | it('should return an enabled route model by default', () => {
128 | expect(isModelRouterEnabled()).toEqual(true);
129 | });
130 |
131 | it('should return a disabled route model', () => {
132 | metaProps[MetaProperty.PAGE_MODEL_ROUTER] = RouterModes.DISABLED;
133 |
134 | expect(isModelRouterEnabled()).toEqual(false);
135 | });
136 | });
137 |
138 | describe('isRouteExcluded ->', () => {
139 | afterEach(() => {
140 | metaProps = {};
141 | });
142 |
143 | it('should filter a route', () => {
144 | expect(isRouteExcluded(MODEL_ROUTE_FILTERS[0])).toEqual(false);
145 | expect(isRouteExcluded(MODEL_ROUTE_FILTERS[1])).toEqual(false);
146 | expect(isRouteExcluded(MODEL_ROUTE_FILTERS[2])).toEqual(false);
147 | });
148 |
149 | it('should filter a route', () => {
150 | metaProps[MetaProperty.PAGE_MODEL_ROUTE_FILTERS] = MODEL_ROUTE_FILTERS_STR;
151 |
152 | expect(isRouteExcluded(MODEL_ROUTE_FILTERS[0])).toEqual(true);
153 | expect(isRouteExcluded(MODEL_ROUTE_FILTERS[1])).toEqual(true);
154 | expect(isRouteExcluded(MODEL_ROUTE_FILTERS[2])).toEqual(true);
155 | });
156 | });
157 |
158 | describe('router model on history ->', () => {
159 | const originalLocation = window.location;
160 |
161 | beforeEach(() => {
162 | initModelRouter();
163 | modelManagerSpy.mockResolvedValue(TEST_MODEL as Model);
164 | });
165 |
166 | afterAll(() => {
167 | Object.defineProperty(window, 'location', { configurable: true, value: originalLocation });
168 | modelManagerSpy.mockReset();
169 | });
170 | it('should fetch model on history push', () => {
171 | window.history.pushState({}, '', '/test');
172 | expect(modelManagerSpy).toHaveBeenCalledWith({ path: '/test' });
173 | });
174 | it('should fetch model on history replace', () => {
175 | window.history.replaceState({}, '', '/test');
176 | expect(modelManagerSpy).toHaveBeenCalledWith({ path: '/test' });
177 | });
178 | it('should fetch model on history pop', () => {
179 | Object.defineProperty(window, 'location', {
180 | configurable: true,
181 | value: { pathname: '/test' }
182 | });
183 | window.dispatchEvent(new Event('popstate'));
184 | expect(modelManagerSpy).toHaveBeenCalledWith({ path: '/test' });
185 | });
186 |
187 | });
188 | });
189 |
--------------------------------------------------------------------------------
/src/AuthoringUtils.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2020 Adobe. All rights reserved.
3 | * This file is licensed to you under the Apache License, Version 2.0 (the "License");
4 | * you may not use this file except in compliance with the License. You may obtain a copy
5 | * of the License at http://www.apache.org/licenses/LICENSE-2.0
6 | *
7 | * Unless required by applicable law or agreed to in writing, software distributed under
8 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9 | * OF ANY KIND, either express or implied. See the License for the specific language
10 | * governing permissions and limitations under the License.
11 | */
12 |
13 | import { AEM_MODE } from './Constants';
14 | import { PathUtils } from './PathUtils';
15 | import MetaProperty from './MetaProperty';
16 |
17 | export class AuthoringUtils {
18 | private readonly _apiDomain: string | null;
19 |
20 | /**
21 | * Base path for editor clientlibs.
22 | */
23 | public static readonly EDITOR_CLIENTLIB_PATH = '/etc.clientlibs/cq/gui/components/authoring/editors/clientlibs/';
24 |
25 | /**
26 | * Authoring libraries.
27 | */
28 | public static readonly AUTHORING_LIBRARIES = {
29 | JS: [
30 | AuthoringUtils.EDITOR_CLIENTLIB_PATH + 'internal/messaging.js',
31 | AuthoringUtils.EDITOR_CLIENTLIB_PATH + 'utils.js',
32 | AuthoringUtils.EDITOR_CLIENTLIB_PATH + 'internal/page.js',
33 | AuthoringUtils.EDITOR_CLIENTLIB_PATH + 'internal/pagemodel/messaging.js'
34 | ],
35 | CSS: [
36 | AuthoringUtils.EDITOR_CLIENTLIB_PATH + 'internal/page.css'
37 | ],
38 | META: {
39 | [MetaProperty.WCM_DATA_TYPE]: 'JSON'
40 | }
41 | };
42 |
43 | /**
44 | * @private
45 | */
46 | constructor(domain: string | null) {
47 | this._apiDomain = domain;
48 | }
49 |
50 | /**
51 | * @private
52 | */
53 | getApiDomain(): string | null {
54 | return this._apiDomain;
55 | }
56 |
57 | /**
58 | * Generates