🏷️ JS to TS

Author: anhle

example/App.vue

@@ -1,70 +1,150 @@
 <template>
-  <div>
-    <div>
+  <div class="form">
+    <div class="form-item">
       <label>First Name</label>
-      <input v-model="info.firstName" />
+      <input v-model="info.firstName" :class="{ 'input-error': result.firstName.$invalid }" />
+      <div v-if="result.firstName.$invalid" class="form-item-message">{{ result.firstName.$messages }}</div>
     </div>
-    <div>
+    <div class="form-item">
       <label>Last Name</label>
-      <input v-model="info.lastName" />
+      <input v-model="info.lastName" :class="{ 'input-error': result.lastName.$invalid }" />
+      <div v-if="result.lastName.$invalid" class="form-item-message">{{ result.lastName.$messages }}</div>
     </div>
-    <div>
+    <div class="form-item">
       <label>District</label>
-      <input v-model="info.address.district" />
+      <input v-model="info.address.district" :class="{ 'input-error': result.address.district.$invalid }" />
+      <div v-if="result.address.district.$invalid" class="form-item-message">
+        {{ result.address.district.$messages }}
+      </div>
     </div>
-    <div>
+    <div class="form-item">
       <label>Street</label>
-      <input v-model="info.address.street" />
+      <input v-model="info.address.street" :class="{ 'input-error': result.address.street.$invalid }" />
+      <div v-if="result.address.street.$invalid" class="form-item-message">{{ result.address.street.$messages }}</div>
     </div>
-    <div>
-      <button @click="result.address.street.$test()">Test</button>
+    <div class="form-item">
+      <label>Number</label>
+      <input v-model="info.address.no" :class="{ 'input-error': result.address.no.$invalid }" />
+      <div v-if="result.address.no.$invalid" class="form-item-message">{{ result.address.no.$messages }}</div>
     </div>
-    <div>{{ result }}</div>
+    <button class="validate-btn" @click="validate">Validate</button>
+  </div>
+  <div class="tree">
+    <JsonTreeView :data="JSON.stringify(result)" />
   </div>
 </template>
 
-<script>
-import { ref, reactive } from 'vue';
-import useValidate from 'vue-tiny-validate';
-export default {
+<script lang="ts">
+import { ref, reactive, defineComponent } from 'vue';
+import { JsonTreeView } from 'json-tree-view-vue3';
+import useValidate from '../src';
+export default defineComponent({
   name: 'App',
+  components: {
+    JsonTreeView,
+  },
   setup() {
     const info = reactive({
-      firstName: 'Duy Anh',
-      lastName: 'Le',
+      firstName: '',
+      lastName: '',
       address: {
-        district: 'Thanh Xuan',
-        street: 'Quan Nhan',
+        district: '',
+        street: '',
+        no: '',
       },
     });
 
-    const rules = reactive({
-      firstName: [{ $test: value => value !== '', $message: 'This field is required' }],
-      lastName: [{ $test: value => value !== '', $message: 'This field is required' }],
+    const required = (value: string): boolean => value !== '';
+
+    const atLeastTenChars = (value: string): boolean => String(value).length >= 10;
+
+    const isNumber = (value: string): boolean => value !== '' && !isNaN(Number(value));
+
+    const isNumberMessage = (value: string): string => {
+      return `Input ${value} is not allowed. A number is required`;
+    };
+
+    const rules = {
+      firstName: [{ $test: required, $message: 'Input is required' }],
+      lastName: [{ $test: required, $message: 'Input is required' }],
       address: {
-        district: [
-          {
-            $test: value => value.length > 5,
-            $message: 'This field must have at least 5 characters',
-          },
-        ],
+        district: [{ $test: required, $message: 'Input is required' }],
         street: [
-          {
-            $test: value => value.length > 10,
-            $message: 'This field must have at least 10 characters',
-          },
+          { $test: required, $message: 'Input is required' },
+          { $test: atLeastTenChars, $message: 'At least 10 chars' },
+        ],
+        no: [
+          { $test: required, $message: 'Input is required' },
+          { $test: isNumber, $message: isNumberMessage },
         ],
       },
-    });
+    };
 
-    const { result, test } = useValidate(info, rules);
+    const { result } = useValidate(info, rules);
 
-    return { info, result, test };
+    const validate = () => {
+      result.value.$test();
+    };
+
+    return { info, result, validate };
   },
-};
+});
 </script>
 <style>
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 16px;
+}
+
+.form-item {
+  margin-bottom: 24px;
+  position: relative;
+}
+
+.form-item-message {
+  position: absolute;
+  bottom: -20px;
+  color: mediumvioletred;
+  font-size: 14px;
+}
+
+.root-item {
+  font-family: monospace;
+  border: 1px solid lightgray;
+  border-radius: 4px;
+}
+
+.json-view-item:not(.root-item) {
+  margin-left: 32px;
+}
+
+.validate-btn {
+  display: block;
+  font-size: 16px;
+  background: lightgray;
+  border-radius: 4px;
+  border: 1px solid grey;
+  margin-bottom: 16px;
+  padding: 8px;
+}
+
 label {
   display: block;
+  margin-bottom: 4px;
+}
+
+input {
+  display: inline-block;
+  width: 100%;
+  padding: 8px 16px;
+  margin: 0;
+  border-radius: 4px;
+  border: 1px solid lightgray;
+}
+
+.input-error {
+  border-color: red;
 }
 </style>

