refactor: replace babel by typescript

js/package.json

@@ -23,21 +23,19 @@
   ],
   "browserslist": ">0.8%, not ie 11, not op_mini all, not dead",
   "scripts": {
-    "build:babel": "babel src --out-dir lib --copy-files",
-    "watch:babel": "babel src --watch --out-dir lib --copy-files --verbose",
-    "build:labextension": "jupyter labextension build .",
-    "watch:labextension": "jupyter labextension watch .",
+    "build": "yarn run build:lib && yarn run build:webpack && yarn run build:labextension",
+    "build:lib": "tsc",
     "build:webpack": "webpack",
+    "build:labextension": "jupyter labextension build .",
+    "watch:lib": "tsc -w",
     "watch:webpack": "webpack --mode development --watch",
+    "watch:labextension": "jupyter labextension watch .",
     "watch": "run-p watch:*",
     "clean": "rimraf lib/ dist/",
     "prepare": "run-s build:*",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.5.0",
-    "@babel/core": "^7.4.4",
-    "@babel/preset-env": "^7.4.4",
     "@jupyterlab/builder": "^3",
     "ajv": "^6.10.0",
     "css-loader": "^5",
@@ -49,6 +47,7 @@
     "npm-run-all": "^4.1.5",
     "rimraf": "^2.6.3",
     "style-loader": "^0.23.1",
+    "typescript": "^5.1.3",
     "webpack": "^5",
     "webpack-cli": "^4"
   },

js/src/VueTemplateRenderer.js → js/src/VueTemplateRenderer.ts

@@ -1,7 +1,7 @@
-import { WidgetModel } from '@jupyter-widgets/base';
+import { WidgetModel, WidgetView } from '@jupyter-widgets/base';
 import uuid4 from 'uuid/v4';
 import _ from 'lodash';
-import Vue from 'vue';
+import Vue, {VueConstructor} from 'vue';
 import { parseComponent } from '@mariobuikhuizen/vue-compiler-addon';
 import { createObjectForNestedModel, eventToObject, vueRender } from './VueRenderer'; // eslint-disable-line import/no-cycle
 import { VueModel } from './VueModel';
@@ -13,7 +13,27 @@ export function vueTemplateRender(createElement, model, parentView) {
     return createElement(createComponentObject(model, parentView));
 }
 
