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

Comparing version 0.4.1 to 0.4.2-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) {
@@ -18,0 +19,0 @@ templateString += `, [

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) {
@@ -146,8 +147,20 @@ templateString += `, [
 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`;
@@ -154,0 +167,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) {
@@ -137,8 +138,20 @@ templateString += `, [
 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`;
@@ -145,0 +158,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,2 +9,3 @@ export interface OutputTargetVue {
     includeDefineCustomElements?: boolean;
+    useCustomElementsBuild?: boolean;
 }
@@ -11,0 +12,0 @@ export interface ComponentOptions {

package.json

 {
   "name": "@stencil/vue-output-target",
-  "version": "0.4.1",
+  "version": "0.4.2-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

@@ -39,9 +39,10 @@ import { VNode, defineComponent, getCurrentInstance, h, inject, ref, Ref } from 'vue';
 * 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 = {}) => {
+export const defineContainer = <Props>(name: string, customElement: any, componentProps: string[] = [], componentOptions: ComponentOptions = {}) => {
   const { modelProp, modelUpdateEvent, externalModelUpdateEvent } = componentOptions;
 
+  customElements.define(name, customElement);
+
   /**
@@ -48,0 +49,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

41177

increased by6.12%

Lines of code

875

increased by4.79%

No dependency changes