We Keep Coding

vscode extension development: Add user defined data to vscode extension when package

I'm new to javascript and vscode extension development.
I'm trying to write a vscode extension, doing execSync a python script.
The file structure:
src:
|-- extension.ts
|-- sidebar_test.ts
|-- test_py.py
the content of extension.js file:
import * as vscode from 'vscode';
import * as sidebar from './sidebar_test';
import * as cp from "child_process";
// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {
console.log('process cwd: ', process.cwd(), '. env: ', process.env);
console.log('extension path: ', context.extensionPath);
// The command has been defined in the package.json file
// Now provide the implementation of the command with registerCommand
// The commandId parameter must match the command field in package.json
let disposable = vscode.commands.registerCommand('dp2000-upgrade.DP2000Upgrade', function () {
vscode.window.showInputBox({
ignoreFocusOut: true,
placeHolder: 'IP Addr:Port',
}).then(function (input_str) {
let options = { env: {LD_LIBRARY_PATH: '/data/huangxiaofeng/work/tvm0.9dev0/build', PYTHONPATH: '/data/huangxiaofeng/work/tvm0.9dev0/python'} };
cp.execSync(`python ./test_py.py ${input_str}`, options); // TODO: call python script test_py.py
}).then(function (msg) {
console.log('User input:' + msg);
});
});
context.subscriptions.push(disposable);
}
// this method is called when your extension is deactivated
export function deactivate(): void {}
the content of test_py.py:
#! /usr/bin/python3.6
# -*- coding:utf-8 -*-
import tvm
import sys
import tvm.rpc
print('test_py.py will run...')
ip_addr, ip_port = sys.argv[1].split(':')
remote = tvm.rpc.connect(ip_addr, int(ip_port))
add_func = remote.get_function('rpc.test_add')
print(add_func(10, 20))
The content of package.json
{
"name": "dp2000-upgrade",
"displayName": "DP2000升级插件Demo",
"description": "vscode插件Demo, 借助TVM实现远程刷写 NNP main.hex",
"publisher": "intellif",
"version": "0.0.1",
"engines": {
"vscode": "^1.63.0"
},
"categories": [
"Other"
],
"activationEvents": [
"onCommand:dp2000-upgrade.DP2000Upgrade",
"onView:sidebar_test_id1"
],
"main": "./out/extension.js",
"contributes": {
"commands": [
{
"command": "dp2000-upgrade.DP2000Upgrade",
"title": "Upgrade DP2000"
}
]
},
"scripts": {
"vscode:prepublish": "npm run compile",
"compile": "tsc -p ./",
"watch": "tsc -watch -p ./",
"pretest": "npm run compile && npm run lint",
"lint": "eslint src --ext ts",
"package": "npm ci && rimraf *.vsix && vsce package && vsce ls"
},
"devDependencies": {
"#types/vscode": "^1.63.0",
"#types/glob": "^7.2.0",
"#types/mocha": "^9.0.0",
"#types/node": "14.x",
"#typescript-eslint/eslint-plugin": "^5.9.1",
"#typescript-eslint/parser": "^5.9.1",
"eslint": "^8.6.0",
"glob": "^7.2.0",
"mocha": "^9.1.3",
"typescript": "^4.5.4",
"#vscode/test-electron": "^2.0.3"
},
"repository": {
"type": "git",
"url": "https://gitee.com/vaughnHuang/vscode_ext_sidebar_test"
}
}
When package the project to .vsix, the test_py.py not included.
So my question is: how to include src/test_py.py into the .vsix?

Gulp task 'scripts' doesn't stop to running its task but other task working fine

Hi everbody I hope everyone is alright during this pandemic. I got 1 issue with my code my but my sass and autoprefixer are working fine only my scripts task wont stop whenever I save my main.js. I hope everyone can help me with this one. Thank You
const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();
const autoprefixer = require('gulp-autoprefixer');
gulp.task('sass', function () {
return gulp.src('./scss/**/*.scss')
.pipe(sass({
errLogToConsole: true,
outputStyle: 'expanded'
}))
.on('error', console.error.bind(console))
.pipe(autoprefixer(['last 99 versions'], {cascade: true }))
.pipe(gulp.dest('./css/'))
.pipe(browserSync.stream());
});
// I think my script task its the problem
gulp.task('scripts', function() {
return gulp.src('./js/*.js')
.pipe(gulp.dest('./js/'))
.pipe(browserSync.stream());
});
gulp.task('html', function () {
return gulp.src('./*.html')
.pipe(browserSync.stream());
});
gulp.task('browserSync', function(){
browserSync.init({
server : {
baseDir : './'
}
});
gulp.watch('./scss/**.scss', gulp.series('sass'));
gulp.watch('./*.html', gulp.series('html'));
gulp.watch('./js/*.js', gulp.series('scripts'));
});
gulp.task('default', gulp.series('sass', 'scripts', 'html', 'browserSync'));
My Basic Directory Tree:
|-css
|-img
|-js
|- main.js
package.json:
{
"name": "horita",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"browser-sync": "^2.26.7",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^6.1.0",
"gulp-sass": "^4.1.0"
}
}
On terminal you can see below that the task wont end it keeps on Finished and Starting.

