Significant code size reduction

This commit is contained in:
Patrick Steele-Idem 2016-12-20 17:06:06 -07:00
parent 4dcc1b2775
commit e97a45352d
636 changed files with 2685 additions and 2335 deletions

View File

@ -1,4 +0,0 @@
{
"presets": ["react"],
"plugins": ["transform-react-constant-elements"]
}

View File

@ -3,7 +3,7 @@ console.log('Minifying JavaScript bundles...');
const fs = require('fs');
const path = require('path');
const zlib = require('zlib');
const gcc = require('google-closure-compiler-js');
const formatNumber = require('format-number')();
var buildDir = path.join(__dirname, 'build');
@ -28,34 +28,76 @@ function leftPad(str, padding) {
return str;
}
var minifiers = {
gcc: function minifyGCC(src, file) {
const gcc = require('google-closure-compiler-js');
const options = {
jsCode: [{src: src}],
languageIn: 'ES5'
};
const out = gcc.compile(options);
return out.compiledCode;
},
uglify: function minifyUglifyJS(src, file) {
try {
var UglifyJS = require("uglify-js");
var options = {
fromString: true
};
return UglifyJS.minify(src, options).code;
} catch(e) {
if (e.line != null) {
console.error(`Failed to minify ${file}`);
console.error(` Location: ${file}:${e.line}:${e.col}`);
console.error(` Message: ${e.message}`);
process.exit(1);
}
throw e;
}
}
};
var minify = minifiers.gcc;
var bundleFiles = fs.readdirSync(bundlesDir);
var sizes = {};
var targetLib = process.argv[2];
bundleFiles.forEach((filename) => {
if (!filename.endsWith('.js')) {
return;
}
var file = path.join(bundlesDir, filename);
var ext = path.extname(filename);
var lib = filename.slice(0, 0-ext.length);
if (targetLib && lib !== targetLib) {
return;
}
console.log(`Minifying ${file}...`);
var src = fs.readFileSync(file, { encoding: 'utf8' });
const options = {
jsCode: [{src: src}],
};
var minifiedSrc = minify(src, file);
const out = gcc.compile(options);
var ext = path.extname(filename);
var nameNoExt = filename.slice(0, 0-ext.length);
var minifiedSrc = out.compiledCode;
console.log(`Done minifying ${file}`);
var minFile = path.join(bundlesMinDir, filename);
fs.writeFileSync(minFile, minifiedSrc, { encoding: 'utf8' });
var sizeInfo = sizes[lib] = {};
promiseChain = promiseChain.then(() => {
return new Promise((resolve, reject) => {
console.log(`Compressing and calculating size of ${file}...`);
zlib.gzip(minifiedSrc, function(err, gzippedBuffer) {
if (err) {
return reject(err);
@ -65,20 +107,14 @@ bundleFiles.forEach((filename) => {
var minifiedBuffer = new Buffer(minifiedSrc, 'utf8');
// console.log(nodePath.basename(templateInfo.outputCompileMinifiedFile) + ': ' + gzippedBuffer.length + ' bytes gzipped (' + minifiedBuffer.length + ' bytes uncompressed)');
sizeInfo.gzipped = gzippedBuffer.length;
sizeInfo.min = minifiedBuffer.length;
var sizeInfo = {
gzipped: gzippedBuffer.length,
min: minifiedBuffer.length
};
var libVersion = getVersion(nameNoExt);
var sizeFilename = nameNoExt + (libVersion ? '-' + libVersion : '') + '.json';
var libVersion = getVersion(lib);
var sizeFilename = lib + (libVersion ? '-' + libVersion : '') + '.json';
fs.writeFileSync(path.join(buildDir, sizeFilename), JSON.stringify(sizeInfo, null, 4), { encoding: 'utf8' });
console.log('[' + nameNoExt + ']');
console.log(' gzip: ' + leftPad(formatNumber(sizeInfo.gzipped), 8) + ' bytes');
console.log(' min: ' + leftPad(formatNumber(sizeInfo.min), 8) + ' bytes');
resolve();
});
});
@ -86,5 +122,15 @@ bundleFiles.forEach((filename) => {
});
promiseChain.then(() => {
console.log();
for (var lib in sizes) {
var sizeInfo = sizes[lib];
console.log('[' + lib + ']');
console.log(' gzip: ' + leftPad(formatNumber(sizeInfo.gzipped), 8) + ' bytes');
console.log(' min: ' + leftPad(formatNumber(sizeInfo.min), 8) + ' bytes');
console.log();
}
console.log('Minification complete.');
})
});

View File

@ -5,10 +5,12 @@
"main": "index.js",
"scripts": {
"setup": "npm install --silent && npm link ../../",
"build": "npm run setup && npm run bundle --silent && npm run minify --silent",
"bundle": "mkdir -p build/bundles && npm run bundle-marko --silent && npm run bundle-react --silent && npm run bundle-vue --silent",
"build": "npm run bundle --silent && npm run minify --silent",
"build-marko": "npm run bundle-marko --silent && node minify.js marko",
"bundle": "mkdir -p build/bundles && npm run bundle-marko && npm run bundle-react && npm run bundle-vue && npm run bundle-preact",
"bundle-marko": "NODE_ENV=production browserify -t envify -t markoify --extension='.marko' --global-transform minprops/browserify -o build/bundles/marko.js marko/client.js",
"bundle-react": "NODE_ENV=production browserify -t envify -t babelify --extension='.jsx' --global-transform minprops/browserify -o build/bundles/react.js react/client.jsx",
"bundle-preact": "NODE_ENV=production browserify -t envify -t babelify --extension='.jsx' --global-transform minprops/browserify -o build/bundles/preact.js preact/client.jsx",
"bundle-vue": "NODE_ENV=production browserify -t envify -t vueify --extension='.vue' --global-transform minprops/browserify -o build/bundles/vue.js vue/client.js",
"minify": "node minify.js",
"http-server": "http-server"
@ -17,7 +19,11 @@
"license": "MIT",
"dependencies": {
"babel-plugin-transform-react-constant-elements": "^6.9.1",
"babel-plugin-transform-react-jsx": "^6.8.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-es2015-loose": "^8.0.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"babelify": "^7.3.0",
"browserify": "^13.1.1",
"envify": "^4.0.0",
@ -26,13 +32,18 @@
"http-server": "^0.9.0",
"markoify": "^2.1.1",
"minprops": "mlrawlings/minprops",
"preact": "^7.1.0",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"uglify-js": "^2.7.5",
"vue": "^2.1.6",
"vueify": "^9.4.0"
},
"repository": {
"type": "git",
"url": "https://github.com/marko-js/marko.git"
},
"browser": {
"events": "events-light"
}
}

View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Preact</title>
</head>
<body>
<h1>Preact</h1>
<script src="./build/bundles/preact.js"></script>
</body>
</html>

View File

@ -0,0 +1,9 @@
{
"presets": [
"es2015-loose",
"stage-0"
],
"plugins": [
[ "transform-react-jsx", { "pragma": "h" } ]
]
}

View File

@ -0,0 +1,7 @@
import { h, render } from 'preact';
var App = require('./components/App');
render(
<App name='Frank' colors={['red', 'green', 'blue']}/>,
document.body);

View File

@ -0,0 +1,56 @@
'use strict';
import { h, Component } from 'preact';
function renderColor(color) {
var style = {
backgroundColor: color
};
return <li className="color" style={style}>
{color}
</li>
}
function renderColors(colors) {
if (colors.length) {
return (<ul>{colors.map(renderColor)}</ul>);
} else {
return <div>No colors!</div>
}
}
module.exports = class extends Component {
constructor(props) {
super(props);
this.state = {
name: props.name,
colors: props.colors,
clickCount: 0
}
this.handleButtonClick = function() {
this.setState({
clickCount: this.state.clickCount + 1
});
}.bind(this);
}
render() {
var colors = this.state.colors;
var name = this.state.name;
var clickCount = this.state.clickCount;
var handleButtonClick = this.handleButtonClick;
return (
<div>
<h1>Hello {name}!</h1>
<div className="colors">
{renderColors(colors)}
</div>
<button type="button" onClick={handleButtonClick}>
You clicked the button {clickCount} time(s)
</button>
</div>
);
}
};

View File

@ -0,0 +1,8 @@
{
"presets": [
"es2015-loose",
"stage-0",
"react"
],
"plugins": ["transform-react-constant-elements"]
}

View File

@ -22,12 +22,12 @@
<script>
module.exports = {
data() {
data: function() {
return {
clickCount: 0,
name: 'Frank',
colors: ['red', 'green', 'blue']
}
};
},
methods: {
handleButtonClick: function() {

View File

@ -106,7 +106,7 @@ function compileForBrowser(src, filename, options, callback) {
options = null;
}
options = Object.assign({output: 'vdom'}, options);
options = extend({output: 'vdom'}, options);
return compile(src, filename, options, callback);
}
@ -139,7 +139,7 @@ function compileFileForBrowser(filename, options, callback) {
options = null;
}
options = Object.assign({output: 'vdom'}, options);
options = extend({output: 'vdom'}, options);
return compileFile(filename, options, callback);
}

View File

@ -20,7 +20,7 @@
"url": "https://github.com/marko-js/marko.git"
},
"scripts": {
"test": "npm run jshint -s && npm run mocha -s && npm run test-widgets -s",
"test": "npm run jshint -s && npm run mocha -s && npm run test-widgets -s && npm run test-widgets-deprecated -s",
"mocha": "mocha --ui bdd --reporter spec ./test/",
"test-coverage": "npm run test-generate-coverage && nyc report --reporter=html && open ./coverage/index.html",
"test-generate-coverage": "nyc -asc npm run test",
@ -28,10 +28,12 @@
"test-async": "mocha --ui bdd --reporter spec ./test/async-render-test",
"test-taglib-loader": "mocha --ui bdd --reporter spec ./test/taglib-loader-test",
"test-express": "mocha --ui bdd --reporter spec ./test/express-test",
"test-widgets": "npm run test-widgets-browser -s && npm run test-widgets-browser-deprecated -s && npm run jshint --silent",
"test-widgets-browser": "node test/browser-tests-runner/cli.js test/widgets-browser-tests.js --automated && npm run test-widgets-browser-pages",
"test-widgets-browser-deprecated": "node test/browser-tests-runner/cli.js test/deprecated-widgets-browser-tests.js --automated && npm run test-widgets-browser-pages",
"test-widgets-browser-pages": "node test/browser-tests-runner/cli.js --pages --automated",
"test-widgets": "npm run test-widgets-browser -s && npm run test-widgets-pages -s",
"test-widgets-deprecated": "npm run test-widgets-browser-deprecated -s && npm run test-widgets-pages-deprecated -s",
"test-widgets-browser": "node test/browser-tests-runner/cli.js test/widgets-browser-tests.js --automated",
"test-widgets-browser-deprecated": "node test/browser-tests-runner/cli.js test/deprecated-widgets-browser-tests.js --automated && npm run test-widgets-pages-deprecated -s",
"test-widgets-pages": "node test/browser-tests-runner/cli.js --pages --automated",
"test-widgets-pages-deprecated": "node test/browser-tests-runner/cli.js --pagesDeprecated --automated",
"test-widgets-browser-dev": "browser-refresh test/browser-tests-runner/cli.js test/widgets-browser-tests.js --server",
"test-widgets-page": "browser-refresh test/browser-tests-runner/cli.js test/widgets-browser-tests.js --server --page",
"jshint": "jshint compiler/ runtime/ taglibs/ widgets/",
@ -55,11 +57,12 @@
"esprima": "^3.1.1",
"estraverse": "^4.2.0",
"events": "^1.0.2",
"events-light": "^1.0.0",
"he": "^1.1.0",
"htmljs-parser": "^1.5.3",
"lasso-modules-client": "^1.0.0",
"lasso-package-root": "^1.0.0",
"listener-tracker": "^1.0.2",
"listener-tracker": "^2.0.0",
"minimatch": "^3.0.2",
"morphdom": "^2.2.0",
"object-assign": "^4.1.0",
@ -133,7 +136,15 @@
"url": "https://raw.githubusercontent.com/marko-js/branding/master/marko-logo-small.png"
},
"minprops": {
"exclude": ["c", "ca", "e", "n", "r", "sa", "t"],
"exclude": [
"c",
"ca",
"e",
"n",
"r",
"sa",
"t"
],
"matchPrefix": "$__"
}
}

View File

@ -4,7 +4,7 @@ var EMPTY_ARRAY = [];
function checkAddedToDOM(result, method) {
if (!result.$__widgets) {
throw new Error('Cannot call ' + method + '() until after HTML fragment is added to DOM.');
throw Error('Not added to DOM');
}
}
@ -12,7 +12,7 @@ function getWidgetDefs(result) {
var widgetDefs = result.$__widgets;
if (widgetDefs.length === 0) {
throw new Error('No widget rendered');
throw Error('No widget');
}
return widgetDefs;
}

View File

@ -6,7 +6,7 @@ function resolveEl(el) {
var elId = el;
el = document.getElementById(elId);
if (!el) {
throw new Error('Target element not found: "' + elId + '"');
throw Error('Not found: ' + elId);
}
}
return el;

View File

@ -1,2 +1,2 @@
var EventEmitter = require('events').EventEmitter;
var EventEmitter = require('events-light');
module.exports = new EventEmitter();

View File

@ -42,7 +42,7 @@ function createDeferredRenderer(handler) {
deferredRenderer.renderer = function(input, out) {
var rendererFunc = handler.renderer || handler.render;
if (typeof rendererFunc !== 'function') {
throw new Error('Invalid tag handler: ' + handler);
throw Error('Invalid renderer');
}
// Use the actual renderer from now on
deferredRenderer.renderer = rendererFunc;

View File

@ -1,5 +1,5 @@
'use strict';
var EventEmitter = require('events').EventEmitter;
var EventEmitter = require('events-light');
var StringWriter = require('./StringWriter');
var BufferedWriter = require('./BufferedWriter');
var documentProvider = require('../document-provider');

View File

@ -1,4 +1,4 @@
'use strict';
module.exports = function load(templatePath) {
throw new Error('Template not found: ' + templatePath);
throw Error('Template not found: ' + templatePath);
};

View File

@ -1,4 +1,4 @@
var EventEmitter = require('events').EventEmitter;
var EventEmitter = require('events-light');
var HTMLElement = require('./HTMLElement');
var DocumentFragment = require('./DocumentFragment');
var Comment = require('./Comment');
@ -47,7 +47,7 @@ var proto = AsyncVDOMBuilder.prototype = {
var parent = this.$__parent;
if(parent) {
parent.appendChild(element);
parent.$__appendChild(element);
}
return childCount === 0 ? this : element;
@ -62,7 +62,7 @@ var proto = AsyncVDOMBuilder.prototype = {
node: function(node) {
var parent = this.$__parent;
if (parent) {
parent.appendChild(node);
parent.$__appendChild(node);
}
return this;
},
@ -90,7 +90,7 @@ var proto = AsyncVDOMBuilder.prototype = {
if (lastChild && lastChild.nodeType === 3) {
lastChild.nodeValue += text;
} else {
parent.appendChild(new Text(text));
parent.$__appendChild(new Text(text));
}
}
return this;
@ -113,7 +113,7 @@ var proto = AsyncVDOMBuilder.prototype = {
var element = new HTMLElement(name, attrs);
var parent = this.$__parent;
if (parent) {
parent.appendChild(element);
parent.$__appendChild(element);
this.$__stack.push(element);
this.$__parent = element;
}
@ -149,7 +149,7 @@ var proto = AsyncVDOMBuilder.prototype = {
beginAsync: function(options) {
if (this.$__sync) {
throw new Error('beginAsync() not allowed when using renderSync()');
throw Error('Not allowed');
}
var state = this.$__state;
@ -160,7 +160,7 @@ var proto = AsyncVDOMBuilder.prototype = {
}
}
var documentFragment = this.$__parent.appendDocumentFragment();
var documentFragment = this.$__parent.$__appendDocumentFragment();
var asyncOut = new AsyncVDOMBuilder(this.global, documentFragment, state);
state.$__events.emit('beginAsync', {
@ -235,12 +235,6 @@ var proto = AsyncVDOMBuilder.prototype = {
return this;
},
prependListener: function() {
var events = this.$__state.$__events;
events.prependListener.apply(events, arguments);
return this;
},
sync: function() {
this.$__sync = true;
},

View File

@ -199,7 +199,7 @@ HTMLElement.prototype = {
* @param {int|null} childCount The number of child nodes (or `null` if not known)
*/
e: function(tagName, attrs, childCount, constId) {
var child = this.appendChild(new HTMLElement(tagName, attrs, childCount, constId));
var child = this.$__appendChild(new HTMLElement(tagName, attrs, childCount, constId));
if (childCount === 0) {
return this.$__finishChild();
@ -221,13 +221,13 @@ HTMLElement.prototype = {
} else if (type === 'object') {
var safeHTML = value.safeHTML;
var vdomNode = virtualizeHTML(safeHTML || '', documentProvider.$__document);
this.appendChild(vdomNode);
this.$__appendChild(vdomNode);
return this.$__finishChild();
} else {
value = value.toString();
}
}
this.appendChild(new Text(value));
this.$__appendChild(new Text(value));
return this.$__finishChild();
},
@ -236,7 +236,7 @@ HTMLElement.prototype = {
* @param {String} value The value for the new Comment node
*/
c: function(value) {
this.appendChild(new Comment(value));
this.$__appendChild(new Comment(value));
return this.$__finishChild();
},
@ -247,7 +247,7 @@ HTMLElement.prototype = {
* @param {String} value The value for the new Comment node
*/
n: function(node) {
this.appendChild(node.cloneNode());
this.$__appendChild(node.cloneNode());
return this.$__finishChild();
},

View File

@ -1,3 +1,5 @@
/* jshint newcap:false */
var DocumentFragment;
function assignNamespace(node, namespaceURI) {
@ -71,17 +73,17 @@ Node.prototype = {
return nextSibling;
},
appendDocumentFragment: function() {
return this.appendChild(new DocumentFragment());
$__appendDocumentFragment: function() {
return this.$__appendChild(new DocumentFragment());
},
appendChild: function(child) {
$__appendChild: function(child) {
if (this.$__isTextArea) {
if (child.nodeType === 3) {
var currentValue = this.value;
this.value = currentValue ? currentValue + child.nodeValue : child.nodeValue;
} else {
throw new Error('Invalid child');
throw TypeError();
}
} else {
var namespaceURI;

View File

@ -6,7 +6,7 @@ var Text = require('./Text');
function virtualizeChildNodes(node, vdomParent) {
var curChild = node.firstChild;
while(curChild) {
vdomParent.appendChild(virtualize(curChild));
vdomParent.$__appendChild(virtualize(curChild));
curChild = curChild.nextSibling;
}
}
@ -40,7 +40,7 @@ function virtualize(node) {
var vdomEL = new HTMLElement(node.nodeName, attrs, childCount);
if (vdomEL._isTextArea) {
if (vdomEL.$__isTextArea) {
vdomEL.value = node.value;
} else {
virtualizeChildNodes(node, vdomEL);

View File

@ -28,7 +28,7 @@ module.exports = function virtualizeHTML(html, doc) {
var curChild = container.firstChild;
while(curChild) {
vdomFragment.appendChild(virtualize(curChild));
vdomFragment.$__appendChild(virtualize(curChild));
curChild = curChild.nextSibling;
}
}

View File

@ -3,8 +3,8 @@ module.exports = function(helpers) {
root.e('div', { class: 'first-child' });
var docFragment = root.appendDocumentFragment();
docFragment.appendChild(helpers.vdom.createElement('div', { class: 'middle-child' }));
var docFragment = root.$__appendDocumentFragment();
docFragment.$__appendChild(helpers.vdom.createElement('div', { class: 'middle-child' }));
root.e('div', { class: 'last-child' });

View File

@ -3,7 +3,7 @@ module.exports = function(helpers) {
root.e('div', { class: 'first-child' });
root.appendDocumentFragment();
root.$__appendDocumentFragment();
root.e('div', { class: 'last-child' });

View File

@ -4,7 +4,7 @@ module.exports = function(helpers) {
var svg = helpers.vdom.createElement('svg');
var docFragment = helpers.vdom.createDocumentFragment();
svg.appendChild(docFragment);
svg.$__appendChild(docFragment);
expect(docFragment.namespaceURI).to.equal('http://www.w3.org/2000/svg');
var docFragmentClone = docFragment.cloneNode();

View File

@ -27,7 +27,7 @@ module.exports = function(helpers) {
var root = helpers.vdom.createElement('div', { class: 'root' });
root.appendChild(clone);
root.$__appendChild(clone);
expect(el.$__parentNode).to.equal(undefined);
expect(clone.$__parentNode).to.equal(root);

View File

@ -10,11 +10,11 @@ module.exports = function(helpers) {
var div2 = helpers.vdom.createElement('div', { class: 'foo2' });
docFragment.appendChild(div1);
docFragment.appendChild(div2);
docFragment.$__appendChild(div1);
docFragment.$__appendChild(div2);
root.appendChild(docFragment);
root.appendChild(helpers.vdom.createElement('div', { class: 'sibling' }));
root.$__appendChild(docFragment);
root.$__appendChild(helpers.vdom.createElement('div', { class: 'sibling' }));
return root;
};

View File

@ -12,10 +12,10 @@ module.exports = function(helpers) {
class: 'foo2'
});
docFragment.appendChild(div1);
docFragment.appendChild(div2);
docFragment.$__appendChild(div1);
docFragment.$__appendChild(div2);
root.appendChild(docFragment);
root.$__appendChild(docFragment);
return root;
};

View File

@ -4,18 +4,18 @@ module.exports = function(helpers) {
var docFragmentA = helpers.vdom.createDocumentFragment();
var docFragmentAA = helpers.vdom.createDocumentFragment();
docFragmentA.appendChild(docFragmentAA);
docFragmentA.$__appendChild(docFragmentAA);
var docFragmentB = helpers.vdom.createDocumentFragment();
var docFragmentBB = helpers.vdom.createDocumentFragment();
docFragmentB.appendChild(docFragmentBB);
docFragmentB.$__appendChild(docFragmentBB);
docFragmentBB.appendChild(helpers.vdom.createText('bb1'));
docFragmentBB.appendChild(helpers.vdom.createText('bb2'));
docFragmentBB.$__appendChild(helpers.vdom.createText('bb1'));
docFragmentBB.$__appendChild(helpers.vdom.createText('bb2'));
root.appendChild(docFragmentA);
root.appendChild(docFragmentB);
root.$__appendChild(docFragmentA);
root.$__appendChild(docFragmentB);
return root.actualize(helpers.document);
};

View File

@ -4,21 +4,21 @@ module.exports = function(helpers) {
var docFragmentA = helpers.vdom.createDocumentFragment();
var docFragmentAA = helpers.vdom.createDocumentFragment();
docFragmentA.appendChild(docFragmentAA);
docFragmentA.$__appendChild(docFragmentAA);
docFragmentAA.appendChild(helpers.vdom.createText('aa1'));
docFragmentAA.appendChild(helpers.vdom.createText('aa2'));
docFragmentAA.$__appendChild(helpers.vdom.createText('aa1'));
docFragmentAA.$__appendChild(helpers.vdom.createText('aa2'));
var docFragmentB = helpers.vdom.createDocumentFragment();
var docFragmentBB = helpers.vdom.createDocumentFragment();
docFragmentB.appendChild(docFragmentBB);
docFragmentB.$__appendChild(docFragmentBB);
docFragmentBB.appendChild(helpers.vdom.createText('bb1'));
docFragmentBB.appendChild(helpers.vdom.createText('bb2'));
docFragmentBB.$__appendChild(helpers.vdom.createText('bb1'));
docFragmentBB.$__appendChild(helpers.vdom.createText('bb2'));
root.appendChild(docFragmentA);
root.appendChild(docFragmentB);
root.$__appendChild(docFragmentA);
root.$__appendChild(docFragmentB);
return root.actualize(helpers.document);
};

View File

@ -4,17 +4,17 @@ module.exports = function(helpers) {
var docFragmentA = helpers.vdom.createDocumentFragment();
var docFragmentAA = helpers.vdom.createDocumentFragment();
docFragmentA.appendChild(docFragmentAA);
docFragmentA.$__appendChild(docFragmentAA);
docFragmentAA.appendChild(helpers.vdom.createElement('div', { class: 'aa1' }));
docFragmentAA.appendChild(helpers.vdom.createElement('div', { class: 'aa2' }));
docFragmentAA.$__appendChild(helpers.vdom.createElement('div', { class: 'aa1' }));
docFragmentAA.$__appendChild(helpers.vdom.createElement('div', { class: 'aa2' }));
var docFragmentB = helpers.vdom.createDocumentFragment();
docFragmentB.appendChild(helpers.vdom.createElement('div', { class: 'b1' }));
docFragmentB.appendChild(helpers.vdom.createElement('div', { class: 'b2' }));
docFragmentB.$__appendChild(helpers.vdom.createElement('div', { class: 'b1' }));
docFragmentB.$__appendChild(helpers.vdom.createElement('div', { class: 'b2' }));
root.appendChild(docFragmentA);
root.appendChild(docFragmentB);
root.$__appendChild(docFragmentA);
root.$__appendChild(docFragmentB);
return root;
};

View File

@ -11,7 +11,7 @@ module.exports = function(helpers) {
var newChild = helpers.vdom.createElement('h1', null, 1)
.t('New child');
div.appendChild(newChild);
div.$__appendChild(newChild);
expect(div.firstChild).to.equal(newChild);
expect(div.firstChild.nextSibling).to.equal(undefined);

View File

@ -1,13 +1,13 @@
module.exports = function(helpers) {
var linearGradient = helpers.vdom.createElement('linearGradient', { x1: "0%", y1: "0%", x2: "100%", y2: "0%" });
linearGradient.appendChild(helpers.vdom.createElement('stop', { offset: "0%", style: "stop-color:rgb(255,255,0);stop-opacity:1" }));
linearGradient.$__appendChild(helpers.vdom.createElement('stop', { offset: "0%", style: "stop-color:rgb(255,255,0);stop-opacity:1" }));
linearGradient.appendChild(helpers.vdom.createElement('stop', { offset: "100%", style: "stop-color:rgb(255,0,0);stop-opacity:1" }));
linearGradient.$__appendChild(helpers.vdom.createElement('stop', { offset: "100%", style: "stop-color:rgb(255,0,0);stop-opacity:1" }));
var svg = helpers.vdom.createElement('svg', { height: "150", width: "400" });
svg.appendChild(linearGradient);
svg.$__appendChild(linearGradient);
return svg;
};

View File

@ -5,7 +5,7 @@ module.exports = function(helpers) {
helpers.vdom.createElement('textarea', 0 /* attrCount */, 2 /* childCount */)
.e('div', 0, 0)
.t('bar');
}).to.throw('Invalid child');
}).to.throw('');
return null;
};

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require.resolve('./template.marko'),
handleColorClick: function(event, el) {

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require.resolve('./template.marko'),
handleColorMouseOver: function(event, el) {

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require('./template.marko'),
init: function() {

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require('./template.marko'),
init: function() {

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require('./template.marko'),
init: function() {

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require('./template.marko'),
init: function() {

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require.resolve('./template.marko'),
getInitialState: function(input) {
return {

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require.resolve('./template.marko'),
getInitialState: function(input) {
return {

View File

@ -9,9 +9,8 @@ module.exports = function(helpers) {
expect(widget.el.className).to.contain('large');
expect(widget.el.innerHTML).to.contain('Initial Label');
require('marko/widgets').batchUpdate(function() {
widget.setSize('small');
});
widget.setSize('small');
widget.update();
expect(widget.el.className).to.contain('small');
};

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require.resolve('./template.marko'),
getInitialState: function(input) {
return {

View File

@ -6,12 +6,14 @@ module.exports = function(helpers, done) {
label: 'Initial Label'
});
widget.onUpdate =function() {
expect(widget.el.className).to.contain('small');
done();
};
expect(widget.el.className).to.contain('large');
widget.setSize('small');
expect(widget.el.className).to.not.contain('small');
require('marko/widgets').onAfterUpdate(function() {
expect(widget.el.className).to.contain('small');
done();
});
};

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require('./template.marko'),
init: function() {

View File

@ -6,7 +6,6 @@ module.exports = function(helpers) {
expect(widget.emit).to.be.a('function');
expect(widget.on).to.be.a('function');
expect(widget.once).to.be.a('function');
expect(widget.addListener).to.be.a('function');
expect(widget.subscribeTo).to.be.a('function');
expect(widget.getElId).to.be.a('function');
expect(widget.elId).to.be.a('function');

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require('./template.marko'),
getTemplateData: function(state, input) {

View File

@ -1,3 +1,3 @@
// Export a render(input, callback) method that can be used
// to render this UI component on the client or server
require('marko/widgets').renderable(exports, require('./renderer'));
require('marko/widgets/legacy').renderable(exports, require('./renderer'));

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require('./template.marko'),
getWidgetConfig: function(input) {

View File

@ -1,3 +1,3 @@
// Export a render(input, callback) method that can be used
// to render this UI component on the client or server
require('marko/widgets').renderable(exports, require('./renderer'));
require('marko/widgets/legacy').renderable(exports, require('./renderer'));

View File

@ -1,3 +1,3 @@
// Export a render(input, callback) method that can be used
// to render this UI component on the client or server
require('marko/widgets').renderable(exports, require('./renderer'));
require('marko/widgets/legacy').renderable(exports, require('./renderer'));

View File

@ -1,3 +1,3 @@
// Export a render(input, callback) method that can be used
// to render this UI component on the client or server
require('marko/widgets').renderable(exports, require('./renderer'));
require('marko/widgets/legacy').renderable(exports, require('./renderer'));

View File

@ -1,3 +1,3 @@
// Export a render(input) method that can be used
// to render this UI component on the client or server
require('marko/widgets').renderable(exports, require('./renderer'));
require('marko/widgets/legacy').renderable(exports, require('./renderer'));

View File

@ -1,3 +1,3 @@
// Export a render(input, callback) method that can be used
// to render this UI component on the client or server
require('marko/widgets').renderable(exports, require('./renderer'));
require('marko/widgets/legacy').renderable(exports, require('./renderer'));

View File

@ -1,3 +1,3 @@
// Export a render(input, callback) method that can be used
// to render this UI component on the client or server
require('marko/widgets').renderable(exports, require('./renderer'));
require('marko/widgets/legacy').renderable(exports, require('./renderer'));

View File

@ -1,3 +1,3 @@
// Export a render(input) method that can be used
// to render this UI component on the client or server
require('marko/widgets').renderable(exports, require('./renderer'));
require('marko/widgets/legacy').renderable(exports, require('./renderer'));

View File

@ -1,3 +1,3 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require.resolve('./template.marko')
});

View File

@ -1,3 +1,3 @@
// Export a render(input, callback) method that can be used
// to render this UI component on the client or server
require('marko/widgets').renderable(exports, require('./renderer'));
require('marko/widgets/legacy').renderable(exports, require('./renderer'));

View File

@ -1,3 +1,3 @@
// Export a render(input, callback) method that can be used
// to render this UI component on the client or server
require('marko/widgets').renderable(exports, require('./renderer'));
require('marko/widgets/legacy').renderable(exports, require('./renderer'));

View File

@ -1,3 +1,3 @@
// Export a render(input) method that can be used
// to render this UI component on the client or server
require('marko/widgets').renderable(exports, require('./renderer'));
require('marko/widgets/legacy').renderable(exports, require('./renderer'));

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require.resolve('./template.marko'),
getInitialState: function(input) {
return {

View File

@ -1,3 +1,3 @@
// Export a render(input, callback) method that can be used
// to render this UI component on the client or server
require('marko/widgets').renderable(exports, require('./renderer'));
require('marko/widgets/legacy').renderable(exports, require('./renderer'));

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require.resolve('./template.marko'),
getInitialState: function(input) {
return {

View File

@ -1,6 +1,6 @@
var expect = require('chai').expect;
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require.resolve('./template.marko'),
init: function() {

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require.resolve('./template.marko'),
getTemplateData: function(state, input) {

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require.resolve('./template.marko'),
getTemplateData: function(state, input) {

View File

@ -14,11 +14,10 @@ module.exports = function(helpers) {
expect(simple != null).to.equal(true);
require('marko/widgets').batchUpdate(function() { // Force the HTML update to be immediate
widget.setProps({
showSimple: false
});
widget.setProps({
showSimple: false
});
widget.update();
expect(simpleDestroyed).to.equal(true);
expect(simple.isDestroyed()).to.equal(true);

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require.resolve('./template.marko'),
getTemplateData: function(state, input) {

View File

@ -1,3 +1,3 @@
// Export a render(input, callback) method that can be used
// to render this UI component on the client or server
require('marko/widgets').renderable(exports, require('./renderer'));
require('marko/widgets/legacy').renderable(exports, require('./renderer'));

View File

@ -1,3 +1,3 @@
// Export a render(input, callback) method that can be used
// to render this UI component on the client or server
require('marko/widgets').renderable(exports, require('./renderer'));
require('marko/widgets/legacy').renderable(exports, require('./renderer'));

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require('./template.marko'),
init: function() {

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require.resolve('./template.marko'),
getTemplateData: function(state, input) {

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require.resolve('./template.marko'),
getTemplateData: function(state, input) {

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require.resolve('./template.marko'),
getTemplateData: function(state, input) {

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require('./template.marko'),
init: function() {

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require('./template.marko'),
init: function() {

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require('./template.marko'),
init: function() {

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require.resolve('./template.marko'),
getInitialProps: function(input, out) {
var name = input.name;

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require('./template.marko'),
init: function() {

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require('./template.marko'),
init: function() {

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require('./template.marko'),
init: function(widgetConfig) {

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require('./template.marko'),
init: function() {

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require('./template.marko'),
init: function() {

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require('./template.marko'),
init: function() {

View File

@ -1,11 +0,0 @@
var expect = require('chai').expect;
module.exports = function(helpers) {
expect(function() {
var markoWidgetsRegistry = require('marko/widgets/registry');
var widgetWithRender = function() { return require('./widget'); };
var typeName = 'widgetWithRender';
markoWidgetsRegistry.register(typeName, widgetWithRender);
markoWidgetsRegistry.createWidget(typeName, 'w0');
}).to.throw(/is no longer supported/);
};

View File

@ -1,11 +0,0 @@
function Widget() {
}
Widget.prototype = {
render: function(input, out) {
}
};
module.exports = Widget;

View File

@ -1,3 +1,3 @@
// Export a render(input, callback) method that can be used
// to render this UI component on the client or server
require('marko/widgets').renderable(exports, require('./renderer'));
require('marko/widgets/legacy').renderable(exports, require('./renderer'));

View File

@ -1,6 +1,6 @@
var barRenderer = require('./components/app-bar/renderer').render;
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require('./template.marko'),
getTemplateData: function(input, out) {
return {

View File

@ -1,3 +1,3 @@
// Export a render(input, callback) method that can be used
// to render this UI component on the client or server
require('marko/widgets').renderable(exports, require('./renderer'));
require('marko/widgets/legacy').renderable(exports, require('./renderer'));

View File

@ -1,6 +1,6 @@
var barRenderer = require('./components/app-bar/renderer').render;
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require('./template.marko'),
getTemplateData: function(input, out) {
return {

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require('./template.marko'),
init: function() {

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require('./template.marko'),
init: function() {

View File

@ -1,3 +1,3 @@
// Export a render(input, callback) method that can be used
// to render this UI component on the client or server
require('marko/widgets').renderable(exports, require('./renderer'));
require('marko/widgets/legacy').renderable(exports, require('./renderer'));

View File

@ -1,3 +1,3 @@
// Export a render(input, callback) method that can be used
// to render this UI component on the client or server
require('marko/widgets').renderable(exports, require('./renderer'));
require('marko/widgets/legacy').renderable(exports, require('./renderer'));

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require.resolve('./template.marko'),
getInitialState: function(input) {

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require.resolve('./template.marko'),
getInitialState: function(input) {
@ -27,6 +27,7 @@ module.exports = require('marko/widgets').defineComponent({
update_messageCount: function(newMessageCount) {
this.getWidget('nestedStateful').setMessageCount(newMessageCount);
this.getWidget('nestedStateful').update();
},
setName: function(newName) {

View File

@ -30,15 +30,14 @@ module.exports = function(helpers) {
'init',
'onRender:firstRender']);
require('marko/widgets').batchUpdate(function() {
// NOTE: messageCount has an update handler
widget.setState('messageCount', 999);
expect(targetEl.innerHTML).to.contain('Hello Frank!');
expect(targetEl.innerHTML).to.contain('10');
expect(widgetLifecycleEvents[widget.id]).to.deep.equal([
'init',
'onRender:firstRender']);
});
// NOTE: messageCount has an update handler
widget.setState('messageCount', 999);
expect(targetEl.innerHTML).to.contain('Hello Frank!');
expect(targetEl.innerHTML).to.contain('10');
expect(widgetLifecycleEvents[widget.id]).to.deep.equal([
'init',
'onRender:firstRender']);
widget.update();
expect(targetEl.innerHTML).to.contain('Hello Frank!');
expect(targetEl.innerHTML).to.contain('999');
@ -60,17 +59,17 @@ module.exports = function(helpers) {
'init',
'onRender:firstRender']);
require('marko/widgets').batchUpdate(function() {
// NOTE: name does *not* have an update handler
widget.setState('name', 'Jane');
expect(targetEl.innerHTML).to.contain('Hello Frank!');
expect(targetEl.innerHTML).to.contain('999');
expect(widgetLifecycleEvents[widget.id]).to.deep.equal([
'init',
'onRender:firstRender',
'onBeforeUpdate',
'onUpdate']);
});
// NOTE: name does *not* have an update handler
widget.setState('name', 'Jane');
expect(targetEl.innerHTML).to.contain('Hello Frank!');
expect(targetEl.innerHTML).to.contain('999');
expect(widgetLifecycleEvents[widget.id]).to.deep.equal([
'init',
'onRender:firstRender',
'onBeforeUpdate',
'onUpdate']);
widget.update();
expect(targetEl.innerHTML).to.contain('Hello Jane!');
expect(targetEl.innerHTML).to.contain('999');

View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets').defineComponent({
module.exports = require('marko/widgets/legacy').defineComponent({
template: require.resolve('./template.marko'),
getTemplateData: function(state, input) {

View File

@ -15,18 +15,18 @@ module.exports = function(helpers) {
'onRender:firstRender'
]);
require('marko/widgets').batchUpdate(function() {
widget.setProps({
name: 'Jane',
messageCount: 30
});
expect(targetEl.innerHTML).to.contain('Hello Frank! You have 10 new messages.');
expect(widget.lifecycleEvents).to.deep.equal([
'init',
'onRender:firstRender'
]);
widget.setProps({
name: 'Jane',
messageCount: 30
});
expect(targetEl.innerHTML).to.contain('Hello Frank! You have 10 new messages.');
expect(widget.lifecycleEvents).to.deep.equal([
'init',
'onRender:firstRender'
]);
widget.update();
expect(targetEl.innerHTML).to.contain('Hello Jane! You have 30 new messages.');

Some files were not shown because too many files have changed in this diff Show More