Convert to TypeScript / Add storybook

.gitignore

@@ -4,3 +4,6 @@ debug.log
 yarn-error.log
 .DS_Store
 .eslintcache
+dist/
+storybook-static/
+demo-storybook/

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
     "eslint.validate": [ "javascript" ],
     "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true
+        "source.fixAll.eslint": "explicit"
     }
 }

package.json

@@ -21,11 +21,16 @@
 		"test": "test"
 	},
 	"scripts": {
-		"lint": "eslint --cache --ext .js .",
+		"lint": "tsc && eslint --cache .",
+		"build": "tsc -p tsconfig.build.json",
 		"start": "wds",
 		"test": "wtr --coverage",
 		"test:watch": "wtr --watch",
-		"prepare": "husky install"
+		"prepare": "husky install",
+		"storybook:start": "storybook dev -p 8000",
+		"storybook:build": "storybook build",
+		"storybook:deploy": "storybook-to-ghpages",
+		"storybook:preview": "npm run storybook:build && http-server -d ./storybook-static/"
 	},
 	"release": {
 		"plugins": [
@@ -46,23 +51,45 @@
 			"@commitlint/config-conventional"
 		]
 	},
+	"files": [
+		"dist/"
+	],
+	"exports": {
+		".": "./dist/cosmoz-treenode.js",
+		"./cosmoz-treenode": "./dist/cosmoz-treenode.js",
+		"./cosmoz-treenode.js": "./dist/cosmoz-treenode.js"
+	},
 	"husky": {
 		"hooks": {
 			"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
 		}
 	},
 	"dependencies": {
-		"@neovici/cosmoz-tree": "^3.0.0",
-		"@pionjs/pion": "^2.0.0"
+		"@neovici/cosmoz-tree": "^3.6.0",
+		"@pionjs/pion": "^2.5.2"
 	},
 	"devDependencies": {
-		"@commitlint/cli": "^18.0.0",
-		"@commitlint/config-conventional": "^18.0.0",
-		"@neovici/cfg": "^1.15.2",
+		"@commitlint/cli": "^19.2.1",
+		"@commitlint/config-conventional": "^19.1.0",
+		"@neovici/cfg": "^1.50.0",
 		"@open-wc/testing": "^4.0.0",
 		"@semantic-release/changelog": "^6.0.0",
 		"@semantic-release/git": "^10.0.0",
-		"husky": "^8.0.0",
-		"semantic-release": "^22.0.0"
+		"@storybook/addon-essentials": "^7.0.0",
+		"@storybook/addon-links": "^7.0.0",
+		"@storybook/builder-vite": "7.6.17",
+		"@storybook/storybook-deployer": "^2.8.5",
+		"@storybook/web-components": "7.6.17",
+		"@types/mocha": "^10.0.6",
+		"@web/storybook-builder": "^0.1.9",
+		"@web/storybook-framework-web-components": "^0.1.1",
+		"esbuild": "^0.20.2",
+		"http-server": "^14.1.1",
+		"husky": "^9.0.11",
+		"rollup-plugin-esbuild": "^6.1.1",
+		"rollup-plugin-terser": "^7.0.2",
+		"semantic-release": "^23.0.6",
+		"storybook": "^7.6.17",
+		"typescript": "^5.0.0"
 	}
 }

cosmoz-treenode.js → src/cosmoz-treenode.ts

@@ -1,16 +1,47 @@
 import { component, html } from '@pionjs/pion';
+import { Tree, Node } from '@neovici/cosmoz-tree/cosmoz-tree';
 
-export const computePathToRender = (path, hideFromRoot, showMaxNodes) => {
+export type ComputePathTextType = {
+	ownerTree: Tree;
+	ellipsis: string;
+	pathToRender: string | undefined;
+	path: string;
+	valueProperty: string;
+	pathSeparator: string | undefined;
+};
+
+export type RenderType = {
+	title: string;
+	text: string;
+};
+
+export type TreenodeType = {
+	valueProperty: string;
+	pathSeparator: string;
+	hideFromRoot: number;
+	showMaxNodes: number;
+	keyProperty: string;
+	keyValue: string;
+	ownerTree: Tree;
+	ellipsis: string;
+	fallback: string;
+};
+
+export const computePathToRender = (
+		path?: string,
+		hideFromRoot?: number,
+		showMaxNodes?: number,
+	) => {
 		if (!path) {
 			return;
 		}
 		let pathToRender = path;
 		if (hideFromRoot > 0 && path.length > hideFromRoot) {
 			pathToRender = path.slice(hideFromRoot);
 		}
 
 		if (showMaxNodes > 0 && pathToRender.length > showMaxNodes) {
 			pathToRender = path.slice(-showMaxNodes);
 		}
 		return pathToRender;
 	},
@@ -20,7 +51,7 @@
 	 * @param {Array} inputPath Array of path parts
 	 * @returns {Array} Array with defined parts
 	 */
-	getKnownPath = (inputPath) => {
+	getKnownPath = (inputPath: (Node | undefined)[] | null) => {
 		let path = inputPath;
 		if (!Array.isArray(path) || path.length === 0) {
 			return path;
@@ -36,7 +67,7 @@
 		}
 		return path;
 	},
-	computePath = (ownerTree, keyProperty, keyValue) => {
+	computePath = (ownerTree: Tree, keyProperty: string, keyValue: string) => {
 		// HACK(pasleq): Cosmoz.Tree API needs to be fixed to avoid such code in components
 		let path = null;
 
@@ -62,13 +93,13 @@
 		path,
 		valueProperty,
 		pathSeparator,
-	}) => {
+	}: ComputePathTextType) => {
 		if (!pathToRender) {
 			return '';
 		}
 
 		const stringParts = pathToRender.map((node) =>
-			ownerTree.getProperty(node, valueProperty)
+			ownerTree.getProperty(node, valueProperty),
 		);
 
 		let text = stringParts.join(pathSeparator);
@@ -78,7 +109,7 @@
 		}
 		return text;
 	},
