stencil-vue2-output-target - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

dist/generate-vue-component.d.ts

@@ -1,3 +0,3 @@
-import type { ComponentCompilerMeta } from "@stencil/core/internal";
-import type { ComponentModelConfig } from "./types";
-export declare const createComponentDefinition: (importTypes: string, componentModelConfigs: ComponentModelConfig[] | undefined) => (cmpMeta: Pick<ComponentCompilerMeta, "properties" | "tagName" | "methods" | "events">) => string;
+import type { ComponentCompilerMeta } from '@stencil/core/internal';
+import type { ComponentModelConfig } from './types';
+export declare const createComponentDefinition: (importTypes: string, componentModelConfigs: ComponentModelConfig[] | undefined) => (cmpMeta: Pick<ComponentCompilerMeta, 'properties' | 'tagName' | 'methods' | 'events'>) => string;

dist/generate-vue-component.js

@@ -1,11 +0,11 @@
-import { dashToPascalCase } from "./utils";
+import { dashToPascalCase } from './utils';
 export const createComponentDefinition = (importTypes, componentModelConfigs) => (cmpMeta) => {
     const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
-    let props = "";
-    let model = "";
-    let methods = "";
+    let props = '';
+    let model = '';
+    let methods = '';
     if (Array.isArray(cmpMeta.properties) && cmpMeta.properties.length > 0) {
         const relevantPropsConfig = cmpMeta.properties
             .map((prop) => `    ${prop.name}: {} as PropOptions<${importTypes}.${tagNameAsPascal}['${prop.name}']>,`)
-            .join("\n");
+            .join('\n');
         props = `
@@ -34,3 +34,3 @@ props: {
             .map((method) => `    ${method.name}: createCommonMethod('${method.name}') as ${importTypes}.${tagNameAsPascal}['${method.name}'],`)
-            .join("\n");
+            .join('\n');
         methods = `
@@ -46,13 +46,6 @@ methods: {
 ${methods}
-  updated: function() {
-    Object.keys(this.$props).forEach((prop) => {
-      if (this[prop]){
-        this.$refs.wc[prop] = this[prop];
-      }
-    });
-  },
   render: createCommonRender('${cmpMeta.tagName}', [${cmpMeta.events
         .map((e) => `'${e.name}'`)
-        .join(", ")}]),
+        .join(', ')}]),
 });\n`;
 };

dist/index.cjs.js

@@ -92,9 +92,9 @@ 'use strict';
     const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
-    let props = "";
-    let model = "";
-    let methods = "";
+    let props = '';
+    let model = '';
+    let methods = '';
     if (Array.isArray(cmpMeta.properties) && cmpMeta.properties.length > 0) {
         const relevantPropsConfig = cmpMeta.properties
             .map((prop) => `    ${prop.name}: {} as PropOptions<${importTypes}.${tagNameAsPascal}['${prop.name}']>,`)
-            .join("\n");
+            .join('\n');
         props = `
@@ -123,3 +123,3 @@ props: {
             .map((method) => `    ${method.name}: createCommonMethod('${method.name}') as ${importTypes}.${tagNameAsPascal}['${method.name}'],`)
-            .join("\n");
+            .join('\n');
         methods = `
@@ -135,12 +135,5 @@ methods: {
 ${methods}
-  updated: function() {
-    Object.keys(this.$props).forEach((prop) => {
-      if (this[prop]){
-        this.$refs.wc[prop] = this[prop];
-      }
-    });
-  },
   render: createCommonRender('${cmpMeta.tagName}', [${cmpMeta.events
         .map((e) => `'${e.name}'`)
-        .join(", ")}]),
+        .join(', ')}]),
 });\n`;
@@ -147,0 +140,0 @@ };

dist/index.js

@@ -83,9 +83,9 @@ import path from 'path';
     const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
-    let props = "";
-    let model = "";
-    let methods = "";
+    let props = '';
+    let model = '';
+    let methods = '';
     if (Array.isArray(cmpMeta.properties) && cmpMeta.properties.length > 0) {
         const relevantPropsConfig = cmpMeta.properties
             .map((prop) => `    ${prop.name}: {} as PropOptions<${importTypes}.${tagNameAsPascal}['${prop.name}']>,`)
-            .join("\n");
+            .join('\n');
         props = `
@@ -114,3 +114,3 @@ props: {
             .map((method) => `    ${method.name}: createCommonMethod('${method.name}') as ${importTypes}.${tagNameAsPascal}['${method.name}'],`)
-            .join("\n");
+            .join('\n');
         methods = `
@@ -126,12 +126,5 @@ methods: {
 ${methods}
-  updated: function() {
-    Object.keys(this.$props).forEach((prop) => {
-      if (this[prop]){
-        this.$refs.wc[prop] = this[prop];
-      }
-    });
-  },
   render: createCommonRender('${cmpMeta.tagName}', [${cmpMeta.events
         .map((e) => `'${e.name}'`)
-        .join(", ")}]),
+        .join(', ')}]),
 });\n`;
@@ -138,0 +131,0 @@ };

package.json

 {
   "name": "stencil-vue2-output-target",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Vue2  output target for @stencil/core components.",
@@ -32,6 +32,9 @@ "main": "dist/index.cjs.js",
   "devDependencies": {
-    "@types/jest": "^26.0.10",
+    "@stencil/core": "^1.17.3",
+    "@types/jest": "^26.0.9",
     "@types/node": "^14.6.0",
-    "jest": "^26.4.1",
+    "jest": "^26.3.0",
+    "np": "^6.4.0",
     "rollup": "^2.26.4",
+    "ts-jest": "^26.2.0",
     "typescript": "^4.0.2",
@@ -38,0 +41,0 @@ "vue": "^2.6.12"

README.md

@@ -0,1 +1,4 @@
+[![npm version](https://img.shields.io/npm/v/stencil-vue2-output-target.svg?style=flat)](https://www.npmjs.com/package/stencil-vue2-output-target)
+[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/diondree/stencil-vue2-output-target/blob/master/LICENSE.md)
+
 # Vue 2 Stencil Output Targets
@@ -2,0 +5,0 @@

vue-component-lib/utils.ts

@@ -21,3 +21,9 @@ import Vue, { VNode, CreateElement } from "vue";
     }, vueElement.$listeners);
-
+    const attributes = vueElement.$props
+      ? Object.keys(vueElement.$props).reduce((attrs: any, prop: string) => {
+          const attributeName = toDashCase(prop);
+          attrs[attributeName] = vueElement.$props[prop];
+          return attrs;
+        }, {})
+      : {};
     return createElement(
@@ -29,2 +35,3 @@ tagName,
         on: allListeners,
+        attrs: attributes,
       },
@@ -39,1 +46,11 @@ [vueElement.$slots.default]
   } as unknown;
+
+export const toLowerCase = (str: string) => str.toLowerCase();
+
+export const toDashCase = (str: string) =>
+  toLowerCase(
+    str
+      .replace(/([A-Z0-9])/g, (g) => " " + g[0])
+      .trim()
+      .replace(/ /g, "-")
+  );

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

39789

increased by3.95%

Number of package files

17

increased by6.25%

Number of lines in readme file

60

increased by5.26%

Worsened metrics

Dev dependency count

9

increased by50%

Lines of code

851

decreased by-0.58%

No dependency changes