We Keep Coding

How use Express as an API web server with custom document renderer as middleware? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have a code generator that I created, and I would like to have the ability to run it on the server. The generator uses pure native ECMA6 javascript to render HTML markup, but is transpiled to ES5 before runtime via Babel and WebPack.
I wish to leverage this on NodeJS, but without an entire rewrite if possible.
I have used Node with Express + EJS/Pug/HTML/JSX and some other frameworks, however, there is always middleware involved.
Here is the code I tried (runtime/transpiled version # ES5):
var fs = require('fs');
var _typeof = typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol' ? function (obj) {
return typeof obj;
} : function (obj) {
return obj && typeof Symbol === 'function' && obj.constructor === Symbol ? 'symbol' : typeof obj;
};
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError('Cannot call a class as a function');
}
}
var JSML = function () {
'use strict';
function JSML(stdIn) {
_classCallCheck(this, JSML);
this.output = '';
this.parse(stdIn);
return this.output;
}
JSML.prototype.generateAttributeKeyValueString = function generateAttributeKeyValueString(key, value) {
return key + '=\'' + value + '\'';
};
JSML.prototype.camelCaseToDashes = function camelCaseToDashes(str) {
return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
};
JSML.prototype.generateDom = function generateDom(vNode) {
var self = this, selfClosingTagNames = [
'area',
'base',
'br',
'col',
'command',
'embed',
'hr',
'img',
'input',
'keygen',
'link',
'meta',
'param',
'source',
'track',
'wbr'
], elmStart = '<' + vNode.elm, elmAttrs = '', elmEnd, elmContent;
selfClosingTagNames.forEach(function (selfClosingTagName) {
if (vNode.elm === selfClosingTagName)
elmEnd = '';
else
elmEnd = '</' + vNode.elm + '>';
});
function parseInput(vNode, key) {
if (!vNode.hasOwnProperty(key))
return;
var value = vNode[key], isActualInnerValueChildContents = key === 'inner' && typeof value === 'string', isChildrenContentArr = key === 'inner' && Array.isArray(value), isSingleChildContent = key === 'inner' && !isChildrenContentArr && (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object', isAttributeKeyValuePair = key !== 'elm' && key !== 'inner';
if (isActualInnerValueChildContents)
elmContent = value;
else if (isAttributeKeyValuePair)
elmAttrs += self.generateAttributeKeyValueString(self.camelCaseToDashes(key), value);
else if (isChildrenContentArr) {
elmContent = '';
value.forEach(function (subValue) {
elmContent += JSML.run(subValue).output;
});
} else if (isSingleChildContent)
elmContent = JSML.run(value).output;
}
for (var key in vNode){
if (vNode.hasOwnProperty(key)) parseInput(vNode, key);
}
elmStart += ' ' + elmAttrs + '>';
if (elmContent)
this.output = elmStart + elmContent + elmEnd;
else
this.output = elmStart + elmEnd;
};
JSML.prototype.parse = function parse(input) {
var self = this;
self.generateDom(input);
};
return JSML;
}();
JSML.run = function (appCode, target) {
var defaultTarget = 'body', dom = new JSML(appCode);
document.getElementsByTagName(target || defaultTarget)[0].innerHTML = dom.output;
return dom;
};
fs.writeFile("index2.html", JSML.run({
elm: 'img',
src: 'http://placehold.it/50x50'
}, function(err) {
if(err) {
return console.log(err);
}
console.log("The file was saved!");
});
I keep getting "unexpected token ;" in generateView.js at like 98
The main idea is I need to run the JavaScript on my API server, generate the markup needed from my custom templating and data-binding platform in order to serve the content generated from my script to the web.
Thank you, I am open to any helpful suggestions.

If I right understand, just put your code to js file, for example script.js. And run node script.js
Maybe yout have to wrap your class to module, this is good point where start learn https://nodejs.org/api/modules.html
Or if you want server, try Express js:
const express = require('express');
const app = express();
const JSML = express('./JSML'); // <--- your module
let jsml = newJSML();
app.get('/home', function(req, res){
res.send(jsml.run());
});
app.listen(80);

Angular2 rc1, where is shims_for_IE

There used to be shims_for_IE in Angular2 package, but since rc1 it's removed. So what's the workaround to support IE9+ ?
Error in IE 11 with rendering mode set to Edge:
Error: SyntaxError: Syntax error
at ZoneDelegate.prototype.invoke (http://localhost:11111/node_modules/zone.js/dist/zone.js:321:14)
at Zone.prototype.run (http://localhost:11111/node_modules/zone.js/dist/zone.js:216:18)
at Anonymous function (http://localhost:11111/node_modules/zone.js/dist/zone.js:571:18)
Evaluating http://localhost:11111/Scripts/script.js
Error loading http://localhost:11111/Scripts/script.js
Error in IE 11 with rendering mode set to IE 9:
File: script
Error: Expected ';'
Evaluating http://localhost:11111/Scripts/script.js
Error loading http://localhost:51592/Scripts/script.js
{
[functions]: ,
description: "Expected ';'
Evaluating http://localhost:11111/Scripts/script.js
Error loading http://localhost:11111/Scripts/script.js",
message: "Expected ';'
Evaluating http://localhost:11111/Scripts/script.js
Error loading http://localhost:11111/Scripts/script.js",
name: "Error",
originalErr: { },
stack: null
}
The script.js generated from script.ts as es6:
/// <amd-module name="script" />
System.register("script", ['#angular/core', '#angular/platform-browser-dynamic'], function(exports_1, context_1) {
"use strict";
var __moduleName = context_1 && context_1.id;
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1, platform_browser_dynamic_1;
var script;
return {
setters:[
function (core_1_1) {
core_1 = core_1_1;
},
function (platform_browser_dynamic_1_1) {
platform_browser_dynamic_1 = platform_browser_dynamic_1_1;
}],
execute: function() {
let script = class script {
constructor(element) {
this.loginUrl = '';
this.antiForgeryName = '';
this.antiForgeryValue = '';
this.loginError = '';
this.submitted = false;
this.loginUrl = element.nativeElement.getAttribute('loginurl');
this.antiForgeryName = element.nativeElement.getAttribute('antiforgeryname');
this.antiForgeryValue = element.nativeElement.getAttribute('antiforgeryvalue');
this.loginError = element.nativeElement.getAttribute('loginError') == null ? "" : element.nativeElement.getAttribute('loginError');
}
};
script = __decorate([
core_1.Component({
selector: 'script',
templateUrl: '/Home/ScriptTemplate.html'
}),
__metadata('design:paramtypes', [core_1.ElementRef])
], script);
exports_1("script", script);
platform_browser_dynamic_1.bootstrap(script);
}
}
});
//# sourceMappingURL=script.js.map
Update
So changing to follwing solves the issue which means shims are needed:
...
var script = function script() {
function() constructor(element) {
this.loginUrl = '';
this.antiForgeryName = '';
this.antiForgeryValue = '';
this.loginError = '';
this.submitted = false;
this.loginUrl = element.nativeElement.getAttribute('loginurl');
this.antiForgeryName = element.nativeElement.getAttribute('antiforgeryname');
this.antiForgeryValue = element.nativeElement.getAttribute('antiforgeryvalue');
this.loginError = element.nativeElement.getAttribute('loginError') == null ? "" : element.nativeElement.getAttribute('loginError');
}
};
...
But this looks like es3 transpile, which thanks to typescript is super impossible as i have tried every single .d.ts out there and it still complains promise not found, set not found, etc...
see: https://github.com/angular/angular/issues/7280

Easy fix. Download the Typings folder from beta.15 and place it under your project, then use browser.d.ts or simply downgrade to beta.15. Although I've seen solutions by installing typings package, it didn't work for me in Visual Studio.

I want to add constructor.name to a custom javascript class project

I use this small class function for my javascript code; actually it is somehow altered in the way it 'implements' other classes so that it 'inherets' only functions and not properties (see it at: https://github.com/centurianii/g3OO).
The problem is that it:
1) doesn't give a <object>.constructor.name, see No.3 and 4 at http://jsfiddle.net/A8SkN/3/ (eventually what I want is somehow to have the name of the new class which is stored in a variable-I know it's a complete madness compared with proper OO languages) and
2) doesn't pass any specific static property with name name (but it sees everything else as long as it has a different name!), see No.6 at jsfiddle above.
Here is the Class code:
(function(window, document, undefined){
// Namespace object
var g3;
// Return as AMD module or attach to head object
if (typeof define !== 'undefined')
define([], function () {
g3 = g3 || {};
return g3;
});
else if (typeof window !== 'undefined')
g3 = window.g3 = window.g3 || {};
else{
g3 = g3 || {};
module.exports = g3;
}
g3.Class = function () {
var len = arguments.length;
if(len === 0 || (len === 1 && arguments[0] === null))
return function() {};
var body = arguments[len - 1],
SuperClass = len > 1 ? arguments[0] : null,
implementClasses = len > 2,
Class,
SuperClassEmpty,
i;
//we expect last object to override 'constructor' otherwise the new is empty!
if (body.constructor === Object) {
Class = function() {};
} else {
Class = body.constructor;
delete body.constructor;
}
//'Class.Super' is a reserved word for g3.Class!
if (SuperClass) {
SuperClassEmpty = function() {};
SuperClassEmpty.prototype = SuperClass.prototype;
Class.prototype = new SuperClassEmpty();
Class.prototype.constructor = Class;
//doesn't work!
//Class.prototype.constructor.name = Class.prototype.toString();
Class.Super = SuperClass;
extend(Class, SuperClass, false); //works for static members!
}
if (implementClasses)
for (i = 1; i < len - 1; i++)
if(typeof arguments[i] === 'object')
extend(Class.prototype, arguments[i], false, 'function');
else
extend(Class.prototype, arguments[i].prototype, false);
extendClass(Class, body);
return Class;
};
function extendClass(Class, extension, override) {
//'STATIC' is a reserved word from last argument of g3.Class!
if (extension.STATIC) {
extend(Class, extension.STATIC, override); //overwrites previous parent's static members
delete extension.STATIC;
}
extend(Class.prototype, extension, override);
};
var extend = g3.Class.extend = function (obj, extension, override, type) {
var prop;
if (override === false) {
for (prop in extension)
if (!(prop in obj))
if(!type)
obj[prop] = extension[prop];
else if(typeof extension[prop] === type)
obj[prop] = extension[prop];
} else {
for (prop in extension)
if(!type)
obj[prop] = extension[prop];
else if(typeof extension[prop] === type)
obj[prop] = extension[prop];
if (extension.toString !== Object.prototype.toString)
obj.toString = extension.toString;
}
};
}(window, document));
Let's test Class:
///////TESTS///////
function Person(name){
this.name = name;
}
//Class Dreamer extends Person
var Dreamer = g3.Class(Person, {
STATIC: {
dreams: [],
name: 'Dreamer'
},
constructor: function(name, dream) {
//Explicit call to Dreamer.Super === Person
Dreamer.Super.call(this, name);
this.dream = dream;
},
add: function() {
Dreamer.dreams.push(this.dream);
},
toString: function(){
return 'Dreamer';
}
});
var poet = new Dreamer('Hary', 'I\'ll write a poem today!');
poet.add();
/////PRINT/////
var tests = '<ol><li>poet.toString() = ' + poet.toString() + '</li>';
tests += '<li>poet.constructor = ' + poet.constructor + '</li>';
tests += '<li>poet.constructor.name = ' + poet.constructor.name + '</li>';
tests += '<li>poet.constructor.name == \'\' : ' + (poet.constructor.name === '')+ '</li>';
tests += '<li>poet.prototype = ' + poet.prototype + '</li>';
if(poet.prototype)
tests += '<li>poet.prototype.constructor = ' + poet.prototype.constructor + '</li>';
tests += '<li>Dreamer.name = ' + Dreamer.name + '</li>';
tests += '<li>Dreamer.dreams = ' + Dreamer.dreams + '</li>';
document.getElementById('class').innerHTML = tests + '</ol>';
The results:
1. poet.toString() = Dreamer
2. poet.constructor = function (name, dream)...
3. poet.constructor.name =
4. poet.constructor.name == '' : true //empty string!
5. poet.prototype = undefined
6. Dreamer.name = //empty string!
7. Dreamer.dreams = I'll write a poem today!
Any ideas?
Thanks.

What does Dart's output look like?

Dart, Google's new web language, says it supports outputting to JavaScript.
What does a simple conversion look like?

main() {
print('Hello, Dart!');
}
When compiled with dart2js (as of 2013-04-26) (see note at bottom) it is converted into:
// Generated by dart2js, the Dart to JavaScript compiler.
// The code supports the following hooks:
// dartPrint(message) - if this function is defined it is called
// instead of the Dart [print] method.
// dartMainRunner(main) - if this function is defined, the Dart [main]
// method will not be invoked directly.
// Instead, a closure that will invoke [main] is
// passed to [dartMainRunner].
function Isolate() {}
init();
var $ = Isolate.$isolateProperties;
// Bound closures
$.Primitives_printString = function(string) {
if (typeof dartPrint == "function") {
dartPrint(string);
return;
}
if (typeof window == "object") {
if (typeof console == "object")
console.log(string);
return;
}
if (typeof print == "function") {
print(string);
return;
}
throw "Unable to print message: " + String(string);
};
$.main = function() {
$.Primitives_printString("Hello, Dart!");
};
$.String = {builtin$cls: "String"};
var $ = null;
Isolate = Isolate.$finishIsolateConstructor(Isolate);
var $ = new Isolate();
// BEGIN invoke [main].
if (typeof document !== "undefined" && document.readyState !== "complete") {
document.addEventListener("readystatechange", function () {
if (document.readyState == "complete") {
if (typeof dartMainRunner === "function") {
dartMainRunner(function() { $.main(); });
} else {
$.main();
}
}
}, false);
} else {
if (typeof dartMainRunner === "function") {
dartMainRunner(function() { $.main(); });
} else {
$.main();
}
}
// END invoke [main].
function init() {
Isolate.$isolateProperties = {};
Isolate.$finishIsolateConstructor = function(oldIsolate) {
var isolateProperties = oldIsolate.$isolateProperties;
isolateProperties.$currentScript = typeof document == "object" ? document.currentScript || document.scripts[document.scripts.length - 1] : null;
var isolatePrototype = oldIsolate.prototype;
var str = "{\n";
str += "var properties = Isolate.$isolateProperties;\n";
var hasOwnProperty = Object.prototype.hasOwnProperty;
for (var staticName in isolateProperties) {
if (hasOwnProperty.call(isolateProperties, staticName)) {
str += "this." + staticName + "= properties." + staticName + ";\n";
}
}
str += "}\n";
var newIsolate = new Function(str);
newIsolate.prototype = isolatePrototype;
isolatePrototype.constructor = newIsolate;
newIsolate.$isolateProperties = isolateProperties;
return newIsolate;
};
}
//# sourceMappingURL=out.js.map
Note for posterity: The original answer to this question has been modified to reflect the current state of affairs.
On 2012-05-12 the dart output for Hello World was 18,718 characters.
On 2012-08-29 the output was 1531 characters.
On 2013-04-26, the output was 2642 characters.
dart2js can minify code. Here is an example (as of 2013-04-26)
// Generated by dart2js, the Dart to JavaScript compiler.
function I(){}
init()
var $=I.p
$.ib=function(a){if(typeof dartPrint=="function"){dartPrint(a)
return}if(typeof window=="object"){if(typeof console=="object")console.log(a)
return}if(typeof print=="function"){print(a)
return}throw "Unable to print message: " + String(a)}
$.E2=function(){$.ib("Hello, Dart!")}
$.qU={builtin$cls:"qU"}
var $=null
I = I.$finishIsolateConstructor(I)
var $=new I()
if (typeof document !== "undefined" && document.readyState !== "complete") {
document.addEventListener("readystatechange", function () {
if (document.readyState == "complete") {
if (typeof dartMainRunner === "function") {
dartMainRunner(function() { $.E2(); });
} else {
$.E2();
}
}
}, false);
} else {
if (typeof dartMainRunner === "function") {
dartMainRunner(function() { $.E2(); });
} else {
$.E2();
}
}
function init(){I.p={}
I.$finishIsolateConstructor=function(a){var z=a.p
z.$currentScript=typeof document=="object"?document.currentScript||document.scripts[document.scripts.length-1]:null
var y=a.prototype
var x="{\n"
x+="var properties = I.p;\n"
var w=Object.prototype.hasOwnProperty
for(var v in z){if(w.call(z,v)){x+="this."+v+"= properties."+v+";\n"}}x+="}\n"
var u=new Function(x)
u.prototype=y
y.constructor=u
u.p=z
return u}}//# sourceMappingURL=out.js.map
On 2013-04-26, the minified code was 1386 characters.

The output of the Dart->JavaScript compiler is a moving target. The first release (technical preview) didn't do a lot of tree shaking and was thus pretty big.
The new (experimental) frog compiler is much better in this respect (David Chandler's blog), but I expect DartC to improve considerably too.

Is there a way to avoid eval in this block of JavaScript?

Is there a way to avoid eval in this block of js?
// Check requirements Prototype and Scriptaculous
(function () {
var requires = [
'Prototype'
, 'Scriptaculous'
]
while (r = requires.pop()) {
if (eval('typeof ' + r + ' == "undefined"')) alert(r + ' is required');
}
} ());

The eval here is completely pointless:
// since everything in the global scope gets defined on 'window'
typeof window[r] === 'undefined';
This will do the exact same thing, also note that r leaks into the global scope.
// Check requirements Prototype and Scriptaculous
(function () {
var requires = ['Prototype', 'Scriptaculous'];
var r = ''; // make sure to __not__ override a global r
while (r = requires.pop()) {
if (typeof window[r] === 'undefined') {
alert(r + ' is required');
}
}
} ());

How about
if (typeof window[r] == "undefined")

while (r = requires.pop()) {
if (typeof window[r] == "undefined") alert(r + ' is required');
}