Date: Feb 22, 2017

TODO

How to install chrome extension to the nwjs

http://docs.nwjs.io/en/v0.13.0-beta7/For%20Users/Debugging%20with%20DevTools/
https://www.chromium.org/user-experience/user-data-directory
https://ubuntuforums.org/showthread.php?t=2300242

TSLint

Webpack

Live Reload

http://docs.nwjs.io/en/v0.13.0-beta7/For%20Users/Debugging%20with%20DevTools/

make -> gulp (grunt)

npm + typescript

package.js : ($ npm init) 'packages.js' : NPM package = 'control' file : .deb package

https://docs.npmjs.com/files/package.json

{
"main": "./dist/main.js",
"script": { "start": "node ./dist/main.js" },
"devDependencies": {
	"gulp": "x.x",
	"gulp-typescript": "x.x",
	"typescript": "x.x"
	},
}

--> I installed gulp and typescript globally. Why I have to install them local again?

tsconfig.json : ($ tsc --init) src + tsc transpiler options

looks like ant build.xml without target, job or task.

{
"files": [
	"src/main.ts"
	],
"compileOptoins": {
	"noImplicitAny": true,
	"target": "es5"
	}
}

Gulpfile.js : Makefile

var gulp = require("gulp")
var ts = require("gulp-typescript")
var tsProject = ts.createProject("tsconfig.json");

gulp.task("default", function() {
	return tsProject.src()
		.pipe(tsProject())
		.js.pipe(gulp.dest("dist"));
});

npm + typescript + nodejs

typings.json : ($ typings init) typescript definition manager settings

$ typings install -GD dt~node

As a result, below files and directories are created or downloaded.
./typings/index.d.ts
./typings/globals/node/index.d.ts
./typings/globals/node/typings.json

tsconfig.js

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": true,
        "typeRoots": ["./typings/globals"]
    },
    "include": [
	    "src/**/*"
    ],
    "exclude": [
	    "node_modules"
    ]
}

I think that typeRoots should be "./typings" or "typings" rather than "./typings/globals".
File ./typpings/index.d.ts simply includes "globals/node/index.d.ts".

/// <reference path="global/node/index.d.ts" />

However, tsc can not find node type defintion.

$ tsc --traceResolution
File '/home/xxxx/typescript-test/typings/globals/index.d.ts' does not exist.
$ tsc -v
Version 2.1.6

One alterntative workaround is to add "files": [ "./typings/index.d.ts" ] instead of typeRoots.

npm + typescript + nodejs + nwjs

https://github.com/kitsonk/testnwjs

package.json (Builder)

{
  "name": "nwjs-ts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",		// don't care
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^2.1.6"
  }
}

Install nwjs type definitions

google nwjs typescript definition
DefinitelyTyped/DefinitelyTyped#9595 https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/nw.js

$ typings install -GD dt~nw.js
$ typings install -GD dt~node

tsconfig.json

$ tsc --init

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",        // nwjs understands es6
        "noImplicitAny": false,
        "sourceMap": true,
	"outDir": "dist"
    },
    "include": [
	    "typings/index.d.ts",   // type definitions
	    "src/**/*"
    ],
    "exclude": [
	    "node_modules"
    ]
}

src/main.ts

https://github.com/Microsoft/TypeScriptSamples/blob/master/greeter/greeter.ts

// TypeScriptSamples greeter

class Greeter {
	constructor(public greeting: string) {}
	greet()
	{
		return `<h1> ${this.greeting} </h1>`;
	}
};

let greeter: Greeter = new Greeter("Hello, world!");

document.body.innerHTML = greeter.greet();

dist/package.json (nwjs package.json)

{
  "name": "dist",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

dist/index.html

<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
</head>
<body>
	<script src="main.js"></script>
</body>
</html>

build

$ tsc

run

$ nw dist

nwjs live reload

https://github.com/nwjs/nw.js/wiki/Livereload-nw.js-on-changes
https://www.npmjs.com/package/nw-dev

I don't like to insert the element below to every html file.

<script src="node_modules/nw-dev/lib/dev.js></script>

HTML templating tools may be a solution but sorry I am lazy.
In reading nwjs manual, I found "inject_js_start" key in the package.json which seemed promising.

package.json/inject_js_start : "dev.js" // from nw-dev

dev.js is intended to be used in the script tag.
However, the script specified by injext_js_start is executed before building any DOM.
At the moment document.currentScript is not yet available.

ignore = document.currentScript.dataset.ignore;

if (document.currentScript) {
	ignore = document.currentScript.dataset.ignore;
}
else {
	ignore = nwgui.App.manifest.nwDevIgnore;
}

gulp automation

npm + typescript + nodejs + vuejs

npm + typescript + nodejs + nwjs + vuejs

th-yoo/roadmap-to-desktop-webapp-developer.md