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/utils/adjust-fields-for-displays.ts

@@ -1,6 +1,6 @@
 import { useExtension } from '@/composables/use-extension';
 import { useFieldsStore } from '@/stores/fields';
-import { Field } from '@directus/shared/types';
+import { Field } from '@directus/types';
 import { computed } from 'vue';
 
 export function adjustFieldsForDisplays(fields: readonly string[], parentCollection: string): string[] {

app/src/utils/apply-conditions.ts

@@ -1,6 +1,6 @@
-import { Field } from '@directus/shared/types';
+import { Field } from '@directus/types';
 import { parseFilter } from '@/utils/parse-filter';
-import { validatePayload } from '@directus/shared/utils';
+import { validatePayload } from '@directus/utils';
 import { merge } from 'lodash';
 
 export function applyConditions(item: Record<string, any>, field: Field) {

app/src/utils/extract-field-from-function.ts

@@ -1,5 +1,5 @@
-import { REGEX_BETWEEN_PARENS } from '@directus/shared/constants';
-import { FieldFunction } from '@directus/shared/types';
+import { REGEX_BETWEEN_PARENS } from '@directus/constants';
+import { FieldFunction } from '@directus/types';
 
 /**
  * Extracts the function and field name of a field wrapped in a function

app/src/utils/geometry/index.ts

@@ -8,7 +8,7 @@ import {
 	AllGeoJSON,
 	GeoJSONParser,
 	SimpleGeometry,
-} from '@directus/shared/types';
+} from '@directus/types';
 import { BBox, Point, Feature, FeatureCollection } from 'geojson';
 import { coordEach } from '@turf/meta';
 import { i18n } from '@/lang';

app/src/utils/get-default-display-for-type.ts

@@ -1,4 +1,4 @@
-import { Type } from '@directus/shared/types';
+import { Type } from '@directus/types';
 
 const defaultDisplayMap: Record<Type, string> = {
 	alias: 'raw',

app/src/utils/get-default-interface-for-type.ts

@@ -1,4 +1,4 @@
-import { Type } from '@directus/shared/types';
+import { Type } from '@directus/types';
 
 const defaultInterfaceMap: Record<Type, string> = {
 	alias: 'input',

app/src/utils/get-default-values-from-fields.ts

@@ -1,4 +1,4 @@
-import { Field } from '@directus/shared/types';
+import { Field } from '@directus/types';
 import { Ref, unref, computed, ComputedRef } from 'vue';
 
 export function getDefaultValuesFromFields(fields: Field[] | Ref<Field[]>): ComputedRef<Record<string, any>> {

app/src/utils/get-js-type.test.ts

@@ -1,5 +1,5 @@
 import { test, expect } from 'vitest';
-import { Field } from '@directus/shared/types';
+import { Field } from '@directus/types';
 import { getJSType } from './get-js-type';
 
 test('Returns object for relational fields', () => {

app/src/utils/get-js-type.ts

@@ -1,4 +1,4 @@
-import { Field } from '@directus/shared/types';
+import { Field } from '@directus/types';
 
 export function getJSType(field: Field): string {
 	if (

app/src/utils/get-local-type.ts

@@ -1,6 +1,6 @@
 import { useFieldsStore } from '@/stores/fields';
 import { useRelationsStore } from '@/stores/relations';
-import { LocalType, Relation } from '@directus/shared/types';
+import { LocalType, Relation } from '@directus/types';
 
 export function getLocalTypeForField(collection: string, field: string): LocalType | null {
 	const fieldsStore = useFieldsStore();

app/src/utils/get-related-collection.ts

@@ -1,5 +1,5 @@
 import { useRelationsStore } from '@/stores/relations';
-import { Relation } from '@directus/shared/types';
+import { Relation } from '@directus/types';
 import { getLocalTypeForField } from './get-local-type';
 
 export interface RelatedCollectionData {

app/src/utils/get-special-for-type.test.ts

@@ -1,4 +1,4 @@
-import { TYPES } from '@directus/shared/constants';
+import { TYPES } from '@directus/constants';
 import { expect, test } from 'vitest';
 import { getSpecialForType } from './get-special-for-type';
 

app/src/utils/get-special-for-type.ts

@@ -1,4 +1,4 @@
-import { Type } from '@directus/shared/types';
+import { Type } from '@directus/types';
 
 export function getSpecialForType(type: Type): string[] | null {
 	switch (type) {

app/src/utils/is-allowed.ts

@@ -1,7 +1,7 @@
 import { usePermissionsStore } from '@/stores/permissions';
 import { useUserStore } from '@/stores/user';
-import { FieldFilter, Permission } from '@directus/shared/types';
-import { generateJoi } from '@directus/shared/utils';
+import { FieldFilter, Permission } from '@directus/types';
+import { generateJoi } from '@directus/utils';
 
 export function isAllowed(
 	collection: string,

app/src/utils/parse-filter.ts

@@ -1,7 +1,7 @@
 import { useUserStore } from '@/stores/user';
-import { Accountability } from '@directus/shared/types';
-import { parseFilter as parseFilterShared } from '@directus/shared/utils';
-import { Filter } from '@directus/shared/types';
+import { Accountability } from '@directus/types';
+import { parseFilter as parseFilterShared } from '@directus/utils';
+import { Filter } from '@directus/types';
 
 export function parseFilter(filter: Filter | null): Filter {
 	const userStore = useUserStore();

app/src/utils/parse-preset.ts

@@ -1,6 +1,6 @@
 import { useUserStore } from '@/stores/user';
-import { Accountability, Role, User } from '@directus/shared/types';
-import { parsePreset as parsePresetShared } from '@directus/shared/utils';
+import { Accountability, Role, User } from '@directus/types';
+import { parsePreset as parsePresetShared } from '@directus/utils';
 
 export function parsePreset(preset: Record<string, any> | null): Record<string, any> {
 	const { currentUser } = useUserStore();

app/src/utils/query-to-gql-string.test.ts

@@ -4,7 +4,7 @@ import { formatQuery } from '@/utils/query-to-gql-string';
 
 import { setActivePinia } from 'pinia';
 import { createTestingPinia } from '@pinia/testing';
-import { Query } from '@directus/shared/types';
+import { Query } from '@directus/types';
 
 const collectionName = 'users';
 const primaryKeyField = 'id';

app/src/utils/query-to-gql-string.ts

@@ -1,6 +1,6 @@
 import { useFieldsStore } from '@/stores/fields';
-import { Filter, Query } from '@directus/shared/types';
-import { parseJSON, toArray } from '@directus/shared/utils';
+import { Filter, Query } from '@directus/types';
+import { parseJSON, toArray } from '@directus/utils';
 import { jsonToGraphQLQuery } from 'json-to-graphql-query';
 import { isEmpty, pick, set, omitBy, isUndefined, transform } from 'lodash';
 import { extractFieldFromFunction } from './extract-field-from-function';

app/src/utils/render-string-template.ts

@@ -1,7 +1,7 @@
 import { useAliasFields } from '@/composables/use-alias-fields';
 import { useFieldsStore } from '@/stores/fields';
-import { Field } from '@directus/shared/types';
-import { get, getFieldsFromTemplate } from '@directus/shared/utils';
+import { Field } from '@directus/types';
+import { get, getFieldsFromTemplate } from '@directus/utils';
 import { render, renderFn } from 'micromustache';
 import { computed, ComputedRef, Ref, ref, unref } from 'vue';
 import { set } from 'lodash';

app/src/utils/save-as-csv.ts

@@ -1,7 +1,7 @@
 import { useAliasFields } from '@/composables/use-alias-fields';
 import { useFieldsStore } from '@/stores/fields';
-import { get } from '@directus/shared/utils';
-import { Field, Item } from '@directus/shared/types';
+import { get } from '@directus/utils';
+import { Field, Item } from '@directus/types';
 import { saveAs } from 'file-saver';
 import { parse } from 'json2csv';
 import { computed, ref } from 'vue';

app/src/utils/set-favicon.ts

@@ -1,4 +1,4 @@
-import { cssVar } from '@directus/shared/utils/browser';
+import { cssVar } from '@directus/utils/browser';
 
 const svg = (color: string, hide: boolean) => `
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">

app/src/utils/user-name.ts

@@ -1,5 +1,5 @@
 import { i18n } from '@/lang';
-import { User } from '@directus/shared/types';
+import { User } from '@directus/types';
 
 export function userName(user?: Partial<User>): string {
 	if (!user) {

app/src/utils/validate-item.test.ts

@@ -1,7 +1,7 @@
 import { beforeEach, expect, test } from 'vitest';
 
 import { validateItem } from '@/utils/validate-item';
-import { DeepPartial, Field } from '@directus/shared/types';
+import { DeepPartial, Field } from '@directus/types';
 import { createTestingPinia } from '@pinia/testing';
 import { setActivePinia } from 'pinia';
 

app/src/utils/validate-item.ts

@@ -1,7 +1,7 @@
 import { useRelationsStore } from '@/stores/relations';
-import { FailedValidationException } from '@directus/shared/exceptions';
-import { Field, LogicalFilterAND } from '@directus/shared/types';
-import { validatePayload } from '@directus/shared/utils';
+import { FailedValidationException } from '@directus/exceptions';
+import { Field, LogicalFilterAND } from '@directus/types';
+import { validatePayload } from '@directus/utils';
 import { cloneDeep, flatten, isEmpty, isNil } from 'lodash';
 import { applyConditions } from './apply-conditions';