example/index.html

@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/main.js"></script>
+    <script type="module" src="/main.ts"></script>
   </body>
 </html>

example/main.js

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')

example/main.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

example/shims-vue.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

example/vite.env.d.ts

@@ -24,10 +24,11 @@
   },
   "homepage": "https://github.com/FrontLabsOfficial/vue-tiny-validate/tree/master#readme",
   "scripts": {
+    "type": "tsc src/index.ts --declaration --emitDeclarationOnly --skipLibCheck --outDir dist",
     "clean": "rm -rf dist dist-example",
     "pretty": "prettier --write '**/*.{js,css,md,vue,html}'",
     "dev": "vite",
-    "build": "yarn clean && yarn pretty && vite build --mode library && yarn size",
+    "build": "yarn clean && yarn pretty && vite build --mode library && yarn type && yarn size",
     "build:example": "year clean && yarn pretty && vite build --mode example",
     "prepare": "husky install",
     "size": "size-limit",
@@ -38,10 +39,13 @@
     "@vitejs/plugin-vue": "^1.2.3",
     "@vue/compiler-sfc": "^3.0.5",
     "husky": ">=6",
+    "json-tree-view-vue3": "^0.1.15",
     "lint-staged": ">=10",
     "np": "^7.5.0",
     "prettier": "^2.3.0",
+    "sass": "^1.34.1",
     "size-limit": "^4.11.0",
+    "typescript": "^4.3.2",
     "vite": "^2.3.5",
     "vue": "^3.0.11"
   },

package.json

@@ -0,0 +1,9 @@
+export const TEST_FUNCTION = (): boolean => true;
+
+export const ERROR_MESSAGE: string = '';
+
+export const RESULT = { $invalid: false, $errors: [], $messages: [], $test: () => {}, $reset: () => {} };
+
+export const hasOwn = (obj: { [key: string]: any }, key: string): boolean => typeof obj[key] !== 'undefined';
+
+export const isObject = (obj: { [key: string]: any }): boolean => Object.prototype.toString.call(obj) === '[object Object]';

src/helpers.ts

@@ -1,36 +1,21 @@
-import { ref, computed, reactive, watch, isRef } from 'vue';
+import { computed, reactive } from 'vue';
+import { TEST_FUNCTION, ERROR_MESSAGE, RESULT, hasOwn, isObject } from './helpers'
+import { Data, Rules, Rule, Dirt, Entry, UnknownObject, Result, InitializeArgs, EntryData, EntryItem, Error } from './types'
 
