fix: krausest#1141 and krausest#527 Add framework URL and code link

Author: krausest

README.md

@@ -325,18 +325,20 @@ Your package.json must include some information for the benchmark. Since you cop
 ```
   ...
   "js-framework-benchmark": {
-    "frameworkVersion": ""
+    "frameworkVersion": "",
+    "frameworkHomeURL": ""
   },
   ...
 ```
 
-This one is a bit exceptional since vanillajs has no version. If you use a normal framework like react it carries a version information. For most frameworks you'll add a
+This one is a bit exceptional since vanillajs has no version and there no framework involved. If you use a normal framework like react it carries a version information and the framework should have an URL. For most frameworks you'll add a
 dependency to your framework in package.json. The benchmark can automatically determine the correct version information from package.json and package-lock.json if you specify the
 package name like that:
 
 ```
   "js-framework-benchmark": {
     "frameworkVersionFromPackage": "react"
+    "frameworkHomeURL": "https://www.reactjs.org"
   },
 ```
 
@@ -357,6 +359,7 @@ You can set an optional different URL if needed or specify that your DOM uses a
 Contributions are very welcome. Please use the following rules:
 
 - Name your directory frameworks/[keyed|non-keyed]/[FrameworkName]
+- The package.json in your directory must contain some important information see section 4.2 above.
 - Each contribution must be buildable by `npm install` and `npm run build-prod` command in the directory. What build-prod does is up to you. Often there's an `npm run build-dev` that creates a development build
 - Every implementation must use bootstrap provided in the root css directory.
 - All npm dependencies should be installed locally (i.e. listed in your package.json). Http-server or other local web servers should not be local dependencies. It is installed from the root directory to allow access to bootstrap.

frameworks/keyed/1more/package.json

