Permalink
Browse files

docs: Precompiled, packaged & minified version

This PR updates the playground build to be precompiled (hsp, and js
transpiled) packaged and minified.

The goal is to optimize the initial display of the playground.
  • Loading branch information...
1 parent f824098 commit a78257e91ef27a71951663b02d8dda13b10e10f0 @benouat committed Jul 16, 2014
Showing with 626 additions and 309 deletions.
  1. +158 −20 build/grunt/docs.js
  2. +5 −1 docs/_css/site.less
  3. +1 −0 docs/_layouts/sample_desc.html
  4. +10 −14 docs/playground/index.md
  5. +44 −3 docs/playground/layout.hsp
  6. +60 −63 docs/playground/playground.js
  7. +6 −2 docs/samples/clickhandler/clickhandler.hsp
  8. +9 −6 docs/samples/clock/clock.hsp
  9. +7 −4 docs/samples/component1/timer.hsp
  10. +35 −30 docs/samples/component2/nbrfield.hsp
  11. +16 −12 docs/samples/component3/pagination.hsp
  12. +13 −7 docs/samples/conditions/conditions.hsp
  13. +9 −5 docs/samples/cssclass/cssclass.hsp
  14. +8 −5 docs/samples/dynpath/dynpath.hsp
  15. +7 −2 docs/samples/dyntemplates/dyntemplates.hsp
  16. +7 −3 docs/samples/gestures/gestures.hsp
  17. +9 −2 docs/samples/global/global.hsp
  18. +15 −1 docs/samples/helloworld/description.md
  19. +6 −2 docs/samples/helloworld/hello.hsp
  20. +10 −6 docs/samples/inputsample/inputsample.hsp
  21. +7 −3 docs/samples/let/let.hsp
  22. +12 −8 docs/samples/list1/list.hsp
  23. +11 −7 docs/samples/list2/list.hsp
  24. +7 −4 docs/samples/listsorting/list.hsp
  25. +10 −6 docs/samples/listupdate/list.hsp
  26. +8 −4 docs/samples/logs/logs.hsp
  27. +8 −2 docs/samples/modifiers/modifiers.hsp
  28. +9 −5 docs/samples/panel/panel.hsp
  29. +0 −1 docs/samples/samples.js
  30. +7 −4 docs/samples/simplelist/simplelist.hsp
  31. +7 −2 docs/samples/subtemplates/subtemplates.hsp
  32. +5 −2 docs/samples/tabbar/tabbar.hsp
  33. +6 −1 docs/samples/textarea/textarea.hsp
  34. +11 −3 docs/samples/thirdpartycpts/chart.hsp
  35. +9 −3 docs/samples/timer/timer.hsp
  36. +7 −2 docs/samples/todolist/todolist.hsp
  37. +67 −64 gruntfile.js
