@htmlplus/element 0.1.1 → 0.1.4

package/dist/client/decorators/state.js

@@ -1,9 +1,8 @@
-import { host } from '../helpers/index.js';
-import { api, decorator, defineProperty } from '../utils/index.js';
+import { api, defineProperty, host, onReady } from '../utils/index.js';
 export function State() {
-    const setup = (target, propertyKey) => {
+    return function (target, propertyKey) {
         let prev, next;
-        return {
+        defineProperty(target, propertyKey, {
             get() {
                 return next;
             },
@@ -14,20 +13,23 @@ export function State() {
                 next = input;
                 if (!((_a = api(this)) === null || _a === void 0 ? void 0 : _a.ready))
                     return;
-                api(this).request({ [propertyKey]: [next, prev] });
-                prev = next;
-            },
-            onReady() {
-                defineProperty(host(this), propertyKey, {
-                    get: () => {
-                        return this[propertyKey];
-                    },
-                    set: (value) => {
-                        this[propertyKey] = value;
-                    }
+                api(this)
+                    .request({ [propertyKey]: [next, prev] })
+                    .catch((error) => {
+                    throw error;
                 });
+                prev = next;
             }
-        };
+        });
+        onReady(target, function () {
+            defineProperty(host(this), propertyKey, {
+                get: () => {
+                    return this[propertyKey];
+                },
+                set: (value) => {
+                    this[propertyKey] = value;
+                }
+            });
+        });
     };
-    return decorator(setup);
 }

package/dist/client/decorators/watch.js

@@ -1,18 +1,17 @@
 import * as CONSTANTS from '../../configs/constants.js';
-import { defineMethod } from '../utils/index.js';
+import { appendToMethod } from '../utils/index.js';
 // TODO: support * key
 export function Watch(...keys) {
     return function (target, propertyKey) {
         if (!keys.length)
             return;
-        defineMethod(target, CONSTANTS.TOKEN_LIFECYCLE_UPDATED, function (instance, callback, args) {
+        appendToMethod(target, CONSTANTS.TOKEN_LIFECYCLE_UPDATED, function (args) {
             const [states] = args;
             for (const key of keys) {
                 if (states === null || states === void 0 ? void 0 : states[key]) {
-                    instance[propertyKey](...states[key], key);
+                    this[propertyKey](...states[key], key);
                 }
             }
-            return callback === null || callback === void 0 ? void 0 : callback(...args);
         });
     };
 }

package/dist/client/helpers/direction.d.ts

@@ -1,2 +1,2 @@
-import { Direction } from '../../types/index.js';
+export declare type Direction = 'ltr' | 'rtl';
 export declare const direction: (target: any) => Direction;

package/dist/client/helpers/direction.js

@@ -1,4 +1,4 @@
-import { host } from './host.js';
+import { host } from '../utils/index.js';
 export const direction = (target) => {
     return getComputedStyle(host(target)).getPropertyValue('direction').toLowerCase();
 };

package/dist/client/helpers/index.d.ts

@@ -1,11 +1,9 @@
 export * from './classes.js';
 export * from './direction.js';
-export * from './event.js';
-export * from './host.js';
 export * from './is-rtl.js';
-export * from './is-server.js';
 export * from './query.js';
 export * from './query-all.js';
 export * from './slots.js';
 export * from './styles.js';
 export * from './to-unit.js';
+export { host, isServer, on, off } from '../utils/index.js';

package/dist/client/helpers/index.js

@@ -1,11 +1,9 @@
 export * from './classes.js';
 export * from './direction.js';
-export * from './event.js';
-export * from './host.js';
 export * from './is-rtl.js';
-export * from './is-server.js';
 export * from './query.js';
 export * from './query-all.js';
 export * from './slots.js';
 export * from './styles.js';
 export * from './to-unit.js';
+export { host, isServer, on, off } from '../utils/index.js';

package/dist/client/helpers/query-all.js

@@ -1,4 +1,4 @@
-import { host } from './host.js';
+import { host } from '../utils/index.js';
 export function queryAll(target, selectors) {
     var _a, _b;
     return (_b = (_a = host(target)) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll(selectors);

package/dist/client/helpers/query.js

@@ -1,4 +1,4 @@
-import { host } from './host.js';
+import { host } from '../utils/index.js';
 export function query(target, selectors) {
     var _a, _b;
     return (_b = (_a = host(target)) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(selectors);

package/dist/client/services/link.js

@@ -1,4 +1,4 @@
-import { host } from '../helpers/index.js';
+import { defineProperty, host } from '../utils/index.js';
 const links = new Map();
 // TODO: return type
 export const createLink = (namespace) => {
@@ -51,7 +51,7 @@ export const createLink = (namespace) => {
         if (source.type === 'inject')
             return set(source, source.value /* TODO */);
         // TODO: any
-        Object.defineProperty(source.instance, source.name, {
+        defineProperty(source.instance, source.name, {
             value: get(source) /* TODO */,
             enumerable: true,
             configurable: true
@@ -66,7 +66,7 @@ export const createLink = (namespace) => {
     const proxy = (source) => {
         let value = get(source);
         // TODO: any
-        Object.defineProperty(source.instance, source.name, {
+        defineProperty(source.instance, source.name, {
             enumerable: true,
             configurable: true,
             get() {

package/dist/client/utils/api.d.ts

@@ -1,2 +1,6 @@
-import { Api } from '../../types/index.js';
+export interface Api {
+    ready: boolean;
+    host(): HTMLElement;
+    request(states?: any): Promise<boolean>;
+}
 export declare const api: (target: any) => Api;

package/dist/client/utils/append-to-method.d.ts

@@ -0,0 +1 @@
+export declare const appendToMethod: (target: any, propertyKey: PropertyKey, handler: (this: any, args: Array<any>) => void) => void;

package/dist/client/utils/append-to-method.js

@@ -0,0 +1,7 @@
+export const appendToMethod = (target, propertyKey, handler) => {
+    const callback = target[propertyKey];
+    target[propertyKey] = function () {
+        handler.bind(this)(Array.from(arguments));
+        return callback === null || callback === void 0 ? void 0 : callback.bind(this)(arguments);
+    };
+};

package/dist/client/{helpers → utils}/host.js

@@ -1,2 +1,2 @@
-import { api } from '../utils/index.js';
+import { api } from './api.js';
 export const host = (target) => api(target).host();

package/dist/client/utils/index.d.ts

@@ -1,12 +1,12 @@
 export * from './api.js';
-export * from './decorator.js';
-export * from './define-element.js';
-export * from './define-method.js';
+export * from './append-to-method.js';
 export * from './define-property.js';
+export * from './event.js';
+export * from './host.js';
 export * from './is-event.js';
 export * from './is-server.js';
+export * from './on-ready.js';
 export * from './parse-value.js';
-export * from './proxy.js';
 export * from './sync.js';
 export * from './to-boolean.js';
 export * from './to-event.js';

package/dist/client/utils/index.js

@@ -1,12 +1,12 @@
 export * from './api.js';
-export * from './decorator.js';
-export * from './define-element.js';
-export * from './define-method.js';
+export * from './append-to-method.js';
 export * from './define-property.js';
+export * from './event.js';
+export * from './host.js';
 export * from './is-event.js';
 export * from './is-server.js';
+export * from './on-ready.js';
 export * from './parse-value.js';
-export * from './proxy.js';
 export * from './sync.js';
 export * from './to-boolean.js';
 export * from './to-event.js';

package/dist/client/utils/on-ready.d.ts

@@ -0,0 +1 @@
+export declare function onReady(target: any, callback: (this: any) => void): void;

package/dist/client/utils/on-ready.js

@@ -0,0 +1,4 @@
+export function onReady(target, callback) {
+    var _a;
+    ((_a = target['setup']) !== null && _a !== void 0 ? _a : (target['setup'] = [])).push(callback);
+}

package/dist/client/utils/proxy.js

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { html, render } from 'uhtml';
 import * as CONSTANTS from '../../configs/constants.js';
 import { isServer } from './is-server.js';
@@ -9,6 +18,60 @@ export const proxy = (Class) => {
         };
     let host, instance;
     const members = Class[CONSTANTS.TOKEN_STATIC_MEMBERS] || {};
+    // TODO
+    let states;
+    let isPending = false;
+    let updatePromise;
+    const request = (state) => {
+        if (!true /*hasChange*/)
+            return;
+        states = Object.assign(Object.assign({}, (states || {})), state);
+        if (isPending)
+            return;
+        updatePromise = enqueue();
+    };
+    const enqueue = () => __awaiter(void 0, void 0, void 0, function* () {
+        isPending = true;
+        try {
+            yield updatePromise;
+        }
+        catch (error) {
+            Promise.reject(error);
+        }
+        const result = perform();
+        if (result != null)
+            yield result;
+        return !isPending;
+    });
+    const perform = () => {
+        if (!isPending)
+            return;
+        try {
+            if (true /*shouldUpdate*/) {
+                // TODO
+                // call(CONSTANTS.TOKEN_LIFECYCLE_UPDATE, [allStates]);
+                render(host.shadowRoot, () => {
+                    const markup = call(CONSTANTS.TOKEN_METHOD_RENDER);
+                    const styles = Class[CONSTANTS.TOKEN_STATIC_STYLES];
+                    if (!styles && !markup)
+                        return html ``;
+                    if (!styles)
+                        return markup;
+                    if (!markup)
+                        return html `<style>${styles}</style>`;
+                    return html `<style>${styles}</style>${markup}`;
+                });
+                // TODO
+                call(CONSTANTS.TOKEN_LIFECYCLE_UPDATED, [states]);
+                states = undefined;
+            }
+            isPending = false;
+        }
+        catch (error) {
+            isPending = false;
+            throw error;
+        }
+    };
     const call = (key, args) => {
         var _a;
         return (_a = instance[key]) === null || _a === void 0 ? void 0 : _a.apply(instance, args);
@@ -19,30 +82,6 @@ export const proxy = (Class) => {
     const set = (key, value) => {
         instance[CONSTANTS.TOKEN_API][key] = value;
     };
-    // TODO
-    let timeout, allStates;
-    const request = (states) => {
-        clearTimeout(timeout);
-        allStates = Object.assign(Object.assign({}, (allStates || {})), states);
-        timeout = setTimeout(() => {
-            // TODO
-            // call(CONSTANTS.TOKEN_LIFECYCLE_UPDATE, [allStates]);
-            render(host.shadowRoot, () => {
-                const markup = call(CONSTANTS.TOKEN_METHOD_RENDER);
-                const styles = Class[CONSTANTS.TOKEN_STATIC_STYLES];
-                if (!styles && !markup)
-                    return html ``;
-                if (!styles)
-                    return markup;
-                if (!markup)
-                    return html `<style>${styles}</style>`;
-                return html `<style>${styles}</style>${markup}`;
-            });
-            // TODO
-            call(CONSTANTS.TOKEN_LIFECYCLE_UPDATED, [allStates]);
-            allStates = undefined;
-        });
-    };
     return class extends HTMLElement {
         constructor() {
             var _a, _b;
@@ -74,7 +113,8 @@ export const proxy = (Class) => {
         connectedCallback() {
             call(CONSTANTS.TOKEN_LIFECYCLE_CONNECTED);
             request();
-            call(CONSTANTS.TOKEN_LIFECYCLE_LOADED);
+            // TODO
+            setTimeout(() => call(CONSTANTS.TOKEN_LIFECYCLE_LOADED));
             set(CONSTANTS.TOKEN_API_READY, true);
         }
         disconnectedCallback() {

package/dist/client/utils/sync.js

@@ -1,3 +1,4 @@
+import { on, off } from './event.js';
 import { isEvent } from './is-event.js';
 import { toEvent } from './to-event.js';
 import { updateAttribute } from './update-attribute.js';
@@ -16,12 +17,12 @@ export const sync = (node) => {
         if (prev.style || next.style)
             node.setAttribute('style', next.style || '');
         for (const key in prev)
-            isEvent(key) && node.removeEventListener(toEvent(key), prev[key]);
+            isEvent(key) && off(node, toEvent(key), prev[key]);
         for (const key in next) {
             if (['class', 'style'].includes(key))
                 continue;
             if (isEvent(key))
-                node.addEventListener(toEvent(key), next[key]);
+                on(node, toEvent(key), next[key]);
             else
                 updateAttribute(node, key, next[key]);
         }

package/dist/compiler/compiler.js

@@ -12,7 +12,7 @@ const log = (namespace, message) => {
     logUpdate(`${new Date().toLocaleTimeString()} [@htmlplus/element]${namespace ? `[${namespace}]` : ''} ${message}`);
 };
 export default (...plugins) => {
-    const global = {
+    let global = {
         contexts: {}
     };
     const start = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -20,7 +20,7 @@ export default (...plugins) => {
         for (const plugin of plugins) {
             if (!plugin.start)
                 continue;
-            yield plugin.start(global);
+            global = (yield plugin.start(global)) || global;
             log(plugin.name, 'Started successfully.');
         }
     });
@@ -43,7 +43,7 @@ export default (...plugins) => {
         for (const plugin of plugins) {
             if (!plugin.finish)
                 continue;
-            yield plugin.finish(global);
+            global = (yield plugin.finish(global)) || global;
             log(plugin.name, 'Finished successfully.');
         }
         log(undefined, 'Finished.');

package/dist/compiler/index.d.ts

@@ -1,3 +1,2 @@
-import compiler from './compiler.js';
+export { default as default } from './compiler.js';
 export * from './plugins/index.js';
-export default compiler;

package/dist/compiler/index.js

@@ -1,3 +1,2 @@
-import compiler from './compiler.js';
+export { default as default } from './compiler.js';
 export * from './plugins/index.js';
-export default compiler;

package/dist/compiler/plugins/attach.js

@@ -1,5 +1,4 @@
 import t from '@babel/types';
-import { pascalCase } from 'change-case';
 import * as CONSTANTS from '../../configs/constants.js';
 import { visitor } from '../utils/index.js';
 const defaults = {
@@ -48,37 +47,35 @@ export const attach = (options) => {
             ]), undefined, undefined, undefined, true));
         }
         if (options.typings) {
-            const className = pascalCase(context.componentTag.split('-').slice(1).join('-'));
-            const elementName = `HTML${className}Element`;
             visitor(context.fileAST, {
                 Program(path) {
                     path.node.body.push(Object.assign(t.tsModuleDeclaration(t.identifier('global'), t.tsModuleBlock([
-                        t.tsInterfaceDeclaration(t.identifier(elementName), null, [], t.tsInterfaceBody([
+                        t.tsInterfaceDeclaration(t.identifier(context.componentInterfaceName), null, [], t.tsInterfaceBody([
                             ...context.classProperties.map((property) => Object.assign(t.tSPropertySignature(property.key, property.typeAnnotation), {
                                 optional: property.optional,
                                 leadingComments: property.leadingComments
                             }))
                         ])),
                         t.variableDeclaration('var', [
-                            t.variableDeclarator(Object.assign(t.identifier(elementName), {
+                            t.variableDeclarator(Object.assign(t.identifier(context.componentInterfaceName), {
                                 typeAnnotation: t.tSTypeAnnotation(t.tSTypeLiteral([
-                                    t.tSPropertySignature(t.identifier('prototype'), t.tsTypeAnnotation(t.tSTypeReference(t.identifier(elementName)))),
-                                    t.tSConstructSignatureDeclaration(null, [], t.tSTypeAnnotation(t.tSTypeReference(t.identifier(elementName))))
+                                    t.tSPropertySignature(t.identifier('prototype'), t.tsTypeAnnotation(t.tSTypeReference(t.identifier(context.componentInterfaceName)))),
+                                    t.tSConstructSignatureDeclaration(null, [], t.tSTypeAnnotation(t.tSTypeReference(t.identifier(context.componentInterfaceName))))
                                 ]))
                             }))
                         ]),
-                        t.tsInterfaceDeclaration(t.identifier(className), null, [], t.tsInterfaceBody([
+                        t.tsInterfaceDeclaration(t.identifier(context.componentClassName), null, [], t.tsInterfaceBody([
                             ...context.classProperties.map((property) => Object.assign(t.tSPropertySignature(property.key, property.typeAnnotation), {
                                 optional: property.optional,
                                 leadingComments: property.leadingComments
                             }))
                         ])),
                         t.tsInterfaceDeclaration(t.identifier('HTMLElementTagNameMap'), null, [], t.tsInterfaceBody([
-                            t.tSPropertySignature(t.stringLiteral(context.componentTag), t.tSTypeAnnotation(t.tSIntersectionType([t.tSTypeReference(t.identifier(className))])))
+                            t.tSPropertySignature(t.stringLiteral(context.componentTag), t.tSTypeAnnotation(t.tSIntersectionType([t.tSTypeReference(t.identifier(context.componentClassName))])))
                         ])),
                         t.exportNamedDeclaration(t.tSModuleDeclaration(t.identifier('JSX'), t.tsModuleBlock([
                             t.tsInterfaceDeclaration(t.identifier('IntrinsicElements'), undefined, undefined, t.tsInterfaceBody([
-                                t.tsPropertySignature(t.stringLiteral(context.componentTag), t.tsTypeAnnotation(t.tsTypeReference(t.identifier(className))))
+                                t.tsPropertySignature(t.stringLiteral(context.componentTag), t.tsTypeAnnotation(t.tsTypeReference(t.identifier(context.componentClassName))))
                             ]))
                         ])))
                     ])), {

package/dist/compiler/plugins/docs.js

@@ -1,5 +1,6 @@
 import { capitalCase, paramCase } from 'change-case';
 import fs from 'fs';
+// import glob from 'glob';
 import path from 'path';
 import { getInitializer, getTags, getType, printType } from '../utils/index.js';
 export const docs = (options) => {

package/dist/compiler/plugins/extract.js

@@ -1,5 +1,5 @@
 import * as t from '@babel/types';
-import { paramCase } from 'change-case';
+import { pascalCase, paramCase } from 'change-case';
 import fs from 'fs';
 import path from 'path';
 import * as CONSTANTS from '../../configs/constants.js';
@@ -43,7 +43,19 @@ export const extract = (options) => {
         context.fileExtension = path.extname(context.filePath);
         context.fileName = path.basename(context.filePath, context.fileExtension);
         context.className = (_b = (_a = context.class) === null || _a === void 0 ? void 0 : _a.id) === null || _b === void 0 ? void 0 : _b.name;
-        context.componentKey = paramCase(context.className);
+        // TODO
+        // context.componentKey = paramCase(context.className);
+        context.componentClassName = pascalCase(context.componentTag.split('-').slice(1).join('-'));
+        context.componentInterfaceName = `HTML${context.componentClassName}Element`;
+        // TODO
+        // const componentClassName           = "DialogBody";              [OK]
+        // const componentInterfaceName       = "HTMLDialogBodyElement";   [OK]
+        // const componentTag                 = "plus-dialog-body";        [OK]
+        // const componentClassNameInCategory = "Body";                    [RAW]
+        // const componentKey                 = "dialog-body-1";           [RAW]
+        // const fileName                     = "dialogBodyNew";           [OK]
+        // const className                    = "DialogBody1";             [OK]
+        // const category                     = "Dialog";                  [RAW]
         (() => {
             const stylePath = path.join(context.directoryPath, `${context.fileName}.scss`);
             if (!fs.existsSync(stylePath))

package/dist/compiler/plugins/index.d.ts

@@ -1,3 +1,4 @@
+export * from './react.proxy/index.js';
 export * from './attach.js';
 export * from './docs.js';
 export * from './extract.js';

package/dist/compiler/plugins/index.js

@@ -1,3 +1,4 @@
+export * from './react.proxy/index.js';
 export * from './attach.js';
 export * from './docs.js';
 export * from './extract.js';

package/dist/compiler/plugins/react.proxy/index.d.ts

@@ -0,0 +1 @@
+export * from './react.proxy.js';

package/dist/compiler/plugins/react.proxy/index.js

@@ -0,0 +1 @@
+export * from './react.proxy.js';

package/dist/compiler/plugins/react.proxy/react.proxy.d.ts

@@ -0,0 +1,9 @@
+export interface ReactProxyOptions {
+    dist: string;
+    corePackageName: string;
+    categorize?: boolean;
+}
+export declare const reactProxy: (options: ReactProxyOptions) => {
+    name: string;
+    finish: (global: any) => Promise<void>;
+};

package/dist/compiler/plugins/react.proxy/react.proxy.js

@@ -0,0 +1,60 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { __dirname, isDirectoryEmpty, renderTemplate } from '../../utils/index.js';
+export const reactProxy = (options) => {
+    const name = 'react-proxy';
+    const finish = (global) => __awaiter(void 0, void 0, void 0, function* () {
+        const config = { cwd: __dirname(import.meta.url) };
+        const component = 'templates/src/components/*fileName*';
+        global = Object.assign({}, global, { options });
+        const skip = [];
+        const getKey = (component) => component.componentClassName;
+        global.groups = Object.values(global.contexts)
+            .sort((a, b) => getKey(b).length - getKey(a).length)
+            .map((component, index, components) => ({
+            key: getKey(component),
+            components: components.filter((current) => getKey(current).startsWith(getKey(component)))
+        }))
+            .sort((a, b) => b.components.length - a.components.length)
+            .filter((group) => {
+            if (skip.includes(group.key))
+                return;
+            group.components.forEach((component) => skip.push(getKey(component)));
+            return true;
+        })
+            .map((group) => {
+            const root = group.components.find((component) => getKey(component) == group.key);
+            const all = group.components
+                .map((component) => (Object.assign(Object.assign({}, component), { componentClassNameInCategory: getKey(component).replace(group.key, '') })))
+                .reverse();
+            const filterd = all.filter((component) => getKey(component) != group.key);
+            return {
+                single: !filterd.length,
+                root,
+                all,
+                filterd
+            };
+        })
+            .sort((a, b) => (getKey(a.root) < getKey(b.root) ? -1 : 0));
+        if (yield isDirectoryEmpty(options.dist)) {
+            renderTemplate(['templates/**', `!${component}`], options.dist, config)(global);
+        }
+        else {
+            renderTemplate(['templates/src/proxy*', 'templates/src/components/index*'], options.dist, config)(global);
+        }
+        for (const group of global.groups) {
+            renderTemplate(component, options.dist, config)(Object.assign({ options, fileName: group.root.fileName }, group));
+        }
+    });
+    return {
+        name,
+        finish
+    };
+};

package/dist/compiler/plugins/react.proxy/templates/README.md.hbs

@@ -0,0 +1 @@
+# React output target for your custom element.

package/dist/compiler/plugins/react.proxy/templates/_.gitignore.hbs

@@ -0,0 +1,2 @@
+dist
+node_modules

package/dist/compiler/plugins/react.proxy/templates/package.json.hbs

@@ -0,0 +1,36 @@
+{  
+  "name": "your-react-package-name",
+  "version": "0.0.0",
+  "type": "module",
+  "description": "React output target for your custom element.",
+  "exports": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "prebuild": "npm run clean",
+    "build": "rollup -c",
+    "clean": "rimraf dist"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "{{options.corePackageName}}": "latest",
+    "change-case": "^4.1.2"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^15.0.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@types/react": "^16.9.49",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.27.1",
+    "rollup-plugin-peer-deps-external": "^2.2.3",
+    "rollup-plugin-typescript2": "^0.27.2",
+    "typescript": "^4.0.2"
+  },
+  "peerDependencies": {
+    "react": "^16.0.0 || ^17.0.0",
+    "react-dom": "^16.0.0 || ^17.0.0"
+  }
+}