Add Code Block Component

.changeset/odd-owls-compare.md

@@ -0,0 +1,10 @@
+---
+"@evidence-dev/preprocess": minor
+"@evidence-dev/components": patch
+---
+
+Add CodeBlock component, include it by default in .md files
+
+Modify highlight to treat code blocks with language names as code, instead of queries.
+
+Could contain minor breaking changes for users that have queries that share names with languages.

package.json

@@ -9,24 +9,24 @@
 		"@sveltejs/adapter-static": "1.0.0-next.22",
 		"@sveltejs/kit": "1.0.0-next.202",
 		"@sveltejs/vite-plugin-svelte": "1.0.0-next.41",
-		"vite": "2.9.5",
 		"@tidyjs/tidy": "2.4.4",
 		"downloadjs": "1.4.7",
 		"echarts": "5.3.2",
 		"echarts-stat": "1.2.0",
+		"eslint": "^8.15.0",
 		"export-to-csv": "0.2.1",
-		"ssf": "^0.11.2",
 		"git-remote-origin-url": "4.0.0",
+		"prettier": "2.6.2",
+		"prettier-plugin-svelte": "2.7.0",
+		"prismjs": "^1.29.0",
+		"ssf": "^0.11.2",
 		"svelte": "3.44.3",
 		"svelte-icons": "2.1.0",
 		"svelte2tsx": "0.4.7",
 		"typescript": "4.5.4",
 		"uvu": "0.5.2",
-		"vite-plugin-full-reload": "0.2.2",
-		"eslint": "^8.15.0",
-		"prettier": "2.6.2",
-		"prettier-plugin-svelte": "2.7.0"
-
+		"vite": "2.9.5",
+		"vite-plugin-full-reload": "0.2.2"
 	},
 	"scripts": {
 		"release": "pnpm --filter ./sites/example-project package && pnpm --filter ./packages/evidence build && pnpm changeset publish",

packages/preprocess/index.cjs

@@ -5,6 +5,24 @@ const visit = require('unist-util-visit')
 const md5 = require("blueimp-md5");
 const fs = require('fs')
 const fsExtra = require('fs-extra')
+const PrismComponents = require("prismjs/components");
+const { supportedLangs } = require("./supportedLanguages.cjs");
+const prismLangs = new Set()
+
+supportedLangs.forEach((supportedLanguage) => {
+    prismLangs.add(supportedLanguage)
+    if (supportedLanguage in PrismComponents.languages) {
+        const languageComponent = PrismComponents.languages[supportedLanguage]
+        if (languageComponent.alias) {
+            if (Array.isArray(languageComponent.alias)) {
+                languageComponent.alias.forEach(a => prismLangs.add(a))
+            } else {
+                prismLangs.add(languageComponent.alias)
+            }
+        }
+    }
+})
+
 const { removeSync, writeJSONSync, emptyDirSync } = fsExtra
 
 const getRouteHash = function(filename){
@@ -81,6 +99,7 @@ const createDefaultProps = function(filename, componentDevelopmentMode, fileQuer
         import ScatterPlot from '${componentSource}/viz/ScatterPlot.svelte';
         import Histogram from '${componentSource}/viz/Histogram.svelte';
         import ECharts from '${componentSource}/viz/ECharts.svelte';
+        import CodeBlock from '${componentSource}/viz/CodeBlock.svelte';
         import { PAGE_QUERY_RESULTS, CUSTOM_FORMATTING_SETTINGS_CONTEXT_KEY } from '${componentSource}/modules/globalContexts';
 
         let routeHash = '${routeHash}';
@@ -172,6 +191,8 @@ const updateExtractedQueriesDir = function(content, filename){
 
     visit(tree, 'code', function(node) {
         let id = node.lang ?? 'untitled'
+        // Prevent "real" code blocks from being interpreted as queries
+        if (prismLangs.has(id.toLowerCase())) return
         let compiledQueryString = node.value.trim() // refs get compiled and sent to db orchestrator
         let inputQueryString = compiledQueryString // original, as written 
         let compiled = false // default flag, switched to true if query is compiled
@@ -233,15 +254,21 @@ const updateExtractedQueriesDir = function(content, filename){
     return queryIds;
 }
 
-function highlighter(code, lang) {
+function highlighter(code, lang, meta) {
     code = code.replace(/'/g, "'");
     code = code.replace(/"/g, """);
 
     // Repalce curly braces or Svelte will try to evaluate as a JS expression
     code = code.replace(/{/g, "{").replace(/}/g,"}");
-    return `
-    <QueryViewer pageQueries = {data.evidencemeta.queries} queryID = "${lang ?? 'untitled'}" queryResult = {data.${lang ?? 'untitled'}}/>
-    `;
+
+    // Strip braces {} from meta attribute (stores the lines to highlight)
+    let highlightLines = meta?.replace(/{/g, "").replace(/}/g,"") ?? null;
+
+    // Ensure that "real" code blocks are rendered with syntax highlighting.
+    if (prismLangs.has(lang.toLowerCase())) {
+      return `<CodeBlock source="${code}" language="${lang.toLowerCase()}" highlightLines="${highlightLines}"/>`;
+    }
+    return `<QueryViewer pageQueries = {data.evidencemeta.queries} queryID = "${lang ?? 'untitled'}" queryResult = {data.${lang ?? 'untitled'}}/>`;
 }
 
 module.exports = function evidencePreprocess(componentDevelopmentMode = false){

packages/preprocess/package.json

@@ -9,6 +9,7 @@
     "blueimp-md5": "^2.19.0",
     "fs-extra": "^9.1.0",
     "mdsvex": "^0.10.6",
+    "prismjs": "^1.29.0",
     "remark-parse": "8.0.2",
     "unified": "^9.1.0",
     "unist-util-visit": "^2.0.3"

packages/preprocess/supportedLanguages.cjs

@@ -0,0 +1,30 @@
+module.exports = {
+  // Case insensitive
+  supportedLangs: [
+    "JavaScript",
+    "HTML",
+    "CSS",
+    "SQL",
+    "Python",
+    "TypeScript",
+    "Java",
+    "Bash",
+    "CSharp",
+    "C++",
+    "PHP",
+    "C",
+    "PowerShell",
+    "Go",
+    "Rust",
+    "Kotlin",
+    "Dart",
+    "Ruby",
+    "R",
+    "MATLAB",
+    "DAX",
+    "JSON",
+    "YAML",
+    "Markdown",
+    "Code"
+  ].map(r => r.toLowerCase()),
+};

sites/example-project/src/components/modules/prismPreconditions.js

@@ -0,0 +1,4 @@
+if (typeof window !== 'undefined') {
+    window.Prism = window.Prism || {}
+    window.Prism.manual = true
+  }