More types

src/@types/flow-down/flow-down.d.ts

@@ -8,12 +8,21 @@ declare module 'flow-down/flow-down.js' {
 
     type ProviderMixin = <B extends Constructor<HTMLElement>>(parent : B) => B;
 
+    interface IActionEvent {
+        type : string;
+        [K : string] : any;
+    }
+
     interface Store {
         StateReceiver : any;
         ReceiverBehavior : any;
         StateProvider : ProviderMixin;
         id : number;
         providerElement : HTMLElement;
+        dispatch(event : IActionEvent) : void;
+        getState() : any;
+        addMutator(mutator : (this : any, action : IActionEvent) => void) : void;
+        appStateComponent : PolymerElement;
     }
     export function createStore(initialState : object) : Store;
 }

src/@types/types.d.ts

@@ -0,0 +1 @@
+interface Type<T> extends Function { new (...args : any[]) : T; }

src/app/lib/actions/challenge.js → src/app/lib/actions/challenge.ts

@@ -1,4 +1,5 @@
 import Store from '../store.js';
+import FlowDown from 'flow-down/flow-down.js';
 
 const CONSTANTS = [
     'LOAD_CHALLENGE',
@@ -21,10 +22,10 @@ const CONSTANTS = [
 ];
 const CHALLENGE_TYPES = Store.types(CONSTANTS);
 
-const BANNER_ICONS = {
+const BANNER_ICONS : any= {
     default: '/assets/avatar/judoka-face.svg',
 };
-const ChallengeActions = (store) => {
+const ChallengeActions = (store : FlowDown.Store) => {
     function getProgress() {
         const state = store.getState();
         if (!state.steps) {
@@ -169,16 +170,16 @@ const ChallengeActions = (store) => {
     });
 
     return {
-        load(challenge) {
+        load(challenge : any) {
             store.dispatch({ type: CHALLENGE_TYPES.LOAD_CHALLENGE, challenge });
         },
-        loadVariables(variables) {
+        loadVariables(variables : any[]) {
             store.dispatch({ type: CHALLENGE_TYPES.LOAD_VARIABLES, variables });
         },
-        updateStepIndex(index) {
+        updateStepIndex(index : number) {
             store.dispatch({ type: CHALLENGE_TYPES.UPDATE_STEP_INDEX, index });
         },
-        updateSteps(steps) {
+        updateSteps(steps : any[]) {
             store.dispatch({ type: CHALLENGE_TYPES.UPDATE_STEPS, steps });
         },
         disableBannerButton() {
@@ -187,7 +188,7 @@ const ChallengeActions = (store) => {
         enableBannerButton() {
             store.dispatch({ type: CHALLENGE_TYPES.ENABLE_BANNER_BUTTON });
         },
-        updateBannerState(banner = {}) {
+        updateBannerState(banner : any = {}) {
             store.dispatch({ type: CHALLENGE_TYPES.UPDATE_BANNER_STATE, state: banner });
         },
         enableLockdown() {
@@ -196,19 +197,19 @@ const ChallengeActions = (store) => {
         disableLockdown() {
             store.dispatch({ type: CHALLENGE_TYPES.DISABLE_LOCKDOWN });
         },
-        updateHistoryOptions(canGoBack, canGoForward) {
+        updateHistoryOptions(canGoBack : boolean, canGoForward : boolean) {
             store.dispatch({ type: CHALLENGE_TYPES.UPDATE_HISTORY_OPTIONS, canGoBack, canGoForward });
         },
-        addHistoryRecord(stepIndex, editorState) {
+        addHistoryRecord(stepIndex : number, editorState : any) {
             store.dispatch({ type: CHALLENGE_TYPES.ADD_HISTORY_RECORD, stepIndex, editorState });
         },
         completeChallenge() {
             store.dispatch({ type: CHALLENGE_TYPES.COMPLETE_CHALLENGE });
         },
-        updateBeacon(beacon) {
+        updateBeacon(beacon : any) {
             store.dispatch({ type: CHALLENGE_TYPES.UPDATE_BEACON, beacon });
         },
-        updateTooltips(tooltips) {
+        updateTooltips(tooltips : any[]) {
             store.dispatch({ type: CHALLENGE_TYPES.UPDATE_TOOLTIPS, tooltips });
         },
         historyBack() {

src/app/lib/actions/editor.js → src/app/lib/actions/editor.ts

@@ -1,4 +1,5 @@
 import Store from '../store.js';
+import FlowDown from 'flow-down/flow-down.js';
 
 const CONSTANTS = [
     'SET_TOOLBOX',
@@ -9,7 +10,7 @@ const CONSTANTS = [
 ];
 const EDITOR_TYPES = Store.types(CONSTANTS);
 
-const EditorActions = (store) => {
+const EditorActions = (store : FlowDown.Store) => {
     store.addMutator(function modeActions(action) {
         switch (action.type) {
         case EDITOR_TYPES.LOAD_SOURCE: {
@@ -43,16 +44,16 @@ const EditorActions = (store) => {
     });
 
     return {
-        loadSource(source) {
+        loadSource(source : string) {
             store.dispatch({ type: EDITOR_TYPES.LOAD_SOURCE, source });
         },
-        setToolbox(toolbox) {
+        setToolbox(toolbox : any) {
             store.dispatch({ type: EDITOR_TYPES.SET_TOOLBOX, toolbox });
         },
-        setFlyoutMode(isFlyoutMode) {
+        setFlyoutMode(isFlyoutMode : boolean) {
             store.dispatch({ type: EDITOR_TYPES.SET_FLYOUT_MODE, isFlyoutMode });
         },
-        editBackground(state) {
+        editBackground(state : boolean) {
             store.dispatch({ type: EDITOR_TYPES.EDIT_BACKGROUND, state });
         },
     };

src/app/lib/actions/parts.js → src/app/lib/actions/parts.ts

@@ -1,4 +1,5 @@
 import Store from '../store.js';
+import FlowDown from 'flow-down/flow-down.js';
 
 const CONSTANTS = [
     'UPDATE_PART_LIST',
@@ -10,18 +11,18 @@ const CONSTANTS = [
 ];
 const PARTS_TYPES = Store.types(CONSTANTS);
 
-const PartsActions = (store) => {
+const PartsActions = (store : FlowDown.Store) => {
     store.addMutator(function partsActions(action) {
         switch (action.type) {
         case PARTS_TYPES.UPDATE_PART_LIST: {
             const mode = this.get('state.mode');
-            const partsMap = action.parts.reduce((acc, part) => {
+            const partsMap = action.parts.reduce((acc : any, part : any) => {
                 acc[part.type] = part;
                 return acc;
             }, {});
             this.set('state.partsMap', partsMap);
             if (mode) {
-                const parts = action.parts.filter(part => mode.parts.indexOf(part.type) !== -1);
+                const parts = action.parts.filter((part : any) => mode.parts.indexOf(part.type) !== -1);
                 this.set('state.parts', parts);
             }
             break;
@@ -61,22 +62,22 @@ const PartsActions = (store) => {
     });
 
     return {
-        updatePartsList(parts) {
+        updatePartsList(parts : any[]) {
             store.dispatch({ type: PARTS_TYPES.UPDATE_PART_LIST, parts });
         },
-        addPart(part) {
+        addPart(part : any) {
             store.dispatch({ type: PARTS_TYPES.ADD_PART, part });
         },
-        removePart(part) {
+        removePart(part : any) {
             store.dispatch({ type: PARTS_TYPES.REMOVE_PART, part });
         },
-        loadAddedParts(part) {
+        loadAddedParts(part : any) {
             store.dispatch({ type: PARTS_TYPES.LOAD_ADDED_PARTS, part });
         },
-        select(index) {
+        select(index : number) {
             store.dispatch({ type: PARTS_TYPES.SELECT, index });
         },
-        updatePart(property, value) {
+        updatePart(property : string, value : any) {
             store.dispatch({ type: PARTS_TYPES.UPDATE, property, value });
         },
     };

src/app/lib/app-modules/global.js → src/app/lib/app-modules/global.ts

@@ -1,7 +1,8 @@
 import { AppModule } from './app-module.js';
 
 export class GlobalModule extends AppModule {
-    constructor(output) {
+    private _listeners : { [K : string] : Function[] } = {};
+    constructor(output : any) {
         super(output);
         this.addMethod('when', '_when');
         this.addMethod('emit', '_emit');
@@ -13,12 +14,12 @@ export class GlobalModule extends AppModule {
 
     static get id() { return 'global'; }
 
-    _when(name, callback) {
+    _when(name : string, callback : Function) {
         this._listeners[name] = this._listeners[name] || [];
         this._listeners[name].push(callback);
     }
 
-    _emit(name, data) {
+    _emit(name : string, data? : any) {
         const listeners = this._listeners[name];
         if (!listeners || !Array.isArray(listeners)) {
             return;

src/app/lib/app-modules/index.js → src/app/lib/app-modules/index.ts

@@ -1,20 +1,29 @@
 import AppModules from './app-modules.js';
+import AppModule from './app-module.js';
+
+type IAppModuleType = Type<AppModule> & {
+    id? : string;
+}
 
 class AppModulesLoader {
-    constructor(output, modules) {
+    private output : any;
+    public appModules : AppModules;
+    private modules : IAppModuleType[];
+    constructor(output : any, modules : IAppModuleType[]) {
         this.output = output;
         this.appModules = new AppModules(output);
         this.modules = modules;
     }
     start() {
         this.appModules.init(this.output.config);
         this.modules.forEach((Mod) => {
-            this.appModules.define(Mod.id, Mod);
+            if (Mod.id) {
+                this.appModules.define(Mod.id, Mod);
+            }
         });
     }
     dispose() {
         this.appModules.dispose();
-        this.modules = null;
     }
 }
 

src/app/lib/app-modules/loop.js → src/app/lib/app-modules/loop.ts

@@ -1,8 +1,9 @@
 import { AppModule } from './app-module.js';
 
 export class LoopModule extends AppModule {
-    constructor() {
-        super();
+    private intervals : number[];
+    constructor(output : any) {
+        super(output);
         this.intervals = [];
 
         this.addMethod('forever', '_forever');
@@ -12,7 +13,7 @@ export class LoopModule extends AppModule {
 
     static get id() { return 'loop'; }
 
-    _forever(callback) {
+    _forever(callback : Function) {
         // push the next tick to the end of the events queue
         const id = setInterval(callback, 10);
         this.intervals.push(id);

src/app/lib/app-modules/math.js → src/app/lib/app-modules/math.ts

@@ -1,15 +1,15 @@
 import { AppModule } from './app-module.js';
 
 export class MathModule extends AppModule {
-    constructor() {
-        super();
+    constructor(output : any) {
+        super(output);
 
         this.addMethod('random', '_random');
         this.addMethod('sign', '_sign');
         this.addMethod('lerp', '_lerp');
     }
     static get id() { return 'math'; }
-    _sign(x) {
+    _sign(x : number) {
         x = +x; // convert to a number
         if (x === 0 || Number.isNaN(x)) {
             return x;
@@ -18,7 +18,7 @@ export class MathModule extends AppModule {
     }
 
     /* This generator is inclusive the ranges [min, max] */
-    _random(min, max) {
+    _random(min : number, max : number) {
         const swap = +min;
         min = +min;
         max = +max;
@@ -32,7 +32,7 @@ export class MathModule extends AppModule {
     }
 
     /* This generator is inclusive the ranges [min, max] */
-    _lerp(from, to, percent) {
+    _lerp(from : number, to : number, percent : number) {
         const span = to - from;
         percent = Math.max(0, Math.min(percent, 100));
 

src/app/lib/editor/dialogs/base.js

@@ -3,7 +3,7 @@ import EventEmitter from '../../util/event-emitter.js';
 export class Base extends EventEmitter {
     constructor(opts = {}) {
         super();
-        this.fitInto = opts.fitInto || window;
+        this.fitInto = opts.fitInto || document.body;
         this.overlayInto = opts.overlayInto;
         this.root = this.createDom(opts);
     }
@@ -26,6 +26,9 @@ export class Base extends EventEmitter {
         if (!backdropElement) {
             return;
         }
+        if (!this.overlayInto) {
+            return;
+        }
         const rect = this.overlayInto.getBoundingClientRect();
         backdropElement.style.top = `${rect.top}px`;
         backdropElement.style.left = `${rect.left}px`;
@@ -42,15 +45,19 @@ export class Base extends EventEmitter {
         backdropElement.style.width = '';
         backdropElement.style.height = '';
     }
-    createDom(opts) { return null; }
+    createDom() {
+        return document.createElement('div');
+    }
     createButton(label) {
         const button = document.createElement('button');
         button.innerText = label;
         button.setAttribute('slot', 'actions');
         return button;
     }
     dispose() {
-        this.root.parentNode.removeChild(this.root);
+        if (this.root.parentNode) {
+            this.root.parentNode.removeChild(this.root);
+        }
     }
 }
 

src/app/lib/editor/plugin.ts

@@ -1,8 +1,10 @@
 /* eslint class-methods-use-this: "off" */
 import EventEmitter from '../util/event-emitter.js';
 
+export type PluginLifecycleStep = 'onInstall'|'onInject'|'onDispose'|'onImport'|'onCreationImport'|'onExport'|'onCreationExport';
+
 export class Plugin extends EventEmitter {
-    onInstall() {}
+    onInstall(editorOrOutput : any) {}
     onInject() {}
     onDispose() {}
     onImport() {}