From 580e574c841fb9b0ba9d37a50bd5a0f787799ff2 Mon Sep 17 00:00:00 2001 From: August Skare Date: Fri, 19 Oct 2018 15:02:15 +0100 Subject: Feature/build step (#2) * BundleAnalyzerPlugin * lazy load highlight.js * seperate bundles for each page * prerender apps to html on build * preload important font files * dont prerender code copy button * fix woff2 variant of font * added missing doctype * remove metatags component --- packages/dev-tools-pages/ts/highlight.tsx | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 packages/dev-tools-pages/ts/highlight.tsx (limited to 'packages/dev-tools-pages/ts/highlight.tsx') diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx new file mode 100644 index 000000000..0c4602d51 --- /dev/null +++ b/packages/dev-tools-pages/ts/highlight.tsx @@ -0,0 +1,6 @@ +const highlight = require('highlight.js/lib/highlight'); +const javascript = require('highlight.js/lib/languages/javascript'); + +highlight.registerLanguage('javascript', javascript); + +export default highlight; -- cgit v1.2.3 From 1ae9f68db8c9768e68d1eab1f411b346e9512c1c Mon Sep 17 00:00:00 2001 From: August Skare Date: Thu, 25 Oct 2018 12:10:35 +0100 Subject: Content (#7) * optional children in List component * added real content to trace page * added real content to cov page * add support for json highlighting * real content on compiler page * real content on profiler page * remove unused import * remove list from compiler page * wrap code components in pages with breakout component * fix font size on text * fix typo --- packages/dev-tools-pages/ts/highlight.tsx | 2 ++ 1 file changed, 2 insertions(+) (limited to 'packages/dev-tools-pages/ts/highlight.tsx') diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx index 0c4602d51..9d7844c89 100644 --- a/packages/dev-tools-pages/ts/highlight.tsx +++ b/packages/dev-tools-pages/ts/highlight.tsx @@ -1,6 +1,8 @@ const highlight = require('highlight.js/lib/highlight'); const javascript = require('highlight.js/lib/languages/javascript'); +const json = require('highlight.js/lib/languages/json'); highlight.registerLanguage('javascript', javascript); +highlight.registerLanguage('json', json); export default highlight; -- cgit v1.2.3 From 43e55a963bef2a2e4740ce27d456927b020b71f2 Mon Sep 17 00:00:00 2001 From: August Skare Date: Thu, 25 Oct 2018 12:19:56 +0100 Subject: Feature/syntaxhighlighting (#9) * wip code highlighting of lines * Implements gutter component * WIP: Profiler with gutter * cleaned up highlight code * Removes before content for gutter styling * Styles gutter * Add correct Profiler code content * Adds color variable for gutter gray * refactor code component width gutter and diffing --- packages/dev-tools-pages/ts/highlight.tsx | 47 ++++++++++++++++++++++++++++--- 1 file changed, 43 insertions(+), 4 deletions(-) (limited to 'packages/dev-tools-pages/ts/highlight.tsx') diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx index 9d7844c89..7187118d0 100644 --- a/packages/dev-tools-pages/ts/highlight.tsx +++ b/packages/dev-tools-pages/ts/highlight.tsx @@ -1,8 +1,47 @@ -const highlight = require('highlight.js/lib/highlight'); +const hljs = require('highlight.js/lib/highlight'); const javascript = require('highlight.js/lib/languages/javascript'); -const json = require('highlight.js/lib/languages/json'); -highlight.registerLanguage('javascript', javascript); -highlight.registerLanguage('json', json); +hljs.registerLanguage('javascript', javascript); + +interface PatchInterface { + [key: string]: string; +} + +var PATCH_TYPES: PatchInterface = { + '+': 'addition', + '-': 'deletion', + '!': 'change', +}; + +function diffHighlight(language: string, code: any, gutter: any) { + return code + .split(/\r?\n/g) + .map((line: string, index: number) => { + var type; + if (/^-{3} [^-]+ -{4}$|^\*{3} [^*]+ \*{4}$|^@@ [^@]+ @@$/.test(line)) { + type = 'chunk'; + } else if (/^Index: |^[+\-*]{3}|^[*=]{5,}$/.test(line)) { + type = 'header'; + } else { + type = PATCH_TYPES[line[0] as string] || 'null'; + line = line.replace(/^[+\-! ]/, ''); + } + + const g = gutter[index]; + + return `${ + hljs.highlight(language, line).value + }`; + }) + .join('\n'); +} + +function highlight(language: string, code: string, diff: boolean, gutter: any) { + if (diff) { + return diffHighlight(language, code, gutter); + } + + return hljs.highlight(language, code).value; +} export default highlight; -- cgit v1.2.3 From 1581ced6ec828d5b404dbcd1d7a09c0d8778a442 Mon Sep 17 00:00:00 2001 From: August Skare Date: Thu, 25 Oct 2018 14:08:55 +0200 Subject: add json support to highlight --- packages/dev-tools-pages/ts/highlight.tsx | 2 ++ 1 file changed, 2 insertions(+) (limited to 'packages/dev-tools-pages/ts/highlight.tsx') diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx index 7187118d0..8dff4c9e9 100644 --- a/packages/dev-tools-pages/ts/highlight.tsx +++ b/packages/dev-tools-pages/ts/highlight.tsx @@ -1,7 +1,9 @@ const hljs = require('highlight.js/lib/highlight'); const javascript = require('highlight.js/lib/languages/javascript'); +const json = require('highlight.js/lib/languages/json'); hljs.registerLanguage('javascript', javascript); +hljs.registerLanguage('json', json); interface PatchInterface { [key: string]: string; -- cgit v1.2.3 From 6b11ca6c1dc2a81abb17e85204f708f1ad68dec9 Mon Sep 17 00:00:00 2001 From: August Skare Date: Tue, 30 Oct 2018 09:05:52 +0100 Subject: fix code highlighting with ... --- packages/dev-tools-pages/ts/highlight.tsx | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) (limited to 'packages/dev-tools-pages/ts/highlight.tsx') diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx index 8dff4c9e9..64c5f9a17 100644 --- a/packages/dev-tools-pages/ts/highlight.tsx +++ b/packages/dev-tools-pages/ts/highlight.tsx @@ -38,12 +38,30 @@ function diffHighlight(language: string, code: any, gutter: any) { .join('\n'); } -function highlight(language: string, code: string, diff: boolean, gutter: any) { +interface highlightProps { + language: string; + code: string; + diff?: boolean; + gutter?: boolean; + etc?: boolean; +} + +function highlight({ language, code, diff, gutter, etc }: highlightProps) { if (diff) { return diffHighlight(language, code, gutter); } - return hljs.highlight(language, code).value; + let hlCode = hljs.highlight(language, code).value; + + if (!etc) { + return hlCode; + } + + var hc = hlCode.split(/\r?\n/g); + hc.splice(1, 0, ' ...'); + hc.splice(hc.length - 1, 0, ' ...'); + + return hc.join('\n'); } export default highlight; -- cgit v1.2.3 From eb9d80214693f7fb7c95ab6da546b6d89d33bee6 Mon Sep 17 00:00:00 2001 From: August Skare Date: Tue, 30 Oct 2018 09:07:25 +0100 Subject: rename pesudo element in code gutter --- packages/dev-tools-pages/ts/highlight.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/dev-tools-pages/ts/highlight.tsx') diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx index 64c5f9a17..6efba02f8 100644 --- a/packages/dev-tools-pages/ts/highlight.tsx +++ b/packages/dev-tools-pages/ts/highlight.tsx @@ -31,7 +31,7 @@ function diffHighlight(language: string, code: any, gutter: any) { const g = gutter[index]; - return `${ + return `${ hljs.highlight(language, line).value }`; }) -- cgit v1.2.3 From 54bd7df900316504e4403bc94cffd92930a6c763 Mon Sep 17 00:00:00 2001 From: August Skare Date: Fri, 16 Nov 2018 11:05:30 +0100 Subject: fix linting + code syntax for statless components --- packages/dev-tools-pages/ts/highlight.tsx | 46 ++++++++++++++++--------------- 1 file changed, 24 insertions(+), 22 deletions(-) (limited to 'packages/dev-tools-pages/ts/highlight.tsx') diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx index 6efba02f8..cef03904a 100644 --- a/packages/dev-tools-pages/ts/highlight.tsx +++ b/packages/dev-tools-pages/ts/highlight.tsx @@ -1,6 +1,6 @@ -const hljs = require('highlight.js/lib/highlight'); -const javascript = require('highlight.js/lib/languages/javascript'); -const json = require('highlight.js/lib/languages/json'); +import * as hljs from 'highlight.js/lib/highlight'; +import * as javascript from 'highlight.js/lib/languages/javascript'; +import * as json from 'highlight.js/lib/languages/json'; hljs.registerLanguage('javascript', javascript); hljs.registerLanguage('json', json); @@ -9,59 +9,61 @@ interface PatchInterface { [key: string]: string; } -var PATCH_TYPES: PatchInterface = { +const PATCH_TYPES: PatchInterface = { '+': 'addition', '-': 'deletion', '!': 'change', }; -function diffHighlight(language: string, code: any, gutter: any) { +function diffHighlight(language: string, code: any, gutter: any): string { return code .split(/\r?\n/g) .map((line: string, index: number) => { - var type; - if (/^-{3} [^-]+ -{4}$|^\*{3} [^*]+ \*{4}$|^@@ [^@]+ @@$/.test(line)) { + let type; + let currentLine = line; + + if (/^-{3} [^-]+ -{4}$|^\*{3} [^*]+ \*{4}$|^@@ [^@]+ @@$/.test(currentLine)) { type = 'chunk'; - } else if (/^Index: |^[+\-*]{3}|^[*=]{5,}$/.test(line)) { + } else if (/^Index: |^[+\-*]{3}|^[*=]{5,}$/.test(currentLine)) { type = 'header'; } else { - type = PATCH_TYPES[line[0] as string] || 'null'; - line = line.replace(/^[+\-! ]/, ''); + type = PATCH_TYPES[currentLine[0]] || 'null'; + currentLine = currentLine.replace(/^[+\-! ]/, ''); } const g = gutter[index]; - return `${ - hljs.highlight(language, line).value + return `${ + hljs.highlight(language, currentLine).value }`; }) .join('\n'); } -interface highlightProps { +interface HighlightProps { language: string; code: string; - diff?: boolean; - gutter?: boolean; - etc?: boolean; + isDiff?: boolean; + gutter?: []; + isEtc?: boolean; } -function highlight({ language, code, diff, gutter, etc }: highlightProps) { - if (diff) { +function highlight({ language, code, isDiff, gutter, isEtc }: HighlightProps): string { + if (isDiff) { return diffHighlight(language, code, gutter); } - let hlCode = hljs.highlight(language, code).value; + const hlCode = hljs.highlight(language, code).value; - if (!etc) { + if (!isEtc) { return hlCode; } - var hc = hlCode.split(/\r?\n/g); + const hc = hlCode.split(/\r?\n/g); hc.splice(1, 0, ' ...'); hc.splice(hc.length - 1, 0, ' ...'); return hc.join('\n'); } -export default highlight; +export { highlight }; -- cgit v1.2.3 From b0c22a222e09ef8008a1ef7cf79e28b73961560a Mon Sep 17 00:00:00 2001 From: August Skare Date: Tue, 20 Nov 2018 15:15:17 +0100 Subject: use lodash.map insted of array.map --- packages/dev-tools-pages/ts/highlight.tsx | 36 +++++++++++++++---------------- 1 file changed, 17 insertions(+), 19 deletions(-) (limited to 'packages/dev-tools-pages/ts/highlight.tsx') diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx index cef03904a..02f4a753e 100644 --- a/packages/dev-tools-pages/ts/highlight.tsx +++ b/packages/dev-tools-pages/ts/highlight.tsx @@ -1,6 +1,7 @@ import * as hljs from 'highlight.js/lib/highlight'; import * as javascript from 'highlight.js/lib/languages/javascript'; import * as json from 'highlight.js/lib/languages/json'; +import * as _ from 'lodash'; hljs.registerLanguage('javascript', javascript); hljs.registerLanguage('json', json); @@ -16,28 +17,25 @@ const PATCH_TYPES: PatchInterface = { }; function diffHighlight(language: string, code: any, gutter: any): string { - return code - .split(/\r?\n/g) - .map((line: string, index: number) => { - let type; - let currentLine = line; + return _.map(code.split(/\r?\n/g), (line: string, index: number) => { + let type; + let currentLine = line; - if (/^-{3} [^-]+ -{4}$|^\*{3} [^*]+ \*{4}$|^@@ [^@]+ @@$/.test(currentLine)) { - type = 'chunk'; - } else if (/^Index: |^[+\-*]{3}|^[*=]{5,}$/.test(currentLine)) { - type = 'header'; - } else { - type = PATCH_TYPES[currentLine[0]] || 'null'; - currentLine = currentLine.replace(/^[+\-! ]/, ''); - } + if (/^-{3} [^-]+ -{4}$|^\*{3} [^*]+ \*{4}$|^@@ [^@]+ @@$/.test(currentLine)) { + type = 'chunk'; + } else if (/^Index: |^[+\-*]{3}|^[*=]{5,}$/.test(currentLine)) { + type = 'header'; + } else { + type = PATCH_TYPES[currentLine[0]] || 'null'; + currentLine = currentLine.replace(/^[+\-! ]/, ''); + } - const g = gutter[index]; + const g = gutter[index]; - return `${ - hljs.highlight(language, currentLine).value - }`; - }) - .join('\n'); + return `${ + hljs.highlight(language, currentLine).value + }`; + }).join('\n'); } interface HighlightProps { -- cgit v1.2.3