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

Comparing version 0.6.2 to 0.7.0

dist/generate-vue-component.js

 import { dashToPascalCase } from './utils';
 export const createComponentDefinition = (importTypes, componentModelConfig, includeCustomElement = false) => (cmpMeta) => {
     const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
-    const importAs = (includeCustomElement) ? 'define' + tagNameAsPascal : 'undefined';
+    const importAs = includeCustomElement ? 'define' + tagNameAsPascal : 'undefined';
     let props = [];
@@ -10,10 +10,7 @@ if (Array.isArray(cmpMeta.properties) && cmpMeta.properties.length > 0) {
     if (Array.isArray(cmpMeta.events) && cmpMeta.events.length > 0) {
-        props = [
-            ...props,
-            ...cmpMeta.events.map((event) => `'${event.name}'`)
-        ];
+        props = [...props, ...cmpMeta.events.map((event) => `'${event.name}'`)];
     }
     let templateString = `
 export const ${tagNameAsPascal} = /*@__PURE__*/ defineContainer<${importTypes}.${tagNameAsPascal}>('${cmpMeta.tagName}', ${importAs}`;
-    const findModel = componentModelConfig && componentModelConfig.find(config => config.elements.includes(cmpMeta.tagName));
+    const findModel = componentModelConfig && componentModelConfig.find((config) => config.elements.includes(cmpMeta.tagName));
     if (props.length > 0) {
@@ -20,0 +17,0 @@ templateString += `, [

dist/index.cjs.js

@@ -92,3 +92,3 @@ 'use strict';
     const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
-    const importAs = (includeCustomElement) ? 'define' + tagNameAsPascal : 'undefined';
+    const importAs = includeCustomElement ? 'define' + tagNameAsPascal : 'undefined';
     let props = [];
@@ -99,10 +99,7 @@ if (Array.isArray(cmpMeta.properties) && cmpMeta.properties.length > 0) {
     if (Array.isArray(cmpMeta.events) && cmpMeta.events.length > 0) {
-        props = [
-            ...props,
-            ...cmpMeta.events.map((event) => `'${event.name}'`)
-        ];
+        props = [...props, ...cmpMeta.events.map((event) => `'${event.name}'`)];
     }
     let templateString = `
 export const ${tagNameAsPascal} = /*@__PURE__*/ defineContainer<${importTypes}.${tagNameAsPascal}>('${cmpMeta.tagName}', ${importAs}`;
-    const findModel = componentModelConfig && componentModelConfig.find(config => config.elements.includes(cmpMeta.tagName));
+    const findModel = componentModelConfig && componentModelConfig.find((config) => config.elements.includes(cmpMeta.tagName));
     if (props.length > 0) {
@@ -169,3 +166,5 @@ templateString += `, [
         if (outputTarget.componentCorePackage !== undefined) {
-            const dirPath = outputTarget.includeImportCustomElements ? `/${outputTarget.customElementsDir || 'components'}` : '';
+            const dirPath = outputTarget.includeImportCustomElements
+                ? `/${outputTarget.customElementsDir || 'components'}`
+                : '';
             return `import type { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}${dirPath}';\n`;
@@ -179,6 +178,5 @@ }
     if (outputTarget.includeImportCustomElements && outputTarget.componentCorePackage !== undefined) {
-        const cmpImports = components.map(component => {
+        const cmpImports = components.map((component) => {
             const pascalImport = dashToPascalCase(component.tagName);
-            return `import { defineCustomElement as define${pascalImport} } from '${normalizePath(outputTarget.componentCorePackage)}/${outputTarget.customElementsDir ||
-                'components'}/${component.tagName}.js';`;
+            return `import { defineCustomElement as define${pascalImport} } from '${normalizePath(outputTarget.componentCorePackage)}/${outputTarget.customElementsDir || 'components'}/${component.tagName}.js';`;
         });
@@ -228,5 +226,3 @@ sourceImports = cmpImports.join('\n');
         : null;
-    const distRelEsmLoaderPath = config.rootDir && distAbsEsmLoaderPath
-        ? path__default['default'].relative(config.rootDir, distAbsEsmLoaderPath)
-        : null;
+    const distRelEsmLoaderPath = config.rootDir && distAbsEsmLoaderPath ? path__default['default'].relative(config.rootDir, distAbsEsmLoaderPath) : null;
     const loaderDir = outputTarget.loaderDir || distRelEsmLoaderPath || DEFAULT_LOADER_DIR;
@@ -233,0 +229,0 @@ return normalizePath(path__default['default'].join(basePkg, loaderDir));

dist/index.js

@@ -83,3 +83,3 @@ import path from 'path';
     const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
-    const importAs = (includeCustomElement) ? 'define' + tagNameAsPascal : 'undefined';
+    const importAs = includeCustomElement ? 'define' + tagNameAsPascal : 'undefined';
     let props = [];
@@ -90,10 +90,7 @@ if (Array.isArray(cmpMeta.properties) && cmpMeta.properties.length > 0) {
     if (Array.isArray(cmpMeta.events) && cmpMeta.events.length > 0) {
-        props = [
-            ...props,
-            ...cmpMeta.events.map((event) => `'${event.name}'`)
-        ];
+        props = [...props, ...cmpMeta.events.map((event) => `'${event.name}'`)];
     }
     let templateString = `
 export const ${tagNameAsPascal} = /*@__PURE__*/ defineContainer<${importTypes}.${tagNameAsPascal}>('${cmpMeta.tagName}', ${importAs}`;
-    const findModel = componentModelConfig && componentModelConfig.find(config => config.elements.includes(cmpMeta.tagName));
+    const findModel = componentModelConfig && componentModelConfig.find((config) => config.elements.includes(cmpMeta.tagName));
     if (props.length > 0) {
@@ -160,3 +157,5 @@ templateString += `, [
         if (outputTarget.componentCorePackage !== undefined) {
-            const dirPath = outputTarget.includeImportCustomElements ? `/${outputTarget.customElementsDir || 'components'}` : '';
+            const dirPath = outputTarget.includeImportCustomElements
+                ? `/${outputTarget.customElementsDir || 'components'}`
+                : '';
             return `import type { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}${dirPath}';\n`;
@@ -170,6 +169,5 @@ }
     if (outputTarget.includeImportCustomElements && outputTarget.componentCorePackage !== undefined) {
-        const cmpImports = components.map(component => {
+        const cmpImports = components.map((component) => {
             const pascalImport = dashToPascalCase(component.tagName);
-            return `import { defineCustomElement as define${pascalImport} } from '${normalizePath(outputTarget.componentCorePackage)}/${outputTarget.customElementsDir ||
-                'components'}/${component.tagName}.js';`;
+            return `import { defineCustomElement as define${pascalImport} } from '${normalizePath(outputTarget.componentCorePackage)}/${outputTarget.customElementsDir || 'components'}/${component.tagName}.js';`;
         });
@@ -219,5 +217,3 @@ sourceImports = cmpImports.join('\n');
         : null;
-    const distRelEsmLoaderPath = config.rootDir && distAbsEsmLoaderPath
-        ? path.relative(config.rootDir, distAbsEsmLoaderPath)
-        : null;
+    const distRelEsmLoaderPath = config.rootDir && distAbsEsmLoaderPath ? path.relative(config.rootDir, distAbsEsmLoaderPath) : null;
     const loaderDir = outputTarget.loaderDir || distRelEsmLoaderPath || DEFAULT_LOADER_DIR;
@@ -224,0 +220,0 @@ return normalizePath(path.join(basePkg, loaderDir));

dist/output-vue.js

@@ -26,3 +26,5 @@ import path from 'path';
         if (outputTarget.componentCorePackage !== undefined) {
-            const dirPath = outputTarget.includeImportCustomElements ? `/${outputTarget.customElementsDir || 'components'}` : '';
+            const dirPath = outputTarget.includeImportCustomElements
+                ? `/${outputTarget.customElementsDir || 'components'}`
+                : '';
             return `import type { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}${dirPath}';\n`;
@@ -36,6 +38,5 @@ }
     if (outputTarget.includeImportCustomElements && outputTarget.componentCorePackage !== undefined) {
-        const cmpImports = components.map(component => {
+        const cmpImports = components.map((component) => {
             const pascalImport = dashToPascalCase(component.tagName);
-            return `import { defineCustomElement as define${pascalImport} } from '${normalizePath(outputTarget.componentCorePackage)}/${outputTarget.customElementsDir ||
-                'components'}/${component.tagName}.js';`;
+            return `import { defineCustomElement as define${pascalImport} } from '${normalizePath(outputTarget.componentCorePackage)}/${outputTarget.customElementsDir || 'components'}/${component.tagName}.js';`;
         });
@@ -85,5 +86,3 @@ sourceImports = cmpImports.join('\n');
         : null;
-    const distRelEsmLoaderPath = config.rootDir && distAbsEsmLoaderPath
-        ? path.relative(config.rootDir, distAbsEsmLoaderPath)
-        : null;
+    const distRelEsmLoaderPath = config.rootDir && distAbsEsmLoaderPath ? path.relative(config.rootDir, distAbsEsmLoaderPath) : null;
     const loaderDir = outputTarget.loaderDir || distRelEsmLoaderPath || DEFAULT_LOADER_DIR;
@@ -90,0 +89,0 @@ return normalizePath(path.join(basePkg, loaderDir));

dist/utils.d.ts

 import type { PackageJSON } from './types';
 export declare const toLowerCase: (str: string) => string;
 export declare const dashToPascalCase: (str: string) => string;
-export declare function flatOne<T>(array: T[][]): T[];
 export declare function sortBy<T>(array: T[], prop: (item: T) => string): T[];
@@ -6,0 +5,0 @@ export declare function normalizePath(str: string): string;

dist/utils.js

@@ -10,11 +10,2 @@ import path from 'path';
     .join('');
-export function flatOne(array) {
-    if (array.flat) {
-        return array.flat(1);
-    }
-    return array.reduce((result, item) => {
-        result.push(...item);
-        return result;
-    }, []);
-}
 export function sortBy(array, prop) {
@@ -21,0 +12,0 @@ return array.slice().sort((a, b) => {

package.json

 {
   "name": "@stencil/vue-output-target",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "Vue output target for @stencil/core components.",
@@ -22,2 +22,5 @@ "main": "dist/index.cjs.js",
     "version": "npm run build",
+    "prettier": "npm run prettier.base -- --write",
+    "prettier.base": "prettier \"./({vue-component-lib,src,test,__tests__}/**/*.{ts,tsx,js,jsx})|*.{ts,tsx,js,jsx}\"",
+    "prettier.dry-run": "npm run prettier.base -- --list-different",
     "release": "np",
@@ -37,3 +40,3 @@ "test": "jest"
   "peerDependencies": {
-    "@stencil/core": "^2.9.0"
+    "@stencil/core": "^2.9.0 || ^3.0.0-beta.0"
   },
@@ -40,0 +43,0 @@ "jest": {

vue-component-lib/utils.ts

@@ -12,3 +12,3 @@ import { VNode, defineComponent, getCurrentInstance, h, inject, ref, Ref } from 'vue';
 const ROUTER_PROP_PREFIX = 'router';
-
+const ARIA_PROP_PREFIX = 'aria';
 /**
@@ -34,22 +34,27 @@ * Starting in Vue 3.1.0, all properties are
 
-const getElementClasses = (ref: Ref<HTMLElement | undefined>, componentClasses: Set<string>, defaultClasses: string[] = []) => {
-  return [ ...Array.from(ref.value?.classList || []), ...defaultClasses ]
-    .filter((c: string, i, self) => !componentClasses.has(c) && self.indexOf(c) === i);
+const getElementClasses = (
+  ref: Ref<HTMLElement | undefined>,
+  componentClasses: Set<string>,
+  defaultClasses: string[] = []
+) => {
+  return [...Array.from(ref.value?.classList || []), ...defaultClasses].filter(
+    (c: string, i, self) => !componentClasses.has(c) && self.indexOf(c) === i
+  );
 };
 
 /**
-* Create a callback to define a Vue component wrapper around a Web Component.
-*
-* @prop name - The component tag name (i.e. `ion-button`)
-* @prop componentProps - An array of properties on the
-* component. These usually match up with the @Prop definitions
-* in each component's TSX file.
-* @prop customElement - An option custom element instance to pass
-* to customElements.define. Only set if `includeImportCustomElements: true` in your config.
-* @prop modelProp - The prop that v-model binds to (i.e. value)
-* @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.
-*/
-export const defineContainer = <Props, VModelType=string|number|boolean>(
+ * Create a callback to define a Vue component wrapper around a Web Component.
+ *
+ * @prop name - The component tag name (i.e. `ion-button`)
+ * @prop componentProps - An array of properties on the
+ * component. These usually match up with the @Prop definitions
+ * in each component's TSX file.
+ * @prop customElement - An option custom element instance to pass
+ * to customElements.define. Only set if `includeImportCustomElements: true` in your config.
+ * @prop modelProp - The prop that v-model binds to (i.e. value)
+ * @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.
+ */
+export const defineContainer = <Props, VModelType = string | number | boolean>(
   name: string,
@@ -63,6 +68,6 @@ defineCustomElement: any,
   /**
-  * Create a Vue component wrapper around a Web Component.
-  * Note: The `props` here are not all properties on a component.
-  * They refer to whatever properties are set on an instance of a component.
-  */
+   * Create a Vue component wrapper around a Web Component.
+   * Note: The `props` here are not all properties on a component.
+   * They refer to whatever properties are set on an instance of a component.
+   */
 
@@ -122,3 +127,3 @@ if (defineCustomElement !== undefined) {
       }
-    }
+    };
 
@@ -128,3 +133,3 @@ return () => {
 
-      getComponentClasses(attrs.class).forEach(value => {
+      getComponentClasses(attrs.class).forEach((value) => {
         classes.add(value);
@@ -141,3 +146,3 @@ });
         }
-      }
+      };
 
@@ -148,3 +153,3 @@ let propsToAdd: any = {
         onClick: handleClick,
-        onVnodeBeforeMount: (modelUpdateEvent) ? onVnodeBeforeMount : undefined
+        onVnodeBeforeMount: modelUpdateEvent ? onVnodeBeforeMount : undefined,
       };
@@ -160,3 +165,3 @@
         const value = props[key];
-        if (props.hasOwnProperty(key) && value !== EMPTY_PROP) {
+        if ((props.hasOwnProperty(key) && value !== EMPTY_PROP) || key.startsWith(ARIA_PROP_PREFIX)) {
           propsToAdd[key] = value;
@@ -176,9 +181,9 @@ }
             ...propsToAdd,
-            [modelProp]: props[MODEL_VALUE]
-          }
+            [modelProp]: props[MODEL_VALUE],
+          };
         } else if (modelPropValue !== EMPTY_PROP) {
           propsToAdd = {
             ...propsToAdd,
-            [modelProp]: modelPropValue
-          }
+            [modelProp]: modelPropValue,
+          };
         }
@@ -188,3 +193,3 @@ }
       return h(name, propsToAdd, slots.default && slots.default());
-    }
+    };
   });
@@ -195,6 +200,6 @@
   Container.props = {
-    [ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP
+    [ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP,
   };
 
-  componentProps.forEach(componentProp => {
+  componentProps.forEach((componentProp) => {
     Container.props[componentProp] = DEFAULT_EMPTY_PROP;
@@ -201,0 +206,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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

Improved metrics

Total package byte prevSize

54500

increased by0.03%

Worsened metrics

Lines of code

988

decreased by-1.59%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes