wip: generate type declarations

Closes #65

package.json

@@ -4,20 +4,22 @@
   "description": "Library for creating bpmn-io properties panels.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
+  "types": "dist/types/index.d.ts",
   "files": [
     "dist",
     "assets",
     "preact"
   ],
   "scripts": {
     "all": "run-s lint build test",
-    "build": "del-cli preact dist && rollup -c",
+    "build": "del-cli preact dist && rollup -c && npm run generate-types",
     "build:watch": "rollup -c --watch",
     "lint": "eslint .",
     "dev": "npm test -- --auto-watch --no-single-run",
     "test": "karma start karma.config.js",
     "prepublishOnly": "run-s build",
-    "prepare": "run-s build"
+    "prepare": "run-s build",
+    "generate-types": "tsc"
   },
   "repository": {
     "type": "git",
@@ -82,6 +84,7 @@
     "sinon": "^11.1.1",
     "sinon-chai": "^3.7.0",
     "sirv-cli": "^1.0.12",
+    "typescript": "^4.5.4",
     "webpack": "^5.38.1"
   }
 }

src/PropertiesPanel.js

@@ -27,64 +27,17 @@ const DEFAULT_LAYOUT = {
 const DEFAULT_DESCRIPTION = {};
 
 
-/**
- * @typedef { {
- *    component: import('preact').ComponentChild,
- *    id: String,
- *    isEdited?: Function
- * } } EntryDefinition
- *
- * @typedef { {
- *    autoFocusEntry: String,
- *    autoOpen?: Boolean,
- *    entries: Array<EntryDefinition>,
- *    id: String,
- *    label: String,
- *    remove: (event: MouseEvent) => void
- * } } ListItemDefinition
- *
- * @typedef { {
- *    add: (event: MouseEvent) => void,
- *    component: import('preact').Component,
- *    element: Object,
- *    id: String,
- *    items: Array<ListItemDefinition>,
- *    label: String,
- *    shouldSort?: Boolean,
- *    shouldOpen?: Boolean
- * } } ListGroupDefinition
- *
- * @typedef { {
- *    component?: import('preact').Component,
- *    entries: Array<EntryDefinition>,
- *    id: String,
- *    label: String
- * } } GroupDefinition
- *
- *  @typedef { {
- *    [id: String]: GetDescriptionFunction
- * } } DescriptionConfig
- *
- * @callback { {
- * @param {string} id
- * @param {djs.model.base} element
- * @returns {string}
- * } } GetDescriptionFunction
- *
- */
-
-
 /**
  * A basic properties panel component. Describes *how* content will be rendered, accepts
  * data from implementor to describe *what* will be rendered.
  *
  * @param {Object} props
  * @param {Object} props.element
  * @param {import('./components/Header').HeaderProvider} props.headerProvider
- * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
+ * @param {import('./types').GroupDefinition[]} props.groups
  * @param {Object} [props.layoutConfig]
  * @param {Function} [props.layoutChanged]
- * @param {DescriptionConfig} [props.descriptionConfig]
+ * @param {import('./types').DescriptionConfig} [props.descriptionConfig]
  * @param {Function} [props.descriptionLoaded]
  */
 export default function PropertiesPanel(props) {

src/components/DropdownButton.js

@@ -11,6 +11,7 @@ import classnames from 'classnames';
  * @param {object} props
  * @param {string} [props.class]
  * @param {import('preact').Component[]} [props.menuItems]
+ * @param {import('preact').ComponentChildren} [props.children]
  * @returns
  */
 export function DropdownButton(props) {
@@ -94,7 +95,7 @@ function useGlobalClick(ignoredElements, callback) {
      * @param {MouseEvent} event
      */
     function listener(event) {
-      if (ignoredElements.some(element => element && element.contains(event.target))) {
+      if (ignoredElements.some(element => element && element.contains(/** @type {Node} */ (event.target)))) {
         return;
       }
 

src/components/Group.js

@@ -20,7 +20,7 @@ import {
 import { ArrowIcon } from './icons';
 
 /**
- * @param {import('../PropertiesPanel').GroupDefinition} props
+ * @param {import('../types').EntriesGroupDefinition} props
  */
 export default function Group(props) {
   const {
@@ -39,18 +39,20 @@ export default function Group(props) {
 
   // set edited state depending on all entries
   useEffect(() => {
-    const hasOneEditedEntry = entries.find(entry => {
+    const hasOneEditedEntry = !!entries.find(entry => {
       const {
         id,
         isEdited
       } = entry;
 
+      /** @type {HTMLElement} */
       const entryNode = domQuery(`[data-entry-id="${id}"]`);
 
       if (!isFunction(isEdited) || !entryNode) {
         return false;
       }
 
+      /** @type {HTMLElement} */
       const inputNode = domQuery('.bio-properties-panel-input', entryNode);
 
       return isEdited(inputNode);

src/components/ListGroup.js

@@ -25,7 +25,7 @@ import {
 const noop = () => {};
 
 /**
- * @param {import('../PropertiesPanel').ListGroupDefinition} props
+ * @param {import('../types').ListGroupDefinition} props
  */
 export default function ListGroup(props) {
   const {

src/components/icons/index.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 export { default as ArrowIcon } from './Arrow.svg';
 export { default as CreateIcon } from './Create.svg';
 export { default as DeleteIcon } from './Delete.svg';

src/types.d.ts

@@ -0,0 +1,40 @@
+import { Component, ComponentType } from '../preact';
+
+export type EntryDefinition = {
+  component: Component,
+  id: string,
+  isEdited?: (node: HTMLElement) => boolean
+};
+
+export type ListItemDefinition = {
+  autoFocusEntry: string,
+  autoOpen?: boolean,
+  entries: EntryDefinition[],
+  id: string,
+  label: string,
+  remove: (event: MouseEvent) => void
+}
+
+export type ListGroupDefinition = {
+  add: (event: MouseEvent) => void,
+  component: ComponentType,
+  element: any,
+  id: string,
+  items: Array<ListItemDefinition>,
+  label: string,
+  shouldSort?: boolean,
+  shouldOpen?: boolean
+}
+
+export type EntriesGroupDefinition = {
+  component?: ComponentType,
+  entries: EntryDefinition[],
+  id: string,
+  label: string
+};
+
+export type GroupDefinition = ListGroupDefinition | EntriesGroupDefinition;
+
+export type DescriptionConfig = { [id: string]: GetDescriptionFunction };
+
+export type GetDescriptionFunction = (id: string, element: any) => string;

tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "lib": [
+      "es2019",
+      "dom"
+    ],
+    "target": "es2019",
+    "allowJs": true,
+    "checkJs": true,
+    "rootDir": ".",
+    "strict": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "outDir": "./dist/types",
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "removeComments": false
+  },
+  "include": [
+    "src/index.js"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}