Skip to content

Commit

Permalink
MWPW-158389: aem client updates for content-navigation wc (#2902)
Browse files Browse the repository at this point in the history
* content navigation

* fix tests

* update builds

* fix codecov

* update spectrum version

* ignore line for codecov

* ignore line for codecov

* remove ignore line for codecov

* update tests

* fix tests and regression slot resizing

* PR feedbacks

* fix code coverage by removing dead code

* fix code coverage by removing dead code

* fix code coverage by removing dead code

* update import

* update import
  • Loading branch information
yesil committed Sep 24, 2024
1 parent 58b3850 commit f70f94b
Show file tree
Hide file tree
Showing 66 changed files with 2,242 additions and 2,055 deletions.
2 changes: 1 addition & 1 deletion libs/blocks/merch-card/merch-card.js
Original file line number Diff line number Diff line change
Expand Up @@ -420,7 +420,7 @@ const addStartingAt = async (styles, merchCard) => {
if (styles.includes('starting-at')) {
const { replaceKey } = await import('../../features/placeholders.js');
await replaceKey('starting-at', getConfig()).then((key) => {
const startingAt = createTag('div', { slot: 'starting-at' }, key);
const startingAt = createTag('div', { class: 'starting-at' }, key);
const price = merchCard.querySelector('span[is="inline-price"]');
if (price) {
price.parentNode.prepend(startingAt);
Expand Down
2,193 changes: 1,100 additions & 1,093 deletions libs/deps/mas/mas.js

Large diffs are not rendered by default.

117 changes: 64 additions & 53 deletions libs/deps/mas/merch-card.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion libs/deps/mas/merch-datasource.js

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion libs/deps/mas/merch-offer-select.js
Original file line number Diff line number Diff line change
Expand Up @@ -246,4 +246,3 @@ import{html as h,LitElement as g}from"../lit-all.min.js";import{css as u,html as
></sp-tooltip>
</sp-overlay>
</div>`}render(){return this.configuration||!this.price?"":this.type==="subscription-option"?this.asSubscriptionOption:this.asRadioOption}get price(){return this.querySelector('span[is="inline-price"]:not([data-template="strikethrough"])')}get cta(){return this.querySelector('a[is="checkout-link"]')}get prices(){return this.querySelectorAll('span[is="inline-price"]')}get customerSegment(){return this.price?.value?.[0].customerSegment}get marketSegment(){return this.price?.value?.[0].marketSegments[0]}async initOffer(){if(!this.price)return;this.prices.forEach(t=>t.setAttribute("slot","price")),await this.updateComplete,await Promise.all([...this.prices].map(t=>t.onceSettled()));let{value:[e]}=this.price;this.planType=e.planType,await this.updateComplete,this.dispatchEvent(new CustomEvent(o,{bubbles:!0}))}};customElements.define(x,c);
//# sourceMappingURL=merch-offer-select.js.map
8 changes: 4 additions & 4 deletions libs/features/mas/mas/src/mas.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { init } from '@adobe/mas-commerce';
import '@adobe/mas-web-components/src/merch-card.js';
import '@adobe/mas-web-components/src/merch-icon.js';
import '@adobe/mas-web-components/src/merch-datasource.js';
import { init } from '../../commerce/src/index.js';
import '../../web-components/src/merch-card.js';
import '../../web-components/src/merch-icon.js';
import '../../web-components/src/merch-datasource.js';

const { searchParams } = new URL(import.meta.url);
const locale = searchParams.get('locale') ?? 'US_en';
Expand Down
70 changes: 33 additions & 37 deletions libs/features/mas/web-components/build.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -3,60 +3,56 @@ import { build } from 'esbuild';

const outfolder = '../../../../libs/deps/mas';

const defaults = {
bundle: true,
format: 'esm',
minify: true,
// sourcemap: true,
platform: 'browser',
};

async function buildLitComponent(name) {
const { metafile } = await build({
bundle: true,
...defaults,
entryPoints: [`./src/${name}.js`],
external: ['lit'],
format: 'esm',
metafile: true,
minify: true,
platform: 'browser',
outfile: `${outfolder}/${name}.js`,
plugins: [rewriteImports()],
// sourcemap: true,
});

writeFileSync(`../../../../libs/deps/mas/${name}.json`, JSON.stringify(metafile));
writeFileSync(
`../../../../libs/deps/mas/${name}.json`,
JSON.stringify(metafile),
);
}

Promise.all([
build({
bundle: true,
...defaults,
stdin: { contents: '' },
inject: [
'./src/merch-card.js',
'./src/merch-icon.js',
],
format: 'esm',
minify: true,
inject: ['./src/merch-card.js', './src/merch-icon.js'],
outfile: `${outfolder}/merch-card.js`,
plugins: [rewriteImports()],
}),
build({
bundle: true,
...defaults,
stdin: { contents: '' },
inject: ['./src/merch-offer.js', './src/merch-offer-select.js'],
format: 'esm',
minify: true,

outfile: `${outfolder}/merch-offer-select.js`,
sourcemap: true,
plugins: [rewriteImports()],
}),
build({
bundle: true,
...defaults,
entryPoints: ['./src/merch-card-collection.js'],
format: 'esm',
minify: true,
plugins: [rewriteImports()],
outfile: `${outfolder}/merch-card-collection.js`,
}),
build({
...defaults,
entryPoints: ['./src/sidenav/merch-sidenav.js'],
bundle: true,
minify: true,
outfile: `${outfolder}/merch-sidenav.js`,
format: 'esm',
plugins: [rewriteImportsToLibsFolder()],
external: ['lit'],
}),
Expand All @@ -71,11 +67,11 @@ Promise.all([
buildLitComponent('merch-datasource'),
]).catch(() => process.exit(1));

function rewriteImports(rew) {
function rewriteImports() {
return {
name: 'rewrite-imports',
setup(build) {
build.onResolve({ filter: /^lit(\/.*)?$/ }, (args) => {
build.onResolve({ filter: /^lit(\/.*)?$/ }, () => {
return {
path: '../lit-all.min.js',
external: true,
Expand All @@ -85,16 +81,16 @@ function rewriteImports(rew) {
};
}

function rewriteImportsToLibsFolder(rew) {
return {
name: 'rewrite-imports-to-libs-folder',
setup(build) {
build.onResolve({ filter: /^lit(\/.*)?$/ }, (args) => {
return {
path: '/libs/deps/lit-all.min.js',
external: true,
};
});
},
};
function rewriteImportsToLibsFolder() {
return {
name: 'rewrite-imports-to-libs-folder',
setup(build) {
build.onResolve({ filter: /^lit(\/.*)?$/ }, () => {
return {
path: '/libs/deps/lit-all.min.js',
external: true,
};
});
},
};
}
138 changes: 138 additions & 0 deletions libs/features/mas/web-components/src/aem-datasource.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
import { AEM } from './aem.js';

const ATTR_AEM_BUCKET = 'aem-bucket';
const AEM_BUCKET = 'publish-p22655-e155390';

class FragmentCache {
#fragmentCache = new Map();

clear() {
this.#fragmentCache.clear();
}

add(...items) {
items.forEach((item) => {
const { path } = item;
if (path) {
this.#fragmentCache.set(path, item);
}
});
}

has(path) {
return this.#fragmentCache.has(path);
}

get(path) {
return this.#fragmentCache.get(path);
}

remove(path) {
this.#fragmentCache.delete(path);
}
}
const cache = new FragmentCache();

/**
* Custom element representing a AemDataSource.
*
* @attr {string} path - fragment path
*/
export class AemDataSource extends HTMLElement {
/**
* @type {import('@adobe/mas-web-components').AEM}
*/
#aem;

cache = cache;

/**
* @type {import('@adobe/mas-web-components').Fragment}
*/
item;

/**
* @type {HtmlElement[]}
*/
refs = [];

/**
* @type {string} fragment path
*/
path;

/**
* Consonant styling for CTAs.
*/
consonant = false;

/**
* Internal promise to track the readiness of the web-component to render.
*/
_readyPromise;

static get observedAttributes() {
return ['path'];
}

attributeChangedCallback(name, oldValue, newValue) {
this[name] = newValue;
}

connectedCallback() {
this.consonant = this.hasAttribute('consonant');
this.clearRefs();
const bucket = this.getAttribute(ATTR_AEM_BUCKET) ?? AEM_BUCKET;
this.#aem = new AEM(bucket);
this.refresh(false);
}

clearRefs() {
this.refs.forEach((ref) => {
ref.remove();
});
}

async refresh(flushCache = true) {
if (!this.path) return;

if (this._readyPromise) {
const ready = await Promise.race([
this._readyPromise,
Promise.resolve(false),
]);
if (!ready) return; // already fetching data
}

this.clearRefs();
this.refs = [];
if (flushCache) {
this.cache.remove(this.path);
}
this._readyPromise = this.fetchData().then(() => true);
}

async fetchData() {
let item = cache.get(this.path);
if (!item) {
item = await this.#aem.sites.cf.fragments.getByPath(this.path);
cache.add(item);
}
this.item = item;
this.render();
}

get updateComplete() {
return (
this._readyPromise ??
Promise.reject(new Error('datasource is not correctly configured'))
);
}

/* c8 ignore next 3 */
async render() {
// abstract method
}
}

customElements.define('aem-datasource', AemDataSource);
Loading

0 comments on commit f70f94b

Please sign in to comment.