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

Comparing version 0.2.2-4 to 0.2.2-5

dist/generate-vue-component.js

 import { dashToPascalCase } from './utils';
 export const createComponentDefinition = (importTypes, componentModelConfig, routerLinkConfig) => (cmpMeta) => {
     const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
-    const importAs = tagNameAsPascal + 'Cmp';
     let props = [];
@@ -16,3 +15,3 @@ if (Array.isArray(cmpMeta.properties) && cmpMeta.properties.length > 0) {
     let templateString = `
-export const ${tagNameAsPascal} = /*@__PURE__*/ defineContainer<${importTypes}.${tagNameAsPascal}>('${cmpMeta.tagName}', ${importAs}`;
+export const ${tagNameAsPascal} = /*@__PURE__*/ defineContainer<${importTypes}.${tagNameAsPascal}>('${cmpMeta.tagName}'`;
     if (props.length > 0) {
@@ -19,0 +18,0 @@ templateString += `, [

dist/index.cjs.js

@@ -92,3 +92,2 @@ 'use strict';
     const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
-    const importAs = tagNameAsPascal + 'Cmp';
     let props = [];
@@ -105,3 +104,3 @@ if (Array.isArray(cmpMeta.properties) && cmpMeta.properties.length > 0) {
     let templateString = `
-export const ${tagNameAsPascal} = /*@__PURE__*/ defineContainer<${importTypes}.${tagNameAsPascal}>('${cmpMeta.tagName}', ${importAs}`;
+export const ${tagNameAsPascal} = /*@__PURE__*/ defineContainer<${importTypes}.${tagNameAsPascal}>('${cmpMeta.tagName}'`;
     if (props.length > 0) {
@@ -150,20 +149,8 @@ templateString += `, [
 import { defineContainer } from './vue-component-lib/utils';\n`;
-    const generateTypeImports = () => {
-        if (outputTarget.componentCorePackage !== undefined) {
-            const dirPath = outputTarget.useCustomElementsBuild ? '/components' : '';
-            return `import type { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}${dirPath}';\n`;
-        }
-        return `import type { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';\n`;
-    };
-    const typeImports = generateTypeImports();
+    const typeImports = !outputTarget.componentCorePackage
+        ? `import type { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';\n`
+        : `import type { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}';\n`;
     let sourceImports = '';
     let registerCustomElements = '';
-    if (outputTarget.useCustomElementsBuild && outputTarget.componentCorePackage !== undefined) {
-        const cmpImports = components.map(component => {
-            const pascalImport = dashToPascalCase(component.tagName);
-            return `import { ${pascalImport} as ${pascalImport}Cmp } from '${normalizePath(outputTarget.componentCorePackage)}/components/${component.tagName}.js';`;
-        });
-        sourceImports = cmpImports.join('\n');
-    }
-    else if (outputTarget.includePolyfills && outputTarget.includeDefineCustomElements) {
+    if (outputTarget.includePolyfills && outputTarget.includeDefineCustomElements) {
         sourceImports = `import { ${APPLY_POLYFILLS}, ${REGISTER_CUSTOM_ELEMENTS} } from '${pathToCorePackageLoader}';\n`;
@@ -170,0 +157,0 @@ registerCustomElements = `${APPLY_POLYFILLS}().then(() => ${REGISTER_CUSTOM_ELEMENTS}());`;

dist/index.js

@@ -83,3 +83,2 @@ import path from 'path';
     const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
-    const importAs = tagNameAsPascal + 'Cmp';
     let props = [];
@@ -96,3 +95,3 @@ if (Array.isArray(cmpMeta.properties) && cmpMeta.properties.length > 0) {
     let templateString = `
-export const ${tagNameAsPascal} = /*@__PURE__*/ defineContainer<${importTypes}.${tagNameAsPascal}>('${cmpMeta.tagName}', ${importAs}`;
+export const ${tagNameAsPascal} = /*@__PURE__*/ defineContainer<${importTypes}.${tagNameAsPascal}>('${cmpMeta.tagName}'`;
     if (props.length > 0) {
@@ -141,20 +140,8 @@ templateString += `, [
 import { defineContainer } from './vue-component-lib/utils';\n`;
-    const generateTypeImports = () => {
-        if (outputTarget.componentCorePackage !== undefined) {
-            const dirPath = outputTarget.useCustomElementsBuild ? '/components' : '';
-            return `import type { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}${dirPath}';\n`;
-        }
-        return `import type { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';\n`;
-    };
-    const typeImports = generateTypeImports();
+    const typeImports = !outputTarget.componentCorePackage
+        ? `import type { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';\n`
+        : `import type { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}';\n`;
     let sourceImports = '';
     let registerCustomElements = '';
-    if (outputTarget.useCustomElementsBuild && outputTarget.componentCorePackage !== undefined) {
-        const cmpImports = components.map(component => {
-            const pascalImport = dashToPascalCase(component.tagName);
-            return `import { ${pascalImport} as ${pascalImport}Cmp } from '${normalizePath(outputTarget.componentCorePackage)}/components/${component.tagName}.js';`;
-        });
-        sourceImports = cmpImports.join('\n');
-    }
-    else if (outputTarget.includePolyfills && outputTarget.includeDefineCustomElements) {
+    if (outputTarget.includePolyfills && outputTarget.includeDefineCustomElements) {
         sourceImports = `import { ${APPLY_POLYFILLS}, ${REGISTER_CUSTOM_ELEMENTS} } from '${pathToCorePackageLoader}';\n`;
@@ -161,0 +148,0 @@ registerCustomElements = `${APPLY_POLYFILLS}().then(() => ${REGISTER_CUSTOM_ELEMENTS}());`;

dist/output-vue.js

 import path from 'path';
 import { createComponentDefinition } from './generate-vue-component';
-import { normalizePath, readPackageJson, relativeImport, sortBy, dashToPascalCase } from './utils';
+import { normalizePath, readPackageJson, relativeImport, sortBy } from './utils';
 export async function vueProxyOutput(config, compilerCtx, outputTarget, components) {
@@ -24,20 +24,8 @@ const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
 import { defineContainer } from './vue-component-lib/utils';\n`;
-    const generateTypeImports = () => {
-        if (outputTarget.componentCorePackage !== undefined) {
-            const dirPath = outputTarget.useCustomElementsBuild ? '/components' : '';
-            return `import type { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}${dirPath}';\n`;
-        }
-        return `import type { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';\n`;
-    };
-    const typeImports = generateTypeImports();
+    const typeImports = !outputTarget.componentCorePackage
+        ? `import type { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';\n`
+        : `import type { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}';\n`;
     let sourceImports = '';
     let registerCustomElements = '';
-    if (outputTarget.useCustomElementsBuild && outputTarget.componentCorePackage !== undefined) {
-        const cmpImports = components.map(component => {
-            const pascalImport = dashToPascalCase(component.tagName);
-            return `import { ${pascalImport} as ${pascalImport}Cmp } from '${normalizePath(outputTarget.componentCorePackage)}/components/${component.tagName}.js';`;
-        });
-        sourceImports = cmpImports.join('\n');
-    }
-    else if (outputTarget.includePolyfills && outputTarget.includeDefineCustomElements) {
+    if (outputTarget.includePolyfills && outputTarget.includeDefineCustomElements) {
         sourceImports = `import { ${APPLY_POLYFILLS}, ${REGISTER_CUSTOM_ELEMENTS} } from '${pathToCorePackageLoader}';\n`;
@@ -44,0 +32,0 @@ registerCustomElements = `${APPLY_POLYFILLS}().then(() => ${REGISTER_CUSTOM_ELEMENTS}());`;

dist/types.d.ts

@@ -9,3 +9,2 @@ export interface OutputTargetVue {
     includeDefineCustomElements?: boolean;
-    useCustomElementsBuild?: boolean;
     routerLinkComponents?: string[];
@@ -12,0 +11,0 @@ }

package.json

 {
   "name": "@stencil/vue-output-target",
-  "version": "0.2.2-4",
+  "version": "0.2.2-5",
   "description": "Vue output target for @stencil/core components.",
@@ -5,0 +5,0 @@ "main": "dist/index.cjs.js",

vue-component-lib/utils.ts

@@ -43,7 +43,5 @@ import { VNode, defineComponent, getCurrentInstance, h, inject, ref, Ref } from 'vue';
 */
-export const defineContainer = <Props>(name: string, customElement: any, componentProps: string[] = [], componentOptions: ComponentOptions = {}) => {
+export const defineContainer = <Props>(name: string, componentProps: string[] = [], componentOptions: ComponentOptions = {}) => {
   const { modelProp, modelUpdateEvent, routerLinkComponent } = componentOptions;
 
-  customElements.define(name, customElement);
-
   /**
@@ -55,2 +53,3 @@ * Create a Vue component wrapper around a Web Component.
   const Container = defineComponent<Props & InputProps>((props, { attrs, slots, emit }) => {
+    let modelPropValue = (props as any)[modelProp];
     const containerRef = ref<HTMLElement>();
@@ -62,3 +61,5 @@ const classes = new Set(getComponentClasses(attrs.class));
         vnode.el.addEventListener(modelUpdateEvent.toLowerCase(), (e: Event) => {
-          emit(UPDATE_VALUE_EVENT, (e?.target as any)[modelProp]);
+          modelPropValue = (e?.target as any)[modelProp];
+          emit(UPDATE_VALUE_EVENT, modelPropValue);
+          emit(modelUpdateEvent, e);
         });
@@ -115,3 +116,3 @@ }
           ...propsToAdd,
-          [modelProp]: props.hasOwnProperty('modelValue') ? props.modelValue : (props as any)[modelProp]
+          [modelProp]: props.hasOwnProperty('modelValue') ? props.modelValue : modelPropValue
         }
@@ -128,3 +129,11 @@ }
     Container.props.push(MODEL_VALUE);
-    Container.emits = [UPDATE_VALUE_EVENT];
+
+    /**
+     * We need the update event to be handled
+     * through the bindings otherwise the update
+     * event will be bound directly to the web component.
+     * In this case, the update event callback in the user's
+     * code would be fired before any v-model refs are updated.
+     */
+    Container.emits = [modelUpdateEvent, UPDATE_VALUE_EVENT];
   }
@@ -131,0 +140,0 @@ if (routerLinkComponent) {

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

39447

decreased by-4.61%

Lines of code

845

decreased by-3.54%

No dependency changes