almost there

gulpfile.js

@@ -6,6 +6,8 @@ var source = require('vinyl-source-stream');
 var tsify = require('tsify');
 var sourcemaps = require('gulp-sourcemaps');
 var buffer = require('vinyl-buffer');
+// glob
+var glob = require('glob');
 // tsd
 var tsd = require('gulp-tsd');
 // hbs
@@ -213,6 +215,24 @@ gulp.task('start', function () {
   gulp.task('watchwdgt', ['wdgt'], function () {
     gulp.watch(paths.wdgt, ['wdgt']);
   });
+  gulp.task('wdgt_ts', function() {
+    var files = glob.sync('src/widgets/**/*.ts');
+    return browserify({
+      basedir: '.',
+      debug: true,
+      entries: files,
+      cache: {},
+      packageCache: {}
+    })
+    .plugin(tsify)
+    .transform("babelify")
+    .bundle()
+    .pipe(source('main.js'))
+    .pipe(buffer())
+    .pipe(sourcemaps.init({ loadMaps: true }))
+    .pipe(sourcemaps.write('./'))
+    .pipe(gulp.dest('src/widgets/**/'));
+  });
 }
 
 // for gh-pages

package.json

@@ -11,6 +11,7 @@
   "devDependencies": {
     "babelify": "^7.3.0",
     "browserify": "^13.0.1",
+    "glob": "^7.1.1",
     "gulp": "^3.9.1",
     "gulp-concat": "^2.6.0",
     "gulp-declare": "^0.3.0",

src/ts/interface/widget.ts

@@ -0,0 +1,11 @@
+export interface WidgetInterface {
+
+  widgetInstanceId:number;
+  selector:string;
+
+  clbkCreated():void;
+  clbkResized():void;
+  clbkMoved():void;
+  clbkTab():void;
+
+}

src/widgets/topic_publisher/index.hbs

@@ -0,0 +1,18 @@
+<div class="ros-widget" data-widget-name="topic-publisher" data-min-height="34" data-min-width="66" data-max-height="1200"
+	data-max-width="1600" data-height="300" data-width="400">
+
+	<!--  META Tags to describe topics subscription -->
+	<meta data-ros-topic="1" data-ros-topic-id="1" data-ros-topic-desc="Topic to publish" data-ros-topic-type="" data-ros-topic-chng="onChange"
+		data-ros-topic-slctd="" />
+	<meta data-wdgt-param="1" data-widget-param-id="1" data-widget-param-desc="Array show limit" data-widget-param-var="arrayShowLimit"
+		data-widget-param-value="10" />
+	<meta data-wdgt-param="1" data-widget-param-id="2" data-widget-param-desc="Value show limit" data-widget-param-var="valueShowLimit"
+		data-widget-param-value="50" />
+
+	<!-- The content which could be manipulated by widget class -->
+	<div class="header">
+		<p class="name">-- topic name --</p>
+		<p class="type">-- topic type --</p>
+	</div>
+	<div class="datatopic1"></div>
+</div>

src/widgets/topic_publisher/main.ts

@@ -0,0 +1,30 @@
+import { WidgetInterface } from '../../ts/interface/widget';
+
+class WidgetTopicPublisher implements WidgetInterface {
+  public widgetInstanceId: number;
+  public selector: string;
+
+  public clbkCreated(): void {
+    console.log("olá");
+    // throw new Error('Not implemented yet.');
+  }
+
+  public clbkResized(): void {
+    // throw new Error('Not implemented yet.');
+  }
+
+  public clbkMoved(): void {
+    // throw new Error('Not implemented yet.');
+  }
+
+  public clbkTab(): void {
+    // throw new Error('Not implemented yet.');
+  }
+
+  // selector callbacks
+  public onChange(): void {
+
+  }
+}
+
+window["WidgetTopicPublisher"] = WidgetTopicPublisher;