Populate fixtures using Vue 3

Based on <https://vuejs.org/guide/scaling-up/ssr.html#rendering-an-app>.

Author: lucaswerkmeister

package.json

@@ -1,10 +1,8 @@
 {
 	"name": "php-vuejs-templating",
-	"dependencies": {},
 	"devDependencies": {
-		"vue": "^2.3.4",
-		"vue-server-renderer": "^2.3.4",
-		"cheerio": "^0.22.0"
+		"cheerio": "^0.22.0",
+		"vue": "^3.2.41"
 	},
 	"scripts": {
 		"populate-fixtures": "node tests/integration/populate_fixtures_with_expected_results.js"

tests/integration/fixture/gloss_widget.html

@@ -45,5 +45,5 @@
 </script>
 <div id="result">
 	<!-- generated by `npm run-script populate-fixtures` -->
-	<div class="wikibase-lexeme-sense-glosses"><div class="wikibase-lexeme-sense-glosses-list"><table class="wikibase-lexeme-sense-glosses-table"><tbody><tr class="wikibase-lexeme-sense-gloss"><td class="wikibase-lexeme-sense-gloss-language"><span>en</span></td> <td class="wikibase-lexeme-sense-gloss-value"><span dir="auto" lang="en">english gloss <span class="wikibase-lexeme-sense-glosses-sense-id">(S1)</span></span></td></tr><tr class="wikibase-lexeme-sense-gloss"><td class="wikibase-lexeme-sense-gloss-language"><span>fr</span></td> <td class="wikibase-lexeme-sense-gloss-value"><span dir="auto" lang="fr">french gloss <span class="wikibase-lexeme-sense-glosses-sense-id">(S1)</span></span></td></tr></tbody> <!----></table></div> <div class="wikibase-lexeme-sense-glosses-controls"><button type="button" class="wikibase-lexeme-sense-glosses-control">wikibase-edit</button> <!----> <!----></div></div>
+	<div class="wikibase-lexeme-sense-glosses"><div class="wikibase-lexeme-sense-glosses-list"><table class="wikibase-lexeme-sense-glosses-table"><tbody><!--[--><tr class="wikibase-lexeme-sense-gloss"><td class="wikibase-lexeme-sense-gloss-language"><span>en</span></td><td class="wikibase-lexeme-sense-gloss-value"><span dir="auto" lang="en">english gloss <span class="wikibase-lexeme-sense-glosses-sense-id">(S1)</span></span></td></tr><tr class="wikibase-lexeme-sense-gloss"><td class="wikibase-lexeme-sense-gloss-language"><span>fr</span></td><td class="wikibase-lexeme-sense-gloss-value"><span dir="auto" lang="fr">french gloss <span class="wikibase-lexeme-sense-glosses-sense-id">(S1)</span></span></td></tr><!--]--></tbody><!----></table></div><div class="wikibase-lexeme-sense-glosses-controls"><button type="button" class="wikibase-lexeme-sense-glosses-control">wikibase-edit</button><!----><!----></div></div>
 </div>

tests/integration/fixture/lemma_widget.html

@@ -45,5 +45,5 @@
 </script>
 <div id="result">
 	<!-- generated by `npm run-script populate-fixtures` -->
-	<div class="lemma-widget"><ul class="lemma-widget_lemma-list"><li class="lemma-widget_lemma"><span class="lemma-widget_lemma-value">lemma1</span> <span class="lemma-widget_lemma-language">en</span></li><li class="lemma-widget_lemma"><span class="lemma-widget_lemma-value">lémma2</span> <span class="lemma-widget_lemma-language">fr</span></li><li class="lemma-widget_lemma"><span class="lemma-widget_lemma-value">기본형</span> <span class="lemma-widget_lemma-language">ko</span></li><li class="lemma-widget_lemma"><span class="lemma-widget_lemma-value">Лемма</span> <span class="lemma-widget_lemma-language">ru</span></li><li class="lemma-widget_lemma"><span class="lemma-widget_lemma-value">لليما</span> <span class="lemma-widget_lemma-language">ar</span></li></ul> <div class="lemma-widget_controls"><button type="button" class="lemma-widget_control">wikibase-edit</button> <!----> <!----></div></div>
+	<div class="lemma-widget"><ul class="lemma-widget_lemma-list"><!--[--><li class="lemma-widget_lemma"><span class="lemma-widget_lemma-value">lemma1</span><span class="lemma-widget_lemma-language">en</span></li><li class="lemma-widget_lemma"><span class="lemma-widget_lemma-value">lémma2</span><span class="lemma-widget_lemma-language">fr</span></li><li class="lemma-widget_lemma"><span class="lemma-widget_lemma-value">기본형</span><span class="lemma-widget_lemma-language">ko</span></li><li class="lemma-widget_lemma"><span class="lemma-widget_lemma-value">Лемма</span><span class="lemma-widget_lemma-language">ru</span></li><li class="lemma-widget_lemma"><span class="lemma-widget_lemma-value">لليما</span><span class="lemma-widget_lemma-language">ar</span></li><!--]--></ul><div class="lemma-widget_controls"><button type="button" class="lemma-widget_control">wikibase-edit</button><!----><!----></div></div>
 </div>

tests/integration/fixture/simple.html

@@ -9,5 +9,5 @@
 </script>
 <div id="result">
 	<!-- generated by `npm run-script populate-fixtures` -->
-	<div><p></p> <div><a href="URL">link</a></div></div>
+	<div><p></p><div><a href="URL">link</a></div></div>
 </div>

tests/integration/populate_fixtures_with_expected_results.js

@@ -1,6 +1,6 @@
-var Vue = require( 'vue' );
+const { createSSRApp } = require( 'vue' );
 const cheerio = require( 'cheerio' );
-const renderer = require( 'vue-server-renderer' ).createRenderer();
+const { renderToString } = require( 'vue/server-renderer' );
 const fs = require( 'fs' );
 
 const fixtureDir = __dirname + '/fixture';
@@ -37,21 +37,13 @@ function extractDataFromFixture( html ) {
 }
 
 function renderTemplate( fixtureData ) {
-	return new Promise( function ( resolve, reject ) {
-		const app = new Vue( {
-			template: fixtureData.template,
-			data: fixtureData.data,
-			methods: defaultMethods
-		} );
-
-		renderer.renderToString( app, function ( err, html ) {
-			if ( err ) {
-				reject( err )
-			} else {
-				resolve( html );
-			}
-		} );
+	const app = createSSRApp( {
+		template: fixtureData.template,
+		data: () => fixtureData.data,
+		methods: defaultMethods
 	} );
+
+	return renderToString( app );
 }
 
 function removeServerRenderedDataAttribute( html ) {