Merge pull request #2985 from nextcloud/fix/noid/render-h

Rename createElement to h for future vue3
nextcloud-libraries · Aug 9, 2022 · 7dfdcb5 · 7dfdcb5
2 parents 01454dc + 0a69f94
commit 7dfdcb5
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 24 deletions.
diff --git a/src/components/AppSettingsDialog/AppSettingsDialog.vue b/src/components/AppSettingsDialog/AppSettingsDialog.vue
@@ -250,21 +250,21 @@ export default {
 		},
 	},
 
-	render(createElement) {
+	render(h) {
 		/**
 		 * Build the navigation
 		 *
 		 * @return {object} the navigation
 		 */
 		const createAppSettingsNavigation = () => {
 			if (this.hasNavigation) {
-				return [createElement('div', {
+				return [h('div', {
 					attrs: {
 						class: 'app-settings__navigation',
 						role: 'tablist',
 						'aria-label': this.settingsNavigationAriaLabel,
 					},
-				}, [createElement('ul', {
+				}, [h('ul', {
 					attrs: {
 						class: 'navigation-list',
 						role: 'tablist',
@@ -283,7 +283,7 @@ export default {
 		 * @param {object} item the navigation item
 		 * @return {object} the list element
 		 */
-		const createListElement = (item) => createElement('li', {}, [createElement('a', {
+		const createListElement = (item) => h('li', {}, [h('a', {
 			class: {
 				'navigation-list__link': true,
 				'navigation-list__link--active': item.id === this.selectedSection,
@@ -303,7 +303,7 @@ export default {
 
 		// Return value of the render function
 		if (this.open) {
-			return createElement('Modal', {
+			return h('Modal', {
 				attrs: {
 					container: this.container,
 					size: 'large',
@@ -313,22 +313,22 @@ export default {
 				},
 			}, [
 				// main app-settings root element
-				createElement('div', {
+				h('div', {
 					attrs: {
 						class: 'app-settings',
 					},
 				}, [
 					// app-settings title
 					this.title
-						? createElement('h2', {
+						? h('h2', {
 							attrs: {
 								class: 'app-settings__title',
 							},
 						}, this.title)
 						: undefined,
 
 					// app-settings navigation + content
-					createElement(
+					h(
 						'div',
 						{
 							attrs: {
@@ -337,7 +337,7 @@ export default {
 						},
 						[
 							...createAppSettingsNavigation(),
-							createElement('div', {
+							h('div', {
 								attrs: {
 									class: 'app-settings__content',
 								},

diff --git a/src/components/Breadcrumbs/Breadcrumbs.vue b/src/components/Breadcrumbs/Breadcrumbs.vue
@@ -467,10 +467,10 @@ export default {
 	/**
 	 * The render function to display the component
 	 *
-	 * @param {Function} createElement The function to create VNodes
+	 * @param {Function} h The function to create VNodes
 	 * @return {VNodes} The created VNodes
 	 */
-	render(createElement) {
+	render(h) {
 		// Get the breadcrumbs
 		const breadcrumbs = this.$slots.default || []
 
@@ -498,7 +498,7 @@ export default {
 		// The Actions menu
 		if (this.hiddenCrumbs.length) {
 			// Use a breadcrumb component for the hidden breadcrumbs
-			crumbs.push(createElement('Breadcrumb', {
+			crumbs.push(h('Breadcrumb', {
 				class: 'dropdown',
 
 				props: this.menuBreadcrumbProps,
@@ -532,13 +532,13 @@ export default {
 					element = 'ActionRouter'
 					path = to
 				}
-				const folderIcon = createElement('IconFolder', {
+				const folderIcon = h('IconFolder', {
 					props: {
 						size: 20,
 					},
 					slot: 'icon',
 				})
-				return createElement(element, {
+				return h(element, {
 					class: crumbClass,
 					props: {
 						to,
@@ -570,13 +570,13 @@ export default {
 		this.hideCrumbs(crumbs2, crumbs1.length)
 
 		const wrapper = []
-		wrapper.push(createElement('div', { class: 'breadcrumb__crumbs' }, crumbs))
+		wrapper.push(h('div', { class: 'breadcrumb__crumbs' }, crumbs))
 		// Append the actions slot if it is populated
 		if (this.$slots.actions) {
-			wrapper.push(createElement('div', { class: 'breadcrumb__actions', ref: 'breadcrumb__actions' }, this.$slots.actions))
+			wrapper.push(h('div', { class: 'breadcrumb__actions', ref: 'breadcrumb__actions' }, this.$slots.actions))
 		}
 
-		return createElement('div', { class: ['breadcrumb', { 'breadcrumb--collapsed': (this.hiddenCrumbs.length === breadcrumbs.length - 2) }], ref: 'container' }, wrapper)
+		return h('div', { class: ['breadcrumb', { 'breadcrumb--collapsed': (this.hiddenCrumbs.length === breadcrumbs.length - 2) }], ref: 'container' }, wrapper)
 	},
 }
 </script>

diff --git a/src/components/Highlight/Highlight.vue b/src/components/Highlight/Highlight.vue
@@ -210,16 +210,16 @@ export default {
 	/**
 	 * The render function to display the component
 	 *
-	 * @param {Function} createElement The function to create VNodes
+	 * @param {Function} h The function to create VNodes
 	 * @return {VNodes} The created VNodes
 	 */
-	render(createElement) {
+	render(h) {
 		if (!this.ranges.length) {
-			return createElement('span', {}, this.text)
+			return h('span', {}, this.text)
 		}
 
-		return createElement('span', {}, this.chunks.map(chunk => {
-			return chunk.highlight ? createElement('strong', {}, chunk.text) : chunk.text
+		return h('span', {}, this.chunks.map(chunk => {
+			return chunk.highlight ? h('strong', {}, chunk.text) : chunk.text
 		}))
 	},
 }

diff --git a/src/components/VNodes/VNodes.vue b/src/components/VNodes/VNodes.vue
@@ -27,11 +27,11 @@ export default {
 	/**
 	 * The render function to display the component
 	 *
-	 * @param {Function} createElement The function to create VNodes
+	 * @param {Function} h The function to create VNodes
 	 * @param {object} context The context object of the functional component
 	 * @return {VNodes} The created VNodes
 	 */
-	render(createElement, context) {
+	render(h, context) {
 		return context.props.vnodes
 	},
 }