@@ -4,7 +4,8 @@
   "description": "1more demo",
   "main": "dist/app.min.js",
   "js-framework-benchmark": {
-    "frameworkVersionFromPackage": "1more"
+    "frameworkVersionFromPackage": "1more",
+    "frameworkHomeURL": "https://github.com/Freak613/1more"
   },
   "scripts": {
     "build-dev": "rollup -c -w",

frameworks/keyed/react/package.json

@@ -4,7 +4,8 @@
   "description": "React demo",
   "main": "index.js",
   "js-framework-benchmark": {
-    "frameworkVersionFromPackage": "react"
+    "frameworkVersionFromPackage": "react",
+    "frameworkHomeURL": "https://www.reactjs.org"
   },
   "scripts": {
     "build-dev": "webpack --watch",

server/index.js

@@ -23,6 +23,7 @@ async function loadFrameworkInfo(keyedDir, directoryName) {
     let copyProps = (result, packageJSON) => {
         result.issues = packageJSON["js-framework-benchmark"]["issues"];
         result.customURL = packageJSON["js-framework-benchmark"]["customURL"];
+        result.frameworkHomeURL = packageJSON["js-framework-benchmark"]["frameworkHomeURL"];
         let useShadowRoot = packageJSON["js-framework-benchmark"]["useShadowRoot"];
         result.useShadowRoot = useShadowRoot;
         result.useRowShadowRoot = packageJSON["js-framework-benchmark"]["useRowShadowRoot"];

webdriver-ts-results/src/Common.ts

@@ -13,6 +13,7 @@ export interface Framework {
     dir: string;
     type: FrameworkType;
     issues: number[];
+    frameworkHomeURL: string;
     displayname: string;
 }
 
@@ -30,7 +31,8 @@ export const categories: Category[] = [
   {id:2, text:"[Note]:View state on the model", issues: [800], severity: Severity.Note},
   {id:3, text:"[Note]: Explicit requestAnimationFrame calls", issues: [796], severity: Severity.Note},
   {id:4, text:"[Note]: Manual event delegation", issues: [801], severity: Severity.Note},
-  {id:5, text:"[Issue]: Errors in the implementation", issues: [634], severity: Severity.Error},
+  {id:5, text:"[Note]: Implementation uses runtime code generation", issues: [1139], severity: Severity.Note},
+  {id:6, text:"[Issue]: Errors in the implementation", issues: [634], severity: Severity.Error},
 ]
 
 interface IIssue {
@@ -46,7 +48,8 @@ export const knownIssues: IIssue[] = [
     {issue: 796, severity: Severity.Note, text:"[Note]: Implementation uses explicit requestAnimationFrame calls", link: "https://github.com/krausest/js-framework-benchmark/issues/796"},
     {issue: 800, severity: Severity.Note, text:"[Note]: View state on the model", link: "https://github.com/krausest/js-framework-benchmark/issues/800"},
     {issue: 801, severity: Severity.Note, text:"[Note]: Implementation uses manual event delegation", link: "https://github.com/krausest/js-framework-benchmark/issues/801"},
-  ];
+    {issue: 1139, severity: Severity.Note, text:"[Note]: Implementation uses runtime code generation", link: "https://github.com/krausest/js-framework-benchmark/issues/1139"},
+];
 
 export function findIssue(issueNumber: number): IIssue|undefined {
     return knownIssues.find(i => i.issue === issueNumber)

webdriver-ts-results/src/reducer.ts

@@ -21,7 +21,7 @@ const removeKeyedSuffix = (value: string) => {
   else if (value.endsWith('-keyed')) return value.substring(0, value.length - 6)
   return value;
 }
-const mappedFrameworks = frameworks.map((f:any) => ({ name: f.name, dir: f.dir, displayname: removeKeyedSuffix(f.name), issues: f.issues ?? [], type: f.keyed ? FrameworkType.KEYED : FrameworkType.NON_KEYED }));
+const mappedFrameworks = frameworks.map((f:any) => ({ name: f.name, dir: f.dir, displayname: removeKeyedSuffix(f.name), issues: f.issues ?? [], type: f.keyed ? FrameworkType.KEYED : FrameworkType.NON_KEYED, frameworkHomeURL: f.frameworkHomeURL }));
 
 const allBenchmarks = benchmarks.reduce((set, b) => set.add(b), new Set<Benchmark>());
 const allFrameworks = mappedFrameworks.reduce((set, f) => set.add(f), new Set<Framework>());

webdriver-ts-results/src/tables/CpuResultsTable.tsx

@@ -1,19 +1,24 @@
 import React from 'react'
-import {ResultTableData, SORT_BY_NAME, SORT_BY_GEOMMEAN_CPU, BenchmarkType} from '../Common'; 
+import {ResultTableData, SORT_BY_NAME, SORT_BY_GEOMMEAN_CPU, BenchmarkType, Framework} from '../Common'; 
 import GeomMeanRow from './GeomMeanRow'
 import CompareRow from './CompareRow'
 import ValueResultRow from './ValueResultRow'
 
 const CpuResultsTable = ({data, currentSortKey, sortBy}: {data: ResultTableData; currentSortKey: string; sortBy: (name: string) => void}): JSX.Element|null => {
   const resultsCPU = data.getResult(BenchmarkType.CPU);
+
+  
     return resultsCPU.results.length===0 ? null :
           (<div>
             <h3>Duration in milliseconds ± 95% confidence interval (Slowdown = Duration / Fastest)</h3>
             <table className='results'>
               <thead>
-                <tr>
+                <tr>                  
                   <th className='benchname'><button className={currentSortKey===SORT_BY_NAME ? 'sortKey textButton' : 'textButton'} onClick={(event) => {event.preventDefault(); sortBy(SORT_BY_NAME)}}>Name</button><br/>Duration for...</th>
-                  {data.frameworks.map((f,idx) => <th key={idx}>{f.displayname}</th>)}
+                  {data.frameworks.map((f,idx) => <th key={idx}>{
+                      f.frameworkHomeURL ? <a target="_blank" href={f.frameworkHomeURL}>{f.displayname}</a> : f.displayname
+                    }
+                  </th>)}
                 </tr>
               </thead>
               <thead>
@@ -27,6 +32,15 @@ const CpuResultsTable = ({data, currentSortKey, sortBy}: {data: ResultTableData;
                       </th>)}
                 </tr>
               </thead>
+              <thead>
+                <tr>
+                    <th>Implementation link</th>
+                    {data.frameworks.map(f => 
+                      <th key={f.name} >
+                        <a target="_blank" href={"https://github.com/krausest/js-framework-benchmark/tree/master/frameworks/"+f.dir}>code</a>
+                      </th>)}
+                </tr>
+              </thead>
               <tbody>
                 {resultsCPU.results.map((resultsForBenchmark, benchIdx) =>
                   <ValueResultRow key={resultsCPU.benchmarks[benchIdx]?.id} benchIdx={benchIdx} resultsForBenchmark={resultsForBenchmark} benchmarks={resultsCPU.benchmarks} currentSortKey={currentSortKey} sortBy={sortBy}/>

webdriver-ts/src/common.ts

@@ -86,6 +86,7 @@ export interface FrameworkData {
   shadowRootName: string | undefined;
   buttonsInShadowRoot: boolean;
   issues: number[];
+  frameworkHomeURL: string;
 }
 
 interface Options {
@@ -110,6 +111,7 @@ export interface FrameworkInformation {
   buttonsInShadowRoot?: boolean;
   versions?: {[key: string]: string};
   frameworkVersionString: string;
+  frameworkHomeURL: string;
 }
 
 export interface IMatchPredicate {
@@ -145,7 +147,8 @@ export async function initializeFrameworks(matchPredicate: IMatchPredicate = mat
           useRowShadowRoot: !!frameworkVersionInformation.useRowShadowRoot,
           shadowRootName: frameworkVersionInformation.shadowRootName,
           buttonsInShadowRoot: !!frameworkVersionInformation.buttonsInShadowRoot,
-          issues: (frameworkVersionInformation.issues ?? []).map(i => Number(i))
+          issues: (frameworkVersionInformation.issues ?? []).map(i => Number(i)),
+          frameworkHomeURL: frameworkVersionInformation.frameworkHomeURL ?? ""
         });
       }
   }

webdriver-ts/src/createResultJS.ts

@@ -88,6 +88,7 @@ async function main() {
               dir: (f.keyed ? "keyed/" : "non-keyed/" ) + f.name,
               keyed: f.keyed,
               issues: f.issues && f.issues.length > 0 ? f.issues : undefined,
+              frameworkHomeURL: f.frameworkHomeURL ?? ""
           })
       )
     ) +