News Site Nuxt - Article Ids

[flashdesignory]

This is an alternate solution for: #427

The reason to keep creating unique ids, is that it'll allow us to potentially opt into a complexity param (#430), which could append content by cloning the sections in the data file. This is only possible, if we don't hard-code list ids in the data file (which was the previous solution).

Here, I am just creating the unique ids once, when the data gets assigned to the app, instead of the currently used version that had issues (#422).

Difference to the Next.js version:
You'll notice that the article-content already uses article.id in some instances in the main branch - this is not throwing any errors, but does assign undefined, since the article.id doesn't exist unless we create it somewhere (which is now done in the pr branch).

note: feel free to ignore the dist folder - that's just the generated build files

Crossbench - 10 iterations:

this pr

browser			Safari                    Firefox                Google Chrome
NewsSite-Nuxt  		61.10 ± 1.1%              67.35 ± 1.4%           60.95 ± 0.66%
NewsSite-Next  		58.98 ± 1.5%              78.5 ± 1.6%            75.4 ± 1.7%
Score          		16.72 ± 0.79%             13.80 ± 1.1%           14.78 ± 1.00%

main

browser			Safari                    Firefox                Google Chrome
NewsSite-Nuxt  		62.2 ± 2.6%               67.4 ± 1.7%            61.45 ± 1.2%
NewsSite-Next  		59.86 ± 1.4%              78.81 ± 1.2%           75.7 ± 2.1%
Score          		16.46 ± 1.8%              13.76 ± 1.0%           14.69 ± 1.5%

[julienw]

The general approach looks good to me, but we need to avoid touching the original singleton to avoid surprises in the future.

Using map with some object spread operators should also make it more explicit that we're not touching it.

Thanks!

[julienw]

thanks!
note you'll need to rebase and regenerate the dist

[julienw]

I wanted to (optionally) suggest this:

Suggested change

	const currentItem = { ...item };
	currentItem.id = uuidv4();
	return currentItem;
	return {
	...item,
	id: uuidv4();
	};

but I'm not sure this looks better.

[flashdesignory]

I know what you mean. I think I'd rather keep things consistent (visually) and treat currentArticle and currentItem the same way.

[rniwa]

Seems sane to me.