archive-gh-me/marko
1
0
Fork 0
mirror of https://github.com/marko-js/marko.git synced 2025-12-08 19:26:05 +00:00
Code Issues Projects Releases Wiki Activity

Mass rename of "widget" to "component" in files

Browse Source
This commit is contained in:
Patrick Steele-Idem 2017-02-20 16:30:16 -07:00
parent 377ab30e79
commit ad00eb2aeb
351 changed files with 2660 additions and 2660 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.github/CONTRIBUTING.md vendored
View File

@ -103,7 +103,7 @@ Every issue should be assigned one of these.
![](https://img.shields.io/badge/scope-compiler-cc0077.svg) ![](https://img.shields.io/badge/scope-compiler-cc0077.svg)
![](https://img.shields.io/badge/scope-runtime-eebb00.svg) ![](https://img.shields.io/badge/scope-runtime-eebb00.svg)
![](https://img.shields.io/badge/scope-core%20taglib-00cccc.svg) ![](https://img.shields.io/badge/scope-core%20taglib-00cccc.svg)
![](https://img.shields.io/badge/scope-widgets-9900aa.svg) ![](https://img.shields.io/badge/scope-components-9900aa.svg)
![](https://img.shields.io/badge/scope-tools-fef2c0.svg) ![](https://img.shields.io/badge/scope-tools-fef2c0.svg)
What part of the Marko stack does this issue apply to? In most cases there should only be one of these. What part of the Marko stack does this issue apply to? In most cases there should only be one of these.
@ -112,7 +112,7 @@ What part of the Marko stack does this issue apply to? In most cases there shoul
- **compiler**: Relates to the compiler (server only) - **compiler**: Relates to the compiler (server only)
- **runtime**: Relates to the runtime (isomorphic/universal) - **runtime**: Relates to the runtime (isomorphic/universal)
- **core-taglib**: Relates to custom tags that ship with Marko - **core-taglib**: Relates to custom tags that ship with Marko
- **widgets**: Relates to `marko-widgets` - **components**: Relates to `marko-components`
- **tools**: Relates to editor plugins, commandline tools, etc. - **tools**: Relates to editor plugins, commandline tools, etc.
### Difficulty ### Difficulty

2
CHANGELOG.md
View File

@ -124,7 +124,7 @@ require('marko/node-require').install({
### 3.7.4 ### 3.7.4
- Fixed [#339](https://github.com/marko-js/marko/issues/339) - Tag transformers are not being applied to tags with a dynamic tag name (fixes [#146](https://github.com/marko-js/marko-widgets/issues/146) for Marko Widgets) - Fixed [#339](https://github.com/marko-js/marko/issues/339) - Tag transformers are not being applied to tags with a dynamic tag name (fixes [#146](https://github.com/marko-js/marko-components/issues/146) for Marko Components)
### 3.7.3 ### 3.7.3

24
README.md
View File

@ -179,22 +179,22 @@ template.stream(templateData).pipe(process.stdout);
# UI Components # UI Components
Marko Widgets is a minimalist library for building isomorphic/universal UI components with the help of the Marko Components is a minimalist library for building isomorphic/universal UI components with the help of the
[Marko templating engine](http://markojs.com/docs/). Marko renders the HTML for UI components, while Marko Widgets adds client-side behavior. Client-side behavior includes the following: [Marko templating engine](http://markojs.com/docs/). Marko renders the HTML for UI components, while Marko Components adds client-side behavior. Client-side behavior includes the following:
- Handling DOM events - Handling DOM events
- Emitting custom events - Emitting custom events
- Handling custom events emitted by other widgets - Handling custom events emitted by other components
- Manipulating and updating the DOM - Manipulating and updating the DOM
Marko Widgets offers advanced features like DOM-diffing, batched updates, stateful widgets, declarative event binding and efficient event delegation. Marko Components offers advanced features like DOM-diffing, batched updates, stateful components, declarative event binding and efficient event delegation.
Changing a widgets state or properties will result in the DOM automatically being updated without writing extra code. Marko Widgets has adopted many of the good design principles promoted by the [React](https://facebook.github.io/react/index.html) team, but aims to be much lighter and often faster (especially on the server). When updating the view for a widget, Marko Widgets uses DOM diffing to make the minimum number of changes to the DOM through the use of the [morphdom](https://github.com/patrick-steele-idem/morphdom) module. Changing a components state or properties will result in the DOM automatically being updated without writing extra code. Marko Components has adopted many of the good design principles promoted by the [React](https://facebook.github.io/react/index.html) team, but aims to be much lighter and often faster (especially on the server). When updating the view for a component, Marko Components uses DOM diffing to make the minimum number of changes to the DOM through the use of the [morphdom](https://github.com/patrick-steele-idem/morphdom) module.
UI components are defined using very clean JavaScript code. For example: UI components are defined using very clean JavaScript code. For example:
```javascript ```javascript
module.exports = require('marko-widgets').defineComponent({ module.exports = require('marko-components').defineComponent({
/** /**
* The template to use as the view * The template to use as the view
*/ */
@ -213,7 +213,7 @@ module.exports = require('marko-widgets').defineComponent({
/** /**
* Return an object that is used as the template data. The * Return an object that is used as the template data. The
* template data should be based on the current widget state * template data should be based on the current component state
* that is passed in as the first argument * that is passed in as the first argument
*/ */
getTemplateData: function(state) { getTemplateData: function(state) {
@ -228,13 +228,13 @@ module.exports = require('marko-widgets').defineComponent({
}, },
/** /**
* This is the constructor for the widget. Called once when * This is the constructor for the component. Called once when
* the widget is first added to the DOM. * the component is first added to the DOM.
*/ */
init: function() { init: function() {
var el = this.el; var el = this.el;
// "el" will be reference the raw HTML element that this // "el" will be reference the raw HTML element that this
// widget is bound to. You can do whatever you want with it... // component is bound to. You can do whatever you want with it...
// el.style.color = 'red'; // el.style.color = 'red';
}, },
@ -272,9 +272,9 @@ And, here is the corresponding Marko template for the UI component:
</div> </div>
``` ```
<a href="http://markojs.com/marko-widgets/try-online/" target="_blank">Try Marko Widgets Online!</a> <a href="http://markojs.com/marko-components/try-online/" target="_blank">Try Marko Components Online!</a>
For more details on Marko Widgets, please check out the [Marko Widgets Documentation](http://markojs.com/docs/marko-widgets/). For more details on Marko Components, please check out the [Marko Components Documentation](http://markojs.com/docs/marko-components/).
# Common issues # Common issues

46
ROADMAP.md
View File

@ -51,13 +51,13 @@ You can easily `require`/`import` a single file component and interact with it u
```js ```js
var myCounter = require('./src/components/my-counter'); var myCounter = require('./src/components/my-counter');
var widget = myCounter.renderSync({ var component = myCounter.renderSync({
value: 10 value: 10
}) })
.appendTo(document.body) .appendTo(document.body)
.getWidget(); .getComponent();
widget.increment(); component.increment();
``` ```
Of course, a single file component can also be embedded in another template as a custom tag: Of course, a single file component can also be embedded in another template as a custom tag:
@ -131,17 +131,17 @@ The VDOM output allows optimizations that were previously not possible:
Our initial benchmarks show a significant improvement in rendering time and we are consistently outperforming React. The independent [morphdom](https://github.com/patrick-steele-idem/morphdom) library has been tweaked to support diffing with both a real DOM and a Marko virtual DOM. Our initial benchmarks show a significant improvement in rendering time and we are consistently outperforming React. The independent [morphdom](https://github.com/patrick-steele-idem/morphdom) library has been tweaked to support diffing with both a real DOM and a Marko virtual DOM.
### Merge in Marko Widgets ([#390](https://github.com/marko-js/marko/issues/390)) ### Merge in Marko Components ([#390](https://github.com/marko-js/marko/issues/390))
A big part of this release is a shift in focus from Marko being merely a templating language to a complete UI library. As such, we are providing first-class support for components. A big part of this release is a shift in focus from Marko being merely a templating language to a complete UI library. As such, we are providing first-class support for components.
You will no longer need to install `marko-widgets` as an external library, and there is more cohesion between the templates and components/widgets. You will no longer need to install `marko-components` as an external library, and there is more cohesion between the templates and components/components.
### Improved component lifecycle methods ([#396](https://github.com/marko-js/marko/issues/396)) ### Improved component lifecycle methods ([#396](https://github.com/marko-js/marko/issues/396))
- `getInitialState()` ➔ `onInput(input)` - `getInitialState()` ➔ `onInput(input)`
- `getWidgetConfig()` ➔ `onInput(input)` - `getComponentConfig()` ➔ `onInput(input)`
- `init(config)` ➔ `onMount()` - `init(config)` ➔ `onMount()`
- `getTemplateData(input, state)` ➔ (no longer needed) - `getTemplateData(input, state)` ➔ (no longer needed)
- `getInitialProps(input)` ➔ (no longer needed) - `getInitialProps(input)` ➔ (no longer needed)
@ -167,7 +167,7 @@ class {
} }
onRender(out) { onRender(out) {
// Called for every render. This widget // Called for every render. This component
// may or may not be mounted. // may or may not be mounted.
// During render we have access to the `out`. // During render we have access to the `out`.
console.log('The template is about to be rendered!'); console.log('The template is about to be rendered!');
@ -204,7 +204,7 @@ class {
} }
``` ```
### Automatically watch widget state object for changes ([#406](https://github.com/marko-js/marko/issues/406)) ### Automatically watch component state object for changes ([#406](https://github.com/marko-js/marko/issues/406))
**Old:** **Old:**
@ -675,7 +675,7 @@ or, with the non-concise syntax:
**New:** **New:**
```html ```html
<div widget="./widget.js"> <div component="./component.js">
... ...
</div> </div>
``` ```
@ -683,13 +683,13 @@ or, with the non-concise syntax:
Or, applied as a tag (see next: multiple top level DOM elements): Or, applied as a tag (see next: multiple top level DOM elements):
```html ```html
<script widget="./widget.js"/> <script component="./component.js"/>
<div> <div>
... ...
</div> </div>
``` ```
Or, since `widget.js` is automatically recognized Or, since `component.js` is automatically recognized
```html ```html
<div> <div>
@ -697,11 +697,11 @@ Or, since `widget.js` is automatically recognized
</div> </div>
``` ```
### Deprecate `widget-types` ([#514](https://github.com/marko-js/marko/issues/514)) ### Deprecate `component-types` ([#514](https://github.com/marko-js/marko/issues/514))
**Old:** **Old:**
```html ```html
<widget-types default="./widget" mobile="./widget-mobile"/> <component-types default="./component" mobile="./component-mobile"/>
<div w-bind=(data.isMobile ? 'default' : 'mobile')> <div w-bind=(data.isMobile ? 'default' : 'mobile')>
... ...
@ -775,7 +775,7 @@ or
**New:** **New:**
**Automatic widget initialization!** **Automatic component initialization!**
### Deprecate `w-body` and replace with `include` ([#418](https://github.com/marko-js/marko/issues/418)) ### Deprecate `w-body` and replace with `include` ([#418](https://github.com/marko-js/marko/issues/418))
@ -854,7 +854,7 @@ Or, with an argument value:
</div> </div>
``` ```
### Deprecate `w-extend` and allow multiple widgets to be bound to the same HTML element ([#392](https://github.com/marko-js/marko/issues/392)) ### Deprecate `w-extend` and allow multiple components to be bound to the same HTML element ([#392](https://github.com/marko-js/marko/issues/392))
> `w-extend` is now deprecated > `w-extend` is now deprecated
@ -874,7 +874,7 @@ or
<some-component onEvent('handleEvent')/> <some-component onEvent('handleEvent')/>
``` ```
NOTE: The outer most widget is what is returned when calling `getWidget()`/`getWidgetForEl()`. NOTE: The outer most component is what is returned when calling `getComponent()`/`getComponentForEl()`.
<a name="breaking-changes"></a> <a name="breaking-changes"></a>
@ -894,9 +894,9 @@ template.render(data); // returns `out`
template.render(data, (err, html, out) => {}); template.render(data, (err, html, out) => {});
template.renderSync(data); // returns a String representing the HTML output template.renderSync(data); // returns a String representing the HTML output
widget.render(data); // returns a `RenderResult` component.render(data); // returns a `RenderResult`
widget.render(data, (err, renderResult) => {}); component.render(data, (err, renderResult) => {});
widget.renderSync(data); // throws an error, not a method. component.renderSync(data); // throws an error, not a method.
``` ```
**New:** **New:**
@ -909,12 +909,12 @@ template.render(data); // returns `out`
template.render(data, (err, out) => {}); template.render(data, (err, out) => {});
template.renderSync(data); // returns `out` template.renderSync(data); // returns `out`
widget.render(data); // returns `out` component.render(data); // returns `out`
widget.render(data, (err, out) => {}); component.render(data, (err, out) => {});
widget.renderSync(data); // returns `out` component.renderSync(data); // returns `out`
``` ```
Also, `out` has been updated to implement DOM manipulation methods like `appendTo` that were previously only available from the `RenderResult` returned from widget renders. Also, `out` has been updated to implement DOM manipulation methods like `appendTo` that were previously only available from the `RenderResult` returned from component renders.
NOTE: We will implement `out.toString()` and `out.toJSON()` so in many cases the `out` can be used as a string. NOTE: We will implement `out.toString()` and `out.toJSON()` so in many cases the `out` can be used as a string.

2
compiler/browser.json
View File

@ -1,7 +1,7 @@
{ {
"dependencies": [ "dependencies": [
"../taglibs/compiler.browser.json", "../taglibs/compiler.browser.json",
"../widgets/compiler.browser.json", "../components/compiler.browser.json",
"../runtime/compiler.browser.json" "../runtime/compiler.browser.json"
] ]
} }

2
compiler/index.js
View File

@ -239,7 +239,7 @@ registerTaglib(require('../taglibs/html/marko.json'), require.resolve('../taglib
registerTaglib(require('../taglibs/svg/marko.json'), require.resolve('../taglibs/svg/marko.json')); registerTaglib(require('../taglibs/svg/marko.json'), require.resolve('../taglibs/svg/marko.json'));
registerTaglib(require('../taglibs/async/marko.json'), require.resolve('../taglibs/async/marko.json')); registerTaglib(require('../taglibs/async/marko.json'), require.resolve('../taglibs/async/marko.json'));
registerTaglib(require('../taglibs/cache/marko.json'), require.resolve('../taglibs/cache/marko.json')); registerTaglib(require('../taglibs/cache/marko.json'), require.resolve('../taglibs/cache/marko.json'));
registerTaglib(require('../widgets/taglib/marko.json'), require.resolve('../widgets/taglib/marko.json')); registerTaglib(require('../components/taglib/marko.json'), require.resolve('../components/taglib/marko.json'));
exports.registerTaglib = function(filePath) { exports.registerTaglib = function(filePath) {
ok(typeof filePath === 'string', '"filePath" shouldbe a string'); ok(typeof filePath === 'string', '"filePath" shouldbe a string');

170
components/Component.js
View File

@ -3,13 +3,13 @@
var domInsert = require('../runtime/dom-insert'); var domInsert = require('../runtime/dom-insert');
var marko = require('../'); var marko = require('../');
var widgetsUtil = require('./util'); var componentsUtil = require('./util');
var getWidgetForEl = widgetsUtil.$__getWidgetForEl; var getComponentForEl = componentsUtil.$__getComponentForEl;
var widgetLookup = widgetsUtil.$__widgetLookup; var componentLookup = componentsUtil.$__componentLookup;
var emitLifecycleEvent = widgetsUtil.$__emitLifecycleEvent; var emitLifecycleEvent = componentsUtil.$__emitLifecycleEvent;
var destroyWidgetForEl = widgetsUtil.$__destroyWidgetForEl; var destroyComponentForEl = componentsUtil.$__destroyComponentForEl;
var destroyElRecursive = widgetsUtil.$__destroyElRecursive; var destroyElRecursive = componentsUtil.$__destroyElRecursive;
var getElementById = widgetsUtil.$__getElementById; var getElementById = componentsUtil.$__getElementById;
var EventEmitter = require('events-light'); var EventEmitter = require('events-light');
var RenderResult = require('../runtime/RenderResult'); var RenderResult = require('../runtime/RenderResult');
var SubscriptionTracker = require('listener-tracker'); var SubscriptionTracker = require('listener-tracker');
@ -35,34 +35,34 @@ function removeListener(removeEventListenerHandle) {
removeEventListenerHandle(); removeEventListenerHandle();
} }
function hasCompatibleWidget(widgetsContext, existingWidget) { function hasCompatibleComponent(componentsContext, existingComponent) {
var id = existingWidget.id; var id = existingComponent.id;
var newWidgetDef = widgetsContext.$__widgetsById[id]; var newComponentDef = componentsContext.$__componentsById[id];
return newWidgetDef && existingWidget.$__type == newWidgetDef.$__widget.$__type; return newComponentDef && existingComponent.$__type == newComponentDef.$__component.$__type;
} }
function handleCustomEventWithMethodListener(widget, targetMethodName, args, extraArgs) { function handleCustomEventWithMethodListener(component, targetMethodName, args, extraArgs) {
// Remove the "eventType" argument // Remove the "eventType" argument
args.push(widget); args.push(component);
if (extraArgs) { if (extraArgs) {
args = extraArgs.concat(args); args = extraArgs.concat(args);
} }
var targetWidget = widgetLookup[widget.$__scope]; var targetComponent = componentLookup[component.$__scope];
var targetMethod = targetWidget[targetMethodName]; var targetMethod = targetComponent[targetMethodName];
if (!targetMethod) { if (!targetMethod) {
throw Error('Method not found: ' + targetMethodName); throw Error('Method not found: ' + targetMethodName);
} }
targetMethod.apply(targetWidget, args); targetMethod.apply(targetComponent, args);
} }
function getElIdHelper(widget, widgetElId, index) { function getElIdHelper(component, componentElId, index) {
var id = widget.id; var id = component.id;
var elId = widgetElId != null ? id + '-' + widgetElId : id; var elId = componentElId != null ? id + '-' + componentElId : id;
if (index != null) { if (index != null) {
elId += '[' + index + ']'; elId += '[' + index + ']';
@ -78,7 +78,7 @@ function getElIdHelper(widget, widgetElId, index) {
* looping over and invoking the custom update handlers. * looping over and invoking the custom update handlers.
* @return {boolean} Returns true if if the DOM was updated. False, otherwise. * @return {boolean} Returns true if if the DOM was updated. False, otherwise.
*/ */
function processUpdateHandlers(widget, stateChanges, oldState) { function processUpdateHandlers(component, stateChanges, oldState) {
var handlerMethod; var handlerMethod;
var handlers; var handlers;
@ -86,7 +86,7 @@ function processUpdateHandlers(widget, stateChanges, oldState) {
if (stateChanges.hasOwnProperty(propName)) { if (stateChanges.hasOwnProperty(propName)) {
var handlerMethodName = 'update_' + propName; var handlerMethodName = 'update_' + propName;
handlerMethod = widget[handlerMethodName]; handlerMethod = component[handlerMethodName];
if (handlerMethod) { if (handlerMethod) {
(handlers || (handlers=[])).push([propName, handlerMethod]); (handlers || (handlers=[])).push([propName, handlerMethod]);
} else { } else {
@ -111,18 +111,18 @@ function processUpdateHandlers(widget, stateChanges, oldState) {
var newValue = stateChanges[propertyName]; var newValue = stateChanges[propertyName];
var oldValue = oldState[propertyName]; var oldValue = oldState[propertyName];
handlerMethod.call(widget, newValue, oldValue); handlerMethod.call(component, newValue, oldValue);
} }
emitLifecycleEvent(widget, 'update'); emitLifecycleEvent(component, 'update');
widget.$__reset(); component.$__reset();
} }
return true; return true;
} }
function checkInputChanged(existingWidget, oldInput, newInput) { function checkInputChanged(existingComponent, oldInput, newInput) {
if (oldInput != newInput) { if (oldInput != newInput) {
if (oldInput == null || newInput == null) { if (oldInput == null || newInput == null) {
return true; return true;
@ -148,7 +148,7 @@ function checkInputChanged(existingWidget, oldInput, newInput) {
function handleNodeDiscarded(node) { function handleNodeDiscarded(node) {
if (node.nodeType == 1) { if (node.nodeType == 1) {
destroyWidgetForEl(node); destroyComponentForEl(node);
} }
} }
@ -156,14 +156,14 @@ function handleBeforeNodeDiscarded(node) {
return eventDelegation.$__handleNodeDetach(node); return eventDelegation.$__handleNodeDetach(node);
} }
var widgetProto; var componentProto;
/** /**
* Base widget type. * Base component type.
* *
* NOTE: Any methods that are prefixed with an underscore should be considered private! * NOTE: Any methods that are prefixed with an underscore should be considered private!
*/ */
function Widget(id, doc) { function Component(id, doc) {
EventEmitter.call(this); EventEmitter.call(this);
this.id = id; this.id = id;
this.el = this.el =
@ -186,8 +186,8 @@ function Widget(id, doc) {
this.$__document = doc; this.$__document = doc;
} }
Widget.prototype = widgetProto = { Component.prototype = componentProto = {
$__isWidget: true, $__isComponent: true,
subscribeTo: function(target) { subscribeTo: function(target) {
if (!target) { if (!target) {
@ -196,7 +196,7 @@ Widget.prototype = widgetProto = {
var subscriptions = this.$__subscriptions || (this.$__subscriptions = new SubscriptionTracker()); var subscriptions = this.$__subscriptions || (this.$__subscriptions = new SubscriptionTracker());
var subscribeToOptions = target.$__isWidget ? var subscribeToOptions = target.$__isComponent ?
WIDGET_SUBSCRIBE_TO_OPTIONS : WIDGET_SUBSCRIBE_TO_OPTIONS :
NON_WIDGET_SUBSCRIBE_TO_OPTIONS; NON_WIDGET_SUBSCRIBE_TO_OPTIONS;
@ -219,14 +219,14 @@ Widget.prototype = widgetProto = {
return emit.apply(this, arguments); return emit.apply(this, arguments);
} }
}, },
getElId: function (widgetElId, index) { getElId: function (componentElId, index) {
return getElIdHelper(this, widgetElId, index); return getElIdHelper(this, componentElId, index);
}, },
getEl: function (widgetElId, index) { getEl: function (componentElId, index) {
var doc = this.$__document; var doc = this.$__document;
if (widgetElId != null) { if (componentElId != null) {
return getElementById(doc, getElIdHelper(this, widgetElId, index)); return getElementById(doc, getElIdHelper(this, componentElId, index));
} else { } else {
return this.el || getElementById(doc, getElIdHelper(this)); return this.el || getElementById(doc, getElIdHelper(this));
} }
@ -241,18 +241,18 @@ Widget.prototype = widgetProto = {
} }
return els; return els;
}, },
getWidget: function(id, index) { getComponent: function(id, index) {
return widgetLookup[getElIdHelper(this, id, index)]; return componentLookup[getElIdHelper(this, id, index)];
}, },
getWidgets: function(id) { getComponents: function(id) {
var widgets = []; var components = [];
var i = 0; var i = 0;
var widget; var component;
while((widget = widgetLookup[getElIdHelper(this, id, i)])) { while((component = componentLookup[getElIdHelper(this, id, i)])) {
widgets.push(widget); components.push(component);
i++; i++;
} }
return widgets; return components;
}, },
destroy: function() { destroy: function() {
if (this.$__destroyed) { if (this.$__destroyed) {
@ -265,10 +265,10 @@ Widget.prototype = widgetProto = {
this.$__destroyShallow(); this.$__destroyShallow();
var rootWidgets = this.$__rootWidgets; var rootComponents = this.$__rootComponents;
if (rootWidgets) { if (rootComponents) {
for (i=0, len=rootWidgets.length; i<len; i++) { for (i=0, len=rootComponents.length; i<len; i++) {
rootWidgets[i].destroy(); rootComponents[i].destroy();
} }
} }
@ -302,7 +302,7 @@ Widget.prototype = widgetProto = {
this.$__subscriptions = null; this.$__subscriptions = null;
} }
delete widgetLookup[this.id]; delete componentLookup[this.id];
}, },
isDestroyed: function() { isDestroyed: function() {
@ -407,7 +407,7 @@ Widget.prototype = widgetProto = {
$__queueUpdate: function() { $__queueUpdate: function() {
if (!this.$__updateQueued) { if (!this.$__updateQueued) {
updateManager.$__queueWidgetUpdate(this); updateManager.$__queueComponentUpdate(this);
} }
}, },
@ -492,27 +492,27 @@ Widget.prototype = widgetProto = {
var result = new RenderResult(out); var result = new RenderResult(out);
var targetNode = out.$__getOutput(); var targetNode = out.$__getOutput();
var widgetsContext = out.global.widgets; var componentsContext = out.global.components;
function onBeforeElUpdated(fromEl, toEl) { function onBeforeElUpdated(fromEl, toEl) {
var id = fromEl.id; var id = fromEl.id;
var existingWidget; var existingComponent;
if (widgetsContext && id) { if (componentsContext && id) {
var preserved = widgetsContext.$__preserved[id]; var preserved = componentsContext.$__preserved[id];
if (preserved && !preserved.$__bodyOnly) { if (preserved && !preserved.$__bodyOnly) {
// Don't morph elements that are associated with widgets that are being // Don't morph elements that are associated with components that are being
// reused or elements that are being preserved. For widgets being reused, // reused or elements that are being preserved. For components being reused,
// the morphing will take place when the reused widget updates. // the morphing will take place when the reused component updates.
return MORPHDOM_SKIP; return MORPHDOM_SKIP;
} else { } else {
existingWidget = getWidgetForEl(fromEl); existingComponent = getComponentForEl(fromEl);
if (existingWidget && !hasCompatibleWidget(widgetsContext, existingWidget)) { if (existingComponent && !hasCompatibleComponent(componentsContext, existingComponent)) {
// We found a widget in an old DOM node that does not have // We found a component in an old DOM node that does not have
// a compatible widget that was rendered so we need to // a compatible component that was rendered so we need to
// destroy the old widget // destroy the old component
existingWidget.$__destroyShallow(); existingComponent.$__destroyShallow();
} }
} }
} }
@ -520,8 +520,8 @@ Widget.prototype = widgetProto = {
function onBeforeElChildrenUpdated(el) { function onBeforeElChildrenUpdated(el) {
var id = el.id; var id = el.id;
if (widgetsContext && id) { if (componentsContext && id) {
var preserved = widgetsContext.$__preserved[id]; var preserved = componentsContext.$__preserved[id];
if (preserved && preserved.$__bodyOnly) { if (preserved && preserved.$__bodyOnly) {
// Don't morph the children since they are preserved // Don't morph the children since they are preserved
return MORPHDOM_SKIP; return MORPHDOM_SKIP;
@ -559,25 +559,25 @@ Widget.prototype = widgetProto = {
result.afterInsert(doc); result.afterInsert(doc);
out.emit('$__widgetsInitialized'); out.emit('$__componentsInitialized');
}); });
}, },
$__getRootEls: function(rootEls) { $__getRootEls: function(rootEls) {
var i, len; var i, len;
var widgetEls = this.els; var componentEls = this.els;
for (i=0, len=widgetEls.length; i<len; i++) { for (i=0, len=componentEls.length; i<len; i++) {
var widgetEl = widgetEls[i]; var componentEl = componentEls[i];
rootEls[widgetEl.id] = widgetEl; rootEls[componentEl.id] = componentEl;
} }
var rootWidgets = this.$__rootWidgets; var rootComponents = this.$__rootComponents;
if (rootWidgets) { if (rootComponents) {
for (i=0, len=rootWidgets.length; i<len; i++) { for (i=0, len=rootComponents.length; i<len; i++) {
var rootWidget = rootWidgets[i]; var rootComponent = rootComponents[i];
rootWidget.$__getRootEls(rootEls); rootComponent.$__getRootEls(rootEls);
} }
} }
@ -598,9 +598,9 @@ Widget.prototype = widgetProto = {
} }
}; };
widgetProto.elId = widgetProto.getElId; componentProto.elId = componentProto.getElId;
// Add all of the following DOM methods to Widget.prototype: // Add all of the following DOM methods to Component.prototype:
// - appendTo(referenceEl) // - appendTo(referenceEl)
// - replace(referenceEl) // - replace(referenceEl)
// - replaceChildrenOf(referenceEl) // - replaceChildrenOf(referenceEl)
@ -608,12 +608,12 @@ widgetProto.elId = widgetProto.getElId;
// - insertAfter(referenceEl) // - insertAfter(referenceEl)
// - prependTo(referenceEl) // - prependTo(referenceEl)
domInsert( domInsert(
widgetProto, componentProto,
function getEl(widget) { function getEl(component) {
var els = this.els; var els = this.els;
var elCount = els.length; var elCount = els.length;
if (elCount > 1) { if (elCount > 1) {
var fragment = widget.$__document.createDocumentFragment(); var fragment = component.$__document.createDocumentFragment();
for (var i=0; i<elCount; i++) { for (var i=0; i<elCount; i++) {
fragment.appendChild(els[i]); fragment.appendChild(els[i]);
} }
@ -622,10 +622,10 @@ domInsert(
return els[0]; return els[0];
} }
}, },
function afterInsert(widget) { function afterInsert(component) {
return widget; return component;
}); });
inherit(Widget, EventEmitter); inherit(Component, EventEmitter);
module.exports = Widget; module.exports = Component;

78
components/ComponentDef.js
View File

@ -1,31 +1,31 @@
'use strict'; 'use strict';
var nextRepeatedId = require('./nextRepeatedId'); var nextRepeatedId = require('./nextRepeatedId');
var repeatedRegExp = /\[\]$/; var repeatedRegExp = /\[\]$/;
var widgetUtil = require('./util'); var componentUtil = require('./util');
var nextWidgetId = widgetUtil.$__nextWidgetId; var nextComponentId = componentUtil.$__nextComponentId;
var attachBubblingEvent = widgetUtil.$__attachBubblingEvent; var attachBubblingEvent = componentUtil.$__attachBubblingEvent;
var extend = require('raptor-util/extend'); var extend = require('raptor-util/extend');
var registry = require('./registry'); var registry = require('./registry');
/** /**
* A WidgetDef is used to hold the metadata collected at runtime for * A ComponentDef is used to hold the metadata collected at runtime for
* a single widget and this information is used to instantiate the widget * a single component and this information is used to instantiate the component
* later (after the rendered HTML has been added to the DOM) * later (after the rendered HTML has been added to the DOM)
*/ */
function WidgetDef(widget, widgetId, out, widgetStack, widgetStackLen) { function ComponentDef(component, componentId, out, componentStack, componentStackLen) {
this.$__out = out; // The AsyncWriter that this widget is associated with this.$__out = out; // The AsyncWriter that this component is associated with
this.$__widgetStack = widgetStack; this.$__componentStack = componentStack;
this.$__widgetStackLen = widgetStackLen; this.$__componentStackLen = componentStackLen;
this.$__widget = widget; this.$__component = component;
this.id = widgetId; this.id = componentId;
this.$__scope = // The ID of the widget that this widget is scoped within this.$__scope = // The ID of the component that this component is scoped within
this.$__customEvents = // An array containing information about custom events this.$__customEvents = // An array containing information about custom events
this.$__roots = // IDs of root elements if there are multiple root elements this.$__roots = // IDs of root elements if there are multiple root elements
this.$__children = // An array of nested WidgetDef instances this.$__children = // An array of nested ComponentDef instances
this.$__domEvents = // An array of DOM events that need to be added (in sets of three) this.$__domEvents = // An array of DOM events that need to be added (in sets of three)
this.$__bubblingDomEvents = // Used to keep track of bubbling DOM events for widgets rendered on the server this.$__bubblingDomEvents = // Used to keep track of bubbling DOM events for components rendered on the server
undefined; undefined;
this.$__isExisting = false; this.$__isExisting = false;
@ -33,28 +33,28 @@ function WidgetDef(widget, widgetId, out, widgetStack, widgetStackLen) {
this.$__nextIdIndex = 0; // The unique integer to use for the next scoped ID this.$__nextIdIndex = 0; // The unique integer to use for the next scoped ID
} }
WidgetDef.prototype = { ComponentDef.prototype = {
$__end: function() { $__end: function() {
this.$__widgetStack.length = this.$__widgetStackLen; this.$__componentStack.length = this.$__componentStackLen;
}, },
/** /**
* Register a nested widget for this widget. We maintain a tree of widgets * Register a nested component for this component. We maintain a tree of components
* so that we can instantiate nested widgets before their parents. * so that we can instantiate nested components before their parents.
*/ */
$__addChild: function (widgetDef) { $__addChild: function (componentDef) {
var children = this.$__children; var children = this.$__children;
if (children) { if (children) {
children.push(widgetDef); children.push(componentDef);
} else { } else {
this.$__children = [widgetDef]; this.$__children = [componentDef];
} }
}, },
/** /**
* This helper method generates a unique and fully qualified DOM element ID * This helper method generates a unique and fully qualified DOM element ID
* that is unique within the scope of the current widget. This method prefixes * that is unique within the scope of the current component. This method prefixes
* the the nestedId with the ID of the current widget. If nestedId ends * the the nestedId with the ID of the current component. If nestedId ends
* with `[]` then it is treated as a repeated ID and we will generate * with `[]` then it is treated as a repeated ID and we will generate
* an ID with the current index for the current nestedId. * an ID with the current index for the current nestedId.
* (e.g. "myParentId-foo[0]", "myParentId-foo[1]", etc.) * (e.g. "myParentId-foo[0]", "myParentId-foo[1]", etc.)
@ -72,10 +72,10 @@ WidgetDef.prototype = {
}, },
/** /**
* Registers a DOM event for a nested HTML element associated with the * Registers a DOM event for a nested HTML element associated with the
* widget. This is only done for non-bubbling events that require * component. This is only done for non-bubbling events that require
* direct event listeners to be added. * direct event listeners to be added.
* @param {String} type The DOM event type ("mouseover", "mousemove", etc.) * @param {String} type The DOM event type ("mouseover", "mousemove", etc.)
* @param {String} targetMethod The name of the method to invoke on the scoped widget * @param {String} targetMethod The name of the method to invoke on the scoped component
* @param {String} elId The DOM element ID of the DOM element that the event listener needs to be added too * @param {String} elId The DOM element ID of the DOM element that the event listener needs to be added too
*/ */
e: function(type, targetMethod, elId, extraArgs) { e: function(type, targetMethod, elId, extraArgs) {
@ -93,12 +93,12 @@ WidgetDef.prototype = {
extraArgs]); extraArgs]);
}, },
/** /**
* Returns the next auto generated unique ID for a nested DOM element or nested DOM widget * Returns the next auto generated unique ID for a nested DOM element or nested DOM component
*/ */
$__nextId: function() { $__nextId: function() {
return this.id ? return this.id ?
this.id + '-w' + (this.$__nextIdIndex++) : this.id + '-w' + (this.$__nextIdIndex++) :
nextWidgetId(this.$__out); nextComponentId(this.$__out);
}, },
d: function(handlerMethodName, extraArgs) { d: function(handlerMethodName, extraArgs) {
@ -106,25 +106,25 @@ WidgetDef.prototype = {
} }
}; };
WidgetDef.$__deserialize = function(o, types) { ComponentDef.$__deserialize = function(o, types) {
var id = o[0]; var id = o[0];
var typeName = types[o[1]]; var typeName = types[o[1]];
var input = o[2]; var input = o[2];
var extra = o[3]; var extra = o[3];
var state = extra.s; var state = extra.s;
var widgetProps = extra.w; var componentProps = extra.w;
var widget = typeName /* legacy */ && registry.$__createWidget(typeName, id); var component = typeName /* legacy */ && registry.$__createComponent(typeName, id);
if (extra.b) { if (extra.b) {
widget.$__bubblingDomEvents = extra.b; component.$__bubblingDomEvents = extra.b;
} }
// Preview newly created widget from being queued for update since we area // Preview newly created component from being queued for update since we area
// just building it from the server info // just building it from the server info
widget.$__updateQueued = true; component.$__updateQueued = true;
if (state) { if (state) {
var undefinedPropNames = extra.u; var undefinedPropNames = extra.u;
@ -135,17 +135,17 @@ WidgetDef.$__deserialize = function(o, types) {
} }
// We go through the setter here so that we convert the state object // We go through the setter here so that we convert the state object
// to an instance of `State` // to an instance of `State`
widget.state = state; component.state = state;
} }
widget.$__input = input; component.$__input = input;
if (widgetProps) { if (componentProps) {
extend(widget, widgetProps); extend(component, componentProps);
} }
return { return {
$__widget: widget, $__component: component,
$__roots: extra.r, $__roots: extra.r,
$__scope: extra.p, $__scope: extra.p,
$__domEvents: extra.d, $__domEvents: extra.d,
@ -153,4 +153,4 @@ WidgetDef.$__deserialize = function(o, types) {
}; };
}; };
module.exports = WidgetDef; module.exports = ComponentDef;

72
components/ComponentsContext.js
View File

@ -1,57 +1,57 @@
'use strict'; 'use strict';
var WidgetDef = require('./WidgetDef'); var ComponentDef = require('./ComponentDef');
var initWidgets = require('./init-widgets'); var initComponents = require('./init-components');
var EMPTY_OBJECT = {}; var EMPTY_OBJECT = {};
function WidgetsContext(out, root) { function ComponentsContext(out, root) {
if (!root) { if (!root) {
root = new WidgetDef(null, null, out); root = new ComponentDef(null, null, out);
} }
this.$__out = out; this.$__out = out;
this.$__widgetStack = [root]; this.$__componentStack = [root];
this.$__preserved = EMPTY_OBJECT; this.$__preserved = EMPTY_OBJECT;
this.$__widgetsById = {}; this.$__componentsById = {};
} }
WidgetsContext.prototype = { ComponentsContext.prototype = {
get $__widgets() { get $__components() {
return this.$__widgetStack[0].$__children; return this.$__componentStack[0].$__children;
}, },
$__beginWidget: function(widget) { $__beginComponent: function(component) {
var self = this; var self = this;
var widgetStack = self.$__widgetStack; var componentStack = self.$__componentStack;
var origLength = widgetStack.length; var origLength = componentStack.length;
var parent = widgetStack[origLength - 1]; var parent = componentStack[origLength - 1];
var widgetId = widget.id; var componentId = component.id;
if (!widgetId) { if (!componentId) {
widgetId = widget.id = parent.$__nextId(); componentId = component.id = parent.$__nextId();
} }
var widgetDef = new WidgetDef(widget, widgetId, this.$__out, widgetStack, origLength); var componentDef = new ComponentDef(component, componentId, this.$__out, componentStack, origLength);
this.$__widgetsById[widgetId] = widgetDef; this.$__componentsById[componentId] = componentDef;
parent.$__addChild(widgetDef); parent.$__addChild(componentDef);
widgetStack.push(widgetDef); componentStack.push(componentDef);
return widgetDef; return componentDef;
}, },
$__clearWidgets: function () { $__clearComponents: function () {
this.$__widgetStack = [new WidgetDef(null /* id */, this.$__out)]; this.$__componentStack = [new ComponentDef(null /* id */, this.$__out)];
}, },
$__initWidgets: function (doc) { $__initComponents: function (doc) {
var widgetDefs = this.$__widgets; var componentDefs = this.$__components;
if (widgetDefs) { if (componentDefs) {
initWidgets.$__initClientRendered(widgetDefs, doc); initComponents.$__initClientRendered(componentDefs, doc);
this.$__clearWidgets(); this.$__clearComponents();
} }
}, },
$__nextWidgetId: function() { $__nextComponentId: function() {
var widgetStack = this.$__widgetStack; var componentStack = this.$__componentStack;
var parent = widgetStack[widgetStack.length - 1]; var parent = componentStack[componentStack.length - 1];
return parent.$__nextId(); return parent.$__nextId();
}, },
$__preserveDOMNode: function(elId, bodyOnly) { $__preserveDOMNode: function(elId, bodyOnly) {
@ -63,12 +63,12 @@ WidgetsContext.prototype = {
} }
}; };
WidgetsContext.$__getWidgetsContext = function (out) { ComponentsContext.$__getComponentsContext = function (out) {
var global = out.global; var global = out.global;
return out.data.widgets || return out.data.components ||
global.widgets || global.components ||
(global.widgets = new WidgetsContext(out)); (global.components = new ComponentsContext(out));
}; };
module.exports = WidgetsContext; module.exports = ComponentsContext;

12
components/State.js
View File

@ -14,8 +14,8 @@ function ensure(state, propertyName) {
} }
} }
function State(widget, initialState) { function State(component, initialState) {
this.$__widget = widget; this.$__component = component;
this.$__raw = initialState || {}; this.$__raw = initialState || {};
this.$__dirty = false; this.$__dirty = false;
@ -73,14 +73,14 @@ State.prototype = {
} }
if (!this.$__dirty) { if (!this.$__dirty) {
// This is the first time we are modifying the widget state // This is the first time we are modifying the component state
// so introduce some properties to do some tracking of // so introduce some properties to do some tracking of
// changes to the state // changes to the state
this.$__dirty = true; // Mark the widget state as dirty (i.e. modified) this.$__dirty = true; // Mark the component state as dirty (i.e. modified)
this.$__old = rawState; this.$__old = rawState;
this.$__raw = rawState = extend({}, rawState); this.$__raw = rawState = extend({}, rawState);
this.$__changes = {}; this.$__changes = {};
this.$__widget.$__queueUpdate(); this.$__component.$__queueUpdate();
} }
this.$__changes[name] = value; this.$__changes[name] = value;
@ -89,7 +89,7 @@ State.prototype = {
// Don't store state properties with an undefined or null value // Don't store state properties with an undefined or null value
delete rawState[name]; delete rawState[name];
} else { } else {
// Otherwise, store the new value in the widget state // Otherwise, store the new value in the component state
rawState[name] = value; rawState[name] = value;
} }
}, },

10
components/attach-detach.js
View File

@ -2,9 +2,9 @@ var eventDelegation = require('./event-delegation');
var delegateEvent = eventDelegation.$__delegateEvent; var delegateEvent = eventDelegation.$__delegateEvent;
var getEventAttribute = eventDelegation.$__getEventAttribute; var getEventAttribute = eventDelegation.$__getEventAttribute;
var widgetsUtil = require('./util'); var componentsUtil = require('./util');
var destroyElRecursive = widgetsUtil.$__destroyElRecursive; var destroyElRecursive = componentsUtil.$__destroyElRecursive;
var destroyWidgetForEl = widgetsUtil.$__destroyWidgetForEl; var destroyComponentForEl = componentsUtil.$__destroyComponentForEl;
function handleNodeAttach(node, out) { function handleNodeAttach(node, out) {
if (node.nodeType === 1) { if (node.nodeType === 1) {
@ -15,7 +15,7 @@ function handleNodeAttach(node, out) {
var attachTargets = data.$__attachTargets; var attachTargets = data.$__attachTargets;
if (!attachTargets) { if (!attachTargets) {
attachTargets = data.$__attachTargets = []; attachTargets = data.$__attachTargets = [];
out.on('$__widgetsInitialized', function() { out.on('$__componentsInitialized', function() {
for (var i=0; i<attachTargets.length; i+=2) { for (var i=0; i<attachTargets.length; i+=2) {
var node = attachTargets[i]; var node = attachTargets[i];
var target = attachTargets[i+1]; var target = attachTargets[i+1];
@ -39,7 +39,7 @@ function handleNodeDetach(node) {
delegateEvent(node, target, { delegateEvent(node, target, {
preventDefault: function() { preventDefault: function() {
allowDetach = false; allowDetach = false;
destroyWidgetForEl(node); destroyComponentForEl(node);
destroyElRecursive(node); destroyElRecursive(node);
}, },
detach: function() { detach: function() {

2
components/boot.js
View File

@ -1 +1 @@
require('./init-widgets').$__initServerRendered(); require('./init-components').$__initServerRendered();

6
components/browser.json
View File

@ -4,13 +4,13 @@
"type": "require", "type": "require",
"path": "./boot", "path": "./boot",
"run": true, "run": true,
"if": "!flags.contains('marko/widgets/no-boot')" "if": "!flags.contains('marko/components/no-boot')"
} }
], ],
"requireRemap": [ "requireRemap": [
{ {
"from": "./loadWidget.js", "from": "./loadComponent.js",
"to": "./loadWidget-dynamic.js" "to": "./loadComponent-dynamic.js"
} }
] ]
} }

44
components/defineComponent.js
View File

@ -2,23 +2,23 @@
/* jshint newcap:false */ /* jshint newcap:false */
var BaseState; var BaseState;
var BaseWidget; var BaseComponent;
var inherit; var inherit;
module.exports = function defineWidget(def, renderer) { module.exports = function defineComponent(def, renderer) {
if (def.$__isWidget) { if (def.$__isComponent) {
return def; return def;
} }
var WidgetClass; var ComponentClass;
var proto; var proto;
if (typeof def === 'function') { if (typeof def === 'function') {
WidgetClass = def; ComponentClass = def;
proto = WidgetClass.prototype; proto = ComponentClass.prototype;
} else if (typeof def === 'object') { } else if (typeof def === 'object') {
WidgetClass = function() {}; ComponentClass = function() {};
proto = WidgetClass.prototype = def; proto = ComponentClass.prototype = def;
} else { } else {
throw TypeError(); throw TypeError();
} }
@ -26,38 +26,38 @@ module.exports = function defineWidget(def, renderer) {
// We don't use the constructor provided by the user // We don't use the constructor provided by the user
// since we don't invoke their constructor until // since we don't invoke their constructor until
// we have had a chance to do our own initialization. // we have had a chance to do our own initialization.
// Instead, we store their constructor in the "initWidget" // Instead, we store their constructor in the "initComponent"
// property and that method gets called later inside // property and that method gets called later inside
// init-widgets-browser.js // init-components-browser.js
function Widget(id, doc) { function Component(id, doc) {
BaseWidget.call(this, id, doc); BaseComponent.call(this, id, doc);
} }
if (!proto.$__isWidget) { if (!proto.$__isComponent) {
// Inherit from Widget if they didn't already // Inherit from Component if they didn't already
inherit(WidgetClass, BaseWidget); inherit(ComponentClass, BaseComponent);
} }
// The same prototype will be used by our constructor after // The same prototype will be used by our constructor after
// we he have set up the prototype chain using the inherit function // we he have set up the prototype chain using the inherit function
proto = Widget.prototype = WidgetClass.prototype; proto = Component.prototype = ComponentClass.prototype;
proto.onCreate = proto.onCreate || WidgetClass; proto.onCreate = proto.onCreate || ComponentClass;
proto.constructor = def.constructor = Widget; proto.constructor = def.constructor = Component;
// Set a flag on the constructor function to make it clear this is // Set a flag on the constructor function to make it clear this is
// a widget so that we can short-circuit this work later // a component so that we can short-circuit this work later
Widget.$__isWidget = true; Component.$__isComponent = true;
function State() { BaseState.apply(this, arguments); } function State() { BaseState.apply(this, arguments); }
inherit(State, BaseState); inherit(State, BaseState);
proto.$__State = State; proto.$__State = State;
proto.renderer = renderer; proto.renderer = renderer;
return Widget; return Component;
}; };
BaseState = require('./State'); BaseState = require('./State');
BaseWidget = require('./Widget'); BaseComponent = require('./Component');
inherit = require('raptor-util/inherit'); inherit = require('raptor-util/inherit');

26
components/event-delegation.js
View File

@ -1,4 +1,4 @@
var widgetLookup = require('./util').$__widgetLookup; var componentLookup = require('./util').$__componentLookup;
var isArray = Array.isArray; var isArray = Array.isArray;
var listenersAttached; var listenersAttached;
@ -11,7 +11,7 @@ function getEventAttribute(el, attrName) {
} else { } else {
var attrValue = el.getAttribute(attrName); var attrValue = el.getAttribute(attrName);
if (attrValue) { if (attrValue) {
// <method_name> <widget_id>[ <extra_args_index] // <method_name> <component_id>[ <extra_args_index]
var parts = attrValue.split(' '); var parts = attrValue.split(' ');
if (parts.length == 3) { if (parts.length == 3) {
parts[2] = parseInt(parts[2], 10); parts[2] = parseInt(parts[2], 10);
@ -24,35 +24,35 @@ function getEventAttribute(el, attrName) {
function delegateEvent(node, target, event) { function delegateEvent(node, target, event) {
var targetMethod = target[0]; var targetMethod = target[0];
var targetWidgetId = target[1]; var targetComponentId = target[1];
var extraArgs = target[2]; var extraArgs = target[2];
var targetWidget = widgetLookup[targetWidgetId]; var targetComponent = componentLookup[targetComponentId];
if (!targetWidget) { if (!targetComponent) {
return; return;
} }
var targetFunc = targetWidget[targetMethod]; var targetFunc = targetComponent[targetMethod];
if (!targetFunc) { if (!targetFunc) {
throw Error('Method not found: ' + targetMethod); throw Error('Method not found: ' + targetMethod);
} }
if (extraArgs != null) { if (extraArgs != null) {
if (typeof extraArgs === 'number') { if (typeof extraArgs === 'number') {
extraArgs = targetWidget.$__bubblingDomEvents[extraArgs]; extraArgs = targetComponent.$__bubblingDomEvents[extraArgs];
if (!isArray(extraArgs)) { if (!isArray(extraArgs)) {
extraArgs = [extraArgs]; extraArgs = [extraArgs];
} }
} }
} }
// Invoke the widget method // Invoke the component method
if (extraArgs) { if (extraArgs) {
targetFunc.apply(targetWidget, extraArgs.concat(event, node)); targetFunc.apply(targetComponent, extraArgs.concat(event, node));
} else { } else {
targetFunc.call(targetWidget, event, node); targetFunc.call(targetComponent, event, node);
} }
} }
@ -64,7 +64,7 @@ function attachBubbleEventListeners(doc) {
// document.body element. When we get notified of a triggered event, // document.body element. When we get notified of a triggered event,
// we again walk up the tree starting at the target associated // we again walk up the tree starting at the target associated
// with the event to find any mappings for event. Each mapping // with the event to find any mappings for event. Each mapping
// is from a DOM event type to a method of a widget. // is from a DOM event type to a method of a component.
require('./bubble').forEach(function addBubbleHandler(eventType) { require('./bubble').forEach(function addBubbleHandler(eventType) {
body.addEventListener(eventType, function(event) { body.addEventListener(eventType, function(event) {
var propagationStopped = false; var propagationStopped = false;
@ -83,12 +83,12 @@ function attachBubbleEventListeners(doc) {
} }
// Search up the tree looking DOM events mapped to target // Search up the tree looking DOM events mapped to target
// widget methods // component methods
var attrName = 'data-_on' + eventType; var attrName = 'data-_on' + eventType;
var target; var target;
// Attributes will have the following form: // Attributes will have the following form:
// on<event_type>("<target_method>|<widget_id>") // on<event_type>("<target_method>|<component_id>")
do { do {
if ((target = getEventAttribute(curNode, attrName))) { if ((target = getEventAttribute(curNode, attrName))) {

22
components/index-browser.js
View File

@ -1,18 +1,18 @@
var events = require('../runtime/events'); var events = require('../runtime/events');
var Widget = require('./Widget'); var Component = require('./Component');
var widgetsUtil = require('./util'); var componentsUtil = require('./util');
function onInitWidget(listener) { function onInitComponent(listener) {
events.on('initWidget', listener); events.on('initComponent', listener);
} }
exports.onInitWidget = onInitWidget; exports.onInitComponent = onInitComponent;
exports.Widget = Widget; exports.Component = Component;
exports.getWidgetForEl = widgetsUtil.$__getWidgetForEl; exports.getComponentForEl = componentsUtil.$__getComponentForEl;
exports.initWidgets = require('./init-widgets').$__initServerRendered; exports.initComponents = require('./init-components').$__initServerRendered;
exports.w = require('./defineWidget'); // Referenced by compiled templates exports.c = require('./defineComponent'); // Referenced by compiled templates
exports.r = require('./renderer'); // Referenced by compiled templates exports.r = require('./renderer'); // Referenced by compiled templates
exports.rw = require('./registry').$__register; // Referenced by compiled templates exports.rc = require('./registry').$__register; // Referenced by compiled templates
window.$__MARKO_WIDGETS = exports; // Helpful when debugging... WARNING: DO NOT USE IN REAL CODE! window.$__MARKO_COMPONENTS = exports; // Helpful when debugging... WARNING: DO NOT USE IN REAL CODE!

102
components/index.js
View File

@ -1,26 +1,26 @@
/** /**
* Module to manage the lifecycle of widgets * Module to manage the lifecycle of components
* *
*/ */
'use strict'; 'use strict';
var warp10 = require('warp10'); var warp10 = require('warp10');
var WidgetsContext = require('./WidgetsContext'); var ComponentsContext = require('./ComponentsContext');
var escapeEndingScriptTagRegExp = /<\//g; var escapeEndingScriptTagRegExp = /<\//g;
function flattenHelper(widgets, flattened, typesArray, typesLookup) { function flattenHelper(components, flattened, typesArray, typesLookup) {
for (var i = 0, len = widgets.length; i < len; i++) { for (var i = 0, len = components.length; i < len; i++) {
var widgetDef = widgets[i]; var componentDef = components[i];
var customEvents = widgetDef.$__customEvents; var customEvents = componentDef.$__customEvents;
var id = widgetDef.id; var id = componentDef.id;
var widget = widgetDef.$__widget; var component = componentDef.$__component;
var state = widget.state; var state = component.state;
var input = widget.input; var input = component.input;
var typeName = widget.typeName; var typeName = component.typeName;
widget.state = undefined; // We don't use `delete` to avoid V8 deoptimization component.state = undefined; // We don't use `delete` to avoid V8 deoptimization
widget.input = undefined; // We don't use `delete` to avoid V8 deoptimization component.input = undefined; // We don't use `delete` to avoid V8 deoptimization
widget.typeName = undefined; component.typeName = undefined;
widget.id = undefined; component.id = undefined;
if (!typeName) { if (!typeName) {
continue; continue;
@ -33,7 +33,7 @@ function flattenHelper(widgets, flattened, typesArray, typesLookup) {
typesLookup[typeName] = typeIndex; typesLookup[typeName] = typeIndex;
} }
var children = widgetDef.$__children; var children = componentDef.$__children;
if (children) { if (children) {
// Depth-first search (children should be initialized before parent) // Depth-first search (children should be initialized before parent)
@ -43,8 +43,8 @@ function flattenHelper(widgets, flattened, typesArray, typesLookup) {
var hasProps = false; var hasProps = false;
for (var key in widget) { for (var key in component) {
if (widget.hasOwnProperty(key) && widget[key] !== undefined) { if (component.hasOwnProperty(key) && component[key] !== undefined) {
hasProps = true; hasProps = true;
} }
} }
@ -67,13 +67,13 @@ function flattenHelper(widgets, flattened, typesArray, typesLookup) {
} }
var extra = { var extra = {
p: customEvents && widgetDef.$__scope, // Only serialize scope if we need to attach custom events p: customEvents && componentDef.$__scope, // Only serialize scope if we need to attach custom events
d: widgetDef.$__domEvents, d: componentDef.$__domEvents,
b: widgetDef.$__bubblingDomEvents, b: componentDef.$__bubblingDomEvents,
e: widgetDef.$__customEvents, e: componentDef.$__customEvents,
w: hasProps ? widget : undefined, w: hasProps ? component : undefined,
s: state, s: state,
r: widgetDef.$__roots, r: componentDef.$__roots,
u: undefinedPropNames u: undefinedPropNames
}; };
@ -86,9 +86,9 @@ function flattenHelper(widgets, flattened, typesArray, typesLookup) {
} }
} }
function getRenderedWidgets(widgetsContext) { function getRenderedComponents(componentsContext) {
var widgets = widgetsContext.$__widgets; var components = componentsContext.$__components;
if (!widgets || !widgets.length) { if (!components || !components.length) {
return; return;
} }
@ -96,14 +96,14 @@ function getRenderedWidgets(widgetsContext) {
var typesLookup = {}; var typesLookup = {};
var typesArray = []; var typesArray = [];
flattenHelper(widgets, flattened, typesArray, typesLookup); flattenHelper(components, flattened, typesArray, typesLookup);
return {w: flattened, t: typesArray}; return {w: flattened, t: typesArray};
} }
function writeInitWidgetsCode(widgetsContext, out) { function writeInitComponentsCode(componentsContext, out) {
var renderedWidgets = getRenderedWidgets(widgetsContext); var renderedComponents = getRenderedComponents(componentsContext);
if (!renderedWidgets) { if (!renderedComponents) {
return; return;
} }
@ -111,42 +111,42 @@ function writeInitWidgetsCode(widgetsContext, out) {
var nonceAttr = cspNonce ? ' nonce='+JSON.stringify(cspNonce) : ''; var nonceAttr = cspNonce ? ' nonce='+JSON.stringify(cspNonce) : '';
out.write('<script' + nonceAttr + '>' + out.write('<script' + nonceAttr + '>' +
'(function(){var w=window;w.$widgets=(w.$widgets||[]).concat(' + '(function(){var w=window;w.$components=(w.$components||[]).concat(' +
warp10.stringify(renderedWidgets).replace(escapeEndingScriptTagRegExp, '\\u003C/') + warp10.stringify(renderedComponents).replace(escapeEndingScriptTagRegExp, '\\u003C/') +
')||w.$widgets})()</script>'); ')||w.$components})()</script>');
widgetsContext.$__clearWidgets(); componentsContext.$__clearComponents();
} }
exports.writeInitWidgetsCode = writeInitWidgetsCode; exports.writeInitComponentsCode = writeInitComponentsCode;
/** /**
* Returns an object that can be sent to the browser using JSON.stringify. The parsed object should be * Returns an object that can be sent to the browser using JSON.stringify. The parsed object should be
* passed to require('marko-widgets').initWidgets(...); * passed to require('marko-components').initComponents(...);
* *
* @param {WidgetsContext|AsyncWriter} widgetsContext A WidgetsContext or an AsyncWriter * @param {ComponentsContext|AsyncWriter} componentsContext A ComponentsContext or an AsyncWriter
* @return {Object} An object with information about the rendered widgets that can be serialized to JSON. The object should be treated as opaque * @return {Object} An object with information about the rendered components that can be serialized to JSON. The object should be treated as opaque
*/ */
exports.getRenderedWidgets = function(widgetsContext) { exports.getRenderedComponents = function(componentsContext) {
if (!(widgetsContext instanceof WidgetsContext)) { if (!(componentsContext instanceof ComponentsContext)) {
// Assume that the provided "widgetsContext" argument is // Assume that the provided "componentsContext" argument is
// actually an AsyncWriter // actually an AsyncWriter
var out = widgetsContext; var out = componentsContext;
if (!out.global) { if (!out.global) {
throw new Error('Invalid argument: ' + widgetsContext); throw new Error('Invalid argument: ' + componentsContext);
} }
widgetsContext = WidgetsContext.$__getWidgetsContext(out); componentsContext = ComponentsContext.$__getComponentsContext(out);
} }
var renderedWidgets = getRenderedWidgets(widgetsContext); var renderedComponents = getRenderedComponents(componentsContext);
return warp10.stringifyPrepare(renderedWidgets); return warp10.stringifyPrepare(renderedComponents);
}; };
exports.r = require('./renderer'); exports.r = require('./renderer');
exports.w = function() { /* no op for defining a widget on teh server */ }; exports.c = function() { /* no op for defining a component on teh server */ };
// registerWidget is a no-op on the server. // registerComponent is a no-op on the server.
// Fixes https://github.com/marko-js/marko-widgets/issues/111 // Fixes https://github.com/marko-js/marko-components/issues/111
exports.rw = function(typeName) { return typeName; }; exports.rc = function(typeName) { return typeName; };

144
components/init-components-browser.js
View File

@ -4,20 +4,20 @@ var eventDelegation = require('./event-delegation');
var win = window; var win = window;
var defaultDocument = document; var defaultDocument = document;
var events = require('../runtime/events'); var events = require('../runtime/events');
var widgetsUtil = require('./util'); var componentsUtil = require('./util');
var widgetLookup = widgetsUtil.$__widgetLookup; var componentLookup = componentsUtil.$__componentLookup;
var getElementById = widgetsUtil.$__getElementById; var getElementById = componentsUtil.$__getElementById;
var WidgetDef = require('./WidgetDef'); var ComponentDef = require('./ComponentDef');
// var extend = require('raptor-util/extend'); // var extend = require('raptor-util/extend');
// var registry = require('./registry'); // var registry = require('./registry');
function invokeWidgetEventHandler(widget, targetMethodName, args) { function invokeComponentEventHandler(component, targetMethodName, args) {
var method = widget[targetMethodName]; var method = component[targetMethodName];
if (!method) { if (!method) {
throw Error('Method not found: ' + targetMethodName); throw Error('Method not found: ' + targetMethodName);
} }
method.apply(widget, args); method.apply(component, args);
} }
function addEventListenerHelper(el, eventType, listener) { function addEventListenerHelper(el, eventType, listener) {
@ -27,79 +27,79 @@ function addEventListenerHelper(el, eventType, listener) {
}; };
} }
function addDOMEventListeners(widget, el, eventType, targetMethodName, extraArgs, handles) { function addDOMEventListeners(component, el, eventType, targetMethodName, extraArgs, handles) {
var removeListener = addEventListenerHelper(el, eventType, function(event) { var removeListener = addEventListenerHelper(el, eventType, function(event) {
var args = [event, el]; var args = [event, el];
if (extraArgs) { if (extraArgs) {
args = extraArgs.concat(args); args = extraArgs.concat(args);
} }
invokeWidgetEventHandler(widget, targetMethodName, args); invokeComponentEventHandler(component, targetMethodName, args);
}); });
handles.push(removeListener); handles.push(removeListener);
} }
function initWidget(widgetDef, doc) { function initComponent(componentDef, doc) {
var widget = widgetDef.$__widget; var component = componentDef.$__component;
if (!widget || !widget.$__isWidget) { if (!component || !component.$__isComponent) {
return; // legacy return; // legacy
} }
var scope = widgetDef.$__scope; var scope = componentDef.$__scope;
var domEvents = widgetDef.$__domEvents; var domEvents = componentDef.$__domEvents;
var customEvents = widgetDef.$__customEvents; var customEvents = componentDef.$__customEvents;
widget.$__reset(); component.$__reset();
widget.$__document = doc; component.$__document = doc;
var isExisting = widgetDef.$__isExisting; var isExisting = componentDef.$__isExisting;
var i; var i;
var len; var len;
var eventType; var eventType;
var targetMethodName; var targetMethodName;
var extraArgs; var extraArgs;
var id = widget.id; var id = component.id;
var rootIds = widgetDef.$__roots; var rootIds = componentDef.$__roots;
if (rootIds) { if (rootIds) {
var rootWidgets; var rootComponents;
var els = []; var els = [];
for (i=0, len=rootIds.length; i<len; i++) { for (i=0, len=rootIds.length; i<len; i++) {
var rootId = rootIds[i]; var rootId = rootIds[i];
var nestedId = id + '-' + rootId; var nestedId = id + '-' + rootId;
var rootWidget = widgetLookup[nestedId]; var rootComponent = componentLookup[nestedId];
if (rootWidget) { if (rootComponent) {
rootWidget.$__rootFor = widget; rootComponent.$__rootFor = component;
if (rootWidgets) { if (rootComponents) {
rootWidgets.push(rootWidget); rootComponents.push(rootComponent);
} else { } else {
rootWidgets = widget.$__rootWidgets = [rootWidget]; rootComponents = component.$__rootComponents = [rootComponent];
} }
} else { } else {
var rootEl = getElementById(doc, nestedId); var rootEl = getElementById(doc, nestedId);
if (rootEl) { if (rootEl) {
rootEl._w = widget; rootEl._w = component;
els.push(rootEl); els.push(rootEl);
} }
} }
} }
widget.el = els[0]; component.el = els[0];
widget.els = els; component.els = els;
widgetLookup[id] = widget; componentLookup[id] = component;
} else if (!isExisting) { } else if (!isExisting) {
var el = getElementById(doc, id); var el = getElementById(doc, id);
el._w = widget; el._w = component;
widget.el = el; component.el = el;
widget.els = [el]; component.els = [el];
widgetLookup[id] = widget; componentLookup[id] = component;
} }
if (isExisting) { if (isExisting) {
widget.$__removeDOMEventListeners(); component.$__removeDOMEventListeners();
} }
if (domEvents) { if (domEvents) {
@ -112,98 +112,98 @@ function initWidget(widgetDef, doc) {
extraArgs = domEvents[i+3]; extraArgs = domEvents[i+3];
// The event mapping is for a DOM event (not a custom event) // The event mapping is for a DOM event (not a custom event)
addDOMEventListeners(widget, eventEl, eventType, targetMethodName, extraArgs, eventListenerHandles); addDOMEventListeners(component, eventEl, eventType, targetMethodName, extraArgs, eventListenerHandles);
} }
if (eventListenerHandles.length) { if (eventListenerHandles.length) {
widget.$__domEventListenerHandles = eventListenerHandles; component.$__domEventListenerHandles = eventListenerHandles;
} }
} }
if (customEvents) { if (customEvents) {
widget.$__customEvents = {}; component.$__customEvents = {};
widget.$__scope = scope; component.$__scope = scope;
for (i=0, len=customEvents.length; i<len; i+=3) { for (i=0, len=customEvents.length; i<len; i+=3) {
eventType = customEvents[i]; eventType = customEvents[i];
targetMethodName = customEvents[i+1]; targetMethodName = customEvents[i+1];
extraArgs = customEvents[i+2]; extraArgs = customEvents[i+2];
widget.$__customEvents[eventType] = [targetMethodName, extraArgs]; component.$__customEvents[eventType] = [targetMethodName, extraArgs];
} }
} }
if (isExisting) { if (isExisting) {
widget.$__emitLifecycleEvent('update'); component.$__emitLifecycleEvent('update');
} else { } else {
events.emit('mountWidget', widget); events.emit('mountComponent', component);
widget.$__emitLifecycleEvent('mount'); component.$__emitLifecycleEvent('mount');
} }
} }
/** /**
* This method is used to initialized widgets associated with UI components * This method is used to initialized components associated with UI components
* rendered in the browser. While rendering UI components a "widgets context" * rendered in the browser. While rendering UI components a "components context"
* is added to the rendering context to keep up with which widgets are rendered. * is added to the rendering context to keep up with which components are rendered.
* When ready, the widgets can then be initialized by walking the widget tree * When ready, the components can then be initialized by walking the component tree
* in the widgets context (nested widgets are initialized before ancestor widgets). * in the components context (nested components are initialized before ancestor components).
* @param {Array<marko-widgets/lib/WidgetDef>} widgetDefs An array of WidgetDef instances * @param {Array<marko-components/lib/ComponentDef>} componentDefs An array of ComponentDef instances
*/ */
function initClientRendered(widgetDefs, doc) { function initClientRendered(componentDefs, doc) {
// Ensure that event handlers to handle delegating events are // Ensure that event handlers to handle delegating events are
// always attached before initializing any widgets // always attached before initializing any components
eventDelegation.$__init(doc); eventDelegation.$__init(doc);
doc = doc || defaultDocument; doc = doc || defaultDocument;
for (var i=0,len=widgetDefs.length; i<len; i++) { for (var i=0,len=componentDefs.length; i<len; i++) {
var widgetDef = widgetDefs[i]; var componentDef = componentDefs[i];
if (widgetDef.$__children) { if (componentDef.$__children) {
initClientRendered(widgetDef.$__children, doc); initClientRendered(componentDef.$__children, doc);
} }
initWidget( initComponent(
widgetDef, componentDef,
doc); doc);
} }
} }
/** /**
* This method initializes all widgets that were rendered on the server by iterating over all * This method initializes all components that were rendered on the server by iterating over all
* of the widget IDs. * of the component IDs.
*/ */
function initServerRendered(renderedWidgets, doc) { function initServerRendered(renderedComponents, doc) {
var i=0, len; var i=0, len;
if (!arguments.length) { if (!arguments.length) {
renderedWidgets = win.$widgets; renderedComponents = win.$components;
win.$widgets = { win.$components = {
concat: initServerRendered concat: initServerRendered
}; };
if (renderedWidgets && (len=renderedWidgets.length)) { if (renderedComponents && (len=renderedComponents.length)) {
for (; i<len; i++) { for (; i<len; i++) {
initServerRendered(renderedWidgets[i], doc); initServerRendered(renderedComponents[i], doc);
} }
} }
return; return;
} }
// Ensure that event handlers to handle delegating events are // Ensure that event handlers to handle delegating events are
// always attached before initializing any widgets // always attached before initializing any components
eventDelegation.$__init(doc || defaultDocument); eventDelegation.$__init(doc || defaultDocument);
renderedWidgets = warp10Finalize(renderedWidgets); renderedComponents = warp10Finalize(renderedComponents);
var widgetDefs = renderedWidgets.w; var componentDefs = renderedComponents.w;
var typesArray = renderedWidgets.t; var typesArray = renderedComponents.t;
if (!doc) { if (!doc) {
doc = defaultDocument; doc = defaultDocument;
} }
for (len=widgetDefs.length; i<len; i++) { for (len=componentDefs.length; i<len; i++) {
var widgetDef = WidgetDef.$__deserialize(widgetDefs[i], typesArray); var componentDef = ComponentDef.$__deserialize(componentDefs[i], typesArray);
initWidget(widgetDef, doc); initComponent(componentDef, doc);
} }
} }

14
components/legacy/defineComponent-legacy.js
View File

@ -1,14 +1,14 @@
/** /**
* Define a new UI component that includes widget and renderer. * Define a new UI component that includes component and renderer.
* *
* @param {Object} def The definition of the UI component (widget methods, widget constructor, rendering methods, etc.) * @param {Object} def The definition of the UI component (component methods, component constructor, rendering methods, etc.)
* @return {Widget} The resulting Widget with renderer * @return {Component} The resulting Component with renderer
*/ */
var defineRenderer; var defineRenderer;
var defineWidget; var defineComponent;
module.exports = function defineComponent(def) { module.exports = function defineComponent(def) {
if (def.$__isWidget) { if (def.$__isComponent) {
return def; return def;
} }
@ -20,9 +20,9 @@ module.exports = function defineComponent(def) {
throw new Error('Expected "template" or "renderer"'); throw new Error('Expected "template" or "renderer"');
} }
return defineWidget(def, renderer); return defineComponent(def, renderer);
}; };
defineRenderer = require('./defineRenderer-legacy'); defineRenderer = require('./defineRenderer-legacy');
defineWidget = require('./defineWidget-legacy'); defineComponent = require('./defineComponent-legacy');

2
components/legacy/defineRenderer-legacy.js
View File

@ -17,7 +17,7 @@ module.exports = function defineRenderer(renderingLogic) {
if (!renderer) { if (!renderer) {
// Create a renderer function that takes care of translating // Create a renderer function that takes care of translating
// the input properties to a view state. Also, this renderer // the input properties to a view state. Also, this renderer
// takes care of re-using existing widgets. // takes care of re-using existing components.
renderer = function renderer(input, out) { renderer = function renderer(input, out) {
// Render the template associated with the component using the final template // Render the template associated with the component using the final template
// data that we constructed // data that we constructed

46
components/legacy/defineWidget-legacy-browser.js
View File

@ -2,18 +2,18 @@
/* jshint newcap:false */ /* jshint newcap:false */
var BaseState; var BaseState;
var BaseWidget; var BaseComponent;
var inherit; var inherit;
module.exports = function defineWidget(def, renderer) { module.exports = function defineWidget(def, renderer) {
def = def.Widget || def; def = def.Component || def;
if (def.$__isWidget) { if (def.$__isComponent) {
return def; return def;
} }
var WidgetClass = function() {}; var ComponentClass = function() {};
var proto; var proto;
if (typeof def === 'function') { if (typeof def === 'function') {
@ -25,28 +25,28 @@ module.exports = function defineWidget(def, renderer) {
throw TypeError(); throw TypeError();
} }
WidgetClass.prototype = proto; ComponentClass.prototype = proto;
// We don't use the constructor provided by the user // We don't use the constructor provided by the user
// since we don't invoke their constructor until // since we don't invoke their constructor until
// we have had a chance to do our own initialization. // we have had a chance to do our own initialization.
// Instead, we store their constructor in the "initWidget" // Instead, we store their constructor in the "initComponent"
// property and that method gets called later inside // property and that method gets called later inside
// init-widgets-browser.js // init-components-browser.js
function Widget(id, doc) { function Component(id, doc) {
BaseWidget.call(this, id, doc); BaseComponent.call(this, id, doc);
} }
if (!proto.$__isWidget) { if (!proto.$__isComponent) {
// Inherit from Widget if they didn't already // Inherit from Component if they didn't already
inherit(WidgetClass, BaseWidget); inherit(ComponentClass, BaseComponent);
} }
// The same prototype will be used by our constructor after // The same prototype will be used by our constructor after
// we he have set up the prototype chain using the inherit function // we he have set up the prototype chain using the inherit function
proto = Widget.prototype = WidgetClass.prototype; proto = Component.prototype = ComponentClass.prototype;
proto.constructor = def.constructor = Widget; proto.constructor = def.constructor = Component;
// get legacy methods // get legacy methods
var init = proto.init; var init = proto.init;
@ -100,8 +100,8 @@ module.exports = function defineWidget(def, renderer) {
// Set a flag on the constructor function to make it clear this is // Set a flag on the constructor function to make it clear this is
// a widget so that we can short-circuit this work later // a component so that we can short-circuit this work later
Widget.$__isWidget = true; Component.$__isComponent = true;
function State() { BaseState.apply(this, arguments); } function State() { BaseState.apply(this, arguments); }
inherit(State, BaseState); inherit(State, BaseState);
@ -109,7 +109,7 @@ module.exports = function defineWidget(def, renderer) {
if (!renderer) { if (!renderer) {
renderer = WidgetClass.renderer || WidgetClass.prototype.renderer; renderer = ComponentClass.renderer || ComponentClass.prototype.renderer;
if (renderer) { if (renderer) {
// Legacy support // Legacy support
var createOut = renderer.createOut; var createOut = renderer.createOut;
@ -133,15 +133,15 @@ module.exports = function defineWidget(def, renderer) {
if (renderer) { if (renderer) {
// Add the rendering related methods as statics on the // Add the rendering related methods as statics on the
// new widget constructor function // new component constructor function
Widget.renderer = proto.renderer = renderer; Component.renderer = proto.renderer = renderer;
Widget.render = renderer.render; Component.render = renderer.render;
Widget.renderSync = renderer.renderSync; Component.renderSync = renderer.renderSync;
} }
return Widget; return Component;
}; };
BaseState = require('../State'); BaseState = require('../State');
BaseWidget = require('../Widget'); BaseComponent = require('../Component');
inherit = require('raptor-util/inherit'); inherit = require('raptor-util/inherit');

6
components/legacy/defineWidget-legacy.js
View File

@ -1,17 +1,17 @@
module.exports = function defineWidget(def, renderer) { module.exports = function defineWidget(def, renderer) {
if (def.$__isWidget) { if (def.$__isComponent) {
return def; return def;
} }
if (renderer) { if (renderer) {
return { return {
$__isWidget: true, $__isComponent: true,
renderer: renderer, renderer: renderer,
render: renderer.render, render: renderer.render,
renderSync: renderer.renderSync, renderSync: renderer.renderSync,
template: renderer.template template: renderer.template
}; };
} else { } else {
return {$__isWidget: true}; return {$__isComponent: true};
} }
}; };

24
components/legacy/index.js
View File

@ -2,27 +2,27 @@ var modern = require('../index');
// legacy api // legacy api
exports.defineComponent = require('./defineComponent-legacy'); exports.defineComponent = require('./defineComponent-legacy');
exports.defineWidget = require('./defineWidget-legacy'); exports.defineComponent = require('./defineComponent-legacy');
exports.defineRenderer = require('./defineRenderer-legacy'); exports.defineRenderer = require('./defineRenderer-legacy');
exports.makeRenderable = exports.renderable = require('../../runtime/renderable'); exports.makeRenderable = exports.renderable = require('../../runtime/renderable');
// referenced by compiled templates // referenced by compiled templates
exports.w = require('./defineWidget-legacy'); exports.w = require('./defineComponent-legacy');
exports.rw = modern.rw; exports.rw = modern.rw;
exports.r = require('./renderer-legacy'); exports.r = require('./renderer-legacy');
// server only // server only
exports.writeInitWidgetsCode = modern.writeInitWidgetsCode; exports.writeInitComponentsCode = modern.writeInitComponentsCode;
exports.getRenderedWidgets = modern.getRenderedWidgets; exports.getRenderedComponents = modern.getRenderedComponents;
// browser only // browser only
var Widget = exports.Widget = modern.Widget; var Component = exports.Component = modern.Component;
exports.onInitWidget = modern.onInitWidget; exports.onInitComponent = modern.onInitComponent;
exports.getWidgetForEl = modern.getWidgetForEl; exports.getComponentForEl = modern.getComponentForEl;
exports.initWidgets = modern.initWidgets; exports.initComponents = modern.initComponents;
// monkey patch Widget // monkey patch Component
if (Widget) { if (Component) {
var WidgetProto = Widget.prototype; var ComponentProto = Component.prototype;
WidgetProto.setProps = WidgetProto.$__setInput; ComponentProto.setProps = ComponentProto.$__setInput;
} }

152
components/legacy/renderer-legacy.js
View File

@ -1,17 +1,17 @@
var widgetLookup = require('../util').$__widgetLookup; var componentLookup = require('../util').$__componentLookup;
var WidgetsContext = require('../WidgetsContext'); var ComponentsContext = require('../ComponentsContext');
var registry = require('../registry'); var registry = require('../registry');
var modernRenderer = require('../renderer'); var modernRenderer = require('../renderer');
var resolveWidgetRef = modernRenderer.$__resolveWidgetRef; var resolveComponentRef = modernRenderer.$__resolveComponentRef;
var preserveWidgetEls = modernRenderer.$__preserveWidgetEls; var preserveComponentEls = modernRenderer.$__preserveComponentEls;
var handleBeginAsync = modernRenderer.$__handleBeginAsync; var handleBeginAsync = modernRenderer.$__handleBeginAsync;
var WIDGETS_BEGIN_ASYNC_ADDED_KEY = '$wa'; var WIDGETS_BEGIN_ASYNC_ADDED_KEY = '$wa';
function createRendererFunc(templateRenderFunc, widgetProps) { function createRendererFunc(templateRenderFunc, componentProps) {
var typeName = widgetProps.type; var typeName = componentProps.type;
var roots = widgetProps.roots; var roots = componentProps.roots;
var assignedId = widgetProps.id; var assignedId = componentProps.id;
return function renderer(input, out, renderingLogic) { return function renderer(input, out, renderingLogic) {
var outGlobal = out.global; var outGlobal = out.global;
@ -24,105 +24,105 @@ function createRendererFunc(templateRenderFunc, widgetProps) {
var getInitialProps; var getInitialProps;
var getTemplateData; var getTemplateData;
var getInitialState; var getInitialState;
var getWidgetConfig; var getComponentConfig;
var getInitialBody; var getInitialBody;
if (renderingLogic) { if (renderingLogic) {
getInitialProps = renderingLogic.getInitialProps; getInitialProps = renderingLogic.getInitialProps;
getTemplateData = renderingLogic.getTemplateData; getTemplateData = renderingLogic.getTemplateData;
getInitialState = renderingLogic.getInitialState; getInitialState = renderingLogic.getInitialState;
getWidgetConfig = renderingLogic.getWidgetConfig; getComponentConfig = renderingLogic.getComponentConfig;
getInitialBody = renderingLogic.getInitialBody; getInitialBody = renderingLogic.getInitialBody;
} }
var widgetConfig; var componentConfig;
var widgetBody; var componentBody;
var widgetState; var componentState;
var widget = outGlobal.$w; var component = outGlobal.$w;
var fakeWidget; var fakeComponent;
var isRerender = widget !== undefined; var isRerender = component !== undefined;
var id = assignedId; var id = assignedId;
var isExisting; var isExisting;
var customEvents; var customEvents;
var scope; var scope;
if (widget) { if (component) {
id = widget.id; id = component.id;
isExisting = true; isExisting = true;
outGlobal.$w = null; outGlobal.$w = null;
} else { } else {
var widgetArgs = input && input.$w || out.data.$w; var componentArgs = input && input.$w || out.data.$w;
if (widgetArgs) { if (componentArgs) {
scope = widgetArgs[0]; scope = componentArgs[0];
if (scope) { if (scope) {
scope = scope.id; scope = scope.id;
} }
var ref = widgetArgs[1]; var ref = componentArgs[1];
if (ref != null) { if (ref != null) {
ref = ref.toString(); ref = ref.toString();
} }
id = id || resolveWidgetRef(out, ref, scope); id = id || resolveComponentRef(out, ref, scope);
customEvents = widgetArgs[2]; customEvents = componentArgs[2];
delete input.$w; delete input.$w;
} }
} }
var widgetsContext = WidgetsContext.$__getWidgetsContext(out); var componentsContext = ComponentsContext.$__getComponentsContext(out);
id = id || widgetsContext.$__nextWidgetId(); id = id || componentsContext.$__nextComponentId();
if (registry.$__isServer && typeName) { if (registry.$__isServer && typeName) {
widget = { id:id, typeName:typeName }; component = { id:id, typeName:typeName };
} else { } else {
if (!widget) { if (!component) {
if (isRerender) { if (isRerender) {
// Look in in the DOM to see if a widget with the same ID and type already exists. // Look in in the DOM to see if a component with the same ID and type already exists.
widget = widgetLookup[id]; component = componentLookup[id];
if (widget && widget.$__type !== typeName) { if (component && component.$__type !== typeName) {
widget = undefined; component = undefined;
} }
} }
if (widget) { if (component) {
isExisting = true; isExisting = true;
} else { } else {
isExisting = false; isExisting = false;
// We need to create a new instance of the widget // We need to create a new instance of the component
if (typeName) { if (typeName) {
widget = registry.$__createWidget(typeName, id); component = registry.$__createComponent(typeName, id);
} }
} }
} }
} }
if (input) { if (input) {
if (getWidgetConfig) { if (getComponentConfig) {
// If getWidgetConfig() was implemented then use that to // If getComponentConfig() was implemented then use that to
// get the widget config. The widget config will be passed // get the component config. The component config will be passed
// to the widget constructor. If rendered on the server the // to the component constructor. If rendered on the server the
// widget config will be serialized to a JSON-like data // component config will be serialized to a JSON-like data
// structure and stored in a "data-w-config" attribute. // structure and stored in a "data-w-config" attribute.
widgetConfig = getWidgetConfig(input, out); componentConfig = getComponentConfig(input, out);
} else { } else {
widgetConfig = input.widgetConfig; componentConfig = input.componentConfig;
} }
if (widgetConfig) { if (componentConfig) {
widget.$c = widgetConfig; component.$c = componentConfig;
} }
if (getInitialBody) { if (getInitialBody) {
// If we have widget a widget body then pass it to the template // If we have component a component body then pass it to the template
// so that it is available to the widget tag and can be inserted // so that it is available to the component tag and can be inserted
// at the w-body marker // at the w-body marker
widgetBody = getInitialBody(input, out); componentBody = getInitialBody(input, out);
} }
// If we do not have state then we need to go through the process // If we do not have state then we need to go through the process
// of converting the input to a widget state, or simply normalizing // of converting the input to a component state, or simply normalizing
// the input using getInitialProps // the input using getInitialProps
if (getInitialProps) { if (getInitialProps) {
@ -131,59 +131,59 @@ function createRendererFunc(templateRenderFunc, widgetProps) {
} }
if (getInitialState) { if (getInitialState) {
// This optional method is used to derive the widget state // This optional method is used to derive the component state
// from the input properties // from the input properties
widget.state = widgetState = getInitialState(input, out); component.state = componentState = getInitialState(input, out);
} }
if (!widgetBody) { if (!componentBody) {
// Default to using the nested content as the widget body // Default to using the nested content as the component body
widgetBody = input.renderBody; componentBody = input.renderBody;
} }
} }
if (widget && isExisting) { if (component && isExisting) {
if (!widget.$__isDirty || !widget.shouldUpdate(input, widget.$__state)) { if (!component.$__isDirty || !component.shouldUpdate(input, component.$__state)) {
preserveWidgetEls(widget, out, widgetsContext); preserveComponentEls(component, out, componentsContext);
return; return;
} }
} }
if (!widget) { if (!component) {
fakeWidget = {}; fakeComponent = {};
} else { } else {
widgetState = widget.$__rawState; componentState = component.$__rawState;
} }
var templateInput = getTemplateData ? var templateInput = getTemplateData ?
getTemplateData(widgetState, input, out) : getTemplateData(componentState, input, out) :
widgetState || input || {}; componentState || input || {};
var widgetDef = widgetsContext.$__beginWidget(widget || fakeWidget); var componentDef = componentsContext.$__beginComponent(component || fakeComponent);
widgetDef.$__customEvents = customEvents; componentDef.$__customEvents = customEvents;
widgetDef.$__scope = scope; componentDef.$__scope = scope;
widgetDef.$__roots = roots; componentDef.$__roots = roots;
widgetDef.$__widget = fakeWidget ? null : widget; componentDef.$__component = fakeComponent ? null : component;
widgetDef.$__isExisting = isExisting; componentDef.$__isExisting = isExisting;
widgetDef.b = widgetBody; componentDef.b = componentBody;
widgetDef.c = function(widgetConfig) { componentDef.c = function(componentConfig) {
widget.$c = widgetConfig; component.$c = componentConfig;
}; };
widgetDef.t = function(typeName) { componentDef.t = function(typeName) {
if (typeName) { if (typeName) {
this.$__widget = widget = registry.$__createWidget(typeName, fakeWidget.id); this.$__component = component = registry.$__createComponent(typeName, fakeComponent.id);
} }
}; };
if (widget && isExisting) { if (component && isExisting) {
widget.$__emitLifecycleEvent('$__legacyRender'); component.$__emitLifecycleEvent('$__legacyRender');
} }
// Render the template associated with the component using the final template // Render the template associated with the component using the final template
// data that we constructed // data that we constructed
templateRenderFunc(templateInput, out, widgetDef); templateRenderFunc(templateInput, out, componentDef);
widgetDef.$__end(); componentDef.$__end();
}; };
} }

2
components/loadComponent-dynamic.js
View File

@ -1,7 +1,7 @@
'use strict'; 'use strict';
module.exports = function load(typeName) { module.exports = function load(typeName) {
// We make the assumption that the widget type name is a path to a // We make the assumption that the component type name is a path to a
// fully resolved module path and that the module exists // fully resolved module path and that the module exists
// as a CommonJS module // as a CommonJS module
return require(typeName); return require(typeName);

4
components/package.json
View File

@ -1,8 +1,8 @@
{ {
"browser": { "browser": {
"./index.js": "./index-browser.js", "./index.js": "./index-browser.js",
"./init-widgets.js": "./init-widgets-browser.js", "./init-components.js": "./init-components-browser.js",
"./legacy/defineWidget-legacy.js": "./legacy/defineWidget-legacy-browser.js", "./legacy/defineComponent-legacy.js": "./legacy/defineComponent-legacy-browser.js",
"./registry.js": "./registry-browser.js", "./registry.js": "./registry-browser.js",
"./util.js": "./util-browser.js" "./util.js": "./util-browser.js"
} }

58
components/registry-browser.js
View File

@ -1,13 +1,13 @@
var loadWidget = require('./loadWidget'); var loadComponent = require('./loadComponent');
var defineWidget = require('./defineWidget'); var defineComponent = require('./defineComponent');
var registered = {}; var registered = {};
var loaded = {}; var loaded = {};
var widgetTypes = {}; var componentTypes = {};
function register(typeName, def) { function register(typeName, def) {
if (typeof def === 'function') { if (typeof def === 'function') {
// We do this to kick off registering of nested widgets // We do this to kick off registering of nested components
// but we don't use the return value just yet since there // but we don't use the return value just yet since there
// is a good chance that it resulted in a circular dependency // is a good chance that it resulted in a circular dependency
def(); def();
@ -15,7 +15,7 @@ function register(typeName, def) {
registered[typeName] = def; registered[typeName] = def;
delete loaded[typeName]; delete loaded[typeName];
delete widgetTypes[typeName]; delete componentTypes[typeName];
return typeName; return typeName;
} }
@ -28,7 +28,7 @@ function load(typeName) {
target = target(); target = target();
} }
if (!target) { if (!target) {
target = loadWidget(typeName); // Assume the typeName has been fully resolved already target = loadComponent(typeName); // Assume the typeName has been fully resolved already
} }
loaded[typeName] = target || null; loaded[typeName] = target || null;
} }
@ -39,42 +39,42 @@ function load(typeName) {
return target; return target;
} }
function getWidgetClass(typeName) { function getComponentClass(typeName) {
var WidgetClass = widgetTypes[typeName]; var ComponentClass = componentTypes[typeName];
if (WidgetClass) { if (ComponentClass) {
return WidgetClass; return ComponentClass;
} }
WidgetClass = load(typeName); ComponentClass = load(typeName);
if (WidgetClass.Widget) { if (ComponentClass.Component) {
WidgetClass = WidgetClass.Widget; ComponentClass = ComponentClass.Component;
} }
if (!WidgetClass.$__isWidget) { if (!ComponentClass.$__isComponent) {
WidgetClass = defineWidget(WidgetClass, WidgetClass.renderer); ComponentClass = defineComponent(ComponentClass, ComponentClass.renderer);
} }
// Make the widget "type" accessible on each widget instance // Make the component "type" accessible on each component instance
WidgetClass.prototype.$__type = typeName; ComponentClass.prototype.$__type = typeName;
widgetTypes[typeName] = WidgetClass; componentTypes[typeName] = ComponentClass;
return WidgetClass; return ComponentClass;
} }
function createWidget(typeName, id) { function createComponent(typeName, id) {
var WidgetClass = getWidgetClass(typeName); var ComponentClass = getComponentClass(typeName);
var widget; var component;
if (typeof WidgetClass === 'function') { if (typeof ComponentClass === 'function') {
// The widget is a constructor function that we can invoke to create a new instance of the widget // The component is a constructor function that we can invoke to create a new instance of the component
widget = new WidgetClass(id); component = new ComponentClass(id);
} else if (WidgetClass.initWidget) { } else if (ComponentClass.initComponent) {
widget = WidgetClass; component = ComponentClass;
} }
return widget; return component;
} }
exports.$__register = register; exports.$__register = register;
exports.$__createWidget = createWidget; exports.$__createComponent = createComponent;

22
components/registry.js
View File

@ -3,8 +3,8 @@
const extend = require('raptor-util/extend'); const extend = require('raptor-util/extend');
const SERVER_WIDGET_KEY = Symbol(); const SERVER_WIDGET_KEY = Symbol();
function createServerWidgetClass(renderingLogic) { function createServerComponentClass(renderingLogic) {
class ServerWidget { class ServerComponent {
constructor(id, input, out, typeName) { constructor(id, input, out, typeName) {
this.id = id; this.id = id;
this.$__updatedInput = undefined; this.$__updatedInput = undefined;
@ -53,19 +53,19 @@ function createServerWidgetClass(renderingLogic) {
} }
} }
extend(ServerWidget.prototype, renderingLogic); extend(ServerComponent.prototype, renderingLogic);
return ServerWidget; return ServerComponent;
} }
function createWidget(renderingLogic, id, input, out, typeName) { function createComponent(renderingLogic, id, input, out, typeName) {
var ServerWidget = renderingLogic[SERVER_WIDGET_KEY]; var ServerComponent = renderingLogic[SERVER_WIDGET_KEY];
if (!ServerWidget) { if (!ServerComponent) {
ServerWidget = renderingLogic[SERVER_WIDGET_KEY] = createServerWidgetClass(renderingLogic); ServerComponent = renderingLogic[SERVER_WIDGET_KEY] = createServerComponentClass(renderingLogic);
} }
var widget = new ServerWidget(id, input, out, typeName); var component = new ServerComponent(id, input, out, typeName);
return widget; return component;
} }
exports.$__isServer = true; exports.$__isServer = true;
exports.$__createWidget = createWidget; exports.$__createComponent = createComponent;

130
components/renderer.js
View File

@ -1,14 +1,14 @@
var widgetsUtil = require('./util'); var componentsUtil = require('./util');
var widgetLookup = widgetsUtil.$__widgetLookup; var componentLookup = componentsUtil.$__componentLookup;
var emitLifecycleEvent = widgetsUtil.$__emitLifecycleEvent; var emitLifecycleEvent = componentsUtil.$__emitLifecycleEvent;
var nextRepeatedId = require('./nextRepeatedId'); var nextRepeatedId = require('./nextRepeatedId');
var repeatedRegExp = /\[\]$/; var repeatedRegExp = /\[\]$/;
var WidgetsContext = require('./WidgetsContext'); var ComponentsContext = require('./ComponentsContext');
var registry = require('./registry'); var registry = require('./registry');
var WIDGETS_BEGIN_ASYNC_ADDED_KEY = '$wa'; var WIDGETS_BEGIN_ASYNC_ADDED_KEY = '$wa';
function resolveWidgetRef(out, ref, scope) { function resolveComponentRef(out, ref, scope) {
if (ref.charAt(0) === '#') { if (ref.charAt(0) === '#') {
return ref.substring(1); return ref.substring(1);
} else { } else {
@ -24,8 +24,8 @@ function resolveWidgetRef(out, ref, scope) {
} }
} }
function preserveWidgetEls(existingWidget, out, widgetsContext) { function preserveComponentEls(existingComponent, out, componentsContext) {
var rootEls = existingWidget.$__getRootEls({}); var rootEls = existingComponent.$__getRootEls({});
for (var elId in rootEls) { for (var elId in rootEls) {
var el = rootEls[elId]; var el = rootEls[elId];
@ -34,37 +34,37 @@ function preserveWidgetEls(existingWidget, out, widgetsContext) {
// DOM node is matched up correctly when using morphdom. // DOM node is matched up correctly when using morphdom.
out.element(el.tagName, { id: elId }); out.element(el.tagName, { id: elId });
widgetsContext.$__preserveDOMNode(elId); // Mark the element as being preserved (for morphdom) componentsContext.$__preserveDOMNode(elId); // Mark the element as being preserved (for morphdom)
} }
existingWidget.$__reset(); // The widget is no longer dirty so reset internal flags existingComponent.$__reset(); // The component is no longer dirty so reset internal flags
return true; return true;
} }
function handleBeginAsync(event) { function handleBeginAsync(event) {
var parentOut = event.parentOut; var parentOut = event.parentOut;
var asyncOut = event.out; var asyncOut = event.out;
var widgetsContext = asyncOut.global.widgets; var componentsContext = asyncOut.global.components;
var widgetStack; var componentStack;
if (widgetsContext && (widgetStack = widgetsContext.$__widgetStack)) { if (componentsContext && (componentStack = componentsContext.$__componentStack)) {
// All of the widgets in this async block should be // All of the components in this async block should be
// initialized after the widgets in the parent. Therefore, // initialized after the components in the parent. Therefore,
// we will create a new WidgetsContext for the nested // we will create a new ComponentsContext for the nested
// async block and will create a new widget stack where the current // async block and will create a new component stack where the current
// widget in the parent block is the only widget in the nested // component in the parent block is the only component in the nested
// stack (to begin with). This will result in top-level widgets // stack (to begin with). This will result in top-level components
// of the async block being added as children of the widget in the // of the async block being added as children of the component in the
// parent block. // parent block.
var nestedWidgetsContext = new WidgetsContext(asyncOut, widgetStack[widgetStack.length-1]); var nestedComponentsContext = new ComponentsContext(asyncOut, componentStack[componentStack.length-1]);
asyncOut.data.widgets = nestedWidgetsContext; asyncOut.data.components = nestedComponentsContext;
} }
asyncOut.data.$w = parentOut.data.$w; asyncOut.data.$w = parentOut.data.$w;
} }
function createRendererFunc(templateRenderFunc, widgetProps, renderingLogic) { function createRendererFunc(templateRenderFunc, componentProps, renderingLogic) {
if (typeof renderingLogic == 'function') { if (typeof renderingLogic == 'function') {
var ctor = renderingLogic; var ctor = renderingLogic;
renderingLogic = renderingLogic.prototype; renderingLogic = renderingLogic.prototype;
@ -73,9 +73,9 @@ function createRendererFunc(templateRenderFunc, widgetProps, renderingLogic) {
renderingLogic = renderingLogic || {}; renderingLogic = renderingLogic || {};
var onInput = renderingLogic.onInput; var onInput = renderingLogic.onInput;
var typeName = widgetProps.type; var typeName = componentProps.type;
var roots = widgetProps.roots; var roots = componentProps.roots;
var assignedId = widgetProps.id; var assignedId = componentProps.id;
return function renderer(input, out) { return function renderer(input, out) {
var outGlobal = out.global; var outGlobal = out.global;
@ -87,101 +87,101 @@ function createRendererFunc(templateRenderFunc, widgetProps, renderingLogic) {
} }
} }
var widget = outGlobal.$w; var component = outGlobal.$w;
var isRerender = widget !== undefined; var isRerender = component !== undefined;
var id = assignedId; var id = assignedId;
var isExisting; var isExisting;
var customEvents; var customEvents;
var scope; var scope;
if (widget) { if (component) {
id = widget.id; id = component.id;
isExisting = true; isExisting = true;
outGlobal.$w = null; outGlobal.$w = null;
} else { } else {
var widgetArgs = input && input.$w || out.data.$w; var componentArgs = input && input.$w || out.data.$w;
if (widgetArgs) { if (componentArgs) {
scope = widgetArgs[0]; scope = componentArgs[0];
if (scope) { if (scope) {
scope = scope.id; scope = scope.id;
} }
var ref = widgetArgs[1]; var ref = componentArgs[1];
if (ref != null) { if (ref != null) {
ref = ref.toString(); ref = ref.toString();
} }
id = id || resolveWidgetRef(out, ref, scope); id = id || resolveComponentRef(out, ref, scope);
customEvents = widgetArgs[2]; customEvents = componentArgs[2];
delete input.$w; delete input.$w;
} }
} }
var widgetsContext = WidgetsContext.$__getWidgetsContext(out); var componentsContext = ComponentsContext.$__getComponentsContext(out);
id = id || widgetsContext.$__nextWidgetId(); id = id || componentsContext.$__nextComponentId();
if (registry.$__isServer) { if (registry.$__isServer) {
widget = registry.$__createWidget(renderingLogic, id, input, out, typeName); component = registry.$__createComponent(renderingLogic, id, input, out, typeName);
input = widget.$__updatedInput; input = component.$__updatedInput;
widget.$__updatedInput = undefined; // We don't want $__updatedInput to be serialized to the browser component.$__updatedInput = undefined; // We don't want $__updatedInput to be serialized to the browser
} else { } else {
if (!widget) { if (!component) {
if (isRerender) { if (isRerender) {
// Look in in the DOM to see if a widget with the same ID and type already exists. // Look in in the DOM to see if a component with the same ID and type already exists.
widget = widgetLookup[id]; component = componentLookup[id];
if (widget && widget.$__type !== typeName) { if (component && component.$__type !== typeName) {
widget = undefined; component = undefined;
} }
} }
if (widget) { if (component) {
isExisting = true; isExisting = true;
} else { } else {
isExisting = false; isExisting = false;
// We need to create a new instance of the widget // We need to create a new instance of the component
widget = registry.$__createWidget(typeName, id); component = registry.$__createComponent(typeName, id);
} }
// Set this flag to prevent the widget from being queued for update // Set this flag to prevent the component from being queued for update
// based on the new input. The widget is about to be rerendered // based on the new input. The component is about to be rerendered
// so we don't want to queue it up as a result of calling `setInput()` // so we don't want to queue it up as a result of calling `setInput()`
widget.$__updateQueued = true; component.$__updateQueued = true;
if (!isExisting) { if (!isExisting) {
emitLifecycleEvent(widget, 'create', input, out); emitLifecycleEvent(component, 'create', input, out);
} }
input = widget.$__setInput(input, onInput, out); input = component.$__setInput(input, onInput, out);
if (isExisting) { if (isExisting) {
if (!widget.$__isDirty || !widget.shouldUpdate(input, widget.$__state)) { if (!component.$__isDirty || !component.shouldUpdate(input, component.$__state)) {
preserveWidgetEls(widget, out, widgetsContext); preserveComponentEls(component, out, componentsContext);
return; return;
} }
} }
} }
emitLifecycleEvent(widget, 'render', out); emitLifecycleEvent(component, 'render', out);
} }
var widgetDef = widgetsContext.$__beginWidget(widget); var componentDef = componentsContext.$__beginComponent(component);
widgetDef.$__customEvents = customEvents; componentDef.$__customEvents = customEvents;
widgetDef.$__scope = scope; componentDef.$__scope = scope;
widgetDef.$__roots = roots; componentDef.$__roots = roots;
widgetDef.$__isExisting = isExisting; componentDef.$__isExisting = isExisting;
// Render the template associated with the component using the final template // Render the template associated with the component using the final template
// data that we constructed // data that we constructed
templateRenderFunc(input, out, widgetDef, widget.$__rawState); templateRenderFunc(input, out, componentDef, component.$__rawState);
widgetDef.$__end(); componentDef.$__end();
}; };
} }
module.exports = createRendererFunc; module.exports = createRendererFunc;
// exports used by the legacy renderer // exports used by the legacy renderer
createRendererFunc.$__resolveWidgetRef = resolveWidgetRef; createRendererFunc.$__resolveComponentRef = resolveComponentRef;
createRendererFunc.$__preserveWidgetEls = preserveWidgetEls; createRendererFunc.$__preserveComponentEls = preserveComponentEls;
createRendererFunc.$__handleBeginAsync = handleBeginAsync; createRendererFunc.$__handleBeginAsync = handleBeginAsync;

30
components/taglib/TransformHelper/ComponentArgs.js
View File

@ -1,6 +1,6 @@
'use strict'; 'use strict';
class WidgetArgs { class ComponentArgs {
constructor() { constructor() {
this.id = null; this.id = null;
@ -41,14 +41,14 @@ class WidgetArgs {
var id = this.id; var id = this.id;
var customEvents = this.customEvents; var customEvents = this.customEvents;
// Make sure the nested widget has access to the ID of the containing // Make sure the nested component has access to the ID of the containing
// widget if it is needed // component if it is needed
var shouldProvideScope = id || customEvents; var shouldProvideScope = id || customEvents;
var args = []; var args = [];
if (shouldProvideScope) { if (shouldProvideScope) {
args.push(builder.identifier('widget')); args.push(builder.identifier('component'));
} else { } else {
args.push(builder.literalNull()); args.push(builder.literalNull());
} }
@ -66,34 +66,34 @@ class WidgetArgs {
if (el.tagDef && el.tagDef.template) { if (el.tagDef && el.tagDef.template) {
el.setAttributeValue('$w', builder.literal(args)); el.setAttributeValue('$w', builder.literal(args));
} else { } else {
let widgetArgsVar = transformHelper.context.addStaticVar('marko_widgetArgs', let componentArgsVar = transformHelper.context.addStaticVar('marko_componentArgs',
builder.require(builder.literal('marko/widgets/taglib/helpers/widgetArgs'))); builder.require(builder.literal('marko/components/taglib/helpers/componentArgs')));
let widgetArgsFunctionCall = builder.functionCall(widgetArgsVar, [ let componentArgsFunctionCall = builder.functionCall(componentArgsVar, [
builder.identifierOut(), builder.identifierOut(),
builder.literal(args) builder.literal(args)
]); ]);
let cleanupWidgetArgsFunctionCall = this.buildCleanupWidgetArgsFunctionCall(transformHelper); let cleanupComponentArgsFunctionCall = this.buildCleanupComponentArgsFunctionCall(transformHelper);
el.onBeforeGenerateCode((event) => { el.onBeforeGenerateCode((event) => {
event.insertCode(widgetArgsFunctionCall); event.insertCode(componentArgsFunctionCall);
}); });
el.onAfterGenerateCode((event) => { el.onAfterGenerateCode((event) => {
event.insertCode(cleanupWidgetArgsFunctionCall); event.insertCode(cleanupComponentArgsFunctionCall);
}); });
} }
} }
buildCleanupWidgetArgsFunctionCall(transformHelper) { buildCleanupComponentArgsFunctionCall(transformHelper) {
var context = transformHelper.context; var context = transformHelper.context;
var builder = transformHelper.builder; var builder = transformHelper.builder;
var cleanupWidgetArgsVar = context.addStaticVar('marko_cleanupWidgetArgs', var cleanupComponentArgsVar = context.addStaticVar('marko_cleanupComponentArgs',
'marko_widgetArgs.cleanup'); 'marko_componentArgs.cleanup');
return builder.functionCall(cleanupWidgetArgsVar, [builder.identifierOut()]); return builder.functionCall(cleanupComponentArgsVar, [builder.identifierOut()]);
} }
} }
module.exports = WidgetArgs; module.exports = ComponentArgs;

60
components/taglib/TransformHelper/assignComponentId.js
View File

@ -1,33 +1,33 @@
'use strict'; 'use strict';
module.exports = function assignWidgetId(isRepeated) { module.exports = function assignComponentId(isRepeated) {
// First check if we have already assigned an ID to thie element // First check if we have already assigned an ID to thie element
var widgetIdInfo = this.widgetIdInfo; var componentIdInfo = this.componentIdInfo;
if (widgetIdInfo) { if (componentIdInfo) {
return this.widgetIdInfo; return this.componentIdInfo;
} }
var el = this.el; var el = this.el;
var context = this.context; var context = this.context;
var builder = this.builder; var builder = this.builder;
let widgetRef; let componentRef;
var nestedIdExpression; var nestedIdExpression;
var idExpression; var idExpression;
if (!this.hasBoundWidgetForTemplate()) { if (!this.hasBoundComponentForTemplate()) {
// We are assigning a widget ID to a nested widget in a template that does not have a widget. // We are assigning a component ID to a nested component in a template that does not have a component.
// That means we do not have access to the parent widget variable as part of a closure. We // That means we do not have access to the parent component variable as part of a closure. We
// need to look it up out of the `out.data` map // need to look it up out of the `out.data` map
if (!context.isFlagSet('hasWidgetVar')) { if (!context.isFlagSet('hasComponentVar')) {
context.setFlag('hasWidgetVar'); context.setFlag('hasComponentVar');
var getCurrentWidgetVar = context.importModule('marko_getCurrentWidget', var getCurrentComponentVar = context.importModule('marko_getCurrentComponent',
this.getMarkoWidgetsRequirePath('marko/widgets/taglib/helpers/getCurrentWidget')); this.getMarkoComponentsRequirePath('marko/components/taglib/helpers/getCurrentComponent'));
context.addVar('widget', builder.functionCall(getCurrentWidgetVar, [builder.identifierOut()])); context.addVar('component', builder.functionCall(getCurrentComponentVar, [builder.identifierOut()]));
} }
} }
@ -46,35 +46,35 @@ module.exports = function assignWidgetId(isRepeated) {
var isCustomTag = el.type !== 'HtmlElement'; var isCustomTag = el.type !== 'HtmlElement';
if (el.hasAttribute('key')) { if (el.hasAttribute('key')) {
widgetRef = el.getAttributeValue('key'); componentRef = el.getAttributeValue('key');
el.removeAttribute('key'); el.removeAttribute('key');
} else if (el.hasAttribute('ref')) { } else if (el.hasAttribute('ref')) {
context.deprecate('The "ref" attribute is deprecated. Please use "key" instead.'); context.deprecate('The "ref" attribute is deprecated. Please use "key" instead.');
widgetRef = el.getAttributeValue('ref'); componentRef = el.getAttributeValue('ref');
el.removeAttribute('ref'); el.removeAttribute('ref');
} }
if (el.hasAttribute('w-id')) { if (el.hasAttribute('w-id')) {
context.deprecate('The "w-id" attribute is deprecated. Please use "key" instead.'); context.deprecate('The "w-id" attribute is deprecated. Please use "key" instead.');
if (widgetRef) { if (componentRef) {
this.addError('The "w-id" attribute cannot be used in conjuction with the "ref" or "key" attributes.'); this.addError('The "w-id" attribute cannot be used in conjuction with the "ref" or "key" attributes.');
return; return;
} }
widgetRef = el.getAttributeValue('w-id'); componentRef = el.getAttributeValue('w-id');
el.removeAttribute('w-id'); el.removeAttribute('w-id');
} }
if (widgetRef) { if (componentRef) {
idExpression = this.buildWidgetElIdFunctionCall(widgetRef); idExpression = this.buildComponentElIdFunctionCall(componentRef);
nestedIdExpression = widgetRef; nestedIdExpression = componentRef;
if (isCustomTag) { if (isCustomTag) {
// The element is a custom tag // The element is a custom tag
this.getWidgetArgs().setId(nestedIdExpression); this.getComponentArgs().setId(nestedIdExpression);
} else { } else {
if (el.hasAttribute('id')) { if (el.hasAttribute('id')) {
this.addError('The "ref", "key", and "w-id" attributes cannot be used in conjuction with the "id" attribute.'); this.addError('The "ref", "key", and "w-id" attributes cannot be used in conjuction with the "id" attribute.');
@ -85,9 +85,9 @@ module.exports = function assignWidgetId(isRepeated) {
} else if (el.hasAttribute('id')) { } else if (el.hasAttribute('id')) {
idExpression = el.getAttributeValue('id'); idExpression = el.getAttributeValue('id');
if (el.isFlagSet('hasWidgetBind')) { if (el.isFlagSet('hasComponentBind')) {
// We have to attach a listener to the root element of the widget // We have to attach a listener to the root element of the component
// We will use an empty string as an indicator that it is the root widget // We will use an empty string as an indicator that it is the root component
// element. // element.
nestedIdExpression = builder.literal(''); nestedIdExpression = builder.literal('');
} else { } else {
@ -103,10 +103,10 @@ module.exports = function assignWidgetId(isRepeated) {
nestedIdExpression = isRepeated ? builder.literal(uniqueElId + '[]') : builder.literal(uniqueElId); nestedIdExpression = isRepeated ? builder.literal(uniqueElId + '[]') : builder.literal(uniqueElId);
idExpression = this.buildWidgetElIdFunctionCall(nestedIdExpression); idExpression = this.buildComponentElIdFunctionCall(nestedIdExpression);
if (isCustomTag) { if (isCustomTag) {
this.getWidgetArgs().setId(nestedIdExpression); this.getComponentArgs().setId(nestedIdExpression);
} else { } else {
el.setAttributeValue('id', idExpression); el.setAttributeValue('id', idExpression);
} }
@ -114,7 +114,7 @@ module.exports = function assignWidgetId(isRepeated) {
var transformHelper = this; var transformHelper = this;
this.widgetIdInfo = { this.componentIdInfo = {
idExpression: idExpression, idExpression: idExpression,
nestedIdExpression: nestedIdExpression, nestedIdExpression: nestedIdExpression,
idVarNode: null, idVarNode: null,
@ -124,7 +124,7 @@ module.exports = function assignWidgetId(isRepeated) {
} }
let uniqueElId = transformHelper.nextUniqueId(); let uniqueElId = transformHelper.nextUniqueId();
let idVarName = '__widgetId' + uniqueElId; let idVarName = '__componentId' + uniqueElId;
let idVar = builder.identifier(idVarName); let idVar = builder.identifier(idVarName);
this.idVarNode = builder.vars([ this.idVarNode = builder.vars([
@ -141,7 +141,7 @@ module.exports = function assignWidgetId(isRepeated) {
idVar); idVar);
if (isCustomTag) { if (isCustomTag) {
transformHelper.getWidgetArgs().setId(nestedIdExpression); transformHelper.getComponentArgs().setId(nestedIdExpression);
} else { } else {
el.setAttributeValue('id', idExpression); el.setAttributeValue('id', idExpression);
} }
@ -150,5 +150,5 @@ module.exports = function assignWidgetId(isRepeated) {
} }
}; };
return this.widgetIdInfo; return this.componentIdInfo;
}; };

124
components/taglib/TransformHelper/handleComponentBind.js
View File

@ -17,14 +17,14 @@ function isTemplateMainEntry(context) {
return filename === 'index'; return filename === 'index';
} }
function checkCombinedComponent(widgetModulePath) { function checkCombinedComponent(componentModulePath) {
let filename = path.basename(widgetModulePath); let filename = path.basename(componentModulePath);
let ext = path.extname(filename); let ext = path.extname(filename);
if (ext) { if (ext) {
filename = filename.slice(0, 0 - ext.length); filename = filename.slice(0, 0 - ext.length);
} }
return filename !== 'widget'; return filename !== 'component';
} }
function checkSplitComponent(context) { function checkSplitComponent(context) {
@ -38,7 +38,7 @@ function checkIsInnerBind(el) {
var curNode = el; var curNode = el;
while (true) { while (true) {
if (curNode.data.hasBoundWidget) { if (curNode.data.hasBoundComponent) {
return true; return true;
} }
@ -52,20 +52,20 @@ function checkIsInnerBind(el) {
return false; return false;
} }
module.exports = function handleWidgetBind() { module.exports = function handleComponentBind() {
let el = this.el; let el = this.el;
let context = this.context; let context = this.context;
let builder = this.builder; let builder = this.builder;
let internalBindAttr = el.getAttribute('_widgetbind'); let internalBindAttr = el.getAttribute('_componentbind');
let bindAttr = el.getAttribute('w-bind'); let bindAttr = el.getAttribute('w-bind');
let bindAttrValue; let bindAttrValue;
if (internalBindAttr == null && bindAttr == null) { if (internalBindAttr == null && bindAttr == null) {
return; return;
} else if (bindAttr != null) { } else if (bindAttr != null) {
context.deprecate('Legacy widgets using w-bind and defineRenderer/defineWidget or defineComponent are deprecated. See: https://github.com/marko-js/marko/issues/421'); context.deprecate('Legacy components using w-bind and defineRenderer/defineComponent or defineComponent are deprecated. See: https://github.com/marko-js/marko/issues/421');
this.isLegacyWidget = true; this.isLegacyComponent = true;
// Remove the w-bind attribute since we don't want it showing up in the output DOM // Remove the w-bind attribute since we don't want it showing up in the output DOM
el.removeAttribute('w-bind'); el.removeAttribute('w-bind');
@ -73,20 +73,20 @@ module.exports = function handleWidgetBind() {
// Read the value for the w-bind attribute. This will be an AST node for the parsed JavaScript // Read the value for the w-bind attribute. This will be an AST node for the parsed JavaScript
bindAttrValue = bindAttr.value; bindAttrValue = bindAttr.value;
} else if (internalBindAttr != null) { } else if (internalBindAttr != null) {
el.removeAttribute('_widgetbind'); el.removeAttribute('_componentbind');
} }
this.setHasBoundWidgetForTemplate(); this.setHasBoundComponentForTemplate();
var isInnerBind = checkIsInnerBind(el.parentNode); var isInnerBind = checkIsInnerBind(el.parentNode);
el.data.hasBoundWidget = true; el.data.hasBoundComponent = true;
// A widget is bound to the el... // A component is bound to the el...
let modulePath; let modulePath;
var widgetProps = isInnerBind ? {} : this.getWidgetProps(); var componentProps = isInnerBind ? {} : this.getComponentProps();
let isMain = isTemplateMainEntry(context); let isMain = isTemplateMainEntry(context);
let transformHelper = this; let transformHelper = this;
@ -97,19 +97,19 @@ module.exports = function handleWidgetBind() {
let isRendererExport; let isRendererExport;
let rendererPath; let rendererPath;
const hasWidgetTypes = context.isFlagSet('hasWidgetTypes'); const hasComponentTypes = context.isFlagSet('hasComponentTypes');
if (hasWidgetTypes) { if (hasComponentTypes) {
context.deprecate('The <widget-types> tag is deprecated. Please remove it. See: https://github.com/marko-js/marko/issues/514'); context.deprecate('The <component-types> tag is deprecated. Please remove it. See: https://github.com/marko-js/marko/issues/514');
} }
if (bindAttrValue == null) { if (bindAttrValue == null) {
if (inlineComponent) { if (inlineComponent) {
modulePath = context.filename; modulePath = context.filename;
} else { } else {
modulePath = this.getDefaultWidgetModule(); modulePath = this.getDefaultComponentModule();
if (!modulePath) { if (!modulePath) {
this.addError('No corresponding JavaScript module found in the same directory (either "widget.js" or "index.js"). Actual: ' + modulePath); this.addError('No corresponding JavaScript module found in the same directory (either "component.js" or "index.js"). Actual: ' + modulePath);
return; return;
} }
} }
@ -120,18 +120,18 @@ module.exports = function handleWidgetBind() {
return; return;
} }
} else { } else {
// This is a dynamic expression. The <widget-types> should have been found. // This is a dynamic expression. The <component-types> should have been found.
if (!hasWidgetTypes) { if (!hasComponentTypes) {
this.addError('The <widget-types> tag must be used to declare widgets when the value of the "w-bind" attribute is a dynamic expression.'); this.addError('The <component-types> tag must be used to declare components when the value of the "w-bind" attribute is a dynamic expression.');
return; return;
} }
el.insertSiblingBefore( el.insertSiblingBefore(
builder.functionCall( builder.functionCall(
builder.memberExpression(builder.identifier('widget'), builder.identifier('t')), builder.memberExpression(builder.identifier('component'), builder.identifier('t')),
[ [
builder.memberExpression( builder.memberExpression(
builder.identifier('marko_widgetTypes'), builder.identifier('marko_componentTypes'),
bindAttrValue, bindAttrValue,
true /* computed */) true /* computed */)
])); ]));
@ -162,30 +162,30 @@ module.exports = function handleWidgetBind() {
} }
if (modulePath) { if (modulePath) {
let widgetTypeNode; let componentTypeNode;
var widgetPath = modulePath; var componentPath = modulePath;
var widgetTypeImport; var componentTypeImport;
if (isMain && isComponentExport) { if (isMain && isComponentExport) {
widgetPath = './' + path.basename(context.filename); componentPath = './' + path.basename(context.filename);
widgetTypeImport = builder.functionDeclaration(null, [], [ componentTypeImport = builder.functionDeclaration(null, [], [
builder.returnStatement(builder.memberExpression(builder.identifier('module'), builder.identifier('exports'))) builder.returnStatement(builder.memberExpression(builder.identifier('module'), builder.identifier('exports')))
]); ]);
} }
context.addDependency({ type:'require', path:widgetPath }); context.addDependency({ type:'require', path:componentPath });
context.addDependency({ type:'require', path:'marko/widgets' }); context.addDependency({ type:'require', path:'marko/components' });
widgetTypeNode = context.addStaticVar('marko_widgetType', this.buildWidgetTypeNode(widgetPath, widgetTypeImport)); componentTypeNode = context.addStaticVar('marko_componentType', this.buildComponentTypeNode(componentPath, componentTypeImport));
widgetProps.type = widgetTypeNode; componentProps.type = componentTypeNode;
} }
if (el.hasAttribute('w-config')) { if (el.hasAttribute('w-config')) {
el.insertSiblingBefore( el.insertSiblingBefore(
builder.functionCall( builder.functionCall(
builder.memberExpression(builder.identifier('widget'), builder.identifier('c')), builder.memberExpression(builder.identifier('component'), builder.identifier('c')),
[ [
el.getAttributeValue('w-config') el.getAttributeValue('w-config')
])); ]));
@ -196,37 +196,37 @@ module.exports = function handleWidgetBind() {
let id = el.getAttributeValue('id'); let id = el.getAttributeValue('id');
if (id) { if (id) {
widgetProps.id = id; componentProps.id = id;
} }
if (isInnerBind) { if (isInnerBind) {
// let widgetOptionsVar = context.addStaticVar( // let componentOptionsVar = context.addStaticVar(
// 'widgetOptions', // 'componentOptions',
// builder.functionCall( // builder.functionCall(
// builder.memberExpression(transformHelper.markoWidgetsVar, builder.identifier('r')), // builder.memberExpression(transformHelper.markoComponentsVar, builder.identifier('r')),
// [ // [
// builder.renderBodyFunction([el]), // builder.renderBodyFunction([el]),
// builder.literal(widgetProps) // builder.literal(componentProps)
// ])); // ]));
// //
// widgetProps._ = widgetOptionsVar; // componentProps._ = componentOptionsVar;
el.setAttributeValue('id', el.setAttributeValue('id',
builder.memberExpression( builder.memberExpression(
builder.identifier('widget'), builder.identifier('component'),
builder.identifier('id'))); builder.identifier('id')));
// TODO Deprecation warning for inner binds // TODO Deprecation warning for inner binds
let widgetNode = context.createNodeForEl('_widget', { let componentNode = context.createNodeForEl('_component', {
props: builder.literal(widgetProps) props: builder.literal(componentProps)
}); });
el.wrapWith(widgetNode); el.wrapWith(componentNode);
return; return;
} }
if (this.firstBind) { if (this.firstBind) {
this.context.on('beforeGenerateCode:TemplateRoot', function(eventArgs) { this.context.on('beforeGenerateCode:TemplateRoot', function(eventArgs) {
eventArgs.node.addRenderFunctionParam(builder.identifier('widget')); eventArgs.node.addRenderFunctionParam(builder.identifier('component'));
eventArgs.node.addRenderFunctionParam(builder.identifier('state')); eventArgs.node.addRenderFunctionParam(builder.identifier('state'));
eventArgs.node.generateAssignRenderCode = function(eventArgs) { eventArgs.node.generateAssignRenderCode = function(eventArgs) {
let nodes = []; let nodes = [];
@ -236,7 +236,7 @@ module.exports = function handleWidgetBind() {
var createRendererArgs = [ var createRendererArgs = [
renderFunctionVar, renderFunctionVar,
builder.literal(widgetProps) builder.literal(componentProps)
]; ];
if (renderingLogic) { if (renderingLogic) {
@ -246,14 +246,14 @@ module.exports = function handleWidgetBind() {
nodes.push(builder.assignment( nodes.push(builder.assignment(
templateRendererMember, templateRendererMember,
builder.functionCall( builder.functionCall(
builder.memberExpression(transformHelper.markoWidgetsVar, builder.identifier('r')), builder.memberExpression(transformHelper.markoComponentsVar, builder.identifier('r')),
createRendererArgs))); createRendererArgs)));
if (inlineComponent || isComponentExport) { if (inlineComponent || isComponentExport) {
nodes.push(builder.assignment( nodes.push(builder.assignment(
builder.memberExpression(templateVar, builder.identifier('Widget')), builder.memberExpression(templateVar, builder.identifier('Component')),
builder.functionCall( builder.functionCall(
builder.memberExpression(transformHelper.markoWidgetsVar, builder.identifier('w')), builder.memberExpression(transformHelper.markoComponentsVar, builder.identifier('w')),
[ [
renderingLogic, renderingLogic,
templateRendererMember templateRendererMember
@ -265,36 +265,36 @@ module.exports = function handleWidgetBind() {
}); });
} }
// let widgetNode = el.data.widgetNode; // let componentNode = el.data.componentNode;
// //
// if (widgetNode) { // if (componentNode) {
// widgetNode.setAttributeValues(widgetProps); // componentNode.setAttributeValues(componentProps);
// } else { // } else {
// widgetNode = context.createNodeForEl('_widget', widgetProps); // componentNode = context.createNodeForEl('_component', componentProps);
// el.wrapWith(widgetNode); // el.wrapWith(componentNode);
// } // }
if (el.hasAttribute('key')) { if (el.hasAttribute('key')) {
if (!widgetProps.roots) { if (!componentProps.roots) {
widgetProps.roots = []; componentProps.roots = [];
} }
var key = el.getAttributeValue('key'); var key = el.getAttributeValue('key');
widgetProps.roots.push(key); componentProps.roots.push(key);
} else if (el.hasAttribute('ref')) { } else if (el.hasAttribute('ref')) {
if (!widgetProps.roots) { if (!componentProps.roots) {
widgetProps.roots = []; componentProps.roots = [];
} }
var ref = el.getAttributeValue('ref'); var ref = el.getAttributeValue('ref');
widgetProps.roots.push(ref); componentProps.roots.push(ref);
} else { } else {
el.setAttributeValue('id', el.setAttributeValue('id',
builder.memberExpression( builder.memberExpression(
builder.identifier('widget'), builder.identifier('component'),
builder.identifier('id'))); builder.identifier('id')));
} }
// this.widgetStack.push({ // this.componentStack.push({
// widgetNode: widgetNode, // componentNode: componentNode,
// el: el, // el: el,
// extend: false // extend: false
// }); // });

32
components/taglib/TransformHelper/handleComponentEvents.js
View File

@ -19,15 +19,15 @@ function isUpperCase(c) {
function addBubblingEventListener(transformHelper, eventType, targetMethod, extraArgs) { function addBubblingEventListener(transformHelper, eventType, targetMethod, extraArgs) {
var el = transformHelper.el; var el = transformHelper.el;
if (transformHelper.hasBoundWidgetForTemplate() === false) { if (transformHelper.hasBoundComponentForTemplate() === false) {
transformHelper.addError('Unable to handle event ' + eventType + '. HTML element is not nested within a widget.'); transformHelper.addError('Unable to handle event ' + eventType + '. HTML element is not nested within a component.');
return; return;
} }
var builder = transformHelper.builder; var builder = transformHelper.builder;
var addBubblingEventMethod = builder.memberExpression( var addBubblingEventMethod = builder.memberExpression(
builder.identifier('widget'), builder.identifier('component'),
builder.identifier('d')); builder.identifier('d'));
var addBubblingEventArgs = [ var addBubblingEventArgs = [
@ -46,7 +46,7 @@ function addBubblingEventListener(transformHelper, eventType, targetMethod, extr
if (!transformHelper.context.data[ATTACH_DETACH_KEY]) { if (!transformHelper.context.data[ATTACH_DETACH_KEY]) {
transformHelper.context.data[ATTACH_DETACH_KEY] = true; transformHelper.context.data[ATTACH_DETACH_KEY] = true;
let requireFuncCall = builder.require(builder.literal('marko/widgets/attach-detach')); let requireFuncCall = builder.require(builder.literal('marko/components/attach-detach'));
transformHelper.context.addStaticCode(requireFuncCall); transformHelper.context.addStaticCode(requireFuncCall);
} }
@ -58,16 +58,16 @@ function addDirectEventListener(transformHelper, eventType, targetMethod, extraA
var el = transformHelper.el; var el = transformHelper.el;
var addDomEvent = builder.memberExpression( var addDomEvent = builder.memberExpression(
builder.identifier('widget'), builder.identifier('component'),
builder.identifier('e')); builder.identifier('e'));
let widgetIdInfo = transformHelper.assignWidgetId(true /* repeated */); let componentIdInfo = transformHelper.assignComponentId(true /* repeated */);
let idVarNode = widgetIdInfo.idVarNode ? null : widgetIdInfo.createIdVarNode(); let idVarNode = componentIdInfo.idVarNode ? null : componentIdInfo.createIdVarNode();
var helperArgs = [ var helperArgs = [
eventType, eventType,
targetMethod, targetMethod,
widgetIdInfo.idExpression componentIdInfo.idExpression
]; ];
if (extraArgs) { if (extraArgs) {
@ -87,17 +87,17 @@ function addDirectEventListener(transformHelper, eventType, targetMethod, extraA
function addCustomEventListener(transformHelper, eventType, targetMethod, extraArgs) { function addCustomEventListener(transformHelper, eventType, targetMethod, extraArgs) {
var builder = transformHelper.builder; var builder = transformHelper.builder;
// Make sure the widget has an assigned scope ID so that we can bind the custom event listener // Make sure the component has an assigned scope ID so that we can bind the custom event listener
var widgetArgs = transformHelper.getWidgetArgs(); var componentArgs = transformHelper.getComponentArgs();
if (extraArgs) { if (extraArgs) {
extraArgs = builder.arrayExpression(extraArgs); extraArgs = builder.arrayExpression(extraArgs);
} }
widgetArgs.addCustomEvent(eventType, targetMethod, extraArgs); componentArgs.addCustomEvent(eventType, targetMethod, extraArgs);
} }
module.exports = function handleWidgetEvents() { module.exports = function handleComponentEvents() {
var el = this.el; var el = this.el;
var builder = this.builder; var builder = this.builder;
var context = this.context; var context = this.context;
@ -106,9 +106,9 @@ module.exports = function handleWidgetEvents() {
// have one or more attributes that match the "w-on*" pattern. // have one or more attributes that match the "w-on*" pattern.
// We still need to loop over the properties to find and handle // We still need to loop over the properties to find and handle
// the properties corresponding to those attributes. // the properties corresponding to those attributes.
var hasWidgetEvents = this.el.isFlagSet('hasWidgetEvents') === true; var hasComponentEvents = this.el.isFlagSet('hasComponentEvents') === true;
if (hasWidgetEvents) { if (hasComponentEvents) {
var attrs = el.getAttributes().concat([]); var attrs = el.getAttributes().concat([]);
attrs.forEach((attr) => { attrs.forEach((attr) => {
@ -152,7 +152,7 @@ module.exports = function handleWidgetEvents() {
el.removeAttribute(attrName); el.removeAttribute(attrName);
if (isCustomTag) { if (isCustomTag) {
this.assignWidgetId(true /* repeated */); this.assignComponentId(true /* repeated */);
// We are adding an event listener for a custom event (not a DOM event) // We are adding an event listener for a custom event (not a DOM event)
if (eventType.startsWith('-')) { if (eventType.startsWith('-')) {
@ -192,7 +192,7 @@ module.exports = function handleWidgetEvents() {
// that can be used to handle the event. We will add // that can be used to handle the event. We will add
// a "data-w-on{eventType}" attribute to the output HTML // a "data-w-on{eventType}" attribute to the output HTML
// for this element that will be used to map the event // for this element that will be used to map the event
// to a method on the containing widget. // to a method on the containing component.
addBubblingEventListener(this, eventType, targetMethod, extraArgs); addBubblingEventListener(this, eventType, targetMethod, extraArgs);
} else { } else {
// The event does not bubble so we must attach a DOM // The event does not bubble so we must attach a DOM

16
components/taglib/TransformHelper/handleComponentFor.js
View File

@ -1,29 +1,29 @@
module.exports = function handleWidgetFor() { module.exports = function handleComponentFor() {
var el = this.el; var el = this.el;
var context = this.context; var context = this.context;
var widgetFor; var componentFor;
if (el.hasAttribute('for-ref')) { if (el.hasAttribute('for-ref')) {
context.deprecate('The "for-ref" tag is deprecated. Please use "for-key" instead.'); context.deprecate('The "for-ref" tag is deprecated. Please use "for-key" instead.');
widgetFor = el.getAttributeValue('for-ref'); componentFor = el.getAttributeValue('for-ref');
el.removeAttribute('for-ref'); el.removeAttribute('for-ref');
} else if (el.hasAttribute('for-key')) { } else if (el.hasAttribute('for-key')) {
widgetFor = el.getAttributeValue('for-key'); componentFor = el.getAttributeValue('for-key');
el.removeAttribute('for-key'); el.removeAttribute('for-key');
} }
if (el.hasAttribute('w-for')) { if (el.hasAttribute('w-for')) {
context.deprecate('The "w-for" tag is deprecated. Please use "for-ref" instead.'); context.deprecate('The "w-for" tag is deprecated. Please use "for-ref" instead.');
if (widgetFor) { if (componentFor) {
this.addError('The "w-for" tag cannot be used with "for-ref" or "for-key".'); this.addError('The "w-for" tag cannot be used with "for-ref" or "for-key".');
return; return;
} else { } else {
widgetFor = el.getAttributeValue('w-for'); componentFor = el.getAttributeValue('w-for');
} }
el.removeAttribute('w-for'); el.removeAttribute('w-for');
} }
if (widgetFor == null) { if (componentFor == null) {
return; return;
} }
@ -33,6 +33,6 @@ module.exports = function handleWidgetFor() {
} else { } else {
el.setAttributeValue( el.setAttributeValue(
'for', 'for',
this.buildWidgetElIdFunctionCall(widgetFor)); this.buildComponentElIdFunctionCall(componentFor));
} }
}; };

6
components/taglib/TransformHelper/handleComponentPreserve.js
View File

@ -15,8 +15,8 @@ function addPreserve(transformHelper, bodyOnly, condition) {
preserveAttrs['if'] = condition; preserveAttrs['if'] = condition;
} }
let widgetIdInfo = transformHelper.assignWidgetId(true /* repeated */); let componentIdInfo = transformHelper.assignComponentId(true /* repeated */);
let idVarNode = widgetIdInfo.idVarNode ? null : widgetIdInfo.createIdVarNode(); let idVarNode = componentIdInfo.idVarNode ? null : componentIdInfo.createIdVarNode();
preserveAttrs.id = transformHelper.getIdExpression(); preserveAttrs.id = transformHelper.getIdExpression();
@ -153,7 +153,7 @@ const preserveTypes = [
} }
]; ];
module.exports = function handleWidgetPreserve() { module.exports = function handleComponentPreserve() {
let el = this.el; let el = this.el;
for (let i = 0; i < preserveTypes.length; i++) { for (let i = 0; i < preserveTypes.length; i++) {

4
components/taglib/TransformHelper/handleComponentPreserveAttrs.js
View File

@ -1,6 +1,6 @@
const NO_UPDATE_ATTR_SUFFIX = ':no-update'; const NO_UPDATE_ATTR_SUFFIX = ':no-update';
function handleWidgetPreserveAttrs() { function handleComponentPreserveAttrs() {
var el = this.el; var el = this.el;
var context = this.context; var context = this.context;
var builder = context.builder; var builder = context.builder;
@ -36,4 +36,4 @@ function handleWidgetPreserveAttrs() {
} }
} }
module.exports = handleWidgetPreserveAttrs; module.exports = handleComponentPreserveAttrs;

22
components/taglib/TransformHelper/handleIncludeNode.js
View File

@ -1,11 +1,11 @@
'use strict'; 'use strict';
var includeTagForWidgets = require.resolve('../include-tag'); var includeTagForComponents = require.resolve('../include-tag');
module.exports = function(includeNode) { module.exports = function(includeNode) {
var context = this.context; var context = this.context;
if (!this.hasBoundWidgetForTemplate()) { if (!this.hasBoundComponentForTemplate()) {
return; return;
} }
@ -19,26 +19,26 @@ module.exports = function(includeNode) {
if (parentNode.childCount === 1) { if (parentNode.childCount === 1) {
if (includeNode.hasAttribute('key') || includeNode.hasAttribute('ref')) { if (includeNode.hasAttribute('key') || includeNode.hasAttribute('ref')) {
this.assignWidgetId(); this.assignComponentId();
} }
let parentTransformHelper = this.getTransformHelper(parentNode); let parentTransformHelper = this.getTransformHelper(parentNode);
if (includeNode.data.bodySlot) { if (includeNode.data.bodySlot) {
parentTransformHelper.assignWidgetId(false /* not repeated */); parentTransformHelper.assignComponentId(false /* not repeated */);
var widgetProps = this.getWidgetProps(); var componentProps = this.getComponentProps();
widgetProps.body = parentTransformHelper.getNestedIdExpression(); componentProps.body = parentTransformHelper.getNestedIdExpression();
} else { } else {
let widgetIdInfo = parentTransformHelper.assignWidgetId(true /* repeated */); let componentIdInfo = parentTransformHelper.assignComponentId(true /* repeated */);
if (!widgetIdInfo.idVarNode) { if (!componentIdInfo.idVarNode) {
let idVarNode = widgetIdInfo.createIdVarNode(); let idVarNode = componentIdInfo.createIdVarNode();
parentNode.onBeforeGenerateCode((event) => { parentNode.onBeforeGenerateCode((event) => {
event.insertCode(idVarNode); event.insertCode(idVarNode);
}); });
} }
} }
includeNode.setRendererPath(includeTagForWidgets); includeNode.setRendererPath(includeTagForComponents);
includeNode.onBeforeGenerateCode(function() { includeNode.onBeforeGenerateCode(function() {
includeNode.addProp('_elId', parentTransformHelper.getIdExpression()); includeNode.addProp('_elId', parentTransformHelper.getIdExpression());
@ -55,7 +55,7 @@ module.exports = function(includeNode) {
// data = builder.literal(null); // data = builder.literal(null);
// } // }
// //
// let includeVar = context.importModule('marko_widget_include', this.getMarkoWidgetsRequirePath('marko/widgets/taglib/helpers/include')); // let includeVar = context.importModule('marko_component_include', this.getMarkoComponentsRequirePath('marko/components/taglib/helpers/include'));
// //
// let includeArgs = [ // let includeArgs = [
// target, // target,

18
components/taglib/TransformHelper/handleRootNodes.js
View File

@ -94,7 +94,7 @@ function handleScriptElement(scriptEl, transformHelper) {
componentVar = builder.identifier('marko_component'); componentVar = builder.identifier('marko_component');
} }
transformHelper.setHasBoundWidgetForTemplate(); transformHelper.setHasBoundComponentForTemplate();
transformHelper.setInlineComponent(componentVar); transformHelper.setInlineComponent(componentVar);
transformHelper.context.addStaticCode(escodegen.generate(updatedTree)); transformHelper.context.addStaticCode(escodegen.generate(updatedTree));
scriptEl.detach(); scriptEl.detach();
@ -216,7 +216,7 @@ function handleClassDeclaration(classEl, transformHelper) {
let object = classToObject(expression); let object = classToObject(expression);
let componentVar = transformHelper.context.addStaticVar('marko_component', escodegen.generate(object)); let componentVar = transformHelper.context.addStaticVar('marko_component', escodegen.generate(object));
transformHelper.setHasBoundWidgetForTemplate(); transformHelper.setHasBoundComponentForTemplate();
transformHelper.setInlineComponent(componentVar); transformHelper.setInlineComponent(componentVar);
classEl.detach(); classEl.detach();
} }
@ -234,7 +234,7 @@ module.exports = function handleRootNodes() {
var filematch = '('+filename.replace(/\./g, '\\.') + '\\.' + (isEntry ? '|' : '') + ')'; var filematch = '('+filename.replace(/\./g, '\\.') + '\\.' + (isEntry ? '|' : '') + ')';
var stylematch = new RegExp('^'+filematch+'style\\.\\w+$'); var stylematch = new RegExp('^'+filematch+'style\\.\\w+$');
var componentmatch = new RegExp('^'+filematch+'component\\.\\w+$'); var componentmatch = new RegExp('^'+filematch+'component\\.\\w+$');
var widgetmatch = new RegExp('^'+filematch+'widget\\.\\w+$'); var componentmatch = new RegExp('^'+filematch+'component\\.\\w+$');
var templateRoot = this.el; var templateRoot = this.el;
@ -244,9 +244,9 @@ module.exports = function handleRootNodes() {
fs.readdirSync(dirname).forEach(file => { fs.readdirSync(dirname).forEach(file => {
if(stylematch.test(file)) { if(stylematch.test(file)) {
context.addDependency('./' + file); context.addDependency('./' + file);
} else if(componentmatch.test(file) || widgetmatch.test(file)) { } else if(componentmatch.test(file) || componentmatch.test(file)) {
hasBindTarget = true; hasBindTarget = true;
this.context.data.widgetModule = './'+file.slice(0, file.lastIndexOf('.')); this.context.data.componentModule = './'+file.slice(0, file.lastIndexOf('.'));
} }
}); });
@ -265,7 +265,7 @@ module.exports = function handleRootNodes() {
// Don't worry about the TemplateRoot or an Container node // Don't worry about the TemplateRoot or an Container node
} else if (node.type === 'HtmlElement') { } else if (node.type === 'HtmlElement') {
if (node.hasAttribute('w-bind')) { if (node.hasAttribute('w-bind')) {
transformHelper.setHasBoundWidgetForTemplate(); transformHelper.setHasBoundComponentForTemplate();
hasExplicitBind = true; hasExplicitBind = true;
} else { } else {
if (node.hasAttribute('id')) { if (node.hasAttribute('id')) {
@ -321,17 +321,17 @@ module.exports = function handleRootNodes() {
} }
if (rootNodes.length > 1 && hasIdCount > 0) { if (rootNodes.length > 1 && hasIdCount > 0) {
// We can only bind a widget to multiple top-level elements if we can assign // We can only bind a component to multiple top-level elements if we can assign
// all of the IDs // all of the IDs
return; return;
} }
transformHelper.setHasBoundWidgetForTemplate(); transformHelper.setHasBoundComponentForTemplate();
var nextKey = 0; var nextKey = 0;
rootNodes.forEach((curNode, i) => { rootNodes.forEach((curNode, i) => {
curNode.setAttributeValue('_widgetbind'); curNode.setAttributeValue('_componentbind');
if (!curNode.hasAttribute('key') && !curNode.hasAttribute('ref')) { if (!curNode.hasAttribute('key') && !curNode.hasAttribute('ref')) {
if (curNode.type === 'CustomTag' || rootNodes.length > 1) { if (curNode.type === 'CustomTag' || rootNodes.length > 1) {

102
components/taglib/TransformHelper/index.js
View File

@ -1,7 +1,7 @@
'use strict'; 'use strict';
var WidgetArgs = require('./WidgetArgs'); var ComponentArgs = require('./ComponentArgs');
var getRequirePath = require('../getRequirePath'); var getRequirePath = require('../getRequirePath');
var buildWidgetTypeNode = require('../util/buildWidgetTypeNode'); var buildComponentTypeNode = require('../util/buildComponentTypeNode');
var resolveFrom = require('resolve-from'); var resolveFrom = require('resolve-from');
var INLINE_COMPONENT_KEY = Symbol('INLINE_COMPONENT'); var INLINE_COMPONENT_KEY = Symbol('INLINE_COMPONENT');
var MARKO_WIDGETS_VAR_KEY = Symbol('MARKO_WIDGETS_VAR'); var MARKO_WIDGETS_VAR_KEY = Symbol('MARKO_WIDGETS_VAR');
@ -15,82 +15,82 @@ class TransformHelper {
this.builder = context.builder; this.builder = context.builder;
this.dirname = context.dirname; this.dirname = context.dirname;
this.widgetNextElId = 0; this.componentNextElId = 0;
this.widgetArgs = undefined; this.componentArgs = undefined;
this.containingWidgetNode = undefined; this.containingComponentNode = undefined;
this._markoWidgetsVar = context.data.markoWidgetsVar; this._markoComponentsVar = context.data.markoComponentsVar;
this.firstBind = false; this.firstBind = false;
} }
setHasBoundWidgetForTemplate() { setHasBoundComponentForTemplate() {
this.context.data[HAS_WIDGET_KEY] = true; this.context.data[HAS_WIDGET_KEY] = true;
} }
hasBoundWidgetForTemplate() { hasBoundComponentForTemplate() {
return this.context.data[HAS_WIDGET_KEY] || this.context.data[WIDGET_PROPS_KEY] != null; return this.context.data[HAS_WIDGET_KEY] || this.context.data[WIDGET_PROPS_KEY] != null;
} }
getWidgetProps() { getComponentProps() {
var widgetProps = this.context.data[WIDGET_PROPS_KEY]; var componentProps = this.context.data[WIDGET_PROPS_KEY];
if (!widgetProps) { if (!componentProps) {
this.firstBind = true; this.firstBind = true;
widgetProps = this.context.data[WIDGET_PROPS_KEY] = {}; componentProps = this.context.data[WIDGET_PROPS_KEY] = {};
} }
return widgetProps; return componentProps;
} }
addError(message, code) { addError(message, code) {
this.context.addError(this.el, message, code); this.context.addError(this.el, message, code);
} }
getWidgetArgs() { getComponentArgs() {
return this.widgetArgs || (this.widgetArgs = new WidgetArgs()); return this.componentArgs || (this.componentArgs = new ComponentArgs());
} }
nextUniqueId() { nextUniqueId() {
var widgetNextElId = this.context.data.widgetNextElId; var componentNextElId = this.context.data.componentNextElId;
if (widgetNextElId == null) { if (componentNextElId == null) {
this.context.data.widgetNextElId = 0; this.context.data.componentNextElId = 0;
} }
return (this.context.data.widgetNextElId++); return (this.context.data.componentNextElId++);
} }
getNestedIdExpression() { getNestedIdExpression() {
this.assignWidgetId(); this.assignComponentId();
return this.getWidgetIdInfo().nestedIdExpression; return this.getComponentIdInfo().nestedIdExpression;
} }
getIdExpression() { getIdExpression() {
this.assignWidgetId(); this.assignComponentId();
return this.getWidgetIdInfo().idExpression; return this.getComponentIdInfo().idExpression;
} }
set widgetIdInfo(value) { set componentIdInfo(value) {
this.el.data.widgetIdInfo = value; this.el.data.componentIdInfo = value;
} }
get widgetIdInfo() { get componentIdInfo() {
return this.el.data.widgetIdInfo; return this.el.data.componentIdInfo;
} }
getWidgetIdInfo() { getComponentIdInfo() {
return this.widgetIdInfo; return this.componentIdInfo;
} }
getCompileContext() { getCompileContext() {
return this.context; return this.context;
} }
getDefaultWidgetModule() { getDefaultComponentModule() {
var dirname = this.dirname; var dirname = this.dirname;
if (this.context.data.widgetModule) { if (this.context.data.componentModule) {
return this.context.data.widgetModule; return this.context.data.componentModule;
} else if (resolveFrom(dirname, './component')) {
return './component';
} else if (resolveFrom(dirname, './component')) { } else if (resolveFrom(dirname, './component')) {
return './component'; return './component';
} else if (resolveFrom(dirname, './widget')) {
return './widget';
} else if (resolveFrom(dirname, './')) { } else if (resolveFrom(dirname, './')) {
return './'; return './';
} else { } else {
@ -98,37 +98,37 @@ class TransformHelper {
} }
} }
getMarkoWidgetsRequirePath(target) { getMarkoComponentsRequirePath(target) {
return getRequirePath(target, this.context); return getRequirePath(target, this.context);
} }
set markoWidgetsVar(value) { set markoComponentsVar(value) {
this.context.data[MARKO_WIDGETS_VAR_KEY] = value; this.context.data[MARKO_WIDGETS_VAR_KEY] = value;
} }
get markoWidgetsVar() { get markoComponentsVar() {
if (!this.context.data[MARKO_WIDGETS_VAR_KEY]) { if (!this.context.data[MARKO_WIDGETS_VAR_KEY]) {
this.context.data[MARKO_WIDGETS_VAR_KEY] = this.context.data[MARKO_WIDGETS_VAR_KEY] =
this.context.importModule( this.context.importModule(
'marko_widgets', 'marko_components',
this.getMarkoWidgetsRequirePath(this.isLegacyWidget ? 'marko/widgets/legacy' : 'marko/widgets')); this.getMarkoComponentsRequirePath(this.isLegacyComponent ? 'marko/components/legacy' : 'marko/components'));
} }
return this.context.data[MARKO_WIDGETS_VAR_KEY]; return this.context.data[MARKO_WIDGETS_VAR_KEY];
} }
buildWidgetElIdFunctionCall(id) { buildComponentElIdFunctionCall(id) {
var builder = this.builder; var builder = this.builder;
var widgetElId = builder.memberExpression( var componentElId = builder.memberExpression(
builder.identifier('widget'), builder.identifier('component'),
builder.identifier('elId')); builder.identifier('elId'));
return builder.functionCall(widgetElId, arguments.length === 0 ? [] : [ id ]); return builder.functionCall(componentElId, arguments.length === 0 ? [] : [ id ]);
} }
buildWidgetTypeNode(path, def) { buildComponentTypeNode(path, def) {
return buildWidgetTypeNode(path, this.dirname, def, this); return buildComponentTypeNode(path, this.dirname, def, this);
} }
getTransformHelper(el) { getTransformHelper(el) {
@ -148,13 +148,13 @@ class TransformHelper {
} }
} }
TransformHelper.prototype.assignWidgetId = require('./assignWidgetId'); TransformHelper.prototype.assignComponentId = require('./assignComponentId');
TransformHelper.prototype.handleRootNodes = require('./handleRootNodes'); TransformHelper.prototype.handleRootNodes = require('./handleRootNodes');
TransformHelper.prototype.handleIncludeNode = require('./handleIncludeNode'); TransformHelper.prototype.handleIncludeNode = require('./handleIncludeNode');
TransformHelper.prototype.handleWidgetEvents = require('./handleWidgetEvents'); TransformHelper.prototype.handleComponentEvents = require('./handleComponentEvents');
TransformHelper.prototype.handleWidgetPreserve = require('./handleWidgetPreserve'); TransformHelper.prototype.handleComponentPreserve = require('./handleComponentPreserve');
TransformHelper.prototype.handleWidgetPreserveAttrs = require('./handleWidgetPreserveAttrs'); TransformHelper.prototype.handleComponentPreserveAttrs = require('./handleComponentPreserveAttrs');
TransformHelper.prototype.handleWidgetBind = require('./handleWidgetBind'); TransformHelper.prototype.handleComponentBind = require('./handleComponentBind');
TransformHelper.prototype.handleWidgetFor = require('./handleWidgetFor'); TransformHelper.prototype.handleComponentFor = require('./handleComponentFor');
module.exports = TransformHelper; module.exports = TransformHelper;

4
components/taglib/body-transformer.js
View File

@ -6,6 +6,6 @@ module.exports = function transform(el, context) {
let awaitReorderer = context.createNodeForEl('await-reorderer'); let awaitReorderer = context.createNodeForEl('await-reorderer');
el.appendChild(awaitReorderer); el.appendChild(awaitReorderer);
let initWidgetsNode = context.createNodeForEl('init-widgets'); let initComponentsNode = context.createNodeForEl('init-components');
el.appendChild(initWidgetsNode); el.appendChild(initComponentsNode);
}; };

14
components/taglib/component-tag.js
View File

@ -7,25 +7,25 @@ module.exports = function codeGenerator(el, codegen) {
var bodyFunc = builder.renderBodyFunction(el.body, [ var bodyFunc = builder.renderBodyFunction(el.body, [
builder.identifierOut(), builder.identifierOut(),
builder.identifier('widget'), builder.identifier('component'),
builder.identifier('state') builder.identifier('state')
]); ]);
var widgetProps = el.getAttributeValue('props'); var componentProps = el.getAttributeValue('props');
var bindWidgetVar = context.addStaticVar('marko_bindWidget', var bindComponentVar = context.addStaticVar('marko_bindComponent',
builder.require( builder.require(
builder.literal('marko/widgets/taglib/helpers/bindWidget'))); builder.literal('marko/components/taglib/helpers/bindComponent')));
if (context.data[BIND_WIDGET_KEY] == null) { if (context.data[BIND_WIDGET_KEY] == null) {
context.data[BIND_WIDGET_KEY] = 0; context.data[BIND_WIDGET_KEY] = 0;
} }
var varName = context.addStaticVar( var varName = context.addStaticVar(
'marko_bindWidget' + (context.data[BIND_WIDGET_KEY]++), 'marko_bindComponent' + (context.data[BIND_WIDGET_KEY]++),
builder.functionCall(bindWidgetVar, [ builder.functionCall(bindComponentVar, [
widgetProps componentProps
])); ]));
return builder.functionCall(varName, [bodyFunc, builder.identifierOut()]); return builder.functionCall(varName, [bodyFunc, builder.identifierOut()]);

8
components/taglib/component-types-tag.js
View File

@ -4,7 +4,7 @@ module.exports = function codeGenerator(el, codegen) {
var context = codegen.context; var context = codegen.context;
var transformHelper = getTransformHelper(el, context); var transformHelper = getTransformHelper(el, context);
transformHelper.isLegacyWidget = true; transformHelper.isLegacyComponent = true;
var builder = codegen.builder; var builder = codegen.builder;
@ -14,14 +14,14 @@ module.exports = function codeGenerator(el, codegen) {
attrs.forEach((attr) => { attrs.forEach((attr) => {
if (!attr.isLiteralString()) { if (!attr.isLiteralString()) {
codegen.addError('Widget type should be a string'); codegen.addError('Component type should be a string');
return; return;
} }
typesObject[attr.name] = transformHelper.buildWidgetTypeNode(attr.literalValue); typesObject[attr.name] = transformHelper.buildComponentTypeNode(attr.literalValue);
}); });
codegen.addStaticVar('marko_widgetTypes', builder.literal(typesObject)); codegen.addStaticVar('marko_componentTypes', builder.literal(typesObject));
return null; return null;
}; };

36
components/taglib/components-transformer.js
View File

@ -19,7 +19,7 @@ module.exports = function transform(el, context) {
if (!bodyValue) { if (!bodyValue) {
bodyValue = builder.memberExpression( bodyValue = builder.memberExpression(
builder.identifier('widget'), builder.identifier('component'),
builder.identifier('b')); builder.identifier('b'));
includeNode.data.bodySlot = true; includeNode.data.bodySlot = true;
@ -29,11 +29,11 @@ module.exports = function transform(el, context) {
el.appendChild(includeNode); el.appendChild(includeNode);
} }
if (el.tagName === 'widget-types') { if (el.tagName === 'component-types') {
context.setFlag('hasWidgetTypes'); context.setFlag('hasComponentTypes');
} else if (el.tagName === 'include') { } else if (el.tagName === 'include') {
transformHelper.handleIncludeNode(el); transformHelper.handleIncludeNode(el);
transformHelper.getWidgetArgs().compile(transformHelper); transformHelper.getComponentArgs().compile(transformHelper);
return; return;
} }
@ -42,9 +42,9 @@ module.exports = function transform(el, context) {
return; return;
} }
if (el.hasAttribute('_widgetbind') || el.hasAttribute('w-bind')) { if (el.hasAttribute('_componentbind') || el.hasAttribute('w-bind')) {
el.setFlag('hasWidgetBind'); el.setFlag('hasComponentBind');
transformHelper.handleWidgetBind(); transformHelper.handleComponentBind();
} }
if (/* New preserve attributes */ if (/* New preserve attributes */
@ -57,32 +57,32 @@ module.exports = function transform(el, context) {
el.hasAttribute('w-preserve-body') || el.hasAttribute('w-preserve-body') ||
el.hasAttribute('w-preserve-if') || el.hasAttribute('w-preserve-if') ||
el.hasAttribute('w-preserve-body-if')) { el.hasAttribute('w-preserve-body-if')) {
transformHelper.handleWidgetPreserve(); transformHelper.handleComponentPreserve();
} }
if (el.hasAttribute('key') || el.hasAttribute('ref') || el.hasAttribute('w-id')) { if (el.hasAttribute('key') || el.hasAttribute('ref') || el.hasAttribute('w-id')) {
transformHelper.assignWidgetId(); transformHelper.assignComponentId();
} }
if (el.hasAttribute('for-key') || el.hasAttribute('for-ref') || el.hasAttribute('w-for')) { if (el.hasAttribute('for-key') || el.hasAttribute('for-ref') || el.hasAttribute('w-for')) {
transformHelper.handleWidgetFor(); transformHelper.handleComponentFor();
} }
if (el.hasAttribute('w-body')) { if (el.hasAttribute('w-body')) {
transformHelper.handleWidgetBody(); transformHelper.handleComponentBody();
} }
// Handle w-preserve-attrs and :no-update attributes // Handle w-preserve-attrs and :no-update attributes
transformHelper.handleWidgetPreserveAttrs(); transformHelper.handleComponentPreserveAttrs();
// Handle w-on* properties // Handle w-on* properties
transformHelper.handleWidgetEvents(); transformHelper.handleComponentEvents();
// If we need to pass any information to a nested widget then // If we need to pass any information to a nested component then
// we start that information in the "out" so that it can be picked // we start that information in the "out" so that it can be picked
// up later by the nested widget. We call this "widget args" and // up later by the nested component. We call this "component args" and
// we generate compiled code that stores the widget args in the out // we generate compiled code that stores the component args in the out
// for the next widget and then we also insert cleanup code to remove // for the next component and then we also insert cleanup code to remove
// the data out of the out // the data out of the out
transformHelper.getWidgetArgs().compile(transformHelper); transformHelper.getComponentArgs().compile(transformHelper);
}; };

10
components/taglib/helpers/bindComponent.js
View File

@ -1,14 +1,14 @@
var createRendererFunc = require('../../renderer'); var createRendererFunc = require('../../renderer');
module.exports = function(widgetProps) { module.exports = function(componentProps) {
var renderer = createRendererFunc( var renderer = createRendererFunc(
function(data, out, widget, state) { function(data, out, component, state) {
data.$renderBody(out, widget, state); data.$renderBody(out, component, state);
}, },
widgetProps, componentProps,
null); null);
return function bindWidget(renderBody, out) { return function bindComponent(renderBody, out) {
renderer({ renderer({
$renderBody: renderBody $renderBody: renderBody
}, out); }, out);

8
components/taglib/helpers/componentArgs.js
View File

@ -1,10 +1,10 @@
var widgetArgsHelper = module.exports = function widgetArgsHelper( var componentArgsHelper = module.exports = function componentArgsHelper(
out, out,
widgetArgs) { componentArgs) {
out.data.$w = widgetArgs; out.data.$w = componentArgs;
}; };
widgetArgsHelper.cleanup = function(out) { componentArgsHelper.cleanup = function(out) {
delete out.data.$w; delete out.data.$w;
}; };

20
components/taglib/helpers/getCurrentComponent.js
View File

@ -1,17 +1,17 @@
/** /**
* Helper method to return the WidgetDef for the current widget being rendered. * Helper method to return the ComponentDef for the current component being rendered.
* This is, it returns the widget at the top of the widget stack. * This is, it returns the component at the top of the component stack.
* @param {AsyncWriter} out The current rendering context that holds info about rendered widgets. * @param {AsyncWriter} out The current rendering context that holds info about rendered components.
* @return {WidgetDef} The WidgetDef instance * @return {ComponentDef} The ComponentDef instance
*/ */
module.exports = function getCurrentWidget(out) { module.exports = function getCurrentComponent(out) {
var widgetsContext = out.global.widgets; var componentsContext = out.global.components;
var widgetStack; var componentStack;
var len; var len;
if (!widgetsContext || (len = (widgetStack = widgetsContext.$__widgetStack).length) < 2) { if (!componentsContext || (len = (componentStack = componentsContext.$__componentStack).length) < 2) {
throw Error('No widget found'); throw Error('No component found');
} }
return widgetStack[len - 1]; return componentStack[len - 1];
}; };

2
components/taglib/helpers/package.json
View File

@ -1,5 +1,5 @@
{ {
"browser": { "browser": {
"./getDynamicClientWidgetPath.js": "./getDynamicClientWidgetPath-browser.js" "./getDynamicClientComponentPath.js": "./getDynamicClientComponentPath-browser.js"
} }
} }

6
components/taglib/include-tag.js
View File

@ -1,5 +1,5 @@
var normalInclude = require('../../taglibs/core/include-tag'); var normalInclude = require('../../taglibs/core/include-tag');
var WidgetsContext = require('../WidgetsContext'); var ComponentsContext = require('../ComponentsContext');
var getElementById = require('../util').$__getElementById; var getElementById = require('../util').$__getElementById;
module.exports = function include(input, out) { module.exports = function include(input, out) {
@ -14,8 +14,8 @@ module.exports = function include(input, out) {
// the existing body content in the DOM // the existing body content in the DOM
var existingEl = getElementById(out.$__document, elId); var existingEl = getElementById(out.$__document, elId);
if (existingEl) { if (existingEl) {
var widgetsContext = WidgetsContext.$__getWidgetsContext(out); var componentsContext = ComponentsContext.$__getComponentsContext(out);
widgetsContext.$__preserveDOMNode(elId, true /* body only */); componentsContext.$__preserveDOMNode(elId, true /* body only */);
} }
} }
}; };

20
components/taglib/init-components-tag.js
View File

@ -1,7 +1,7 @@
const INIT_WIDGET_KEY = Symbol(); const INIT_WIDGET_KEY = Symbol();
var writeInitWidgetsCode = require('../').writeInitWidgetsCode; var writeInitComponentsCode = require('../').writeInitComponentsCode;
var WidgetsContext = require('../WidgetsContext'); var ComponentsContext = require('../ComponentsContext');
module.exports = function render(input, out) { module.exports = function render(input, out) {
var global = out.global; var global = out.global;
@ -11,27 +11,27 @@ module.exports = function render(input, out) {
out.on('await:beforeRender', function(eventArgs) { out.on('await:beforeRender', function(eventArgs) {
if (eventArgs.clientReorder) { if (eventArgs.clientReorder) {
var asyncFragmentOut = eventArgs.out; var asyncFragmentOut = eventArgs.out;
asyncFragmentOut.data.widgets = new WidgetsContext(asyncFragmentOut); asyncFragmentOut.data.components = new ComponentsContext(asyncFragmentOut);
} }
}); });
out.on('await:finish', function(eventArgs) { out.on('await:finish', function(eventArgs) {
var asyncFragmentOut = eventArgs.out; var asyncFragmentOut = eventArgs.out;
var widgetsContext = asyncFragmentOut.data.widgets || asyncFragmentOut.global.widgets; var componentsContext = asyncFragmentOut.data.components || asyncFragmentOut.global.components;
if (widgetsContext) { if (componentsContext) {
writeInitWidgetsCode(widgetsContext, asyncFragmentOut); writeInitComponentsCode(componentsContext, asyncFragmentOut);
} }
}); });
if (out.isSync()) { if (out.isSync()) {
var widgetsContext = WidgetsContext.$__getWidgetsContext(out); var componentsContext = ComponentsContext.$__getComponentsContext(out);
writeInitWidgetsCode(widgetsContext, out); writeInitComponentsCode(componentsContext, out);
} else { } else {
var asyncOut = out.beginAsync({ last: true, timeout: -1 }); var asyncOut = out.beginAsync({ last: true, timeout: -1 });
out.onLast(function(next) { out.onLast(function(next) {
var widgetsContext = WidgetsContext.$__getWidgetsContext(out); var componentsContext = ComponentsContext.$__getComponentsContext(out);
writeInitWidgetsCode(widgetsContext, asyncOut); writeInitComponentsCode(componentsContext, asyncOut);
asyncOut.end(); asyncOut.end();
next(); next();
}); });

34
components/taglib/marko.json
View File

@ -32,10 +32,10 @@
{ {
"displayText": "key=\"<method>\"", "displayText": "key=\"<method>\"",
"snippet": "key=\"${1:method}\"", "snippet": "key=\"${1:method}\"",
"descriptionMoreURL": "http://markojs.com/docs/marko-widgets/get-started/#referencing-nested-widgets" "descriptionMoreURL": "http://markojs.com/docs/marko-components/get-started/#referencing-nested-components"
}, },
{ {
"descriptionMoreURL": "http://markojs.com/docs/marko-widgets/get-started/#referencing-nested-widgets" "descriptionMoreURL": "http://markojs.com/docs/marko-components/get-started/#referencing-nested-components"
} }
] ]
}, },
@ -68,12 +68,12 @@
"type": "statement", "type": "statement",
"allow-expressions": true, "allow-expressions": true,
"preserve-name": true, "preserve-name": true,
"set-flag": "hasWidgetEvents", "set-flag": "hasComponentEvents",
"autocomplete": [ "autocomplete": [
{ {
"displayText": "on<event>(\"<method>\")", "displayText": "on<event>(\"<method>\")",
"snippet": "on${1:Click}(\"handle${2:Button}${1:Click}\")", "snippet": "on${1:Click}(\"handle${2:Button}${1:Click}\")",
"descriptionMoreURL": "http://markojs.com/docs/marko-widgets/get-started/#adding-dom-event-listeners" "descriptionMoreURL": "http://markojs.com/docs/marko-components/get-started/#adding-dom-event-listeners"
} }
] ]
}, },
@ -82,7 +82,7 @@
"type": "string", "type": "string",
"allow-expressions": true, "allow-expressions": true,
"preserve-name": true, "preserve-name": true,
"set-flag": "hasWidgetEvents", "set-flag": "hasComponentEvents",
"autocomplete": [], "autocomplete": [],
"deprecated": true "deprecated": true
}, },
@ -117,7 +117,7 @@
"preserve-name": true, "preserve-name": true,
"autocomplete": [ "autocomplete": [
{ {
"descriptionMoreURL": "http://markojs.com/docs/marko-widgets/#preserving-dom-nodes-during-re-render" "descriptionMoreURL": "http://markojs.com/docs/marko-components/#preserving-dom-nodes-during-re-render"
} }
] ]
}, },
@ -126,7 +126,7 @@
"preserve-name": true, "preserve-name": true,
"autocomplete": [ "autocomplete": [
{ {
"descriptionMoreURL": "http://markojs.com/docs/marko-widgets/#preserving-dom-nodes-during-re-render" "descriptionMoreURL": "http://markojs.com/docs/marko-components/#preserving-dom-nodes-during-re-render"
} }
] ]
}, },
@ -135,7 +135,7 @@
"autocomplete": [ "autocomplete": [
{ {
"snippet": "no-update-if(${1:condition})", "snippet": "no-update-if(${1:condition})",
"descriptionMoreURL": "http://markojs.com/docs/marko-widgets/#preserving-dom-nodes-during-re-render" "descriptionMoreURL": "http://markojs.com/docs/marko-components/#preserving-dom-nodes-during-re-render"
} }
] ]
}, },
@ -144,7 +144,7 @@
"autocomplete": [ "autocomplete": [
{ {
"snippet": "no-update-body-if(${1:condition})", "snippet": "no-update-body-if(${1:condition})",
"descriptionMoreURL": "http://markojs.com/docs/marko-widgets/#preserving-dom-nodes-during-re-render" "descriptionMoreURL": "http://markojs.com/docs/marko-components/#preserving-dom-nodes-during-re-render"
} }
] ]
}, },
@ -154,14 +154,14 @@
"autocomplete": [], "autocomplete": [],
"deprecated": true "deprecated": true
}, },
"transformer": "./widgets-transformer.js" "transformer": "./components-transformer.js"
}, },
"<_widget>": { "<_component>": {
"code-generator": "./widget-tag.js", "code-generator": "./component-tag.js",
"autocomplete": [] "autocomplete": []
}, },
"<init-widgets>": { "<init-components>": {
"renderer": "./init-widgets-tag.js", "renderer": "./init-components-tag.js",
"@immediate": "boolean" "@immediate": "boolean"
}, },
"<w-preserve>": { "<w-preserve>": {
@ -179,8 +179,8 @@
"@body-only": "expression", "@body-only": "expression",
"autocomplete": [] "autocomplete": []
}, },
"<widget-types>": { "<component-types>": {
"code-generator": "./widget-types-tag.js", "code-generator": "./component-types-tag.js",
"@*": "string", "@*": "string",
"autocomplete": [], "autocomplete": [],
"deprecated": true "deprecated": true
@ -188,5 +188,5 @@
"<body>": { "<body>": {
"transformer": "./body-transformer.js" "transformer": "./body-transformer.js"
}, },
"transformer": "./widgets-transformer.js" "transformer": "./components-transformer.js"
} }

6
components/taglib/preserve-tag.js
View File

@ -1,4 +1,4 @@
var WidgetsContext = require('../WidgetsContext'); var ComponentsContext = require('../ComponentsContext');
var getElementById = require('../util').$__getElementById; var getElementById = require('../util').$__getElementById;
module.exports = function render(input, out) { module.exports = function render(input, out) {
@ -16,7 +16,7 @@ module.exports = function render(input, out) {
if (condition !== false) { if (condition !== false) {
var existingEl = getElementById(out.$__document, id); var existingEl = getElementById(out.$__document, id);
if (existingEl) { if (existingEl) {
var widgetsContext = WidgetsContext.$__getWidgetsContext(out); var componentsContext = ComponentsContext.$__getComponentsContext(out);
var bodyOnly = input.bodyOnly === true; var bodyOnly = input.bodyOnly === true;
// Don't actually render anything since the element is already in the DOM, // Don't actually render anything since the element is already in the DOM,
// but keep track that the node is being preserved so that we can ignore // but keep track that the node is being preserved so that we can ignore
@ -31,7 +31,7 @@ module.exports = function render(input, out) {
out.element(tagName, { id: id }); out.element(tagName, { id: id });
} }
widgetsContext.$__preserveDOMNode(id, bodyOnly); componentsContext.$__preserveDOMNode(id, bodyOnly);
return; return;
} }
} }

18
components/taglib/util/buildComponentTypeNode.js
View File

@ -4,7 +4,7 @@ var resolveFrom = tryRequire('resolve-from', require);
var nodePath = require('path'); var nodePath = require('path');
var ok = require('assert').ok; var ok = require('assert').ok;
module.exports = function buildWidgetTypeNode(path, from, def, transformHelper) { module.exports = function buildComponentTypeNode(path, from, def, transformHelper) {
ok(typeof path === 'string', '"path" should be a string'); ok(typeof path === 'string', '"path" should be a string');
ok(typeof from === 'string', '"from" should be a string'); ok(typeof from === 'string', '"from" should be a string');
@ -12,15 +12,15 @@ module.exports = function buildWidgetTypeNode(path, from, def, transformHelper)
var builder = context.builder; var builder = context.builder;
var registerWidget = context.addStaticVar('marko_registerWidget', var registerComponent = context.addStaticVar('marko_registerComponent',
builder.memberExpression(transformHelper.markoWidgetsVar, builder.identifier('rw'))); builder.memberExpression(transformHelper.markoComponentsVar, builder.identifier('rw')));
var typeName; var typeName;
if (lassoModulesClientTransport) { if (lassoModulesClientTransport) {
var targetPath = resolveFrom(from, path); var targetPath = resolveFrom(from, path);
if (!targetPath) { if (!targetPath) {
throw new Error('Widget module not found: ' + path + ' (from ' + from + ')'); throw new Error('Component module not found: ' + path + ' (from ' + from + ')');
} }
typeName = lassoModulesClientTransport.getClientPath(targetPath); typeName = lassoModulesClientTransport.getClientPath(targetPath);
} else { } else {
@ -30,11 +30,11 @@ module.exports = function buildWidgetTypeNode(path, from, def, transformHelper)
if (!def) { if (!def) {
var returnValue = builder.require(builder.literal(path)); var returnValue = builder.require(builder.literal(path));
if (transformHelper.isLegacyWidget) { if (transformHelper.isLegacyComponent) {
var defineWidget = context.addStaticVar('marko_defineWidget', var defineComponent = context.addStaticVar('marko_defineComponent',
builder.memberExpression(transformHelper.markoWidgetsVar, builder.identifier('w'))); builder.memberExpression(transformHelper.markoComponentsVar, builder.identifier('w')));
returnValue = builder.functionCall(defineWidget, [returnValue]); returnValue = builder.functionCall(defineComponent, [returnValue]);
} }
def = builder.functionDeclaration(null, [] /* params */, [ def = builder.functionDeclaration(null, [] /* params */, [
@ -42,7 +42,7 @@ module.exports = function buildWidgetTypeNode(path, from, def, transformHelper)
]); ]);
} }
return builder.functionCall(registerWidget, [ return builder.functionCall(registerComponent, [
builder.literal(typeName), builder.literal(typeName),
def def
]); ]);

38
components/update-manager.js
View File

@ -33,12 +33,12 @@ if (!setImmediate) {
/** /**
* This function is called when we schedule the update of "unbatched" * This function is called when we schedule the update of "unbatched"
* updates to widgets. * updates to components.
*/ */
function updateUnbatchedWidgets() { function updateUnbatchedComponents() {
if (unbatchedQueue.length) { if (unbatchedQueue.length) {
try { try {
updateWidgets(unbatchedQueue); updateComponents(unbatchedQueue);
} finally { } finally {
// Reset the flag now that this scheduled batch update // Reset the flag now that this scheduled batch update
// is complete so that we can later schedule another // is complete so that we can later schedule another
@ -57,16 +57,16 @@ function scheduleUpdates() {
updatesScheduled = true; updatesScheduled = true;
setImmediate(updateUnbatchedWidgets); setImmediate(updateUnbatchedComponents);
} }
function updateWidgets(queue) { function updateComponents(queue) {
// Loop over the widgets in the queue and update them. // Loop over the components in the queue and update them.
// NOTE: It is okay if the queue grows during the iteration // NOTE: It is okay if the queue grows during the iteration
// since we will still get to them at the end // since we will still get to them at the end
for (var i=0; i<queue.length; i++) { for (var i=0; i<queue.length; i++) {
var widget = queue[i]; var component = queue[i];
widget.update(); // Do the actual widget update component.update(); // Do the actual component update
} }
// Clear out the queue by setting the length to zero // Clear out the queue by setting the length to zero
@ -88,45 +88,45 @@ function batchUpdate(func) {
func(); func();
} finally { } finally {
try { try {
// Update all of the widgets that where queued up // Update all of the components that where queued up
// in this batch (if any) // in this batch (if any)
if (batch.$__queue) { if (batch.$__queue) {
updateWidgets(batch.$__queue); updateComponents(batch.$__queue);
} }
} finally { } finally {
// Now that we have completed the update of all the widgets // Now that we have completed the update of all the components
// in this batch we need to remove it off the top of the stack // in this batch we need to remove it off the top of the stack
batchStack.length--; batchStack.length--;
} }
} }
} }
function queueWidgetUpdate(widget) { function queueComponentUpdate(component) {
var batchStackLen = batchStack.length; var batchStackLen = batchStack.length;
if (batchStackLen) { if (batchStackLen) {
// When a batch update is started we push a new batch on to a stack. // When a batch update is started we push a new batch on to a stack.
// If the stack has a non-zero length then we know that a batch has // If the stack has a non-zero length then we know that a batch has
// been started so we can just queue the widget on the top batch. When // been started so we can just queue the component on the top batch. When
// the batch is ended this widget will be updated. // the batch is ended this component will be updated.
var batch = batchStack[batchStackLen-1]; var batch = batchStack[batchStackLen-1];
// We default the batch queue to null to avoid creating an Array instance // We default the batch queue to null to avoid creating an Array instance
// unnecessarily. If it is null then we create a new Array, otherwise // unnecessarily. If it is null then we create a new Array, otherwise
// we push it onto the existing Array queue // we push it onto the existing Array queue
if (batch.$__queue) { if (batch.$__queue) {
batch.$__queue.push(widget); batch.$__queue.push(component);
} else { } else {
batch.$__queue = [widget]; batch.$__queue = [component];
} }
} else { } else {
// We are not within a batched update. We need to schedule a batch update // We are not within a batched update. We need to schedule a batch update
// for the process.nextTick (if that hasn't been done already) and we will // for the process.nextTick (if that hasn't been done already) and we will
// add the widget to the unbatched queued // add the component to the unbatched queued
scheduleUpdates(); scheduleUpdates();
unbatchedQueue.push(widget); unbatchedQueue.push(component);
} }
} }
exports.$__queueWidgetUpdate = queueWidgetUpdate; exports.$__queueComponentUpdate = queueComponentUpdate;
exports.$__batchUpdate = batchUpdate; exports.$__batchUpdate = batchUpdate;

56
components/util-browser.js
View File

@ -1,23 +1,23 @@
var widgetLookup = {}; var componentLookup = {};
var defaultDocument = document; var defaultDocument = document;
function getWidgetForEl(el, doc) { function getComponentForEl(el, doc) {
if (el) { if (el) {
var node = typeof el === 'string' ? (doc || defaultDocument).getElementById(el) : el; var node = typeof el === 'string' ? (doc || defaultDocument).getElementById(el) : el;
if (node) { if (node) {
var widget = node._w; var component = node._w;
while(widget) { while(component) {
var rootFor = widget.$__rootFor; var rootFor = component.$__rootFor;
if (rootFor) { if (rootFor) {
widget = rootFor; component = rootFor;
} else { } else {
break; break;
} }
} }
return widget; return component;
} }
} }
} }
@ -35,7 +35,7 @@ var lifecycleEventMethods = {};
}); });
/** /**
* This method handles invoking a widget's event handler method * This method handles invoking a component's event handler method
* (if present) while also emitting the event through * (if present) while also emitting the event through
* the standard EventEmitter.prototype.emit method. * the standard EventEmitter.prototype.emit method.
* *
@ -48,25 +48,25 @@ var lifecycleEventMethods = {};
* update --> onUpdate * update --> onUpdate
* render --> onRender * render --> onRender
*/ */
function emitLifecycleEvent(widget, eventType, eventArg1, eventArg2) { function emitLifecycleEvent(component, eventType, eventArg1, eventArg2) {
var listenerMethod = widget[lifecycleEventMethods[eventType]]; var listenerMethod = component[lifecycleEventMethods[eventType]];
if (listenerMethod) { if (listenerMethod) {
listenerMethod.call(widget, eventArg1, eventArg2); listenerMethod.call(component, eventArg1, eventArg2);
} }
widget.emit(eventType, eventArg1, eventArg2); component.emit(eventType, eventArg1, eventArg2);
} }
function destroyWidgetForEl(el) { function destroyComponentForEl(el) {
var widgetToDestroy = el._w; var componentToDestroy = el._w;
if (widgetToDestroy) { if (componentToDestroy) {
widgetToDestroy.$__destroyShallow(); componentToDestroy.$__destroyShallow();
el._w = null; el._w = null;
while ((widgetToDestroy = widgetToDestroy.$__rootFor)) { while ((componentToDestroy = componentToDestroy.$__rootFor)) {
widgetToDestroy.$__rootFor = null; componentToDestroy.$__rootFor = null;
widgetToDestroy.$__destroyShallow(); componentToDestroy.$__destroyShallow();
} }
} }
} }
@ -74,7 +74,7 @@ function destroyElRecursive(el) {
var curChild = el.firstChild; var curChild = el.firstChild;
while(curChild) { while(curChild) {
if (curChild.nodeType == 1) { if (curChild.nodeType == 1) {
destroyWidgetForEl(curChild); destroyComponentForEl(curChild);
destroyElRecursive(curChild); destroyElRecursive(curChild);
} }
curChild = curChild.nextSibling; curChild = curChild.nextSibling;
@ -83,7 +83,7 @@ function destroyElRecursive(el) {
var nextUniqueId = 0; var nextUniqueId = 0;
function nextWidgetId() { function nextComponentId() {
return 'wc' + (nextUniqueId++); return 'wc' + (nextUniqueId++);
} }
@ -91,19 +91,19 @@ function getElementById(doc, id) {
return doc.getElementById(id); return doc.getElementById(id);
} }
function attachBubblingEvent(widgetDef, handlerMethodName, extraArgs) { function attachBubblingEvent(componentDef, handlerMethodName, extraArgs) {
if (handlerMethodName) { if (handlerMethodName) {
return extraArgs ? return extraArgs ?
[handlerMethodName, widgetDef.id, extraArgs] : [handlerMethodName, componentDef.id, extraArgs] :
[handlerMethodName, widgetDef.id]; [handlerMethodName, componentDef.id];
} }
} }
exports.$__widgetLookup = widgetLookup; exports.$__componentLookup = componentLookup;
exports.$__getWidgetForEl = getWidgetForEl; exports.$__getComponentForEl = getComponentForEl;
exports.$__emitLifecycleEvent = emitLifecycleEvent; exports.$__emitLifecycleEvent = emitLifecycleEvent;
exports.$__destroyWidgetForEl = destroyWidgetForEl; exports.$__destroyComponentForEl = destroyComponentForEl;
exports.$__destroyElRecursive = destroyElRecursive; exports.$__destroyElRecursive = destroyElRecursive;
exports.$__nextWidgetId = nextWidgetId; exports.$__nextComponentId = nextComponentId;
exports.$__getElementById = getElementById; exports.$__getElementById = getElementById;
exports.$__attachBubblingEvent = attachBubblingEvent; exports.$__attachBubblingEvent = attachBubblingEvent;

16
components/util.js
View File

@ -2,11 +2,11 @@ var KEY = Symbol();
var isArray = Array.isArray; var isArray = Array.isArray;
function UniqueId(out) { function UniqueId(out) {
this.prefix = out.global.widgetIdPrefix || 'w'; this.prefix = out.global.componentIdPrefix || 'w';
this.nextId = 0; this.nextId = 0;
} }
function nextWidgetId(out) { function nextComponentId(out) {
var global = out.global; var global = out.global;
var idProvider = global[KEY] || var idProvider = global[KEY] ||
@ -15,11 +15,11 @@ function nextWidgetId(out) {
return idProvider.prefix + (idProvider.nextId++); return idProvider.prefix + (idProvider.nextId++);
} }
function attachBubblingEvent(widgetDef, handlerMethodName, extraArgs) { function attachBubblingEvent(componentDef, handlerMethodName, extraArgs) {
if (handlerMethodName) { if (handlerMethodName) {
if (extraArgs) { if (extraArgs) {
var bubblingDomEvents = widgetDef.$__bubblingDomEvents || var bubblingDomEvents = componentDef.$__bubblingDomEvents ||
( widgetDef.$__bubblingDomEvents = [] ); ( componentDef.$__bubblingDomEvents = [] );
var eventIndex = bubblingDomEvents.length; var eventIndex = bubblingDomEvents.length;
if (extraArgs.length === 1) { if (extraArgs.length === 1) {
@ -33,13 +33,13 @@ function attachBubblingEvent(widgetDef, handlerMethodName, extraArgs) {
bubblingDomEvents.push(extraArgs); bubblingDomEvents.push(extraArgs);
} }
return handlerMethodName + ' ' + widgetDef.id + ' ' + eventIndex; return handlerMethodName + ' ' + componentDef.id + ' ' + eventIndex;
} else { } else {
return handlerMethodName + ' ' + widgetDef.id; return handlerMethodName + ' ' + componentDef.id;
} }
} }
} }
exports.$__nextWidgetId = nextWidgetId; exports.$__nextComponentId = nextComponentId;
exports.$__server = true; exports.$__server = true;
exports.$__attachBubblingEvent = attachBubblingEvent; exports.$__attachBubblingEvent = attachBubblingEvent;

2
defineRenderer.js
View File

@ -20,7 +20,7 @@ function defineRenderer(def) {
if (!renderer) { if (!renderer) {
// Create a renderer function that takes care of translating // Create a renderer function that takes care of translating
// the input properties to a view state. Also, this renderer // the input properties to a view state. Also, this renderer
// takes care of re-using existing widgets. // takes care of re-using existing components.
renderer = function renderer(input, out) { renderer = function renderer(input, out) {
var newProps = input; var newProps = input;

4
docs/06-components.md
View File

@ -163,9 +163,9 @@ module.exports = {
> **Note**: When using a plain object, use the `onCreate` [lifecycle method]() instead of `contructor`. > **Note**: When using a plain object, use the `onCreate` [lifecycle method]() instead of `contructor`.
### Split renderer & widget ### Split renderer & component
With this alternative technique to define a component, you don't have access to stateful re-rendering, but the template rendering logic will not be sent down to the browser. With this alternative technique to define a component, you don't have access to stateful re-rendering, but the template rendering logic will not be sent down to the browser.
Marko automatically discovers widget files in the same directory as a template. For example if you have a template named `button.marko`, it will automatically look for `button.widget.js`. If your template is named `index.marko`, it will look for `widget.js` in addition to `index.widget.js`. Marko automatically discovers component files in the same directory as a template. For example if you have a template named `button.marko`, it will automatically look for `button.component.js`. If your template is named `index.marko`, it will look for `component.js` in addition to `index.component.js`.

4
hot-reload/index.js
View File

@ -7,7 +7,7 @@ const nodeRequire = require('../node-require');
var compiler; var compiler;
var marko; var marko;
var runtime; var runtime;
var widgets; var components;
var modifiedId = 1; var modifiedId = 1;
var HOT_RELOAD_KEY = Symbol('HOT_RELOAD'); var HOT_RELOAD_KEY = Symbol('HOT_RELOAD');
@ -188,4 +188,4 @@ exports.handleFileModified = function(path, options) {
compiler = require('../compiler'); compiler = require('../compiler');
marko = require('../'); marko = require('../');
runtime = require('../runtime/html'); runtime = require('../runtime/html');
widgets = require('../widgets'); components = require('../components');

12
jquery.js vendored
View File

@ -2,7 +2,7 @@ var ready = require('./ready');
var idRegExp = /^\#(\S+)( .*)?/; var idRegExp = /^\#(\S+)( .*)?/;
exports.patchWidget = function(jQuery) { exports.patchComponent = function(jQuery) {
/* globals window */ /* globals window */
if (!jQuery) { if (!jQuery) {
@ -12,7 +12,7 @@ exports.patchWidget = function(jQuery) {
} }
} }
require('./widgets/Widget').prototype.$ = function jqueryProxy(arg) { require('./components/Component').prototype.$ = function jqueryProxy(arg) {
var args = arguments; var args = arguments;
var self = this; var self = this;
@ -26,16 +26,16 @@ exports.patchWidget = function(jQuery) {
var match = idRegExp.exec(arg); var match = idRegExp.exec(arg);
//Reset the search to 0 so the next call to exec will start from the beginning for the new string //Reset the search to 0 so the next call to exec will start from the beginning for the new string
if (match != null) { if (match != null) {
var widgetElId = match[1]; var componentElId = match[1];
if (match[2] == null) { if (match[2] == null) {
return jQuery(self.getEl(widgetElId)); return jQuery(self.getEl(componentElId));
} else { } else {
return jQuery('#' + self.getElId(widgetElId) + match[2]); return jQuery('#' + self.getElId(componentElId) + match[2]);
} }
} else { } else {
var rootEl = self.getEl(); var rootEl = self.getEl();
if (!rootEl) { if (!rootEl) {
throw new Error('Root element is not defined for widget'); throw new Error('Root element is not defined for component');
} }
if (rootEl) { if (rootEl) {
return jQuery(arg, rootEl); return jQuery(arg, rootEl);

24
package.json
View File

@ -6,7 +6,7 @@
"template", "template",
"async", "async",
"streaming", "streaming",
"widgets", "components",
"components", "components",
"ui", "ui",
"vdom", "vdom",
@ -20,7 +20,7 @@
"url": "https://github.com/marko-js/marko.git" "url": "https://github.com/marko-js/marko.git"
}, },
"scripts": { "scripts": {
"test": "npm run jshint -s && npm run mocha -s && npm run test-widgets -s && npm run test-widgets-deprecated -s", "test": "npm run jshint -s && npm run mocha -s && npm run test-components -s && npm run test-components-deprecated -s",
"mocha": "mocha --ui bdd --reporter spec ./test/", "mocha": "mocha --ui bdd --reporter spec ./test/",
"test-coverage": "npm run test-generate-coverage && nyc report --reporter=html && open ./coverage/index.html", "test-coverage": "npm run test-generate-coverage && nyc report --reporter=html && open ./coverage/index.html",
"test-generate-coverage": "nyc -asc npm run test", "test-generate-coverage": "nyc -asc npm run test",
@ -28,16 +28,16 @@
"test-async": "mocha --ui bdd --reporter spec ./test/async-render-test", "test-async": "mocha --ui bdd --reporter spec ./test/async-render-test",
"test-taglib-loader": "mocha --ui bdd --reporter spec ./test/taglib-loader-test", "test-taglib-loader": "mocha --ui bdd --reporter spec ./test/taglib-loader-test",
"test-express": "mocha --ui bdd --reporter spec ./test/express-test", "test-express": "mocha --ui bdd --reporter spec ./test/express-test",
"test-widgets": "npm run test-widgets-browser -s && npm run test-widgets-pages -s", "test-components": "npm run test-components-browser -s && npm run test-components-pages -s",
"test-widgets-deprecated": "npm run test-widgets-browser-deprecated -s && npm run test-widgets-pages-deprecated -s", "test-components-deprecated": "npm run test-components-browser-deprecated -s && npm run test-components-pages-deprecated -s",
"test-widgets-browser": "node test/browser-tests-runner/cli.js test/widgets-browser-tests.js --automated", "test-components-browser": "node test/browser-tests-runner/cli.js test/components-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-components-browser-deprecated": "node test/browser-tests-runner/cli.js test/deprecated-components-browser-tests.js --automated && npm run test-components-pages-deprecated -s",
"test-widgets-pages": "node test/browser-tests-runner/cli.js --pages --automated", "test-components-pages": "node test/browser-tests-runner/cli.js --pages --automated",
"test-widgets-pages-deprecated": "node test/browser-tests-runner/cli.js --pagesDeprecated --automated", "test-components-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-components-browser-dev": "browser-refresh test/browser-tests-runner/cli.js test/components-browser-tests.js --server",
"test-page": "node test/browser-tests-runner/cli.js test/widgets-browser-tests.js --automated --page", "test-page": "node test/browser-tests-runner/cli.js test/components-browser-tests.js --automated --page",
"test-pages": "npm run test-widgets-pages", "test-pages": "npm run test-components-pages",
"jshint": "jshint compiler/ runtime/ taglibs/ widgets/", "jshint": "jshint compiler/ runtime/ taglibs/ components/",
"coveralls": "nyc report --reporter=text-lcov | coveralls" "coveralls": "nyc report --reporter=text-lcov | coveralls"
}, },
"author": "Patrick Steele-Idem <pnidem@gmail.com>", "author": "Patrick Steele-Idem <pnidem@gmail.com>",

4
ready.js
View File

@ -134,8 +134,8 @@ function ready(callback, thisObj, doc) {
module.exports = ready; module.exports = ready;
module.exports.patchWidget = function() { module.exports.patchComponent = function() {
require('./widgets/Widget').prototype.ready = function (callback) { require('./components/Component').prototype.ready = function (callback) {
var document = this.el.ownerDocument; var document = this.el.ownerDocument;
ready(callback, this, document); ready(callback, this, document);
}; };

56
runtime/RenderResult.js
View File

@ -1,63 +1,63 @@
var domInsert = require('./dom-insert'); var domInsert = require('./dom-insert');
function checkAddedToDOM(result, method) { function checkAddedToDOM(result, method) {
if (!result.$__widgets) { if (!result.$__components) {
throw Error('Not added to DOM'); throw Error('Not added to DOM');
} }
} }
function getWidgetDefs(result) { function getComponentDefs(result) {
var widgetDefs = result.$__widgets; var componentDefs = result.$__components;
if (widgetDefs.length === 0) { if (componentDefs.length === 0) {
throw Error('No widget'); throw Error('No component');
} }
return widgetDefs; return componentDefs;
} }
function RenderResult(out) { function RenderResult(out) {
this.out = this.$__out = out; this.out = this.$__out = out;
this.$__widgets = null; this.$__components = null;
} }
module.exports = RenderResult; module.exports = RenderResult;
var proto = RenderResult.prototype = { var proto = RenderResult.prototype = {
getWidget: function() { getComponent: function() {
checkAddedToDOM(this, 'getWidget'); checkAddedToDOM(this, 'getComponent');
var rerenderWidgetInfo = this.$__out.global.$w; var rerenderComponentInfo = this.$__out.global.$w;
var rerenderWidget = rerenderWidgetInfo && rerenderWidgetInfo[0]; var rerenderComponent = rerenderComponentInfo && rerenderComponentInfo[0];
if (rerenderWidget) { if (rerenderComponent) {
return rerenderWidget; return rerenderComponent;
} }
return getWidgetDefs(this)[0].$__widget; return getComponentDefs(this)[0].$__component;
}, },
getWidgets: function(selector) { getComponents: function(selector) {
checkAddedToDOM(this, 'getWidgets'); checkAddedToDOM(this, 'getComponents');
var widgetDefs = getWidgetDefs(this); var componentDefs = getComponentDefs(this);
var widgets = []; var components = [];
var i; var i;
for (i = 0; i < widgetDefs.length; i++) { for (i = 0; i < componentDefs.length; i++) {
var widget = widgetDefs[i].$__widget; var component = componentDefs[i].$__component;
if (!selector || selector(widget)) { if (!selector || selector(component)) {
widgets.push(widget); components.push(component);
} }
} }
return widgets; return components;
}, },
afterInsert: function(doc) { afterInsert: function(doc) {
var out = this.$__out; var out = this.$__out;
var widgetsContext = out.global.widgets; var componentsContext = out.global.components;
if (widgetsContext) { if (componentsContext) {
this.$__widgets = widgetsContext.$__widgets; this.$__components = componentsContext.$__components;
widgetsContext.$__initWidgets(doc); componentsContext.$__initComponents(doc);
} }
return this; return this;
@ -77,7 +77,7 @@ var proto = RenderResult.prototype = {
document: typeof document !== 'undefined' && document document: typeof document !== 'undefined' && document
}; };
// Add all of the following DOM methods to Widget.prototype: // Add all of the following DOM methods to Component.prototype:
// - appendTo(referenceEl) // - appendTo(referenceEl)
// - replace(referenceEl) // - replace(referenceEl)
// - replaceChildrenOf(referenceEl) // - replaceChildrenOf(referenceEl)

8
runtime/dom-insert.js
View File

@ -1,7 +1,7 @@
var extend = require('raptor-util/extend'); var extend = require('raptor-util/extend');
var widgetsUtil = require('../widgets/util'); var componentsUtil = require('../components/util');
var destroyWidgetForEl = widgetsUtil.$__destroyWidgetForEl; var destroyComponentForEl = componentsUtil.$__destroyComponentForEl;
var destroyElRecursive = widgetsUtil.$__destroyElRecursive; var destroyElRecursive = componentsUtil.$__destroyElRecursive;
function resolveEl(el) { function resolveEl(el) {
if (typeof el === 'string') { if (typeof el === 'string') {
@ -16,7 +16,7 @@ function resolveEl(el) {
function beforeRemove(referenceEl) { function beforeRemove(referenceEl) {
destroyElRecursive(referenceEl); destroyElRecursive(referenceEl);
destroyWidgetForEl(referenceEl); destroyComponentForEl(referenceEl);
} }
module.exports = function(target, getEl, afterInsert) { module.exports = function(target, getEl, afterInsert) {

4
test/autotests/components-browser-deprecated/widget-getInitialProps/test.js
View File

@ -1,8 +1,8 @@
var expect = require('chai').expect; var expect = require('chai').expect;
module.exports = function(helpers) { module.exports = function(helpers) {
var widget = helpers.mount(require('./index'), { var component = helpers.mount(require('./index'), {
name: 'Frank' name: 'Frank'
}); });
expect(widget.el.innerHTML).to.contain('Hello FRANK!'); expect(component.el.innerHTML).to.contain('Hello FRANK!');
}; };

2
test/autotests/components-browser-deprecated/widget-invoke-widget-id-dynamic/components/app-bar/template.marko
View File

@ -1,3 +1,3 @@
<div class="bar" w-bind="./widget"> <div class="bar" w-bind="./component">
${data.label} ${data.label}
</div> </div>

4
test/autotests/components-browser-deprecated/widget-stateful-preserve-body/components/app-stateful-button/index.js
View File

@ -1,4 +1,4 @@
module.exports = require('marko/widgets/legacy').defineComponent({ module.exports = require('marko/components/legacy').defineComponent({
template: require.resolve('./template.marko'), template: require.resolve('./template.marko'),
getInitialState: function(input) { getInitialState: function(input) {
return { return {
@ -52,7 +52,7 @@ module.exports = require('marko/widgets/legacy').defineComponent({
}, },
handleClick: function(event) { handleClick: function(event) {
// Every Widget instance is also an EventEmitter instance. // Every Component instance is also an EventEmitter instance.
// We will emit a custom "click" event when a DOM click event // We will emit a custom "click" event when a DOM click event
// is triggered // is triggered
this.emit('click', { this.emit('click', {

4
test/autotests/components-browser/class-named/test.js
View File

@ -1,7 +1,7 @@
var expect = require('chai').expect; var expect = require('chai').expect;
module.exports = function(helpers) { module.exports = function(helpers) {
var widget = helpers.mount(require('./index'), { }); var component = helpers.mount(require('./index'), { });
expect(widget.sayHello('Frank')).to.equal('Hello Frank!'); expect(component.sayHello('Frank')).to.equal('Hello Frank!');
}; };

6
test/autotests/components-browser/custom-events-repeated-component/test.js
View File

@ -17,7 +17,7 @@ var items = [
]; ];
module.exports = function(helpers) { module.exports = function(helpers) {
var widget = helpers.mount(require('./index'), { var component = helpers.mount(require('./index'), {
items: items items: items
}); });
@ -26,7 +26,7 @@ module.exports = function(helpers) {
expect(lookup.componentsById[0].id).to.not.equal(lookup.componentsById[1].id); expect(lookup.componentsById[0].id).to.not.equal(lookup.componentsById[1].id);
lookup.componentsById[0].emitPurchase(); lookup.componentsById[0].emitPurchase();
expect(widget.purchaseEvents).to.deep.equal([ expect(component.purchaseEvents).to.deep.equal([
{ {
id: 0, id: 0,
title: 'Item 1' title: 'Item 1'
@ -34,7 +34,7 @@ module.exports = function(helpers) {
]); ]);
lookup.componentsById[1].emitPurchase(); lookup.componentsById[1].emitPurchase();
expect(widget.purchaseEvents).to.deep.equal([ expect(component.purchaseEvents).to.deep.equal([
{ {
id: 0, id: 0,
title: 'Item 1' title: 'Item 1'

2
test/autotests/components-browser/custom-events/index.marko
View File

@ -6,7 +6,7 @@
<app-bar key="barArray[]" label="2"/> <app-bar key="barArray[]" label="2"/>
<app-custom-events onTestEvent("handleTestEvent1") key="customEvents" /> <app-custom-events onTestEvent("handleTestEvent1") key="customEvents" />
<app-custom-events onTestEvent("handleTestEvent2") channel="customEvents-${widget.id}" /> <app-custom-events onTestEvent("handleTestEvent2") channel="customEvents-${component.id}" />
<ul> <ul>
<li for(color in ['red', 'green', 'blue']) key="colorListItems[]">${color}</li> <li for(color in ['red', 'green', 'blue']) key="colorListItems[]">${color}</li>

6
test/autotests/components-browser/custom-events/test.js
View File

@ -1,17 +1,17 @@
var expect = require('chai').expect; var expect = require('chai').expect;
module.exports = function(helpers) { module.exports = function(helpers) {
var widget = helpers.mount(require('./index'), {}); var component = helpers.mount(require('./index'), {});
var testEventFired = false; var testEventFired = false;
widget.getWidget('bar').on('testEvent', function(a, b) { component.getComponent('bar').on('testEvent', function(a, b) {
expect(a).to.equal('a'); expect(a).to.equal('a');
expect(b).to.equal('b'); expect(b).to.equal('b');
testEventFired = true; testEventFired = true;
}); });
widget.getWidget('bar').emitTestEvent(); component.getComponent('bar').emitTestEvent();
expect(testEventFired).to.equal(true); expect(testEventFired).to.equal(true);
}; };

2
test/autotests/components-browser/custom-events/widget.js
View File

@ -1,6 +1,6 @@
module.exports = { module.exports = {
onMount: function() { onMount: function() {
this.name = 'app-foo'; this.name = 'app-foo';
this.getWidget('bar').appendHtml('FOO'); this.getComponent('bar').appendHtml('FOO');
} }
}; };

10
test/autotests/components-browser/destroy-multiple-root-els/test.js
View File

@ -2,18 +2,18 @@ var expect = require('chai').expect;
module.exports = function(helpers) { module.exports = function(helpers) {
var widget = helpers.mount(require('./index'), { name: 'Frank', age: 30 }); var component = helpers.mount(require('./index'), { name: 'Frank', age: 30 });
var nameEl = widget.getEl('name'); var nameEl = component.getEl('name');
var ageEl = widget.getEl('age'); var ageEl = component.getEl('age');
var linkEl = widget.els[2]; var linkEl = component.els[2];
expect(nameEl.parentNode != null).to.equal(true); expect(nameEl.parentNode != null).to.equal(true);
expect(ageEl.parentNode != null).to.equal(true); expect(ageEl.parentNode != null).to.equal(true);
expect(linkEl.parentNode != null).to.equal(true); expect(linkEl.parentNode != null).to.equal(true);
widget.destroy(); component.destroy();
expect(nameEl.parentNode == null).to.equal(true); expect(nameEl.parentNode == null).to.equal(true);
expect(ageEl.parentNode == null).to.equal(true); expect(ageEl.parentNode == null).to.equal(true);

10
test/autotests/components-browser/destroy-widget/test.js
View File

@ -1,11 +1,11 @@
var expect = require('chai').expect; var expect = require('chai').expect;
module.exports = function(helpers) { module.exports = function(helpers) {
var widget = helpers.mount(require('./index'), { var component = helpers.mount(require('./index'), {
showSimple: true showSimple: true
}); });
var simple = widget.getWidget('simple'); var simple = component.getComponent('simple');
var simpleDestroyed = false; var simpleDestroyed = false;
simple.onDestroy = function() { simple.onDestroy = function() {
@ -14,14 +14,14 @@ module.exports = function(helpers) {
expect(simple != null).to.equal(true); expect(simple != null).to.equal(true);
widget.input = { component.input = {
showSimple: false showSimple: false
}; };
widget.update(); component.update();
expect(simpleDestroyed).to.equal(true); expect(simpleDestroyed).to.equal(true);
expect(simple.isDestroyed()).to.equal(true); expect(simple.isDestroyed()).to.equal(true);
expect(widget.getWidget('simple') == null).to.equal(true); expect(component.getComponent('simple') == null).to.equal(true);
}; };

10
test/autotests/components-browser/dom-events-repeated-el-bubbling-one-arg/test.js
View File

@ -1,18 +1,18 @@
var expect = require('chai').expect; var expect = require('chai').expect;
module.exports = function(helpers) { module.exports = function(helpers) {
var widget = helpers.mount(require('./index'), { var component = helpers.mount(require('./index'), {
colors: [ 'red', 'green', 'blue' ] colors: [ 'red', 'green', 'blue' ]
}); });
var liEls = widget.el.querySelectorAll('li'); var liEls = component.el.querySelectorAll('li');
helpers.triggerMouseEvent(liEls[0], 'click'); helpers.triggerMouseEvent(liEls[0], 'click');
expect(widget.color).to.equal('red'); expect(component.color).to.equal('red');
helpers.triggerMouseEvent(liEls[1], 'click'); helpers.triggerMouseEvent(liEls[1], 'click');
expect(widget.color).to.equal('green'); expect(component.color).to.equal('green');
helpers.triggerMouseEvent(liEls[2], 'click'); helpers.triggerMouseEvent(liEls[2], 'click');
expect(widget.color).to.equal('blue'); expect(component.color).to.equal('blue');
}; };

18
test/autotests/components-browser/dom-events-repeated-el-bubbling-two-args/test.js
View File

@ -1,29 +1,29 @@
var expect = require('chai').expect; var expect = require('chai').expect;
module.exports = function(helpers) { module.exports = function(helpers) {
var widget = helpers.mount(require('./index'), { var component = helpers.mount(require('./index'), {
colors: [ 'red', 'green', 'blue' ] colors: [ 'red', 'green', 'blue' ]
}); });
var liEls = widget.el.querySelectorAll('ul.primary li'); var liEls = component.el.querySelectorAll('ul.primary li');
helpers.triggerMouseEvent(liEls[0], 'click'); helpers.triggerMouseEvent(liEls[0], 'click');
expect(widget.color).to.deep.equal({color: 'red', type: 'primary'}); expect(component.color).to.deep.equal({color: 'red', type: 'primary'});
helpers.triggerMouseEvent(liEls[1], 'click'); helpers.triggerMouseEvent(liEls[1], 'click');
expect(widget.color).to.deep.equal({color: 'green', type: 'primary'}); expect(component.color).to.deep.equal({color: 'green', type: 'primary'});
helpers.triggerMouseEvent(liEls[2], 'click'); helpers.triggerMouseEvent(liEls[2], 'click');
expect(widget.color).to.deep.equal({color: 'blue', type: 'primary'}); expect(component.color).to.deep.equal({color: 'blue', type: 'primary'});
liEls = widget.el.querySelectorAll('ul.secondary li'); liEls = component.el.querySelectorAll('ul.secondary li');
helpers.triggerMouseEvent(liEls[0], 'click'); helpers.triggerMouseEvent(liEls[0], 'click');
expect(widget.color).to.deep.equal({color: 'red', type: 'secondary'}); expect(component.color).to.deep.equal({color: 'red', type: 'secondary'});
helpers.triggerMouseEvent(liEls[1], 'click'); helpers.triggerMouseEvent(liEls[1], 'click');
expect(widget.color).to.deep.equal({color: 'green', type: 'secondary'}); expect(component.color).to.deep.equal({color: 'green', type: 'secondary'});
helpers.triggerMouseEvent(liEls[2], 'click'); helpers.triggerMouseEvent(liEls[2], 'click');
expect(widget.color).to.deep.equal({color: 'blue', type: 'secondary'}); expect(component.color).to.deep.equal({color: 'blue', type: 'secondary'});
}; };

8
test/autotests/components-browser/dom-events-repeated-el-bubbling/test.js
View File

@ -1,9 +1,9 @@
var expect = require('chai').expect; var expect = require('chai').expect;
module.exports = function(helpers) { module.exports = function(helpers) {
var widget = helpers.mount(require('./index'), {}); var component = helpers.mount(require('./index'), {});
expect(widget.clicked).to.equal(false); expect(component.clicked).to.equal(false);
helpers.triggerMouseEvent(widget.getEl('button'), 'click'); helpers.triggerMouseEvent(component.getEl('button'), 'click');
expect(widget.clicked).to.equal(true); expect(component.clicked).to.equal(true);
}; };

16
test/autotests/components-browser/dom-events-repeated-el-non-bubbling-multiple/test.js
View File

@ -1,27 +1,27 @@
var expect = require('chai').expect; var expect = require('chai').expect;
module.exports = function(helpers) { module.exports = function(helpers) {
var widget = helpers.mount(require('./index'), { var component = helpers.mount(require('./index'), {
colors: [ 'red', 'green', 'blue' ] colors: [ 'red', 'green', 'blue' ]
}); });
var liEls = widget.el.querySelectorAll('li'); var liEls = component.el.querySelectorAll('li');
helpers.triggerMouseEvent(liEls[0], 'mouseover'); helpers.triggerMouseEvent(liEls[0], 'mouseover');
expect(widget.mouseOverColor).to.equal('red'); expect(component.mouseOverColor).to.equal('red');
helpers.triggerMouseEvent(liEls[1], 'mouseover'); helpers.triggerMouseEvent(liEls[1], 'mouseover');
expect(widget.mouseOverColor).to.equal('green'); expect(component.mouseOverColor).to.equal('green');
helpers.triggerMouseEvent(liEls[2], 'mouseover'); helpers.triggerMouseEvent(liEls[2], 'mouseover');
expect(widget.mouseOverColor).to.equal('blue'); expect(component.mouseOverColor).to.equal('blue');
helpers.triggerMouseEvent(liEls[0], 'mouseout'); helpers.triggerMouseEvent(liEls[0], 'mouseout');
expect(widget.mouseOutColor).to.equal('red'); expect(component.mouseOutColor).to.equal('red');
helpers.triggerMouseEvent(liEls[1], 'mouseout'); helpers.triggerMouseEvent(liEls[1], 'mouseout');
expect(widget.mouseOutColor).to.equal('green'); expect(component.mouseOutColor).to.equal('green');
helpers.triggerMouseEvent(liEls[2], 'mouseout'); helpers.triggerMouseEvent(liEls[2], 'mouseout');
expect(widget.mouseOutColor).to.equal('blue'); expect(component.mouseOutColor).to.equal('blue');
}; };

10
test/autotests/components-browser/dom-events-repeated-el-non-bubbling/test.js
View File

@ -1,18 +1,18 @@
var expect = require('chai').expect; var expect = require('chai').expect;
module.exports = function(helpers) { module.exports = function(helpers) {
var widget = helpers.mount(require('./index'), { var component = helpers.mount(require('./index'), {
colors: [ 'red', 'green', 'blue' ] colors: [ 'red', 'green', 'blue' ]
}); });
var liEls = widget.el.querySelectorAll('li'); var liEls = component.el.querySelectorAll('li');
helpers.triggerMouseEvent(liEls[0], 'mouseover'); helpers.triggerMouseEvent(liEls[0], 'mouseover');
expect(widget.color).to.equal('red'); expect(component.color).to.equal('red');
helpers.triggerMouseEvent(liEls[1], 'mouseover'); helpers.triggerMouseEvent(liEls[1], 'mouseover');
expect(widget.color).to.equal('green'); expect(component.color).to.equal('green');
helpers.triggerMouseEvent(liEls[2], 'mouseover'); helpers.triggerMouseEvent(liEls[2], 'mouseover');
expect(widget.color).to.equal('blue'); expect(component.color).to.equal('blue');
}; };

24
test/autotests/components-browser/event-attach-el/test.js
View File

@ -1,30 +1,30 @@
var expect = require('chai').expect; var expect = require('chai').expect;
module.exports = function(helpers) { module.exports = function(helpers) {
var widget = helpers.mount(require('./index'), { var component = helpers.mount(require('./index'), {
colors: ['red'] colors: ['red']
}); });
expect(widget.events.length).to.equal(0); expect(component.events.length).to.equal(0);
widget.input = { component.input = {
colors: ['red', 'blue'] colors: ['red', 'blue']
}; };
widget.update(); component.update();
expect(widget.events.length).to.equal(1); expect(component.events.length).to.equal(1);
expect(widget.events[0].color).to.equal('blue'); expect(component.events[0].color).to.equal('blue');
expect(widget.events[0].node).to.equal(widget.el.querySelectorAll('li')[1]); expect(component.events[0].node).to.equal(component.el.querySelectorAll('li')[1]);
widget.input = { component.input = {
colors: ['red', 'green', 'blue'] colors: ['red', 'green', 'blue']
}; };
widget.update(); component.update();
expect(widget.events.length).to.equal(2); expect(component.events.length).to.equal(2);
expect(widget.events[1].color).to.equal('green'); expect(component.events[1].color).to.equal('green');
expect(widget.events[1].node).to.equal(widget.el.querySelectorAll('li')[1]); expect(component.events[1].node).to.equal(component.el.querySelectorAll('li')[1]);
}; };

18
test/autotests/components-browser/event-detach-el-preventDefault/test.js
View File

@ -1,32 +1,32 @@
var expect = require('chai').expect; var expect = require('chai').expect;
module.exports = function(helpers) { module.exports = function(helpers) {
var widget = helpers.mount(require('./index'), { var component = helpers.mount(require('./index'), {
colors: ['red', 'green', 'blue'] colors: ['red', 'green', 'blue']
}); });
expect(widget.events.length).to.equal(0); expect(component.events.length).to.equal(0);
var finishDetach; var finishDetach;
widget.handleDetach = function(color, event) { component.handleDetach = function(color, event) {
expect(color).to.equal('green'); expect(color).to.equal('green');
finishDetach = event.detach; finishDetach = event.detach;
event.preventDefault(); event.preventDefault();
}; };
widget.input = { component.input = {
colors: ['red', 'blue'] colors: ['red', 'blue']
}; };
widget.update(); component.update();
expect(widget.el.querySelectorAll('li').length).to.equal(3); expect(component.el.querySelectorAll('li').length).to.equal(3);
expect(widget.el.querySelectorAll('li')[1].innerHTML).to.contain('green'); expect(component.el.querySelectorAll('li')[1].innerHTML).to.contain('green');
finishDetach(); finishDetach();
expect(widget.el.querySelectorAll('li').length).to.equal(2); expect(component.el.querySelectorAll('li').length).to.equal(2);
expect(widget.el.querySelectorAll('li')[1].innerHTML).to.contain('blue'); expect(component.el.querySelectorAll('li')[1].innerHTML).to.contain('blue');
}; };

24
test/autotests/components-browser/event-detach-el/test.js
View File

@ -1,30 +1,30 @@
var expect = require('chai').expect; var expect = require('chai').expect;
module.exports = function(helpers) { module.exports = function(helpers) {
var widget = helpers.mount(require('./index'), { var component = helpers.mount(require('./index'), {
colors: ['red', 'green', 'blue'] colors: ['red', 'green', 'blue']
}); });
expect(widget.events.length).to.equal(0); expect(component.events.length).to.equal(0);
widget.input = { component.input = {
colors: ['red', 'blue'] colors: ['red', 'blue']
}; };
widget.update(); component.update();
expect(widget.events.length).to.equal(1); expect(component.events.length).to.equal(1);
expect(widget.events[0].color).to.equal('green'); expect(component.events[0].color).to.equal('green');
expect(widget.events[0].node.innerHTML).to.contain('green'); expect(component.events[0].node.innerHTML).to.contain('green');
widget.input = { component.input = {
colors: ['red'] colors: ['red']
}; };
widget.update(); component.update();
expect(widget.events.length).to.equal(2); expect(component.events.length).to.equal(2);
expect(widget.events[1].color).to.equal('blue'); expect(component.events[1].color).to.equal('blue');
expect(widget.events[1].node.innerHTML).to.contain('blue'); expect(component.events[1].node.innerHTML).to.contain('blue');
}; };

2
test/autotests/components-browser/event-handler-custom-args/components/app-fancy-button/component.js
View File

@ -6,6 +6,6 @@ module.exports = {
}, },
emitPressEvent: function() { emitPressEvent: function() {
this.emit('press', { widget: this }); this.emit('press', { component: this });
} }
}; };

14
test/autotests/components-browser/event-handler-custom-args/test.js
View File

@ -1,15 +1,15 @@
var expect = require('chai').expect; var expect = require('chai').expect;
module.exports = function(helpers) { module.exports = function(helpers) {
var widget = helpers.mount(require('./index'), {}); var component = helpers.mount(require('./index'), {});
widget.getWidget('ok').emitPressEvent(); component.getComponent('ok').emitPressEvent();
expect(widget.pressEvent[0].type).to.equal('ok'); expect(component.pressEvent[0].type).to.equal('ok');
expect(widget.pressEvent[1].widget).to.equal(widget.getWidget('ok')); expect(component.pressEvent[1].component).to.equal(component.getComponent('ok'));
widget.getWidget('cancel').emitPressEvent(); component.getComponent('cancel').emitPressEvent();
expect(widget.pressEvent[0].type).to.equal('cancel'); expect(component.pressEvent[0].type).to.equal('cancel');
expect(widget.pressEvent[1].widget).to.equal(widget.getWidget('cancel')); expect(component.pressEvent[1].component).to.equal(component.getComponent('cancel'));
}; };

24
test/autotests/components-browser/event-handler-dom-args-bubbling-multiple-top-level-elements/test.js
View File

@ -1,23 +1,23 @@
var expect = require('chai').expect; var expect = require('chai').expect;
module.exports = function(helpers) { module.exports = function(helpers) {
var widget = helpers.mount(require('./index'), {}); var component = helpers.mount(require('./index'), {});
expect(widget.buttonClickCalls.length).to.equal(0); expect(component.buttonClickCalls.length).to.equal(0);
helpers.triggerClick(widget.getEl('ok')); helpers.triggerClick(component.getEl('ok'));
expect(widget.buttonClickCalls.length).to.equal(1); expect(component.buttonClickCalls.length).to.equal(1);
expect(widget.buttonClickCalls[0][0]).to.equal('ok'); expect(component.buttonClickCalls[0][0]).to.equal('ok');
expect(widget.buttonClickCalls[0][1].stopPropagation).to.be.a('function'); expect(component.buttonClickCalls[0][1].stopPropagation).to.be.a('function');
expect(widget.buttonClickCalls[0][2].innerHTML).to.equal('OK'); expect(component.buttonClickCalls[0][2].innerHTML).to.equal('OK');
helpers.triggerClick(widget.getEl('cancel')); helpers.triggerClick(component.getEl('cancel'));
expect(widget.buttonClickCalls.length).to.equal(2); expect(component.buttonClickCalls.length).to.equal(2);
expect(widget.buttonClickCalls[1][0]).to.equal('cancel'); expect(component.buttonClickCalls[1][0]).to.equal('cancel');
expect(widget.buttonClickCalls[1][1].stopPropagation).to.be.a('function'); expect(component.buttonClickCalls[1][1].stopPropagation).to.be.a('function');
expect(widget.buttonClickCalls[1][2].innerHTML).to.equal('Cancel'); expect(component.buttonClickCalls[1][2].innerHTML).to.equal('Cancel');
}; };

24
test/autotests/components-browser/event-handler-dom-args-bubbling/test.js
View File

@ -1,23 +1,23 @@
var expect = require('chai').expect; var expect = require('chai').expect;
module.exports = function(helpers) { module.exports = function(helpers) {
var widget = helpers.mount(require('./index'), {}); var component = helpers.mount(require('./index'), {});
expect(widget.buttonClickCalls.length).to.equal(0); expect(component.buttonClickCalls.length).to.equal(0);
helpers.triggerClick(widget.getEl('ok')); helpers.triggerClick(component.getEl('ok'));
expect(widget.buttonClickCalls.length).to.equal(1); expect(component.buttonClickCalls.length).to.equal(1);
expect(widget.buttonClickCalls[0][0]).to.equal('ok'); expect(component.buttonClickCalls[0][0]).to.equal('ok');
expect(widget.buttonClickCalls[0][1].stopPropagation).to.be.a('function'); expect(component.buttonClickCalls[0][1].stopPropagation).to.be.a('function');
expect(widget.buttonClickCalls[0][2].innerHTML).to.equal('OK'); expect(component.buttonClickCalls[0][2].innerHTML).to.equal('OK');
helpers.triggerClick(widget.getEl('cancel')); helpers.triggerClick(component.getEl('cancel'));
expect(widget.buttonClickCalls.length).to.equal(2); expect(component.buttonClickCalls.length).to.equal(2);
expect(widget.buttonClickCalls[1][0]).to.equal('cancel'); expect(component.buttonClickCalls[1][0]).to.equal('cancel');
expect(widget.buttonClickCalls[1][1].stopPropagation).to.be.a('function'); expect(component.buttonClickCalls[1][1].stopPropagation).to.be.a('function');
expect(widget.buttonClickCalls[1][2].innerHTML).to.equal('Cancel'); expect(component.buttonClickCalls[1][2].innerHTML).to.equal('Cancel');
}; };

20
test/autotests/components-browser/event-handler-dom-args-non-bubbling/test.js
View File

@ -1,19 +1,19 @@
var expect = require('chai').expect; var expect = require('chai').expect;
module.exports = function(helpers) { module.exports = function(helpers) {
var widget = helpers.mount(require('./index'), {}); var component = helpers.mount(require('./index'), {});
expect(widget.mouseMoveEvent).to.equal(undefined); expect(component.mouseMoveEvent).to.equal(undefined);
helpers.triggerMouseMove(widget.getEl('ok')); helpers.triggerMouseMove(component.getEl('ok'));
expect(widget.mouseMoveEvent[0]).to.equal('ok'); expect(component.mouseMoveEvent[0]).to.equal('ok');
expect(widget.mouseMoveEvent[1].stopPropagation).to.be.a('function'); expect(component.mouseMoveEvent[1].stopPropagation).to.be.a('function');
expect(widget.mouseMoveEvent[2].innerHTML).to.equal('OK'); expect(component.mouseMoveEvent[2].innerHTML).to.equal('OK');
helpers.triggerMouseMove(widget.getEl('cancel')); helpers.triggerMouseMove(component.getEl('cancel'));
expect(widget.mouseMoveEvent[0]).to.equal('cancel'); expect(component.mouseMoveEvent[0]).to.equal('cancel');
expect(widget.mouseMoveEvent[1].stopPropagation).to.be.a('function'); expect(component.mouseMoveEvent[1].stopPropagation).to.be.a('function');
expect(widget.mouseMoveEvent[2].innerHTML).to.equal('Cancel'); expect(component.mouseMoveEvent[2].innerHTML).to.equal('Cancel');
}; };

2
test/autotests/components-browser/extend-component/components/app-button/component.js
View File

@ -9,7 +9,7 @@ module.exports = {
}, },
handleClick: function(event) { handleClick: function(event) {
// Every Widget instance is also an EventEmitter instance. // Every Component instance is also an EventEmitter instance.
// We will emit a custom "click" event when a DOM click event // We will emit a custom "click" event when a DOM click event
// is triggered // is triggered
this.emit('click', { this.emit('click', {

8
test/autotests/components-browser/extend-component/test.js
View File

@ -1,8 +1,8 @@
var expect = require('chai').expect; var expect = require('chai').expect;
var markoWidgets = require('marko/widgets'); var markoComponents = require('marko/components');
module.exports = function(helpers) { module.exports = function(helpers) {
var checkboxWidget = helpers.mount(require('./components/app-checkbox'), { var checkboxComponent = helpers.mount(require('./components/app-checkbox'), {
checked: true, checked: true,
'class': 'my-checkbox', 'class': 'my-checkbox',
data: 123 data: 123
@ -11,7 +11,7 @@ module.exports = function(helpers) {
var el = helpers.targetEl.querySelector('.my-checkbox'); var el = helpers.targetEl.querySelector('.my-checkbox');
expect(el != null).to.equal(true); expect(el != null).to.equal(true);
var widgetForEl = markoWidgets.getWidgetForEl(el); var componentForEl = markoComponents.getComponentForEl(el);
expect(widgetForEl).to.equal(checkboxWidget); expect(componentForEl).to.equal(checkboxComponent);
}; };

4
test/autotests/components-browser/forceUpdate/test.js
View File

@ -1,4 +1,4 @@
module.exports = function(helpers, done) { module.exports = function(helpers, done) {
var widget = helpers.mount(require('./index.marko'), {}); var component = helpers.mount(require('./index.marko'), {});
widget.test(done); component.test(done);
}; };

16
test/autotests/components-browser/include-preserve-old/test.js
View File

@ -1,20 +1,20 @@
var expect = require('chai').expect; var expect = require('chai').expect;
module.exports = function(helpers) { module.exports = function(helpers) {
var widget = helpers.mount(require('./index'), { var component = helpers.mount(require('./index'), {
name: 'Frank', name: 'Frank',
index: 0 index: 0
}); });
var fooWidget = widget.getWidget('foo'); var fooComponent = component.getComponent('foo');
expect(fooWidget.el.querySelector('.body').innerHTML).to.equal('Current index: 0'); expect(fooComponent.el.querySelector('.body').innerHTML).to.equal('Current index: 0');
expect(fooWidget.el.querySelector('span').innerHTML).to.equal('Hello Frank!'); expect(fooComponent.el.querySelector('span').innerHTML).to.equal('Hello Frank!');
fooWidget.state.name = 'Jane'; fooComponent.state.name = 'Jane';
fooWidget.update(); fooComponent.update();
expect(fooWidget.el.querySelector('.body').innerHTML).to.equal('Current index: 0'); expect(fooComponent.el.querySelector('.body').innerHTML).to.equal('Current index: 0');
expect(fooWidget.el.querySelector('span').innerHTML).to.equal('Hello Jane!'); expect(fooComponent.el.querySelector('span').innerHTML).to.equal('Hello Jane!');
}; };

6
test/autotests/components-browser/input-checkbox/test.js
View File

@ -1,10 +1,10 @@
var expect = require('chai').expect; var expect = require('chai').expect;
module.exports = function(helpers) { module.exports = function(helpers) {
var widget = helpers.mount(require('./index.marko')); var component = helpers.mount(require('./index.marko'));
var firstCheckbox = widget.getEl('first'); var firstCheckbox = component.getEl('first');
var secondCheckbox = widget.getEl('second'); var secondCheckbox = component.getEl('second');
expect(firstCheckbox.checked).to.equal(true); expect(firstCheckbox.checked).to.equal(true);
expect(secondCheckbox.checked).to.equal(false); expect(secondCheckbox.checked).to.equal(false);

22
test/autotests/components-browser/input-no-change-nested/components/foo/test.js
View File

@ -1,31 +1,31 @@
var expect = require('chai').expect; var expect = require('chai').expect;
module.exports = function(helpers) { module.exports = function(helpers) {
var widget = helpers.mount(require('./index.marko'), { var component = helpers.mount(require('./index.marko'), {
name: 'Frank' name: 'Frank'
}); });
expect(widget.el.querySelector('.render-count').innerHTML).to.equal('0'); expect(component.el.querySelector('.render-count').innerHTML).to.equal('0');
expect(widget.el.querySelector('.name').innerHTML).to.equal('Frank'); expect(component.el.querySelector('.name').innerHTML).to.equal('Frank');
// Rerender with a new props object that has the shallow properties // Rerender with a new props object that has the shallow properties
widget.input = { component.input = {
name: 'Frank' name: 'Frank'
}; };
widget.update(); component.update();
expect(widget.el.querySelector('.render-count').innerHTML).to.equal('0'); expect(component.el.querySelector('.render-count').innerHTML).to.equal('0');
expect(widget.el.querySelector('.name').innerHTML).to.equal('Frank'); expect(component.el.querySelector('.name').innerHTML).to.equal('Frank');
// Rerender with a new props object that has the shallow properties // Rerender with a new props object that has the shallow properties
widget.input = { component.input = {
name: 'John' name: 'John'
}; };
widget.update(); component.update();
expect(widget.el.querySelector('.render-count').innerHTML).to.equal('1'); expect(component.el.querySelector('.render-count').innerHTML).to.equal('1');
expect(widget.el.querySelector('.name').innerHTML).to.equal('John'); expect(component.el.querySelector('.name').innerHTML).to.equal('John');
}; };

22
test/autotests/components-browser/input-no-change-nested/test.js
View File

@ -1,31 +1,31 @@
var expect = require('chai').expect; var expect = require('chai').expect;
module.exports = function(helpers) { module.exports = function(helpers) {
var widget = helpers.mount(require('./index.marko'), { var component = helpers.mount(require('./index.marko'), {
name: 'Frank' name: 'Frank'
}); });
expect(widget.getWidget('foo').el.querySelector('.render-count').innerHTML).to.equal('0'); expect(component.getComponent('foo').el.querySelector('.render-count').innerHTML).to.equal('0');
expect(widget.getWidget('foo').el.querySelector('.name').innerHTML).to.equal('Frank'); expect(component.getComponent('foo').el.querySelector('.name').innerHTML).to.equal('Frank');
// Rerender with a new props object that has the shallow properties // Rerender with a new props object that has the shallow properties
widget.input = { component.input = {
name: 'Frank' name: 'Frank'
}; };
widget.update(); component.update();
expect(widget.getWidget('foo').el.querySelector('.render-count').innerHTML).to.equal('0'); expect(component.getComponent('foo').el.querySelector('.render-count').innerHTML).to.equal('0');
expect(widget.getWidget('foo').el.querySelector('.name').innerHTML).to.equal('Frank'); expect(component.getComponent('foo').el.querySelector('.name').innerHTML).to.equal('Frank');
// Rerender with a new props object that has the shallow properties // Rerender with a new props object that has the shallow properties
widget.input = { component.input = {
name: 'John' name: 'John'
}; };
widget.update(); component.update();
expect(widget.getWidget('foo').el.querySelector('.render-count').innerHTML).to.equal('1'); expect(component.getComponent('foo').el.querySelector('.render-count').innerHTML).to.equal('1');
expect(widget.getWidget('foo').el.querySelector('.name').innerHTML).to.equal('John'); expect(component.getComponent('foo').el.querySelector('.name').innerHTML).to.equal('John');
}; };

22
test/autotests/components-browser/input-no-change/test.js
View File

@ -1,31 +1,31 @@
var expect = require('chai').expect; var expect = require('chai').expect;
module.exports = function(helpers) { module.exports = function(helpers) {
var widget = helpers.mount(require('./index.marko'), { var component = helpers.mount(require('./index.marko'), {
name: 'Frank' name: 'Frank'
}); });
expect(widget.el.querySelector('.render-count').innerHTML).to.equal('0'); expect(component.el.querySelector('.render-count').innerHTML).to.equal('0');
expect(widget.el.querySelector('.name').innerHTML).to.equal('Frank'); expect(component.el.querySelector('.name').innerHTML).to.equal('Frank');
// Rerender with a new props object that has the shallow properties // Rerender with a new props object that has the shallow properties
widget.input = { component.input = {
name: 'Frank' name: 'Frank'
}; };
widget.update(); component.update();
expect(widget.el.querySelector('.render-count').innerHTML).to.equal('0'); expect(component.el.querySelector('.render-count').innerHTML).to.equal('0');
expect(widget.el.querySelector('.name').innerHTML).to.equal('Frank'); expect(component.el.querySelector('.name').innerHTML).to.equal('Frank');
// Rerender with a new props object that has the shallow properties // Rerender with a new props object that has the shallow properties
widget.input = { component.input = {
name: 'John' name: 'John'
}; };
widget.update(); component.update();
expect(widget.el.querySelector('.render-count').innerHTML).to.equal('1'); expect(component.el.querySelector('.render-count').innerHTML).to.equal('1');
expect(widget.el.querySelector('.name').innerHTML).to.equal('John'); expect(component.el.querySelector('.name').innerHTML).to.equal('John');
}; };

10
test/autotests/components-browser/input-no-value/test.js
View File

@ -1,12 +1,12 @@
var expect = require('chai').expect; var expect = require('chai').expect;
module.exports = function(helpers) { module.exports = function(helpers) {
var widget = helpers.mount(require('./index.marko')); var component = helpers.mount(require('./index.marko'));
expect(widget.getEl('searchInput').value).to.equal(''); expect(component.getEl('searchInput').value).to.equal('');
widget.increment(); component.increment();
widget.update(); component.update();
expect(widget.getEl('searchInput').value).to.equal(''); expect(component.getEl('searchInput').value).to.equal('');
}; };

34
test/autotests/components-browser/input-persisted-nested-component/test.js
View File

@ -1,31 +1,31 @@
var expect = require('chai').expect; var expect = require('chai').expect;
module.exports = function(helpers) { module.exports = function(helpers) {
var widget = helpers.mount(require('./index.marko'), { var component = helpers.mount(require('./index.marko'), {
color:'red' color:'red'
}); });
expect(widget.el.getAttribute('style')).to.equal('color:red;'); expect(component.el.getAttribute('style')).to.equal('color:red;');
expect(widget.getWidget('counter').el.getAttribute('style')).to.equal('color:red;'); expect(component.getComponent('counter').el.getAttribute('style')).to.equal('color:red;');
expect(widget.getWidget('counter').el.querySelector('.count').innerHTML).to.equal('0'); expect(component.getComponent('counter').el.querySelector('.count').innerHTML).to.equal('0');
widget.getWidget('counter').increment(); component.getComponent('counter').increment();
widget.getWidget('counter').update(); component.getComponent('counter').update();
expect(widget.el.getAttribute('style')).to.equal('color:red;'); expect(component.el.getAttribute('style')).to.equal('color:red;');
expect(widget.getWidget('counter').el.getAttribute('style')).to.equal('color:red;'); expect(component.getComponent('counter').el.getAttribute('style')).to.equal('color:red;');
expect(widget.getWidget('counter').el.querySelector('.count').innerHTML).to.equal('1'); expect(component.getComponent('counter').el.querySelector('.count').innerHTML).to.equal('1');
widget.updateColor('green'); component.updateColor('green');
widget.update(); component.update();
expect(widget.el.getAttribute('style')).to.equal('color:green;'); expect(component.el.getAttribute('style')).to.equal('color:green;');
expect(widget.getWidget('counter').el.getAttribute('style')).to.equal('color:green;'); expect(component.getComponent('counter').el.getAttribute('style')).to.equal('color:green;');
expect(widget.getWidget('counter').el.querySelector('.count').innerHTML).to.equal('1'); expect(component.getComponent('counter').el.querySelector('.count').innerHTML).to.equal('1');
// //
// expect(widget.el.style.color).to.equal('#09c;'); // expect(component.el.style.color).to.equal('#09c;');
// expect(widget.getWidget('counter').el.style.color).to.equal('#09c;'); // expect(component.getComponent('counter').el.style.color).to.equal('#09c;');
// //
// expect(widget.getEl('current').getAttribute('style')).to.equal('color:#09c;'); // expect(component.getEl('current').getAttribute('style')).to.equal('color:#09c;');
}; };

10
test/autotests/components-browser/input-persisted/test.js
View File

@ -1,14 +1,14 @@
var expect = require('chai').expect; var expect = require('chai').expect;
module.exports = function(helpers) { module.exports = function(helpers) {
var widget = helpers.mount(require('./index.marko'), { var component = helpers.mount(require('./index.marko'), {
color:'#09c' color:'#09c'
}); });
expect(widget.getEl('current').getAttribute('style')).to.equal('color:#09c;'); expect(component.getEl('current').getAttribute('style')).to.equal('color:#09c;');
widget.increment(); component.increment();
widget.update(); component.update();
expect(widget.getEl('current').getAttribute('style')).to.equal('color:#09c;'); expect(component.getEl('current').getAttribute('style')).to.equal('color:#09c;');
}; };

10
test/autotests/components-browser/input-value-zero/test.js
View File

@ -1,14 +1,14 @@
var expect = require('chai').expect; var expect = require('chai').expect;
module.exports = function(helpers) { module.exports = function(helpers) {
var widget = helpers.mount(require('./index.marko'), { var component = helpers.mount(require('./index.marko'), {
value: 1 value: 1
}); });
expect(widget.getEl('input').value).to.equal('1'); expect(component.getEl('input').value).to.equal('1');
widget.state.value = 0; component.state.value = 0;
widget.update(); component.update();
expect(widget.getEl('input').value).to.equal('0'); expect(component.getEl('input').value).to.equal('0');
}; };

18
test/autotests/components-browser/lifecyle-hooks-constructor/test.js
View File

@ -1,19 +1,19 @@
var expect = require('chai').expect; var expect = require('chai').expect;
module.exports = function(helpers) { module.exports = function(helpers) {
var widget = helpers.mount(require('./index'), { name: 'Frank' }); var component = helpers.mount(require('./index'), { name: 'Frank' });
expect(widget.el.querySelector('.name').innerHTML).to.equal('Frank'); expect(component.el.querySelector('.name').innerHTML).to.equal('Frank');
expect(widget.onInputCalls).to.deep.equal([ expect(component.onInputCalls).to.deep.equal([
{ {
name: 'INITIAL' name: 'INITIAL'
} }
]); ]);
expect(widget.name).to.equal('Frank'); expect(component.name).to.equal('Frank');
widget.input = { name: 'John' }; component.input = { name: 'John' };
widget.update(); component.update();
expect(widget.onInputCalls).to.deep.equal([ expect(component.onInputCalls).to.deep.equal([
{ {
name: 'INITIAL' name: 'INITIAL'
}, },
@ -22,6 +22,6 @@ module.exports = function(helpers) {
} }
]); ]);
expect(widget.el.querySelector('.name').innerHTML).to.equal('John'); expect(component.el.querySelector('.name').innerHTML).to.equal('John');
expect(widget.name).to.equal('John'); expect(component.name).to.equal('John');
}; };

4
test/autotests/components-browser/lifecyle-hooks-destroy/test.js
View File

@ -2,9 +2,9 @@ var expect = require('chai').expect;
var hooks = require('./hooks'); var hooks = require('./hooks');
module.exports = function(helpers) { module.exports = function(helpers) {
var widget = helpers.mount(require('./index'), { name: 'Frank' }); var component = helpers.mount(require('./index'), { name: 'Frank' });
widget.destroy(); component.destroy();
expect(hooks.getHookNames()).deep.equal(['root:destroy', 'foo:destroy']); expect(hooks.getHookNames()).deep.equal(['root:destroy', 'foo:destroy']);
}; };

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