Merge pull request #954 from 3YOURMIND/fix-esm-import-for-date-compon…

…ents
3YOURMIND · Jun 24, 2024 · 206a0b5 · 206a0b5
2 parents f7a0ce7 + 2fb0052
commit 206a0b5
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 11 deletions.
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -5,6 +5,25 @@ import eslintConfig3YD from '@3yourmind/eslint-config'
 import { fileURLToPath } from 'url'
 import path from 'node:path'
 
+import kottiUIPackageJSON from './packages/kotti-ui/package.json' assert { type: 'json' }
+import vueUseTippyPackageJSON from './packages/vue-use-tippy/package.json' assert { type: 'json' }
+import yocoPackageJSON from './packages/yoco/package.json' assert { type: 'json' }
+
+const trustedDependencies = new Set([
+	'@metatypes/typography',
+	'@metatypes/units',
+	'filesize',
+	'zod',
+])
+
+const notYetESMCompatible = Object.keys({
+	...kottiUIPackageJSON.dependencies,
+	...vueUseTippyPackageJSON.dependencies,
+	...yocoPackageJSON.dependencies,
+})
+	.filter((dep) => !dep.startsWith('@3yourmind'))
+	.filter((dep) => !trustedDependencies.has(dep))
+
 /**
  * Find the project root in a way that is compatible with most javascript engines (e.g. node, vscode's node, bun)
  */
@@ -87,9 +106,20 @@ const config = tseslint.config(
 			'@typescript-eslint/no-restricted-imports': [
 				'error',
 				{
-					message:
-						"Avoid direct imports from lodash; e.g. import foo from 'lodash/foo.js' instead of import { foo } from 'lodash'",
-					name: 'lodash',
+					paths: [
+						{
+							message:
+								"Avoid direct imports from lodash; e.g. import foo from 'lodash/foo.js' instead of import { foo } from 'lodash'",
+							name: 'lodash',
+						},
+						...notYetESMCompatible.map((name) => ({
+							name,
+							message:
+								'The default import is the only export guaranteed to resolve in packages without explicit cjs/esm import declarations. Named imports, inferred through heuristics, may fail in various environments. Therefore, it is advisable to always use the default import.',
+							allowImportNames: ['default'],
+							allowTypeImports: true,
+						})),
+					],
 				},
 			],
 		},

diff --git a/packages/kotti-ui/source/kotti-field-date/KtFieldDate.vue b/packages/kotti-ui/source/kotti-field-date/KtFieldDate.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import { DatePicker as ElDate } from 'element-ui'
+import ElDate from 'element-ui/lib/date-picker.js'
 import type {
 	DatePickerOptions,
 	ElDatePicker,
@@ -79,7 +79,7 @@ export default defineComponent({
 
 		return {
 			elDatePickerProps: computed(
-				(): Partial<ElDate> => ({
+				(): Partial<ElDatePicker> => ({
 					...EL_DATE_PROPS,
 					/**
 					 * @see {@link https://github.com/ElemeFE/element/blob/v2.13.1/packages/date-picker/src/picker.vue#L334)}

diff --git a/packages/kotti-ui/source/kotti-field-date/KtFieldDateRange.vue b/packages/kotti-ui/source/kotti-field-date/KtFieldDateRange.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script lang="ts">
-import { DatePicker as ElDate } from 'element-ui'
+import ElDate from 'element-ui/lib/date-picker.js'
 import type {
 	DatePickerOptions,
 	ElDatePicker,
@@ -86,7 +86,7 @@ export default defineComponent({
 
 		return {
 			elDateRangePickerProps: computed(
-				(): Partial<ElDate> => ({
+				(): Partial<ElDatePicker> => ({
 					...EL_DATE_PROPS,
 					...EL_DATE_RANGE_PROPS,
 					/**

diff --git a/packages/kotti-ui/source/kotti-field-date/KtFieldDateTime.vue b/packages/kotti-ui/source/kotti-field-date/KtFieldDateTime.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts">
-import { DatePicker as ElDate } from 'element-ui'
+import ElDate from 'element-ui/lib/date-picker.js'
 import type {
 	DatePickerOptions,
 	ElDatePicker,
@@ -84,7 +84,7 @@ export default defineComponent({
 
 		return {
 			elDateTimePickerProps: computed(
-				(): Partial<ElDate> => ({
+				(): Partial<ElDatePicker> => ({
 					...EL_DATE_TIME_PROPS,
 					/**
 					 * @see {@link https://github.com/ElemeFE/element/blob/v2.13.1/packages/date-picker/src/picker.vue#L334)}

diff --git a/packages/kotti-ui/source/kotti-field-date/KtFieldDateTimeRange.vue b/packages/kotti-ui/source/kotti-field-date/KtFieldDateTimeRange.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script lang="ts">
-import { DatePicker as ElDate } from 'element-ui'
+import ElDate from 'element-ui/lib/date-picker.js'
 import type {
 	DatePickerOptions,
 	ElDatePicker,
@@ -86,7 +86,7 @@ export default defineComponent({
 
 		return {
 			elDateTimeRangePickerProps: computed(
-				(): Partial<ElDate> => ({
+				(): Partial<ElDatePicker> => ({
 					...EL_DATE_TIME_PROPS,
 					...EL_DATE_RANGE_PROPS,
 					/**

diff --git a/packages/kotti-ui/source/kotti-field-date/el-locales.d.ts b/packages/kotti-ui/source/kotti-field-date/el-locales.d.ts
@@ -1,2 +1,3 @@
+declare module 'element-ui/lib/date-picker.js'
 declare module 'element-ui/lib/locale/index.js'
 declare module 'element-ui/lib/locale/lang/*.js'