brijeshb42/vscode-wrapper.html

## vscode-wrapper.html
<!DOCTYPE html>
<html>
<head>
  <title>VSCode</title>
  <style type="text/css">
    html {
      height: 100%;
      width: 100%;
    }
  </style>
</head>
<body class="monaco-shell">
  <script type="text/javascript" src="https://unpkg.com/browserfs@1.4.3/dist/browserfs.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
  <script type="text/javascript" src="./out/vs/loader.js"></script>
  <script type="text/javascript">
    window.global = {
      _performanceEntries: [],
    };

    function Database(path, cb) {
      this.path = path;
      this.idb = null;

      const dbOpenReq = indexedDB.open(path);
      dbOpenReq.onupgradeneeded = function() {
        const db = dbOpenReq.result;

        if (!db.objectStoreNames.contains(Database.ITEM_TABLE)) {
          db.createObjectStore(Database.ITEM_TABLE, { keyPath: 'key' });
        }
      };

      dbOpenReq.onsuccess = () => {
        this.idb = dbOpenReq.result;
        cb();
      };
    }

    Database.ITEM_TABLE = 'ItemTable';

    Database.prototype.close = function(){
      if (this.idb) {
        this.idb.close();
      }
    };
    Database.prototype.on = function(){
      console.log('dbon', arguments);
    };
    Database.prototype.exec = function(sql, cb){
      console.log('dbexec', arguments);
      // return Promise.resolve();
      cb();
    };

    Database.prototype.all = function(sql, cb) {
      const tx = this.idb.transaction(Database.ITEM_TABLE);
      const store = tx.objectStore(Database.ITEM_TABLE);
      const req = store.getAll();

      req.onerror = function(ev) {
        cb(ev);
      };

      req.onsuccess = function(ev) {
        let rows = ev.target.result;
        cb(null, rows);
      }
    };

    function Md5(str) {
      if (str) {
        this.hash = new CryptoJS.MD5(str);
      } else {
        this.hash = null;
      }
    }

    Md5.prototype.update = function(str) {
      if (!this.hash) {
        this.hash = CryptoJS.MD5(str);
        return this;
      }

      this.hash = this.hash.extend(str);
      return this;
    };

    Md5.prototype.digest = function(type) {
      return this.hash.toString();
    };

    function IpcMain() {
      this.worker = new Worker('./worker.js');
      this.listeners = {};
      this.once = {};

      this.worker.addEventListener('message', this.onWorkerMessage.bind(this));
    }

    IpcMain.prototype.on = function(channel, listener) {
      console.log('ipcmain:on', channel, listener);
      this.listeners[channel] = this.listeners[channel] || [];
      this.listeners[channel].push(listener);
    };

    IpcMain.prototype.once = function(channel, listener) {
      console.log('ipcmain:once', channel, listener);
      this.once[channel] = listener;
    };

    IpcMain.prototype.removeListener = function(channel, listener) {
      if (!this.listeners) {
        return;
      }

      console.log('ipcmain:removeListener', channel, listener);
      this.listeners[channel] = this.listeners[channel].filter(l => l !== listener);
    }

    IpcMain.prototype.removeAllListeners = function(channels) {
      console.log('ipcmain:removeAllListeners', channel, listener);
      channels.forEach((channel) => {
        this.listeners[channel] = [];
      });
    };

    IpcMain.prototype.onWorkerMessage = function(ev) {
      console.log(ev.data);
    };

    const ipcMain = new IpcMain();

    require.config({
      baseUrl: "",
      paths: {
        vs: 'http://localhost:8080/out/vs',
      },
    });

    BrowserFS.install(window);
    BrowserFS.configure({
      fs: 'IndexedDB',
      options: {
        storeName: 'browserFS',
      },
    }, (e) => {
      if (e) {
        return;
      }

      start();
    });

    define('os', function (){
      return {
        release() {
          return '18.2.0';
        },
        homedir() {
          return '/home';
        },
      };
    });

    define('crypto', function() {
      return {
        createHash(type) {
          if (type === 'md5') {
            return new Md5();
          }
          return uri;
        }
      };
    });

    define('vs/platform/node/product', function() {
      return {
        default: {
          dataFolderName: '.vscode-oss',
        },
      };
    });

    define('vs/platform/node/package', function() {
      return {
        default: {

        },
      };
    });

    define('vs/base/node/paths', function() {
      return {
        getAppDataPath() {
          return '/appdata';
        },
        getDefaultUserDataPath() {
          return '/user';
        },
      };
    });

    define('graceful-fs', function() {
      return {
        gracefulify() {}
      };
    });

    define('electron', function() {
      const listeners = {};
      const onetime = {};

      ipcMain.worker.addEventListener('message', function(ev) {
        console.log(ev.data);
        const [ channel, ...data ] = ev.data;

        if (onetime[channel]) {
          onetime[channel](channel, ...data);
          onetime[channel] = null;
          return;
        }

        if (listeners[channel]) {
          listeners[channel].forEach(l => l(channel, ...data));
        }
      });

      return {
        webFrame: {
          getZoomFactor() {
            return 1;
          },
          getZoomLevel() {
            return 0;
          },
        },

        ipcRenderer: {
          send(channel, ...args) {
            console.log('send', channel, args);
            ipcMain.worker.postMessage([channel, ...args]);
          },
          on(eventName, listener) {
            if (!listeners[eventName]) {
              listeners[eventName] = [];
            }

            listeners[eventName].push(listener);
          },
          once(eventName, listener) {
            onetime[eventName] = listener;
          },
          removeListener(eventName, listener) {
            if (!listeners[eventName]) {
              return;
            }

            listeners[eventName] = listeners[eventName].filter(l => l !== listener);
          }
        },
        ipcMain,
      };
    });

    define('vscode-sqlite3', function() {
      return {
        verbose() {},
        Database,
      };
    });

    function showPartsSplash(configuration) {
      let data;
      try {
        let raw = window.localStorage.getItem('storage://global/parts-splash-data');
        data = JSON.parse(raw);
      } catch (e) {
        // ignore
      }

      // high contrast mode has been turned on from the outside, e.g OS -> ignore stored colors and layouts
      if (data && configuration.highContrast && data.baseTheme !== 'hc-black') {
        data = undefined;
      }

      // developing an extension -> ignore stored layouts
      if (data && configuration.extensionDevelopmentPath) {
        data.layoutInfo = undefined;
      }

      // minimal color configuration (works with or without persisted data)
      const baseTheme = data ? data.baseTheme : configuration.highContrast ? 'hc-black' : 'vs-dark';
      const shellBackground = data ? data.colorInfo.editorBackground : configuration.highContrast ? '#000000' : '#1E1E1E';
      const shellForeground = data ? data.colorInfo.foreground : configuration.highContrast ? '#FFFFFF' : '#CCCCCC';
      const style = document.createElement('style');
      style.className = 'initialShellColors';
      document.head.appendChild(style);
      document.body.className = `monaco-shell ${baseTheme}`;
      style.innerHTML = `.monaco-shell { background-color: ${shellBackground}; color: ${shellForeground}; }`;


      if (data && data.layoutInfo) {
        // restore parts if possible (we might not always store layout info)
        const { id, layoutInfo, colorInfo } = data;
        const splash = document.createElement('div');
        splash.id = id;

        // ensure there is enough space
        layoutInfo.sideBarWidth = Math.min(layoutInfo.sideBarWidth, window.innerWidth - (layoutInfo.activityBarWidth + layoutInfo.editorPartMinWidth));

        if (configuration.folderUri || configuration.workspace) {
          // folder or workspace -> status bar color, sidebar
          splash.innerHTML = `
          <div style="position: absolute; width: 100%; left: 0; top: 0; height: ${layoutInfo.titleBarHeight}px; background-color: ${colorInfo.titleBarBackground}; -webkit-app-region: drag;"></div>
          <div style="position: absolute; height: calc(100% - ${layoutInfo.titleBarHeight}px); top: ${layoutInfo.titleBarHeight}px; ${layoutInfo.sideBarSide}: 0; width: ${layoutInfo.activityBarWidth}px; background-color: ${colorInfo.activityBarBackground};"></div>
          <div style="position: absolute; height: calc(100% - ${layoutInfo.titleBarHeight}px); top: ${layoutInfo.titleBarHeight}px; ${layoutInfo.sideBarSide}: ${layoutInfo.activityBarWidth}px; width: ${layoutInfo.sideBarWidth}px; background-color: ${colorInfo.sideBarBackground};"></div>
          <div style="position: absolute; width: 100%; bottom: 0; left: 0; height: ${layoutInfo.statusBarHeight}px; background-color: ${colorInfo.statusBarBackground};"></div>
          `;
        } else {
          // empty -> speical status bar color, no sidebar
          splash.innerHTML = `
          <div style="position: absolute; width: 100%; left: 0; top: 0; height: ${layoutInfo.titleBarHeight}px; background-color: ${colorInfo.titleBarBackground}; -webkit-app-region: drag;"></div>
          <div style="position: absolute; height: calc(100% - ${layoutInfo.titleBarHeight}px); top: ${layoutInfo.titleBarHeight}px; ${layoutInfo.sideBarSide}: 0; width: ${layoutInfo.activityBarWidth}px; background-color: ${colorInfo.activityBarBackground};"></div>
          <div style="position: absolute; width: 100%; bottom: 0; left: 0; height: ${layoutInfo.statusBarHeight}px; background-color: ${colorInfo.statusBarNoFolderBackground};"></div>
          `;
        }
        document.body.appendChild(splash);
      }
    }

    function start() {
      showPartsSplash({});
      define('process', () => window.process);
      define('fs', () => {
        const fs = BrowserFS.BFSRequire('fs');
        fs.watch = function() {
          return {
            on() {},
          };
        };
        return fs;
      });
      define('path', () => BrowserFS.BFSRequire('path'));
      [
        'yazl',
        // 'electron',
        'native-keymap',
        'iconv-lite',
        'child_process',
        'stream',
        'assert',
        'net',
        'string_decoder',
        'url',
        'zlib',
        'semver',
        'yauzl',
      ].forEach(name => {
        define(name, () => ({}));
      });

      require([
        'vs/workbench/browser/parts/editor/editorPart',
        'vs/workbench/services/configuration/node/configurationService',
        'vs/platform/storage/node/storageService',
        'vs/platform/environment/node/environmentService',
        'vs/platform/log/common/log',
      ], (ep, cs, storage, env, log) => {
        const config = {
          machineId: '1',
          windowId: 1,
          logLevel: log.LogLevel.Debug,
          mainPid: 1,
          appRoot: 'file:///',
          execPath: '',
          userEnv: {},
          nodeCachedDataDir: 'file:///node-cache',
          folderUri: {
            scheme: 'file',
            path: '/folder',
            fsPath: '/folder',
            external: '/external',
            $mid: 1,
          },
          perfEntries: [],
        };
        window.ep = ep;
        window.cs = cs;
        window.storage = storage;
        window.env = env;
        console.log('done');
        window.config = config;

        // main.startup(config);
//         const mainProcessClient = new ipc.Client(`window:${config.windowId}`);
//         const payload = {id: '1234'};
//         const es = new env.EnvironmentService(config, config.execPath);
//         const ls = new logS.createSpdLogService('window', config.logLevel, es.logsPath);
//         const ws = new configService.WorkspaceService(es);
//         const ss = new storage.StorageService({
//           disableGlobalStorage: true,
//           storeInMemory: false,
//         }, ls, es);
//         Promise.all([
//           ws.initialize(payload),
//           ss.initialize(payload),
//         ]).then(services => {
//           console.log(services);
//
//           const windowsChannel = mainProcessClient.getChannel('windows');
//           const servCol = new serviceCol.ServiceCollection();
//           servCol.set(windows.IWindowsService, new windowIpc.WindowsChannelClient(windowsChannel));
//
//           dom.domContentLoaded().then(() => {
//             const shel = new shell.WorkbenchShell(document.body, {
//               contextService: ws,
//               configurationService: ws,
//               environmentService: es,
//               logService: ls,
//               storageService: ss,
//             }, servCol, null, config);
//             window.shel = shel;
//           });
//         });
//         // console.log(ws.initialize({ id: '1234' }));
//         console.log(es, ws, ss, ls);
//         window.ss = ss;
//         window.ws = ws;
      });
    }
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>VSCode</title>
	<style type="text/css">
	html {
	height: 100%;
	width: 100%;
	}
	</style>
	</head>
	<body class="monaco-shell">
	<script type="text/javascript" src="https://unpkg.com/browserfs@1.4.3/dist/browserfs.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
	<script type="text/javascript" src="./out/vs/loader.js"></script>
	<script type="text/javascript">
	window.global = {
	_performanceEntries: [],
	};

	function Database(path, cb) {
	this.path = path;
	this.idb = null;

	const dbOpenReq = indexedDB.open(path);
	dbOpenReq.onupgradeneeded = function() {
	const db = dbOpenReq.result;

	if (!db.objectStoreNames.contains(Database.ITEM_TABLE)) {
	db.createObjectStore(Database.ITEM_TABLE, { keyPath: 'key' });
	}
	};

	dbOpenReq.onsuccess = () => {
	this.idb = dbOpenReq.result;
	cb();
	};
	}

	Database.ITEM_TABLE = 'ItemTable';

	Database.prototype.close = function(){
	if (this.idb) {
	this.idb.close();
	}
	};
	Database.prototype.on = function(){
	console.log('dbon', arguments);
	};
	Database.prototype.exec = function(sql, cb){
	console.log('dbexec', arguments);
	// return Promise.resolve();
	cb();
	};

	Database.prototype.all = function(sql, cb) {
	const tx = this.idb.transaction(Database.ITEM_TABLE);
	const store = tx.objectStore(Database.ITEM_TABLE);
	const req = store.getAll();

	req.onerror = function(ev) {
	cb(ev);
	};

	req.onsuccess = function(ev) {
	let rows = ev.target.result;
	cb(null, rows);
	}
	};

	function Md5(str) {
	if (str) {
	this.hash = new CryptoJS.MD5(str);
	} else {
	this.hash = null;
	}
	}

	Md5.prototype.update = function(str) {
	if (!this.hash) {
	this.hash = CryptoJS.MD5(str);
	return this;
	}

	this.hash = this.hash.extend(str);
	return this;
	};

	Md5.prototype.digest = function(type) {
	return this.hash.toString();
	};

	function IpcMain() {
	this.worker = new Worker('./worker.js');
	this.listeners = {};
	this.once = {};

	this.worker.addEventListener('message', this.onWorkerMessage.bind(this));
	}

	IpcMain.prototype.on = function(channel, listener) {
	console.log('ipcmain:on', channel, listener);
	this.listeners[channel] = this.listeners[channel] \|\| [];
	this.listeners[channel].push(listener);
	};

	IpcMain.prototype.once = function(channel, listener) {
	console.log('ipcmain:once', channel, listener);
	this.once[channel] = listener;
	};

	IpcMain.prototype.removeListener = function(channel, listener) {
	if (!this.listeners) {
	return;
	}

	console.log('ipcmain:removeListener', channel, listener);
	this.listeners[channel] = this.listeners[channel].filter(l => l !== listener);
	}

	IpcMain.prototype.removeAllListeners = function(channels) {
	console.log('ipcmain:removeAllListeners', channel, listener);
	channels.forEach((channel) => {
	this.listeners[channel] = [];
	});
	};

	IpcMain.prototype.onWorkerMessage = function(ev) {
	console.log(ev.data);
	};

	const ipcMain = new IpcMain();

	require.config({
	baseUrl: "",
	paths: {
	vs: 'http://localhost:8080/out/vs',
	},
	});

	BrowserFS.install(window);
	BrowserFS.configure({
	fs: 'IndexedDB',
	options: {
	storeName: 'browserFS',
	},
	}, (e) => {
	if (e) {
	return;
	}

	start();
	});

	define('os', function (){
	return {
	release() {
	return '18.2.0';
	},
	homedir() {
	return '/home';
	},
	};
	});

	define('crypto', function() {
	return {
	createHash(type) {
	if (type === 'md5') {
	return new Md5();
	}
	return uri;
	}
	};
	});

	define('vs/platform/node/product', function() {
	return {
	default: {
	dataFolderName: '.vscode-oss',
	},
	};
	});

	define('vs/platform/node/package', function() {
	return {
	default: {

	},
	};
	});

	define('vs/base/node/paths', function() {
	return {
	getAppDataPath() {
	return '/appdata';
	},
	getDefaultUserDataPath() {
	return '/user';
	},
	};
	});

	define('graceful-fs', function() {
	return {
	gracefulify() {}
	};
	});

	define('electron', function() {
	const listeners = {};
	const onetime = {};

	ipcMain.worker.addEventListener('message', function(ev) {
	console.log(ev.data);
	const [ channel, ...data ] = ev.data;

	if (onetime[channel]) {
	onetime[channel](channel, ...data);
	onetime[channel] = null;
	return;
	}

	if (listeners[channel]) {
	listeners[channel].forEach(l => l(channel, ...data));
	}
	});

	return {
	webFrame: {
	getZoomFactor() {
	return 1;
	},
	getZoomLevel() {
	return 0;
	},
	},

	ipcRenderer: {
	send(channel, ...args) {
	console.log('send', channel, args);
	ipcMain.worker.postMessage([channel, ...args]);
	},
	on(eventName, listener) {
	if (!listeners[eventName]) {
	listeners[eventName] = [];
	}

	listeners[eventName].push(listener);
	},
	once(eventName, listener) {
	onetime[eventName] = listener;
	},
	removeListener(eventName, listener) {
	if (!listeners[eventName]) {
	return;
	}

	listeners[eventName] = listeners[eventName].filter(l => l !== listener);
	}
	},
	ipcMain,
	};
	});

	define('vscode-sqlite3', function() {
	return {
	verbose() {},
	Database,
	};
	});

	function showPartsSplash(configuration) {
	let data;
	try {
	let raw = window.localStorage.getItem('storage://global/parts-splash-data');
	data = JSON.parse(raw);
	} catch (e) {
	// ignore
	}

	// high contrast mode has been turned on from the outside, e.g OS -> ignore stored colors and layouts
	if (data && configuration.highContrast && data.baseTheme !== 'hc-black') {
	data = undefined;
	}

	// developing an extension -> ignore stored layouts
	if (data && configuration.extensionDevelopmentPath) {
	data.layoutInfo = undefined;
	}

	// minimal color configuration (works with or without persisted data)
	const baseTheme = data ? data.baseTheme : configuration.highContrast ? 'hc-black' : 'vs-dark';
	const shellBackground = data ? data.colorInfo.editorBackground : configuration.highContrast ? '#000000' : '#1E1E1E';
	const shellForeground = data ? data.colorInfo.foreground : configuration.highContrast ? '#FFFFFF' : '#CCCCCC';
	const style = document.createElement('style');
	style.className = 'initialShellColors';
	document.head.appendChild(style);
	document.body.className = `monaco-shell ${baseTheme}`;
	style.innerHTML = `.monaco-shell { background-color: ${shellBackground}; color: ${shellForeground}; }`;


	if (data && data.layoutInfo) {
	// restore parts if possible (we might not always store layout info)
	const { id, layoutInfo, colorInfo } = data;
	const splash = document.createElement('div');
	splash.id = id;

	// ensure there is enough space
	layoutInfo.sideBarWidth = Math.min(layoutInfo.sideBarWidth, window.innerWidth - (layoutInfo.activityBarWidth + layoutInfo.editorPartMinWidth));

	if (configuration.folderUri \|\| configuration.workspace) {
	// folder or workspace -> status bar color, sidebar
	splash.innerHTML = `
	<div style="position: absolute; width: 100%; left: 0; top: 0; height: ${layoutInfo.titleBarHeight}px; background-color: ${colorInfo.titleBarBackground}; -webkit-app-region: drag;"></div>
	<div style="position: absolute; height: calc(100% - ${layoutInfo.titleBarHeight}px); top: ${layoutInfo.titleBarHeight}px; ${layoutInfo.sideBarSide}: 0; width: ${layoutInfo.activityBarWidth}px; background-color: ${colorInfo.activityBarBackground};"></div>
	<div style="position: absolute; height: calc(100% - ${layoutInfo.titleBarHeight}px); top: ${layoutInfo.titleBarHeight}px; ${layoutInfo.sideBarSide}: ${layoutInfo.activityBarWidth}px; width: ${layoutInfo.sideBarWidth}px; background-color: ${colorInfo.sideBarBackground};"></div>
	<div style="position: absolute; width: 100%; bottom: 0; left: 0; height: ${layoutInfo.statusBarHeight}px; background-color: ${colorInfo.statusBarBackground};"></div>
	`;
	} else {
	// empty -> speical status bar color, no sidebar
	splash.innerHTML = `
	<div style="position: absolute; width: 100%; left: 0; top: 0; height: ${layoutInfo.titleBarHeight}px; background-color: ${colorInfo.titleBarBackground}; -webkit-app-region: drag;"></div>
	<div style="position: absolute; height: calc(100% - ${layoutInfo.titleBarHeight}px); top: ${layoutInfo.titleBarHeight}px; ${layoutInfo.sideBarSide}: 0; width: ${layoutInfo.activityBarWidth}px; background-color: ${colorInfo.activityBarBackground};"></div>
	<div style="position: absolute; width: 100%; bottom: 0; left: 0; height: ${layoutInfo.statusBarHeight}px; background-color: ${colorInfo.statusBarNoFolderBackground};"></div>
	`;
	}
	document.body.appendChild(splash);
	}
	}

	function start() {
	showPartsSplash({});
	define('process', () => window.process);
	define('fs', () => {
	const fs = BrowserFS.BFSRequire('fs');
	fs.watch = function() {
	return {
	on() {},
	};
	};
	return fs;
	});
	define('path', () => BrowserFS.BFSRequire('path'));
	[
	'yazl',
	// 'electron',
	'native-keymap',
	'iconv-lite',
	'child_process',
	'stream',
	'assert',
	'net',
	'string_decoder',
	'url',
	'zlib',
	'semver',
	'yauzl',
	].forEach(name => {
	define(name, () => ({}));
	});

	require([
	'vs/workbench/browser/parts/editor/editorPart',
	'vs/workbench/services/configuration/node/configurationService',
	'vs/platform/storage/node/storageService',
	'vs/platform/environment/node/environmentService',
	'vs/platform/log/common/log',
	], (ep, cs, storage, env, log) => {
	const config = {
	machineId: '1',
	windowId: 1,
	logLevel: log.LogLevel.Debug,
	mainPid: 1,
	appRoot: 'file:///',
	execPath: '',
	userEnv: {},
	nodeCachedDataDir: 'file:///node-cache',
	folderUri: {
	scheme: 'file',
	path: '/folder',
	fsPath: '/folder',
	external: '/external',
	$mid: 1,
	},
	perfEntries: [],
	};
	window.ep = ep;
	window.cs = cs;
	window.storage = storage;
	window.env = env;
	console.log('done');
	window.config = config;

	// main.startup(config);
	// const mainProcessClient = new ipc.Client(`window:${config.windowId}`);
	// const payload = {id: '1234'};
	// const es = new env.EnvironmentService(config, config.execPath);
	// const ls = new logS.createSpdLogService('window', config.logLevel, es.logsPath);
	// const ws = new configService.WorkspaceService(es);
	// const ss = new storage.StorageService({
	// disableGlobalStorage: true,
	// storeInMemory: false,
	// }, ls, es);
	// Promise.all([
	// ws.initialize(payload),
	// ss.initialize(payload),
	// ]).then(services => {
	// console.log(services);
	//
	// const windowsChannel = mainProcessClient.getChannel('windows');
	// const servCol = new serviceCol.ServiceCollection();
	// servCol.set(windows.IWindowsService, new windowIpc.WindowsChannelClient(windowsChannel));
	//
	// dom.domContentLoaded().then(() => {
	// const shel = new shell.WorkbenchShell(document.body, {
	// contextService: ws,
	// configurationService: ws,
	// environmentService: es,
	// logService: ls,
	// storageService: ss,
	// }, servCol, null, config);
	// window.shel = shel;
	// });
	// });
	// // console.log(ws.initialize({ id: '1234' }));
	// console.log(es, ws, ss, ls);
	// window.ss = ss;
	// window.ws = ws;
	});
	}
	</script>
	</body>
	</html>