more docs

docs/configuration.md

@@ -21,6 +21,10 @@ FuseBox.init({
 })
 ```
 
+* bundling input files are relative to `homeDir`.
+* this is the folder that we watch for changes when using the `devServer`.
+* this is the folder we check for any `tsconfig.json` (can be changed using the `tsConfig` option).
+
 ## Out file
 
 That's your bundle file. It can be an absolute path, Or relative to `appRootPath`.

docs/typescript.md

@@ -25,13 +25,19 @@ FuseBox automatically switches to typescript mode by detecting the extension `.t
 
 ## tsConfig
 
-FuseBox comes with default ts options. `tsconfig.json` will be picked up automatically. Alternatively you can use the tsconfig option to customize the path to tsconfig.json (It can be an absolute path, Or relative to `appRootPath`).
+FuseBox comes with default ts options so you don't *need* a tsconfig.
+
+If you have a tsconfig file in your `homeDir` or any directory up the file tree (e.g. `appRootPath`), it will be picked up automatically. 
+
+Alternatively you can use the tsconfig option to customize the path to tsconfig.json (It can be an absolute path, Or relative to `appRootPath`).
 
 ```js
 FuseBox.init({
     tsConfig : "tsconfig.json"
 })
 ```
 
+Irrespective of the settings in `tsconfig.json`:
+
 * We automatically set the `module` to `commonjs`.
 * If you set `sourceMap` in your `FuseBox` options, we automatically setup the sourcemap settings for TypeScript `compilerOptions`.

src-frontend/FuseBox.ts

