Merge pull request #24 from VulumeCode/master

CommonJS modules
ErnstHot · Jul 12, 2020 · 4f75eea · 4f75eea
2 parents 515f84f + c7abe11
commit 4f75eea
Show file tree

Hide file tree

Showing 16 changed files with 192 additions and 214 deletions.
diff --git a/ExampleJS/tsconfig.json b/ExampleJS/tsconfig.json
diff --git a/ExampleJSUI/tsconfig.json b/ExampleJSUI/tsconfig.json
diff --git a/JavaScript/ExampleJS.js b/JavaScript/ExampleJS.js
@@ -1,44 +1,8 @@
-var ExampleModule;
-(function (ExampleModule) {
-    // These two functions are painfully slow ;)
-    function colorFn(x) {
-        return [Math.sin(x) * 0.5 + 0.5,
-            Math.sin(x + 0.333 * Math.PI) * 0.5 + 0.5,
-            Math.sin(x + 0.666 * Math.PI) * 0.5 + 0.5,
-            1.0];
-    }
-    ExampleModule.colorFn = colorFn;
-    function pixelFn(x, y, t, prmA, prmB) {
-        var r = Math.sin(t + x * 2.0) + Math.cos(t + y * 2.0);
-        r += Math.sin(t + x * Math.sin(t + x * 0.02) * prmA) + Math.cos(t + y * (Math.cos(t * 0.7) * 5.0)) * prmB;
-        return colorFn(r + t);
-    }
-    ExampleModule.pixelFn = pixelFn;
-    function square(x) {
-        return x * x;
-    }
-    ExampleModule.square = square;
-    var TheClass = (function () {
-        function TheClass(index) {
-            this.index = index;
-            post("TheClass.constructor was called with the number parameter " + index + "\n");
-        }
-        TheClass.prototype.getIndex = function () {
-            return this.index;
-        };
-        TheClass.prototype.post = function () {
-            post("TheClass: post!");
-            post();
-        };
-        return TheClass;
-    }());
-    ExampleModule.TheClass = TheClass;
-})(ExampleModule || (ExampleModule = {}));
+"use strict";
+var em = require("./ExampleModule");
 inlets = 1;
 outlets = 1;
 autowatch = 1;
