build: export only named exports from the package (#5045)

* build: export only named exports from the package

* update docs

* Update src/packages/excalidraw/CHANGELOG.md

* fix lint

src/packages/excalidraw/CHANGELOG.md

@@ -38,6 +38,26 @@ You will need to pass `activeTool.locked` instead of `elementType` from now onwa
 
 You will need to pass `activeTool` instead of `elementType` from now onwards in `appState`
 
+### Build
+
+- Use only named exports [#5045](https://github.com/excalidraw/excalidraw/pull/5045).
+
+#### BREAKING CHANGE
+
+You will need to import the named export from now onwards to use the component
+
+Using bundler :point_down:
+
+```js
+import { Excalidraw } from "@excalidraw/excalidraw";
+```
+
+In Browser :point_down:
+
+```js
+React.createElement(ExcalidrawLib.Excalidraw, opts);
+```
+
 ## 0.11.0 (2022-02-17)
 
 ## Excalidraw API

src/packages/excalidraw/README_NEXT.md

@@ -48,7 +48,7 @@ If you are using a Web bundler (for instance, Webpack), you can import it as an
 
 ```js
 import React, { useEffect, useState, useRef } from "react";
-import Excalidraw from "@excalidraw/excalidraw-next";
+import { Excalidraw } from "@excalidraw/excalidraw-next";
 import InitialData from "./initialData";
 
 import "./styles.scss";
@@ -328,7 +328,7 @@ const App = () => {
         className: "excalidraw-wrapper",
         ref: excalidrawWrapperRef,
       },
-      React.createElement(Excalidraw.default, {
+      React.createElement(ExcalidrawLib.Excalidraw, {
         initialData: InitialData,
         onChange: (elements, state) =>
           console.log("Elements :", elements, "State : ", state),

src/packages/excalidraw/entry.js

@@ -2,5 +2,5 @@ import Excalidraw from "./index";
 
 import "../../../public/fonts.css";
 
-export default Excalidraw;
+export { Excalidraw };
 export * from "./index";

src/packages/excalidraw/example/App.js

@@ -9,9 +9,9 @@ import { MIME_TYPES } from "../../../constants";
 
 // This is so that we use the bundled excalidraw.development.js file instead
 // of the actual source code
-const { exportToCanvas, exportToSvg, exportToBlob } = window.Excalidraw;
-const Excalidraw = window.Excalidraw.default;
 
+const { exportToCanvas, exportToSvg, exportToBlob, Excalidraw } =
+  window.ExcalidrawLib;
 const resolvablePromise = () => {
   let resolve;
   let reject;

src/packages/excalidraw/webpack.dev.config.js

@@ -12,7 +12,7 @@ module.exports = {
   },
   output: {
     path: path.resolve(__dirname, outputDir),
-    library: "Excalidraw",
+    library: "ExcalidrawLib",
     libraryTarget: "umd",
     filename: "[name].js",
     chunkFilename: "excalidraw-assets-dev/[name]-[contenthash].js",

src/packages/excalidraw/webpack.prod.config.js

@@ -13,7 +13,7 @@ module.exports = {
   },
   output: {
     path: path.resolve(__dirname, "dist"),
-    library: "Excalidraw",
+    library: "ExcalidrawLib",
     libraryTarget: "umd",
     filename: "[name].js",
     chunkFilename: "excalidraw-assets/[name]-[contenthash].js",