mirror of
https://github.com/marko-js/marko.git
synced 2025-12-08 19:26:05 +00:00
Significant code size reduction
This commit is contained in:
parent
4dcc1b2775
commit
e97a45352d
@ -1,4 +0,0 @@
|
||||
{
|
||||
"presets": ["react"],
|
||||
"plugins": ["transform-react-constant-elements"]
|
||||
}
|
||||
@ -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.');
|
||||
})
|
||||
});
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
11
benchmark/size/preact.html
Normal file
11
benchmark/size/preact.html
Normal 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>
|
||||
9
benchmark/size/preact/.babelrc
Normal file
9
benchmark/size/preact/.babelrc
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"presets": [
|
||||
"es2015-loose",
|
||||
"stage-0"
|
||||
],
|
||||
"plugins": [
|
||||
[ "transform-react-jsx", { "pragma": "h" } ]
|
||||
]
|
||||
}
|
||||
7
benchmark/size/preact/client.jsx
Normal file
7
benchmark/size/preact/client.jsx
Normal 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);
|
||||
56
benchmark/size/preact/components/App/index.jsx
Normal file
56
benchmark/size/preact/components/App/index.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
};
|
||||
8
benchmark/size/react/.babelrc
Normal file
8
benchmark/size/react/.babelrc
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"presets": [
|
||||
"es2015-loose",
|
||||
"stage-0",
|
||||
"react"
|
||||
],
|
||||
"plugins": ["transform-react-constant-elements"]
|
||||
}
|
||||
@ -22,12 +22,12 @@
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
data: function() {
|
||||
return {
|
||||
clickCount: 0,
|
||||
name: 'Frank',
|
||||
colors: ['red', 'green', 'blue']
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleButtonClick: function() {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
25
package.json
25
package.json
@ -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": "$__"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
var EventEmitter = require('events').EventEmitter;
|
||||
var EventEmitter = require('events-light');
|
||||
module.exports = new EventEmitter();
|
||||
@ -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;
|
||||
|
||||
@ -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');
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
'use strict';
|
||||
module.exports = function load(templatePath) {
|
||||
throw new Error('Template not found: ' + templatePath);
|
||||
throw Error('Template not found: ' + templatePath);
|
||||
};
|
||||
@ -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;
|
||||
},
|
||||
|
||||
@ -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();
|
||||
},
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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' });
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ module.exports = function(helpers) {
|
||||
|
||||
root.e('div', { class: 'first-child' });
|
||||
|
||||
root.appendDocumentFragment();
|
||||
root.$__appendDocumentFragment();
|
||||
|
||||
root.e('div', { class: 'last-child' });
|
||||
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
};
|
||||
@ -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;
|
||||
};
|
||||
@ -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);
|
||||
};
|
||||
@ -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);
|
||||
};
|
||||
@ -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;
|
||||
};
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
};
|
||||
@ -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;
|
||||
};
|
||||
@ -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) {
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
module.exports = require('marko/widgets').defineComponent({
|
||||
module.exports = require('marko/widgets/legacy').defineComponent({
|
||||
template: require('./template.marko'),
|
||||
|
||||
init: function() {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
module.exports = require('marko/widgets').defineComponent({
|
||||
module.exports = require('marko/widgets/legacy').defineComponent({
|
||||
template: require('./template.marko'),
|
||||
|
||||
init: function() {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
module.exports = require('marko/widgets').defineComponent({
|
||||
module.exports = require('marko/widgets/legacy').defineComponent({
|
||||
template: require('./template.marko'),
|
||||
|
||||
init: function() {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
module.exports = require('marko/widgets').defineComponent({
|
||||
module.exports = require('marko/widgets/legacy').defineComponent({
|
||||
template: require('./template.marko'),
|
||||
|
||||
init: function() {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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');
|
||||
};
|
||||
@ -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 {
|
||||
|
||||
@ -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();
|
||||
});
|
||||
|
||||
};
|
||||
@ -1,4 +1,4 @@
|
||||
module.exports = require('marko/widgets').defineComponent({
|
||||
module.exports = require('marko/widgets/legacy').defineComponent({
|
||||
template: require('./template.marko'),
|
||||
|
||||
init: function() {
|
||||
|
||||
@ -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');
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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'));
|
||||
@ -1,4 +1,4 @@
|
||||
module.exports = require('marko/widgets').defineComponent({
|
||||
module.exports = require('marko/widgets/legacy').defineComponent({
|
||||
template: require('./template.marko'),
|
||||
|
||||
getWidgetConfig: function(input) {
|
||||
|
||||
@ -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'));
|
||||
@ -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'));
|
||||
@ -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'));
|
||||
@ -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'));
|
||||
@ -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'));
|
||||
@ -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'));
|
||||
@ -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'));
|
||||
@ -1,3 +1,3 @@
|
||||
module.exports = require('marko/widgets').defineComponent({
|
||||
module.exports = require('marko/widgets/legacy').defineComponent({
|
||||
template: require.resolve('./template.marko')
|
||||
});
|
||||
@ -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'));
|
||||
@ -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'));
|
||||
@ -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'));
|
||||
@ -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 {
|
||||
|
||||
@ -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'));
|
||||
@ -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 {
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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'));
|
||||
@ -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'));
|
||||
@ -1,4 +1,4 @@
|
||||
module.exports = require('marko/widgets').defineComponent({
|
||||
module.exports = require('marko/widgets/legacy').defineComponent({
|
||||
template: require('./template.marko'),
|
||||
|
||||
init: function() {
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
module.exports = require('marko/widgets').defineComponent({
|
||||
module.exports = require('marko/widgets/legacy').defineComponent({
|
||||
template: require('./template.marko'),
|
||||
|
||||
init: function() {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
module.exports = require('marko/widgets').defineComponent({
|
||||
module.exports = require('marko/widgets/legacy').defineComponent({
|
||||
template: require('./template.marko'),
|
||||
|
||||
init: function() {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
module.exports = require('marko/widgets').defineComponent({
|
||||
module.exports = require('marko/widgets/legacy').defineComponent({
|
||||
template: require('./template.marko'),
|
||||
|
||||
init: function() {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
module.exports = require('marko/widgets').defineComponent({
|
||||
module.exports = require('marko/widgets/legacy').defineComponent({
|
||||
template: require('./template.marko'),
|
||||
|
||||
init: function() {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
module.exports = require('marko/widgets').defineComponent({
|
||||
module.exports = require('marko/widgets/legacy').defineComponent({
|
||||
template: require('./template.marko'),
|
||||
|
||||
init: function() {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
module.exports = require('marko/widgets').defineComponent({
|
||||
module.exports = require('marko/widgets/legacy').defineComponent({
|
||||
template: require('./template.marko'),
|
||||
|
||||
init: function(widgetConfig) {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
module.exports = require('marko/widgets').defineComponent({
|
||||
module.exports = require('marko/widgets/legacy').defineComponent({
|
||||
template: require('./template.marko'),
|
||||
|
||||
init: function() {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
module.exports = require('marko/widgets').defineComponent({
|
||||
module.exports = require('marko/widgets/legacy').defineComponent({
|
||||
template: require('./template.marko'),
|
||||
|
||||
init: function() {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
module.exports = require('marko/widgets').defineComponent({
|
||||
module.exports = require('marko/widgets/legacy').defineComponent({
|
||||
template: require('./template.marko'),
|
||||
|
||||
init: function() {
|
||||
|
||||
@ -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/);
|
||||
};
|
||||
@ -1,11 +0,0 @@
|
||||
function Widget() {
|
||||
|
||||
}
|
||||
|
||||
Widget.prototype = {
|
||||
render: function(input, out) {
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = Widget;
|
||||
@ -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'));
|
||||
@ -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 {
|
||||
|
||||
@ -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'));
|
||||
@ -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 {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
module.exports = require('marko/widgets').defineComponent({
|
||||
module.exports = require('marko/widgets/legacy').defineComponent({
|
||||
template: require('./template.marko'),
|
||||
|
||||
init: function() {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
module.exports = require('marko/widgets').defineComponent({
|
||||
module.exports = require('marko/widgets/legacy').defineComponent({
|
||||
template: require('./template.marko'),
|
||||
|
||||
init: function() {
|
||||
|
||||
@ -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'));
|
||||
@ -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'));
|
||||
@ -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) {
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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');
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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
Loading…
x
Reference in New Issue
Block a user