Why does Gulp finish without transpiling my my ES6 code?

I have a folder containing some .js files, written in pre-ES2015 JavaScript, along with a corresponding gulpfile.js, to compile my code. Now, I'm trying to add babel so that I can start writing code in in ES6.
After installing the npm packages I thought I would need and then running gulp, it finishing compiling without any issues, but my ES6 code isn't transpiled (i.e., const doesn't become var, arrow functions still present in the compiled code).
What I've tried:
In gulpfile.js, I've tried a few different values for the presets option -- ['es2015'], ['babel-preset-es2015'], and ['babel-preset-env'].
But one of 2 things happens: 1. gulp finishes without errors, 2. the message Couldn't find preset "es2015" relative to directory... is returned.
Could this be a versioning issue? Or perhaps I haven't configured my babel-preset correctly?
(I've included below my package.json, as well as the relevant part of my gulpfile.js)
package.json:
{
"name": "SA",
"version": "2.0.0",
"description": "my SA code",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-eslint": "^7.2.3",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"del": "^2.2.2",
"eslint": "^3.19.0",
"gulp": "^4.0.2",
"gulp-babel": "^7.0.1",
"gulp-concat": "^2.6.1",
"gulp-jscs": "^4.1.0",
"gulp-jscs-stylish": "^1.4.0",
"gulp-jshint": "^2.1.0",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^3.0.2",
"jshint": "^2.9.5",
"jshint-stylish": "^2.2.1"
},
"main": "SA",
"dependencies": {
"#babel/preset-env": "^7.6.3",
"lodash": "^4.17.15"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"repository": {
"type": "git",
"url": "[github URL]"
},
"keywords": []
}
gulpfile.js (including relevant parts):
var babel = require('gulp-babel'),
concat = require('gulp-concat'),
del = require('del'),
gulp = require('gulp'),
jscs = require('gulp-jscs'),
jshint = require('gulp-jshint'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify');
function createBuildTask(destination) {
var sourceArray = [
destination + '/config/mobileCheck.js',
destination + '/config/account.js',
'common/api.js',
destination + '/config/utilityFunctions.js',
destination + '/config/runFirst.js',
destination + '/' + destination + '-main.js'
];
return function () {
return gulp.src(sourceArray, {'allowEmpty': true})
.pipe(concat(destination + '-built-main.js'))
.pipe(gulp.dest(destination + '/dist'))
.pipe(babel({
'presets': ['babel-preset-env']
}))
.pipe(uglify())
.pipe(rename({
'extname': '.min.js'
}))
.pipe(gulp.dest(destination + '/dist'));
};
}

Javascript File load other Javascript files With no window/document

I'm working with javascript file that has no window or document.
I have package.json file that calls another Javascript file task.js
package.json:
{
"name": "mytask",
"version": "1.0.0",
"description": "mytask TFS Build",
"main": "scripts/mytask.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"install": "npm install"
},
"repository": {},
"author": "OST",
"license": "ISC",
"dependencies": {
"https-proxy-agent": "1.0.0",
"jquery": "3.3.1",
"jsdom": "13.0.0",
"load-json-file": "^2.0.0",
"moment": "^2.22.2",
"object.values": "^1.0.4",
"request": "2.81.0",
"vso-node-api": "^5.1.2",
"vss-web-extension-sdk": "5.141.0",
"vsts-task-lib": "1.1.0"
}
}
TFS call javascript file exist in package.json "main" option.
package.json call mytask.js via "main" option and this javascript file will run as a task in TFS and print things to console.
Basically my issue that there's no HTML page or document so I cannot load javascript file through or document.addElement...
I need to load javascript file (VSS.SDK.js from vss-web-extension-sdk) to mytask.js.
I'm new in javascript so I don't really know what I'm doing wrong.
After long searching, I found "jsdom" which creates a global document. But still didn't know how to load VSS.SDK.js script.
mytask.js:
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { window } = new JSDOM(`<!DOCTYPE html>`);
var jQuery = require("jquery")(window);
// Option 1
jQuery.loadScript = function (url, callback) {
jQuery.ajax({
url: url,
dataType: 'script',
success: callback,
fail: callback,
async: false
});
}
jQuery.loadScript('vss-web-extension-sdk/lib/VSS.SDK.js', function(){console.log("loaded!!!!!!!!!!!!!!!!!!!!")});
// Option 2
jQuery.getScript('vss-web-extension-sdk/lib/VSS.SDK.js').done(function(){console.log("loaded!!!!!!!!!!!!!")}).fail(function(){console.log("failed!!!!!!!!!!!!!!")});
// Option 3
jQuery.getScript('vss-web-extension-sdk/lib/VSS.SDK.js', function() {
VSS.init({explicitNotifyLoaded: true, usePlatformScripts: true, usePlatformStyles: false});
var serverContext = VSS.getWebContext();
});
I tried these three options but it didn't work! nothing was printed.
I use VSS.SDK to load webContext.
any ideas?

Electron react build not launching

I'm having some issues while trying to glue together this two things.
Let me give you some context: I'm trying to build a desktop application based on a web application that I've developed in react and it's fully operative and the build process of react is done without any errors nor issues. The problem comes when I try to glue Electron + a React Built Project.
I'm having the following structure:
/ dist
/ node_modules
/ react-mobx-router
/ build
/ static
/ js
main.05ef4655.js
/ css
main.9d8efafe.css
index.html
index.js
At the index.js i have the following code that's basically the sample boilerplate code from electron demo app:
'use strict';
const electron = require('electron');
const app = electron.app;
// adds debug features like hotkeys for triggering dev tools and reload
require('electron-debug')();
// prevent window being garbage collected
let mainWindow;
function onClosed() {
// dereference the window
// for multiple windows store them in an array
mainWindow = null;
}
function createMainWindow() {
const win = new electron.BrowserWindow({
width: 1280,
height: 720,
minWidth: 1280,
minHeight: 720
});
win.loadURL(`file://${__dirname}/react-mobx-router/build/index.html`);
//win.loadURL(`http://localhost:3000`);
win.on('closed', onClosed);
return win;
}
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (!mainWindow) {
mainWindow = createMainWindow();
}
});
app.on('ready', () => {
mainWindow = createMainWindow();
});
I also have to manually change some paths at the react built index.html so it will look like:
<link href="./static/css/main.9d8efafe.css" rel="stylesheet">
instead of:
<link href="/static/css/main.9d8efafe.css" rel="stylesheet">
The second one get's the following errors:
file:///D:/static/css/main.9d8efafe.css Failed to load resource: net::ERR_FILE_NOT_FOUND
main.05ef4655.js Failed to load resource: net::ERR_FILE_NOT_FOUND
The point is that, when I launch the Electron app with yarn start (changing the paths I've told you previously) it launches without any error nor issue but only a blank screen, if I go to the files and look for them, they are correct and the code is inside, bundled and all that react-create-app stuff does.
This is the default configuration of the package.json that comes with Electron and I haven't modified:
{
"name": "app",
"productName": "App",
"version": "0.0.0",
"description": "",
"license": "MIT",
"repository": "user/repo",
"author": {
"name": "",
"email": "",
"url": ""
},
"scripts": {
"test": "xo",
"start": "electron .",
"build": "electron-packager . --out=dist --asar --overwrite --all"
},
"files": [
"index.js",
"index.html",
"index.css"
],
"keywords": [
"electron-app",
"electron"
],
"dependencies": {
"electron-debug": "^1.0.0"
},
"devDependencies": {
"devtron": "^1.1.0",
"electron-packager": "^8.0.0",
"electron": "^1.0.1",
"xo": "^0.16.0"
},
"xo": {
"esnext": true,
"envs": [
"node",
"browser"
]
}
}
Also this is the package.json of my React Project:
{
"name": "react-mobx",
"version": "0.1.0",
"private": true,
"devDependencies": {
"custom-react-scripts": "0.0.23",
"mobx-react-devtools": "^4.2.11"
},
"dependencies": {
"mobx": "^3.1.4",
"mobx-react": "^4.1.2",
"mobx-react-router": "latest",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-router": "latest"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Note that the React App is fully functional if I don't make use of Electron.
That's why I ask for your wisdom, mates. I need some light here so I can keep moving on with this project. Hope you can help me with this issue and I've provided you with enough information. If you need more info, just let me know.
Warm regards,
Alex.

I'm no React hero (by a long chalk) but I am able to run, hot reload and release build using the schema set out by this boilerplate: electron-es6-react. I added some conditional code to main.js (below) for builds. There are no doubt much better solutions.
You definitely need to merge your React package.json with Electron's.
var isDev = process.env.APP_DEV ? (process.env.APP_DEV.trim() == "true") : false;
if (isDev) {
// only add this during development
require('electron-reload')(__dirname, {
electron: path.join(__dirname, 'node_modules', '.bin', 'electron')
});
}
package.json
{
"name": "electron-es6-react",
"version": "0.1.0",
"description": "template",
"license": "MIT",
"production": false,
"version-string": {
"CompanyName": "Cool Co.",
"FileDescription": "template",
"OriginalFilename": "template",
"ProductName": "template",
"InternalName": "template"
},
"main": "main.js",
"scripts": {
"start": "APP_DEV=true electron -r babel-register .",
"package-mac": "electron-packager . --overwrite --tmpdir=false --platform=darwin --arch=x64 --prune=true --out=release-builds",
"package-win": "electron-packager . --overwrite --tmpdir=false --asar=true --platform=win32 --arch=ia32 --prune=true --out=release-builds"
},
"dependencies": {
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-register": "^6.3.13",
"fs-jetpack": "^0.12.0",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-images": "^0.5.2"
},
"devDependencies": {
"electron": "^1.4.3",
"electron-packager": "^8.5.2",
"electron-reload": "^1.1.0"
}
}