-const TEST_FUNCTION = () => true;
+const useValidate = (data: Data, rules: Rules) => {
+  const dirt = reactive<Dirt>({});
+  const rawData = reactive<UnknownObject>({});
+  const entry = reactive<Entry>({});
+  const result = computed<Result>(() => getResult(entry, dirt));
 
-const ERROR_MESSAGE = '';
+  const getResult = (entry: Entry, dirt: Dirt): Result => {
+    const result: Result = { ...RESULT, $dirty: false };
+    const keys: Array<string> = Object.keys(entry);
 
-const RESULT = { $invalid: false, $errors: [], $messages: [] };
+    let testFns: Array<Function> = [];
+    let resetFns: Array<Function> = [];
 
-const hasOwn = (obj, key) => typeof obj[key] !== 'undefined';
-
-const isObject = obj => Object.prototype.toString.call(obj) === '[object Object]';
-
-const useValidate = (data, rules) => {
-  const dirt = reactive({});
-
-  const rawData = reactive({});
-
-  const entry = reactive({});
-
-  const result = computed(() => getResult(entry, dirt));
-
-  const getResult = (entry, dirt) => {
-    const result = {
-      ...RESULT,
-      $dirty: false,
-    };
-
-    const keys = Object.keys(entry);
-
-    let testFns = [];
-    let resetFns = [];
-
-    const setOverallResult = (result, childResult) => {
+    const setOverallResult = (result: Result, childResult: Result): void => {
       if (!result.$dirty && childResult.$dirty) result.$dirty = true;
       if (!result.$invalid && childResult.$invalid) result.$invalid = true;
 
@@ -43,7 +28,7 @@ const useValidate = (data, rules) => {
 
     keys.forEach(key => {
       if (isObject(entry[key]) && !hasOwn(entry[key], '$invalid')) {
-        const childResult = getResult(entry[key], dirt[key]);
+        const childResult = getResult(entry[key] as Entry, dirt[key] as Dirt);
         result[key] = { ...childResult };
 
         setOverallResult(result, childResult);
@@ -66,24 +51,24 @@ const useValidate = (data, rules) => {
     return result;
   };
 
-  const initialize = (data, rules, dirt, rawData, entry) => {
-    const keys = Object.keys(data);
+  const initialize = (data: Data, rules: Rules, dirt: Dirt, rawData: UnknownObject, entry: Entry): void => {
+    const keys: Array<string> = Object.keys(data);
 
-    keys.forEach(key => {
+    keys.forEach((key) => {
       if (isObject(data[key])) {
         rawData[key] = {};
         dirt[key] = reactive({});
         entry[key] = reactive({});
 
-        const args = [data[key], rules[key], dirt[key], rawData[key], entry[key]];
+        const args :InitializeArgs = [data[key], rules[key] as Rules, dirt[key] as Dirt, rawData[key], entry[key] as Entry];
 
         return initialize(...args);
       }
 
       dirt[key] = false;
       rawData[key] = data[key];
 
-      const entryData = { data, rules, dirt, rawData, entry };
+      const entryData: EntryData = { data, rules, dirt, rawData, entry };
 
       entry[key] = {
         ...RESULT,
@@ -93,34 +78,36 @@ const useValidate = (data, rules) => {
     });
   };
 
-  const test = (entryData, key) => {
+  const test = (entryData: EntryData, key: string): void => {
     const { data, rules, dirt, rawData, entry } = entryData;
 
     dirt[key] = dirt[key] || data[key] !== rawData[key];
 
-    let $errors = [];
-    let $messages = [];
+    let $errors: Array<Error> = [];
+    let $messages: Array<string> = [];
+
+    const ruleItem = rules[key] as Array<Rule>
 
-    rules[key].forEach((rule, index) => {
-      const { $test = DEFAULT_TEST_FUNCTION, $message = DEFAULT_ERROR_MESSAGE } = rule;
+    ruleItem.forEach((rule, index) => {
+      const { $test = TEST_FUNCTION, $message = ERROR_MESSAGE } = rule;
       const testValue = $test(data[key]);
 
       if (!testValue) {
-        const testMessage = typeof $message === 'function' ? $message(data) : $message;
+        const testMessage = typeof $message === 'function' ? $message(data[key]) : $message;
         $messages = [...$messages, testMessage];
         $errors = [...$errors, { name: $test.name, index }];
       }
     });
 
-    entry[key] = { ...entry[key], $errors, $messages, $invalid: Boolean($errors.length) };
+    entry[key] = { ...entry[key], $errors, $messages, $invalid: Boolean($errors.length) } as EntryItem;
   };
 
-  const reset = (entryData, key) => {
+  const reset = (entryData: EntryData, key: string): void => {
     const { dirt } = entryData;
     dirt[key] = false;
   };
 
-  initialize(isRef(data) ? data.value : data, rules, dirt, rawData, entry);
+  initialize(data, rules, dirt, rawData, entry);
 
   return { result, test: result.value.$test, reset: result.value.$reset };
 };