@stencil/vue-output-target - npm Package Compare versions

Comparing version 0.6.1-dev.11651000551.1f528d2f to 0.6.1

package.json

 {
   "name": "@stencil/vue-output-target",
-  "version": "0.6.1-dev.11651000551.1f528d2f",
+  "version": "0.6.1",
   "description": "Vue output target for @stencil/core components.",
@@ -52,3 +52,3 @@ "main": "dist/index.cjs.js",
   },
-  "gitHead": "f528d2f92d8fddf7c4ef2ebe5c08b0f46dd85c9a"
+  "gitHead": "a3588e905186a0e86e7f88418fd5b2f9531b55e0"
 }

vue-component-lib/utils.ts

 import { VNode, defineComponent, getCurrentInstance, h, inject, ref, Ref } from 'vue';
 
-export interface InputProps extends Object {
+export interface InputProps {
   modelValue?: string | boolean;
@@ -34,3 +34,3 @@ }
 const getElementClasses = (ref: Ref<HTMLElement | undefined>, componentClasses: Set<string>, defaultClasses: string[] = []) => {
-  return [...Array.from(ref.value?.classList || []), ...defaultClasses]
+  return [ ...Array.from(ref.value?.classList || []), ...defaultClasses ]
     .filter((c: string, i, self) => !componentClasses.has(c) && self.indexOf(c) === i);
@@ -71,114 +71,111 @@ };
 
-  const Container = defineComponent<Props & InputProps>({
-    name: name,
-    setup(props: any, { attrs, slots, emit }) {
-      let modelPropValue = props[modelProp];
-      const containerRef = ref<HTMLElement>();
-      const classes = new Set(getComponentClasses(attrs.class));
-      const onVnodeBeforeMount = (vnode: VNode) => {
-        // Add a listener to tell Vue to update the v-model
-        if (vnode.el) {
-          const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
-          eventsNames.forEach((eventName: string) => {
-            vnode.el.addEventListener(eventName.toLowerCase(), (e: Event) => {
-              modelPropValue = (e?.target as any)[modelProp];
-              emit(UPDATE_VALUE_EVENT, modelPropValue);
+  const Container = defineComponent<Props & InputProps>((props: any, { attrs, slots, emit }) => {
+    let modelPropValue = props[modelProp];
+    const containerRef = ref<HTMLElement>();
+    const classes = new Set(getComponentClasses(attrs.class));
+    const onVnodeBeforeMount = (vnode: VNode) => {
+      // Add a listener to tell Vue to update the v-model
+      if (vnode.el) {
+        const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
+        eventsNames.forEach((eventName: string) => {
+          vnode.el.addEventListener(eventName.toLowerCase(), (e: Event) => {
+            modelPropValue = (e?.target as any)[modelProp];
+            emit(UPDATE_VALUE_EVENT, modelPropValue);
 
-              /**
-               * We need to emit the change event here
-               * rather than on the web component to ensure
-               * that any v-model bindings have been updated.
-               * Otherwise, the developer will listen on the
-               * native web component, but the v-model will
-               * not have been updated yet.
-               */
-              if (externalModelUpdateEvent) {
-                emit(externalModelUpdateEvent, e);
-              }
-            });
+            /**
+             * We need to emit the change event here
+             * rather than on the web component to ensure
+             * that any v-model bindings have been updated.
+             * Otherwise, the developer will listen on the
+             * native web component, but the v-model will
+             * not have been updated yet.
+             */
+            if (externalModelUpdateEvent) {
+              emit(externalModelUpdateEvent, e);
+            }
           });
-        }
+        });
       }
+    };
 
-      const currentInstance = getCurrentInstance();
-      const hasRouter = currentInstance?.appContext?.provides[NAV_MANAGER];
-      const navManager: NavManager | undefined = hasRouter ? inject(NAV_MANAGER) : undefined;
-      const handleRouterLink = (ev: Event) => {
-        const { routerLink } = props;
-        if (routerLink === EMPTY_PROP) return;
+    const currentInstance = getCurrentInstance();
+    const hasRouter = currentInstance?.appContext?.provides[NAV_MANAGER];
+    const navManager: NavManager | undefined = hasRouter ? inject(NAV_MANAGER) : undefined;
+    const handleRouterLink = (ev: Event) => {
+      const { routerLink } = props;
+      if (routerLink === EMPTY_PROP) return;
 
-        if (navManager !== undefined) {
-          let navigationPayload: any = { event: ev };
-          for (const key in props) {
-            const value = props[key];
-            if (props.hasOwnProperty(key) && key.startsWith(ROUTER_PROP_PREFIX) && value !== EMPTY_PROP) {
-              navigationPayload[key] = value;
-            }
+      if (navManager !== undefined) {
+        let navigationPayload: any = { event: ev };
+        for (const key in props) {
+          const value = props[key];
+          if (props.hasOwnProperty(key) && key.startsWith(ROUTER_PROP_PREFIX) && value !== EMPTY_PROP) {
+            navigationPayload[key] = value;
           }
+        }
 
-          navManager.navigate(navigationPayload);
-        } else {
-          console.warn('Tried to navigate, but no router was found. Make sure you have mounted Vue Router.');
-        }
+        navManager.navigate(navigationPayload);
+      } else {
+        console.warn('Tried to navigate, but no router was found. Make sure you have mounted Vue Router.');
       }
+    }
 
-      return () => {
-        modelPropValue = props[modelProp];
+    return () => {
+      modelPropValue = props[modelProp];
 
-        getComponentClasses(attrs.class).forEach(value => {
-          classes.add(value);
-        });
+      getComponentClasses(attrs.class).forEach(value => {
+        classes.add(value);
+      });
 
-        const oldClick = props.onClick;
-        const handleClick = (ev: Event) => {
-          if (oldClick !== undefined) {
-            oldClick(ev);
-          }
-          if (!ev.defaultPrevented) {
-            handleRouterLink(ev);
-          }
+      const oldClick = props.onClick;
+      const handleClick = (ev: Event) => {
+        if (oldClick !== undefined) {
+          oldClick(ev);
         }
+        if (!ev.defaultPrevented) {
+          handleRouterLink(ev);
+        }
+      }
 
-        let propsToAdd: any = {
-          ref: containerRef,
-          class: getElementClasses(containerRef, classes),
-          onClick: handleClick,
-          onVnodeBeforeMount: (modelUpdateEvent) ? onVnodeBeforeMount : undefined
-        };
+      let propsToAdd: any = {
+        ref: containerRef,
+        class: getElementClasses(containerRef, classes),
+        onClick: handleClick,
+        onVnodeBeforeMount: (modelUpdateEvent) ? onVnodeBeforeMount : undefined
+      };
 
+      /**
+       * We can use Object.entries here
+       * to avoid the hasOwnProperty check,
+       * but that would require 2 iterations
+       * where as this only requires 1.
+       */
+      for (const key in props) {
+        const value = props[key];
+        if (props.hasOwnProperty(key) && value !== EMPTY_PROP) {
+          propsToAdd[key] = value;
+        }
+      }
+
+      if (modelProp) {
         /**
-         * We can use Object.entries here
-         * to avoid the hasOwnProperty check,
-         * but that would require 2 iterations
-         * where as this only requires 1.
+         * If form value property was set using v-model
+         * then we should use that value.
+         * Otherwise, check to see if form value property
+         * was set as a static value (i.e. no v-model).
          */
-        for (const key in props) {
-          const value = props[key];
-          if (props.hasOwnProperty(key) && value !== EMPTY_PROP) {
-            propsToAdd[key] = value;
+        if (props[MODEL_VALUE] !== EMPTY_PROP) {
+          propsToAdd = {
+            ...propsToAdd,
+            [modelProp]: props[MODEL_VALUE]
           }
-        }
-
-        if (modelProp) {
-          /**
-           * If form value property was set using v-model
-           * then we should use that value.
-           * Otherwise, check to see if form value property
-           * was set as a static value (i.e. no v-model).
-           */
-          if (props[MODEL_VALUE] !== EMPTY_PROP) {
-            propsToAdd = {
-              ...propsToAdd,
-              [modelProp]: props[MODEL_VALUE]
-            }
-          } else if (modelPropValue !== EMPTY_PROP) {
-            propsToAdd = {
-              ...propsToAdd,
-              [modelProp]: modelPropValue
-            }
+        } else if (modelPropValue !== EMPTY_PROP) {
+          propsToAdd = {
+            ...propsToAdd,
+            [modelProp]: modelPropValue
           }
         }
+      }
 
-        return h(name, propsToAdd, slots.default && slots.default());
-      }
+      return h(name, propsToAdd, slots.default && slots.default());
     }
@@ -185,0 +182,0 @@ });

No alert changes

Worsened metrics

Total package byte prevSize

54448

decreased by-0.48%

Lines of code

1004

decreased by-0.3%

No dependency changes