User:EGardner (WMF)/codex-hello-world.js

// Add a "Codex Widgets" portlet to the main menu mw.util.addPortlet( 'p-codex', 'Codex Widgets', '#p-interaction' ); const dialogTrigger = mw.util.addPortletLink( 'p-codex', '#', 'Example Dialog Widget', 'p-codex-dialog' );

mw.loader.using( '@wikimedia/codex' ).then( function( require ) {	const Vue = require( 'vue' );	const Codex = require( '@wikimedia/codex' );	const mountPoint = document.body.appendChild( document.createElement( 'div' ) );	Vue.createMwApp( { data: function { return { showDialog: false, count: 0, codexLink: 'https://doc.wikimedia.org/codex/latest/' };		},		template: ` 				 This Dialog component comes from Codex, the new design system for Wikimedia. To learn more about Codex, check out the documentation here. Click these buttons to update the reactive count value: Count: Decrease Increase  `,		methods: { openDialog { this.showDialog = true; },			increment { this.count++; },			decrement { this.count--; }		},		mounted { dialogTrigger.addEventListener( 'click', this.openDialog ); },		unMounted { dialogTrigger.removeEventListener( this.openDialog ); }	} )	.component( 'cdx-button', Codex.CdxButton )	.component( 'cdx-dialog', Codex.CdxDialog )	.mount( mountPoint ); } );