wip: generate type declarations

package.json

@@ -4,20 +4,24 @@
   "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 .",
+    "lint": "run-p lint:*",
+    "lint:js": "eslint .",
+    "lint:types": "tsc --noEmit --emitDeclarationOnly false",
     "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 && cp src/*.d.ts dist/types"
   },
   "repository": {
     "type": "git",
@@ -82,6 +86,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').EntriesGroupProps} 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').ListGroupProps} props
  */
 export default function ListGroup(props) {
   const {

src/components/ListItem.js

@@ -11,7 +11,7 @@ import { isFunction } from 'min-dash';
 import CollapsibleEntry from './entries/Collapsible';
 
 /**
- * @param {import('../PropertiesPanel').ListItemDefinition} props
+ * @param {import('../types').ListItemDefinition} props
  */
 export default function ListItem(props) {
   const {
@@ -22,8 +22,11 @@ export default function ListItem(props) {
   // focus specified entry on auto open
   useEffect(() => {
     if (autoOpen && autoFocusEntry) {
+
+      /** @type {HTMLElement} */
       const entry = domQuery(`[data-entry-id="${autoFocusEntry}"]`);
 
+      /** @type {HTMLInputElement} */
       const focusableInput = domQuery('.bio-properties-panel-input', entry);
 
       if (focusableInput) {

src/components/entries/List.js

@@ -31,7 +31,7 @@ import {
  * @param {string} props.id
  * @param {*} props.element
  * @param {Function} props.onAdd
- * @param {(item: Item, index: number, isNew: boolean) => JSX.Element} props.renderItem
+ * @param {(item: Item, index: number, isNew: boolean) => import('preact').JSX.Element} props.renderItem
  * @param {string} [props.label='<empty>']
  * @param {Function} [props.onRemove]
  * @param {Item[]} [props.items]
@@ -176,6 +176,7 @@ function ItemsList(props) {
     if (newItem && autoFocusEntry) {
 
       // (0) select the parent entry (containing all list items)
+      /** @type {HTMLElement} */
       const entry = domQuery(`[data-entry-id="${id}"]`);
 
       // (1) select the first input or a custom element to be focussed

src/components/entries/NumberField.js

@@ -39,7 +39,7 @@ function NumberField(props) {
         id={ prefixId(id) }
         type="number"
         name={ id }
-        spellCheck="false"
+        spellcheck={ false }
         autoComplete="off"
         disabled={ disabled }
         class="bio-properties-panel-input"

src/components/entries/Simple.js

@@ -9,8 +9,8 @@ import {
  * @param {Object} props.element
  * @param {Function} props.getValue
  * @param {String} props.id
- * @param {Function} [props.onBlur]
- * @param {Function} [props.onFocus]
+ * @param {(event: FocusEvent) => void} [props.onBlur]
+ * @param {(event: FocusEvent) => void} [props.onFocus]
  * @param {Function} props.setValue
  */
 export default function Simple(props) {
@@ -37,7 +37,7 @@ export default function Simple(props) {
         id={ prefixId(id) }
         type="text"
         name={ id }
-        spellCheck="false"
+        spellcheck={ false }
         autoComplete="off"
         disabled={ disabled }
         class="bio-properties-panel-input"

src/components/entries/TextArea.js

@@ -29,7 +29,7 @@ function TextArea(props) {
       <textarea
         id={ prefixId(id) }
         name={ id }
-        spellCheck="false"
+        spellcheck={ false }
         class={ classnames(
           'bio-properties-panel-input',
           monospace ? 'bio-properties-panel-input-monospace' : '')

src/components/entries/TextField.js

@@ -35,7 +35,7 @@ function Textfield(props) {
         id={ prefixId(id) }
         type="text"
         name={ id }
-        spellCheck="false"
+        spellcheck={ false }
         autoComplete="off"
         disabled={ disabled }
         class="bio-properties-panel-input"

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/context/DescriptionContext.js

@@ -2,9 +2,10 @@ import {
   createContext
 } from 'preact';
 
+/** @type {import('../types').DescriptionContext} */
 const DescriptionContext = createContext({
   description: {},
-  getDescriptionForId: () => {}
+  getDescriptionForId: () => ''
 });
 
 export default DescriptionContext;

src/context/LayoutContext.js

@@ -2,6 +2,7 @@ import {
   createContext
 } from 'preact';
 
+/** @type {import('../types').LayoutContext} */
 const LayoutContext = createContext({
   layout: {},
   setLayout: () => {},

src/hooks/useDescriptionContext.js

@@ -17,7 +17,7 @@ import {
  * ```
  *
  * @param {string} id
- * @param {djs.model.Base} element
+ * @param {*} element
  *
  * @returns {string}
  */

src/types.d.ts

@@ -0,0 +1,55 @@
+import { Component, ComponentType, Context } 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 ListGroupProps = {
+  add: (event: MouseEvent) => void,
+  element: any,
+  id: string,
+  items: Array<ListItemDefinition>,
+  label: string,
+  shouldSort?: boolean,
+  shouldOpen?: boolean
+}
+
+export type EntriesGroupProps = {
+  entries: EntryDefinition[],
+  id: string,
+  label: string,
+  element: any
+};
+
+export type GroupDefinition = {
+  id: string,
+  label: string,
+  component: ComponentType
+} & EntriesGroupProps & ListGroupProps;
+
+export type DescriptionConfig = { [id: string]: GetDescriptionFunction };
+
+export type GetDescriptionFunction = (id: string, element: any) => string;
+
+export type LayoutContext = Context<{
+  layout: any,
+  setLayout: (layout: any) => void,
+  setLayoutForKey: (path: (string|number)[], newValue: any) => void,
+  getLayoutForKey: (path: (string|number)[], defaultValue?: any) => any
+}>;
+
+export type DescriptionContext = Context<{
+  description: DescriptionConfig,
+  getDescriptionForId: GetDescriptionFunction
+}>;

tsconfig.json

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