Skip to content

Commit caeb1e4

Browse files
authored
Merge pull request #202 from Auge19/strong_typed
Typescript) fix errors Typescript) update typings
2 parents 6e3f159 + e7c4719 commit caeb1e4

File tree

195 files changed

+7426
-4734
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

195 files changed

+7426
-4734
lines changed

.github/workflows/run-tsc.yml

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,3 @@ jobs:
3333

3434
- name: Run tsc
3535
run: npx tsc
36-
continue-on-error: true

.gitignore

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,6 @@ coverage/
2626
*-debug.log
2727
*-error.log
2828

29-
.vscode
29+
.vscode/extensions.json
30+
!.vscode/launch.json
31+
.vscode/settings.json

.vscode/launch.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
"version": "0.2.0",
6+
"configurations": [
7+
{
8+
"type": "chrome",
9+
"request": "attach",
10+
"name": "Attach to Karma-Chrome",
11+
"sourceMaps": true,
12+
// "restart": true,
13+
// "timeout":180000,
14+
"port": 9222,
15+
"webRoot": "${workspaceFolder}"
16+
}
17+
]
18+
}

CHANGELOG.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
For TODO between alpha and release, see https://github.com/knockout/tko/issues/1
22

3-
## Next
3+
## 💪 Next
4+
- #202 Make TKO more type-safe @mcselle, @Auge19, @phillipc, @M-Kirchhoff, @brianmhunt
45
- #194 fix userAgent typo in IE check @phillipc
56
- #196 fix `**` operator precedence @mcselle
67
- #195 add docker container for headless tests, upgrade packages, README fixes @Auge19

Makefile

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,12 @@ ci:
3232
lint:
3333
$(NPX) standard
3434

35+
tsc:
36+
$(NPX) tsc
37+
38+
dts:
39+
$(NPX) tsc --build tsconfig.dts.json
40+
3541
docker-build:
3642
$(DOCKER) build . --tag tko
3743

README.md

Lines changed: 63 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,91 @@
11

22
# TKO (“Technical Knockout”)
33