-	render = ({ title, text }) => html`
+	render = ({ title, text }: RenderType) => html`
 		<style>
 			:host {
 				display: block;
@@ -111,10 +142,10 @@
 		ownerTree,
 		ellipsis = '… / ',
 		fallback,
-	}) => {
+	}: TreenodeType) => {
 		const path = computePath(ownerTree, keyProperty, keyValue);
 		if (!path) return render({ text: fallback, title: fallback });
 		const pathToRender = computePathToRender(path, hideFromRoot, showMaxNodes),
 			opts = {
 				ownerTree,
 				ellipsis,
@@ -123,13 +154,13 @@
 				pathSeparator,
 			};
 		return render({
 			text: computePathText({
 				...opts,
 				pathToRender,
 			}),
 			title: computePathText({
 				...opts,
 				pathToRender: path,
 			}),
 		});
 	};
@@ -152,5 +183,5 @@
 			'show-max-nodes',
 			'fallback',
 		],
-	})
+	}),
 );

test/cosmoz-treenode.test.js → test/cosmoz-treenode.test.ts

@@ -1,6 +1,6 @@
 import { html, fixture, expect, elementUpdated } from '@open-wc/testing';
 import { DefaultTree } from '@neovici/cosmoz-tree/cosmoz-default-tree';
-import { computePath, computePathToRender } from '../cosmoz-treenode.js';
+import { computePath, computePathToRender } from '../src/cosmoz-treenode';
 
 const treeBaseUrl = '/node_modules/@neovici/cosmoz-tree/test/data',
 	basicTreeUrl = `${treeBaseUrl}/basicTree.json`,
@@ -12,7 +12,7 @@ const treeBaseUrl = '/node_modules/@neovici/cosmoz-tree/test/data',
 	};
 
 suite('basic', () => {
-	let basicFixture, basicTree;
+	let basicFixture, basicTree: DefaultTree;
 
 	suiteSetup(async () => {
 		basicTree = await treeFromJsonUrl(basicTreeUrl);
@@ -35,17 +35,17 @@ suite('basic', () => {
 	test('computePath', () => {
 		expect(computePath()).to.equal(undefined);
 		expect(
-			computePath(basicTree, 'id', '11111111-1111-1111-1111-111111111111')
+			computePath(basicTree, 'id', '11111111-1111-1111-1111-111111111111'),
 		).deep.equal(basicTree.getPathNodes('1'));
 		expect(
-			computePath(basicTree, 'id', '3a7654f1-e3e6-49c7-b6a8-a4fb00f31245')
+			computePath(basicTree, 'id', '3a7654f1-e3e6-49c7-b6a8-a4fb00f31245'),
 		).deep.equal(basicTree.getPathNodes('1.2.3'));
 		expect(
 			computePath(
 				new DefaultTree({}),
 				'id',
-				'11111111-1111-1111-1111-111111111111'
-			)
+				'11111111-1111-1111-1111-111111111111',
+			),
 		).to.equal(null);
 	});
 
@@ -65,7 +65,7 @@ suite('basic', () => {
 		const textContent =
 			basicFixture.shadowRoot.querySelector('span').textContent;
 		expect(textContent).to.include(
-			['Root', 'Node2', 'Node3', 'Node301'].join(' / ')
+			['Root', 'Node2', 'Node3', 'Node301'].join(' / '),
 		);
 	});
 
@@ -76,13 +76,13 @@ suite('basic', () => {
 		const textContent =
 			basicFixture.shadowRoot.querySelector('span').textContent;
 		expect(textContent).to.include(
-			['Root', 'Node2', 'Node3', 'Node301'].join(customSep)
+			['Root', 'Node2', 'Node3', 'Node301'].join(customSep),
 		);
 	});
 });
 
 suite('lookupNodeById', () => {
-	let basicFixture, basicTree;
+	let basicFixture, basicTree: DefaultTree;
 
 	suiteSetup(async () => {
 		basicTree = await treeFromJsonUrl(basicTreeUrl);
@@ -107,7 +107,7 @@ suite('lookupNodeById', () => {
 });
 
 suite('multiRoot', () => {
-	let multiRootFixture, multiRootTree;
+	let multiRootFixture, multiRootTree: DefaultTree;
 
 	suiteSetup(async () => {
 		multiRootTree = await treeFromJsonUrl(multiRootTreeUrl);
@@ -132,7 +132,7 @@ suite('multiRoot', () => {
 });
 
 suite('missingAncestor', () => {
-	let missingAncestorFixture, missingAncestorTree;
+	let missingAncestorFixture, missingAncestorTree: DefaultTree;
 
 	suiteSetup(async () => {
 		missingAncestorTree = await treeFromJsonUrl(missingAncestorTreeUrl);

tsconfig.build.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "declaration": true,
+    "noEmit": false
+  },
+  "include": [
+    "src"
+  ]
+}

tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "noEmit": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "target": "esnext",
+    "allowJs": true,
+    "types": [
+      "node",
+      "mocha"
+    ]
+  }
+}