-// Only works if ExampleModule.ts is declared before ExampleJS.ts in tsconfig.json!
-var em = ExampleModule;
 function bang() {
     var theObject = new em.TheClass(42);
     post("theObject.getIndex(): " + theObject.getIndex() + "\n");
@@ -54,3 +18,6 @@ function msg_float(v) {
 function msg_int(v) {
     outlet(0, em.square(v));
 }
+// .ts files with this at the end become a script usable in a [js] or [jsui] object
+var module = {};
+module.exports = {};
diff --git a/ExampleJS/ExampleJS.maxpat → JavaScript/ExampleJS.maxpat b/ExampleJS/ExampleJS.maxpat → JavaScript/ExampleJS.maxpat
diff --git a/JavaScript/ExampleJSUI.js b/JavaScript/ExampleJSUI.js
@@ -1,55 +1,19 @@
-var ExampleModule;
-(function (ExampleModule) {
-    // These two functions are painfully slow ;)
-    function colorFn(x) {
-        return [Math.sin(x) * 0.5 + 0.5,
-            Math.sin(x + 0.333 * Math.PI) * 0.5 + 0.5,
-            Math.sin(x + 0.666 * Math.PI) * 0.5 + 0.5,
-            1.0];
-    }
-    ExampleModule.colorFn = colorFn;
-    function pixelFn(x, y, t, prmA, prmB) {
-        var r = Math.sin(t + x * 2.0) + Math.cos(t + y * 2.0);
-        r += Math.sin(t + x * Math.sin(t + x * 0.02) * prmA) + Math.cos(t + y * (Math.cos(t * 0.7) * 5.0)) * prmB;
-        return colorFn(r + t);
-    }
-    ExampleModule.pixelFn = pixelFn;
-    function square(x) {
-        return x * x;
-    }
-    ExampleModule.square = square;
-    var TheClass = (function () {
-        function TheClass(index) {
-            this.index = index;
-            post("TheClass.constructor was called with the number parameter " + index + "\n");
-        }
-        TheClass.prototype.getIndex = function () {
-            return this.index;
-        };
-        TheClass.prototype.post = function () {
-            post("TheClass: post!");
-            post();
-        };
-        return TheClass;
-    }());
-    ExampleModule.TheClass = TheClass;
-})(ExampleModule || (ExampleModule = {}));
+"use strict";
+var em = require("./ExampleModule");
 inlets = 1;
 outlets = 1;
 autowatch = 1;
 var m = mgraphics;
 m.init();
 m.relative_coords = 0;
 m.autofill = 0;
-// Only works if ExampleModule.ts is declared before ExampleJS.ts in tsconfig.json!
-var em = ExampleModule;
 var t = 0;
 var a = 10.0;
 var b = 2.0;
 var div = 8;
 function paint() {
-    var width = box.rect[2] - this.box.rect[0];
-    var height = this.box.rect[3] - this.box.rect[1];
+    var width = box.rect[2] - box.rect[0];
+    var height = box.rect[3] - box.rect[1];
     m.set_source_rgba(0.0, 0.0, 0.0, 1.0);
     m.rectangle(0, 0, width, height);
     m.fill();
@@ -78,3 +42,6 @@ function setRes(v) {
     div = Math.floor(v);
     m.redraw();
 }
+// .ts files with this at the end become a script usable in a [js] or [jsui] object
+var module = {};
+module.exports = {};
diff --git a/ExampleJSUI/ExampleJSUI.maxpat → JavaScript/ExampleJSUI.maxpat b/ExampleJSUI/ExampleJSUI.maxpat → JavaScript/ExampleJSUI.maxpat
diff --git a/JavaScript/ExampleModule.js b/JavaScript/ExampleModule.js
@@ -0,0 +1,36 @@
+"use strict";
+exports.__esModule = true;
+exports.TheClass = exports.square = exports.pixelFn = exports.colorFn = void 0;
+// These two functions are painfully slow ;)
+function colorFn(x) {
+    return [Math.sin(x) * 0.5 + 0.5,
+        Math.sin(x + 0.333 * Math.PI) * 0.5 + 0.5,
+        Math.sin(x + 0.666 * Math.PI) * 0.5 + 0.5,
+        1.0];
+}
+exports.colorFn = colorFn;
+function pixelFn(x, y, t, prmA, prmB) {
+    var r = Math.sin(t + x * 2.0) + Math.cos(t + y * 2.0);
+    r += Math.sin(t + x * Math.sin(t + x * 0.02) * prmA) + Math.cos(t + y * (Math.cos(t * 0.7) * 5.0)) * prmB;
+    return colorFn(r + t);
+}
+exports.pixelFn = pixelFn;
+function square(x) {
+    return x * x;
+}
+exports.square = square;
+var TheClass = /** @class */ (function () {
+    function TheClass(index) {
+        this.index = index;
+        post("TheClass.constructor was called with the number parameter " + index + "\n");
+    }
+    TheClass.prototype.getIndex = function () {
+        return this.index;
+    };
+    TheClass.prototype.post = function () {
+        post("TheClass: post!");
+        post();
+    };
+    return TheClass;
+}());
+exports.TheClass = TheClass;
diff --git a/Modules/ExampleModule.ts b/Modules/ExampleModule.ts
diff --git a/README.md b/README.md
@@ -1,48 +1,62 @@
-***TypeScript for Cycling '74 Max / MSP / Jitter***
+TypeScript for Cycling '74 Max / MSP / Jitter
+===
+
+Compile TypeScript into JavaScript for use in Max. Examples show how to use modules and output a separate .js file for each .ts file.
 
-Compile TypeScript into JavaScript for use in Max. Examples show how to use modules and concatenate everything into a single JavaScript file.
 Still has plenty of TODO's in the definition files, but the grunt work of writing the definitions has been done and it is useable. Expect minor bugs and missing definitions.
 
-Follow this guide to set up Sublime Text and TypeScript:
-https://cmatskas.com/getting-started-with-typescript-and-sublime-text/
+[VS Code](https://code.visualstudio.com/) is the recommended TypeScript IDE.
 
+Follow [this guide](https://cmatskas.com/getting-started-with-typescript-and-sublime-text/) to set up Sublime Text.
 
-**Now with documentation!**
 
-The Max JS documentation has been included as JSDoc, with the permission of Cycling '74.
+Now with documentation!
+---
 
+The Max JS documentation has been included as JSDoc, with the permission of Cycling '74.
 
-**Included in this archive**
 
-    /Definitions
-        cycling74-max7.d.ts         Definition file for JavaScript in Max
-        cycling74-max7-jsui.d.ts    Definition file for JSUI, MGraphics, Sketch, etc.
-        cycling74-max7-jitter.d.ts 	Definition file for using Jitter objects 
+Included in this archive
+---
 
-    /Modules
+    /TypeScript
+        tsconfig.json               TypeScript configuration file 
+        ExampleJS.ts                Example [js] code
+        ExampleJSUI.ts              Example [jsui] code
         ExampleModule.ts            An example module used by both examples
+        /types
+            cycling74-max7.d.ts         Definition file for JavaScript in Max
+            cycling74-max7-jsui.d.ts    Definition file for JSUI, MGraphics, Sketch, etc.
+            cycling74-max7-jitter.d.ts 	Definition file for using Jitter objects 
 
-    /ExampleJS
+    /JavaScript
+        ExampleJS.js                JavaScript code generated from ExampleJS.ts
+        ExampleJSUI.js              JavaScript code generated from ExampleJSUI.ts
+        ExampleModule.js            JavaScript code generated from ExampleModule.ts
         ExampleJS.maxpat            Example patcher 
-        ExampleJS.ts                Example [js] code
-        tsconfig.json               TypeScript configuration file 
-
-    /ExampleJSUI
         ExampleJSUI.maxpat          Example patcher
-        ExampleJSUI.ts              Example [jsui] code
-        tsconfig.json               TypeScript configuration file
 
-    /JavaScript
-        ExampleJS.js                JavaScript code generated from ExampleJS.js and ExampleModule.ts
-        ExampleJS.js                JavaScript code generated from ExampleJSUI.js and ExampleModule.ts
 
-The TypeScript configuration files (tsconfig.json) are set up to merge each example into one JavaScript output file, this is the only way I have been able to get modules to work so far. Make sure compiled JavaScript files are in Max' search path.
+Notes
+---
+
+ * The TypeScript configuration file (`tsconfig.json`) is set up to output a separate .js file for each .ts file. 
+
+ * .ts files for scripts to be used in a [js] or [jsui] object must end in:
+
+       let module = {};
+       export = {};
+
+   This tricks tsc in outputting it as a separate module file, while still allowing Max to read it as a script. Do not do this in module files. 
+
+ * Make sure the compiled JavaScript files are in Max' search path, set this with `"outDir"` in your `tsconfig.json`. Make sure your TypeScript folder is not in a Max project directory or Max will mess up the file structure. 
 
-For more information on configuration files, look here:
-https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
+ * For continuous development run `tsc --watch` in the directory with your `tsconfig.json`. The .js files are then generated on save and Max will then reload automatically.
 
+ * For more information on configuration files, look [here](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html). 
 
-**Assigning properties to objects of type Global**
+Assigning properties to objects of type Global
+---
 
 Cast to ```<any>``` to assign properties to objects of type ```Global``` like so:
 ```

diff --git a/ExampleJS/ExampleJS.ts → TypeScript/ExampleJS.ts b/ExampleJS/ExampleJS.ts → TypeScript/ExampleJS.ts
@@ -1,10 +1,9 @@
+import * as em from './ExampleModule'
+
 inlets = 1;
 outlets = 1;
 autowatch = 1;
 
-// Only works if ExampleModule.ts is declared before ExampleJS.ts in tsconfig.json!
-let em = ExampleModule;
-
 function bang() {
 	let theObject = new em.TheClass(42);
 	post("theObject.getIndex(): " + theObject.getIndex() + "\n");
@@ -17,12 +16,16 @@ function bang() {
 	post("(<any>g).newProperty: " + (<any>g).newProperty + "\n");
 }
 
-function msg_float(v)
+function msg_float(v: number)
 {
 	outlet(0, em.square(v));
 }
 
-function msg_int(v)
+function msg_int(v: number)
 {
 	outlet(0, em.square(v));
-}
+}
+
+// .ts files with this at the end become a script usable in a [js] or [jsui] object
+let module = {};
+export = {};
diff --git a/ExampleJSUI/ExampleJSUI.ts → TypeScript/ExampleJSUI.ts b/ExampleJSUI/ExampleJSUI.ts → TypeScript/ExampleJSUI.ts
@@ -1,3 +1,5 @@
+import * as em from './ExampleModule'
+
 inlets = 1;
 outlets = 1;
 autowatch = 1;
@@ -7,8 +9,6 @@ m.init();
 m.relative_coords = 0;
 m.autofill = 0;
 
-// Only works if ExampleModule.ts is declared before ExampleJS.ts in tsconfig.json!
-var em = ExampleModule;
 
 var t = 0;
 var a = 10.0;
@@ -38,17 +38,21 @@ function bang() {
 	m.redraw();
 }
 
-function setA(v){
+function setA(v: number){
 	a = v;
 	m.redraw();
 }
 
-function setB(v){
+function setB(v: number){
 	b = v;
 	m.redraw();
 }
 
-function setRes(v){
+function setRes(v: number){
 	div = Math.floor(v);
 	m.redraw();
-}
+}
+
+// .ts files with this at the end become a script usable in a [js] or [jsui] object
+let module = {};
+export = {};