-function createComponentObject(model, parentView) {
+// TODO: this doesn't seem the right type
+interface ComponentObject extends VueConstructor<Vue> {
+    inject: string[];
+    data: () => any;
+    // lifecycle hooks
+    beforeCreate?(): void;
+    created?(): void;
+    beforeMount?(): void;
+    mounted?(): void;
+    beforeUpdate?(): void;
+    updated?(): void;
+    beforeDestroy?(): void;
+    destroyed?(): void;
+    watch: any;
+    methods: any;
+    components: any;
+    computed: any;
+    __onTemplateChange: () => void | null;
+}
+
+function createComponentObject(model : WidgetModel, parentView : WidgetView) : ComponentObject {
     if (model instanceof VueModel) {
         return {
             render(createElement) {
@@ -66,7 +86,7 @@ function createComponentObject(model, parentView) {
     const classComponents = componentEntries.filter(([, v]) => !(v instanceof WidgetModel) && !(typeof v === 'string'));
     const fullVueComponents = componentEntries.filter(([, v]) => typeof v === 'string');
 
-    function callVueFn(name, this_) {
+    function callVueFn(name : string, this_ : any) {
         if (vuefile.SCRIPT && vuefile.SCRIPT[name]) {
             vuefile.SCRIPT[name].bind(this_)();
         }
@@ -125,17 +145,18 @@ function createComponentObject(model, parentView) {
     };
 }
 
-function createDataMapping(model) {
+function createDataMapping(model : WidgetModel) {
     return model.keys()
         .filter(prop => !prop.startsWith('_')
             && !['events', 'template', 'components', 'layout', 'css', 'data', 'methods'].includes(prop))
         .reduce((result, prop) => {
+            //@ts-ignore
             result[prop] = _.cloneDeep(model.get(prop)); // eslint-disable-line no-param-reassign
             return result;
         }, {});
 }
 
-function addModelListeners(model, vueModel) {
+function addModelListeners(model : WidgetModel, vueModel : any) {
     model.keys()
         .filter(prop => !prop.startsWith('_')
             && !['v_model', 'components', 'layout', 'css', 'data', 'methods'].includes(prop))
@@ -162,14 +183,14 @@ function addModelListeners(model, vueModel) {
     });
 }
 
-function createWatches(model, parentView, templateWatchers) {
+function createWatches(model : WidgetModel, parentView : WidgetView, templateWatchers : any) {
     return model.keys()
         .filter(prop => !prop.startsWith('_')
             && !['events', 'template', 'components', 'layout', 'css', 'data', 'methods'].includes(prop))
         .reduce((result, prop) => ({
             ...result,
             [prop]: {
-                handler(value) {
+                handler(value : any) {
                     if (templateWatchers && templateWatchers[prop]) {
                         templateWatchers[prop].bind(this)(value);
                     }
@@ -186,10 +207,10 @@ function createWatches(model, parentView, templateWatchers) {
         }), {});
 }
 
-function createMethods(model, parentView) {
-    return model.get('events').reduce((result, event) => {
+function createMethods(model : WidgetModel, parentView : WidgetView) {
+    return model.get('events').reduce((result : any, event : any) => {
         // eslint-disable-next-line no-param-reassign
-        result[event] = (value, buffers) => {
+        result[event] = (value : any, buffers : any) => {
             if (buffers) {
                 const validBuffers = buffers instanceof Array &&
                     buffers[0] instanceof ArrayBuffer;
@@ -208,15 +229,15 @@ function createMethods(model, parentView) {
     }, {});
 }
 
-function createInstanceComponents(components, parentView) {
-    return components.reduce((result, [name, model]) => {
-        // eslint-disable-next-line no-param-reassign
+function createInstanceComponents(components : [string, WidgetModel][], parentView : WidgetView) {
+    return components.reduce((result : [string, any][], [name, model]) => {
+        //@ts-ignore
         result[name] = createComponentObject(model, parentView);
         return result;
-    }, {});
+    }, {} as [string, any][]);
 }
 
-function createClassComponents(components, containerModel, parentView) {
+function createClassComponents(components  : [string, string][], containerModel : WidgetModel, parentView : WidgetView) {
     return components.reduce((accumulator, [componentName, componentSpec]) => ({
         ...accumulator,
         [componentName]: ({
@@ -285,7 +306,7 @@ function createClassComponents(components, containerModel, parentView) {
     }), {});
 }
 
-function createFullVueComponents(components) {
+function createFullVueComponents(components : [string, string][]) {
     return components.reduce((accumulator, [componentName, vueFile]) => ({
         ...accumulator,
         [componentName]: httpVueLoader(vueFile),
@@ -295,22 +316,33 @@ function createFullVueComponents(components) {
 /* Returns a map with computed properties so that myProp_ref is available as myProp in the template
  * (only if myProp does not exist).
  */
-function aliasRefProps(model) {
+function aliasRefProps(model : WidgetModel) {
     return model.keys()
         .filter(key => key.endsWith('_ref'))
         .map(propRef => [propRef, propRef.substring(0, propRef.length - 4)])
         .filter(([, prop]) => !model.keys().includes(prop))
         .reduce((accumulator, [propRef, prop]) => ({
             ...accumulator,
             [prop]() {
+                //@ts-ignore
                 return this[propRef];
             },
         }), {});
 }
 
-function readVueFile(fileContent) {
+interface VueFileContent {
+    TEMPLATE?: string;
+    SCRIPT?: any;
+    STYLE?: {
+        content: string;
+        id: string;
+    };
+}
+
+function readVueFile(fileContent : string) {
+    console.log('readVueFile', fileContent)
     const component = parseComponent(fileContent, { pad: 'line' });
-    const result = {};
+    const result : VueFileContent = {};
 
     if (component.template) {
         result.TEMPLATE = component.template.content;
@@ -333,12 +365,19 @@ function readVueFile(fileContent) {
     return result;
 }
 
+declare module 'vue/types/vue' {
+    interface Vue {
+        viewCtx: any;
+        component: ComponentObject | null;
+    }
+}
+
 Vue.component('jupyter-widget', {
     props: ['widget'],
     inject: ['viewCtx'],
     data() {
         return {
-            component: null,
+            component:  null as ComponentObject | null,
         };
     },
     created() {
@@ -353,7 +392,7 @@ Vue.component('jupyter-widget', {
         update() {
             this.viewCtx
                 .getModelById(this.widget.substring(10))
-                .then((mdl) => {
+                .then((mdl : WidgetModel) => {
                     this.component = createComponentObject(mdl, this.viewCtx.getView());
                 });
         },

js/src/VueView.js → js/src/VueView.ts

@@ -2,9 +2,9 @@ import { DOMWidgetView } from '@jupyter-widgets/base';
 import Vue from 'vue';
 import { vueRender } from './VueRenderer';
 
-export function createViewContext(view) {
+export function createViewContext(view : VueView) {
     return {
-        getModelById(modelId) {
+        getModelById(modelId: string) {
             return view.model.widget_manager.get_model(modelId);
         },
         /* TODO: refactor to abstract the direct use of WidgetView away */
@@ -15,6 +15,7 @@ export function createViewContext(view) {
 }
 
 export class VueView extends DOMWidgetView {
+    vueApp: any;
     remove() {
         this.vueApp.$destroy();
         return super.remove();

js/src/VueWithCompiler.js → js/src/VueWithCompiler.ts

@@ -1,3 +1,4 @@
+//@ts-ignore
 import { addCompiler } from '@mariobuikhuizen/vue-compiler-addon';
 import Vue from 'vue';
 

js/src/httpVueLoader.js → js/src/httpVueLoader.ts

@@ -443,7 +443,7 @@ httpVueLoader.langProcessor = {
 
 httpVueLoader.scriptExportsHandler = identity;
 
-export default function httpVueLoader(componentString) {
+export default function httpVueLoader(componentString : string) {
 
     return httpVueLoader.load(componentString);
 }

js/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "outDir": "./lib",
+    "allowJs": true,
+    "target": "es6",
+    "rootDir": "src",
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    // "noEmitOnError": true,
+    "noUnusedLocals": true,
+    "sourceMap": true,
+    "strict": true,
+    "strictPropertyInitialization": false,
+  },
+  "include": ["./src/**/*"],
+  "exclude": [
+    "node_modules",
+    "**/*.spec.ts"
+  ]
+}

js/webpack.config.js

@@ -16,7 +16,8 @@ module.exports = [
         output: {
             filename: 'index.js',
             path: path.resolve(__dirname, '..', 'ipyvue', 'nbextension'),
-            libraryTarget: 'amd'
+            libraryTarget: 'amd',
+            devtoolModuleFilenameTemplate: `webpack://jupyter-widgets/jupyter-vue/[resource-path]?[loaders]`,
         },
         devtool: 'source-map',
         externals: ['@jupyter-widgets/base'],
@@ -31,7 +32,8 @@ module.exports = [
         output: {
             filename: 'nodeps.js',
             path: path.resolve(__dirname, '..', 'ipyvue', 'nbextension'),
-            libraryTarget: 'amd'
+            libraryTarget: 'amd',
+            devtoolModuleFilenameTemplate: `webpack://jupyter-widgets/jupyter-vue/[resource-path]?[loaders]`,
         },
         devtool: 'source-map',
         externals: ['@jupyter-widgets/base', 'vue'],
@@ -41,7 +43,7 @@ module.exports = [
             maxAssetSize: 1400000
         },
         resolve: {
-            alias: { './VueWithCompiler$': path.resolve(__dirname, 'src/nodepsVueWithCompiler.js') },
+            alias: { './VueWithCompiler$': path.resolve(__dirname, 'lib/nodepsVueWithCompiler.js') },
         },
     },
     {
@@ -50,7 +52,8 @@ module.exports = [
             filename: 'nodeps.js',
             path: path.resolve(__dirname, 'dist'),
             libraryTarget: 'amd',
-            publicPath: 'https://unpkg.com/jupyter-vue@' + version + '/dist/'
+            publicPath: 'https://unpkg.com/jupyter-vue@' + version + '/dist/',
+            devtoolModuleFilenameTemplate: `webpack://jupyter-widgets/jupyter-vue/[resource-path]?[loaders]`,
         },
         devtool: 'source-map',
         externals: ['@jupyter-widgets/base', 'vue'],
@@ -60,7 +63,7 @@ module.exports = [
             maxAssetSize: 1400000
         },
         resolve: {
-            alias: { './VueWithCompiler$': path.resolve(__dirname, 'src/nodepsVueWithCompiler.js') },
+            alias: { './VueWithCompiler$': path.resolve(__dirname, 'lib/nodepsVueWithCompiler.js') },
         },
     },
     {
@@ -69,7 +72,8 @@ module.exports = [
             filename: 'index.js',
             path: path.resolve(__dirname, 'dist'),
             libraryTarget: 'amd',
-            publicPath: 'https://unpkg.com/jupyter-vue@' + version + '/dist/'
+            publicPath: 'https://unpkg.com/jupyter-vue@' + version + '/dist/',
+            devtoolModuleFilenameTemplate: `webpack://jupyter-widgets/jupyter-vue/[resource-path]?[loaders]`,
         },
         devtool: 'source-map',
         externals: ['@jupyter-widgets/base'],