common.js to reproduce T364518
ActivePublic
Actions

Authored by Sportzpikachu on May 9 2024, 6:45 PM.

Tags

None

Referenced Files

	F51489788: common.js to reproduce T364518
	May 9 2024, 6:45 PM

Subscribers

None

	mw.loader.using( [ 'vue', 'pinia' ], ( require ) => {
	const vue = require( 'vue' );
	// vue-demi fix, uncomment to enable
	/*
	vue.set = function ( target, key, val ) {
	if ( Array.isArray( target ) ) {
	target.length = Math.max( target.length, key );
	target.splice( key, 1, val );
	return val;
	}
	target[ key ] = val;
	return val;
	};

	vue.del = function ( target, key ) {
	if ( Array.isArray( target ) ) {
	target.splice( key, 1 );
	return;
	}
	delete target[ key ];
	};
	*/

	const pinia = require( 'pinia' );

	const useCounter = pinia.defineStore( 'counter', () => {
	const count = vue.ref( 0 );
	const increment = () => count.value++;
	return { count, increment };
	} );

	const app = vue.createMwApp( {
	setup() {
	const counter = useCounter();

	return () => vue.h( 'button', { onClick: () => counter.increment() }, [
	'Count: ',
	counter.count,
	] );
	},
	} );

	app.use( pinia.createPinia() );
	app.mount( '#app' );

	const hot = {
	data: {},
	};
	const hmr = pinia.acceptHMRUpdate( useCounter, hot );

	$( '<button>Trigger HMR</button>' ).one( 'click', () => {
	hmr( {
	useCounter: pinia.defineStore( 'counter', () => {
	const count = vue.ref( 0 );
	const increment = () => ( count.value += 2 );
	return { count, increment };
	} ),
	} );
	} ).insertAfter( '#app' );
	} );

Event Timeline