starting to move to esm

lukasbach · lukasbach · commit 18c696c7d589 · 2023-12-04T21:20:15.000+01:00
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 .idea
 node_modules
 lib
-docs
+docs
+.yarn
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -0,0 +1 @@
+nodeLinker: node-modules
diff --git a/package.json b/package.json
@@ -1,8 +1,10 @@
 {
   "name": "ink-form",
+  "type": "module",
   "version": "1.0.2",
   "description": "Complex user-friendly form component for React Ink",
   "main": "lib/index.js",
+  "exports": "./lib/index.js",
   "types": "lib/index.d.ts",
   "keywords": [
     "react",
@@ -23,32 +25,32 @@
   "devDependencies": {
     "@types/node": "^14.14.31",
     "@types/react": "^17.0.2",
+    "ink": "^4.4.1",
     "prettier": "^2.2.1",
-    "ts-node": "^9.1.1",
+    "react": "^18.2.0",
+    "ts-node": "^10.9.1",
     "typedoc": "^0.20.29",
-    "typescript": "^4.2.3"
+    "typescript": "^5.3.2"
   },
   "scripts": {
-    "start": "ts-node src/demo/overview.tsx",
-    "demo:overview": "ts-node src/demo/overview.tsx",
-    "demo:packagejson": "ts-node src/demo/packagejson.tsx",
-    "demo:custommanager": "ts-node src/demo/custommanager.tsx",
-    "demo:imperative": "ts-node src/demo/imperative.ts",
+    "start": "ts-node-esm src/demo/overview.tsx",
+    "demo:overview": "ts-node-esm src/demo/overview.tsx",
+    "demo:packagejson": "ts-node-esm src/demo/packagejson.tsx",
+    "demo:custommanager": "ts-node-esm src/demo/custommanager.tsx",
+    "demo:imperative": "ts-node-esm src/demo/imperative.ts",
     "build": "tsc",
     "build:docs": "typedoc --out docs src/index.ts",
     "prettier:check": "prettier --check .",
     "prettier:write": "prettier --write ."
   },
   "peerDependencies": {
-    "ink": "^3.0.8",
-    "react": "^17.0.1"
+    "ink": ">4",
+    "react": ">17"
   },
   "dependencies": {
-    "ink": "^3.0.8",
     "ink-multi-select": "^2.0.0",
     "ink-quicksearch-input": "^1.0.0",
-    "ink-select-input": "^4.2.0",
-    "ink-text-input": "^4.0.1",
-    "react": "^17.0.1"
+    "ink-select-input": "^5.0.0",
+    "ink-text-input": "^5.0.1"
   }
 }
diff --git a/readme.md b/readme.md
@@ -9,7 +9,7 @@ the package, or by using the imperative API `openForm(options)`.
 
 ## Example usage
 
-    npm install ink-form
+    npm install ink-form react ink
 
 ```typescript jsx
 const options = [
diff --git a/src/DescriptionRenderer.tsx b/src/DescriptionRenderer.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Description } from './types';
+import { Description } from './types.js';
 import { Box, Text } from 'ink';
 
 export const DescriptionRenderer: React.FC<{ description: Description }> = props => {
diff --git a/src/Form.tsx b/src/Form.tsx
@@ -1,12 +1,12 @@
 import { Box, useFocusManager, useInput } from 'ink';
 import { useEffect, useMemo, useState } from 'react';
 import * as React from 'react';
-import { FormProps } from './types';
-import { FormHeader } from './FormHeader';
-import { FormFieldRenderer } from './FormFieldRenderer';
-import { DescriptionRenderer } from './DescriptionRenderer';
-import { canSubmit } from './canSubmit';
-import { SubmitButton } from './SubmitButton';
+import { FormProps } from './types.js';
+import { FormHeader } from './FormHeader.js';
+import { FormFieldRenderer } from './FormFieldRenderer.js';
+import { DescriptionRenderer } from './DescriptionRenderer.js';
+import { canSubmit } from './canSubmit.js';
+import { SubmitButton } from './SubmitButton.js';
 
 export const Form: React.FC<FormProps> = props => {
   const isControlled = props.value !== undefined;
diff --git a/src/FormFieldRenderer.tsx b/src/FormFieldRenderer.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import { FormField, FormFieldRendererProps, SpecificFormFieldRendererProps } from './types';
+import { FormField, FormFieldRendererProps, SpecificFormFieldRendererProps } from './types.js';
 import { Box, useFocus, Text, useInput } from 'ink';
-import { getManager } from './managers/managers';
-import { DescriptionRenderer } from './DescriptionRenderer';
+import { getManager } from './managers/managers.js';
+import { DescriptionRenderer } from './DescriptionRenderer.js';
 
 export const FormFieldRenderer: React.FC<FormFieldRendererProps<any>> = props => {
   const manager = getManager(props.field.type, props.customManagers);
diff --git a/src/FormHeader.tsx b/src/FormHeader.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Box, Text, useInput } from 'ink';
-import { FormProps } from './types';
+import { FormProps } from './types.js';
 
 export const HELP_SECTION_ID = 'Help';
 
diff --git a/src/NumberFieldRenderer.tsx b/src/NumberFieldRenderer.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormFieldFloat, FormFieldInteger, SpecificFormFieldRendererProps } from './types';
+import { FormFieldFloat, FormFieldInteger, SpecificFormFieldRendererProps } from './types.js';
 import { Box, Text, useInput } from 'ink';
 import TextInput from 'ink-text-input';
 
diff --git a/src/canSubmit.ts b/src/canSubmit.ts
@@ -1,4 +1,4 @@
-import { FormStructure } from './types';
+import { FormStructure } from './types.js';
 
 export const canSubmit = (form: FormStructure, value: object) => {
   return form.sections
diff --git a/src/demo/custommanager.tsx b/src/demo/custommanager.tsx
@@ -1,7 +1,7 @@
 import { Box, render, Text } from 'ink';
-import { Form } from '../Form';
+import { Form } from '../Form.js';
 import React from 'react';
-import { AbstractFormField, FormFieldManager } from '../types';
+import { AbstractFormField, FormFieldManager } from '../types.js';
 import TextInput from 'ink-text-input';
 
 type CustomField = AbstractFormField<'custom', string> & { length: number };
diff --git a/src/demo/imperative.ts b/src/demo/imperative.ts
@@ -1,5 +1,5 @@
-import { openForm } from '../imperativeInterface';
-import { FormProps } from '../types';
+import { openForm } from '../imperativeInterface.js';
+import { FormProps } from '../types.js';
 
 const form: FormProps = {
   form: {
diff --git a/src/demo/overview.tsx b/src/demo/overview.tsx
@@ -1,5 +1,5 @@
 import { render } from 'ink';
-import { Form } from '../Form';
+import { Form } from '../Form.js';
 import React from 'react';
 
 const options = [
diff --git a/src/demo/packagejson.tsx b/src/demo/packagejson.tsx
@@ -1,5 +1,5 @@
 import { render } from 'ink';
-import { Form } from '../Form';
+import { Form } from '../Form.js';
 import React from 'react';
 
 const licenses = [
diff --git a/src/imperativeInterface.tsx b/src/imperativeInterface.tsx
@@ -1,6 +1,6 @@
-import { FormProps } from './types';
+import { FormProps } from './types.js';
 import { render } from 'ink';
-import { Form } from './Form';
+import { Form } from './Form.js';
 import React from 'react';
 
 export const openForm = async (options: Omit<FormProps, 'value'>): Promise<{ [key: string]: any }> => {
diff --git a/src/index.ts b/src/index.ts
@@ -1,3 +1,3 @@
-export * from './types';
-export * from './Form';
-export * from './imperativeInterface';
+export * from './types.js';
+export * from './Form.js';
+export * from './imperativeInterface.js';
diff --git a/src/managers/BooleanFormFieldManager.tsx b/src/managers/BooleanFormFieldManager.tsx
@@ -4,7 +4,7 @@ import {
   FormFieldValueRendererProps,
   SpecificFormFieldRendererProps,
   TypeOfField,
-} from '../types';
+} from '../types.js';
 import React from 'react';
 import { Box, Text, useInput } from 'ink';
 
diff --git a/src/managers/FloatFormFieldManager.tsx b/src/managers/FloatFormFieldManager.tsx
@@ -4,9 +4,9 @@ import {
   FormFieldValueRendererProps,
   SpecificFormFieldRendererProps,
   TypeOfField,
-} from '../types';
+} from '../types.js';
 import React from 'react';
-import { NumberFieldRenderer } from '../NumberFieldRenderer';
+import { NumberFieldRenderer } from '../NumberFieldRenderer.js';
 
 export class FloatFormFieldManager implements FormFieldManager<FormFieldFloat> {
   public type: TypeOfField<FormFieldFloat> = 'float';
diff --git a/src/managers/IntegerFormFieldManager.tsx b/src/managers/IntegerFormFieldManager.tsx
@@ -4,9 +4,9 @@ import {
   FormFieldValueRendererProps,
   SpecificFormFieldRendererProps,
   TypeOfField,
-} from '../types';
+} from '../types.js';
 import React from 'react';
-import { NumberFieldRenderer } from '../NumberFieldRenderer';
+import { NumberFieldRenderer } from '../NumberFieldRenderer.js';
 
 export class IntegerFormFieldManager implements FormFieldManager<FormFieldInteger> {
   public type: TypeOfField<FormFieldInteger> = 'integer';
diff --git a/src/managers/MultiSelectFormFieldManager.tsx b/src/managers/MultiSelectFormFieldManager.tsx
@@ -4,7 +4,7 @@ import {
   FormFieldValueRendererProps,
   SpecificFormFieldRendererProps,
   TypeOfField,
-} from '../types';
+} from '../types.js';
 import React from 'react';
 import { Box } from 'ink';
 import SelectInput from 'ink-multi-select';
@@ -14,7 +14,7 @@ export class MultiSelectFormFieldManager implements FormFieldManager<FormFieldMu
 
   public renderField: React.FC<SpecificFormFieldRendererProps<FormFieldMultiSelect>> = props => (
     <Box borderStyle={'round'} width="100%">
-      <SelectInput
+      <SelectInput.default
         items={props.field.options.map(option => ({ value: option.value, label: option.label ?? option.value }))}
         onSelect={option => props.onChange([...(props.value ?? []), option.value as string])}
         onUnselect={option => props.onChange((props.value ?? []).filter(value => value !== option.value))}
diff --git a/src/managers/SelectFormFieldManager.tsx b/src/managers/SelectFormFieldManager.tsx
@@ -4,7 +4,7 @@ import {
   FormFieldValueRendererProps,
   SpecificFormFieldRendererProps,
   TypeOfField,
-} from '../types';
+} from '../types.js';
 import React from 'react';
 import { Box } from 'ink';
 import SelectInput from 'ink-select-input';
diff --git a/src/managers/StringFormFieldManager.tsx b/src/managers/StringFormFieldManager.tsx
@@ -4,7 +4,7 @@ import {
   FormFieldValueRendererProps,
   SpecificFormFieldRendererProps,
   TypeOfField,
-} from '../types';
+} from '../types.js';
 import React from 'react';
 import { Box, Text, Transform } from 'ink';
 import TextInput from 'ink-text-input';
diff --git a/src/managers/managers.ts b/src/managers/managers.ts
@@ -1,10 +1,10 @@
-import { FloatFormFieldManager } from './FloatFormFieldManager';
-import { IntegerFormFieldManager } from './IntegerFormFieldManager';
-import { MultiSelectFormFieldManager } from './MultiSelectFormFieldManager';
-import { SelectFormFieldManager } from './SelectFormFieldManager';
-import { FormField, FormFieldManager, TypeOfField } from '../types';
-import { StringFormFieldManager } from './StringFormFieldManager';
-import { BooleanFormFieldManager } from './BooleanFormFieldManager';
+import { FloatFormFieldManager } from './FloatFormFieldManager.js';
+import { IntegerFormFieldManager } from './IntegerFormFieldManager.js';
+import { MultiSelectFormFieldManager } from './MultiSelectFormFieldManager.js';
+import { SelectFormFieldManager } from './SelectFormFieldManager.js';
+import { FormField, FormFieldManager, TypeOfField } from '../types.js';
+import { StringFormFieldManager } from './StringFormFieldManager.js';
+import { BooleanFormFieldManager } from './BooleanFormFieldManager.js';
 
 export const managers: FormFieldManager<FormField>[] = [
   new FloatFormFieldManager(),
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,14 +1,14 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "es2018"],
+    "target": "ESNext",
+    "lib": ["ESNext"],
     "esModuleInterop": true,
     "jsx": "react",
     "declaration": true,
-    "module": "CommonJS",
+    "module": "Node16",
     "outDir": "lib",
     "strictNullChecks": true,
-    "moduleResolution": "Node",
+    "moduleResolution": "Node16",
     "allowJs": false,
     "rootDir": "src"
   },
diff --git a/yarn-error.log b/yarn-error.log
diff --git a/yarn.lock b/yarn.lock

-Original file line number
+Diff line change
@@ @@ -1,4 +1,5 @@ @@
 .idea
 node_modules
 lib
 -docs
 +docs
 +.yarn
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { FormStructure } from './types';`
	`1`	`+import { FormStructure } from './types.js';`
`2`	`2`
`3`	`3`	`export const canSubmit = (form: FormStructure, value: object) => {`
`4`	`4`	`return form.sections`