Note that Special:NewLexeme already uses a partial Vue 3 build of Wikit, not the Vue 2 version. (I say “partial” because this version of Wikit only includes the components we needed in Special:NewLexeme and is missing some others. But it’s fully Vue 3 with no trace of Vue 2 AFAIK.)

Prio Notes:

Change #1071651 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):

[mediawiki/extensions/WikibaseLexeme@master] POC: Start using codex in special-new-lexeme

https://gerrit.wikimedia.org/r/1071651

I think the feasibility looks pretty good:

• https://github.com/wmde/new-lexeme-special-page/pull/745
• https://gerrit.wikimedia.org/r/c/mediawiki/extensions/WikibaseLexeme/ /1071651

This already works as far as I can tell (though there are some TODOs left), both in the dev entry point and on-wiki. Codex is referenced as a separate library and loaded via ResourceLoader, just like Vue and Vuex.

Change #1071845 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):

[mediawiki/extensions/WikibaseLexeme@master] POC: Start using Codex design tokens in special-new-lexeme

https://gerrit.wikimedia.org/r/1071845

Yesterday’s work was missing the design tokens, but I think I found a solution for that as well – I attached it to the same pull request as a separate commit.

In T369505#10133314, @Lucas_Werkmeister_WMDE wrote:

Yesterday’s work was missing the design tokens, but I think I found a solution for that as well – I attached it to the same pull request as a separate commit.

Nope, that’s not working properly yet. In (legacy) Vector, all four border CSS variables are undefined:

Whereas in Vector 2022, --border-color-muted is defined but the other three remain undefined:

I haven’t been able to figure out yet what determines which design tokens are available as CSS variables and which aren’t.

In T369505#10133727, @Lucas_Werkmeister_WMDE wrote:

I haven’t been able to figure out yet what determines which design tokens are available as CSS variables and which aren’t.

Found it:

export function shouldExposeCustomProperty( token ) {
	const includedProps = [
		'color',
		'background-color',
		'border-color',
		'filter',
		'opacity-icon'
	];
	// Exclude all option tokens
	if ( token.attributes?.type === 'theme' ) {
		return false;
	}
	return token.path.some( ( element ) => includedProps.includes( element ) );
}

So everything that’s a color, filter, or opacity-icon(?) gets exported (unless it’s themed?), and everything else doesn’t,

I think that pretty much kills the idea of using CSS variables for the Codex design tokens :/ so I guess we have to import them in our SASS/SCSS stylesheets, and they’ll be inlined into the built stylesheets, and we’ll just have to rebuild new-lexeme-special-page after every Codex update and see if the output changes?

Change #1071904 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):

[mediawiki/extensions/WikibaseLexeme@master] Set up Codex in special-new-lexeme

https://gerrit.wikimedia.org/r/1071904

Change #1071905 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):

[mediawiki/extensions/WikibaseLexeme@master] POC: Use Codex in NewLexemeForm

https://gerrit.wikimedia.org/r/1071905

Do we need to change anything so that we can use Codex in this environment?

A bit, but it’s not too bad – I implemented the necessary changes above.

If so, what steps need to be taken?

See above.

What is the level of effort required to use Codex components on MediaWiki?

I’m not sure what this refers to. For future development, I think the level of effort to use existing components is the same for Wikit and Codex; if we need changes or new components, it’s at this point probably easier to change Codex than the Vue 3 version of Wikit. The migration from Wikit to Codex will take some work, but so far it looks like it shouldn’t be too much.

What are the blockers and constraints?

No blockers as far as I’m aware. Constraints: with the patches listed above, we reference MediaWiki’s version of Codex components, but inline Codex design tokens into our CSS. This means that when a new version of Codex is released and used in MediaWiki, we’ll automatically use the new components, but any changed design tokens will only take effect after we update the library in new-lexeme-special-page and update the build in WikibaseLexeme. (I think this is an acceptable limitation.)

I'm not yet deep enough into the topic to understand whether this approach is the best / correct one, but I don't see any harm in continuing down this path and completing the rest of the tickets as planned. Thanks for the investigation!

Change #1071904 merged by jenkins-bot:

[mediawiki/extensions/WikibaseLexeme@master] Set up Codex in special-new-lexeme

https://gerrit.wikimedia.org/r/1071904

100% thanks!