LD-162 precompile results for code exmaples

Author: zspitzer

api/rendering/SyntaxHighlighter.cfc

@@ -30,15 +30,53 @@ component {
 		var highlighted = highlighter.highlight( arguments.code, arguments.language, false );
 
 		if ( useTryCf ) {
-			var rawCode = '<script type="text/template" id="code-#LCase( Hash( highlighted ) )#" data-trycf="true" data-script="#( arguments.language == 'cfs' )#">'
+			var hashId = "code-#LCase( Hash( highlighted ) )#";
+			var rawCode = '<script type="text/template" id="#hashId#" data-trycf="true" data-script="#( arguments.language == 'cfs' )#">'
 						&     arguments.code
 						& '</script>' & Chr(10);
-			return rawCode & highlighted;
+			var codeResult = getCodeResult(arguments.code, arguments.language)
+			if ( isEmpty( codeResult ) )
+				return rawCode & highlighted;
+			var preview = '<div id="result-#hashId#" style="display:none;">#toBase64(codeResult)#</div>';
+			return rawCode & highlighted & preview;
 		}
 
 		return highlighted;
 	}
 
+	private function getCodeResult(code, lang) output=false {
+		var codeKey = createGUID();
+		server["_luceeExamples_#codeKey#"] = arguments.code;
+
+		// alas server.system is read only
+		//var env = duplicate(server.system.environment);
+		//var props = duplicate(server.system.properties);
+		//server.system.properties = {}; 
+		//server.system.environment = {}; 
+
+		try {
+			var res = _internalRequest(
+				template: "/exampleRunner/index.cfm",
+				form: {
+					codeKey: codeKey,
+					lang: arguments.lang
+				}
+			);
+		} catch(e){
+			//request.logger( e.message ); 
+			//dump(arguments);
+			//rethrow;
+			return e.message;
+		}
+
+		//server.system.environment = env;
+		//server.system.properties = props;
+
+		if (!structKeyExists(res, "fileContent"))
+			return "";
+		return res.fileContent;
+	}
+
 // PRIVATE HELPERS
 	private any function _getNextHighlight( required string text, required string startPos=1 ) {
 		var referenceRegex  = "```([a-z\+]+)?\n(.*?)\n```";

builders/html/assets/trycf/js/code-editor3.js

@@ -125,6 +125,7 @@ angular.module("code.editor", []).directive("codeEditor", function ($timeout) {
       showError: "@showError",
       asserts: "@asserts",
       code: "@code",
+      preview: "@preview",
       codeGist: "@codeGist",
       setupCode: "@setupCode",
       setupCodeGist: "@setupCodeGist",
@@ -135,6 +136,7 @@ angular.module("code.editor", []).directive("codeEditor", function ($timeout) {
     template: editorTemplate,
     link: function (scope, element, attrs) {
       scope.code = attrs.code;
+      scope.preview = attrs.preview;
       scope.codeGist = attrs.codeGist;
       scope.setupCode = attrs.setupCode;
       scope.setupCodeGist = attrs.setupCodeGist;
@@ -321,6 +323,7 @@ angular.module("code.editor", []).directive("codeEditor", function ($timeout) {
         aceEditor.resize(true);
       }
       editor.show();
+      resultsDiv.html(attrs.preview);
       if (scope.fullscreen !== undefined && scope.fullscreen == "true") {
         toggleFullscreen();
       }

builders/html/assets/trycf/js/docscodeloader.js

@@ -19,6 +19,13 @@
 			code = "<cfscript>\n" + code + "\n</cfscript>";
 		}
 		editor.setAttribute( "code", code );
+
+		preview = parent.document.getElementById( "result-" + codeContainer.id );
+		if ( preview ){
+			editor.setAttribute( "preview", atob(preview.innerHTML) );
+		} else {
+			console.error("failed to load example preview");
+		}
 	}
 
 } )();

exampleRunner/Application.cfc

@@ -0,0 +1,4 @@
+component {
+    this.name="lucee-docs-code-result-preview-#createUniqueID()#";
+    this.applicationtimeout="#createTimeSpan(0,0,0,5)#";
+}

exampleRunner/index.cfm

@@ -0,0 +1,23 @@
+<cfparam name="form.lang">
+<cfparam name="form.codeKey">
+
+<cfscript>
+    // only reachable via internalRequest
+    if (len(cgi.HTTP_USER_AGENT?:"") eq 0 && structKeyExists(server, "_luceeExamples_#form.codeKey#")){
+        src = server["_luceeExamples_#form.codeKey#"];
+        structDelete(server, "_luceeExamples_#form.codeKey#");
+        try {
+            if (form.lang eq "cfs"){
+                echo( render( "<cfscript> #src##chr(10)#</cfscript>" ) );
+            } else {
+                echo( render( src ) );
+            }
+        } catch(e){
+            //dump(arguments);
+            //dump(src);
+            header statuscode="500";
+            echo(e.message);
+            //abort;
+        }
+    }
+</cfscript>