From dae87ba6cc8f5c6e06d566816bda08bff624da36 Mon Sep 17 00:00:00 2001 From: bendtherules Date: Mon, 28 Sep 2020 12:42:48 +0530 Subject: [PATCH] Add basic CompletionViewer --- src/App.tsx | 22 +++-- .../CompletionCard/CompletionCard.tsx | 84 +++++++++++++++++++ .../CompletionCard/CompletionIcon.tsx | 29 +++++++ src/components/CompletionCard/index.ts | 3 + .../CompletionViewer/CompletionViewer.css | 0 .../CompletionViewer/CompletionViewer.tsx | 27 +++++- .../InlineResultViewer/InlineResultViewer.tsx | 29 +++++++ src/components/InlineResultViewer/index.ts | 3 + src/components/SourceViewer/SourceViewer.css | 0 src/components/SourceViewer/SourceViewer.tsx | 49 ++++++----- src/index.css | 1 - src/logic/sourceMapping.tsx | 4 +- 12 files changed, 218 insertions(+), 33 deletions(-) create mode 100644 src/components/CompletionCard/CompletionCard.tsx create mode 100644 src/components/CompletionCard/CompletionIcon.tsx create mode 100644 src/components/CompletionCard/index.ts delete mode 100644 src/components/CompletionViewer/CompletionViewer.css create mode 100644 src/components/InlineResultViewer/InlineResultViewer.tsx create mode 100644 src/components/InlineResultViewer/index.ts delete mode 100644 src/components/SourceViewer/SourceViewer.css diff --git a/src/App.tsx b/src/App.tsx index fde9264..285bbbe 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,10 @@ -import React, { useState, useLayoutEffect } from "react"; +import React, { useState } from "react"; import { SourceViewer } from "./components/SourceViewer"; import { CompletionViewer } from "./components/CompletionViewer"; + import { completionMapping } from "./logic/completionMapping"; +import { sourceMapping } from "./logic/sourceMapping"; import { runEngine } from "./logic/runEngine"; import "./tailwind.output.css"; @@ -19,11 +21,19 @@ function App() { // }, [inputCode]); return ( -
- - +
+
+ +
+
+ {/* Separator */} + {/*
*/} + +
); } diff --git a/src/components/CompletionCard/CompletionCard.tsx b/src/components/CompletionCard/CompletionCard.tsx new file mode 100644 index 0000000..564fb87 --- /dev/null +++ b/src/components/CompletionCard/CompletionCard.tsx @@ -0,0 +1,84 @@ +import React from "react"; +import { ICompletionDetail } from "../../logic/completionMapping"; +import { TSourceMapping } from "../../logic/sourceMapping"; +import { CompletionTypes } from "../../types/engine262-stubs"; + +import { InlineResultViewer } from "../InlineResultViewer"; +import { CompletionIcon } from "./CompletionIcon"; + +function getCompletionClassname(inputCompletion: ICompletionDetail) { + const typeToClassnameMapping: { [key in CompletionTypes]: string } = { + [CompletionTypes.Normal]: "bg-gray-300", + [CompletionTypes.Return]: "bg-green-200", + [CompletionTypes.Continue]: "bg-yellow-100", + [CompletionTypes.Break]: "bg-yellow-300", + [CompletionTypes.Throw]: "bg-red-300", + }; + + return typeToClassnameMapping[inputCompletion.completionType]; +} + +function getCodeTextFromCompletion( + code: string, + completion: ICompletionDetail +) { + return code.substring(completion.start, completion.end); +} + +export interface ICompletionCardProps { + completionDetail: ICompletionDetail; + code: string; +} + +export function CompletionCard(props: ICompletionCardProps) { + const { completionDetail, code } = props; + + // TODO: have diff version to be shown as tooltip over source code + return ( +
+
+
+ +
+
+ +
+
+
+
From source ⤵️
+ +
+
+
Full completion record ⤵️
+ + + + + + + + + + + + + +
[[Type]]{completionDetail.completionType}
[[Value]] + {completionDetail.completionValueString} +
[[Target]] + {completionDetail.completionTargetString} +
+
+
+ ); +} diff --git a/src/components/CompletionCard/CompletionIcon.tsx b/src/components/CompletionCard/CompletionIcon.tsx new file mode 100644 index 0000000..e868dab --- /dev/null +++ b/src/components/CompletionCard/CompletionIcon.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import { ICompletionDetail } from "../../logic/completionMapping"; +import { CompletionTypes } from "../../types/engine262-stubs"; + +export interface ICompletionIconProps { + completionDetail: ICompletionDetail; +} + +export const typeToLetterMapping: { + [key in CompletionTypes]: string; +} = { + [CompletionTypes.Normal]: "N", + [CompletionTypes.Return]: "R", + [CompletionTypes.Continue]: "C", + [CompletionTypes.Break]: "B", + [CompletionTypes.Throw]: "T", +}; + +export function CompletionIcon(props: ICompletionIconProps) { + const { completionDetail } = props; + + const tmpLetter = typeToLetterMapping[completionDetail.completionType]; + return ( + // Icon container +
+
{tmpLetter}
+
+ ); +} diff --git a/src/components/CompletionCard/index.ts b/src/components/CompletionCard/index.ts new file mode 100644 index 0000000..dd240fa --- /dev/null +++ b/src/components/CompletionCard/index.ts @@ -0,0 +1,3 @@ +import { CompletionCard } from "./CompletionCard"; + +export { CompletionCard }; diff --git a/src/components/CompletionViewer/CompletionViewer.css b/src/components/CompletionViewer/CompletionViewer.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/CompletionViewer/CompletionViewer.tsx b/src/components/CompletionViewer/CompletionViewer.tsx index 1f37ddb..7b1bdaf 100644 --- a/src/components/CompletionViewer/CompletionViewer.tsx +++ b/src/components/CompletionViewer/CompletionViewer.tsx @@ -1,7 +1,32 @@ +import React from "react"; import { ICompletionDetail } from "../../logic/completionMapping"; +import { TSourceMapping } from "../../logic/sourceMapping"; + +import { CompletionCard } from "../CompletionCard"; export function CompletionViewer(props: { + code: string; completionDetails: ICompletionDetail[]; + sourceMapping: TSourceMapping; }) { - return null; + const { code, completionDetails } = props; + + // function renderCompletionResult(inputCompletion: ICompletionDetail) {} + + return ( +
+ {/* Title for completion section */} +
Completion Records
+ {/* Completion list */} +
+ {completionDetails.map((tmpCompletion) => ( + // Card for each completion record + + ))} +
+
+ ); } diff --git a/src/components/InlineResultViewer/InlineResultViewer.tsx b/src/components/InlineResultViewer/InlineResultViewer.tsx new file mode 100644 index 0000000..23dea5f --- /dev/null +++ b/src/components/InlineResultViewer/InlineResultViewer.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import Highlight, { defaultProps } from "prism-react-renderer"; + +interface IInlineResultViewerProps { + code: string; + className: string; +} + +export function InlineResultViewer(props: IInlineResultViewerProps) { + const { code, className: classNameFromProps } = props; + return ( + + {({ className, style, tokens, getLineProps, getTokenProps }) => ( + 
+          {tokens.map((line, i) => (
+            

+              {line.map((token, key) => (
+                
+              ))}
+            

+          ))}
+
+ )} + + ); +} diff --git a/src/components/InlineResultViewer/index.ts b/src/components/InlineResultViewer/index.ts new file mode 100644 index 0000000..ee04a25 --- /dev/null +++ b/src/components/InlineResultViewer/index.ts @@ -0,0 +1,3 @@ +import { InlineResultViewer } from "./InlineResultViewer"; + +export { InlineResultViewer }; diff --git a/src/components/SourceViewer/SourceViewer.css b/src/components/SourceViewer/SourceViewer.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/SourceViewer/SourceViewer.tsx b/src/components/SourceViewer/SourceViewer.tsx index ff0d9d0..5edf60e 100644 --- a/src/components/SourceViewer/SourceViewer.tsx +++ b/src/components/SourceViewer/SourceViewer.tsx @@ -3,8 +3,6 @@ import Highlight, { defaultProps } from "prism-react-renderer"; import { sourceMapping } from "../../logic/sourceMapping"; -import "./SourceViewer.css"; - interface ISourceViewerProps { code: string; onChangeCode(newCode: string): void; @@ -13,26 +11,31 @@ interface ISourceViewerProps { export function SourceViewer(props: ISourceViewerProps) { const { code } = props; return ( - - {({ className, style, tokens, getLineProps, getTokenProps }) => ( - // eslint-disable-next-line no-sequences - sourceMapping.reset(), - ( - 
-            {tokens.map((line, i) => (
-              

-                {line.map(function (token, key) {
-                  const refFn = sourceMapping.registerToken(token);
-                  return (
-                    
-                  );
-                })}
-                {(sourceMapping.registerLineEnd(), null)}
-              

-            ))}
-
- ) - )} - +
+ {/* Title of code section */} +
Code
+ {/* Code viewer */} + + {({ className, style, tokens, getLineProps, getTokenProps }) => ( + // eslint-disable-next-line no-sequences + sourceMapping.reset(), + ( + 
+              {tokens.map((line, i) => (
+                

+                  {line.map(function (token, key) {
+                    const refFn = sourceMapping.registerToken(token);
+                    return (
+                      
+                    );
+                  })}
+                  {(sourceMapping.registerLineEnd(), null)}
+                

+              ))}
+
+ ) + )} + +
); } diff --git a/src/index.css b/src/index.css index 50e4927..ec2585e 100644 --- a/src/index.css +++ b/src/index.css @@ -5,7 +5,6 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - font-size: 24px; } code { diff --git a/src/logic/sourceMapping.tsx b/src/logic/sourceMapping.tsx index 461c757..dc00b9e 100644 --- a/src/logic/sourceMapping.tsx +++ b/src/logic/sourceMapping.tsx @@ -1,12 +1,12 @@ import { Token } from "../types/prism-types"; -interface TMappingELement { +export interface TMappingELement { start: number; end: number; ref: { current: HTMLElement | null }; } -interface TSourceMapping { +export interface TSourceMapping { mappingArray: Array; lastEnd: number; registerToken(t: Token): (ele: HTMLElement | null) => void;