Skip to content

Commit

Permalink
Add native ESM support (#210)
Browse files Browse the repository at this point in the history
  • Loading branch information
wojtekmaj authored Jul 27, 2023
1 parent fbe38d6 commit dbb401d
Show file tree
Hide file tree
Showing 16 changed files with 39 additions and 30 deletions.
18 changes: 13 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,26 @@
"name": "react-clock",
"version": "4.4.0",
"description": "An analog clock for your React app.",
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
"source": "src/index.ts",
"types": "dist/cjs/index.d.ts",
"type": "module",
"sideEffects": [
"*.css"
],
"main": "./dist/cjs/index.js",
"module": "./dist/esm/index.js",
"source": "./src/index.ts",
"types": "./dist/cjs/index.d.ts",
"exports": {
".": {
"import": "./dist/esm/index.js",
"require": "./dist/cjs/index.js"
},
"./src": "./src/index.ts"
},
"scripts": {
"build": "yarn build-js && yarn copy-styles",
"build-js": "yarn build-js-esm && yarn build-js-cjs",
"build-js-esm": "tsc --project tsconfig.build.json --outDir dist/esm --module esnext",
"build-js-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs",
"build-js-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs && echo '{\n \"type\": \"commonjs\"\n}' > dist/cjs/package.json",
"clean": "rimraf dist",
"copy-styles": "node --loader ts-node/esm ./copy-styles.ts",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
Expand Down
3 changes: 2 additions & 1 deletion sample/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import { createRoot } from 'react-dom/client';
import Sample from './Sample';

import Sample from './Sample.js';

createRoot(document.getElementById('react-root') as HTMLDivElement).render(<Sample />);
2 changes: 1 addition & 1 deletion src/Clock.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
import React from 'react';
import { render } from '@testing-library/react';

import Clock from './Clock';
import Clock from './Clock.js';

describe('Clock', () => {
describe('<time> element', () => {
Expand Down
12 changes: 6 additions & 6 deletions src/Clock.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,19 @@ import PropTypes from 'prop-types';
import clsx from 'clsx';
import { getHours, getMilliseconds, getMinutes, getSeconds } from '@wojtekmaj/date-utils';

import Hand from './Hand';
import MinuteMark from './MinuteMark';
import HourMark from './HourMark';
import Hand from './Hand.js';
import MinuteMark from './MinuteMark.js';
import HourMark from './HourMark.js';

import type { formatHour as defaultFormatHour } from './shared/hourFormatter';
import type { formatHour as defaultFormatHour } from './shared/hourFormatter.js';

import {
isHandLength,
isOppositeHandLength,
isHandWidth,
isMarkLength,
isMarkWidth,
} from './shared/propTypes';
} from './shared/propTypes.js';

import type {
ClassName,
Expand All @@ -24,7 +24,7 @@ import type {
MarkLength,
MarkWidth,
OppositeHandLength,
} from './shared/types';
} from './shared/types.js';

export type ClockProps = {
className?: ClassName;
Expand Down
2 changes: 1 addition & 1 deletion src/Hand.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
import React from 'react';
import { render } from '@testing-library/react';

import Hand from './Hand';
import Hand from './Hand.js';

describe('Hand', () => {
it('renders a hand with given name', () => {
Expand Down
2 changes: 1 addition & 1 deletion src/Hand.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';

import type { HandLength, HandWidth, OppositeHandLength } from './shared/types';
import type { HandLength, HandWidth, OppositeHandLength } from './shared/types.js';

type HandProps = {
angle?: number;
Expand Down
2 changes: 1 addition & 1 deletion src/HourMark.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { describe, expect, it, vi } from 'vitest';
import React from 'react';
import { render } from '@testing-library/react';

import HourMark from './HourMark';
import HourMark from './HourMark.js';

describe('HourMark', () => {
it('renders Mark', () => {
Expand Down
4 changes: 2 additions & 2 deletions src/HourMark.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React, { memo } from 'react';

import Mark from './Mark';
import Mark from './Mark.js';

import { formatHour as defaultFormatHour } from './shared/hourFormatter';
import { formatHour as defaultFormatHour } from './shared/hourFormatter.js';

type HourMarkProps = React.ComponentProps<typeof Mark> & {
formatHour?: typeof defaultFormatHour;
Expand Down
2 changes: 1 addition & 1 deletion src/Mark.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
import React from 'react';
import { render } from '@testing-library/react';

import Mark from './Mark';
import Mark from './Mark.js';

describe('Mark', () => {
it('renders a hand with given name', () => {
Expand Down
2 changes: 1 addition & 1 deletion src/Mark.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';

import type { MarkLength, MarkWidth } from './shared/types';
import type { MarkLength, MarkWidth } from './shared/types.js';

type MarkProps = {
angle?: number;
Expand Down
2 changes: 1 addition & 1 deletion src/MinuteMark.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
import React from 'react';
import { render } from '@testing-library/react';

import MinuteMark from './MinuteMark';
import MinuteMark from './MinuteMark.js';

describe('MinuteMark', () => {
it('renders Mark', () => {
Expand Down
2 changes: 1 addition & 1 deletion src/MinuteMark.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { memo } from 'react';

import Mark from './Mark';
import Mark from './Mark.js';

type MinuteMarkProps = React.ComponentProps<typeof Mark>;

Expand Down
4 changes: 2 additions & 2 deletions src/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import Clock from './Clock';
import Clock from './Clock.js';

export type { ClockProps } from './Clock';
export type { ClockProps } from './Clock.js';

export { Clock };

Expand Down
8 changes: 4 additions & 4 deletions test/Test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ import 'react-clock/src/Clock.css';
import { useSetInterval } from '@wojtekmaj/react-hooks';
import { getHoursMinutesSeconds } from '@wojtekmaj/date-utils';

import LocaleOptions from './LocaleOptions';
import ValueOptions from './ValueOptions';
import ViewOptions from './ViewOptions';
import LocaleOptions from './LocaleOptions.js';
import ValueOptions from './ValueOptions.js';
import ViewOptions from './ViewOptions.js';

import './Test.css';

import type { LooseValue } from './shared/types';
import type { LooseValue } from './shared/types.js';

/* eslint-disable no-console */

Expand Down
2 changes: 1 addition & 1 deletion test/ValueOptions.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { getHoursMinutesSeconds } from '@wojtekmaj/date-utils';

import type { LooseValue } from './shared/types';
import type { LooseValue } from './shared/types.js';

type ValueOptionsProps = {
setValue: (value: LooseValue) => void;
Expand Down
2 changes: 1 addition & 1 deletion test/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import Test from './Test';
import Test from './Test.js';

createRoot(document.getElementById('react-root') as HTMLDivElement).render(
<StrictMode>
Expand Down

0 comments on commit dbb401d

Please sign in to comment.