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

Comparing version 0.4.2-2 to 0.4.2-3

dist/generate-vue-component.js

 import { dashToPascalCase } from './utils';
 export const createComponentDefinition = (importTypes, componentModelConfig) => (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) {
@@ -23,6 +22,12 @@ templateString += `, [
     }
+    let options = {};
     const findModel = componentModelConfig && componentModelConfig.find(config => config.elements.includes(cmpMeta.tagName));
     if (findModel) {
+        options.modelProp = findModel.targetAttr;
+        options.modelUpdateEvent = findModel.event;
+        options.externalModelUpdateEvent = findModel.externalEvent;
+    }
+    if (Object.keys(options).length > 0) {
         templateString += `,\n`;
-        templateString += `'${findModel.targetAttr}', '${findModel.event}', '${findModel.externalEvent}'`;
+        templateString += JSON.stringify(options, null, 2);
     }
@@ -29,0 +34,0 @@ templateString += `);\n`;

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) {
@@ -112,6 +111,12 @@ templateString += `, [
     }
+    let options = {};
     const findModel = componentModelConfig && componentModelConfig.find(config => config.elements.includes(cmpMeta.tagName));
     if (findModel) {
+        options.modelProp = findModel.targetAttr;
+        options.modelUpdateEvent = findModel.event;
+        options.externalModelUpdateEvent = findModel.externalEvent;
+    }
+    if (Object.keys(options).length > 0) {
         templateString += `,\n`;
-        templateString += `'${findModel.targetAttr}', '${findModel.event}', '${findModel.externalEvent}'`;
+        templateString += JSON.stringify(options, null, 2);
     }
@@ -142,20 +147,8 @@ templateString += `);\n`;
 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`;
@@ -162,0 +155,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) {
@@ -103,6 +102,12 @@ templateString += `, [
     }
+    let options = {};
     const findModel = componentModelConfig && componentModelConfig.find(config => config.elements.includes(cmpMeta.tagName));
     if (findModel) {
+        options.modelProp = findModel.targetAttr;
+        options.modelUpdateEvent = findModel.event;
+        options.externalModelUpdateEvent = findModel.externalEvent;
+    }
+    if (Object.keys(options).length > 0) {
         templateString += `,\n`;
-        templateString += `'${findModel.targetAttr}', '${findModel.event}', '${findModel.externalEvent}'`;
+        templateString += JSON.stringify(options, null, 2);
     }
@@ -133,20 +138,8 @@ templateString += `);\n`;
 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`;
@@ -153,0 +146,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,4 +9,8 @@ export interface OutputTargetVue {
     includeDefineCustomElements?: boolean;
-    useCustomElementsBuild?: boolean;
 }
+export interface ComponentOptions {
+    modelProp?: string;
+    modelUpdateEvent?: string | string[];
+    externalModelUpdateEvent?: string;
+}
 export interface ComponentModelConfig {
@@ -13,0 +17,0 @@ elements: string | string[];

package.json

 {
   "name": "@stencil/vue-output-target",
-  "version": "0.4.2-2",
+  "version": "0.4.2-3",
   "description": "Vue output target for @stencil/core components.",
@@ -35,3 +35,3 @@ "main": "dist/index.cjs.js",
   "peerDependencies": {
-    "@stencil/core": ">=1.8.0 || ^2.0.0"
+    "@stencil/core": ">=1.8.0"
   },
@@ -38,0 +38,0 @@ "jest": {

vue-component-lib/utils.ts

@@ -17,2 +17,8 @@ import { VNode, defineComponent, getCurrentInstance, h, inject, ref, Ref } from 'vue';
 
+interface ComponentOptions {
+  modelProp?: string;
+  modelUpdateEvent?: string | string[];
+  externalModelUpdateEvent?: string;
+}
+
 const getComponentClasses = (classes: unknown) => {
@@ -34,8 +40,8 @@ return (classes as string)?.split(' ') || [];
 * in each component's TSX file.
-* @prop modelProp - The prop that v-model binds to (i.e. value)
-* @prop modelUpdateEvent - The event that is fired when the value changes (i.e. v-ion-change)
-* @prop externalModelUpdateEvent - The event that should be fired from the Vue component wrapper (i.e ionChange)
+* @prop componentOptions - An object that defines additional
+* options for the component such as router or v-model
+* integrations.
 */
-export const defineContainer = <Props>(name: string, customElement: any, componentProps: string[] = [], modelProp?: string, modelUpdateEvent?: string, externalModelUpdateEvent?: string) => {
-  customElements.define(name, customElement);
+export const defineContainer = <Props>(name: string, componentProps: string[] = [], componentOptions: ComponentOptions = {}) => {
+  const { modelProp, modelUpdateEvent, externalModelUpdateEvent } = componentOptions;
 
@@ -95,4 +101,2 @@ /**
     return () => {
-      modelPropValue = (props as any)[modelProp];
-
       getComponentClasses(attrs.class).forEach(value => {
@@ -99,0 +103,0 @@ classes.add(value);

New alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

38803

-4.05%

Lines of code

835

-1.53%

No dependency changes