diff --git a/package.json b/package.json
index 7f6bdb658..31cea6df5 100644
--- a/package.json
+++ b/package.json
@@ -1,60 +1,60 @@
{
- "name": "dockview-monorepo-root",
- "private": true,
- "description": "Monorepo for https://github.com/mathuo/dockview",
- "scripts": {
- "test": "jest",
- "lint": "eslint packages/**/src/** --ext .ts,.tsx,.js,.jsx",
- "package": "node scripts/package.js",
- "package-all": "npm run build-demo && npm run docs && node scripts/package.js",
- "build": "lerna run build --ignore dockview-demo",
- "build-demo": "lerna run build --scope dockview-demo",
- "docs": "lerna run docs --scope dockview",
- "clean": "lerna run clean",
- "bootstrap": "lerna bootstrap",
- "bootstrap-no-hoist": "lerna bootstrap",
- "test:cov": "jest --coverage",
- "version-beta-build": "lerna version prerelease --preid beta",
- "publish-app": "lerna publish"
- },
- "repository": {
- "type": "git",
- "url": "git+https://github.com/mathuo/dockview.git"
- },
- "author": "https://github.com/mathuo",
- "license": "MIT",
- "bugs": {
- "url": "https://github.com/mathuo/dockview/issues"
- },
- "homepage": "https://github.com/mathuo/dockview#readme",
- "devDependencies": {
- "@testing-library/dom": "^8.13.0",
- "@types/jest": "^27.4.1",
- "@typescript-eslint/eslint-plugin": "^5.19.0",
- "@typescript-eslint/parser": "^5.19.0",
- "codecov": "^3.8.3",
- "cross-env": "^7.0.3",
- "css-loader": "^6.7.1",
- "eslint": "^8.13.0",
- "fs-extra": "^10.0.1",
- "gulp": "^4.0.2",
- "gulp-concat": "^2.6.1",
- "gulp-dart-sass": "^1.0.2",
- "jest": "^27.5.1",
- "jest-sonar-reporter": "^2.0.0",
- "jsdom": "^19.0.0",
- "lerna": "^4.0.0",
- "merge2": "^1.4.1",
- "rimraf": "^3.0.2",
- "sass": "^1.50.0",
- "sass-loader": "^12.6.0",
- "style-loader": "^3.3.1",
- "ts-jest": "^27.1.4",
- "ts-loader": "^9.2.8",
- "tslib": "^2.3.1",
- "typescript": "^4.6.3",
- "webpack": "^5.72.0",
- "webpack-cli": "^4.9.2",
- "webpack-dev-server": "^4.8.1"
- }
+ "name": "dockview-monorepo-root",
+ "private": true,
+ "description": "Monorepo for https://github.com/mathuo/dockview",
+ "scripts": {
+ "test": "jest",
+ "lint": "eslint packages/**/src/** --ext .ts,.tsx,.js,.jsx",
+ "package": "node scripts/package.js",
+ "package-all": "npm run build-demo && npm run docs && node scripts/package.js",
+ "build": "lerna run build --scope dockview",
+ "build-demo": "lerna run build --scope dockview-demo",
+ "docs": "lerna run docs --scope dockview",
+ "clean": "lerna run clean",
+ "bootstrap": "lerna bootstrap",
+ "bootstrap-no-hoist": "lerna bootstrap",
+ "test:cov": "jest --coverage",
+ "version-beta-build": "lerna version prerelease --preid beta",
+ "publish-app": "lerna publish"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/mathuo/dockview.git"
+ },
+ "author": "https://github.com/mathuo",
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/mathuo/dockview/issues"
+ },
+ "homepage": "https://github.com/mathuo/dockview#readme",
+ "devDependencies": {
+ "@testing-library/dom": "^8.13.0",
+ "@types/jest": "^27.4.1",
+ "@typescript-eslint/eslint-plugin": "^5.19.0",
+ "@typescript-eslint/parser": "^5.19.0",
+ "codecov": "^3.8.3",
+ "cross-env": "^7.0.3",
+ "css-loader": "^6.7.1",
+ "eslint": "^8.13.0",
+ "fs-extra": "^10.0.1",
+ "gulp": "^4.0.2",
+ "gulp-concat": "^2.6.1",
+ "gulp-dart-sass": "^1.0.2",
+ "jest": "^27.5.1",
+ "jest-sonar-reporter": "^2.0.0",
+ "jsdom": "^19.0.0",
+ "lerna": "^4.0.0",
+ "merge2": "^1.4.1",
+ "rimraf": "^3.0.2",
+ "sass": "^1.50.0",
+ "sass-loader": "^12.6.0",
+ "style-loader": "^3.3.1",
+ "ts-jest": "^27.1.4",
+ "ts-loader": "^9.2.8",
+ "tslib": "^2.3.1",
+ "typescript": "^4.6.3",
+ "webpack": "^5.72.0",
+ "webpack-cli": "^4.9.2",
+ "webpack-dev-server": "^4.8.1"
+ }
}
diff --git a/packages/dockview-docs/.eslintrc.json b/packages/dockview-docs/.eslintrc.json
new file mode 100644
index 000000000..bffb357a7
--- /dev/null
+++ b/packages/dockview-docs/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+ "extends": "next/core-web-vitals"
+}
diff --git a/packages/dockview-docs/.gitignore b/packages/dockview-docs/.gitignore
new file mode 100644
index 000000000..737d87210
--- /dev/null
+++ b/packages/dockview-docs/.gitignore
@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
diff --git a/packages/dockview-docs/README.md b/packages/dockview-docs/README.md
new file mode 100644
index 000000000..c87e0421d
--- /dev/null
+++ b/packages/dockview-docs/README.md
@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/packages/dockview-docs/jsexamples/dockview.html b/packages/dockview-docs/jsexamples/dockview.html
new file mode 100644
index 000000000..84a4e165e
--- /dev/null
+++ b/packages/dockview-docs/jsexamples/dockview.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/dockview-docs/next-env.d.ts b/packages/dockview-docs/next-env.d.ts
new file mode 100644
index 000000000..4f11a03dc
--- /dev/null
+++ b/packages/dockview-docs/next-env.d.ts
@@ -0,0 +1,5 @@
+///
+
\ No newline at end of file
diff --git a/packages/dockview-docs/src/components/code.tsx b/packages/dockview-docs/src/components/code.tsx
new file mode 100644
index 000000000..24d861b9b
--- /dev/null
+++ b/packages/dockview-docs/src/components/code.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import Highlight, { defaultProps, Language } from 'prism-react-renderer';
+import theme from 'prism-react-renderer/themes/palenight';
+
+interface CodeBlockProps {
+ children: string;
+ className?: string;
+ live?: boolean | string;
+ render?: boolean | string;
+ url: string;
+ code?: boolean | string;
+ center?: boolean | string;
+ edit?: boolean | string;
+}
+
+export const CodeBlock = ({
+ children,
+ className = '',
+ live,
+ render,
+ url,
+ code = true,
+ center = true,
+ edit = false,
+}: CodeBlockProps) => {
+ if (!className) {
+ return (
+
+ {children}
+
+ );
+ }
+
+ const language = className.replace(/language-/, '');
+
+ return (
+
+ {({ className, style, tokens, getLineProps, getTokenProps }) => (
+
+ {tokens.map((line, i) => (
+
+ {line.map((token, key) => (
+
+ ))}
+
+ )}
+
+ );
+};
diff --git a/packages/dockview-docs/src/components/container.tsx b/packages/dockview-docs/src/components/container.tsx
new file mode 100644
index 000000000..aca43e0a2
--- /dev/null
+++ b/packages/dockview-docs/src/components/container.tsx
@@ -0,0 +1,19 @@
+import { PAGES } from '../references/pages';
+import { Navigation } from './navigation';
+
+export const Container = (props: { children: React.ReactNode }) => {
+ return (
+
+
+
+ {props.children}
+
+ );
+};
diff --git a/packages/dockview-docs/src/components/footer.tsx b/packages/dockview-docs/src/components/footer.tsx
new file mode 100644
index 000000000..686d6af1f
--- /dev/null
+++ b/packages/dockview-docs/src/components/footer.tsx
@@ -0,0 +1,7 @@
+export const Footer = (props: {}) => {
+ return (
+
+ footer
+
+ );
+};
diff --git a/packages/dockview-docs/src/components/header.tsx b/packages/dockview-docs/src/components/header.tsx
new file mode 100644
index 000000000..96a47c911
--- /dev/null
+++ b/packages/dockview-docs/src/components/header.tsx
@@ -0,0 +1,46 @@
+import { DockviewReact, DockviewReadyEvent } from 'dockview';
+
+const components = {
+ default: () => {
+ return Hello World
;
+ },
+};
+
+export const Header = (props: {}) => {
+ const onReady = (event: DockviewReadyEvent) => {
+ event.api.addPanel({
+ id: 'panel1',
+ component: 'default',
+ });
+
+ event.api.addPanel({
+ id: 'panel2',
+ component: 'default',
+ });
+
+ event.api.addPanel({
+ id: 'panel3',
+ component: 'default',
+ position: {
+ referencePanel: 'panel2',
+ direction: 'right',
+ },
+ });
+ };
+
+ return (
+
+
+ );
+};
diff --git a/packages/dockview-docs/src/components/navigation.tsx b/packages/dockview-docs/src/components/navigation.tsx
new file mode 100644
index 000000000..aaf221541
--- /dev/null
+++ b/packages/dockview-docs/src/components/navigation.tsx
@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { Page } from '../references/pages';
+import Link from 'next/link';
+
+const LinkHeader = (props: { url: string; title: string }) => {
+ return (
+ {props.title}
+
+ );
+};
+
+export const CollapsibleNode = (props: {
+ page: Page;
+ children: React.ReactNode;
+ depth: number;
+}) => {
+ const [expanded, setExpaned] = React.useState(false);
+
+ const onClick = () => {
+ setExpaned(!expanded);
+ };
+
+ const cn = React.useMemo(() => {
+ return ['node', expanded ? 'expanded' : 'collapsed'].join(' ');
+ }, [expanded]);
+
+ return (
+ <>
+
+ {props.page.url ? (
+
+
+ {props.children}
+
+
+ );
+};
+
+export const Node = (props: { page: Page; depth: number }) => {
+ if (props.page.routes) {
+ return (
+
+ {props.page.routes.map((page) => (
+
+ );
+ }
+
+ return (
+
+ {props.page.url ? (
+
+ );
+};
+
+export const Navigation = (props: { pages: Page[] }) => {
+ return (
+
+ {props.pages.map((page) => (
+
+ );
+};
diff --git a/packages/dockview-docs/src/components/simpleSplitview.tsx b/packages/dockview-docs/src/components/simpleSplitview.tsx
new file mode 100644
index 000000000..dfa95a711
--- /dev/null
+++ b/packages/dockview-docs/src/components/simpleSplitview.tsx
@@ -0,0 +1,49 @@
+import {
+ ISplitviewPanelProps,
+ Orientation,
+ SplitviewReact,
+ SplitviewReadyEvent,
+} from 'dockview';
+
+const components = {
+ default: (props: ISplitviewPanelProps<{ title: string }>) => {
+ return {props.params.title}
;
+ },
+};
+
+export const SimpleSplitview = () => {
+ const onReady = (event: SplitviewReadyEvent) => {
+ event.api.addPanel({
+ id: 'panel_1',
+ component: 'default',
+ params: {
+ title: 'Panel 1',
+ },
+ });
+
+ event.api.addPanel({
+ id: 'panel_2',
+ component: 'default',
+ params: {
+ title: 'Panel 2',
+ },
+ });
+
+ event.api.addPanel({
+ id: 'panel_3',
+ component: 'default',
+ params: {
+ title: 'Panel 3',
+ },
+ });
+ };
+
+ return (
+ this is a test component
;
+};
diff --git a/packages/dockview-docs/src/pages/_app.tsx b/packages/dockview-docs/src/pages/_app.tsx
new file mode 100644
index 000000000..b93704f16
--- /dev/null
+++ b/packages/dockview-docs/src/pages/_app.tsx
@@ -0,0 +1,33 @@
+import { Header } from '../components/header';
+import { Footer } from '../components/footer';
+import { Container } from '../components/container';
+import { AppProps } from 'next/app';
+import '../styles/globals.css';
+import { CodeBlock } from '../components/code';
+import { MDXProvider } from '@mdx-js/react';
+
+const components = {
+ code: CodeBlock,
+} as any;
+
+const MyApp = (props: AppProps) => {
+ return (
+
+ );
+};
+
+export default MyApp;
diff --git a/packages/dockview-docs/src/pages/_document.tsx b/packages/dockview-docs/src/pages/_document.tsx
new file mode 100644
index 000000000..5e76a414d
--- /dev/null
+++ b/packages/dockview-docs/src/pages/_document.tsx
@@ -0,0 +1,28 @@
+import { Html, Head, Main, NextScript } from 'next/document';
+
+export default function Document() {
+ return (
+
+
+
+
+ );
+};
+
+export default Component;
diff --git a/packages/dockview-docs/src/pages/basics.tsx b/packages/dockview-docs/src/pages/basics.tsx
new file mode 100644
index 000000000..504049760
--- /dev/null
+++ b/packages/dockview-docs/src/pages/basics.tsx
@@ -0,0 +1,9 @@
+import { NextPage } from 'next';
+
+const Page: NextPage = (props) => {
+ return (
+ basics
+ );
+};
+
+export default Page;
diff --git a/packages/dockview-docs/src/pages/index.mdx b/packages/dockview-docs/src/pages/index.mdx
new file mode 100644
index 000000000..92e58e2a6
--- /dev/null
+++ b/packages/dockview-docs/src/pages/index.mdx
@@ -0,0 +1,130 @@
+import { SimpleSplitview } from '../components/simpleSplitview';
+
+# Introduction
+
+**dockview** is a zero dependency layout manager that supports tab, grids and splitviews.
+
+## Features
+
+- Themable and customizable
+- Support for the serialization and deserialization of layouts
+- Drag and drop support
+
+# Quick start
+
+`dockview` has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. To install `dockview` you can run:
+
+```shell
+npm install dockview
+```
+
+You must also import the dockview stylesheet found under [`dockview/dict/styles/dockview.css`](https://unpkg.com/browse/dockview@latest/dist/styles/dockview.css),
+depending on your solution this might be:
+
+```css
+@import './node_modules/dockview/dist/styles/dockview.css';
+```
+
+A dark and light theme are provided, one of these classes (or a custom theme) must be attached at any point above your components in the HTML tree. To cover the entire web page you might attach the class to the `body` component:
+
+```html
+
+ ...
+
+
+ ...
+
+```
+
+There are 4 components you may want to use:
+
+Splitview
+
+
+
+
+```tsx
+import {
+ DockviewReact,
+ DockviewReadyEvent,
+ PanelCollection,
+ IDockviewPanelProps,
+ IDockviewPanelHeaderProps,
+} from 'dockview';
+
+const components: PanelCollection = {
+ default: (props: IDockviewPanelProps<{ someProps: string }>) => {
+ return {props.params.someProps}
;
+ },
+};
+
+const headers: PanelCollection = {
+ customTab: (props: IDockviewPanelHeaderProps) => {
+ return (
+
+ {props.api.title}
+ props.api.close()}>{'[x]'}
+
+ );
+ },
+};
+
+const Component = () => {
+ const onReady = (event: DockviewReadyEvent) => {
+ event.api.addPanel({
+ id: 'panel1',
+ component: 'default',
+ tabComponent: 'customTab', // optional custom header
+ params: {
+ someProps: 'Hello',
+ },
+ });
+ event.api.addPanel({
+ id: 'panel2',
+ component: 'default',
+ params: {
+ someProps: 'World',
+ },
+ position: { referencePanel: 'panel1', direction: 'below' },
+ });
+ };
+
+ return (
+ = {
+ default: (props: IDockviewPanelProps<{ someProps: string }>) => {
+ return {props.params.someProps}
;
+ },
+ fancy: (props: IDockviewPanelProps) => {
+ return (
+
+
+
+ {props.api.title}
+ props.api.close()}>{'Close'}
+
+
+
+ {'Hello world'}
+
+
+ );
+ },
+};
+```
diff --git a/packages/dockview-docs/src/references/pages.ts b/packages/dockview-docs/src/references/pages.ts
new file mode 100644
index 000000000..a43cbbc2b
--- /dev/null
+++ b/packages/dockview-docs/src/references/pages.ts
@@ -0,0 +1,49 @@
+export interface Page {
+ title: string;
+ url?: string;
+ routes?: Page[];
+}
+
+export const PAGES: Page[] = [
+ { title: 'Introduction', url: '/#introduction' },
+ { title: 'Basics', url: '/basics/#basics' },
+ {
+ title: 'API',
+ url: '#api',
+ routes: [
+ {
+ title: 'Dockview',
+ url: '#dockview',
+ routes: [
+ { title: 'Item1', url: '/item1' },
+ { title: 'Item2', url: '/item2' },
+ ],
+ },
+ // {
+ // title: 'Gridview',
+ // url: '#gridview',
+ // routes: [
+ // { title: 'Item1', url: 'item1' },
+ // { title: 'Item2', url: 'item2' },
+ // ],
+ // },
+ // {
+ // title: 'Splitview',
+ // url: '#splitview',
+ // routes: [
+ // { title: 'Item1', url: 'item1' },
+ // { title: 'Item2', url: 'item2' },
+ // ],
+ // },
+ // {
+ // title: 'Paneview',
+ // url: '#paneivew',
+ // routes: [
+ // { title: 'Item1', url: 'item1' },
+ // { title: 'Item2', url: 'item2' },
+ // ],
+ // },
+ ],
+ },
+ { title: 'Guides', url: '#guides' },
+];
diff --git a/packages/dockview-docs/src/styles/globals.css b/packages/dockview-docs/src/styles/globals.css
new file mode 100644
index 000000000..f223dbdf6
--- /dev/null
+++ b/packages/dockview-docs/src/styles/globals.css
@@ -0,0 +1,43 @@
+@import "./navigation.css";
+@import "~dockview/dist/styles/dockview.css";
+
+html,
+body {
+ padding: 0;
+ margin: 0;
+ /* font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+ Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; */
+ font-family: 'Roboto', sans-serif;
+}
+
+a {
+ text-decoration: none;
+ color:dodgerblue;
+}
+
+a, a:hover, a:visited, a:active {
+ color:dodgerblue;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+
+* {
+ box-sizing: border-box;
+}
+
+.icon {
+ width: 16px;
+ height: 16px;
+ display: inline-block;
+ margin-left: 8px;
+}
+
+.icon-link {
+ background-image: url(/icon-link.svg);
+ background-repeat: no-repeat;
+ background-size: 100%;
+ background-position: center center;
+}
diff --git a/packages/dockview-docs/src/styles/navigation.css b/packages/dockview-docs/src/styles/navigation.css
new file mode 100644
index 000000000..b45580967
--- /dev/null
+++ b/packages/dockview-docs/src/styles/navigation.css
@@ -0,0 +1,45 @@
+.navigation {
+ padding: 30px;
+ background-color: lightgray;
+ font-size: 16px;
+ width: 200px;
+ border-radius: 15px;
+}
+
+.node {
+ padding: 5px 0px;
+ cursor: pointer;
+}
+
+.expandable-node::after {
+
+}
+
+.expanded::after {
+ border-width: 6px 4px 0px;
+ border-color: grey transparent transparent;
+ content: '';
+ width: 0px;
+ height: 0px;
+ border-style: solid;
+ border-radius: 1px;
+ display: inline-block;
+ vertical-align: middle;
+ margin-left: 10px;
+ margin-bottom: 2px;
+}
+
+
+.collapsed::after {
+ border-width: 4px 6px 4px 0px;
+ border-color: transparent grey transparent;
+ content: '';
+ width: 0px;
+ height: 0px;
+ border-style: solid;
+ border-radius: 1px;
+ display: inline-block;
+ vertical-align: middle;
+ margin-left: 10px;
+ margin-bottom: 2px;
+}
diff --git a/packages/dockview-docs/src/test.tsx b/packages/dockview-docs/src/test.tsx
new file mode 100644
index 000000000..d657ae536
--- /dev/null
+++ b/packages/dockview-docs/src/test.tsx
@@ -0,0 +1,79 @@
+import {
+ GridviewReact,
+ Orientation,
+ GridviewReadyEvent,
+ DockviewReact,
+ DockviewReadyEvent,
+} from 'dockview';
+
+const components = {
+ default: () => {
+ return hello world
;
+ },
+ docking: () => {
+ return hello world
;
+ },
+};
+
+export const Test2 = () => {
+ const onReady = (event: DockviewReadyEvent) => {
+ event.api.addPanel({
+ component: 'default',
+ id: 'view_1',
+ });
+
+ event.api.addPanel({
+ component: 'default',
+ id: 'view_2',
+ });
+
+ event.api.addPanel({
+ component: 'default',
+ id: 'view_3',
+ });
+ };
+
+ return (
+ //
+
+ );
+};
diff --git a/packages/dockview-docs/tsconfig.json b/packages/dockview-docs/tsconfig.json
new file mode 100644
index 000000000..0b1236256
--- /dev/null
+++ b/packages/dockview-docs/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "src/pages/index.msx", "src/pages/basic.stsx"],
+ "exclude": ["node_modules"],
+ "paths": {
+ "react": ["node_modules/react"],
+ "react-dom": ["node_modules/react-dom"]
+ }
+}