View
@@ -22,6 +22,7 @@ module.exports = function(grunt) {
var DOCS_PATH = "./docs/";
var DOCS_MD_GLOB = [ '**/*.md', '!samples/**/*.md' ],
+ DOCS_MD_SAMPlES = [ 'samples/**/*.md' ],
DOCS_STATICS_GLOB = [
'css/**',
'images/*',
@@ -49,9 +50,10 @@ module.exports = function(grunt) {
WATCH_PLAYGROUND_GLOB = DOCS_PLAYGROUND_GLOB.map(pathifyFromDocs);
-
- // Less compilation
-
+ /* ------------------
+ * Less compilation
+ * ------------------
+ */
grunt.config.set('less', {
"docs": {
options: {
@@ -71,9 +73,12 @@ module.exports = function(grunt) {
});
- // Uglify TODOMVC
+ /* ----------------
+ * Uglify Playground + Samples + TODOMVC
+ * ----------------
+ */
var uglifyConfig = grunt.config("uglify");
- uglifyConfig.todomvc = {
+ uglifyConfig["todomvc"] = {
files: [
{
expand: true,
@@ -82,11 +87,21 @@ module.exports = function(grunt) {
]
};
- grunt.config("uglify", uglifyConfig);
-
+ uglifyConfig["playground"] = {
+ files: [
+ {
+ expand: true,
+ src: [ GH_PAGES_PATH + 'playground/*-all.js' ]
+ }
+ ]
+ };
- // Markdown Generation
+ grunt.config("uglify", uglifyConfig);
+ /* ----------------------
+ * Markadown Generation
+ * ----------------------
+ */
function extractYamlHeader(src, context) {
var splits = src.split(yamlheadsep), yamlheader, markdown = src;
// we might have a yaml markdown header
@@ -158,10 +173,33 @@ module.exports = function(grunt) {
highlight: "manual"
}
}
+ },
+ "samples": {
+ files: [
+ {
+ expand: true,
+ cwd: DOCS_PATH,
+ src: DOCS_MD_SAMPlES,
+ dest: GH_PAGES_PATH,
+ ext: '.html'
+ }
+ ],
+ options: {
+ template: DOCS_PATH + '_layouts/sample_desc.html',
+ postCompile: function(markdown, context) {
+ return markdown.replace("<p>[#output]</p>", "[#output]");
+ },
+ markdownOptions: {
+ gfm: true
+ }
+ }
}
});
- // TODOMVC precompilation
+ /* ------------------------
+ * TODOMVC precompilation
+ * ------------------------
+ */
grunt.registerTask("docs:todo-compile", "Precompile all related files for TODOMVC example", function() {
var renderer = require("../../hsp/compiler/renderer"),
tranpiler = require("../../hsp/transpiler");
@@ -212,7 +250,10 @@ module.exports = function(grunt) {
});
}
- // Playground Express Server
+ /* ---------------------------
+ * Playground Express Server
+ * ---------------------------
+ */
grunt.registerTask("docs:playground-server", "Launch local version of documentation including playground", function() {
grunt.config.requires('hspserver.port');
grunt.config.requires('hspserver.base');
@@ -276,30 +317,120 @@ module.exports = function(grunt) {
});
- // Building all needed files for the playground
+ /* ----------------------------------------------
+ * Building all needed files for the playground
+ * ----------------------------------------------
+ */
+
+ // updating atpackager config to package the playground
+ var atpackagerConfig = grunt.config('atpackager');
+ atpackagerConfig["docs-playground"] = {
+ options: {
+ sourceDirectories : [
+ GH_PAGES_PATH
+ ],
+ outputDirectory : GH_PAGES_PATH + 'playground/',
+ visitors: [],
+ defaultBuilder : {
+ type : "NoderPackage",
+ cfg : {
+ outputFileWrapper : "(function(define){$CONTENT$;})(noder.define);"
+ }
+ },
+ packages : [{
+ name : "playground-samples-all.js",
+ files : [ 'samples/**/*.js']
+ }, {
+ name : "playground-all.js",
+ files : [ 'playground/**/*.js']
+ }]
+ }
+ };
+ grunt.config('atpackager', atpackagerConfig);
+
+ grunt.registerTask("docs:samples-list-build", "Build a json file containing the samples list", function() {
+ // Merging those markdown content into `samples/samples.js`
+ var samplesList = require('../../docs/samples/samples'), samplesListString;
+
+ grunt.file.expand({ cwd: DOCS_PATH, filter: "isDirectory" }, ['samples/*']).forEach(function(sample) {
+ var name = sample.split("/").pop(),
+ item = (samplesList.filter(function(s) { return s.folder === name; }) || [])[0],
+ hsp, html, desc, hsptext;
+
+ if (item) {
+ hsp = sample + "/" + item.files[0].src;
+ html = sample + "/description.html";
+ desc = grunt.file.read(GH_PAGES_PATH + html);
+ hsptext = grunt.file.read(DOCS_PATH + hsp);
+
+ item.description = desc;
+ item.files[0].text = hsptext;
+ item.sample = "require('/"+hsp+".js')";
+ }
+ });
+
+ samplesListString = JSON.stringify(samplesList, null, 2);
+ samplesListString = samplesListString.replace(/"(require\('.*'\))"/gi, "$1");
+ grunt.file.write(GH_PAGES_PATH + "samples/samples.js", "module.exports = " + samplesListString + ";");
+ });
grunt.registerTask("docs:playground-build", "Build a static playground version", function() {
+ var renderer = require("../../hsp/compiler/renderer"),
+ tranpiler = require("../../hsp/transpiler");
grunt.log.subhead("Building playground and samples files");
+
// We copy the Playground files
- grunt.verbose.or.write("Copying playground file...");
+ grunt.verbose.or.write("Copying playground files...");
grunt.file.expand({ cwd: DOCS_PATH, filter: "isFile" }, DOCS_PLAYGROUND_GLOB).forEach(function(file) {
grunt.file.copy(DOCS_PATH + file, GH_PAGES_PATH + file);
});
grunt.verbose.or.ok();
+
// We copy the Samples files
grunt.verbose.or.write("Copying samples file...");
grunt.file.expand({ cwd: DOCS_PATH, filter: "isFile" }, DOCS_SAMPLES_GLOB).forEach(function(file) {
grunt.file.copy(DOCS_PATH + file, GH_PAGES_PATH + file);
});
grunt.verbose.or.ok();
- });
+ grunt.verbose.or.write("Compiling playground & samples hsp files...");
+ grunt.file.expand({ cwd: DOCS_PATH }, ['playground/**/*.hsp', 'samples/**/*.hsp']).forEach(function(file) {
+ grunt.file.copy(pathifyFromDocs(file),
+ GH_PAGES_PATH + file + ".js",
+ {
+ process: function(content) {
+ var compiled = renderer.renderString(content, "inline.js");
+ if (compiled.serverErrors && compiled.serverErrors.length) {
+ grunt.fail.fatal("Hashspace compilation " + compiled.serverErrors[0].description);
+ return false;
+ }
+ return compiled.code;
+ }
+ });
+ });
+ grunt.file.expand({ cwd: DOCS_PATH }, ['playground/**/*.js']).forEach(function(file) {
+ grunt.file.copy(pathifyFromDocs(file),
+ GH_PAGES_PATH + file,
+ {
+ process: function(content) {
+ var tranpiled = tranpiler.processString(content, "inline.js");
+ return tranpiled.code;
+ }
+ });
+ });
+ grunt.verbose.or.ok();
+
+ grunt.task.run(["markdown:samples", "docs:samples-list-build", "atpackager:docs-playground", "uglify:playground"]);
+ });
- // Preparing the build
+ /* ---------------------
+ * Preparing the build
+ * ---------------------
+ */
grunt.registerTask("docs:setup", "Verify that everything is fine before we start", function() {
if (!grunt.file.exists(GH_PAGES_PATH)) {
grunt.verbose.or.write(GH_PAGES_PATH + " does not exist, let's create it...");
@@ -317,8 +448,10 @@ module.exports = function(grunt) {
});
- // Copying static files
-
+ /* ----------------------
+ * Copying static files
+ * ----------------------
+ */
grunt.registerTask("docs:copy-statics", "Copy static files", function() {
// Moving previously built uglify.js to /libs
grunt.file.copy("tmp/uglify-js.js", GH_PAGES_PATH + 'libs/uglify-js.js');
@@ -347,8 +480,10 @@ module.exports = function(grunt) {
});
- // Watching stuff...
-
+ /* -------------------
+ * Watching stuff...
+ * -------------------
+ */
grunt.registerTask("docs:watch", "Watching any file where local website should be rebuild", function() {
var watchConfig = grunt.config("watch");
@@ -379,8 +514,10 @@ module.exports = function(grunt) {
- // Public tasks definition
-
+ /* -------------------------
+ * Public tasks definition
+ * -------------------------
+ */
grunt.registerTask("docs:todo-package", [
"docs:todo-compile",
"uglify:todomvc"
@@ -397,6 +534,7 @@ module.exports = function(grunt) {
]);
grunt.registerTask("docs:playground", [
+ "package",
"docs:prepare",
"docs:playground-build",
"docs:playground-server"
View
@@ -298,6 +298,11 @@ body.playground {
.item {
cursor: pointer;
padding-left: 12px;
+ a {
+ display: block;
+ color: inherit;
+ text-decoration: inherit;
+ }
&:hover {
background-color: #f0f0f0;
}
@@ -481,4 +486,3 @@ body.playground {
}
}
-
@@ -0,0 +1 @@
+<%=content%>
View
@@ -9,31 +9,27 @@ footerscripts: |
<script src="/libs/noder.dev.min.js">
{
packaging: {
- baseUrl: "/",
- preprocessors: [{
- pattern: /\.hsp$/,
- module: "hsp/compiler/compile"
- }, {
- pattern: /^(?!hsp\/|libs\/).*\.js$/,
- module: "hsp/transpiler/transpile"
- }]
+ baseUrl: "/"
},
resolver: {
- "default" : {
+ "default" : (location.href.indexOf("dev") !== -1 ? {
"uglify-js" : "/libs/uglify-js"
- }
+ } : {})
}
}
</script>
<script src="/dist/<%=version%>/hashspace-noder.min.js" type="text/javascript"></script>
- <script src="/dist/<%=version%>/hashspace-noder-compiler.min.js" type="text/javascript"></script>
+ <script src="/playground/playground-samples-all.js" type="text/javascript"></script>
+ <script src="/playground/playground-all.js" type="text/javascript"></script>
<script type="noder">
+ window.hashspace_version = "<%=version%>";
var Playground = require("/playground/playground");
+ var playground = new Playground("main", location.href.indexOf("dev") !== -1);
+ var sample = window.location.hash.length > 0 ? window.location.hash.substr(1) : 0;
+ playground.showSample(sample);
- var playground = new Playground("main");
- playground.showSample(0);
Router({
- ':key': playground.loadSample.bind(playground)
+ ':key': playground.loadSample.bind(playground)
}).init();
</script>
---
View
@@ -1,4 +1,46 @@
-var splitter = require("./splitter.hsp");
+var splitter = require("./splitter.hsp.js");
+
+var Class = require("hsp/klass");
+
+var DescriptionCtrl = Class({
+ attributes: {
+ sample: { type: "object", binding: "1-way" }
+ },
+ $init: function() {
+ this.onSampleChange();
+ },
+ $refresh: function() {
+ if (!this.sample) return;
+ var root = this.$getElement(0), before, after;
+ if (root) {
+ before = root.querySelector(".before");
+ after = root.querySelector(".after");
+ before.innerHTML = this.before;
+ after.innerHTML = this.after;
+ }
+ },
+
+ onSampleChange: function() {
+ if (!this.sample) return;
+ var parts = this.sample.description.split("[#output]");
+ this.before = parts[0];
+ this.after = parts[1];
+ }
+});
+
+{template desc using ctrl:DescriptionCtrl}
+ <div id="description">
+ {if ctrl.sample}
+ <div class="before"></div>
+ {/if}
+ <div id="output" class="output"></div>
+ <div id="logs" class="logoutput"></div>
+ {if ctrl.sample}
+ <div class="after"></div>
+ {/if}
+ </div>
+{/template}
+
{export template mainLayout(data, playground)}
<#sampleList data="{data}" playground="{playground}"/>
@@ -19,8 +61,7 @@ var splitter = require("./splitter.hsp");
<div class="description" style="left: {data.splitterPos}">
<div>
<h4>Description</h4>
- // TODO remove this fixed id
- <div id="description"></div>
+ <#desc sample="{data.samples[data.sampleIndex]}" />
</div>
</div>
</div>
Oops, something went wrong.

0 comments on commit a78257e

Please sign in to comment.