basic type script support

SQUASHED: AUTO-COMMIT-demos-typescript-a.js,AUTO-COMMIT-demos-typescript-a.md,AUTO-COMMIT-demos-typescript-a.ts,AUTO-COMMIT-demos-typescript-app.ts,AUTO-COMMIT-demos-typescript-b.js,AUTO-COMMIT-demos-typescript-c.ts,AUTO-COMMIT-src-components-tools-lively-container.js,AUTO-COMMIT-src-components-widgets-lively-code-mirror.js,AUTO-COMMIT-src-external-babel-plugin-var-recorder.js,AUTO-COMMIT-src-plugin-babel.js,AUTO-COMMIT-src-systemjs-config.js,

demos/typescript/a.js

@@ -0,0 +1,6 @@
+
+
+ function foo() {
+
+  return "hello"
+}

demos/typescript/a.md

@@ -0,0 +1,10 @@
+
+<script>
+
+
+import foo from "./a.ts"
+
+
+foo()
+
+</script>

demos/typescript/a.ts

@@ -0,0 +1,5 @@
+console.log("LOAD a.ts")
+
+function foo() { 
+  return "hello"
+}

demos/typescript/b.js

@@ -0,0 +1,6 @@
+import * as a from "./a.ts"
+
+export default function foo() {
+
+  return a.foo()
+}

demos/typescript/c.ts

@@ -0,0 +1,5 @@
+lively.notify("LOAD c.ts")
+
+export default function foo(s : string) : string { 
+  return "hello " + s
+}

src/components/tools/lively-container.js

@@ -770,7 +770,7 @@ export default class Container extends Morph {
 
     // #TODO #babel6refactoring
     if (lively.modules) {
-      if (urlString.match(/\.js$/)) {
+      if (urlString.match(/\.((js)|(ts))$/)) {
         var m = lively.modules.module(urlString);
       }
     }
@@ -1205,7 +1205,7 @@ export default class Container extends Morph {
         lively.error("custom elements require a hyphen in their name!") // see https://html.spec.whatwg.org/multipage/custom-elements.html#prod-potentialcustomelementname
       }
       this.openTemplateInstance(url);
-    } else if (url.match(/\.js$/)) {
+    } else if (url.match(/\.((js)|(ts))$/)) {
       this.reloadModule(url);
     } else {
       lively.openBrowser(url);
@@ -1460,11 +1460,11 @@ export default class Container extends Morph {
       }
       this.updateOtherContainers();
 
-      var moduleName = this.getURL().pathname.match(/([^/]+)\.js$/);
+      var moduleName = this.getURL().pathname.match(/([^/]+)\.((js)|(ts))$/);
       if (moduleName) {
         moduleName = moduleName[1];
 
-        const testRegexp = /((test\/.*)|([.-]test)|([.-]spec))\.js/;
+        const testRegexp = /((test\/.*)|([.-]test)|([.-]spec))\.((js)|(ts))/;
         if (this.lastLoadingFailed) {
           console.log("last loading failed... reload")
           await this.reloadModule(url); // use our own mechanism...
@@ -1529,7 +1529,7 @@ export default class Container extends Morph {
 
 
   async onTextChanged() {
-    if (!this.getURL().pathname.match(/\.js$/)) {
+    if (!this.getURL().pathname.match(/\.((js)|(ts))$/)) {
       return
     }
   }
@@ -2076,7 +2076,7 @@ export default class Container extends Morph {
 
     if (codeMirror) {
       const cmURL = "" + url;
-      if (cmURL.match(/\.((js)|(py))$/)) {
+      if (cmURL.match(/\.((js)|(ts)|(py))$/)) {
         codeMirror.setTargetModule("" + url); // for editing
       }
 

src/components/widgets/lively-code-mirror.js

@@ -1106,6 +1106,8 @@ export default class LivelyCodeMirror extends HTMLElement {
       mode = "text/jsx";
     } else if (filename.match(/\.mjs$/)) {
       mode = "text/jsx";
+    } else if (filename.match(/\.ts$/)) {
+      mode = "text/typescript";
     } else if (filename.match(/\.py$/)) {
       mode = "text/x-python";
     } else if (filename.match(/\.c$/)) {

src/external/babel-plugin-var-recorder.js

@@ -1,7 +1,7 @@
 const moduleNameToVarRecorderName = new Map();
 
 export function getScopeIdForModule(moduleName) {
-  console.log("[babel-plugin-var-recorder] getScopeIdForModule", moduleName);
+  // console.log("[babel-plugin-var-recorder] getScopeIdForModule", moduleName);
   if (!moduleNameToVarRecorderName.has(moduleName)) {
     var scopeId = (moduleName || "undefined").replace(lively4url, "").replace(/[^a-zA-Z0-9]/g, "_")
     moduleNameToVarRecorderName.set(moduleName, scopeId);

src/plugin-babel.js

@@ -672,8 +672,14 @@ async function transformSource(load, babelOptions, config) {
   var stage3Syntax = []
 
   // console.log(`transformSource ${config.filename} ${babelOptions.babel7level}`)
-
-  if (babelOptions.babel7level == "moduleOptionsNon") {
+  if (babelOptions.babel7level == "liveTS") {
+    allPlugins.push(...await basePlugins())
+    allPlugins.push(babel7.babelPluginTransformTypeScript)
+    allPlugins.push(babel7.babelPluginProposalDynamicImport)
+    allPlugins.push([babel7.babelPluginTransformModulesSystemJS, {
+      allowTopLevelThis: true
+    }])
+  } else if (babelOptions.babel7level == "moduleOptionsNon") {
     allPlugins.push(babel7.babelPluginProposalDynamicImport)
     allPlugins.push([babel7.babelPluginTransformModulesSystemJS, {
       allowTopLevelThis: true

src/systemjs-config.js

@@ -507,6 +507,15 @@ const liveES7 = {
   }
 };
 
+const liveTS = {
+  babelOptions: {
+    plugins: [],
+    babel7: true,
+    babel7level: "liveTS"
+  }
+};
+
+
 const babel7base = {
   babelOptions: {
     babel7: true,
@@ -526,6 +535,7 @@ System.config({
   meta: {
     '*.js': liveES7,    
     '*.mjs': liveES7,
+    '*.ts': liveTS,
     'https://unpkg.com/*.js': moduleOptionsNon,
     /* FILE-BASED */
     /* plugins are not transpiled with other plugins, except for SystemJS-internal plugins */