The Great TypeScript Modernization Program Season 3 Episode 6: The Big One (#18014)

* Step 1

* Step 2

* False sense of confidence

* Couple more before dinner

* Update schema package

* Update format-title

* Upgrade specs file

* Close

* Replace ts-node-dev with tsx, and various others

* Replace lodash with lodash-es

* Add lodash-es types

* Update knex import

* More fun is had

* FSE

* Consolidate repos

* Various tweaks and fixes

* Fix specs

* Remove dependency on knex-schema-inspector

* Fix wrong imports of inspector

* Move shared exceptions to new package

* Move constants to separate module

* Move types to new types package

* Use directus/types

* I believe this is no longer needed

* [WIP] Start moving utils to esm

* ESMify Shared

* Move shared utils to  @directus/utils

* Use @directus/utils instead of @directus/shared/utils

* It runs!

* Use correct schemaoverview type

* Fix imports

* Fix the thing

* Start on new update-checker lib

* Use new update-check package

* Swap out directus/shared in app

* Pushing through the last bits now

* Dangerously make extensions SDK ESM

* Use @directus/types in tests

* Copy util function to test

* Fix linter config

* Add missing import

* Hot takes

* Fix build

* Curse these default exports

* No tests in constants

* Add tests

* Remove tests from types

* Add tests for exceptions

* Fix test

* Fix app tests

* Fix import in test

* Fix various tests

* Fix specs export

* Some more tests

* Remove broken integration tests

These were broken beyond repair.. They were also written before we really knew what we we're doing with tests, so I think it's better to say goodbye and start over with these

* Regenerate lockfile

* Fix imports from merge

* I create my own problems

* Make sharp play nice

* Add vitest config

* Install missing blackbox dep

* Consts shouldn't be in types

tsk tsk tsk tsk

* Fix type/const usage in extensions-sdk

* cursed.default

* Reduce circular deps

* Fix circular dep in items service

* vvv

* Trigger testing for all vendors

* Add workaround for rollup

* Prepend the file protocol for the ESM loader to be compatible with Windows
"WARN: Only URLs with a scheme in: file and data are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'"

* Fix postgres

* Schema package updates

Co-authored-by: Azri Kahar <42867097+azrikahar@users.noreply.github.com>

* Resolve cjs/mjs extensions

* Clean-up eslint config

* fixed extension concatination

* using string interpolation for consistency

* Revert MySQL optimisation

* Revert testing for all vendors

* Replace tsx with esbuild-kit/esm-loader

Is a bit faster and we can rely on the built-in `watch` and `inspect`
functionalities of Node.js

Note: The possibility to watch other files (.env in our case) might be
added in the future, see https://github.com/nodejs/node/issues/45467

* Use exact version for esbuild-kit/esm-loader

* Fix import

---------

Co-authored-by: ian <licitdev@gmail.com>
Co-authored-by: Brainslug <tim@brainslug.nl>
Co-authored-by: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>

app/src/views/private/components/comment-input.vue

@@ -72,7 +72,7 @@ import { md } from '@/utils/md';
 import { notify } from '@/utils/notify';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { userName } from '@/utils/user-name';
-import { User } from '@directus/shared/types';
+import { User } from '@directus/types';
 import axios, { CancelTokenSource } from 'axios';
 import { cloneDeep, throttle } from 'lodash';
 import { ComponentPublicInstance, computed, ref, watch } from 'vue';

app/src/views/private/components/drawer-batch.vue

@@ -30,7 +30,7 @@ import api from '@/api';
 import { VALIDATION_TYPES } from '@/constants';
 import { APIError } from '@/types/error';
 import { unexpectedError } from '@/utils/unexpected-error';
-import { getEndpoint } from '@directus/shared/utils';
+import { getEndpoint } from '@directus/utils';
 
 export default defineComponent({
 	props: {

app/src/views/private/components/drawer-collection.vue

@@ -48,9 +48,9 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, ref, computed, toRefs, watch } from 'vue';
-import { Filter } from '@directus/shared/types';
+import { Filter } from '@directus/types';
 import { usePreset } from '@/composables/use-preset';
-import { useCollection, useLayout } from '@directus/shared/composables';
+import { useCollection, useLayout } from '@directus/composables';
 import SearchInput from '@/views/private/components/search-input.vue';
 
 export default defineComponent({

app/src/views/private/components/drawer-item.vue

@@ -90,12 +90,12 @@ import { useFieldsStore } from '@/stores/fields';
 import { useRelationsStore } from '@/stores/relations';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { validateItem } from '@/utils/validate-item';
-import { useCollection } from '@directus/shared/composables';
-import { Field, Relation } from '@directus/shared/types';
+import { useCollection } from '@directus/composables';
+import { Field, Relation } from '@directus/types';
 import { getDefaultValuesFromFields } from '@/utils/get-default-values-from-fields';
 import { useEditsGuard } from '@/composables/use-edits-guard';
 import { useRouter } from 'vue-router';
-import { getEndpoint } from '@directus/shared/utils';
+import { getEndpoint } from '@directus/utils';
 
 interface Props {
 	collection: string;

app/src/views/private/components/export-sidebar-detail.vue

@@ -235,13 +235,13 @@ import api from '@/api';
 import { getPublicURL } from '@/utils/get-root-path';
 import { notify } from '@/utils/notify';
 import { readableMimeType } from '@/utils/readable-mime-type';
-import { Filter } from '@directus/shared/types';
+import { Filter } from '@directus/types';
 import { computed, reactive, ref, toRefs, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useCollection } from '@directus/shared/composables';
+import { useCollection } from '@directus/composables';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { debounce } from 'lodash';
-import { getEndpoint } from '@directus/shared/utils';
+import { getEndpoint } from '@directus/utils';
 import FolderPicker from '@/views/private/components/folder-picker.vue';
 import { usePermissionsStore } from '@/stores/permissions';
 

app/src/views/private/components/flow-sidebar-detail.vue

@@ -56,8 +56,8 @@ import api from '@/api';
 import { useFlowsStore } from '@/stores/flows';
 import { notify } from '@/utils/notify';
 import { unexpectedError } from '@/utils/unexpected-error';
-import { useCollection } from '@directus/shared/composables';
-import { FlowRaw } from '@directus/shared/types';
+import { useCollection } from '@directus/composables';
+import { FlowRaw } from '@directus/types';
 import { computed, ref, toRefs, unref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { translate } from '@/utils/translate-object-values';

app/src/views/private/components/layout-sidebar-detail.vue

@@ -18,7 +18,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed } from 'vue';
-import { useSync } from '@directus/shared/composables';
+import { useSync } from '@directus/composables';
 import { useExtensions } from '@/extensions';
 import { useExtension } from '@/composables/use-extension';
 

app/src/views/private/components/notifications-drawer.vue

@@ -60,10 +60,10 @@ import { useUserStore } from '@/stores/user';
 import { useNotificationsStore } from '@/stores/notifications';
 import { useCollectionsStore } from '@/stores/collections';
 import { storeToRefs } from 'pinia';
-import { Notification } from '@directus/shared/types';
+import { Notification } from '@directus/types';
 import api from '@/api';
 import { Header as TableHeader } from '@/components/v-table/types';
-import { Item } from '@directus/shared/types';
+import { Item } from '@directus/types';
 import { useRouter } from 'vue-router';
 import { parseISO } from 'date-fns';
 import { localizedFormatDistance } from '@/utils/localized-format-distance';

app/src/views/private/components/render-template.vue

@@ -30,7 +30,7 @@ import { useExtension } from '@/composables/use-extension';
 import { useFieldsStore } from '@/stores/fields';
 import { getDefaultDisplayForType } from '@/utils/get-default-display-for-type';
 import { translate } from '@/utils/translate-literal';
-import { Field } from '@directus/shared/types';
+import { Field } from '@directus/types';
 import { get } from 'lodash';
 import { computed, ref } from 'vue';
 

app/src/views/private/components/revisions-drawer-detail.vue

@@ -37,7 +37,7 @@
 
 <script lang="ts" setup>
 import { useRevisions } from '@/composables/use-revisions';
-import { abbreviateNumber } from '@directus/shared/utils';
+import { abbreviateNumber } from '@directus/utils';
 import { ref, toRefs, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import RevisionsDateGroup from './revisions-date-group.vue';

app/src/views/private/components/revisions-drawer-picker.vue

@@ -26,7 +26,7 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed, watch, ref } from 'vue';
 import { Revision } from '@/types/revisions';
-import { useSync } from '@directus/shared/composables';
+import { useSync } from '@directus/composables';
 import { localizedFormat } from '@/utils/localized-format';
 import { userName } from '@/utils/user-name';
 

app/src/views/private/components/revisions-drawer.vue

@@ -43,7 +43,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed, ref, watchEffect } from 'vue';
-import { useSync } from '@directus/shared/composables';
+import { useSync } from '@directus/composables';
 import { Revision } from '@/types/revisions';
 import RevisionsDrawerPicker from './revisions-drawer-picker.vue';
 import RevisionsDrawerPreview from './revisions-drawer-preview.vue';

app/src/views/private/components/search-input.vue

@@ -45,9 +45,9 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, ref, watch, PropType, computed, inject, Ref } from 'vue';
-import { Filter } from '@directus/shared/types';
+import { Filter } from '@directus/types';
 import { isObject } from 'lodash';
-import { useElementSize } from '@directus/shared/composables';
+import { useElementSize } from '@directus/composables';
 
 export default defineComponent({
 	props: {

app/src/views/private/components/shares-sidebar-detail.vue

@@ -80,7 +80,7 @@ import { defineComponent, ref, computed } from 'vue';
 import DrawerItem from '@/views/private/components/drawer-item.vue';
 import { getRootPath } from '@/utils/get-root-path';
 import { unexpectedError } from '@/utils/unexpected-error';
-import { Share } from '@directus/shared/types';
+import { Share } from '@directus/types';
 import { useClipboard } from '@/composables/use-clipboard';
 
 import api from '@/api';

app/src/views/private/components/sidebar-detail.vue

@@ -29,7 +29,7 @@
 <script lang="ts">
 import { defineComponent, toRefs } from 'vue';
 import { useAppStore } from '@/stores/app';
-import { useGroupable } from '@directus/shared/composables';
+import { useGroupable } from '@directus/composables';
 
 export default defineComponent({
 	props: {

app/src/views/private/components/user-popover.vue

@@ -32,7 +32,7 @@
 <script lang="ts">
 import api from '@/api';
 import { userName } from '@/utils/user-name';
-import { User } from '@directus/shared/types';
+import { User } from '@directus/types';
 import { computed, defineComponent, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';

app/src/views/private/private-view.vue

@@ -74,7 +74,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useElementSize } from '@directus/shared/composables';
+import { useElementSize } from '@directus/composables';
 import { useEventListener } from '@/composables/use-event-listener';
 import { useLocalStorage } from '@/composables/use-local-storage';
 import { useTitle } from '@/composables/use-title';

app/src/views/public/public-view.vue

@@ -62,7 +62,7 @@ import { useServerStore } from '@/stores/server';
 import { storeToRefs } from 'pinia';
 import { getRootPath } from '@/utils/get-root-path';
 import { useI18n } from 'vue-i18n';
-import { cssVar } from '@directus/shared/utils/browser';
+import { cssVar } from '@directus/utils/browser';
 import Color from 'color';
 import { getTheme } from '@/utils/get-theme';