vue-facing-decorator - npm Package Compare versions

Comparing version 0.0.2 to 1.0.0

package.json

 {
   "name": "vue-facing-decorator",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

readme.md

 # Read me
 
-This repo is not released yet. Welcome to suggest and contribute. Message me on github.
+Welcome to suggest and contribute. Message me on github.
 
+# Install
+
+`npm install -S vue-facing-decorator`
+
 # Finished
 
 ```typescript
-import { Component, Ref, Base } from "ThisRepo";
+import {
+  Component,
+  Ref,
+  Watch,
+  Prop,
+  Inject,
+  Base,
+} from "vue-facing-decorator";
 
-//super class
+//super class, DO NOT SUPPORT ANY DECORATOR now
 class Sup extends Base {
   //reactivity super property
-  supProp = "supProp";
+  supProperty = "supProperty";
   //super method
@@ -18,3 +29,3 @@ supMethod() {}
   get supGetter() {
-    return "supFoo";
+    return "supGetter";
   }
@@ -24,13 +35,51 @@ }
 //component class
-@Component
+@Component({
+  //OPTION, component name
+  name: "MyComponent",
+  //OPTION, emits
+  emits: ["update:modelValue"],
+  //OPTION, provide object or function(this:Comp){return {foo:'bar'}}
+  provide: {
+    provideKey: "provideValue",
+  },
+  //OPTION, use modifier to modify component option built by vue-facing-decorator
+  modifier: (option: any) => {
+    console.log("generated optoin", option);
+    option.methods ??= {};
+    option.methods.method2 = function () {
+      console.log("method2");
+    };
+    return option;
+  },
+})
 export default class Comp extends Sup {
   //create a ref
   @Ref
-  ref!: HTMLDivElement;
+  readonly ref!: HTMLDivElement;
+  //create a prop
+  @Prop({
+    //prop options
+    required: true,
+    default: "default prop",
+    type: String,
+    validator(v: string) {
+      console.log("prop validator", v);
+      return true;
+    },
+  })
+  readonly prop!: string;
+  //v-model default prop
+  @Prop({
+    required: true,
+    type: Number,
+  })
+  readonly modelValue!: number;
+
   //reactivity property
-  prop = "prop";
+  property = "property";
   //getter
   get getter() {
-    return "foo";
+    return "getter";
   }
+
   //method
@@ -40,6 +89,37 @@ method() {
     this.$forceUpdate();
+    //set reactivity property
+    this.property += ">";
+    //trigger update v-model
+    this.$emit("update:modelValue", this.modelValue + 1);
   }
+
+  //create a watcher
+  @Watch("property", {
+    //watcher options
+    deep: true,
+    immediate: true,
+    flush: "post",
+  })
+  propertyWatcher(newv: string, oldv: string) {
+    console.log("property changed", newv, oldv);
+  }
+  //inject from acient components
+  @Inject({
+    //inject options
+    default: "defult value",
+    from: "provideAcientKey",
+  })
+  provideAcientKeyAlias!: string;
+
   mounted() {
     //vue lifecycle
-    console.log(this.ref,  this.prop, this.supProp,this.getter, this.supGetter);
+    console.log(
+      this.ref,
+      this.getter,
+      this.property,
+      this.supProperty,
+      this.supGetter,
+      this.prop,
+      this.provideAcientKeyAlias
+    );
   }
@@ -54,6 +134,17 @@ }
 export default defineComponent({
+  name: "MyComponent",
+  emits: ["update:modelValue"],
+  provide: {
+    provideKey: "provideValue",
+  },
+  inject: {
+    provideAcientKeyAlias: {
+      default: "defult value",
+      from: "provideAcientKey",
+    },
+  },
   data() {
     return {
-      supProp: "supProp",
-      prop: "prop",
+      supProperty: "supProperty",
+      property: "property",
     };
@@ -65,4 +156,13 @@ },
       this.$forceUpdate();
+      this.$emit("update:modelValue", this.modelValue + 1);
     },
+    method2() {
+      console.log("method2");
+    },
   },
+  watch: {
+    property: function (newv: string, oldv: string) {
+      console.log("property changed", newv, oldv);
+    },
+  },
   computed: {
@@ -79,6 +179,26 @@ supGetter() {
   },
+  props: {
+    prop: {
+      required: true,
+      default: "default prop",
+      type: String,
+      validator: function (v: string) {
+        console.log("prop validator", v);
+        return true;
+      } as any, // type error
+    },
+    modelValue: { type: Number, required: true },
+  },
   mounted() {
-    console.log(this.ref, this.prop, this.supProp, this.getter, this.supGetter);
+    console.log(
+      this.ref,
+      this.property,
+      this.supProperty,
+      this.getter,
+      this.supGetter,
+      this.prop,
+      (this as any).provideAcientKeyAlias //type error
+    );
   },
 });
 ```

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

50283

increased by5.26%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

198

increased by153.85%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes