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

Comparing version 0.4.2 to 0.4.3-0

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 = [];
@@ -15,3 +16,3 @@ if (Array.isArray(cmpMeta.properties) && cmpMeta.properties.length > 0) {
     let templateString = `
-export const ${tagNameAsPascal} = /*@__PURE__*/ defineContainer<${importTypes}.${tagNameAsPascal}>('${cmpMeta.tagName}'`;
+export const ${tagNameAsPascal} = /*@__PURE__*/ defineContainer<${importTypes}.${tagNameAsPascal}>('${cmpMeta.tagName}', ${importAs}`;
     if (props.length > 0) {
@@ -22,12 +23,6 @@ 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 += JSON.stringify(options, null, 2);
+        templateString += `'${findModel.targetAttr}', '${findModel.event}', '${findModel.externalEvent}'`;
     }
@@ -34,0 +29,0 @@ templateString += `);\n`;

dist/index.cjs.js

@@ -92,2 +92,3 @@ 'use strict';
     const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
+    const importAs = tagNameAsPascal + 'Cmp';
     let props = [];
@@ -104,3 +105,3 @@ if (Array.isArray(cmpMeta.properties) && cmpMeta.properties.length > 0) {
     let templateString = `
-export const ${tagNameAsPascal} = /*@__PURE__*/ defineContainer<${importTypes}.${tagNameAsPascal}>('${cmpMeta.tagName}'`;
+export const ${tagNameAsPascal} = /*@__PURE__*/ defineContainer<${importTypes}.${tagNameAsPascal}>('${cmpMeta.tagName}', ${importAs}`;
     if (props.length > 0) {
@@ -111,12 +112,6 @@ 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 += JSON.stringify(options, null, 2);
+        templateString += `'${findModel.targetAttr}', '${findModel.event}', '${findModel.externalEvent}'`;
     }
@@ -147,8 +142,20 @@ templateString += `);\n`;
 import { defineContainer } from './vue-component-lib/utils';\n`;
-    const typeImports = !outputTarget.componentCorePackage
-        ? `import type { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';\n`
-        : `import type { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}';\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();
     let sourceImports = '';
     let registerCustomElements = '';
-    if (outputTarget.includePolyfills && outputTarget.includeDefineCustomElements) {
+    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) {
         sourceImports = `import { ${APPLY_POLYFILLS}, ${REGISTER_CUSTOM_ELEMENTS} } from '${pathToCorePackageLoader}';\n`;
@@ -155,0 +162,0 @@ registerCustomElements = `${APPLY_POLYFILLS}().then(() => ${REGISTER_CUSTOM_ELEMENTS}());`;

dist/index.js

@@ -83,2 +83,3 @@ import path from 'path';
     const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
+    const importAs = tagNameAsPascal + 'Cmp';
     let props = [];
@@ -95,3 +96,3 @@ if (Array.isArray(cmpMeta.properties) && cmpMeta.properties.length > 0) {
     let templateString = `
-export const ${tagNameAsPascal} = /*@__PURE__*/ defineContainer<${importTypes}.${tagNameAsPascal}>('${cmpMeta.tagName}'`;
+export const ${tagNameAsPascal} = /*@__PURE__*/ defineContainer<${importTypes}.${tagNameAsPascal}>('${cmpMeta.tagName}', ${importAs}`;
     if (props.length > 0) {
@@ -102,12 +103,6 @@ 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 += JSON.stringify(options, null, 2);
+        templateString += `'${findModel.targetAttr}', '${findModel.event}', '${findModel.externalEvent}'`;
     }
@@ -138,8 +133,20 @@ templateString += `);\n`;
 import { defineContainer } from './vue-component-lib/utils';\n`;
-    const typeImports = !outputTarget.componentCorePackage
-        ? `import type { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';\n`
-        : `import type { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}';\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();
     let sourceImports = '';
     let registerCustomElements = '';
-    if (outputTarget.includePolyfills && outputTarget.includeDefineCustomElements) {
+    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) {
         sourceImports = `import { ${APPLY_POLYFILLS}, ${REGISTER_CUSTOM_ELEMENTS} } from '${pathToCorePackageLoader}';\n`;
@@ -146,0 +153,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 } from './utils';
+import { normalizePath, readPackageJson, relativeImport, sortBy, dashToPascalCase } from './utils';
 export async function vueProxyOutput(config, compilerCtx, outputTarget, components) {
@@ -24,8 +24,20 @@ const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
 import { defineContainer } from './vue-component-lib/utils';\n`;
-    const typeImports = !outputTarget.componentCorePackage
-        ? `import type { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';\n`
-        : `import type { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}';\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();
     let sourceImports = '';
     let registerCustomElements = '';
-    if (outputTarget.includePolyfills && outputTarget.includeDefineCustomElements) {
+    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) {
         sourceImports = `import { ${APPLY_POLYFILLS}, ${REGISTER_CUSTOM_ELEMENTS} } from '${pathToCorePackageLoader}';\n`;
@@ -32,0 +44,0 @@ registerCustomElements = `${APPLY_POLYFILLS}().then(() => ${REGISTER_CUSTOM_ELEMENTS}());`;

dist/types.d.ts

@@ -9,8 +9,5 @@ export interface OutputTargetVue {
     includeDefineCustomElements?: boolean;
+    useCustomElementsBuild?: boolean;
+    routerLinkComponents?: string[];
 }
-export interface ComponentOptions {
-    modelProp?: string;
-    modelUpdateEvent?: string | string[];
-    externalModelUpdateEvent?: string;
-}
 export interface ComponentModelConfig {
@@ -17,0 +14,0 @@ elements: string | string[];

package.json

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

vue-component-lib/utils.ts

@@ -17,8 +17,2 @@ import { VNode, defineComponent, getCurrentInstance, h, inject, ref, Ref } from 'vue';
 
-interface ComponentOptions {
-  modelProp?: string;
-  modelUpdateEvent?: string | string[];
-  externalModelUpdateEvent?: string;
-}
-
 const getComponentClasses = (classes: unknown) => {
@@ -40,9 +34,9 @@ return (classes as string)?.split(' ') || [];
 * in each component's TSX file.
-* @prop componentOptions - An object that defines additional
-* options for the component such as router or v-model
-* integrations.
+* @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. ionChange)
 */
-export const defineContainer = <Props>(name: string, componentProps: string[] = [], componentOptions: ComponentOptions = {}) => {
-  const { modelProp, modelUpdateEvent, externalModelUpdateEvent } = componentOptions;
+export const defineContainer = <Props>(name: string, customElement: any, componentProps: string[] = [], modelProp?: string, modelUpdateEvent?: string, externalModelUpdateEvent?: string) => {
 
+  customElements.define(name, customElement);
+
   /**
@@ -49,0 +43,0 @@ * Create a Vue component wrapper around a Web Component.

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

Improved metrics

Total package byte prevSize

40364

increased by3.89%

Lines of code

848

increased by1.44%

No dependency changes