typescript annotations

ComponentDisplay to typescript enum. remove 'enum' from dependencies.

TS errors remaining: 133 in 35 files

package.json

@@ -36,10 +36,24 @@
   },
   "issues": "https://github.com/velis74/DynamicForms/issues",
   "peerDependencies": {
+    "axios": "^1.2.0",
+    "bootstrap": "<5.0.0",
+    "bootstrap-vue": "^2.21.2",
+    "lodash": "^4.17.15",
     "vue": "^3.2.45",
+    "vue-ionicon": "^2.1.0",
+    "vue-router": "^4.1.6",
     "vuetify": "^3.0.1"
   },
   "dependencies": {
+    "luxon": "^1.28.1",
+    "resize-observer-polyfill": "^1.5.1",
+    "vue-datetime3": "^1.0.2",
+    "vue-multiselect": "^3.0.0-beta.1",
+    "vue-observe-visibility": "^1.0.0",
+    "weekstart": "^1.1.0"
+  },
+  "devDependencies": {
     "@fullcalendar/core": "^6.1.4",
     "@fullcalendar/daygrid": "^6.1.4",
     "@fullcalendar/interaction": "^6.1.4",
@@ -49,24 +63,6 @@
     "@fullcalendar/resource-timegrid": "^6.1.4",
     "@fullcalendar/timegrid": "^6.1.4",
     "@fullcalendar/vue3": "^6.1.4",
-    "axios": "^1.2.0",
-    "bootstrap": "<5.0.0",
-    "bootstrap-vue": "^2.21.2",
-    "enum": "^3.0.4",
-    "lodash": "^4.17.15",
-    "luxon": "^1.28.1",
-    "resize-observer-polyfill": "^1.5.1",
-    "suncalc": "^1.9.0",
-    "vue": "^3.2.45",
-    "vue-datetime3": "^1.0.2",
-    "vue-ionicon": "^2.1.0",
-    "vue-multiselect": "^3.0.0-beta.1",
-    "vue-observe-visibility": "^1.0.0",
-    "vue-router": "^4.1.6",
-    "vuetify": "^3.0.1",
-    "weekstart": "^1.1.0"
-  },
-  "devDependencies": {
     "@types/jest": "^29.2.5",
     "@types/lodash": "^4.14.191",
     "@types/luxon": "^1.27.1",
@@ -82,6 +78,7 @@
     "jsdom": "^21",
     "np": "^7.7.0",
     "sass": "^1",
+    "suncalc": "^1.9.0",
     "typescript": "^4.9.3",
     "vite": "^4",
     "vite-plugin-eslint": "^1.8.1",

tsconfig.build.json

@@ -7,7 +7,8 @@
   "compilerOptions": {
     "declaration": true,
     "declarationMap": true,
-    "outDir": "dist",
+    "sourceMap": true,
+    "outDir": "./dist",
     "skipLibCheck": true
   }
 }

vite.config.ts

