Merge pull request #181 from eqlabs/feat/add-optimization-settings

Feat/add optimization settings
2022-05-03 15:30:51 +03:00
parent ec75fff74b 4c42e75686
commit 1d66137c23
7 changed files with 205 additions and 23 deletions
--- a/components/HooksEditor.tsx
+++ b/components/HooksEditor.tsx
@@ -54,18 +54,6 @@ const setMarkers = (monacoE: typeof monaco) => {
        marker?.code?.includes("hooks-")
    );

-  console.log(
-    monacoE.editor
-      .getModelMarkers({})
-      // Filter out the markers that are hooks specific
-      .filter(
-        (marker) =>
-          typeof marker?.code === "string" &&
-          // Take only markers that starts with "hooks-"
-          marker?.code?.includes("hooks-")
-      )
-  );
-
  // Get the active model (aka active file you're editing)
  // const model = monacoE.editor?.getModel(
  //   monacoE.Uri.parse(`file:///work/c/${state.files?.[state.active]?.name}`)
--- a/components/Popover.tsx
+++ b/components/Popover.tsx
@@ -0,0 +1,105 @@
+import React, { ReactNode } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { styled, keyframes } from "../stitches.config";
+
+const slideUpAndFade = keyframes({
+  "0%": { opacity: 0, transform: "translateY(2px)" },
+  "100%": { opacity: 1, transform: "translateY(0)" },
+});
+
+const slideRightAndFade = keyframes({
+  "0%": { opacity: 0, transform: "translateX(-2px)" },
+  "100%": { opacity: 1, transform: "translateX(0)" },
+});
+
+const slideDownAndFade = keyframes({
+  "0%": { opacity: 0, transform: "translateY(-2px)" },
+  "100%": { opacity: 1, transform: "translateY(0)" },
+});
+
+const slideLeftAndFade = keyframes({
+  "0%": { opacity: 0, transform: "translateX(2px)" },
+  "100%": { opacity: 1, transform: "translateX(0)" },
+});
+const StyledContent = styled(PopoverPrimitive.Content, {
+  borderRadius: 4,
+  padding: "$3 $3",
+  fontSize: 12,
+  lineHeight: 1,
+  color: "$text",
+  boxShadow:
+    "0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)",
+  "@media (prefers-reduced-motion: no-preference)": {
+    animationDuration: "400ms",
+    animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
+    willChange: "transform, opacity",
+    '&[data-state="open"]': {
+      '&[data-side="top"]': { animationName: slideDownAndFade },
+      '&[data-side="right"]': { animationName: slideLeftAndFade },
+      '&[data-side="bottom"]': { animationName: slideUpAndFade },
+      '&[data-side="left"]': { animationName: slideRightAndFade },
+    },
+  },
+  ".dark &": {
+    backgroundColor: "$mauve5",
+    boxShadow:
+      "0px 10px 38px -10px rgba(22, 23, 24, 0.85), 0px 10px 20px -15px rgba(22, 23, 24, 0.6)",
+  },
+});
+
+const StyledArrow = styled(PopoverPrimitive.Arrow, {
+  fill: "$colors$mauve2",
+  ".dark &": {
+    fill: "$mauve5",
+  },
+});
+
+const StyledClose = styled(PopoverPrimitive.Close, {
+  all: "unset",
+  fontFamily: "inherit",
+  borderRadius: "100%",
+  height: 25,
+  width: 25,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "$text",
+  position: "absolute",
+  top: 5,
+  right: 5,
+});
+
+// Exports
+export const PopoverRoot = PopoverPrimitive.Root;
+export const PopoverTrigger = PopoverPrimitive.Trigger;
+export const PopoverContent = StyledContent;
+export const PopoverArrow = StyledArrow;
+export const PopoverClose = StyledClose;
+
+interface IPopover {
+  content: string | ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+const Popover: React.FC<IPopover> = ({
+  children,
+  content,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+}) => (
+  <PopoverRoot
+    open={open}
+    defaultOpen={defaultOpen}
+    onOpenChange={onOpenChange}
+  >
+    <PopoverTrigger asChild>{children}</PopoverTrigger>
+    <PopoverContent sideOffset={5}>
+      {content} <PopoverArrow />
+    </PopoverContent>
+  </PopoverRoot>
+);
+
+export default Popover;
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
    "@radix-ui/react-dropdown-menu": "^0.1.1",
    "@radix-ui/react-id": "^0.1.1",
    "@radix-ui/react-label": "^0.1.5",
+    "@radix-ui/react-popover": "^0.1.6",
    "@radix-ui/react-tooltip": "^0.1.7",
    "@stitches/react": "^1.2.6-0",
    "base64-js": "^1.5.1",
--- a/pages/develop/[[...slug]].tsx
+++ b/pages/develop/[[...slug]].tsx
@@ -1,16 +1,18 @@
+import { Label } from "@radix-ui/react-label";
 import type { NextPage } from "next";
 import dynamic from "next/dynamic";
-import { Play } from "phosphor-react";
+import { Gear, Play } from "phosphor-react";
 import Hotkeys from "react-hot-keys";
 import Split from "react-split";
 import { useSnapshot } from "valtio";
+import { ButtonGroup, Flex } from "../../components";
 import Box from "../../components/Box";
 import Button from "../../components/Button";
+import Popover from "../../components/Popover";
 import state from "../../state";
 import { compileCode } from "../../state/actions";
 import { getSplit, saveSplit } from "../../state/actions/persistSplits";

-
 const HooksEditor = dynamic(() => import("../../components/HooksEditor"), {
  ssr: false,
 });
@@ -19,6 +21,59 @@ const LogBox = dynamic(() => import("../../components/LogBox"), {
  ssr: false,
 });

+const CompilerSettings = () => {
+  const snap = useSnapshot(state);
+  return (
+    <Flex css={{ minWidth: 200, flexDirection: "column" }}>
+      <Label>Optimization level</Label>
+      <ButtonGroup css={{ mt: "$2", fontFamily: "$monospace" }}>
+        <Button
+          css={{ fontFamily: "$monospace" }}
+          outline={snap.compileOptions !== "-O0"}
+          onClick={() => (state.compileOptions = "-O0")}
+        >
+          -O0
+        </Button>
+        <Button
+          css={{ fontFamily: "$monospace" }}
+          outline={snap.compileOptions !== "-O1"}
+          onClick={() => (state.compileOptions = "-O1")}
+        >
+          -O1
+        </Button>
+        <Button
+          css={{ fontFamily: "$monospace" }}
+          outline={snap.compileOptions !== "-O2"}
+          onClick={() => (state.compileOptions = "-O2")}
+        >
+          -O2
+        </Button>
+        <Button
+          css={{ fontFamily: "$monospace" }}
+          outline={snap.compileOptions !== "-O3"}
+          onClick={() => (state.compileOptions = "-O3")}
+        >
+          -O3
+        </Button>
+        <Button
+          css={{ fontFamily: "$monospace" }}
+          outline={snap.compileOptions !== "-O4"}
+          onClick={() => (state.compileOptions = "-O4")}
+        >
+          -O4
+        </Button>
+        <Button
+          css={{ fontFamily: "$monospace" }}
+          outline={snap.compileOptions !== "-Os"}
+          onClick={() => (state.compileOptions = "-Os")}
+        >
+          -Os
+        </Button>
+      </ButtonGroup>
+    </Flex>
+  );
+};
+
 const Home: NextPage = () => {
  const snap = useSnapshot(state);

@@ -42,12 +97,7 @@ const Home: NextPage = () => {
              !snap.compiling && snap.files.length && compileCode(snap.active)
            }
          >
-            <Button
-              variant="primary"
-              uppercase
-              disabled={!snap.files.length}
-              isLoading={snap.compiling}
-              onClick={() => compileCode(snap.active)}
+            <Flex
              css={{
                position: "absolute",
                bottom: "$4",
@@ -55,11 +105,25 @@ const Home: NextPage = () => {
                alignItems: "center",
                display: "flex",
                cursor: "pointer",
+                gap: "$2",
              }}
            >
-              <Play weight="bold" size="16px" />
-              Compile to Wasm
-            </Button>
+              <Button
+                variant="primary"
+                uppercase
+                disabled={!snap.files.length}
+                isLoading={snap.compiling}
+                onClick={() => compileCode(snap.active)}
+              >
+                <Play weight="bold" size="16px" />
+                Compile to Wasm
+              </Button>
+              <Popover content={<CompilerSettings />}>
+                <Button variant="primary" css={{ px: "10px" }}>
+                  <Gear size="16px" />
+                </Button>
+              </Popover>
+            </Flex>
          </Hotkeys>
        )}
      </main>
--- a/state/actions/compileCode.ts
+++ b/state/actions/compileCode.ts
@@ -38,6 +38,7 @@ export const compileCode = async (activeId: number) => {
        files: [
          {
            type: "c",
+            options: state.compileOptions || '-O0',
            name: state.files[activeId].name,
            src: state.files[activeId].content,
          },
--- a/state/index.ts
+++ b/state/index.ts
@@ -74,6 +74,7 @@ export interface IState {
  mainModalOpen: boolean;
  mainModalShowed: boolean;
  accounts: IAccount[];
+  compileOptions: '-O0' | '-O1' | '-O2' | '-O3' | '-O4' | '-Os';
 }

 // let localStorageState: null | string = null;
@@ -103,6 +104,7 @@ let initialState: IState = {
  mainModalOpen: false,
  mainModalShowed: false,
  accounts: [],
+  compileOptions: '-O0'
 };

 let localStorageAccounts: string | null = null;
--- a/yarn.lock
+++ b/yarn.lock
@@ -709,6 +709,27 @@
    aria-hidden "^1.1.1"
    react-remove-scroll "^2.4.0"

+"@radix-ui/react-popover@^0.1.6":
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-0.1.6.tgz#788e969239d9c55239678e615ab591b6b7ba5cdc"
+  integrity sha512-zQzgUqW4RQDb0ItAL1xNW4K4olUrkfV3jeEPs9rG+nsDQurO+W9TT+YZ9H1mmgAJqlthyv1sBRZGdBm4YjtD6Q==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "0.1.0"
+    "@radix-ui/react-compose-refs" "0.1.0"
+    "@radix-ui/react-context" "0.1.1"
+    "@radix-ui/react-dismissable-layer" "0.1.5"
+    "@radix-ui/react-focus-guards" "0.1.0"
+    "@radix-ui/react-focus-scope" "0.1.4"
+    "@radix-ui/react-id" "0.1.5"
+    "@radix-ui/react-popper" "0.1.4"
+    "@radix-ui/react-portal" "0.1.4"
+    "@radix-ui/react-presence" "0.1.2"
+    "@radix-ui/react-primitive" "0.1.4"
+    "@radix-ui/react-use-controllable-state" "0.1.0"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "^2.4.0"
+
 "@radix-ui/react-popper@0.1.4":
  version "0.1.4"
  resolved "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-0.1.4.tgz"