Remove document.write usage from vanilla template (codesandbox#1697)

* Remove document.write usage

* Move transpilers to typescript

* Fix jest test

Author: CompuIves

packages/app/src/sandbox/eval/presets/index.test.js

@@ -1,6 +1,6 @@
 import Preset from './index.ts';
 
-import Transpiler from '../transpilers';
+import Transpiler from '../transpilers/index.ts';
 
 function createDummyTranspiler(name: string) {
   const Klass = class Trans extends Transpiler {

packages/app/src/sandbox/eval/presets/parcel/index.js

@@ -37,7 +37,6 @@ export default function initialize() {
     ],
     {},
     {
-      htmlDisabled: true,
       setup: manager => {
         const packageJSON = manager.configurations.package;
 

packages/app/src/sandbox/eval/presets/parcel/transpilers/html-worker.js

@@ -1,5 +1,4 @@
 import parse from 'posthtml-parser';
-import render from 'posthtml-render';
 import api from 'posthtml/lib/api';
 
 import isUrl from './is-url';
@@ -154,17 +153,7 @@ self.addEventListener('message', async event => {
     return node;
   });
 
-  const newHTML = render(res);
-
-  let compiledCode = `
-function setupHTML() {
-  const HTML = ${JSON.stringify(newHTML)}
-  document.open('text/html');
-  document.write(HTML);
-  document.close();
-}
-setupHTML();
-`;
+  let compiledCode = ``;
 
   compiledCode += '\n';
   compiledCode += 'function loadResources() {';

packages/app/src/sandbox/eval/transpiled-module.ts

@@ -1,4 +1,3 @@
-
 import { flattenDeep } from 'lodash-es';
 
 import { actions, dispatch } from 'codesandbox-api';
@@ -84,6 +83,7 @@ export type LoaderContext = {
   emitFile: (name: string, content: string, sourceMap: SourceMap) => void;
   options: {
     context: string;
+    config?: object;
     [key: string]: any;
   };
   webpack: boolean;
@@ -95,6 +95,7 @@ export type LoaderContext = {
     depPath: string,
     options?: {
       isAbsolute?: boolean;
+      isEntry?: boolean;
     }
   ) => void;
   resolveTranspiledModule: (

…l/transpilers/angular2-template/index.js …l/transpilers/angular2-template/index.tspackages/app/src/sandbox/eval/transpilers/angular2-template/index.js renamed to packages/app/src/sandbox/eval/transpilers/angular2-template/index.ts packages/app/src/sandbox/eval/transpilers/angular2-template/index.js renamed to packages/app/src/sandbox/eval/transpilers/angular2-template/index.ts

@@ -1,6 +1,6 @@
 // @flow
 import Transpiler from '../';
-import { type LoaderContext } from '../../transpiled-module';
+import { LoaderContext } from '../../transpiled-module';
 
 // using: regex, capture groups, and capture group variables.
 const templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*([,}]))/gm;

packages/app/src/sandbox/eval/transpilers/babel/babel-parser.js

@@ -30,7 +30,7 @@ const DEFAULT_BABEL_CONFIG = {
  * Parses the .babelrc if it exists, if it doesn't it will return a default config
  */
 export default function getBabelConfig(
-  config: ?Object,
+  config: Object | undefined,
   loaderOptions: Object,
   path: string,
   isV7: boolean = false

…/sandbox/eval/transpilers/babel/index.js …/sandbox/eval/transpilers/babel/index.tspackages/app/src/sandbox/eval/transpilers/babel/index.js renamed to packages/app/src/sandbox/eval/transpilers/babel/index.ts packages/app/src/sandbox/eval/transpilers/babel/index.js renamed to packages/app/src/sandbox/eval/transpilers/babel/index.ts

@@ -1,16 +1,19 @@
 // @flow
+// @ts-ignore
 import BabelWorker from 'worker-loader?publicPath=/&name=babel-transpiler.[hash:8].worker.js!./worker/index.js';
 import { isBabel7 } from '@codesandbox/common/lib/utils/is-babel-7';
 
 import regexGetRequireStatements from './worker/simple-get-require-statements';
 import getBabelConfig from './babel-parser';
 import WorkerTranspiler from '../worker-transpiler';
-import { type LoaderContext } from '../../transpiled-module';
-import type { default as Manager } from '../../manager';
+import { LoaderContext } from '../../transpiled-module';
+import Manager from '../../manager';
 
 import delay from '../../../utils/delay';
 import { shouldTranspile } from './check';
 
+const global = window as any;
+
 // Right now this is in a worker, but when we're going to allow custom plugins
 // we need to move this out of the worker again, because the config needs
 // to support custom plugins
@@ -24,16 +27,16 @@ class BabelTranspiler extends WorkerTranspiler {
   startupWorkersInitialized = false;
 
   async getWorker() {
-    while (typeof window.babelworkers === 'undefined') {
+    while (typeof global.babelworkers === 'undefined') {
       await delay(50); // eslint-disable-line
     }
 
-    if (window.babelworkers.length === 0) {
+    if (global.babelworkers.length === 0) {
       return super.getWorker();
     }
 
     // We set these up in startup.js.
-    return window.babelworkers.pop();
+    return global.babelworkers.pop();
   }
 
   doTranspilation(
@@ -92,7 +95,7 @@ class BabelTranspiler extends WorkerTranspiler {
       );
 
       const babelConfig = getBabelConfig(
-        foundConfig || loaderOptions.config,
+        foundConfig || (loaderOptions as any).config,
         loaderOptions,
         path,
         isV7
@@ -127,7 +130,7 @@ class BabelTranspiler extends WorkerTranspiler {
     });
   }
 
-  async getTranspilerContext(manager: Manager) {
+  async getTranspilerContext(manager: Manager): Promise<any> {
     return new Promise(async resolve => {
       const baseConfig = await super.getTranspilerContext(manager);
 
@@ -142,6 +145,7 @@ class BabelTranspiler extends WorkerTranspiler {
           babelTranspilerOptions,
         },
         'babelContext',
+        // @ts-ignore
         {},
         (err, data) => {
           const { version, availablePlugins, availablePresets } = data;

…sandbox/eval/transpilers/base64/index.js …sandbox/eval/transpilers/base64/index.tspackages/app/src/sandbox/eval/transpilers/base64/index.js renamed to packages/app/src/sandbox/eval/transpilers/base64/index.ts packages/app/src/sandbox/eval/transpilers/base64/index.js renamed to packages/app/src/sandbox/eval/transpilers/base64/index.ts

@@ -1,6 +1,5 @@
 // @flow
-import Transpiler from '../';
-import { type LoaderContext } from '../../transpiled-module';
+import Transpiler, { TranspilerResult } from '../';
 
 import mimes from './mimes.json';
 
@@ -24,9 +23,9 @@ class Base64Transpiler extends Transpiler {
   }
 
   doTranspilation(code: string) {
-    return new Promise(resolve => {
+    return new Promise<TranspilerResult>(resolve => {
       const reader = new FileReader();
-      // $FlowIssue
+      // @ts-ignore
       reader.readAsDataURL(code);
 
       reader.onloadend = function() {

…sandbox/eval/transpilers/binary/index.js …sandbox/eval/transpilers/binary/index.tspackages/app/src/sandbox/eval/transpilers/binary/index.js renamed to packages/app/src/sandbox/eval/transpilers/binary/index.ts packages/app/src/sandbox/eval/transpilers/binary/index.js renamed to packages/app/src/sandbox/eval/transpilers/binary/index.ts

@@ -1,6 +1,6 @@
 // @flow
-import Transpiler from '../';
-import { type LoaderContext } from '../../transpiled-module';
+import Transpiler, { TranspilerResult } from '../';
+import { LoaderContext } from '../../transpiled-module';
 
 /**
  * Just fetches a file from the interwebs and converts it to a blob
@@ -13,7 +13,10 @@ class BinaryTranspiler extends Transpiler {
     super('binary-loader');
   }
 
-  doTranspilation(code: string, loaderContext: LoaderContext) {
+  doTranspilation(
+    code: string,
+    loaderContext: LoaderContext
+  ): Promise<TranspilerResult> {
     return fetch(code)
       .then(res => res.blob())
       .then(blob => ({ transpiledCode: blob }));

…sandbox/eval/transpilers/coffee/index.js …sandbox/eval/transpilers/coffee/index.tspackages/app/src/sandbox/eval/transpilers/coffee/index.js renamed to packages/app/src/sandbox/eval/transpilers/coffee/index.ts packages/app/src/sandbox/eval/transpilers/coffee/index.js renamed to packages/app/src/sandbox/eval/transpilers/coffee/index.ts

@@ -1,8 +1,9 @@
-// @flow
+// @ts-ignore
 import CoffeeWorker from 'worker-loader?publicPath=/&name=coffee-transpiler.[hash:8].worker.js!./coffee-worker.js';
 
 import WorkerTranspiler from '../worker-transpiler';
-import { type LoaderContext } from '../../transpiled-module';
+import { LoaderContext } from '../../transpiled-module';
+import { TranspilerResult } from '..';
 
 class CoffeeTranspiler extends WorkerTranspiler {
   worker: Worker;
@@ -13,7 +14,10 @@ class CoffeeTranspiler extends WorkerTranspiler {
     this.cacheable = false;
   }
 
-  doTranspilation(code: string, loaderContext: LoaderContext) {
+  doTranspilation(
+    code: string,
+    loaderContext: LoaderContext
+  ): Promise<TranspilerResult> {
     return new Promise((resolve, reject) => {
       const path = loaderContext.path;