Typescript) fix errors

.github/workflows/run-tsc.yml

@@ -33,4 +33,3 @@ jobs:
 
       - name: Run tsc
         run: npx tsc
-        continue-on-error: true

.gitignore

@@ -26,4 +26,6 @@ coverage/
 *-debug.log
 *-error.log
 
-.vscode
+.vscode/extensions.json
+!.vscode/launch.json
+.vscode/settings.json

.vscode/launch.json

@@ -0,0 +1,18 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "attach",
+            "name": "Attach to Karma-Chrome",
+            "sourceMaps": true, 
+           // "restart": true,         
+           // "timeout":180000,  
+            "port": 9222,            
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

CHANGELOG.md

@@ -1,6 +1,7 @@
 For TODO between alpha and release, see https://github.com/knockout/tko/issues/1
 
-## Next
+## 💪 Next
+- #202 Make TKO more type-safe @mcselle, @Auge19, @phillipc, @M-Kirchhoff, @brianmhunt 
 - #194 fix userAgent typo in IE check @phillipc
 - #196 fix `**` operator precedence @mcselle
 - #195 add docker container for headless tests, upgrade packages, README fixes @Auge19

Makefile

@@ -32,6 +32,12 @@ ci:
 lint:
 	$(NPX) standard
 
+tsc:
+	$(NPX) tsc
+
+dts:
+	$(NPX) tsc --build tsconfig.dts.json
+
 docker-build:
 	$(DOCKER) build . --tag tko
 

README.md

@@ -1,85 +1,91 @@
 
 # TKO (“Technical Knockout”)
 
