From 7fc5ff02484c53384c8302bacacd8af06468b3ab Mon Sep 17 00:00:00 2001 From: razorness <684302+razorness@users.noreply.github.com> Date: Mon, 20 Mar 2023 19:18:18 +0100 Subject: [PATCH] removed renderSlot helper vom vue core causing problems and bloats bundle size --- package.json | 2 +- src/lib/components/button.component.ts | 5 +- src/lib/components/controls/custom.control.ts | 3 +- .../controls/styleSwitch.control.ts | 110 +++++++++++------- vite.config.ts | 22 ++-- 5 files changed, 83 insertions(+), 59 deletions(-) diff --git a/package.json b/package.json index 2c2e0fc..ae6765f 100644 --- 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 index 5adbc7d..df37cac 100644 --- 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 index 53d6cb2..1ebbe19 100644 --- 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 index c1c9e7c..8bf46fc 100644 --- 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 index 8d847c9..5399ea8 100644 --- 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/ ]