@@ -61,10 +61,8 @@ interface IReference {
  * Considers a partial request
  * for Example
  * require("lodash/dist/hello")
- * @param {any} name
- * @returns
  */
-const $getNodeModuleName = (name) => {
+const $getNodeModuleName = (name: string) => {
     const n = name.charCodeAt(0);
     // https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
     // basically lowcase alphabet starts with 97 ends with 122, and symbol @ is 64
@@ -98,8 +96,8 @@ const $getDir = (filePath: string) => {
  * @param {any} name
  * @returns
  */
-const $pathJoin = function (...string): string {
-    let parts = [];
+const $pathJoin = function (...string:string[]): string {
+    let parts: string[] = [];
     for (let i = 0, l = arguments.length; i < l; i++) {
         parts = parts.concat(arguments[i].split("/"));
     }
@@ -116,7 +114,7 @@ const $pathJoin = function (...string): string {
 /**
  * Adds javascript extension if no extension was spotted
  */
-const $ensureExtension = (name): string => {
+const $ensureExtension = (name: string): string => {
     let matched = name.match(/\.(\w{1,})$/);
     if (matched) {
         let ext = matched[1];
@@ -153,7 +151,11 @@ const $loadURL = (url: string) => {
 }
 
 
-const $getRef = (name, opts: any): IReference => {
+const $getRef = (name: string, opts: {
+    path?: string;
+    pkg?: string;
+    v?: { [pkg: string]: /** version e.g. `1.0.0`` */string }
+}): IReference => {
     let basePath = opts.path || "./";
     let pkg_name = opts.pkg || "default";
     let nodeModule = $getNodeModuleName(name);
@@ -244,9 +246,9 @@ const $getRef = (name, opts: any): IReference => {
  * Makes it possible to request files asynchronously
  * 
  */
-const $async = (file: string, cb) => {
+const $async = (file: string, cb: (imported?: any) => any) => {
     if ($isBrowser) {
-        var xmlhttp;
+        var xmlhttp: XMLHttpRequest;
         xmlhttp = new XMLHttpRequest();
         xmlhttp.onreadystatechange = function () {
             if (xmlhttp.readyState == 4) {
@@ -399,7 +401,7 @@ const $import = (name: string, opts: any = {}) => {
  */
 class FuseBox {
     public static packages = $packages;
-    public static mainFile;
+    public static mainFile: string;
     public static isBrowser = $isBrowser !== undefined;;
     public static isServer = !$isBrowser;
 
@@ -481,10 +483,10 @@ class FuseBox {
      * 
      * @memberOf FuseBox
      */
-    public static dynamic(path: string, str: string, opts?: any) {
+    public static dynamic(path: string, str: string, opts?: { pkg: string }) {
         let pkg = opts && opts.pkg || "default";
-        this.pkg(pkg, {}, function (___scope___) {
-            ___scope___.file(path, function (exports, require, module, __filename, __dirname) {
+        this.pkg(pkg, {}, function (___scope___: any) {
+            ___scope___.file(path, function(exports: any, require: any, module: any, __filename: string, __dirname: string) {
                 var res = new Function('__fbx__dnm__', 'exports', 'require', 'module', '__filename', '__dirname', '__root__', str);
                 res(true, exports, require, module, __filename, __dirname, __root__);
             });

src/ArithmeticStringParser.ts

@@ -226,9 +226,9 @@ export class PropParser {
      *
      * @memberOf PropParser
      */
-    public set(...args) {
-        for (let i = 0; i < arguments.length; i++) {
-            let name = arguments[i];
+    public set(...args: any[]) {
+        for (let i = 0; i < args.length; i++) {
+            let name = args[i];
             if (!this.states.has(name)) {
                 this.states.add(name);
             }
@@ -241,9 +241,9 @@ export class PropParser {
      *
      * @memberOf PropParser
      */
-    public clean(...args) {
-        for (let i = 0; i < arguments.length; i++) {
-            let name = arguments[i];
+    public clean(...args: any[]) {
+        for (let i = 0; i < args.length; i++) {
+            let name = args[i];
             this.states.delete(name);
         }
     }
@@ -280,9 +280,9 @@ export class PropParser {
      *
      * @memberOf PropParser
      */
-    public unset(...args) {
-        for (let i = 0; i < arguments.length; i++) {
-            let name = arguments[i];
+    public unset(...args: any[]) {
+        for (let i = 0; i < args.length; i++) {
+            let name = args[i];
             this.states.delete(name);
         }
     }

src/BundleSource.ts

@@ -1,4 +1,4 @@
-import { ensurePublicExtension, replaceExt } from './Utils';
+import { ensurePublicExtension } from './Utils';
 import { BundleData } from './Arithmetic';
 import { ModuleCollection } from "./ModuleCollection";
 import { WorkFlowContext } from "./WorkflowContext";

src/CollectionSource.ts

@@ -4,7 +4,7 @@ import { File } from "./File";
 export class CollectionSource {
     constructor(public context: WorkFlowContext) { }
 
-    public get(collection: ModuleCollection, withSourceMaps: boolean = false): Promise<string> {
+    public get(collection: ModuleCollection): Promise<string> {
 
         if (collection.cachedContent) {
 
@@ -25,7 +25,6 @@ export class CollectionSource {
 
     }
     private resolveFiles(files: Map<string, File>): Promise<File[]> {
-        let cnt = [];
         let promises: Promise<any>[] = [];
         files.forEach(file => {
             file.resolving.forEach(p => {

src/EventEmitter.ts

@@ -0,0 +1,38 @@
+export interface Listener<T> {
+  (event: T): any;
+}
+
+export interface Disposable {
+  dispose();
+}
+
+/** A type safe event emitter */
+export class EventEmitter<T> {
+  private listeners: Listener<T>[] = [];
+  private listenersOncer: Listener<T>[] = [];
+
+  on = (listener: Listener<T>): Disposable => {
+    this.listeners.push(listener);
+    return {
+      dispose: () => this.off(listener)
+    };
+  }
+
+  once = (listener: Listener<T>): void => {
+    this.listenersOncer.push(listener);
+  }
+
+  off = (listener: Listener<T>) => {
+    var callbackIndex = this.listeners.indexOf(listener);
+    if (callbackIndex > -1) this.listeners.splice(callbackIndex, 1);
+  }
+
+  emit = (event: T) => {
+    /** Update any general listeners */
+    this.listeners.forEach((listener) => listener(event));
+
+    /** Clear the `once` queue */
+    this.listenersOncer.forEach((listener) => listener(event));
+    this.listenersOncer = [];
+  }
+}

src/File.ts

@@ -4,9 +4,6 @@ import { WorkFlowContext, Plugin } from "./WorkflowContext";
 import { IPathInformation } from "./PathMaster";
 import * as fs from "fs";
 import { utils, each } from "realm-utils";
-import { ensureUserPath } from './Utils';
-
-import * as ts from "typescript";
 
 
 /**
@@ -350,7 +347,7 @@ export class File {
                 cachedContent = this.headerContent.join("\n") + "\n" + cachedContent;
             }
 
-            this.context.emmitter.emit("source-changed", {
+            this.context.sourceChangedEmitter.emit({
                 type: "js",
                 content: cachedContent,
                 path: this.info.fuseBoxPath,

src/FuseBox.ts

@@ -12,9 +12,7 @@ import * as path from "path";
 import { each, utils, chain, Chainable } from "realm-utils";
 import { Config } from "./Config";
 import { BundleTestRunner } from "./testRunner/BundleTestRunner";
-import { FuseAPI } from './lib/FuseApi';
 const appRoot = require("app-root-path");
-const watch = require("watch");
 
 export interface FuseBoxOptions {
     homeDir?: string;

src/Log.ts

@@ -34,7 +34,7 @@ export class Log {
         }
     }
 
-    public echoDefaultCollection(collection: ModuleCollection, contents: string, printFiles?: boolean) {
+    public echoDefaultCollection(collection: ModuleCollection, contents: string) {
         if (!this.printLog) {
             return;
         }
@@ -54,7 +54,7 @@ export class Log {
         cursor.reset();
     }
 
-    public echoCollection(collection: ModuleCollection, contents: string, printFiles?: boolean) {
+    public echoCollection(collection: ModuleCollection, contents: string) {
         if (!this.printLog) {
             return;
         }

src/ModuleCollection.ts

@@ -1,7 +1,7 @@
 import { File } from "./File";
 import { PathMaster, IPackageInformation } from "./PathMaster";
 import { WorkFlowContext } from "./WorkflowContext";
-import { each, utils } from "realm-utils";
+import { each } from "realm-utils";
 import { BundleData } from "./Arithmetic";
 
 

src/PathMaster.ts

@@ -5,7 +5,12 @@ import * as path from "path";
 import * as fs from "fs";
 import { Config } from "./Config";
 
+/**
+ * If a import url isn't relative
+ * and only has ascii + @ in the name it is considered a node module
+ */
 const NODE_MODULE = /^([a-z@].*)$/;
+
 export interface INodeModuleRequire {
     name: string;
     target?: string;
@@ -35,8 +40,16 @@ export interface IPackageInformation {
     customBelongsTo?: string;
 }
 
+/**
+ * Manages the allowed extensions e.g. 
+ * should user be allowed to do `require('./foo.ts')`
+ */
 export class AllowedExtenstions {
+    /** 
+     * Users are allowed to require files with these extensions by default
+     **/
     public static list: Set<string> = new Set([".js", ".ts", ".tsx", ".json", ".xml", ".css", ".html"]);
+
     public static add(name: string) {
         if (!this.list.has(name)) {
             this.list.add(name);

src/WorkflowContext.ts

@@ -7,9 +7,9 @@ import { IPackageInformation, IPathInformation, AllowedExtenstions } from "./Pat
 import { ModuleCollection } from "./ModuleCollection";
 import { ModuleCache } from "./ModuleCache";
 import { utils } from "realm-utils";
-import { EventEmitter } from "events";
+import { EventEmitter } from "./EventEmitter";
 import { ensureUserPath, findFileBackwards } from './Utils';
-import * as process from 'process';
+import { SourceChangedEvent } from './devServer/Server';
 
 
 const appRoot = require("app-root-path");
@@ -33,7 +33,7 @@ export interface Plugin {
 export class WorkFlowContext {
     public shim: any;
 
-    public emmitter = new EventEmitter();
+    public sourceChangedEmitter = new EventEmitter<SourceChangedEvent>();
 
     /**
      * The default package name or the package name configured in options
@@ -93,7 +93,7 @@ export class WorkFlowContext {
     }
 
     public emitJavascriptHotReload(file: File) {
-        this.emmitter.emit("source-changed", {
+        this.sourceChangedEmitter.emit({
             type: "js",
             content: file.contents,
             path: file.info.fuseBoxPath,
@@ -208,8 +208,6 @@ export class WorkFlowContext {
             return this.loadedTsConfig;
         }
 
-        const ts = require("typescript");
-
         let url, configFile;
         let config: any = {
             compilerOptions: {}

src/devServer/Server.ts

@@ -10,6 +10,12 @@ const watch = require("watch");
 
 export type HotReloadEmitter = (server: Server, sourceChangedInfo: any) => any;
 
+export type SourceChangedEvent = {
+    type: 'js' | 'css',
+    content: string,
+    path: string
+}
+
 export interface ServerOptions {
     /** Defaults to 4444 if not specified */
     port?: number;
@@ -63,11 +69,7 @@ export class Server {
 
             this.socketServer = SocketServer.getInstance();
 
-            this.fuse.context.emmitter.addListener("source-changed", (info) => {
-
-                // type: "js",
-                // content: file.contents,
-                // path: file.info.fuseBoxPath,
+            this.fuse.context.sourceChangedEmitter.on((info) => {
                 if (this.fuse.context.isFirstTime() === false) {
                     this.fuse.context.log.echo(`Source changed for ${info.path}`);
                     if (emitter) {
@@ -76,7 +78,6 @@ export class Server {
                         this.socketServer.send("source-changed", info);
                     }
                 }
-
             });
 
 

src/plugins/BannerPlugin.ts

@@ -1,4 +1,3 @@
-import { File } from "../File";
 import { WorkFlowContext } from "./../WorkflowContext";
 import { Plugin } from "../WorkflowContext";