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

Comparing version 0.0.1-dev.11698340434.1c94d384 to 0.0.1-dev.11698434337.14ecd9f2

dist/generate-vue-component.js

@@ -48,5 +48,2 @@ import { dashToPascalCase } from './utils';
         templateString += `'${targetProp}', '${findModel.event}'`;
-        if (findModel.externalEvent) {
-            templateString += `, '${findModel.externalEvent}'`;
-        }
     }
@@ -53,0 +50,0 @@ templateString += `);\n`;

dist/index.cjs.js

@@ -136,5 +136,2 @@ 'use strict';
         templateString += `'${targetProp}', '${findModel.event}'`;
-        if (findModel.externalEvent) {
-            templateString += `, '${findModel.externalEvent}'`;
-        }
     }
@@ -141,0 +138,0 @@ templateString += `);\n`;

dist/index.js

@@ -127,5 +127,2 @@ import path from 'path';
         templateString += `'${targetProp}', '${findModel.event}'`;
-        if (findModel.externalEvent) {
-            templateString += `, '${findModel.externalEvent}'`;
-        }
     }
@@ -132,0 +129,0 @@ templateString += `);\n`;

dist/types.d.ts

@@ -16,3 +16,2 @@ export interface OutputTargetVue {
     targetAttr: string;
-    externalEvent?: string;
 }
@@ -19,0 +18,0 @@ export interface PackageJSON {

package.json

 {
   "name": "@stencil/vue-output-target",
-  "version": "0.0.1-dev.11698340434.1c94d384",
+  "version": "0.0.1-dev.11698434337.14ecd9f2",
   "description": "Vue output target for @stencil/core components.",
@@ -55,3 +55,3 @@ "main": "dist/index.cjs.js",
   },
-  "gitHead": "c94d384774473a5fc523bb70355b1211c59d3f77",
+  "gitHead": "4ecd9f2a1fb58183e15c2471a95ade8cfa501b6a",
   "volta": {
@@ -58,0 +58,0 @@ "extends": "../../package.json"

README.md

@@ -75,13 +75,2 @@ # @stencil/vue-output-target
   targetAttr: string;
-
-  /**
-   * (optional) The event to emit from the Vue component
-   * wrapper. When listening directly to the `event` emitted
-   * from the Web Component, the `v-model` reference has not
-   * yet had a chance to update. By setting `externalEvent`,
-   * your Web Component can emit `event`, the Vue output target
-   * can update the `v-model` reference, and then emit `externalEvent`,
-   * notifying the end user that `v-model` has changed. Defaults to `event`.
-   */
-  externalEvent?: string;
 }
@@ -98,4 +87,3 @@ ```
       elements: ['my-input', 'my-textarea'],
-      event: 'v-on-change',
-      externalEvent: 'on-change',
+      event: 'on-change',
       targetAttr: 'value'
@@ -102,0 +90,0 @@ }

vue-component-lib/utils.ts

 // @ts-nocheck
 // It's easier and safer for Volar to disable typechecking and let the return type inference do its job.
-import { VNode, defineComponent, getCurrentInstance, h, inject, ref, Ref } from 'vue';
+import { defineComponent, getCurrentInstance, h, inject, ref, Ref, withDirectives } from 'vue';
 
@@ -56,4 +56,2 @@ export interface InputProps<T> {
  * @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange)
- * @prop externalModelUpdateEvent - The external event to fire from your Vue component when modelUpdateEvent fires. This is used for ensuring that v-model references have been
- * correctly updated when a user's event callback fires.
  */
@@ -66,3 +64,2 @@ export const defineContainer = <Props, VModelType = string | number | boolean>(
   modelUpdateEvent?: string,
-  externalModelUpdateEvent?: string
 ) => {
@@ -83,26 +80,13 @@ /**
     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 vModelDirective = {
+      created(el: HTMLElement) {
         const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
         eventsNames.forEach((eventName: string) => {
-          vnode.el!.addEventListener(eventName.toLowerCase(), (e: Event) => {
+          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);
-            }
           });
         });
       }
-    };
+    }
 
@@ -188,3 +172,4 @@ const currentInstance = getCurrentInstance();
 
-      return h(name, propsToAdd, slots.default && slots.default());
+      const node = h(name, propsToAdd, slots.default && slots.default());
+      return modelProp === undefined ? node : withDirectives(node, [vModelDirective]);
     };
@@ -191,0 +176,0 @@ });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

53639

decreased by-2.91%

Lines of code

974

decreased by-2.4%

Number of lines in readme file

92

decreased by-11.54%

No dependency changes