4-
[![npm version](https://badge.fury.io/js/tko.svg)](https://badge.fury.io/js/tko)
4+
[![npm version](https://badge.fury.io/js/@tko%2Fbuild.reference.svg)](https://badge.fury.io/js/@tko%2Fbuild.reference)
55
[![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)
6-
[![Circle CI](https://circleci.com/gh/knockout/tko.svg?style=shield)](https://circleci.com/gh/knockout/tko)
7-
[![Coverage Status](https://coveralls.io/repos/knockout/tko/badge.svg?branch=master&service=github)](https://coveralls.io/github/knockout/tko?branch=master)
86
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
97

8+
[![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)
9+
[![Coverage Status](https://coveralls.io/repos/knockout/tko/badge.svg?branch=master&service=github)](https://coveralls.io/github/knockout/tko?branch=master)
10+
[![Circle CI](https://circleci.com/gh/knockout/tko.svg?style=shield)](https://circleci.com/gh/knockout/tko)
1011
<!-- [![Sauce Test Status](https://saucelabs.com/browser-matrix/tko.svg)](https://saucelabs.com/u/tko) -->
1112

1213
**TKO** houses the monorepo of [Knockout](https://github.com/knockout/knockout).
14+
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.
15+
16+
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.
17+
18+
1319

1420
## Getting Started
1521

1622
To install use one of the usual package managers e.g.
1723

1824
- $ `yarn add @tko/build.reference`
1925
- $ `npm install @tko/build.reference`
26+
- $ `pnpm install @tko/build.reference`
27+
2028

2129
Over CDN
2230

23-
- Reference Build: https://cdn.jsdelivr.net/npm/@tko/[email protected]/dist/build.reference.min.js
31+
- Reference Build: https://cdn.jsdelivr.net/npm/@tko/build.reference/dist/build.reference.min.js
32+
33+
For more details, see
34+
35+
* TKO - Documentation (https://tko.io)
36+
* Knockout - Documentation (http://knockoutjs.com/documentation/introduction.html)
37+
* Online examples at [http://knockoutjs.com/examples/](http://knockoutjs.com/examples/)
38+
* Stackoverflow https://stackoverflow.com/questions/tagged/knockout.js
2439

2540
## Knockout Build
2641

2742
The Knockout build has some backwards compatibility that is not in the reference build. See the build differences, here: https://tko.io/3to4
2843

2944
It's available as `@tko/build.knockout`, and over CDN:
3045

31-
- Knockout Build https://cdn.jsdelivr.net/npm/@tko/build.knockout@4.0.0-alpha8/dist/build.knockout.min.js
46+
- Knockout Build https://cdn.jsdelivr.net/npm/@tko/build.knockout/dist/build.knockout.min.js
3247

3348
### Using the Monorepo
3449

3550
| Command | Effect |
3651
| ------- | ------ |
3752
| $ `git clone [email protected]:knockout/tko` | Clone the repository. |
38-
| $ `npm install -g yarn` | Ensure yarn is globally available |
39-
| $ `yarn` | Install local node packages and link tko modules |
40-
| $ `make` | **Currently TKO use a make file** |
41-
| $ `yarn test` | Run all tests. See below. |
42-
| $ `yarn watch` | Run all tests and watch for changes. See below. |
43-
| $ `yarn build` | Build tko\[.module\]\[.es6\]\[.min\].js files, where `.es6` version has not been transpiled |
53+
| $ `npm install` | Ensure that all packages available |
54+
| $ `make` | **Currently TKO use a make file** / no scripts at package.json |
55+
| $ `make test` | Run all tests with electron. See below. |
56+
| $ `make test-headless` | Run all tests with chromium. See below. |
4457
| $ `lerna publish` | Bump versions and publish to npm registry |
4558

46-
Checkout `package.json => scripts` for more commands that can be executed with `yarn {command}`.
59+
Checkout the `Makefile` for more commands that can be executed with `make {command}`.
4760

48-
In each individual `packages/*/` directory, you can also run (presuming `rollup` and `karma` are installed globally):
61+
In each individual `packages/*/` directory, you can also run:
4962

5063
| Command | Effect |
5164
| --- | --- |
5265
| $ `karma COMMAND ../../karma.conf.js [--once]` | Test the local package, where COMMAND is e.g. `start` or `run` |
53-
| $ `rollup -c ../../rollup.config.js` | Build the package into the local `dist/` |
66+
| $ `make test-debug` | Runs all tests in the current package in debug- and watch-mode: Attach vscode, set a breakpoint, press save and debug |
5467

55-
#### Testing with `yarn test` and `yarn watch`
56-
57-
### NEW
68+
### Testing
5869

5970
Start tests with electron: `make test`
6071

6172
Start tests with headless-chrome: `make test-headless`
6273

63-
### OLD
64-
65-
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
66-
specific to that package.
74+
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
6775

68-
Optional arguments to `yarn test` include:
76+
Other options:
6977

70-
- `--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.
71-
- `--noStartConnect` — Do not start a new Sauce Connect proxy instance for every
72-
test; requires that Sauce Connect be already running.
78+
- `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.
7379

74-
#### `visual.html`
80+
#### `visual.html` (possibly outdated)
7581

76-
Note that running `karma` or `rollup` will create a `visual.html` file that shows the proportional size of imports into each package.
82+
Note that running `karma` will create a `visual.html` file that shows the proportional size of imports into each package.
7783

78-
### Objectives
84+
## Objectives
7985

8086
TKO aims to become a base for future versions of Knockout. The objectives include:
8187

82-
- Modularization into ES6 and separate projects, with compilation using an ES6 compiler like [Rollup](http://rollupjs.org/). This solves several problems with Knockout, including:
88+
- 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:
8389
- Some folks want to roll-their-own with e.g. removing components
8490
- 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)
8591
- 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
9096
- What should be simple plugins (e.g. binding handlers or providers) are complex, including:
9197
- 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
9298
- Quality plugins have lots of boilerplate for compilation, release, documentation, and testing
99+
- Type-safe with Typescript
100+
- CSP compliant
101+
- JSX/TSX support
102+
103+
## Overview of the development stack
104+
105+
- **make** -> Build tasks
106+
- **npm** -> Node Package Manager
107+
- **esbuild** -> ts/js compiler and bundler
108+
- **lerna** -> mono-repo build-chain
109+
110+
---
111+
112+
- Test-Runner -> Karma
113+
- Test-Environment -> electron and headless-chrome
114+
- TDD/BDD-Frameworks ->
115+
- Jasmine 1.3
116+
- Mocha + Chai
117+
- sinon (Mocks)
118+
- Testing-Cloud-Service -> sauce
119+
- standard -> Code-Style (outdated for typescript)
93120

94121
## Some WSL tricks
95122

@@ -118,10 +145,16 @@ There's an [issue for that](https://github.com/knockout/tko/issues/1).
118145

119146
MIT license - [http://www.opensource.org/licenses/mit-license.php.](http://www.opensource.org/licenses/mit-license.php)
120147

148+
## Credits
149+
- Knockout Type Definitions by: [Maxime LUCE](https://github.com/SomaticIT), [Michael Best](https://github.com/mbest)
150+
- https://github.com/knockout/knockout/blob/master/build/types/knockout.d.ts#L404
151+
- Team-Project: https://github.com/knockout
152+
- http://knockoutjs.com / [Steve Sanderson](https://github.com/SteveSanderson), [Michael Best](https://github.com/mbest)
153+
121154
## Shout Outs
122155

123156
<div>
124157
<a href='http://browserstack.com'>
125-
<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' />
158+
Browser Stack
126159
</a>
127160
<div>

builds/knockout/src/index.ts

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ import { functionRewrite } from '@tko/utils.functionrewrite'
2020

2121
import { options as defaultOptions } from '@tko/utils'
2222

23+
declare const BUILD_VERSION: string
24+
2325
/**
2426
* expressionRewriting is deprecated in TKO because we have our own JS
2527
* parser now. This is here only for legacy compatibility.
@@ -29,23 +31,24 @@ const expressionRewriting = {
2931
preProcessBindings: s => dataBindProvider.preProcessBindings(s)
3032
}
3133

34+
const provider = new MultiProvider({providers: [
35+
new ComponentProvider(),
36+
dataBindProvider,
37+
new VirtualProvider(),
38+
new AttributeProvider()
39+
]})
40+
3241
const builder = new Builder({
33-
filters,
34-
provider: new MultiProvider({
35-
providers: [
36-
new ComponentProvider(),
37-
dataBindProvider,
38-
new VirtualProvider(),
39-
new AttributeProvider()
40-
]
41-
}),
42+
provider,
4243
bindings: [
4344
coreBindings,
4445
templateBindings,
4546
ifBindings,
4647
componentBindings,
4748
{ each: foreachBindings.foreach }
4849
],
50+
extenders: {},
51+
filters,
4952
options: {
5053
bindingGlobals: defaultOptions.global,
5154
bindingStringPreparsers: [functionRewrite]

builds/reference/src/index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,16 @@ import { createElement, Fragment } from '@tko/utils.jsx'
2525

2626
import { overloadOperator } from '@tko/utils.parser'
2727

28+
declare const BUILD_VERSION: string
29+
2830
/** Overload "evil twins" with strict equivalents */
2931
overloadOperator('==', (a, b) => a === b)
3032
overloadOperator('!=', (a, b) => a !== b)
3133

3234
const builder = new Builder({
3335
filters,
36+
extenders: {},
37+
options: {},
3438
provider: new MultiProvider({
3539
providers: [
3640
new ComponentProvider(),

global.d.ts

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/// <reference types="jasmine" />
2+
/// <reference types="jquery" />
3+
4+
//export {} allows redefining window module
5+
export { };
6+
7+
declare global {
8+
9+
// Below just informs IDE and/or TS-compiler (it's set in `.js` file).
10+
interface Window {
11+
DEBUG: boolean
12+
amdRequire: any
13+
require: any
14+
jQuery: JQueryStatic
15+
innerShiv // TODO: For IE<9.. we could also remove it
16+
}
17+
18+
//Jasmine and Mocha define duplicated functions, is a problem for the type system
19+
//This namespace merges the jasmine namespace to correct same tsc warnings
20+
namespace jasmine {
21+
22+
function setNodeText(node, text: string): void
23+
var Spec: any;
24+
function getGlobal(): any;
25+
var updateInterval: number
26+
function resolve(promise: Promise<boolean>)
27+
function prepareTestNode() : HTMLElement
28+
function nodeText(node)
29+
var Clock: Clock
30+
function getEnv(): any;
31+
32+
var FakeTimer: any
33+
var undefined: undefined
34+
var browserSupportsProtoAssignment: any
35+
var ieVersion: any
36+
37+
var Matchers: Matchers
38+
39+
interface Matchers<T> {
40+
toContainText(expected: string, ignoreSpaces: boolean): boolean
41+
toHaveOwnProperties(expectedProperties: any): boolean
42+
toHaveTexts(expectedTexts: any): boolean
43+
toHaveValues(expectedValues: any): boolean
44+
toHaveCheckedStates(expectedValues: any): boolean
45+
toThrowContaining(expected: any): boolean
46+
toEqualOneOf(expectedPossibilities: any): boolean
47+
toContainHtml(expectedHtml: any, postProcessCleanedHtml: any): boolean
48+
toHaveSelectedValues(expectedValues: any): boolean
49+
toContainHtml(expectedValues: any): boolean
50+
toHaveNodeTypes(expectedTypes: any): boolean
51+
toContainHtmlElementsAndText(expectedHtml: any): boolean
52+
}
53+
54+
interface Clock {
55+
mockScheduler: any
56+
}
57+
58+
interface Spy {
59+
reset(): any
60+
}
61+
}
62+
63+
interface SymbolConstructor {
64+
observable?: Symbol;
65+
}
66+
}

0 commit comments

Comments
 (0)