-[![npm version](https://badge.fury.io/js/tko.svg)](https://badge.fury.io/js/tko)
+[![npm version](https://badge.fury.io/js/@tko%2Fbuild.reference.svg)](https://badge.fury.io/js/@tko%2Fbuild.reference)
 [![Join the chat at https://gitter.im/knockout/tko](https://badges.gitter.im/knockout/tko.svg)](https://gitter.im/knockout/tko?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
-[![Circle CI](https://circleci.com/gh/knockout/tko.svg?style=shield)](https://circleci.com/gh/knockout/tko)
-[![Coverage Status](https://coveralls.io/repos/knockout/tko/badge.svg?branch=master&service=github)](https://coveralls.io/github/knockout/tko?branch=master)
 [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
+[![Check 'Main' (build+tsc)](https://github.com/knockout/tko/actions/workflows/run-tsc.yml/badge.svg)](https://github.com/knockout/tko/actions/workflows/run-tsc.yml)
+[![Coverage Status](https://coveralls.io/repos/knockout/tko/badge.svg?branch=master&service=github)](https://coveralls.io/github/knockout/tko?branch=master)
+[![Circle CI](https://circleci.com/gh/knockout/tko.svg?style=shield)](https://circleci.com/gh/knockout/tko)
 <!-- [![Sauce Test Status](https://saucelabs.com/browser-matrix/tko.svg)](https://saucelabs.com/u/tko) -->
 
 **TKO** houses the monorepo of [Knockout](https://github.com/knockout/knockout).
+TKO, or Technical Knockout, is a JavaScript web framework for data binding and templating. It is a fork of the original Knockout.js, which was created to enhance and modernize the framework while maintaining its core principles. TKO and Knockout implement the [MVVM pattern](http://en.wikipedia.org/wiki/Model_View_ViewModel) (a modern variant of MVC) as a zero-dependency and small sized library. TKO makes it easy to create rich, desktop-like user interfaces with JavaScript/Typescript and HTML. It uses *observers* to automatically keep your UI in sync with an underlying data model, along with a powerful and extensible set of *declarative bindings* to enable productive development. 
+
+TKO aims to provide developers with a more robust, modular, and maintainable codebase in [Typescript](https://www.typescriptlang.org/), making it easier to build rich, responsive, and maintainable web applications.
+
+
 
 ## Getting Started
 
 To install use one of the usual package managers e.g.
 
 - $ `yarn add @tko/build.reference`
 - $ `npm install @tko/build.reference`
+- $ `pnpm install @tko/build.reference`
+
 
 Over CDN
 
-- Reference Build: https://cdn.jsdelivr.net/npm/@tko/[email protected]/dist/build.reference.min.js
+- Reference Build: https://cdn.jsdelivr.net/npm/@tko/build.reference/dist/build.reference.min.js
+
+For more details, see
+
+ * TKO - Documentation (https://tko.io)
+ * Knockout - Documentation (http://knockoutjs.com/documentation/introduction.html)
+ * Online examples at [http://knockoutjs.com/examples/](http://knockoutjs.com/examples/)
+ * Stackoverflow https://stackoverflow.com/questions/tagged/knockout.js
 
 ## Knockout Build
 
 The Knockout build has some backwards compatibility that is not in the reference build.  See the build differences, here: https://tko.io/3to4
 
 It's available as `@tko/build.knockout`, and over CDN:
 
-- Knockout Build https://cdn.jsdelivr.net/npm/@tko/build.knockout@4.0.0-alpha8/dist/build.knockout.min.js
+- Knockout Build https://cdn.jsdelivr.net/npm/@tko/build.knockout/dist/build.knockout.min.js
 
 ### Using the Monorepo
 
 | Command | Effect |
 | ------- | ------ |
 | $ `git clone [email protected]:knockout/tko` | Clone the repository. |
-| $ `npm install -g yarn` | Ensure yarn is globally available |
-| $ `yarn` | Install local node packages and link tko modules |
-| $ `make` | **Currently TKO use a make file** |
-| $ `yarn test` | Run all tests. See below. |
-| $ `yarn watch` | Run all tests and watch for changes. See below. |
-| $ `yarn build` | Build tko\[.module\]\[.es6\]\[.min\].js files, where `.es6` version has not been transpiled |
+| $ `npm install` | Ensure that all packages available |
+| $ `make` | **Currently TKO use a make file** / no scripts at package.json |
+| $ `make test` | Run all tests with electron. See below. |
+| $ `make test-headless` | Run all tests with chromium. See below. |
 | $ `lerna publish` | Bump versions and publish to npm registry |
 
-Checkout `package.json => scripts` for more commands that can be executed with `yarn {command}`.
+Checkout the `Makefile` for more commands that can be executed with `make {command}`.
 
-In each individual `packages/*/` directory, you can also run (presuming `rollup` and `karma` are installed globally):
+In each individual `packages/*/` directory, you can also run:
 
 | Command | Effect |
 | --- | --- |
 | $ `karma COMMAND ../../karma.conf.js [--once]`  | Test the local package, where COMMAND is e.g. `start` or `run` |
-| $ `rollup -c ../../rollup.config.js`  | Build the package into the local `dist/` |
+| $ `make test-debug` | Runs all tests in the current package in debug- and watch-mode: Attach vscode, set a breakpoint, press save and debug |
 
-#### Testing with `yarn test` and `yarn watch`
-
-### NEW
+### Testing
 
 Start tests with electron: `make test`
 
 Start tests with headless-chrome: `make test-headless`
 
-### OLD
-
-The `yarn test` and `yarn watch` commands can be used in the root directory, where it will run across all tests, or alternatively in any `packages/*/` directory to run tests
-specific to that package.
+The test setup has naturally grown and been ported from knockout.js. Some tests use Jasmine 1.3, newer ones use Mocha, Chai and Sinon. Karma is used as test runner rather as test pipeline
 
-Optional arguments to `yarn test` include:
+Other options:
 
-- `--sauce` — use Sauce Labs to test a variety of platforms; requires an account at Sauce Labs and `SAUCE_USERNAME` and `SAUCE_ACCESS_KEY` to be set in the environment.
-- `--noStartConnect` — Do not start a new Sauce Connect proxy instance for every
-test; requires that Sauce Connect be already running.
+- `make ci` — use Sauce Labs to test a variety of platforms; requires an account at Sauce Labs and `SAUCE_USERNAME` and `SAUCE_ACCESS_KEY` to be set in the environment.
 
-#### `visual.html`
+#### `visual.html` (possibly outdated)
 
-Note that running `karma` or `rollup` will create a `visual.html` file that shows the proportional size of imports into each package.
+Note that running `karma` will create a `visual.html` file that shows the proportional size of imports into each package.
 
-### Objectives
+## Objectives
 
 TKO aims to become a base for future versions of Knockout.  The objectives include:
 
-- Modularization into ES6 and separate projects, with compilation using an ES6 compiler like [Rollup](http://rollupjs.org/).  This solves several problems with Knockout, including:
+- Modularization into ES6 and separate projects, with compilation using an ES6 compiler like [Esbuild](https://esbuild.github.io/).  This solves several problems with Knockout, including:
   - Some folks want to roll-their-own with e.g. removing components
   - Compilation is now with Closure compiler, which is actually transliterating – meaning the *debug* and *minified* versions have different code paths (mostly in the form of things exposed in *debug* being missing in the *minified* version)
   - The compilation of Knockout is just concatenation, leading to difficulties with maintainance, severance, and replacement
@@ -90,6 +96,27 @@ TKO aims to become a base for future versions of Knockout.  The objectives inclu
   - What should be simple plugins (e.g. binding handlers or providers) are complex, including:
     - Built-ins have first-class access to quite a bit of good Knockout code, but plugins generally have second-class access and often have to duplicate Knockout internals
     - Quality plugins have lots of boilerplate for compilation, release, documentation, and testing
+- Type-safe with Typescript
+- CSP compliant
+- JSX/TSX support
+
+## Overview of the development stack
+
+- **make** -> Build tasks
+- **npm** -> Node Package Manager
+- **esbuild** -> ts/js compiler and bundler
+- **lerna** -> mono-repo build-chain
+
+---
+
+- Test-Runner -> Karma
+- Test-Environment -> electron and headless-chrome
+- TDD/BDD-Frameworks -> 
+    - Jasmine 1.3
+    - Mocha + Chai
+    - sinon (Mocks)
+- Testing-Cloud-Service -> sauce
+- standard -> Code-Style (outdated for typescript)
 
 ## Some WSL tricks
 
@@ -118,10 +145,16 @@ There's an [issue for that](https://github.com/knockout/tko/issues/1).
 
 MIT license - [http://www.opensource.org/licenses/mit-license.php.](http://www.opensource.org/licenses/mit-license.php)
 
+## Credits
+- Knockout Type Definitions by: [Maxime LUCE](https://github.com/SomaticIT), [Michael Best](https://github.com/mbest)  
+    - https://github.com/knockout/knockout/blob/master/build/types/knockout.d.ts#L404
+- Team-Project: https://github.com/knockout
+- http://knockoutjs.com / [Steve Sanderson](https://github.com/SteveSanderson), [Michael Best](https://github.com/mbest)
+
 ## Shout Outs
 
 <div>
   <a href='http://browserstack.com'>
-    <img height=150px src='https://p3.zdusercontent.com/attachment/1015988/gTNrZ9vPjL8ThUHOWP7ucklJi?token=eyJhbGciOiJkaXIiLCJlbmMiOiJBMTI4Q0JDLUhTMjU2In0..HkCKDttXKDSGFoV5uaMPQA.ha9NDy63mjLKFcyNeib70TCkqfY0dcwiFwDYpZ8s5h75o-e1_cLjPAHlOUEwvKAbfMUaa1XpOL5F9AQd_B4iyc6JbgvKoKBxxe12aaOdfWFccP7r9iQ2Os6myiqBpP79prDXqFPMSAkF8ybzhVqCnWzxmK-Wvkbav-DGPZm3oS2IPD9ueIvf46bggFsikQhf1pjS5fgmzo07yi9Cf5SzA8zIKAjKX1RKQeFXOhBwxRfh_5SbJprfEZMnKBnGuO_qzP2fsK3BvxbyBKpIEWFdnA.t10i3BbyEpGtFVgyGbvQfw' alt='Browser Stack' />
+    Browser Stack
   </a>
 <div>

builds/knockout/src/index.ts

@@ -20,6 +20,8 @@ import { functionRewrite } from '@tko/utils.functionrewrite'
 
 import { options as defaultOptions } from '@tko/utils'
 
+declare const BUILD_VERSION: string
+
 /**
  * expressionRewriting is deprecated in TKO because we have our own JS
  * parser now.  This is here only for legacy compatibility.
@@ -29,23 +31,24 @@ const expressionRewriting = {
   preProcessBindings: s => dataBindProvider.preProcessBindings(s)
 }
 
+const provider = new MultiProvider({providers: [
+  new ComponentProvider(),
+  dataBindProvider,
+  new VirtualProvider(),
+  new AttributeProvider()
+]})
+
 const builder = new Builder({
-  filters,
-  provider: new MultiProvider({
-    providers: [
-      new ComponentProvider(),
-      dataBindProvider,
-      new VirtualProvider(),
-      new AttributeProvider()
-    ]
-  }),
+  provider,
   bindings: [
     coreBindings,
     templateBindings,
     ifBindings,
     componentBindings,
     { each: foreachBindings.foreach }
   ],
+  extenders: {},
+  filters,
   options: {
     bindingGlobals: defaultOptions.global,
     bindingStringPreparsers: [functionRewrite]

builds/reference/src/index.ts

@@ -25,12 +25,16 @@ import { createElement, Fragment } from '@tko/utils.jsx'
 
 import { overloadOperator } from '@tko/utils.parser'
 
+declare const BUILD_VERSION: string
+
 /** Overload "evil twins" with strict equivalents */
 overloadOperator('==', (a, b) => a === b)
 overloadOperator('!=', (a, b) => a !== b)
 
 const builder = new Builder({
   filters,
+  extenders: {},
+  options: {},
   provider: new MultiProvider({
     providers: [
       new ComponentProvider(),

global.d.ts

@@ -0,0 +1,66 @@
+/// <reference types="jasmine" />
+/// <reference types="jquery" />
+
+//export {} allows redefining window module
+export { };
+
+declare global {
+
+    // Below just informs IDE and/or TS-compiler (it's set in `.js` file).
+    interface Window {
+        DEBUG: boolean
+        amdRequire: any
+        require: any
+        jQuery: JQueryStatic
+        innerShiv // TODO: For IE<9.. we could also remove it
+    }
+
+    //Jasmine and Mocha define duplicated functions, is a problem for the type system
+    //This namespace merges the jasmine namespace to correct same tsc warnings
+    namespace jasmine {      
+
+        function setNodeText(node, text: string): void
+        var Spec: any;
+        function getGlobal(): any;
+        var updateInterval: number
+        function resolve(promise: Promise<boolean>)
+        function prepareTestNode() : HTMLElement
+        function nodeText(node)
+        var Clock: Clock
+        function getEnv(): any;
+
+        var FakeTimer: any
+        var undefined: undefined
+        var browserSupportsProtoAssignment: any
+        var ieVersion: any
+
+        var Matchers: Matchers
+
+        interface Matchers<T> {
+            toContainText(expected: string, ignoreSpaces: boolean): boolean
+            toHaveOwnProperties(expectedProperties: any): boolean
+            toHaveTexts(expectedTexts: any): boolean
+            toHaveValues(expectedValues: any): boolean
+            toHaveCheckedStates(expectedValues: any): boolean
+            toThrowContaining(expected: any): boolean
+            toEqualOneOf(expectedPossibilities: any): boolean
+            toContainHtml(expectedHtml: any, postProcessCleanedHtml: any): boolean
+            toHaveSelectedValues(expectedValues: any): boolean
+            toContainHtml(expectedValues: any): boolean
+            toHaveNodeTypes(expectedTypes: any): boolean
+            toContainHtmlElementsAndText(expectedHtml: any): boolean
+        }
+
+        interface Clock {
+            mockScheduler: any
+        }
+
+        interface Spy {
+            reset(): any
+        }
+    }
+
+    interface SymbolConstructor {
+        observable?: Symbol;
+    } 
+}