Bundle cjs and esm

README.md

@@ -1,3 +1,9 @@
+# Explanation
+That's a fork with single change to fix this issue https://github.com/nomcopter/react-mosaic/issues/193
+To install just run 
+`npm i [email protected]`
+
+
 # react-mosaic
 
 [![CircleCI](https://circleci.com/gh/nomcopter/react-mosaic/tree/master.svg?style=svg)](https://circleci.com/gh/nomcopter/react-mosaic/tree/master)

demo/CloseAdditionalControlsButton.tsx

@@ -6,7 +6,7 @@ import { MosaicWindowContext } from '../src';
 
 export class CloseAdditionalControlsButton extends React.PureComponent {
   static contextType = MosaicWindowContext;
-  context!: MosaicWindowContext;
+  declare context: React.ContextType<typeof MosaicWindowContext>;
 
   render() {
     return (

demo/ExampleApp.tsx

@@ -1,7 +1,7 @@
 import { Classes, HTMLSelect } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
-import dropRight from 'lodash/dropRight';
+import { dropRight } from 'lodash-es';
 import React from 'react';
 
 import {

package.json

@@ -3,10 +3,17 @@
   "version": "6.1.0",
   "description": "A React Tiling Window Manager",
   "license": "Apache-2.0",
-  "main": "lib/index.js",
-  "style": "lib/react-mosaic.css",
-  "type": "commonjs",
-  "typings": "lib/index.d.ts",
+  "main": "./index.mjs",
+  "type": "module",
+  "exports": {
+    "./react-mosaic-component.css": "./react-mosaic-component.css",
+    "./package.json": "./package.json",
+    ".": {
+      "import": "./index.mjs",
+      "default": "./index.cjs"
+    }
+  },
+  "style": "./react-mosaic-component.css",
   "repository": {
     "type": "git",
     "url": "https://github.com/nomcopter/react-mosaic.git"
@@ -24,26 +31,29 @@
     "*.css"
   ],
   "scripts": {
-    "build": "npm-run-all clean -lp build:**",
-    "build:ts": "tsc -p tsconfig-build.json",
+    "build": "npm-run-all clean -lp build:** && run-s copy",
     "build:less": "lessc --autoprefix=defaults styles/index.less react-mosaic-component.css",
-    "bundle": "rm -rf docs/ && webpack --config webpack/bundle.ts",
-    "clean": "rm -rf lib/",
+    "build:js": "tsup",
+    "build:check": "tsc --noEmit",
+    "copy": "shx cp package.json ./lib/package.json && shx cp README.md ./lib/README.md && shx cp LICENSE ./lib/LICENSE && shx cp react-mosaic-component.css ./lib/react-mosaic-component.css",
+    "check": "attw --pack lib --entrypoints .",
+    "bundle": "shx rm -rf docs/ && webpack --config webpack/bundle.ts",
+    "clean": "shx rm -rf lib/",
     "start": "webpack-dev-server --config webpack/hot.ts",
-    "prettier:run": "prettier 'styles/*.less' '*.md' '{,.}*.yml' '.circleci/*.yml'",
+    "prettier:run": "prettier \"styles/*.less\" \"*.md\" \"{,.}*.yml\" \".circleci/*.yml\"",
     "test": "npm-run-all build -lp test:**",
-    "test:lint": "tslint -c tslint.yml -p tsconfig.json -e test",
-    "test:unit": "mocha",
-    "test:format": "yarn run prettier:run --list-different",
+    "test-disabled:lint": "tslint -c tslint.yml -p tsconfig.json -e test",
+    "test:unit": "vitest run",
     "fix": "npm-run-all -lp fix:**",
     "fix:format": "yarn run prettier:run --write",
     "fix:lint": "yarn run test:lint --fix",
     "version": "npm-run-all test bundle && git add -A docs/"
   },
   "dependencies": {
     "classnames": "^2.3.2",
+    "dnd-core": "16.0.1",
     "immutability-helper": "^3.1.1",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "prop-types": "^15.8.1",
     "rdndmb-html5-to-touch": "^8.0.0",
     "react-dnd": "^16.0.1",
@@ -53,46 +63,45 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
+    "@arethetypeswrong/cli": "0.16.1",
     "@blueprintjs/core": "^4.15.1",
     "@blueprintjs/icons": "^4.13.1",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
-    "@types/chai": "^4.3.0",
     "@types/classnames": "^2.3.1",
     "@types/dom4": "^2.0.2",
-    "@types/lodash": "^4.14.191",
-    "@types/mocha": "^7.0.2",
+    "@types/lodash-es": "4.17.12",
     "@types/prop-types": "^15.7.5",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.10",
     "@types/uuid": "^9.0.0",
     "@types/webpack": "^5.28.0",
-    "chai": "^4.3.6",
+    "cross-env": "7.0.3",
     "css-loader": "^6.7.3",
-    "dnd-core": "16.0.1",
+    "esbuild-plugin-file-path-extensions": "^2.1.2",
     "html-loader": "^4.2.0",
     "html-webpack-plugin": "^5.5.0",
     "jsdom": "^15.2.1",
     "jsdom-global": "^3.0.2",
     "less": "^3.13.1",
     "less-loader": "^11.1.0",
     "less-plugin-autoprefix": "^2.0.0",
-    "mocha": "^6.2.3",
-    "mocha-junit-reporter": "^1.23.3",
     "mock-require": "^3.0.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.4",
+    "prettier": "2.8.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-refresh": "^0.14.0",
+    "shx": "0.3.4",
     "source-map-loader": "^4.0.1",
     "style-loader": "^3.3.1",
     "ts-loader": "^9.4.2",
-    "ts-node": "^10.9.1",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.18.0",
     "tslint-plugin-prettier": "^2.3.0",
     "tslint-react": "^5.0.0",
-    "typescript": "^4.9.5",
+    "tsup": "^8.2.4",
+    "typescript": "5.5.4",
+    "vitest": "^2.0.5",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1",

src/Mosaic.tsx

@@ -1,8 +1,6 @@
 import classNames from 'classnames';
 import { DragDropManager } from 'dnd-core';
-import countBy from 'lodash/countBy';
-import keys from 'lodash/keys';
-import pickBy from 'lodash/pickBy';
+import { countBy, keys, pickBy } from 'lodash-es';
 import { HTML5toTouch } from 'rdndmb-html5-to-touch';
 import React from 'react';
 import { DndProvider } from 'react-dnd';
@@ -82,7 +80,7 @@ export interface MosaicUncontrolledProps<T extends MosaicKey> extends MosaicBase
 
 export type MosaicProps<T extends MosaicKey> = MosaicControlledProps<T> | MosaicUncontrolledProps<T>;
 
-function isUncontrolled<T extends MosaicKey>(props: MosaicProps<T>): props is MosaicUncontrolledProps<T> {
+function isUncontrolled<T extends MosaicKey>(props: MosaicProps<T>): props is Readonly<MosaicUncontrolledProps<T>> {
   return (props as MosaicUncontrolledProps<T>).initialValue != null;
 }
 

src/MosaicRoot.tsx

@@ -1,4 +1,4 @@
-import flatten from 'lodash/flatten';
+import { flatten } from 'lodash-es';
 import React from 'react';
 import { MosaicContext } from './contextTypes';
 import { Split } from './Split';
@@ -14,7 +14,7 @@ export interface MosaicRootProps<T extends MosaicKey> {
 
 export class MosaicRoot<T extends MosaicKey> extends React.PureComponent<MosaicRootProps<T>> {
   static contextType = MosaicContext;
-  context!: MosaicContext<T>;
+  declare context: React.ContextType<typeof MosaicContext>;
 
   render() {
     const { root } = this.props;

src/MosaicWindow.tsx

@@ -1,9 +1,5 @@
 import classNames from 'classnames';
-import defer from 'lodash/defer';
-import dropRight from 'lodash/dropRight';
-import isEmpty from 'lodash/isEmpty';
-import isEqual from 'lodash/isEqual';
-import values from 'lodash/values';
+import { defer, dropRight, isEmpty, isEqual, values } from 'lodash-es';
 import React, { useContext } from 'react';
 import {
   ConnectDragPreview,
@@ -82,7 +78,7 @@ export class InternalMosaicWindow<T extends MosaicKey> extends React.Component<
     renderToolbar: null,
   };
   static contextType = MosaicContext;
-  context!: MosaicContext<T>;
+  declare context: React.ContextType<typeof MosaicContext>;
 
   state: InternalMosaicWindowState = {
     additionalControlsOpen: false,
@@ -245,6 +241,7 @@ export class InternalMosaicWindow<T extends MosaicKey> extends React.Component<
   };
 
   private readonly childContext: MosaicWindowContext = {
+    // @ts-ignore
     blueprintNamespace: this.context.blueprintNamespace,
     mosaicWindowActions: {
       split: this.split,

src/MosaicZeroState.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import noop from 'lodash/noop';
+import { noop } from 'lodash-es';
 import React from 'react';
 
 import { MosaicContext } from './contextTypes';
@@ -12,7 +12,7 @@ export interface MosaicZeroStateProps<T extends MosaicKey> {
 
 export class MosaicZeroState<T extends MosaicKey> extends React.PureComponent<MosaicZeroStateProps<T>> {
   static contextType = MosaicContext;
-  context!: MosaicContext<T>;
+  declare context: React.ContextType<typeof MosaicContext>;
 
   render() {
     return (

src/RootDropTargets.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import values from 'lodash/values';
+import { values } from 'lodash-es';
 import React from 'react';
 import { useDrop } from 'react-dnd';
 

src/Split.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
-import clamp from 'lodash/clamp';
-import throttle from 'lodash/throttle';
+import { clamp } from 'lodash-es';
+import { throttle } from 'lodash-es';
 import React from 'react';
 
 import { EnabledResizeOptions, MosaicDirection } from './types';

src/buttons/ExpandButton.tsx

@@ -1,13 +1,13 @@
 import classNames from 'classnames';
 import React from 'react';
 
-import { MosaicContext, MosaicRootActions, MosaicWindowContext } from '../contextTypes';
+import { MosaicContext, type MosaicRootActions, MosaicWindowContext } from '../contextTypes';
 import { OptionalBlueprint } from '../util/OptionalBlueprint';
-import { DefaultToolbarButton, MosaicButtonProps } from './MosaicButton';
+import { DefaultToolbarButton, type MosaicButtonProps } from './MosaicButton';
 
 export class ExpandButton extends React.PureComponent<MosaicButtonProps> {
   static contextType = MosaicWindowContext;
-  context!: MosaicWindowContext;
+  declare context: React.ContextType<typeof MosaicWindowContext>;
 
   render() {
     return (

src/buttons/RemoveButton.tsx

@@ -7,7 +7,7 @@ import { DefaultToolbarButton, MosaicButtonProps } from './MosaicButton';
 
 export class RemoveButton extends React.PureComponent<MosaicButtonProps> {
   static contextType = MosaicWindowContext;
-  context!: MosaicWindowContext;
+  declare context: React.ContextType<typeof MosaicWindowContext>;
 
   render() {
     return (

src/buttons/ReplaceButton.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import noop from 'lodash/noop';
+import { noop } from 'lodash-es';
 import React from 'react';
 
 import { MosaicWindowContext } from '../contextTypes';
@@ -8,7 +8,7 @@ import { DefaultToolbarButton, MosaicButtonProps } from './MosaicButton';
 
 export class ReplaceButton extends React.PureComponent<MosaicButtonProps> {
   static contextType = MosaicWindowContext;
-  context!: MosaicWindowContext;
+  declare context: React.ContextType<typeof MosaicWindowContext>;
 
   render() {
     return (

src/buttons/SplitButton.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import noop from 'lodash/noop';
+import { noop } from 'lodash-es';
 import React from 'react';
 
 import { MosaicWindowContext } from '../contextTypes';
@@ -8,7 +8,7 @@ import { DefaultToolbarButton, MosaicButtonProps } from './MosaicButton';
 
 export class SplitButton extends React.PureComponent<MosaicButtonProps> {
   static contextType = MosaicWindowContext;
-  context!: MosaicWindowContext;
+  declare context: React.ContextType<typeof MosaicWindowContext>;
 
   render() {
     return (

src/index.ts

@@ -16,24 +16,24 @@
  */
 export {
   Mosaic,
-  MosaicProps,
-  MosaicUncontrolledProps,
-  MosaicControlledProps,
+  type MosaicProps,
+  type MosaicUncontrolledProps,
+  type MosaicControlledProps,
   MosaicWithoutDragDropContext,
 } from './Mosaic';
 export {
-  MosaicNode,
+  type MosaicNode,
   MosaicDragType,
-  MosaicDirection,
-  MosaicBranch,
-  CreateNode,
-  MosaicParent,
-  MosaicPath,
-  MosaicUpdate,
-  MosaicUpdateSpec,
-  TileRenderer,
+  type MosaicDirection,
+  type MosaicBranch,
+  type CreateNode,
+  type MosaicParent,
+  type MosaicPath,
+  type MosaicUpdate,
+  type MosaicUpdateSpec,
+  type TileRenderer,
 } from './types';
-export { MosaicContext, MosaicRootActions, MosaicWindowActions, MosaicWindowContext } from './contextTypes';
+export { MosaicContext, type MosaicRootActions, type MosaicWindowActions, MosaicWindowContext } from './contextTypes';
 export {
   buildSpecFromUpdate,
   createDragToUpdates,
@@ -53,9 +53,9 @@ export {
   getPathToCorner,
   isParent,
 } from './util/mosaicUtilities';
-export { MosaicWindow, MosaicWindowProps } from './MosaicWindow';
-export { createDefaultToolbarButton, DefaultToolbarButton, MosaicButtonProps } from './buttons/MosaicButton';
-export { MosaicZeroState, MosaicZeroStateProps } from './MosaicZeroState';
+export { MosaicWindow, type MosaicWindowProps } from './MosaicWindow';
+export { createDefaultToolbarButton, DefaultToolbarButton, type MosaicButtonProps } from './buttons/MosaicButton';
+export { MosaicZeroState, type MosaicZeroStateProps } from './MosaicZeroState';
 export { Separator } from './buttons/Separator';
 export { ExpandButton } from './buttons/ExpandButton';
 export { ReplaceButton } from './buttons/ReplaceButton';

src/types.ts

@@ -1,4 +1,4 @@
-import { Spec } from 'immutability-helper';
+import type { Spec } from 'immutability-helper';
 
 /**
  * Valid node types

src/util/OptionalBlueprint.tsx

@@ -1,7 +1,7 @@
 import type { Classes } from '@blueprintjs/core';
 import type { IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
-import kebabCase from 'lodash/kebabCase';
+import { kebabCase } from 'lodash-es';
 import * as React from 'react';
 import { MosaicContext } from '../contextTypes';