Merge pull request #71 from modderme123/m

Update to the latest version of monaco-editor

Author: amoutonbrady

package.json

@@ -43,15 +43,15 @@
     "babel-preset-solid": "1.2.6",
     "dedent": "^0.7.0",
     "mitt": "^3.0.0",
-    "monaco-editor": "^0.30.1",
+    "monaco-editor": "^0.31.1",
     "monaco-editor-textmate": "^3.0.0",
     "monaco-textmate": "^3.0.1",
     "onigasm": "^2.2.5",
     "prettier": "^2.5.1",
     "register-service-worker": "^1.7.2",
     "rollup": "^2.62.0",
     "solid-dismiss": "^1.0.26",
-    "solid-heroicons": "^1.1.0",
+    "solid-heroicons": "^1.1.1",
     "solid-js": "1.2.6"
   }
 }

playground/app.tsx

@@ -53,7 +53,6 @@ export const App = (): JSX.Element => {
   const initialTabs = parseHash(url.hash && url.hash.slice(1), defaultTabs) || defaultTabs;
   const [tabs, setTabs] = createTabList(initialTabs);
   const [current, setCurrent] = createSignal('main.tsx');
-  const [isReady, setIsReady] = createSignal(false);
 
   const params = Object.fromEntries(url.searchParams.entries());
   const [version, setVersion] = createSignal(params.version || pkg.dependencies['solid-js']);
@@ -75,17 +74,13 @@ export const App = (): JSX.Element => {
       .then((data) => {
         setTabs(processImport(data));
       })
-      .then(() => setIsReady(true))
       .catch((e) => console.error('Failed to import browser data', e));
-  } else {
-    setIsReady(true);
   }
 
-  const [noHeader, noInteractive, isHorizontal, noActionBar, noEditableTabs] = [
+  const [noHeader, noInteractive, isHorizontal, noEditableTabs] = [
     'noHeader',
     'noInteractive',
     'isHorizontal',
-    'noActionBar',
     'noEditableTabs',
   ].map((key) => key in params);
 
@@ -98,7 +93,6 @@ export const App = (): JSX.Element => {
 
   const header = !noHeader;
   const interactive = !noInteractive;
-  const actionBar = !noActionBar;
   const editableTabs = !noEditableTabs;
 
   const { zoomState, updateZoomScale } = useZoom();
@@ -144,23 +138,20 @@ export const App = (): JSX.Element => {
         fallback={<div classList={{ 'md:col-span-2': !isHorizontal }}></div>}
       />
 
-      <Show when={isReady()}>
-        <Repl
-          compiler={compiler}
-          formatter={formatter}
-          isHorizontal={isHorizontal}
-          interactive={interactive}
-          actionBar={actionBar}
-          editableTabs={editableTabs}
-          dark={dark()}
-          tabs={tabs()}
-          setTabs={setTabs}
-          current={current()}
-          setCurrent={setCurrent}
-          version={version()}
-          id="repl"
-        />
-      </Show>
+      <Repl
+        compiler={compiler}
+        formatter={formatter}
+        isHorizontal={isHorizontal}
+        interactive={interactive}
+        editableTabs={editableTabs}
+        dark={dark()}
+        tabs={tabs()}
+        setTabs={setTabs}
+        current={current()}
+        setCurrent={setCurrent}
+        version={version()}
+        id="repl"
+      />
 
       <Show when={newUpdate()} children={<Update onDismiss={() => setNewUpdate(false)} />} />
     </div>

playground/components/header.tsx

@@ -31,7 +31,7 @@ export const Header: Component<{
     window.removeEventListener('resize', closeMobileMenu);
   });
 
-  function closeMobileMenu(event: any) {
+  function closeMobileMenu() {
     setShowMenu(false);
   }
 
@@ -69,7 +69,7 @@ export const Header: Component<{
 
   return (
     <header
-      class="p-2 flex text-sm justify-between items-center bg-brand-default text-white z-20"
+      class="p-2 flex text-sm justify-between items-center bg-brand-default text-white"
       classList={{ 'md:col-span-3': !props.isHorizontal }}
     >
       <h1 class="flex items-center space-x-4 uppercase leading-0 tracking-widest">
@@ -80,7 +80,6 @@ export const Header: Component<{
       </h1>
       <div class="flex items-center space-x-2">
         <Dismiss
-          class="z-10"
           classList={{ 'absolute top-[53px] right-[10px] w-[fit-content]': showMenu() }}
           menuButton={() => menuBtnEl}
           open={showMenu}
@@ -183,7 +182,7 @@ export const Header: Component<{
           classList={{
             'border-white border': showMenu(),
           }}
-          class="z-40 px-3 py-2 focus:outline-none focus:ring-1 rounded text-white opacity-80 hover:opacity-100 visible relative md:hidden m-0 mr-[10px]"
+          class="px-3 py-2 focus:outline-none focus:ring-1 rounded text-white opacity-80 hover:opacity-100 visible relative md:hidden m-0 mr-[10px]"
           title="Mobile Menu Button"
           ref={menuBtnEl}
         >
@@ -195,7 +194,7 @@ export const Header: Component<{
         <select
           name="version"
           id="version"
-          onClick={(e) => setShowMenu(false)}
+          onClick={() => setShowMenu(false)}
           class="-mb-1 leading-snug text-white bg-transparent border-transparent hover:border-white cursor-pointer"
           style={`background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`}
           onChange={(e) => props.onVersionChange(e.currentTarget.value)}

playground/components/update.tsx

@@ -1,4 +1,4 @@
-import { Component } from 'solid-js';
+import type { Component } from 'solid-js';
 import { Portal } from 'solid-js/web';
 
 import { Icon } from 'solid-heroicons';

playground/utils/exportToCsb.ts

@@ -1,5 +1,5 @@
 import pkg from '../../package.json';
-import { Tab } from '../../src';
+import type { Tab } from '../../src';
 import { compressToBase64 } from '@amoutonbrady/lz-string';
 
 type IFiles = Record<string, { content: string | Record<string, any>; isBinary: boolean }>;

playground/utils/exportToJson.tsx

@@ -1,4 +1,4 @@
-import { Tab } from '../../src';
+import type { Tab } from '../../src';
 
 /**
  * This function will convert the tabs of the playground