Merge pull request #554 from epaew/feature/esm

Publish as native ESM

CHANGELOG.md

@@ -6,6 +6,9 @@
 
 ## BREAKING CHANGES
 
+- [#554](https://github.com/epaew/react-liff/pull/554)
+  - Publish as native ESM.
+
 ## Others
 
 - [#492](https://github.com/epaew/react-liff/pull/492)

jest.config.js

@@ -1,10 +1,12 @@
-module.exports = {
+// eslint-disable-next-line import/no-default-export
+export default {
   collectCoverageFrom: ['<rootDir>/src/**/*.ts{,x}', '!<rootDir>/src/**/*.test.ts{,x}'],
-  globals: {
-    'ts-jest': {
-      tsconfig: 'tsconfig.test.json',
-    },
+  moduleNameMapper: {
+    '^(\\.{1,2}/.*)\\.js$': '$1',
   },
-  preset: 'ts-jest',
+  preset: 'ts-jest/presets/default-esm',
   testEnvironment: 'jsdom',
+  transform: {
+    '\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.test.json', useESM: true }],
+  },
 };

package.json

@@ -13,6 +13,7 @@
   "repository": "git@github.com:epaew/react-liff",
   "license": "MIT",
   "author": "Ryo Maeda <epaew.333@gmail.com>",
+  "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [

src/context/create-liff-context.ts

@@ -1,8 +1,8 @@
 import { Liff } from '@line/liff';
 import { createContext, useContext } from 'react';
 
-import { createLiffProvider } from './create-liff-provider';
-import { CreateLiffContext, LiffContextStates } from './types';
+import { createLiffProvider } from './create-liff-provider.js';
+import { CreateLiffContext, LiffContextStates } from './types.js';
 
 export const createLiffContext: CreateLiffContext = () => {
   const context = createContext<LiffContextStates>({

src/context/create-liff-provider.ts

@@ -2,10 +2,10 @@ import { Liff } from '@line/liff';
 import * as PropTypes from 'prop-types';
 import { createElement, FC, useEffect, useState } from 'react';
 
-import { useLoginStateManager } from '../hooks';
-import { getInitializedLiff } from '../lib';
+import { useLoginStateManager } from '../hooks/index.js';
+import { getInitializedLiff } from '../lib/index.js';
 
-import { CreateLiffProvider, LiffProviderProps } from './types';
+import { CreateLiffProvider, LiffProviderProps } from './types.js';
 
 const LiffProviderPropTypes = {
   children: PropTypes.element.isRequired,

src/context/index.ts

@@ -1,3 +1,3 @@
-import { createLiffContext } from './create-liff-context';
+import { createLiffContext } from './create-liff-context.js';
 
 export const { LiffConsumer, LiffProvider, useLiff } = createLiffContext();

src/context/types.ts

@@ -1,7 +1,7 @@
 import type { Liff } from '@line/liff';
 import type { Consumer, Context, FC, ReactNode } from 'react';
 
-import type { GetInitializedLiffProps } from '../lib';
+import type { GetInitializedLiffProps } from '../lib/index.js';
 
 export interface CreateLiffContext {
   (): {

src/hooks/index.ts

@@ -1 +1 @@
-export { useLoginStateManager } from './use-login-state-manager';
+export { useLoginStateManager } from './use-login-state-manager.js';

src/index.ts

@@ -1 +1 @@
-export * from './context';
+export * from './context/index.js';

src/lib/get-initialized-liff.ts

@@ -19,7 +19,11 @@ interface GetInitializedLiffProps extends LiffConfig {
 
 type GetInitializedLiff = (props: GetInitializedLiffProps) => Promise<Liff>;
 
-const getLiff = async () => window.liff ?? (await import('@line/liff')).default;
+const getLiff = async (): Promise<Liff> => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore: This is an issue of @line/liff
+  return window.liff ?? ((await import('@line/liff')).default as Liff);
+};
 
 const registerLiffPlugin = (liff: Liff, plugin: Plugin) => {
   Array.isArray(plugin) ? liff.use(...plugin) : liff.use(plugin);

src/lib/index.ts

@@ -1 +1 @@
-export * from './get-initialized-liff';
+export * from './get-initialized-liff.js';