Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

simpler examples, require in static_require, build command in tools

  • Loading branch information...
commit 12be0210b25882534347186379f0f440e8846b0c 1 parent 962008a
@voloko authored
View
2  docs/writing_a_view.markdown
@@ -52,7 +52,7 @@ node. You can create properties manually or use one of the generator functions:
// manually set/get alt
src: function(value) {
- if (value === undefined) return this._dom.src;
+ if (!arguments.length) return this._dom.src;
this._dom.src = value;
return this;
},
View
13 examples/core-examples/binding/binding.js
@@ -2,20 +2,19 @@
@example_title Binding
@example_order 160
@example_html
+ <link rel="stylesheet" href="binding.css" />
+ <script src="/src/pkg/uki.js"></script>
<script src="binding.js"></script>
*/
-requireCss('./binding.css');
-
-var uki = require('uki'),
- Observable = uki.Observable;
+var Observable = uki.Observable;
var Person = uki.newClass(Observable, {
name: Observable.newProp('name'),
age: Observable.newProp('age')
});
-global.bob = new Person();
+var bob = new Person();
bob.name('Bob').age(27);
var options = uki.range(10, 99);
@@ -26,13 +25,13 @@ uki([
{ view: 'Flow', horizontal: true, spacing: 'large', childViews: [
{ view: 'Container', addClass: 'form', childViews: [
{ view: 'nativeControl.Text', addClass: 'input',
- binding: { model: bob, modelProp: 'name' } },
+ binding: { model: bob, modelProp: 'name', viewEvent: 'keyup blur click' } },
{ view: 'nativeControl.Select', options: options,
binding: { model: bob, modelProp: 'age' } }
]},
{ view: 'Container', addClass: 'form', childViews: [
{ view: 'nativeControl.Text', addClass: 'input',
- binding: { model: bob, modelProp: 'name' } },
+ binding: { model: bob, modelProp: 'name', viewEvent: 'keyup blur click' } },
{ view: 'nativeControl.Select', options: options,
binding: { model: bob, modelProp: 'age' } }
]},
View
3  examples/core-examples/button/button.js
@@ -2,11 +2,10 @@
@example_title Button
@example_order 10
@example_html
+ <script src="/src/pkg/uki.js"></script>
<script src="button.js"></script>
*/
-var uki = require('uki');
-
uki([
{
View
3  examples/core-examples/customView/customView.js
@@ -2,11 +2,10 @@
@example_title Custom View
@example_order 80
@example_html
+ <script src="/src/pkg/uki.js"></script>
<script src="customView.js"></script>
*/
-var uki = require('uki');
-
var Img = uki.view.newClass('Image', uki.view.Base, {
_createDom: function(initArgs) {
this._dom = uki.createElement('img');
View
16 examples/core-examples/dataList/dataList.js
@@ -2,16 +2,22 @@
@example_title Data list
@example_order 60
@example_html
+ <link rel="stylesheet" href="dataList.css" />
+ <script src="/src/pkg/uki.js"></script>
<script src="dataList.js"></script>
*/
-var uki = require('uki');
-requireCss('./dataList.css');
-
var data = uki.map(uki.range(1, 50000), function(i) {
return 'row #' + i;
});
+var multiselectHelp = 'Use ' +
+'<span class="keyboard">Shift</span> + Click, ' +
+'<span class="keyboard">Cmd/Ctrl</span> + Click,' +
+'<span class="keyboard">Cmd/Ctrl</span> + <span class="keyboard">A</span>, to select multiple rows.';
+
+var withHeaders = '{{#rows}}<li class="uki-dataList-row{{^even}} uki-dataList-row_odd{{/even}}{{#row}}{{#header}} row-header{{/header}}{{/row}}">{{{value}}}</li>{{/rows}}';
+
uki([
{ view: 'Container', pos: 't:10px l:10px w:150px b:10px',
addClass: 'scrollable', childViews: [
@@ -23,7 +29,7 @@ uki([
addClass: 'scrollable', childViews: [
{ view: 'Header', text: 'Multiselect Data List', size: 'small' },
{ view: 'Text', addClass: 'help',
- html: requireText('./multiselectHelp.html') },
+ html: multiselectHelp },
{ view: 'DataList', pos: 't:100px r:0 b:0 l:0', data: data,
multiselect: true }
]},
@@ -153,7 +159,7 @@ uki([
addClass: 'scrollable', childViews: [
{ view: 'Header', text: 'Var Height List', size: 'small' },
{ view: 'DataList', pos: 't:20px r:0 b:0 l:0', key: 'value',
- template: requireText('withHeaders.html'),
+ template: withHeaders,
addClass: 'with-headers',
data: dataWithHeaders,
multiselect: true, init: { metrics: new VarHeightMetrics() } }
View
3  examples/core-examples/dataTable/dataTable.js
@@ -2,11 +2,10 @@
@example_title Data table
@example_order 70
@example_html
+ <script src="/src/pkg/uki.js"></script>
<script src="dataTable.js"></script>
*/
-var uki = require('uki');
-
// custom formatter for duration column
function formatTime (t) {
var m = Math.floor(t/60/1000),
View
3  examples/core-examples/flow/flow.js
@@ -2,13 +2,12 @@
@example_title Flow
@example_order 20
@example_html
+ <script src="/src/pkg/uki.js"></script>
<script src="flow.js"></script>
*/
-var uki = require('uki');
uki.createStylesheet('html, body { width: 100%; height: 100%; padding: 0; margin: 0 }');
-
uki([
{ view: 'Flow', pos: 'l:10px t:10px',
childViews: [
View
9 examples/core-examples/htmlLayout/htmlLayout.js
@@ -2,14 +2,19 @@
@example_title HTMLLayout
@example_order 90
@example_html
+ <script src="/src/pkg/uki.js"></script>
<script src="htmlLayout.js"></script>
*/
-var uki = require('uki');
+var template = '{{{header}}}' +
+'<dl>' +
+ '<dt>{{label_text}}</dt><dd>{{{input}}}</dd>' +
+ '<dt>{{label_select}}</dt><dd>{{{select}}}</dd>' +
+'</dl>';
uki({
view: 'HTMLLayout',
- template: requireText('template.html'),
+ template: template,
data: {
header: { view: 'Header',
text: 'This views are rendered inside HTML template' },
View
3  examples/core-examples/splitPane/splitPane.js
@@ -2,11 +2,10 @@
@example_title Split Pane
@example_order 50
@example_html
+ <script src="/src/pkg/uki.js"></script>
<script src="splitPane.js"></script>
*/
-var uki = require('uki');
-
uki({ view: 'SplitPane', pos: 'l:0 t:0 r:0 b:0', init: { vertical: true },
leftChildViews: [{ view: 'Button', label: 'left' }],
rightChildViews: [
View
3  examples/core-examples/text/text.js
@@ -2,11 +2,10 @@
@example_title Text
@example_order 40
@example_html
+ <script src="/src/pkg/uki.js"></script>
<script src="text.js"></script>
*/
-var uki = require('uki');
-
uki({ view: 'Container', pos: 'w:30em', childViews: [
{ view: 'Header', size: 'large', text: 'Header' },
{ view: 'P', text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' },
View
4 express.js
@@ -66,6 +66,10 @@ app.get('/test/qunit/*', function(req, res){
res.sendfile(req.url.substring(1));
});
+app.get('/examples/*.js', function(req, res) {
+ res.sendfile(req.url.substring(1));
+});
+
app.get('/*.js', sr.getHandler({
searchPaths: [
fs.realpathSync(path.join(__dirname, 'src'))
View
1  src/pkg/uki-core.js
@@ -0,0 +1 @@
+global.uki = require('../uki-core');
View
8 src/uki-core/binding.js
@@ -37,11 +37,15 @@ var Binding = fun.newClass({
},
viewValue: function(value) {
- return utils.prop(this.view, this.viewProp, value);
+ return arguments.length ?
+ utils.prop(this.view, this.viewProp, value) :
+ utils.prop(this.view, this.viewProp);
},
modelValue: function(value) {
- return utils.prop(this.model, this.modelProp, value, this);
+ return arguments.length ?
+ utils.prop(this.model, this.modelProp, value) :
+ utils.prop(this.model, this.modelProp);
},
updateModel: function(e) {
View
4 src/uki-core/collection.js
@@ -152,7 +152,9 @@ Collection.addProps = function(props) {
utils.forEach(props, function(name) {
if (!proto[name]) {
proto[name] = function(value) {
- return this.prop(name, value);
+ return arguments.length ?
+ this.prop(name, value) :
+ this.prop(name);
};
}
});
View
1  src/uki-core/view/base.js
@@ -336,6 +336,7 @@ var Base = view.newClass('Base', {
pos = {};
utils.forEach(p.split(/\s+/), function(rule) {
var parts = rule.split(':');
+ parts[1].match(/\D/) || (parts[1] += 'px');
pos[parts[0]] = parts[1];
});
}
View
1  test/collection.test.js
@@ -124,7 +124,6 @@ test('shortcuts', 2, function() {
]);
equal(c.text(), 'bar');
-
c.text('y');
equal(c[1].text(), 'y');
View
2  tools/dev_server.js
@@ -1,5 +1,5 @@
var express = require('express'),
- sr = require('static_require'),
+ sr = require('./static_require'),
url = require('url'),
pro = require('uglify-js').uglify,
app = express.createServer();
View
95 tools/static_require.js
@@ -7,7 +7,7 @@ var jsp = require('uglify-js').parser,
mime = require('mime'),
url = require('url'),
mod = require('module');
-
+
var REQUIRE = 'require';
var REQUIRE_TEXT = 'requireText';
var REQUIRE_CSS = 'requireCss';
@@ -20,11 +20,11 @@ function new_sate () {
required: {},
requiredCount: 0,
requiredAsts: [],
-
+
requiredCss: {},
requiredCssFiles: [],
requiredCssUsed: false,
-
+
currentPath: '',
searchPaths: [],
options: {}
@@ -32,13 +32,13 @@ function new_sate () {
}
var sate = exports.state = null;
-
+
var walker = pro.ast_walker(),
walkers = {
"call": function(expr, args) {
if (expr[0] === 'name' && expr[1] === REQUIRE) {
var file = resolvePath(args[0][1]);
-
+
if (state.required[file] === undefined) {
addFileToAstList(file, true);
}
@@ -68,7 +68,7 @@ var walker = pro.ast_walker(),
return null;
}
};
-
+
function imagePathToDataUri (filePath) {
var contentType = mime.lookup( path.extname(filePath) ),
buffer = fs.readFileSync(filePath);
@@ -78,7 +78,7 @@ function imagePathToDataUri (filePath) {
function absoluteImagePath (filePath) {
return filePath.substring(state.options.serverRoot.length);
}
-
+
function dataUriCssImages (cssPath, string) {
return string.replace(/url\(([^)]+)\)/, function(_, filePath) {
var imagePath = path.join( path.dirname(cssPath), filePath );
@@ -90,10 +90,10 @@ function addIEBackground (cssPath, style, sourceValue) {
if (style['*background-image']) return;
var filePath = sourceValue.match(/url\(([^)]+)\)/)[1],
url = path.join( path.dirname(cssPath), filePath );
-
+
style.setProperty('*background-image', 'url(' + absoluteImagePath(url) + ')');
}
-
+
function processCssIncludes (cssPath) {
var code = fs.readFileSync(cssPath, 'utf8');
var styleSheet = cssom.parse(code);
@@ -116,9 +116,9 @@ function processCssIncludes (cssPath) {
});
return styleSheet + '';
}
-
+
function resolvePath (filePath) {
- var resolvedPath = mod._findPath(filePath,
+ var resolvedPath = mod._findPath(filePath,
[path.dirname(state.currentPath)].concat(state.options.searchPaths));
if (!resolvedPath) throw new Error('Path ' + filePath + ' not found.');
return fs.realpathSync(resolvedPath);
@@ -156,25 +156,25 @@ function staticRequire (filePath, options) {
state.currentPath = filePath;
var newOptions = {};
options = Object.create(options || {});
-
+
options.searchPaths = options.searchPaths ? options.searchPaths : [];
options.searchPaths = [path.dirname(state.currentPath)].concat(options.searchPaths);
-
- options.serverRoot = options.serverRoot ?
- fs.realpathSync(options.serverRoot) :
- path.dirname(currentPath);
-
+
+ options.serverRoot = options.serverRoot ?
+ fs.realpathSync(options.serverRoot) :
+ path.dirname(state.currentPath);
+
state.options = options;
-
+
state.requiredAsts = [];
-
+
addFileToAstList(filePath, true);
-
+
var code = 'var global = this;';
code += 'function require(index) { if (!require_cache[index]) {var module = require_cache[index] = {exports: {}}; require_modules[index].call(module.exports, global, module, require);} return require_cache[index].exports; }\n';
code += 'var require_modules = require.modules = []; var require_cache = require.cache = [];';
var body = jsp.parse(code)[1];
-
+
if (state.requiredCssUsed) {
var code = state.requiredCssFiles.map(function(filePath) {
return processCssIncludes(filePath);
@@ -184,8 +184,8 @@ function staticRequire (filePath, options) {
for (var i=0; i < state.requiredCount; i++) {
body[body.length] =
- [ 'stat',
- ['assign',
+ [ 'stat',
+ ['assign',
true,
['sub',
['name', 'require_modules'],
@@ -201,7 +201,7 @@ function staticRequire (filePath, options) {
} else {
body.push(['stat', ['call', ['name', 'require'], [['num', '0']]]]);
}
-
+
return [ 'toplevel',
[ [ 'stat',
[ 'call',
@@ -211,15 +211,15 @@ function staticRequire (filePath, options) {
body
],
[] ] ] ] ];
-
+
}
exports.parse = staticRequire;
exports.getAppHandler = function(title, src) {
return function(req, res) {
- res.send('<!DOCTYPE html><html><head><title>' + title + '</title>' +
- '<style>body, html { overflow: hidden; width: 100%; hieght: 100%; padding: 0; margin: 0; }</style>' +
+ res.send('<!DOCTYPE html><html><head><title>' + title + '</title>' +
+ '<style>body, html { overflow: hidden; width: 100%; hieght: 100%; padding: 0; margin: 0; }</style>' +
'</head><body>' +
'<script src="' + src + '"></script>' +
'</body></html>');
@@ -232,28 +232,31 @@ exports.getHandler = function(options) {
};
};
-exports.handle = function(req, res, options) {
- options = options || {};
- var filePath = options.filePath || (url.parse(req.url).pathname.substr(1));
- if (!options.serverRoot) {
- options.serverRoot = process.cwd();
- }
- filePath = path.resolve(options.serverRoot, filePath);
- options.globalize = req.param('globalize');
+exports.require = function(options) {
+ if (typeof options === 'string') options = { filePath: options };
+ var filePath = path.resolve(options.serverRoot || process.cwd(), options.filePath);
try {
- var ast = staticRequire(filePath, options);
- if (req.param('squeeze')) {
- ast = pro.ast_mangle(ast);
- ast = pro.ast_squeeze(ast);
- ast = pro.ast_squeeze_more(ast);
- }
- var code = pro.gen_code(ast, { beautify: !req.param('squeeze') });
+ var ast = staticRequire(filePath, options);
+ if (options.squeeze) {
+ ast = pro.ast_mangle(ast);
+ ast = pro.ast_squeeze(ast);
+ ast = pro.ast_squeeze_more(ast);
+ }
+ return pro.gen_code(ast, { beautify: !options.squeeze });
} catch (e) {
- require('util').error(e);
- var code = 'alert(' + JSON.stringify(e.stack + '. Current file ' + exports.state.currentPath) + ')';
- console.log(e.stack);
+ require('util').error(e);
+ return 'alert(' + JSON.stringify(e.stack + '. Current file ' + exports.state.currentPath) + ')';
}
- res.writeHead(200, {
+};
+
+exports.handle = function(req, res, options) {
+ options = options ? Object.create(options) : {};
+ 'filePath' in options || (options.filePath = url.parse(req.url).pathname.substr(1));
+ 'squeeze' in options || (options.squeeze = !!req.param('squeeze'));
+ 'globalize' in options || (options.globalize = req.param('globalize'));
+
+ var code = exports.require(options);
+ res.writeHead(200, {
"Content-Type": 'application/javascript',
"Content-Length": Buffer.byteLength(code, 'utf8')
});
View
10 tools/tools.js
@@ -1,7 +1,10 @@
require.paths.unshift(__dirname);
var cli = require('cli'),
- options = cli.parse(null, ['run', 'build']),
+ options = cli.parse(
+ {
+ squeeze: ['s', 'Squeeze output']
+ }, ['run', 'build']),
util = require('util');
if (cli.command == 'run') {
@@ -36,5 +39,10 @@ if (cli.command == 'run') {
} else if (cli.command == 'build') {
+ var static_require = require('./static_require');
+ var file = cli.args[0];
+ var options = { filePath: cli.args[0], squeeze: cli.options.squeeze };
+ var code = static_require.require(options);
+ console.log(code);
}
Please sign in to comment.
Something went wrong with that request. Please try again.