tscpp / knuckles

Modern development toolkit for Knockout 👊

What is Knuckles?

Knuckles is a development toolkit designed to enhance the developer experience (DX) using Knockout.js. It offers a range of useful tools for analyzing and optimizing Knockout.js applications. Each tool is entirely standalone and can be used independently. See website ›

No knockout without knuckles! 👊

Features

Analyzer

The analyzer allows you to check for issues in Knockout views before production. It allows you to utilize external tools, such as TypeScript and ESLint, to check the bindings, while also providing a set of useful rules to catch common misstakes. Read more ›

TypeScript

As a plugin to the analyzer, it can type-check the bindings in your Knockout views and provides a generated snapshot which other tools can use to provide type-aware analysis. Read more ›

ESLint

As a plugin to the analyzer, it can lint bindings using existing rules for JavaScript and TypeScript (with type-aware rules). Read more ›

SSR

Server-side rendering (SSR) allows you to render data into the view before handing it to the client to render. This can be used to greatly optimize runtime performance and SEO. Read more ›

Editor Support

Implementaion currently only exists for VSCode.

The language server provides language features to Knockout views, such as "go to definition", highlighting, diagnostics (from analyzer).

License

All source code is licensed under the MIT license.

Versioning

Verions adhear to Semantic Versioning (SemVer) v2.0.0.

knuckles's Issues

Optimization

• Shared context deconstruction for descendants.
• Optional context transformation.
• Preserve context when identical child binding context.

Parser crashes on invalid bindings

The current binding parser currently uses acorn and will fail if the binding doesn't have valid object syntax.

The below example will make the parser crash because it expected the property "text" to have a value.

<div data-bind="text: "></div>

This will cause the analyzer and other language features not working while writing code, and the analyzer not to spit out any other errors than parsing errors if a single binding is broken.

Bindings dependant on the value from other bindings

The options binding can specify any type as long as there is an optionsText binding defined. And, optionsText can only be defined if options is defined and is dependant on the type passed to the options binding.

Let's say that members has the type Member[]. optionsText should be able to infer type type Member from the options binding.

<div data-bind="
  options: members,
  optionsText: (member) => member.name
"></div>

Fix cyclic dependency between analyzer and config package

TypeScript language service plugin

Support legacy syntax by converting the old syntax to new syntax before parsing.

Interfaces under 'ko' namespace are untyped

Example: Typescript reports ko.Observable as any, since the knockout module is not found (imported from index.d.ts).

It might be good idea to report the project's errors to be able to identify similar errors in surrounding files.

Allow to configure to render by default for a certain pattern of files.

Show accepted value type when hovering binding names

value binding should allow any type in select elements

Remember narrowed types in conditions

kolint/kolint#339

ESLint plugin for analyzer

Allow specifying the viewmodel type inline

Missing $data as first argument to event bindings

All events should get $data in 'this' and the first argument.

In click: function(tag) { $root.removeSearchTag(tag); }, tag is currently interpreted as an Event.

Allow to configure strictness for a certain pattern of files.

New syntax for linking view models with support for named imports.

Rule for usage of undefined binding handlers.

Severity specified in config is not repected by the language server

The severity logic should be moved into the analyzer.

Cancellation for analyzation in language server (optimization)

Add support for binding handler 'after' logic

https://github.com/knockout/knockout/blob/45e86bf0347cf742ca359bab051ea82fdfae7a5d/src/binding/defaultBindings/checked.js#L4

Missing range for almost every issue (uncertain why)

Roadmap

Continues from kolint/next#1.

Stage 3

Analyzer

• Catch parsing errors in analyzer and report them as issues.
• #3
• #19
• #27
• #31

SSR

• Allow to explicitly disable rendering with no-ssr directive.

TypeScript

• #5
• Asserting the type of $parent/$parents kolint/next#335
• #9

Parser

• #4
• #17

Documentation

• Update syntax for analyzer
• #14
• Docs is broken after added playground
• Fix releases
• Update docs for new syntax
• README banner text should be converted to path
• #44 (coveralls)
• #43

Stage 4

• Implement formatter

Analyzer

• #65
• #66
  • Rule for untyped $context with quick fix when automatic resolution is configured.
• #67
  • Shared context deconstruction for descendants.
  • Optional context transformation.
  • Preserve context when identical child binding context.

TypeScript

• Allow user to override default interop algorithm for view models.
• #68

Future...

SSR

• #70
• Improve SSR CLI

Analyzer

• #71

TypeScript

• #69

Language Features

• Go to Definition
• Hover
• Completion
• Diagnostics
• Go to Declaration
• Go to Type Definition
• Go to Implementation
• Find References
• Document Highlight
• Document Symbols
• Semantic Tokens
• Code Action
• Rename
• Document Link
• Inline Value
• Inlay Hint
• Signature Help
• Formatting
• Linked Editing Range

Hint end comments has same syntax as knockout

Allow to configure strictness for a certain pattern of files.

Improve ssr cli

$data is deeply unwrapped

In a new binding context, $data is unwrapped with the same semantics as the toJs function instead of the unwrap.

Allow rules to implemment quick fix for issues

Refresh snapshot when tsconfig or config is modified

Custom mapping preserving range position.

The problem with using source maps is that it will always map to the beginning of the mapping. I need the mapping to preserve the local position within the range so the language server can correctly translate the position in the generated file.

Catch when $data is any/unknown and supress descendant errors

Allow user to configure a resolution algorithm to find the linked view model automatically.

Autocompletion doesn't work with trailing dot

<div data-bind="text: object."></div>
//                          ^ Autocompletion won't work here

Analyzer is silent when resolved tsconfig does not include the generated source file

Missing context paramater for some bindings

Fallback version of types to use when typescript package is not installed locally

Report tricky use case of calling a method on another viewmodel

Consider this code:

<div data-bind="click: $parent.closeModal">...</div>

When the function closeModal is called on $parent, it's going to have a wrong and unexpected this.

The correct code in this case is:

<div data-bind="click: $parent.closeModal.bind($parent)">...</div>

I think it's also something KOLint could report

kolint/kolint#341

tsconfig is not resolved in language service

knuckles/packages/language-server/src/program.ts

Lines 193 to 194 in 4d055f2

	// TODO: resolve tsconfig
	tsconfig: undefined,

Allow setting binding context without touching $root

Related:

• kolint/kolint#334
• kolint/kolint#335

Rule for unnecessary observable unwrap

Rule for unnecessarly unwrapping an observable when passing it to a binding handler who accepts an observable

Allow usage of undefined binding handlers in loose mode.

Disable/enable comments

TypeScript still can't resolve external modules

I'm guessing this is because it is unable to resolve the same tsconfig as tsc.

Assertion error when internal interfaces are not found

Changes to 'strict' and 'loose' mode

• Strict
  • Disallow anything that is not a boolean to conditional binding handlers.
  • Only allow string for "value" binding handler.
  • Strictly type hasFocus, checked, checkedValue, options, selectedOptions, template.
• Loose
  • Context data and parents typed any by default.
  • Allow usage of undefined binding handlers via index access with loose default binding handler.

Type only with hints

Allow to define binding transforms (binding handlers) globally.

Negated conditions are not wrapped in parenthesis

Playground

Mapping doesn't work for the expression in if/ifnot bindings

Hover is not shown for if/ifnot bindings