feat: export types for package @excalidraw/excalidraw 🎉 (#3337)

* feat: export types for package @excalidraw/excalidraw

* update

* remove

* Add lib in tsconfig-types and Add global.d.ts, and errors down to 39 :)

* Add declaration for scss so typescript allows scss imports, errors down to 37 :)

* Add css.d.ts, errors down to 32 yay

* set target to es6, all errors resolved yay

* move types outside dist

* update docs

* fix

.gitignore

@@ -20,3 +20,4 @@ package-lock.json
 static
 yarn-debug.log*
 yarn-error.log*
+src/packages/excalidraw/types

src/global.d.ts

@@ -89,3 +89,5 @@ interface Blob {
   handle?: import("browser-fs-acces").FileSystemHandle;
   name?: string;
 }
+
+declare module "*.scss";

src/packages/excalidraw/CHANGELOG.md

@@ -18,6 +18,7 @@ Please add the latest change on the top under the correct section.
 
 ### Features
 
+- Export types for the package so now it can be used with typescript[#3337](https://github.com/excalidraw/excalidraw/pull/3337). The types are available at `@excalidraw/excalirdraw/types`.
 - Add `renderCustomStats` prop to render extra stats on host, and expose `setToastMessage` API via refs which can be used to show toast with custom message [#3360](https://github.com/excalidraw/excalidraw/pull/3360).
 - Support passing a CSRF token when importing libraries to prevent prompting before installation. The token is passed from [https://libraries.excalidraw.com](https://libraries.excalidraw.com/) using the `token` URL key [#3329](https://github.com/excalidraw/excalidraw/pull/3329).
 - #### BREAKING CHANGE

src/packages/excalidraw/README_NEXT.md

@@ -171,6 +171,8 @@ To view the full example visit :point_down:
 
 [![Edit excalidraw](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/excalidraw-ehlz3?fontsize=14&hidenavigation=1&theme=dark)
 
+</details>
+
 Since Excalidraw doesn't support server side rendering yet so you will have to make sure the component is rendered once host is mounted.
 
 ```js
@@ -184,7 +186,7 @@ export default function IndexPage() {
 }
 ```
 
-</details>
+The `types` are available at `@excalidraw/excalidraw/types`, you can view [example for typescript](https://codesandbox.io/s/excalidraw-types-9h2dm)
 
 #### In Browser
 

src/packages/excalidraw/package.json

@@ -2,8 +2,10 @@
   "name": "@excalidraw/excalidraw",
   "version": "0.5.0",
   "main": "main.js",
+  "types": "types/packages/excalidraw/index.d.ts",
   "files": [
-    "dist/*"
+    "dist/*",
+    "types/*"
   ],
   "publishConfig": {
     "access": "public"
@@ -58,6 +60,7 @@
     "sass-loader": "11.0.1",
     "terser-webpack-plugin": "5.1.1",
     "ts-loader": "8.0.18",
+    "typescript": "4.2.3",
     "webpack": "5.28.0",
     "webpack-bundle-analyzer": "4.4.0",
     "webpack-cli": "4.6.0"
@@ -66,7 +69,8 @@
   "repository": "https://github.com/excalidraw/excalidraw",
   "homepage": "https://github.com/excalidraw/excalidraw/tree/master/src/packages/excalidraw",
   "scripts": {
-    "build:umd": "cross-env NODE_ENV=production webpack --config webpack.prod.config.js && cross-env NODE_ENV=development webpack --config webpack.dev.config.js",
+    "gen:types": "tsc --project ../../../tsconfig-types.json",
+    "build:umd": "cross-env NODE_ENV=production webpack --config webpack.prod.config.js && cross-env NODE_ENV=development webpack --config webpack.dev.config.js && yarn gen:types",
     "build:umd:withAnalyzer": "cross-env NODE_ENV=production ANALYZER=true webpack --config webpack.prod.config.js",
     "pack": "yarn build:umd && yarn pack"
   }

src/packages/excalidraw/yarn.lock

@@ -2586,6 +2586,11 @@ tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+typescript@4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.3.tgz#39062d8019912d43726298f09493d598048c1ce3"
+  integrity sha512-qOcYwxaByStAWrBf4x0fibwZvMRG+r4cQoTjbPtUlrWjBHbmCAww1i448U0GJ+3cNNEtebDteo/cHOR3xJ4wEw==
+
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"

tsconfig-types.json

@@ -0,0 +1,18 @@
+{
+  "include": ["src/packages/excalidraw", "src/global.d.ts", "src/css.d.ts"],
+  "compilerOptions": {
+    "allowJs": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "src/packages/excalidraw/types",
+    "jsx": "react-jsx",
+    "target": "es6",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  }
+}