var simpleDOM = require("can-simple-dom");
var document = new simpleDOM.Document();
var app = require("express")();
var steal = global.steal = require("steal").clone();
global.System = steal.System;
steal.config({
config: __dirname + "/package.json!npm",
meta: {
jquery: {
format: "global",
deps: ["can/util/vdom/vdom"]
}
}
});
steal.import("main.stache!", "models/appstate", function(tmpl, AppState){
app.get("/", function(req, res){
var pathname = url.parse(req.url).pathname;
var frag = tmpl(new AppState());
var html = frag.innerHTML;
req.send(html);
});
});
// app.js
import AppMap from "can-ssr/app-map";
import "can/map/define/";
export default AppMap.extend({
define: {
title: "place-my-order"
}
});
import Map from "can/map/";
import Component from "can/component/";
import Restaurant from "place-my-order/models/restaurant";
import "can/map/define/";
var ViewModel = Map.extend({
define: {
restaurants: {
get: function(){
var restaurants = Restaurant.getList();
this.attr("@root").pageData(restaurants);
return restaurants;
}
}
}
});
<!doctype html>
<html>
<head>
<title>Place My Order</title>
</head>
<body>
<can-import from="./app" as="viewModel" />
<can-import from="place-my-order-assets" />
<can-import from="loading.component!" />
{{#if page "home"}}
<can-import from="home.component!" can-tag="loading">
<home-page></home-page>
</can-import>
{{/if}}
</body>
</html>
https://github.com/donejs/autorender
But.
index.stache -> place-my-order-assets
home.component -> <style>
order/history -> order/history/list -> list.less
{
"home.component": {
"index.stache"
},
"restaurant/list/list": {
index.stache"
},
"models/order": {
"restaurant/order/new/new",
"order/history/history"
}
}
var register = require("asset-register");
var style = document.createStyle();
...
register("order/history/history.less", "css", function(){
return style.cloneNode(true);
});
{
"index.stache": {
"place-my-order-assets": {
"type": "css",
"value": function(){ ... }
}
},
"order/history/history": {
"history.less": {
"type": "css",
"value": function() { ... }
}
},
"@global": {
"inline-cache": {
"type": "inline-cache",
"value": { ... }
}
}
}
<!doctype html>
<html>
<head>
<title>Place My Order</title>
{{asset "css"}}
</head>
<body>
<can-import ....>
{{asset "inline-cache"}}
</body>
</html>
https://github.com/canjs/can-ssr
var render = require("can-ssr")({
config: __dirname + "/package.json!npm"
});
// Example:
var renderPromise = render("/restaurants");
// Example:
var startup = steal.startup();
startup.then(function(autorender){
var viewModel = new autorender.viewModel;
});
// Example:
var routeData = can.route.deparam("/restaurants");
viewModel.attr(routeData);
// Example:
var frag = autorender.render(viewModel);
// Example:
var readyPromises = viewModel.__readyPromises;
Promise.all(readyPromises).then(function(){
// frag should have all the elements.
});
This is needed to know which rendering assets are part of the request.
var imports = viewModel.attr("renderingAssets");
// These are top-level modules such as
// index.stache, restaurant/list/list
var frag = document.createFragment();
imports.forEach(function(moduleName){
var bundle = bundleMap[moduleName];
for(var assetName in bundle) {
var createElement = bundle[assetName];
frag.appendChild(createElement());
}
});
return frag;
var doc = new document.constructor;
doc.documenteElement.appendChild(renderedFragment);
var html = doc.documentElement.innerHTML;
traverse(frag, function(el){
can.trigger(el, "removed");
});