Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Get build working with Dojo

  • Loading branch information...
commit 144751e9188f8331a0c5dd9139050b81560bb53d 1 parent 8f81f05
@kriszyp authored
View
42 build.js
@@ -1,8 +1,15 @@
-print("buidl");
+/*
+ * This module can be executed standalone in node, to build CSS files, inlining imports, and
+ * pre-processing extensions for faster run-time execution. This module is also
+ * used by the AMD build process.
+ */
document = {
createElement: function(){
- return {};
+ return {style:
+ {// TODO: may want to import static has features to determine if some of these exist
+ }
+ };
},
getElementsByTagName: function(){
return [];
@@ -20,15 +27,15 @@ var pseudoDefine = function(id, deps, factory){
pseudoRequire.isBuild = true;
xstyle = factory(pseudoRequire);
};
+var requiredModules = [];
+
if(typeof define == 'undefined'){
var fs = require('fs'),
pathModule = require('path'),
- xstyle,
- requiredModules = [];
+ xstyle;
define = pseudoDefine;
require('./xstyle');
}else{
- console.log("calling original define");
define(['build/fs'], function(fsModule){
fs = fsModule;
pathModule = {
@@ -39,7 +46,7 @@ if(typeof define == 'undefined'){
return function(xstyleText){
var define = pseudoDefine;
eval(xstyleText);
- return xstyle;
+ return process;
};
});
}
@@ -61,9 +68,14 @@ function process(cssText,basePath){
xstyle.parse.getStyleSheet = function(importRule, sequence, styleSheet){
console.log("path parst", styleSheet.href, sequence[1].value);
var path = pathModule.resolve(styleSheet.href, sequence[1].value);
- console.log("path", path);
+ var localSource = '';
+ try{
+ localSource = fs.readFileSync(path).toString("utf-8");
+ }catch(e){
+ console.error(e);
+ }
return {
- localSource: fs.readFileSync(path).toString("utf-8"),
+ localSource: localSource,
href: path,
insertRule: insertRule,
cssRules: []
@@ -73,19 +85,25 @@ function process(cssText,basePath){
var xstyleCss = [];
var rootRule = xstyle.parse(cssText, {href:basePath, cssRules:[], insertRule: insertRule});
console.log("requiredModules",requiredModules);
+ var intrinsicVariables = {
+ Math:1,
+ require:1,
+ item: 1
+ }
function visit(parent){
if(!parent.root){
browserCss.push(parent.selector + '{' + parent.cssText + '}');
}
for(var i in parent.variables){
- xstyleCss.push(i,'=',parent.variables[i]);
+ if(!intrinsicVariables.hasOwnProperty(i)){
+ xstyleCss.push(i,'=',parent.variables[i]);
+ }
}
}
visit(rootRule);
- console.log('browserCss:', browserCss.join(''));
- console.log('xstyleCss:', xstyleCss.join(''));
return {
- css: browserCss.join(''),
+ standardCss: browserCss.join(''),
+ xstyleCss: xstyleCss.join(';'),
requiredModules: requiredModules
};
}
View
89 build/amd-css.js
@@ -8,48 +8,93 @@ define(["dojo/json", "build/fs", "../build"], function(json, fs, buildModule){
// mid may contain a pragma (e.g. "!strip"); remove
mid = mid.split("!")[0];
var cssPlugin = bc.amdResources["xstyle/css"],
- moduleInfo = bc.getSrcModuleInfo(mid, referenceModule, true),
- cssResource = bc.resources[moduleInfo.url],
+ stylesheetInfo = bc.getSrcModuleInfo(mid, referenceModule, true),
+ cssResource = bc.resources[stylesheetInfo.url],
xstyleModuleInfo = bc.getSrcModuleInfo("xstyle/xstyle", referenceModule, true),
xstyleText = fs.readFileSync(xstyleModuleInfo.url + '.js', "utf8"),
- xstyle = buildModule(xstyleText);
- print('xstyle', xstyle);
- var text= fs.readFileSync(this.module.src, "utf8");
+ xstyleProcess = buildModule(xstyleText),
+ targetStylesheet = referenceModule.layer.targetStylesheet,
+ targetStylesheetContents = referenceModule.layer.targetStylesheetContents;
+ if(targetStylesheet){
+ // we want to calculate the target stylesheet relative to the layer
+ var layerModule = bc.getSrcModuleInfo(referenceModule.layer.name, referenceModule, true);
+ var targetStylesheetUrl = bc.getSrcModuleInfo(targetStylesheet, layerModule, true).url;
+ // create a replacement function, to replace the stylesheet with combined stylesheet
+ bc.replacements[targetStylesheetUrl] = [[function(){
+ return targetStylesheetContents;
+ }]];
+ if(!targetStylesheetContents){
+ // initialize the target stylesheet
+ var targetStylesheetContents = '';
+ try{
+ var targetStylesheetContents = fs.readFileSync(targetStylesheetUrl, 'utf8');
+ }catch(e){
+ console.error(e);
+ }
+ // one target stylesheet per layer
+ referenceModule.layer.targetStylesheetContents = targetStylesheetContents;
+ }
+ }else{
+ // there is no targe stylesheet, so
+ // we will be directly inlining the stylesheet in the layer, so we need the createStyleSheet module
+ var createStyleSheetModule = bc.getSrcModuleInfo('xstyle/util/createStyleSheet', referenceModule);
+ }
+ // read the stylesheet so we can process
+ var text= fs.readFileSync(stylesheetInfo.src, "utf8");
if (!cssPlugin){
throw new Error("text! plugin missing");
}
if (!cssResource){
- throw new Error("text resource (" + moduleInfo.url + ") missing");
+ throw new Error("text resource (" + stylesheetInfo.url + ") missing");
}
var result = [cssPlugin];
- if(bc.internStrings && !bc.internSkip(moduleInfo.mid, referenceModule)){
+ if(createStyleSheetModule){
+ // if we are inlining the stylesheet, we need the functionality to insert a stylesheet from text
+ result.push(bc.amdResources['xstyle/util/createStyleSheet']);
+ }
+ if(targetStylesheetUrl){
+ // accumulate all the stylesheets in our target stylesheet
+ var processed = processCss(cssResource);
+ targetStylesheetContents += processed.standardCss;
+ referenceModule.layer.targetStylesheetContents = targetStylesheetContents;
+ }
+ else if(bc.internStrings && !bc.internSkip(stylesheetInfo.mid, referenceModule)){
+ // or inline it
result.push({
module:cssResource,
- pid:moduleInfo.pid,
- mid:moduleInfo.mid,
+ pid:stylesheetInfo.pid,
+ mid:stylesheetInfo.mid,
deps:[],
getText:function(){
- var text = this.module.getText ? this.module.getText() : this.module.text;
- if(text===undefined){
- // the module likely did not go through the read transform; therefore, just read it manually
- text= fs.readFileSync(this.module.src, "utf8");
- }
- var processed = xstyleProcess(text, moduleInfo.url);
- for(var i = 0; i < processed.requiredModules.length; i++){
- console.log("processed mdoules", processed.requiredModules[i]);
- //moduleInfo = bc.getSrcModuleInfo(resolvedId, referenceModule),
- //module = bc.amdResources[moduleInfo.mid];
- }
-
- return json.stringify(processed.cssText+"");
+ var processed = processCss(this.module);
+ return processed.xstyleCss ?
+ json.stringify({
+ cssText: processed.standardCss,
+ xCss: processed.xstyleCss
+ }) :
+ json.stringify(processed.standardCss +"");
},
internStrings:function(){
return ["url:" + this.mid, this.getText()];
}
});
}
+ function processCss(module){
+ var text = module.getText ? module.getText() : module.text;
+ if(text===undefined){
+ // the module likely did not go through the read transform; therefore, just read it manually
+ text= fs.readFileSync(this.module.src, "utf8");
+ }
+ var processed = xstyleProcess(text, stylesheetInfo.url);
+ //for(var i = 0; i < processed.requiredModules.length; i++){
+ // TODO: at some point, we may add an option to include the modules that
+ // are required by the stylesheet, but at least by default these should
+ // probably be async lazy loaded
+ //}
+ return processed;
+ }
return result;
}
};
View
21 build/sample-dojo-profile.js
@@ -0,0 +1,21 @@
+dependencies = {
+ action: 'release',
+ plugins: {
+ "xstyle/css": "xstyle/build/amd-css"
+ },
+ layers: [
+ {
+ name: "../xstyle/moduleWithCss.js",
+ targetStylesheet: "./some-stylesheet.css",
+ dependencies: [
+ "xstyle.moduleWithCss"
+ ]
+ }],
+
+ prefixes: [
+ [ "xstyle", "C:/packages/xstyle" ],
+ [ "dojo", "C:/packages/dojo" ],
+ [ "put-selector", "C:/packages/put-selector" ]
+
+ ]
+};
View
2  test/converter.js
@@ -1,4 +1,4 @@
-define(['dbind/bind', 'xstyle/util/create-style-sheet', 'xstyle/xstyle'], function(bind, createStyleSheet, xstyle){
+define(['dbind/bind', 'xstyle/util/createStyleSheet', 'xstyle/xstyle'], function(bind, createStyleSheet, xstyle){
var model = {
data: '{\n "first": "Web",\n "last": "Developer",\n "favorites": [\n "Data Bindings", "CSS Extensions"\n ]\n}',
ui: "#target {\n => h2 (data/first+' '+data/last),\n ul (data/favorites) {\n color: #060;\n };\n background-color: #ccc;\n width: 200px;\n padding: 10px;\n}",
View
0  util/create-style-sheet.js → util/createStyleSheet.js
File renamed without changes
View
107 xstyle.js
@@ -78,7 +78,7 @@ define("xstyle/xstyle", ["require"], function (require, put) {
this.value = string;
}
LiteralString.prototype.toString = function(){
- return JSON.stringify(this.value);
+ return '"' + this.value.replace(/["\\]/g, '\\$&') + '"';
}
var ua = navigator.userAgent;
@@ -1400,57 +1400,62 @@ console.log("add", selector, cssText);
});
/*
* This is a very simple AMD module loader so that xstyle can be used standalone
- */
-function addXstyleDefine(){
- var doc = document;
- // find a script to go off of
- var scripts = doc.scripts;
- var baseScript = scripts[scripts.length-1];
- var baseUrl = baseScript.src.replace(/[^\/]+\/xstyle[^\/]*js/,'');
- // a very simple AMD loader
- define = function(id, deps, factory){
- var waiting = 1;
- for(var i = 0;i < deps.length; i++){
- var dep = deps[i];
- var module = modules[dep];
- if(!module){
- // inject script tag
- module = modules[dep] = {callbacks: []};
- var node = doc.createElement('script');
- node.src = baseUrl + dep + '.js';
+ */
+
+addXstyleDefine = function(){
+ function has(){
+ }
+ // anything that could be true, and allow it to be omitted from AMD builds
+ if(!has("dom")){
+ var doc = document;
+ // find a script to go off of
+ var scripts = doc.scripts;
+ var baseScript = scripts[scripts.length-1];
+ var baseUrl = baseScript.src.replace(/[^\/]+\/xstyle[^\/]*js/,'');
+ // a very simple AMD loader
+ define = function(id, deps, factory){
+ var waiting = 1;
+ for(var i = 0;i < deps.length; i++){
+ var dep = deps[i];
+ var module = modules[dep];
+ if(!module){
+ // inject script tag
+ module = modules[dep] = {callbacks: []};
+ var node = doc.createElement('script');
+ node.src = baseUrl + dep + '.js';
+ baseScript.parentNode.insertBefore(node, baseScript);
+ }
+ if(module.callbacks){
+ // add a callback for this waiting module
+ waiting++;
+ module.callbacks.push((function(i){
+ return function(value){
+ deps[i] = value;
+ loaded();
+ };
+ })(i));
+ }else{
+ deps[i] = module.result;
}
- }
- if(module.callbacks){
- // add a callback for this waiting module
- waiting++;
- module.callbacks.push((function(i){
- return function(value){
- deps[i] = value;
- loaded();
- };
- })(i));
- }else{
- deps[i] = module.result;
- }
- }
- module = modules[id] || (modules[id] = {callbacks: []});
- loaded();
- function loaded(){
- if(--waiting < 1){
- // done loading, run the factory
- var result = module.result = factory && factory.apply(this, deps);
- var callbacks = module.callbacks;
- for(var i = 0 ; i < callbacks.length; i++){
+ }
+ module = modules[id] || (modules[id] = {callbacks: []});
+ loaded();
+ function loaded(){
+ if(--waiting < 1){
+ // done loading, run the factory
+ var result = module.result = factory && factory.apply(this, deps);
+ var callbacks = module.callbacks;
+ for(var i = 0 ; i < callbacks.length; i++){
+ callbacks[i](result);
+ }
module.callbacks = 0;
- }
}
- }
- }
- };
-
- require = function(deps, factory){
- define("", deps, factory);
- };
-
- var modules = {require: {result: require}};
+ }
+ };
+
+ require = function(deps, factory){
+ define("", deps, factory);
+ };
+
+ var modules = {require: {result: require}};
}
Please sign in to comment.
Something went wrong with that request. Please try again.