@@ -44,10 +44,10 @@ export default defineConfig({
     axiosRedirectConfig(),
   ],
   resolve: {
-    alias: {
-      '@': fileURLToPath(new URL_('./src', import.meta.url)),
-      '~': fileURLToPath(new URL_('./node_modules', import.meta.url)),
-    },
+    // alias: {
+    //   '@': fileURLToPath(new URL_('./src', import.meta.url)),
+    //   '~': fileURLToPath(new URL_('./node_modules', import.meta.url)),
+    // },
     extensions: [
       '.js',
       '.ts',
@@ -72,14 +72,10 @@ export default defineConfig({
       name: 'dynamicforms.[name]',
     },
     rollupOptions: {
-      external: ['vue', 'vue-router', 'vuetify'],
+      external: ['axios', 'bootstrap', 'bootstrap-vue', 'lodash', 'vue', 'vue-ionicon', 'vue-router', 'vuetify'],
       output: {
         sourcemap: true,
-        globals: {
-          vue: 'vue',
-          'vue-router': 'vue-router',
-          vuetify: 'vuetify'
-        }
+        globals: (id: string) => id, // all external modules are currently not aliased to anything but their own names
       }
     }
   },

vue/components/api_consumer/api-consumer-loader.vue

@@ -11,7 +11,7 @@ import APIConsumerLogic from './api-consumer-logic';
 import APIConsumer from './api-consumer.vue';
 import ComponentDisplay from './component-display';
 
-export default /* #__PURE__ */ defineComponent({
+export default defineComponent({
   name: 'APIConsumerLoader',
   components: { APIConsumer },
   emits: ['title-change', 'load-route'],

vue/components/api_consumer/api-consumer-logic.ts

@@ -23,7 +23,7 @@ class APIConsumerLogic implements APIConsumer.LogicInterface {
 
   private formFields: { [key: string]: unknown };
 
-  private formLayout: APIConsumer.FormLayoutType;
+  private formLayout: APIConsumer.FormLayoutType | null;
 
   private formComponent: string; // component responsible for rendering the form layout
 
@@ -39,11 +39,11 @@ class APIConsumerLogic implements APIConsumer.LogicInterface {
 
   private requestedPKValue: null;
 
-  private ordering: { parameter: string, style: null, counter: number };
+  public ordering: { parameter: string, style: null, counter: number };
 
   private filterDefinition: TableFilterRow | null;
 
-  private filterData: Object;
+  private filterData: FormPayload;
 
   private titles: APIConsumer.Titles;
 
@@ -83,7 +83,7 @@ class APIConsumerLogic implements APIConsumer.LogicInterface {
       counter: 0,
     };
     this.filterDefinition = null;
-    this.filterData = {};
+    this.filterData = new FormPayload();
     this.titles = { new: '', edit: '', table: '' };
   }
 
@@ -265,7 +265,7 @@ class APIConsumerLogic implements APIConsumer.LogicInterface {
     if (error && Object.keys(error).length) await this.dialogForm(pk, this.formData);
   }
 
-  async filter(filterData = null) {
+  async filter(filterData?: FormPayload) {
     if (filterData) this.filterData = filterData;
     await this.reload(true);
   }

vue/components/api_consumer/api-consumer.vue

@@ -6,6 +6,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
+import Action from '../actions/action';
+import FormPayload from '../form/definitions/form-payload';
+import TableColumn from '../table/definitions/column';
 import RowTypesEnum from '../table/row-types-enum';
 
 import APIConsumerLogic from './api-consumer-logic';
@@ -21,9 +24,12 @@ export default /* #__PURE__ */ defineComponent({
     /**
      * What UX should the component render
      */
-    displayComponent: { type: Object, required: true, validator(value) { return ComponentDisplay.isDefined(value); } },
+    displayComponent: {
+      type: Number,
+      required: true,
+      validator(value: ComponentDisplay) { return ComponentDisplay.isDefined(value); },
+    },
   },
-  data() { return { orderingCounter: this.consumer.ordering.counter.counter }; },
   computed: {
     renderComponent() {
       switch (this.displayComponent) {
@@ -49,26 +55,30 @@ export default /* #__PURE__ */ defineComponent({
     },
   },
   methods: {
-    actionDelete(actionData, payload) {
+    actionDelete(actionData: Action, payload: FormPayload) {
       this.consumer.deleteRow(payload);
       return true;
     },
-    actionValueChanged(actionData, payload) {
+    actionValueChanged(actionData: Action, payload: FormPayload) {
       this.consumer.filter(payload);
       return true;
     },
     async actionAdd() {
       await this.consumer.dialogForm('new');
       return true;
     },
-    async actionEdit(actionData, payload, extraData) {
+    async actionEdit(actionData: Action, payload: FormPayload, extraData: { rowType: RowTypesEnum }) {
       if (extraData.rowType !== RowTypesEnum.Data) return false;
       await this.consumer.dialogForm(payload[this.consumer.pkName]);
       return true;
     },
-    actionSort(action, payload, extraData) {
+    actionSort(
+      actionData: Action,
+      payload: FormPayload,
+      extraData: { rowType: RowTypesEnum, column?: TableColumn, event: KeyboardEvent },
+    ) {
       // This is the default handler for ordering
-      if (extraData.rowType === RowTypesEnum.Label && action.position === 'ROW_CLICK' && extraData.column) {
+      if (extraData.rowType === RowTypesEnum.Label && actionData.position === 'ROW_CLICK' && extraData.column) {
         const oldChangeCounter = extraData.column.ordering.changeCounter;
         extraData.column.ordering.handleColumnHeaderClick(extraData.event);
         if (oldChangeCounter !== extraData.column.ordering.changeCounter) this.consumer.reload();

vue/components/api_consumer/component-display.ts

@@ -1,8 +1,24 @@
-import Enum from 'enum';
-
-export default new Enum({
+enum ComponentDisplay {
   // This enum is actually declared in dynamicforms.mixins.field_render.py
-  TABLE: 1,
-  FORM: 2,
-  DIALOG: 3,
-}, { freeze: true });
+  TABLE = 1,
+  FORM = 2,
+  DIALOG = 3,
+}
+
+namespace ComponentDisplay {
+  export function fromString(display: string) {
+    if (display.toUpperCase() === 'TABLE') return ComponentDisplay.TABLE;
+    if (display.toUpperCase() === 'FORM') return ComponentDisplay.FORM;
+    if (display.toUpperCase() === 'DIALOG') return ComponentDisplay.DIALOG;
+    return ComponentDisplay.TABLE;
+  }
+
+  export function isDefined(display: number | string) {
+    const check = (typeof display === 'number') ? display : ComponentDisplay.fromString(display as string);
+    return Object.values(ComponentDisplay).includes(check);
+  }
+}
+
+Object.freeze(ComponentDisplay);
+
+export default ComponentDisplay;

vue/components/table/definitions/column-ordering.ts

@@ -1,6 +1,7 @@
 import OrderingDirection from './column-ordering-direction';
 
-type TransformationFunction = (columns: any[]) => undefined;
+type OrderingValue = { name: string, direction: OrderingDirection };
+type TransformationFunction = (columns: OrderingValue[]) => string[];
 
 export default class ColumnOrdering {
   direction: OrderingDirection;
@@ -102,9 +103,9 @@ export default class ColumnOrdering {
     this.changeCounter++;
   }
 
-  calculateOrderingValue(transformationFunction: TransformationFunction) {
-    // this method should be in TableColumns, but it seems Vue regenerates any array derivative to plain array
-    const cols = this.orderingArray.map((columnOrdering) => (
+  calculateOrderingValue(transformationFunction: TransformationFunction): string[] {
+    // TODO: this method should be in TableColumns, but it seems Vue regenerates any array derivative to plain array
+    const cols: OrderingValue[] = this.orderingArray.map((columnOrdering) => (
       { name: columnOrdering.column.name, direction: columnOrdering.direction }
     ));
     if (transformationFunction) return transformationFunction(cols);

vue/components/util/get-object-from-path.ts

@@ -1,7 +1,7 @@
-export default function getObjectFromPath(path) {
+export default function getObjectFromPath(path: string) {
   if (path) {
     try {
-      return path.split('.').reduce((res, val) => res[val] || {}, window);
+      return path.split('.').reduce((res: { [key: string]: any }, val: string) => res[val] || {}, window);
     } catch (e) {
       console.error(e);
     }