removed renderSlot helper vom vue core causing problems and bloats bu…

…ndle size
razorness · Mar 20, 2023 · 7fc5ff0 · 7fc5ff0
1 parent a11c2e7
commit 7fc5ff0
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 59 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "vue-maplibre-gl",
-	"version": "2.0.0-alpha.5",
+	"version": "2.0.0-alpha.6",
 	"description": "Vue 3 plugin for maplibre-gl",
 	"keywords": [
 		"vue",

diff --git a/src/lib/components/button.component.ts b/src/lib/components/button.component.ts
@@ -1,5 +1,4 @@
 import { defineComponent, h, PropType, ref, warn, watch } from 'vue';
-import { renderSlot } from '@vue/runtime-core';
 
 export enum ButtonType {
 	DEFAULT     = 'default',
@@ -62,7 +61,7 @@ export default /*#__PURE__*/ defineComponent({
 	},
 	render() {
 		if (this.type === ButtonType.TEXT) {
-			return h('button', { type: 'button' }, renderSlot(this.$slots, 'default'));
+			return h('button', { type: 'button' }, this.$slots.default ? this.$slots.default() : undefined );
 		}
 		return h('button', { type: 'button', 'class': 'maplibregl-ctrl-icon' },
 			[
@@ -75,7 +74,7 @@ export default /*#__PURE__*/ defineComponent({
 					},
 					h('path', { fill: 'currentColor', d: this.path })
 				),
-				renderSlot(this.$slots, 'default')
+				this.$slots.default ? this.$slots.default() : undefined
 			]
 		);
 	}

diff --git a/src/lib/components/controls/custom.control.ts b/src/lib/components/controls/custom.control.ts
@@ -3,7 +3,6 @@ import { Position, PositionProp, PositionValues } from '@/lib/components/control
 import { ControlPosition, IControl } from 'maplibre-gl';
 import { mapSymbol } from '@/lib/types';
 import { usePositionWatcher } from '@/lib/composable/usePositionWatcher';
-import { renderSlot } from '@vue/runtime-core';
 
 
 export class CustomControl implements IControl {
@@ -80,7 +79,7 @@ export default /*#__PURE__*/ defineComponent({
 		return h(
 			Teleport as any,
 			{ to: this.container },
-			renderSlot(this.$slots, 'default')
+			this.$slots.default ? this.$slots.default() : undefined
 		);
 	}
 });
diff --git a/src/lib/components/controls/styleSwitch.control.ts b/src/lib/components/controls/styleSwitch.control.ts
@@ -1,23 +1,10 @@
-import {
-	createCommentVNode,
-	createTextVNode,
-	defineComponent,
-	h,
-	inject,
-	onBeforeUnmount,
-	PropType,
-	ref,
-	renderSlot,
-	shallowRef,
-	Teleport,
-	toRef,
-	watch
-} from 'vue';
+import { createCommentVNode, createTextVNode, defineComponent, h, inject, onBeforeUnmount, PropType, ref, shallowRef, Teleport, toRef, watch } from 'vue';
 import { Position, PositionProp, PositionValues } from '@/lib/components/controls/position.enum';
 import { emitterSymbol, isLoadedSymbol, mapSymbol, StyleSwitchItem } from '@/lib/types';
 import { CustomControl } from '@/lib/components/controls/custom.control';
-import { ButtonType, default as MglButton } from '@/lib/components/button.component';
 import { usePositionWatcher } from '@/lib/composable/usePositionWatcher';
+import { MglButton } from '@/lib/components';
+import { ButtonType } from '@/lib/components/button.component';
 
 function isEvent(e: any): e is Event {
 	return e && !!(e as Event).stopPropagation;
@@ -149,35 +136,68 @@ export default /*#__PURE__*/ defineComponent({
 		return h(
 			Teleport as any,
 			{ to: this.container },
-			renderSlot(this.$slots, 'default', slotProps, () => [
-				renderSlot(this.$slots, 'button', slotProps, () => [ h(MglButton, {
-					type   : ButtonType.MDI,
-					path   : 'M12,18.54L19.37,12.8L21,14.07L12,21.07L3,14.07L4.62,12.81L12,18.54M12,16L3,9L12,2L21,9L12,16M12,4.53L6.26,9L12,13.47L17.74,9L12,4.53Z',
-					'class': [ 'maplibregl-ctrl-icon maplibregl-style-switch', this.intIsOpen ? 'is-open' : '' ],
-					onClick: this.toggleOpen.bind(null, true)
-				}) ]),
-				renderSlot(this.$slots, 'styleList', slotProps, () => [
-					h(
-						'div',
-						{ 'class': [ 'maplibregl-style-list', this.intIsOpen ? 'is-open' : '' ] },
-						this.mapStyles.map((s) => {
-							return s.icon
-								? h(MglButton, {
-									type   : ButtonType.MDI,
-									path   : s.icon.path,
-									'class': this.intModelValue?.name === s.name ? 'is-active' : '',
-									onClick: () => this.setStyle(s)
-								}, createTextVNode(s.label))
-								: h('button', {
-									type   : 'button',
-									'class': this.intModelValue?.name === s.name ? 'is-active' : '',
-									onClick: () => this.setStyle(s)
-								}, createTextVNode(s.label));
-
-						})
-					)
-				])
-			])
+			this.$slots.default
+				? this.$slots.default(slotProps)
+				: [
+					this.$slots.button
+						? this.$slots.button(slotProps)
+						: h(MglButton, {
+							type   : ButtonType.MDI,
+							path   : 'M12,18.54L19.37,12.8L21,14.07L12,21.07L3,14.07L4.62,12.81L12,18.54M12,16L3,9L12,2L21,9L12,16M12,4.53L6.26,9L12,13.47L17.74,9L12,4.53Z',
+							'class': [ 'maplibregl-ctrl-icon maplibregl-style-switch', this.intIsOpen ? 'is-open' : '' ],
+							onClick: this.toggleOpen.bind(null, true)
+						}),
+					this.$slots.styleList
+						? this.$slots.styleList(slotProps)
+						: h(
+							'div',
+							{ 'class': [ 'maplibregl-style-list', this.intIsOpen ? 'is-open' : '' ] },
+							this.mapStyles.map((s) => {
+								return s.icon
+									? h(MglButton, {
+										type   : ButtonType.MDI,
+										path   : s.icon.path,
+										'class': this.intModelValue?.name === s.name ? 'is-active' : '',
+										onClick: () => this.setStyle(s)
+									}, createTextVNode(s.label))
+									: h('button', {
+										type   : 'button',
+										'class': this.intModelValue?.name === s.name ? 'is-active' : '',
+										onClick: () => this.setStyle(s)
+									}, createTextVNode(s.label));
+
+							})
+						)
+				]
+			// renderSlot(this.$slots, 'default', slotProps, () => [
+			// 	renderSlot(this.$slots, 'button', slotProps, () => [ h(MglButton, {
+			// 		type   : ButtonType.MDI,
+			// 		path   : 'M12,18.54L19.37,12.8L21,14.07L12,21.07L3,14.07L4.62,12.81L12,18.54M12,16L3,9L12,2L21,9L12,16M12,4.53L6.26,9L12,13.47L17.74,9L12,4.53Z',
+			// 		'class': [ 'maplibregl-ctrl-icon maplibregl-style-switch', this.intIsOpen ? 'is-open' : '' ],
+			// 		onClick: this.toggleOpen.bind(null, true)
+			// 	}) ]),
+			// 	renderSlot(this.$slots, 'styleList', slotProps, () => [
+			// 		h(
+			// 			'div',
+			// 			{ 'class': [ 'maplibregl-style-list', this.intIsOpen ? 'is-open' : '' ] },
+			// 			this.mapStyles.map((s) => {
+			// 				return s.icon
+			// 					? h(MglButton, {
+			// 						type   : ButtonType.MDI,
+			// 						path   : s.icon.path,
+			// 						'class': this.intModelValue?.name === s.name ? 'is-active' : '',
+			// 						onClick: () => this.setStyle(s)
+			// 					}, createTextVNode(s.label))
+			// 					: h('button', {
+			// 						type   : 'button',
+			// 						'class': this.intModelValue?.name === s.name ? 'is-active' : '',
+			// 						onClick: () => this.setStyle(s)
+			// 					}, createTextVNode(s.label));
+			//
+			// 			})
+			// 		)
+			// 	])
+			// ])
 		);
 	}
 });

diff --git a/vite.config.ts b/vite.config.ts
@@ -9,13 +9,13 @@ import { fileURLToPath } from 'url';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-	resolve     : {
-		alias : [
+	resolve: {
+		alias: [
 			{ find: '@', replacement: fileURLToPath(new URL('./src', import.meta.url)) },
 			{ find: /^~(.+)/, replacement: '$1' }
 		]
 	},
-	plugins     : [
+	plugins: [
 		vue(),
 		dts({ insertTypesEntry: true }),
 		banner(`/*!
@@ -24,20 +24,26 @@ export default defineConfig({
 * @license ${pkg.license}
 */`)
 	],
-	ssr         : {
+	ssr    : {
 		external: [ 'vue', 'maplibre-gl', 'geojson', 'mitt' ]
 	},
-	build       : {
-		cssCodeSplit: true,
+	build  : {
+		cssCodeSplit : true,
 		lib          : {
 			entry   : resolve(__dirname, 'src/lib/main.ts'),
 			name    : 'VueMaplibreGl',
 			fileName: format => `vue-maplibre-gl.${format}.js`
 		},
+		sourcemap    : true,
 		rollupOptions: {
 			// make sure to externalize deps that shouldn't be bundled
 			// into your library
-			external: [ 'vue', 'maplibre-gl', 'geojson', 'mitt' ],
+			external: [
+				'vue',
+				'maplibre-gl',
+				'geojson',
+				'mitt'
+			],
 			output  : {
 				assetFileNames: (assetInfo) => {
 					if (assetInfo.name === 'main.css') {
@@ -57,7 +63,7 @@ export default defineConfig({
 			},
 		}
 	},
-	server      : {
+	server : {
 		watch: {
 			// to avoid full page reloads on file changes
 			ignored: [ /\.idea/, /ts\.timestamp-\d+\.mjs/, /\.git/, /node_modules/ ]