Page MenuHomePhabricator
Paste P62264

common.js to reproduce T364518
ActivePublic

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' );
} );