@pdfme/ui 1.1.5 → 1.1.6

package/dist/types/class.d.ts

@@ -12,7 +12,7 @@ export declare abstract class BaseUIClass {
     protected getFont(): Record<string, {
         fallback?: boolean | undefined;
         subset?: boolean | undefined;
-        data: ArrayBuffer | Uint8Array;
+        data: string | ArrayBuffer | Uint8Array;
     }>;
     getTemplate(): {
         columns?: string[] | undefined;

package/dist/types/components/Designer/Main/Moveable.d.ts

@@ -1,5 +1,11 @@
 import React from 'react';
-import { OnDrag, OnResize, OnDragEnd, OnDragGroupEnd, OnResizeEnd, OnResizeGroupEnd, OnClick } from 'react-moveable';
+import { OnDrag, OnDragEnd, OnDragGroupEnd, OnResize, OnResizeEnd, OnResizeGroupEnd, OnRotate, OnRotateEnd, OnRotateGroupEnd, OnClick } from 'react-moveable';
+declare type tgtFunc = ({ target }: {
+    target: HTMLElement | SVGElement;
+}) => void;
+declare type tgtsFunc = ({ targets }: {
+    targets: (HTMLElement | SVGElement)[];
+}) => void;
 declare type Props = {
     target: HTMLElement[];
     bounds: {
@@ -12,19 +18,14 @@ declare type Props = {
     verticalGuidelines: number[];
     keepRatio: boolean;
     onDrag: ((e: OnDrag) => void) & (({ target, left, top }: OnDrag) => void);
-    onDragEnd: ((e: OnDragEnd) => void) & (({ target }: {
-        target: HTMLElement | SVGElement;
-    }) => void);
-    onDragGroupEnd: ((e: OnDragGroupEnd) => void) & (({ targets }: {
-        targets: (HTMLElement | SVGElement)[];
-    }) => void);
+    onDragEnd: ((e: OnDragEnd) => void) & tgtFunc;
+    onDragGroupEnd: ((e: OnDragGroupEnd) => void) & tgtsFunc;
     onResize: ((e: OnResize) => void) & (({ target, width, height, direction }: OnResize) => void);
-    onResizeEnd: ((e: OnResizeEnd) => void) & (({ target }: {
-        target: HTMLElement | SVGElement;
-    }) => void);
-    onResizeGroupEnd: ((e: OnResizeGroupEnd) => void) & (({ targets }: {
-        targets: (HTMLElement | SVGElement)[];
-    }) => void);
+    onResizeEnd: ((e: OnResizeEnd) => void) & tgtFunc;
+    onResizeGroupEnd: ((e: OnResizeGroupEnd) => void) & tgtsFunc;
+    onRotate: ((e: OnRotate) => void) & (({ target, rotate }: OnRotate) => void);
+    onRotateEnd: ((e: OnRotateEnd) => void) & tgtFunc;
+    onRotateGroupEnd: ((e: OnRotateGroupEnd) => void) & tgtsFunc;
     onClick: (e: OnClick) => void;
 };
 declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;

package/dist/types/components/Designer/index.d.ts

@@ -4,7 +4,7 @@ declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplat
         font?: Record<string, {
             fallback?: boolean | undefined;
             subset?: boolean | undefined;
-            data: ArrayBuffer | Uint8Array;
+            data: string | ArrayBuffer | Uint8Array;
         }> | undefined;
         lang?: "en" | "ja" | undefined;
     } | undefined;

package/dist/types/contexts.d.ts

@@ -3,5 +3,5 @@ export declare const I18nContext: import("react").Context<(key: "type" | "field"
 export declare const FontContext: import("react").Context<Record<string, {
     fallback?: boolean | undefined;
     subset?: boolean | undefined;
-    data: ArrayBuffer | Uint8Array;
+    data: string | ArrayBuffer | Uint8Array;
 }>>;

package/dist/types/helper.d.ts

@@ -19,7 +19,6 @@ export declare const initShortCuts: (arg: {
 }) => void;
 export declare const destroyShortCuts: () => void;
 export declare const readFiles: (files: FileList | null, type: 'text' | 'dataURL' | 'arrayBuffer') => Promise<string | ArrayBuffer>;
-export declare const px2mm: (px: number) => number;
 export declare const getPdfPageSizes: (pdfBlob: Blob) => Promise<{
     height: number;
     width: number;

package/dist/types/index.d.ts

@@ -1,6 +1,7 @@
 import Designer from './Designer';
 import Form from './Form';
 import Viewer from './Viewer';
-export { Designer, Viewer, Form };
-export type { Lang, Size, Alignment, SchemaType, BarCodeType, TextSchema, ImageSchema, BarcodeSchema, Schema, SchemaForUI, Font, BasePdf, Template, CommonProps, GeneratorOptions, GenerateProps, UIOptions, UIProps, PreviewProps, DesignerProps, } from '@pdfme/common';
-export { BLANK_PDF, isTextSchema, isImageSchema, isBarcodeSchema, checkTemplate, checkUIProps, checkPreviewProps, checkDesignerProps, checkGenerateProps, validateBarcodeInput, } from '@pdfme/common';
+import { BLANK_PDF, HELVETICA, isTextSchema, isImageSchema, isBarcodeSchema, checkTemplate, checkUIProps, checkPreviewProps, checkDesignerProps, checkGenerateProps, validateBarcodeInput } from '@pdfme/common';
+import type { Lang, Size, Alignment, SchemaType, BarCodeType, TextSchema, ImageSchema, BarcodeSchema, Schema, SchemaForUI, Font, BasePdf, Template, CommonProps, GeneratorOptions, GenerateProps, UIOptions, UIProps, PreviewProps, DesignerProps } from '@pdfme/common';
+export { Designer, Viewer, Form, BLANK_PDF, HELVETICA, isTextSchema, isImageSchema, isBarcodeSchema, checkTemplate, checkUIProps, checkPreviewProps, checkDesignerProps, checkGenerateProps, validateBarcodeInput, };
+export type { Lang, Size, Alignment, SchemaType, BarCodeType, TextSchema, ImageSchema, BarcodeSchema, Schema, SchemaForUI, Font, BasePdf, Template, CommonProps, GeneratorOptions, GenerateProps, UIOptions, UIProps, PreviewProps, DesignerProps, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/components/Designer/Main/Moveable.tsx

@@ -1,14 +1,20 @@
 import React, { forwardRef, Ref } from 'react';
 import Moveable, {
   OnDrag,
-  OnResize,
   OnDragEnd,
   OnDragGroupEnd,
+  OnResize,
   OnResizeEnd,
   OnResizeGroupEnd,
+  OnRotate,
+  OnRotateEnd,
+  OnRotateGroupEnd,
   OnClick,
 } from 'react-moveable';
 
+type tgtFunc = ({ target }: { target: HTMLElement | SVGElement }) => void;
+type tgtsFunc = ({ targets }: { targets: (HTMLElement | SVGElement)[] }) => void;
+
 type Props = {
   target: HTMLElement[];
   bounds: { left: number; top: number; bottom: number; right: number };
@@ -16,15 +22,15 @@ type Props = {
   verticalGuidelines: number[];
   keepRatio: boolean;
   onDrag: ((e: OnDrag) => void) & (({ target, left, top }: OnDrag) => void);
-  onDragEnd: ((e: OnDragEnd) => void) &
-    (({ target }: { target: HTMLElement | SVGElement }) => void);
-  onDragGroupEnd: ((e: OnDragGroupEnd) => void) &
-    (({ targets }: { targets: (HTMLElement | SVGElement)[] }) => void);
+  onDragEnd: ((e: OnDragEnd) => void) & tgtFunc;
+  onDragGroupEnd: ((e: OnDragGroupEnd) => void) & tgtsFunc;
   onResize: ((e: OnResize) => void) & (({ target, width, height, direction }: OnResize) => void);
-  onResizeEnd: ((e: OnResizeEnd) => void) &
-    (({ target }: { target: HTMLElement | SVGElement }) => void);
-  onResizeGroupEnd: ((e: OnResizeGroupEnd) => void) &
-    (({ targets }: { targets: (HTMLElement | SVGElement)[] }) => void);
+  onResizeEnd: ((e: OnResizeEnd) => void) & tgtFunc;
+  onResizeGroupEnd: ((e: OnResizeGroupEnd) => void) & tgtsFunc;
+  onRotate: ((e: OnRotate) => void) & (({ target, rotate }: OnRotate) => void);
+  onRotateEnd: ((e: OnRotateEnd) => void) & tgtFunc;
+  onRotateGroupEnd: ((e: OnRotateGroupEnd) => void) & tgtsFunc;
+
   onClick: (e: OnClick) => void;
 };
 
@@ -41,6 +47,9 @@ const _Moveable = (
     onResize,
     onResizeEnd,
     onResizeGroupEnd,
+    onRotate,
+    onRotateEnd,
+    onRotateGroupEnd,
     onClick,
   }: Props,
   ref: Ref<any>
@@ -52,6 +61,9 @@ const _Moveable = (
     snapCenter
     draggable
     resizable
+    rotatable
+    throttleRotate={0}
+    rotationPosition="top"
     throttleDrag={1}
     throttleResize={1}
     ref={ref}
@@ -61,17 +73,17 @@ const _Moveable = (
     verticalGuidelines={verticalGuidelines}
     keepRatio={keepRatio}
     onDrag={onDrag}
-    onDragGroup={({ events }) => {
-      events.forEach(onDrag);
-    }}
+    onDragGroup={({ events }) => events.forEach(onDrag)}
     onDragEnd={onDragEnd}
     onDragGroupEnd={onDragGroupEnd}
     onResize={onResize}
-    onResizeGroup={({ events }) => {
-      events.forEach(onResize);
-    }}
+    onResizeGroup={({ events }) => events.forEach(onResize)}
     onResizeEnd={onResizeEnd}
     onResizeGroupEnd={onResizeGroupEnd}
+    onRotate={onRotate}
+    onRotateEnd={onRotateEnd}
+    onRotateGroup={({ events }) => events.forEach(onRotate)}
+    onRotateGroupEnd={onRotateGroupEnd}
     onClick={onClick}
   />
 );

package/src/components/Designer/Main/index.tsx

@@ -7,8 +7,9 @@ import React, {
   forwardRef,
   useCallback,
 } from 'react';
-import { OnDrag, OnResize, OnClick } from 'react-moveable';
+import { OnDrag, OnResize, OnRotate, OnClick } from 'react-moveable';
 import { SchemaForUI, Size } from '@pdfme/common';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 import { ZOOM, RULER_HEIGHT } from '../../../constants';
 import { usePrevious } from '../../../hooks';
 import { uuid, round, flatten } from '../../../helper';
@@ -20,13 +21,16 @@ import Guides from './Guides';
 import Mask from './Mask';
 
 const DELETE_BTN_ID = uuid();
-const fmt4Num = (prop: string) => Number(prop.replace('px', ''));
-const fmt = (prop: string) => round(fmt4Num(prop) / ZOOM, 2);
+const px2Num = (prop: string) => Number(prop.replace('px', ''));
+const transformRotate2Num = (transform: string) =>
+  Number(transform.match(/rotate\(([^deg)]*)deg\)/)?.[1]) || 0;
+const fmtPx = (prop: string) => round(px2Num(prop) / ZOOM, 2);
+const fmtDeg = (prop: string) => round(transformRotate2Num(prop), 2);
 const isTopLeftResize = (d: string) => d === '-1,-1' || d === '-1,0' || d === '0,-1';
 
 const DeleteButton = ({ activeElements: aes }: { activeElements: HTMLElement[] }) => {
-  const top = Math.min(...aes.map(({ style }) => fmt4Num(style.top)));
-  const left = Math.max(...aes.map(({ style }) => fmt4Num(style.left) + fmt4Num(style.width))) + 10;
+  const top = Math.min(...aes.map(({ style }) => px2Num(style.top)));
+  const left = Math.max(...aes.map(({ style }) => px2Num(style.left) + px2Num(style.width))) + 10;
 
   return (
     <button
@@ -49,16 +53,7 @@ const DeleteButton = ({ activeElements: aes }: { activeElements: HTMLElement[] }
         justifyContent: 'center',
       }}
     >
-      <svg
-        style={{ pointerEvents: 'none' }}
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        strokeWidth="1.5"
-        stroke="currentColor"
-      >
-        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-      </svg>
+      <XMarkIcon width={10} height={10} />
     </button>
   );
 };
@@ -157,15 +152,15 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
   const onDragEnd = ({ target }: { target: HTMLElement | SVGElement }) => {
     const { top, left } = target.style;
     changeSchemas([
-      { key: 'position.y', value: fmt(top), schemaId: target.id },
-      { key: 'position.x', value: fmt(left), schemaId: target.id },
+      { key: 'position.y', value: fmtPx(top), schemaId: target.id },
+      { key: 'position.x', value: fmtPx(left), schemaId: target.id },
     ]);
   };
 
   const onDragEnds = ({ targets }: { targets: (HTMLElement | SVGElement)[] }) => {
     const arg = targets.map(({ style: { top, left }, id }) => [
-      { key: 'position.y', value: fmt(top), schemaId: id },
-      { key: 'position.x', value: fmt(left), schemaId: id },
+      { key: 'position.y', value: fmtPx(top), schemaId: id },
+      { key: 'position.x', value: fmtPx(left), schemaId: id },
     ]);
     changeSchemas(flatten(arg));
   };
@@ -174,19 +169,19 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
     const { id, style } = target;
     const { width, height, top, left } = style;
     changeSchemas([
-      { key: 'width', value: fmt(width), schemaId: id },
-      { key: 'height', value: fmt(height), schemaId: id },
-      { key: 'position.y', value: fmt(top), schemaId: id },
-      { key: 'position.x', value: fmt(left), schemaId: id },
+      { key: 'width', value: fmtPx(width), schemaId: id },
+      { key: 'height', value: fmtPx(height), schemaId: id },
+      { key: 'position.y', value: fmtPx(top), schemaId: id },
+      { key: 'position.x', value: fmtPx(left), schemaId: id },
     ]);
   };
 
   const onResizeEnds = ({ targets }: { targets: (HTMLElement | SVGElement)[] }) => {
     const arg = targets.map(({ style: { width, height, top, left }, id }) => [
-      { key: 'width', value: fmt(width), schemaId: id },
-      { key: 'height', value: fmt(height), schemaId: id },
-      { key: 'position.y', value: fmt(top), schemaId: id },
-      { key: 'position.x', value: fmt(left), schemaId: id },
+      { key: 'width', value: fmtPx(width), schemaId: id },
+      { key: 'height', value: fmtPx(height), schemaId: id },
+      { key: 'position.y', value: fmtPx(top), schemaId: id },
+      { key: 'position.x', value: fmtPx(left), schemaId: id },
     ]);
     changeSchemas(flatten(arg));
   };
@@ -194,8 +189,8 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
   const onResize = ({ target, width, height, direction }: OnResize) => {
     if (!target) return;
     const s = target.style;
-    const newLeft = fmt4Num(s.left) + (fmt4Num(s.width) - width);
-    const newTop = fmt4Num(s.top) + (fmt4Num(s.height) - height);
+    const newLeft = px2Num(s.left) + (px2Num(s.width) - width);
+    const newTop = px2Num(s.top) + (px2Num(s.height) - height);
     const obj: { top?: string; left?: string; width: string; height: string } = {
       width: `${width}px`,
       height: `${height}px`,
@@ -212,6 +207,25 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
     Object.assign(s, obj);
   };
 
+  const onRotate = ({ target, rotate }: OnRotate) => {
+    if (!target) return;
+    target.style.transform = `rotate(${rotate}deg)`;
+  };
+
+  const onRotateEnd = ({ target }: { target: HTMLElement | SVGElement }) => {
+    const { id, style } = target;
+    const { transform } = style;
+    changeSchemas([{ key: 'rotate', value: fmtDeg(transform), schemaId: id }]);
+  };
+
+  const onRotateEnds = ({ targets }: { targets: (HTMLElement | SVGElement)[] }) => {
+    const arg = targets.map(({ style: { transform }, id }) => [
+      { key: 'rotate', value: fmtDeg(transform), schemaId: id },
+      { key: 'rotate', value: fmtDeg(transform), schemaId: id },
+    ]);
+    changeSchemas(flatten(arg));
+  };
+
   const getGuideLines = (guides: GuidesInterface[], index: number) =>
     guides[index] && guides[index].getGuides().map((g) => g * ZOOM);
 
@@ -308,6 +322,9 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
                   onResize={onResize}
                   onResizeEnd={onResizeEnd}
                   onResizeGroupEnd={onResizeEnds}
+                  onRotate={onRotate}
+                  onRotateEnd={onRotateEnd}
+                  onRotateGroupEnd={onRotateEnds}
                   onClick={onClickMoveable}
                 />
               )

package/src/components/Designer/Sidebar/DetailView/ExampleInputEditor.tsx

@@ -24,15 +24,15 @@ const ExampleInputEditor = (
                   top: 0,
                   left: 0,
                   display: 'flex',
-                  justifyContent: 'center',
                   alignItems: 'center',
+                  justifyContent: 'center',
                   color: '#333',
                   background: '#f2f2f2',
                   cursor: 'pointer',
                   borderRadius: 2,
                   border: '1px solid #767676',
-                  height: 20,
-                  width: 20,
+                  height: 24,
+                  width: 24,
                 }}
                 aria-label="close"
                 onClick={() =>

package/src/components/Designer/Sidebar/DetailView/PositionAndSizeEditor.tsx

@@ -258,6 +258,19 @@ const PositionAndSizeEditor = (
           <span style={{ fontSize: '0.6rem' }}>mm</span>
         </div>
       </div>
+      <div style={inputSetStyle}>
+        <label style={{ width: 44 }}>Rotate</label>
+        <input
+          style={inputStyle}
+          type="number"
+          onChange={(e) => {
+            const value = Number(e.target.value || 0);
+            changeSchemas([{ key: 'rotate', value, schemaId: activeSchema.id }]);
+          }}
+          value={activeSchema.rotate || 0}
+        />
+        <span style={{ fontSize: '0.6rem' }}>deg</span>
+      </div>
     </div>
   );
 };

package/src/components/Designer/Sidebar/DetailView/TextPropEditor.tsx

@@ -53,8 +53,9 @@ const ColorInputSet = (props: {
           onClick={onClear}
           style={{
             display: 'flex',
-            background: 'none',
             alignItems: 'center',
+            justifyContent: 'center',
+            background: 'none',
             borderRadius: 2,
             border: '1px solid #767676',
             cursor: 'pointer',

package/src/components/Root.tsx

@@ -9,19 +9,20 @@ const Root = ({ size, scale, children }: Props, ref: Ref<HTMLDivElement>) => {
   const font = useContext(FontContext);
 
   useEffect(() => {
-    const fontFaces = Object.entries(font).map((entry) => {
-      const [key, value] = entry;
-      const fontFace = new FontFace(key, value.data);
+    if (!document || !document.fonts) return;
+    const fontFaces = Object.entries(font).map(
+      ([key, { data }]) =>
+        new FontFace(key, typeof data === 'string' ? `url(${data})` : data, {
+          display: 'swap',
+        })
+    );
+    // @ts-ignore
+    const newFontFaces = fontFaces.filter((fontFace) => !document.fonts.has(fontFace));
 
-      return fontFace.load();
-    });
-    Promise.all(fontFaces).then((loadedFontFaces) => {
+    Promise.all(newFontFaces.map((f) => f.load())).then((loadedFontFaces) => {
       loadedFontFaces.forEach((loadedFontFace) => {
         // @ts-ignore
-        if (document && document.fonts && document.fonts.add) {
-          // @ts-ignore
-          document.fonts.add(loadedFontFace);
-        }
+        document.fonts.add(loadedFontFace);
       });
     });
   }, [font]);

package/src/components/Schemas/ImageSchema.tsx

@@ -46,8 +46,8 @@ const ImageSchemaUI = (props: Props, ref: Ref<HTMLInputElement>) => {
               borderRadius: 2,
               border: '1px solid #767676',
               cursor: 'pointer',
-              height: 20,
-              width: 20,
+              height: 24,
+              width: 24,
             }}
             aria-label="close"
             onClick={() => {

package/src/components/Schemas/SchemaUI.tsx

@@ -37,6 +37,7 @@ const Wrapper = ({
       width: schema.width * ZOOM,
       top: schema.position.y * ZOOM,
       left: schema.position.x * ZOOM,
+      transform: `rotate(${schema.rotate || 0}deg)`,
       border,
     }}
   >

package/src/helper.ts

@@ -1,6 +1,3 @@
-// TODO そもそもこのpdfjs-distはtscでビルドできない
-// 昔のpdfmeのソースからwebpackのビルドに戻す
-// 多分tree-shakingは動かないかもしれないけど、とりあえず動くようにするべき
 // @ts-ignore
 import PDFJSWorker from 'pdfjs-dist/build/pdf.worker.entry.js';
 import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist/legacy/build/pdf.js';
@@ -237,13 +234,6 @@ const pt2mm = (pt: number) => {
   return parseFloat(String(pt)) * mmRatio;
 };
 
-export const px2mm = (px: number) => {
-  // http://www.unitconversion.org/typography/millimeters-to-pixels-y-conversion.html
-  const mmRatio = 0.264583333;
-
-  return parseFloat(String(px)) * mmRatio;
-};
-
 export const getPdfPageSizes = async (pdfBlob: Blob) => {
   const url = URL.createObjectURL(pdfBlob);
   const pdfDoc = await getDocument({ url }).promise;

package/src/index.ts

@@ -2,9 +2,21 @@ import Designer from './Designer';
 import Form from './Form';
 import Viewer from './Viewer';
 
-export { Designer, Viewer, Form };
+import {
+  BLANK_PDF,
+  HELVETICA,
+  isTextSchema,
+  isImageSchema,
+  isBarcodeSchema,
+  checkTemplate,
+  checkUIProps,
+  checkPreviewProps,
+  checkDesignerProps,
+  checkGenerateProps,
+  validateBarcodeInput,
+} from '@pdfme/common';
 
-export type {
+import type {
   Lang,
   Size,
   Alignment,
@@ -28,7 +40,11 @@ export type {
 } from '@pdfme/common';
 
 export {
+  Designer,
+  Viewer,
+  Form,
   BLANK_PDF,
+  HELVETICA,
   isTextSchema,
   isImageSchema,
   isBarcodeSchema,
@@ -38,4 +54,27 @@ export {
   checkDesignerProps,
   checkGenerateProps,
   validateBarcodeInput,
-} from '@pdfme/common';
+};
+
+export type {
+  Lang,
+  Size,
+  Alignment,
+  SchemaType,
+  BarCodeType,
+  TextSchema,
+  ImageSchema,
+  BarcodeSchema,
+  Schema,
+  SchemaForUI,
+  Font,
+  BasePdf,
+  Template,
+  CommonProps,
+  GeneratorOptions,
+  GenerateProps,
+  UIOptions,
+  UIProps,
+  PreviewProps,
+  DesignerProps,
+};

package/webpack.config.js

@@ -19,13 +19,8 @@ const config = {
   },
   plugins: [
     // new BundleAnalyzerPlugin(),
-    new webpack.ProvidePlugin({
-      process: 'process/browser',
-    }),
-    new webpack.BannerPlugin({
-      banner: BANNER,
-      entryOnly: true,
-    }),
+    new webpack.ProvidePlugin({ process: 'process/browser' }),
+    new webpack.BannerPlugin({ banner: BANNER, entryOnly: true }),
   ],
   devtool: 'source-map',
   entry: './src/index.ts',
@@ -33,17 +28,8 @@ const config = {
     path: path.resolve(__dirname, 'dist'),
     filename: 'index.js',
     globalObject: 'this',
-    library: {
-      type: 'umd',
-    },
-  },
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        use: 'ts-loader',
-      },
-    ],
+    library: { type: 'umd' },
   },
+  module: { rules: [{ test: /\.tsx?$/, use: 'ts-loader' }] },
 };
 module.exports = config;