show raw babel output

Author: milomg

src/components/repl.tsx

@@ -36,6 +36,9 @@ export const Repl: typeof ReplProps = (props) => {
   const [store, setStore] = createStore({
     error: '',
     compiled: '',
+    compiledTabs: {
+      [`./${props.current}`]: '',
+    },
     mode: 'DOM' as keyof typeof compileMode,
     isCompiling: false,
     get compileMode(): ValueOf<typeof compileMode> {
@@ -50,8 +53,8 @@ export const Repl: typeof ReplProps = (props) => {
       if (idx < 0) return;
       props.setCurrent(current);
     },
-    setCompiled(compiled: string) {
-      setStore({ compiled, isCompiling: false });
+    setCompiled(compiled: string, tabs: Record<string, string>) {
+      setStore({ compiled, isCompiling: false, compiledTabs: tabs });
     },
     setTabName(id1: string, name: string) {
       const idx = props.tabs.findIndex((tab) => id(tab) === id1);
@@ -136,12 +139,12 @@ export const Repl: typeof ReplProps = (props) => {
     const { event } = data;
 
     if (event === 'RESULT') {
-      const { compiled, error } = data;
+      const { compiled, tabs, error } = data;
 
       if (error) return setStore({ error });
       if (!compiled) return;
 
-      actions.setCompiled(compiled);
+      actions.setCompiled(compiled, tabs);
 
       console.log('Compilation took:', formatMs(performance.now() - now));
     }
@@ -396,7 +399,7 @@ export const Repl: typeof ReplProps = (props) => {
       </TabList>
 
       <div class="h-full row-start-2 flex flex-col overflow-hidden">
-        <MonacoTabs tabs={props.tabs} compiled={store.compiled} folder={props.id} />
+        <MonacoTabs tabs={props.tabs} compiled={store.compiledTabs[`./${props.current}`] || ''} folder={props.id} />
 
         <Editor
           url={`file:///${props.id}/${props.current}`}

src/workers/compiler.ts

@@ -6,10 +6,12 @@ import babelPresetSolid from 'babel-preset-solid';
 // @ts-ignore
 import { rollup } from 'rollup/dist/es/rollup.browser.js';
 import dd from 'dedent';
+import type { Plugin } from 'rollup';
 
 const CDN_URL = 'https://cdn.skypack.dev';
 
 const tabsLookup = new Map<string, Tab>();
+let tabsOutput: { [key: string]: string } = {};
 
 function uid(str: string) {
   return Array.from(str)
@@ -24,7 +26,7 @@ function uid(str: string) {
  *
  * Note: Passing in the Solid Version for later use
  */
-function virtual({ solidOptions = {} }: { solidOptions: unknown }) {
+function virtual({ solidOptions = {} }: { solidOptions: unknown }): Plugin {
   return {
     name: 'repl-plugin',
 
@@ -75,24 +77,31 @@ function virtual({ solidOptions = {} }: { solidOptions: unknown }) {
 
       // Compile solid code
       if (/\.(j|t)sx$/.test(filename)) {
-        return transform(code, {
+        let transformed = transform(code, {
           presets: [
             [babelPresetSolid, solidOptions],
             ['typescript', { onlyRemoveTypeImports: true }],
           ],
           filename,
         });
+        tabsOutput[filename] = transformed.code;
+        return transformed;
       }
     },
   };
 }
 
-async function compile(tabs: Tab[], solidOptions = {}): Promise<{ compiled: string } | { error: string }> {
-  try {
-    for (const tab of tabs) {
-      tabsLookup.set(`./${tab.name}.${tab.type}`, tab);
-    }
+async function compile(
+  tabs: Tab[],
+  solidOptions = {},
+): Promise<{ event: 'RESULT' } & ({ compiled: string; tabs: { [key: string]: string } } | { error: string })> {
+  tabsOutput = {};
+  tabsLookup.clear();
+  for (const tab of tabs) {
+    tabsLookup.set(`./${tab.name}.${tab.type}`, tab);
+  }
 
+  try {
     const compiler = await rollup({
       input: `./${tabs[0].name}`,
       plugins: [virtual({ solidOptions })],
@@ -102,9 +111,9 @@ async function compile(tabs: Tab[], solidOptions = {}): Promise<{ compiled: stri
       output: [{ code }],
     } = await compiler.generate({ format: 'esm', inlineDynamicImports: true });
 
-    return { compiled: code as string };
+    return { event: 'RESULT', compiled: code as string, tabs: tabsOutput };
   } catch (e) {
-    return { error: (e as Error).message };
+    return { event: 'RESULT', error: (e as Error).message };
   }
 }
 
@@ -114,10 +123,7 @@ self.addEventListener('message', async ({ data }) => {
   switch (event) {
     case 'COMPILE':
       // @ts-ignore
-      self.postMessage({
-        event: 'RESULT',
-        ...(await compile(tabs, compileOpts)),
-      });
+      self.postMessage(await compile(tabs, compileOpts));
       break;
   }
 });