Main component: {{componentName}}
9 | 10 |{{foobar}}
11 | {{#with a='1' b='2'}} 12 | 13 |{{foobar2}}
14 | {{/with}} 15 |{{foobar3}}
16 | {{> normalSubtemplate}} 17 | {{> FooComponent}} 18 | {{#if isMainComponent}} 19 |Subtemplate
27 | 28 |{{foobar}}
29 | {{#with a='3' b='4'}} 30 | {{! Event handling should be done by MainComponent as well. }} 31 | 32 |{{foobar2}}
33 | {{/with}} 34 |{{foobar3}}
35 | 36 | 37 | 38 | {{! Helpers here should not resolve becasue ther are defined in another component. }} 39 |Other component: {{componentName}}
40 | 41 |{{foobar}}
42 | {{#with a='5' b='6'}} 43 | {{! But event handler from the MainComponent should still handle the click here. }} 44 | 45 |{{foobar2}}
46 | {{/with}} 47 |{{foobar3}}
48 | 49 | 50 | 51 |MyComponent, namespaced, loaded.
60 |Data context: {{dataContext}}
61 | -------------------------------------------------------------------------------- /example/packages/peerlibrary:blaze-components: -------------------------------------------------------------------------------- 1 | ../.. 2 | -------------------------------------------------------------------------------- /lib.coffee: -------------------------------------------------------------------------------- 1 | # TODO: Deduplicate between blaze component and common component packages. 2 | createMatcher = (propertyOrMatcherOrFunction, checkMixins) -> 3 | if _.isString propertyOrMatcherOrFunction 4 | property = propertyOrMatcherOrFunction 5 | propertyOrMatcherOrFunction = (child, parent) => 6 | # If child is parent, we might get into an infinite loop if this is 7 | # called from getFirstWith, so in that case we do not use getFirstWith. 8 | if checkMixins and child isnt parent and child.getFirstWith 9 | !!child.getFirstWith null, property 10 | else 11 | property of child 12 | 13 | else if not _.isFunction propertyOrMatcherOrFunction 14 | assert _.isObject propertyOrMatcherOrFunction 15 | matcher = propertyOrMatcherOrFunction 16 | propertyOrMatcherOrFunction = (child, parent) => 17 | for property, value of matcher 18 | # If child is parent, we might get into an infinite loop if this is 19 | # called from getFirstWith, so in that case we do not use getFirstWith. 20 | if checkMixins and child isnt parent and child.getFirstWith 21 | childWithProperty = child.getFirstWith null, property 22 | else 23 | childWithProperty = child if property of child 24 | return false unless childWithProperty 25 | 26 | if _.isFunction childWithProperty[property] 27 | return false unless childWithProperty[property]() is value 28 | else 29 | return false unless childWithProperty[property] is value 30 | 31 | true 32 | 33 | propertyOrMatcherOrFunction 34 | 35 | getTemplateInstance = (view, skipBlockHelpers) -> 36 | while view and not view._templateInstance 37 | if skipBlockHelpers 38 | view = view.parentView 39 | else 40 | view = view.originalParentView or view.parentView 41 | 42 | view?._templateInstance 43 | 44 | # More or less the same as aldeed:template-extension's template.get('component') just specialized. 45 | # It allows us to not have a dependency on template-extension package and that we can work with Iron 46 | # Router which has its own DynamicTemplate class which is not patched by template-extension and thus 47 | # does not have .get() method. 48 | templateInstanceToComponent = (templateInstanceFunc, skipBlockHelpers) -> 49 | templateInstance = templateInstanceFunc?() 50 | 51 | # Iron Router uses its own DynamicTemplate which is not a proper template instance, but it is 52 | # passed in as such, so we want to find the real one before we start searching for the component. 53 | templateInstance = getTemplateInstance templateInstance?.view, skipBlockHelpers 54 | 55 | while templateInstance 56 | return templateInstance.component if 'component' of templateInstance 57 | 58 | if skipBlockHelpers 59 | templateInstance = getTemplateInstance templateInstance.view.parentView, skipBlockHelpers 60 | else 61 | templateInstance = getTemplateInstance (templateInstance.view.originalParentView or templateInstance.view.parentView), skipBlockHelpers 62 | 63 | null 64 | 65 | getTemplateInstanceFunction = (view, skipBlockHelpers) -> 66 | templateInstance = getTemplateInstance view, skipBlockHelpers 67 | -> 68 | templateInstance 69 | 70 | class ComponentsNamespaceReference 71 | constructor: (@namespace, @templateInstance) -> 72 | 73 | # We extend the original dot operator to support {{> Foo.Bar}}. This goes through a getTemplateHelper path, but 74 | # we want to redirect it to the getTemplate path. So we mark it in getTemplateHelper and then here call getTemplate. 75 | originalDot = Spacebars.dot 76 | Spacebars.dot = (value, args...) -> 77 | if value instanceof ComponentsNamespaceReference 78 | return Blaze._getTemplate "#{value.namespace}.#{args.join '.'}", value.templateInstance 79 | 80 | originalDot value, args... 81 | 82 | originalInclude = Spacebars.include 83 | Spacebars.include = (templateOrFunction, args...) -> 84 | # If ComponentsNamespaceReference gets all the way to the Spacebars.include it means that we are in the situation 85 | # where there is both namespace and component with the same name, and user is including a component. But namespace 86 | # reference is created instead (because we do not know in advance that there is no Spacebars.dot call around lookup 87 | # call). So we dereference the reference and try to resolve a template. Of course, a component might not really exist. 88 | if templateOrFunction instanceof ComponentsNamespaceReference 89 | templateOrFunction = Blaze._getTemplate templateOrFunction.namespace, templateOrFunction.templateInstance 90 | 91 | originalInclude templateOrFunction, args... 92 | 93 | # We override the original lookup method with a similar one, which supports components as well. 94 | # 95 | # Now the order of the lookup will be, in order: 96 | # a helper of the current template 97 | # a property of the current component (not the BlazeComponent.currentComponent() though, but @component()) 98 | # a helper of the current component's base template (not the BlazeComponent.currentComponent() though, but @component()) 99 | # the name of a component 100 | # the name of a template 101 | # global helper 102 | # a property of the data context 103 | # 104 | # Returns a function, a non-function value, or null. If a function is found, it is bound appropriately. 105 | # 106 | # NOTE: This function must not establish any reactive dependencies itself. If there is any reactivity 107 | # in the value, lookup should return a function. 108 | # 109 | # TODO: Should we also lookup for a property of the component-level data context (and template-level data context)? 110 | 111 | Blaze._getTemplateHelper = (template, name, templateInstance) -> 112 | isKnownOldStyleHelper = false 113 | if template.__helpers.has name 114 | helper = template.__helpers.get name 115 | if helper is Blaze._OLDSTYLE_HELPER 116 | isKnownOldStyleHelper = true 117 | else if helper? 118 | return wrapHelper bindDataContext(helper), templateInstance 119 | else 120 | return null 121 | 122 | # Old-style helper. 123 | if name of template 124 | # Only warn once per helper. 125 | unless isKnownOldStyleHelper 126 | template.__helpers.set name, Blaze._OLDSTYLE_HELPER 127 | unless template._NOWARN_OLDSTYLE_HELPERS 128 | Blaze._warn "Assigning helper with `" + template.viewName + "." + name + " = ...` is deprecated. Use `" + template.viewName + ".helpers(...)` instead." 129 | if template[name]? 130 | return wrapHelper bindDataContext(template[name]), templateInstance 131 | else 132 | return null 133 | 134 | return null unless templateInstance 135 | 136 | # Do not resolve component helpers if inside Template.dynamic. The reason is that Template.dynamic uses a data context 137 | # value with name "template" internally. But when used inside a component the data context lookup is then resolved 138 | # into a current component's template method and not the data context "template". To force the data context resolving 139 | # Template.dynamic should use "this.template" in its templates, but it does not, so we have a special case here for it. 140 | return null if template.viewName in ['Template.__dynamicWithDataContext', 'Template.__dynamic'] 141 | 142 | # Blaze.View::lookup should not introduce any reactive dependencies, but we can simply ignore reactivity here because 143 | # template instance probably cannot change without reconstructing the component as well. 144 | component = Tracker.nonreactive -> 145 | # We want to skip any block helper. {{method}} should resolve to 146 | # {{component.method}} and not to {{currentComponent.method}}. 147 | templateInstanceToComponent templateInstance, true 148 | 149 | # Component. 150 | if component 151 | # This will first search on the component and then continue with mixins. 152 | if mixinOrComponent = component.getFirstWith null, name 153 | return wrapHelper bindComponent(mixinOrComponent, mixinOrComponent[name]), templateInstance 154 | 155 | # A special case to support {{> Foo.Bar}}. This goes through a getTemplateHelper path, but we want to redirect 156 | # it to the getTemplate path. So we mark it and leave to Spacebars.dot to call getTemplate. 157 | # TODO: We should provide a BaseComponent.getComponentsNamespace method instead of accessing components directly. 158 | if name and name of BlazeComponent.components 159 | return new ComponentsNamespaceReference name, templateInstance 160 | 161 | # Maybe a preexisting template helper on the component's base template. 162 | if component 163 | # We know that component is really a component. 164 | if (helper = component._componentInternals?.templateBase?.__helpers.get name)? 165 | return wrapHelper bindDataContext(helper), templateInstance 166 | 167 | null 168 | 169 | share.inExpandAttributes = false 170 | 171 | bindComponent = (component, helper) -> 172 | if _.isFunction helper 173 | (args...) -> 174 | result = helper.apply component, args 175 | 176 | # If we are expanding attributes and this is an object with dynamic attributes, 177 | # then we want to bind all possible event handlers to the component as well. 178 | if share.inExpandAttributes and _.isObject result 179 | for name, value of result when share.EVENT_HANDLER_REGEX.test name 180 | if _.isFunction value 181 | result[name] = _.bind value, component 182 | else if _.isArray value 183 | result[name] = _.map value, (fun) -> 184 | if _.isFunction fun 185 | _.bind fun, component 186 | else 187 | fun 188 | 189 | result 190 | else 191 | helper 192 | 193 | bindDataContext = (helper) -> 194 | if _.isFunction helper 195 | -> 196 | data = Blaze.getData() 197 | data ?= {} 198 | helper.apply data, arguments 199 | else 200 | helper 201 | 202 | wrapHelper = (f, templateFunc) -> 203 | # XXX COMPAT WITH METEOR 1.0.3.2 204 | return Blaze._wrapCatchingExceptions f, 'template helper' unless Blaze.Template._withTemplateInstanceFunc 205 | 206 | return f unless _.isFunction f 207 | 208 | -> 209 | self = @ 210 | args = arguments 211 | 212 | Blaze.Template._withTemplateInstanceFunc templateFunc, -> 213 | Blaze._wrapCatchingExceptions(f, 'template helper').apply self, args 214 | 215 | if Blaze.Template._withTemplateInstanceFunc 216 | withTemplateInstanceFunc = Blaze.Template._withTemplateInstanceFunc 217 | else 218 | # XXX COMPAT WITH METEOR 1.0.3.2. 219 | withTemplateInstanceFunc = (templateInstance, f) -> 220 | f() 221 | 222 | getTemplateBase = (component) -> 223 | # We do not allow template to be a reactive method. 224 | Tracker.nonreactive -> 225 | componentTemplate = component.template() 226 | if _.isString componentTemplate 227 | templateBase = Template[componentTemplate] 228 | throw new Error "Template '#{componentTemplate}' cannot be found." unless templateBase 229 | else if componentTemplate 230 | templateBase = componentTemplate 231 | else 232 | throw new Error "Template for the component '#{component.componentName() or 'unnamed'}' not provided." 233 | 234 | templateBase 235 | 236 | callTemplateBaseHooks = (component, hookName) -> 237 | # We want to call template base hooks only when we are calling this function on a component itself. 238 | return unless component is component.component() 239 | 240 | templateInstance = Tracker.nonreactive -> 241 | component._componentInternals.templateInstance() 242 | callbacks = component._componentInternals.templateBase._getCallbacks hookName 243 | Template._withTemplateInstanceFunc( 244 | -> 245 | templateInstance 246 | , 247 | -> 248 | for callback in callbacks 249 | callback.call templateInstance 250 | ) 251 | 252 | return 253 | 254 | wrapViewAndTemplate = (currentView, f) -> 255 | # For template content wrapped inside the block helper, we want to skip the block 256 | # helper when searching for corresponding template. This means that Template.instance() 257 | # will return the component's template, while BlazeComponent.currentComponent() will 258 | # return the component inside. 259 | templateInstance = getTemplateInstanceFunction currentView, true 260 | 261 | # We set template instance to match the current view (mostly, only not when inside 262 | # the block helper). The latter we use for BlazeComponent.currentComponent(), but 263 | # it is good that both template instance and current view correspond to each other 264 | # as much as possible. 265 | withTemplateInstanceFunc templateInstance, -> 266 | # We set view based on the current view so that inside event handlers 267 | # BlazeComponent.currentData() (and Blaze.getData() and Template.currentData()) 268 | # returns data context of event target and not component/template. Moreover, 269 | # inside event handlers BlazeComponent.currentComponent() returns the component 270 | # of event target. 271 | Blaze._withCurrentView currentView, -> 272 | f() 273 | 274 | addEvents = (view, component) -> 275 | eventsList = component.events() 276 | 277 | throw new Error "'events' method from the component '#{component.componentName() or 'unnamed'}' did not return a list of event maps." unless _.isArray eventsList 278 | 279 | for events in eventsList 280 | eventMap = {} 281 | 282 | for spec, handler of events 283 | do (spec, handler) -> 284 | eventMap[spec] = (args...) -> 285 | event = args[0] 286 | 287 | currentView = Blaze.getView event.currentTarget 288 | wrapViewAndTemplate currentView, -> 289 | handler.apply component, args 290 | 291 | # Make sure CoffeeScript does not return anything. 292 | # Returning from event handlers is deprecated. 293 | return 294 | 295 | Blaze._addEventMap view, eventMap, view 296 | 297 | return 298 | 299 | originalGetTemplate = Blaze._getTemplate 300 | Blaze._getTemplate = (name, templateInstance) -> 301 | # Blaze.View::lookup should not introduce any reactive dependencies, so we are making sure it is so. 302 | template = Tracker.nonreactive -> 303 | if Blaze.currentView 304 | parentComponent = BlazeComponent.currentComponent() 305 | else 306 | # We do not skip block helpers to assure that when block helpers are used, 307 | # component tree integrates them nicely into a tree. 308 | parentComponent = templateInstanceToComponent templateInstance, false 309 | 310 | BlazeComponent.getComponent(name)?.renderComponent parentComponent 311 | return template if template and (template instanceof Blaze.Template or _.isFunction template) 312 | 313 | originalGetTemplate name 314 | 315 | registerHooks = (template, hooks) -> 316 | if template.onCreated 317 | template.onCreated hooks.onCreated 318 | template.onRendered hooks.onRendered 319 | template.onDestroyed hooks.onDestroyed 320 | else 321 | # XXX COMPAT WITH METEOR 1.0.3.2. 322 | template.created = hooks.onCreated 323 | template.rendered = hooks.onRendered 324 | template.destroyed = hooks.onDestroyed 325 | 326 | registerFirstCreatedHook = (template, onCreated) -> 327 | if template._callbacks 328 | template._callbacks.created.unshift onCreated 329 | else 330 | # XXX COMPAT WITH METEOR 1.0.3.2. 331 | oldCreated = template.created 332 | template.created = -> 333 | onCreated.call @ 334 | oldCreated?.call @ 335 | 336 | # We make Template.dynamic resolve to the component if component name is specified as a template name, and not 337 | # to the non-component template which is probably used only for the content. We simply reuse Blaze._getTemplate. 338 | # TODO: How to pass args? 339 | # Maybe simply by using Spacebars nested expressions (https://github.com/meteor/meteor/pull/4101)? 340 | # Template.dynamic template="..." data=(args ...)? But this exposes the fact that args are passed as data context. 341 | # Maybe we should simply override Template.dynamic and add "args" argument? 342 | # TODO: This can be removed once https://github.com/meteor/meteor/pull/4036 is merged in. 343 | Template.__dynamicWithDataContext.__helpers.set 'chooseTemplate', (name) -> 344 | Blaze._getTemplate name, => 345 | Template.instance() 346 | 347 | argumentsConstructor = -> 348 | # This class should never really be created. 349 | assert false 350 | 351 | # TODO: Find a way to pass arguments to the component without having to introduce one intermediary data context into the data context hierarchy. 352 | # (In fact two data contexts, because we add one more when restoring the original one.) 353 | Template.registerHelper 'args', -> 354 | obj = {} 355 | # We use custom constructor to know that it is not a real data context. 356 | obj.constructor = argumentsConstructor 357 | obj._arguments = arguments 358 | obj 359 | 360 | share.EVENT_HANDLER_REGEX = /^on[A-Z]/ 361 | 362 | share.isEventHandler = (fun) -> 363 | _.isFunction(fun) and fun.eventHandler 364 | 365 | # When event handlers are provided directly as args they are not passed through 366 | # Spacebars.event by the template compiler, so we have to do it ourselves. 367 | originalFlattenAttributes = HTML.flattenAttributes 368 | HTML.flattenAttributes = (attrs) -> 369 | if attrs = originalFlattenAttributes attrs 370 | for name, value of attrs when share.EVENT_HANDLER_REGEX.test name 371 | # Already processed by Spacebars.event. 372 | continue if share.isEventHandler value 373 | continue if _.isArray(value) and _.some value, share.isEventHandler 374 | 375 | # When event handlers are provided directly as args, 376 | # we require them to be just event handlers. 377 | if _.isArray value 378 | attrs[name] = _.map value, Spacebars.event 379 | else 380 | attrs[name] = Spacebars.event value 381 | 382 | attrs 383 | 384 | Spacebars.event = (eventHandler, args...) -> 385 | throw new Error "Event handler not a function: #{eventHandler}" unless _.isFunction eventHandler 386 | 387 | # Execute all arguments. 388 | args = Spacebars.mustacheImpl ((xs...) -> xs), args... 389 | 390 | fun = (event, eventArgs...) -> 391 | currentView = Blaze.getView event.currentTarget 392 | wrapViewAndTemplate currentView, -> 393 | # We do not have to bind "this" because event handlers are resolved 394 | # as template helpers and are already bound. We bind event handlers 395 | # in dynamic attributes already as well. 396 | eventHandler.apply null, [event].concat args, eventArgs 397 | 398 | fun.eventHandler = true 399 | 400 | fun 401 | 402 | # When converting the component to the static HTML, remove all event handlers. 403 | originalVisitTag = HTML.ToHTMLVisitor::visitTag 404 | HTML.ToHTMLVisitor::visitTag = (tag) -> 405 | if attrs = tag.attrs 406 | attrs = HTML.flattenAttributes attrs 407 | for name of attrs when share.EVENT_HANDLER_REGEX.test name 408 | delete attrs[name] 409 | tag.attrs = attrs 410 | 411 | originalVisitTag.call @, tag 412 | 413 | currentViewIfRendering = -> 414 | view = Blaze.currentView 415 | if view?._isInRender 416 | view 417 | else 418 | null 419 | 420 | contentAsFunc = (content) -> 421 | # We do not check content for validity. 422 | 423 | if !_.isFunction content 424 | return -> 425 | content 426 | 427 | content 428 | 429 | contentAsView = (content) -> 430 | # We do not check content for validity. 431 | 432 | if content instanceof Blaze.Template 433 | content.constructView() 434 | else if content instanceof Blaze.View 435 | content 436 | else 437 | Blaze.View 'render', contentAsFunc content 438 | 439 | HTMLJSExpander = Blaze._HTMLJSExpander.extend() 440 | HTMLJSExpander.def 441 | # Based on Blaze._HTMLJSExpander, but calls our expandView. 442 | visitObject: (x) -> 443 | if x instanceof Blaze.Template 444 | x = x.constructView() 445 | if x instanceof Blaze.View 446 | return expandView x, @parentView 447 | 448 | HTML.TransformingVisitor.prototype.visitObject.call @, x 449 | 450 | # Based on Blaze._expand, but uses our HTMLJSExpander. 451 | expand = (htmljs, parentView) -> 452 | parentView = parentView or currentViewIfRendering() 453 | 454 | (new HTMLJSExpander parentView: parentView).visit htmljs 455 | 456 | # Based on Blaze._expandView, but with flushing. 457 | expandView = (view, parentView) -> 458 | Blaze._createView view, parentView, true 459 | 460 | view._isInRender = true 461 | htmljs = Blaze._withCurrentView view, -> 462 | view._render() 463 | view._isInRender = false 464 | 465 | Tracker.flush() 466 | 467 | result = expand htmljs, view 468 | 469 | Tracker.flush() 470 | 471 | if Tracker.active 472 | Tracker.onInvalidate -> 473 | Blaze._destroyView view 474 | else 475 | Blaze._destroyView view 476 | 477 | Tracker.flush() 478 | 479 | result 480 | 481 | class BlazeComponent extends BaseComponent 482 | # TODO: Figure out how to do at the BaseComponent level? 483 | @getComponentForElement: (domElement) -> 484 | return null unless domElement 485 | 486 | # This uses the same check if the argument is a DOM element that Blaze._DOMRange.forElement does. 487 | throw new Error "Expected DOM element." unless domElement.nodeType is Node.ELEMENT_NODE 488 | 489 | # For DOM elements we want to return the component which matches the template 490 | # with that DOM element and not the component closest in the component tree. 491 | # So we skip the block helpers. (If DOM element is rendered by the block helper 492 | # this will find that block helper template/component.) 493 | templateInstance = getTemplateInstanceFunction Blaze.getView(domElement), true 494 | templateInstanceToComponent templateInstance, true 495 | 496 | childComponents: (nameOrComponent) -> 497 | if (component = @component()) isnt @ 498 | component.childComponents nameOrComponent 499 | else 500 | super arguments... 501 | 502 | # A version of childComponentsWith which knows about mixins. 503 | # When checking for properties it checks mixins as well. 504 | childComponentsWith: (propertyOrMatcherOrFunction) -> 505 | if (component = @component()) isnt @ 506 | component.childComponentsWith propertyOrMatcherOrFunction 507 | else 508 | assert propertyOrMatcherOrFunction 509 | 510 | propertyOrMatcherOrFunction = createMatcher propertyOrMatcherOrFunction, true 511 | 512 | super propertyOrMatcherOrFunction 513 | 514 | parentComponent: (parentComponent) -> 515 | if (component = @component()) isnt @ 516 | component.parentComponent parentComponent 517 | else 518 | super arguments... 519 | 520 | addChildComponent: (childComponent) -> 521 | if (component = @component()) isnt @ 522 | component.addChildComponent childComponent 523 | else 524 | super arguments... 525 | 526 | removeChildComponent: (childComponent) -> 527 | if (component = @component()) isnt @ 528 | component.removeChildComponent childComponent 529 | else 530 | super arguments... 531 | 532 | mixins: -> 533 | [] 534 | 535 | # When a component is used as a mixin, createMixins will call this method to set the parent 536 | # component using this mixin. Extend this method if you want to do any action when parent is 537 | # set, for example, add dependency mixins to the parent. Make sure you call super as well. 538 | mixinParent: (mixinParent) -> 539 | @_componentInternals ?= {} 540 | 541 | # Setter. 542 | if mixinParent 543 | @_componentInternals.mixinParent = mixinParent 544 | # To allow chaining. 545 | return @ 546 | 547 | # Getter. 548 | @_componentInternals.mixinParent or null 549 | 550 | requireMixin: (nameOrMixin) -> 551 | assert @_componentInternals?.mixins 552 | 553 | Tracker.nonreactive => 554 | # Do not do anything if mixin is already required. This allows multiple mixins to call requireMixin 555 | # in mixinParent method to add dependencies, but if dependencies are already there, nothing happens. 556 | return if @getMixin nameOrMixin 557 | 558 | if _.isString nameOrMixin 559 | # It could be that the component is not a real instance of the BlazeComponent class, 560 | # so it might not have a constructor pointing back to a BlazeComponent subclass. 561 | if @constructor.getComponent 562 | mixinInstanceComponent = @constructor.getComponent nameOrMixin 563 | else 564 | mixinInstanceComponent = BlazeComponent.getComponent nameOrMixin 565 | throw new Error "Unknown mixin '#{nameOrMixin}'." unless mixinInstanceComponent 566 | mixinInstance = new mixinInstanceComponent() 567 | else if _.isFunction nameOrMixin 568 | mixinInstance = new nameOrMixin() 569 | else 570 | mixinInstance = nameOrMixin 571 | 572 | # We add mixin before we call mixinParent so that dependencies come after this mixin, 573 | # and that we prevent possible infinite loops because of circular dependencies. 574 | # TODO: For now we do not provide an official API to add dependencies before the mixin itself. 575 | @_componentInternals.mixins.push mixinInstance 576 | 577 | # We allow mixins to not be components, so methods are not necessary available. 578 | 579 | # Set mixin parent. 580 | if mixinInstance.mixinParent 581 | mixinInstance.mixinParent @ 582 | 583 | # Maybe mixin has its own mixins as well. 584 | mixinInstance.createMixins?() 585 | 586 | if component = @component() 587 | component._componentInternals ?= {} 588 | component._componentInternals.templateInstance ?= new ReactiveField null, (a, b) -> a is b 589 | 590 | # If a mixin is adding a dependency using requireMixin after its mixinParent class (for example, in onCreate) 591 | # and this is this dependency mixin, the view might already be created or rendered and callbacks were 592 | # already called, so we should call them manually here as well. But only if he view has not been destroyed 593 | # already. For those mixins we do not call anything, there is little use for them now. 594 | unless component._componentInternals.templateInstance()?.view.isDestroyed 595 | mixinInstance.onCreated?() if not component._componentInternals.inOnCreated and component._componentInternals.templateInstance()?.view.isCreated 596 | mixinInstance.onRendered?() if not component._componentInternals.inOnRendered and component._componentInternals.templateInstance()?.view.isRendered 597 | 598 | # To allow chaining. 599 | @ 600 | 601 | # Method to instantiate all mixins. 602 | createMixins: -> 603 | @_componentInternals ?= {} 604 | 605 | # To allow calling it multiple times, but non-first calls are simply ignored. 606 | return if @_componentInternals.mixins 607 | @_componentInternals.mixins = [] 608 | 609 | for mixin in @mixins() 610 | @requireMixin mixin 611 | 612 | # To allow chaining. 613 | @ 614 | 615 | getMixin: (nameOrMixin) -> 616 | if _.isString nameOrMixin 617 | # By passing @ as the first argument, we traverse only mixins. 618 | @getFirstWith @, (child, parent) => 619 | # We do not require mixins to be components, but if they are, they can 620 | # be referenced based on their component name. 621 | mixinComponentName = child.componentName?() or null 622 | return mixinComponentName and mixinComponentName is nameOrMixin 623 | else 624 | # By passing @ as the first argument, we traverse only mixins. 625 | @getFirstWith @, (child, parent) => 626 | # nameOrMixin is a class. 627 | return true if child.constructor is nameOrMixin 628 | 629 | # nameOrMixin is an instance, or something else. 630 | return true if child is nameOrMixin 631 | 632 | false 633 | 634 | # Calls the component (if afterComponentOrMixin is null) or the first next mixin 635 | # after afterComponentOrMixin it finds, and returns the result. 636 | callFirstWith: (afterComponentOrMixin, propertyName, args...) -> 637 | assert _.isString propertyName 638 | 639 | componentOrMixin = @getFirstWith afterComponentOrMixin, propertyName 640 | 641 | # TODO: Should we throw an error here? Something like calling a function which does not exist? 642 | return unless componentOrMixin 643 | 644 | # We are not calling callFirstWith on the componentOrMixin because here we 645 | # are already traversing mixins so we do not recurse once more. 646 | if _.isFunction componentOrMixin[propertyName] 647 | return componentOrMixin[propertyName] args... 648 | else 649 | return componentOrMixin[propertyName] 650 | 651 | getFirstWith: (afterComponentOrMixin, propertyOrMatcherOrFunction) -> 652 | assert @_componentInternals?.mixins 653 | assert propertyOrMatcherOrFunction 654 | 655 | # Here we are already traversing mixins so we do not recurse once more. 656 | propertyOrMatcherOrFunction = createMatcher propertyOrMatcherOrFunction, false 657 | 658 | # If afterComponentOrMixin is not provided, we start with the component. 659 | if not afterComponentOrMixin 660 | return @ if propertyOrMatcherOrFunction.call @, @, @ 661 | # And continue with mixins. 662 | found = true 663 | # If afterComponentOrMixin is the component, we start with mixins. 664 | else if afterComponentOrMixin and afterComponentOrMixin is @ 665 | found = true 666 | else 667 | found = false 668 | 669 | # TODO: Implement with a map between mixin -> position, so that we do not have to seek to find a mixin. 670 | for mixin in @_componentInternals.mixins 671 | return mixin if found and propertyOrMatcherOrFunction.call @, mixin, @ 672 | 673 | found = true if mixin is afterComponentOrMixin 674 | 675 | null 676 | 677 | # This class method more or less just creates an instance of a component and calls its renderComponent 678 | # method. But because we want to allow passing arguments to the component in templates, we have some 679 | # complicated code around to extract and pass those arguments. It is similar to how data context is 680 | # passed to block helpers. In a data context visible only to the block helper template. 681 | # TODO: This could be made less hacky. See https://github.com/meteor/meteor/issues/3913 682 | @renderComponent: (parentComponent) -> 683 | Tracker.nonreactive => 684 | componentClass = @ 685 | 686 | if Blaze.currentView 687 | # We check data context in a non-reactive way, because we want just to peek into it 688 | # and determine if data context contains component arguments or not. And while 689 | # component arguments might change through time, the fact that they are there at 690 | # all or not ("args" template helper was used or not) does not change through time. 691 | # So we can check that non-reactively. 692 | data = Template.currentData() 693 | else 694 | # There is no current view when there is no data context yet, thus also no arguments 695 | # were provided through "args" template helper, so we just continue normally. 696 | data = null 697 | 698 | if data?.constructor isnt argumentsConstructor 699 | # So that currentComponent in the constructor can return the component 700 | # inside which this component has been constructed. 701 | return wrapViewAndTemplate Blaze.currentView, => 702 | component = new componentClass() 703 | 704 | return component.renderComponent parentComponent 705 | 706 | # Arguments were provided through "args" template helper. 707 | 708 | # We want to reactively depend on the data context for arguments, so we return a function 709 | # instead of a template. Function will be run inside an autorun, a reactive context. 710 | -> 711 | assert Tracker.active 712 | 713 | # We cannot use Template.getData() inside a normal autorun because current view is not defined inside 714 | # a normal autorun. But we do not really have to depend reactively on the current view, only on the 715 | # data context of a known (the closest Blaze.With) view. So we get this view by ourselves. 716 | currentWith = Blaze.getView 'with' 717 | 718 | # By default dataVar in the Blaze.With view uses ReactiveVar with default equality function which 719 | # sees all objects as different. So invalidations are triggered for every data context assignments 720 | # even if data has not really changed. This is why wrap it into a ComputedField with EJSON.equals. 721 | # Because it uses EJSON.equals it will invalidate our function only if really changes. 722 | # See https://github.com/meteor/meteor/issues/4073 723 | reactiveArguments = new ComputedField -> 724 | data = currentWith.dataVar.get() 725 | assert.equal data?.constructor, argumentsConstructor 726 | data._arguments 727 | , 728 | EJSON.equals 729 | 730 | # Here we register a reactive dependency on the ComputedField. 731 | nonreactiveArguments = reactiveArguments() 732 | 733 | Tracker.nonreactive -> 734 | # Arguments were passed in as a data context. We want currentData in the constructor to return the 735 | # original (parent) data context. Like we were not passing in arguments as a data context. 736 | template = Blaze._withCurrentView Blaze.currentView.parentView.parentView, => 737 | # So that currentComponent in the constructor can return the component 738 | # inside which this component has been constructed. 739 | return wrapViewAndTemplate Blaze.currentView, => 740 | # Use arguments for the constructor. 741 | component = new componentClass nonreactiveArguments... 742 | 743 | return component.renderComponent parentComponent 744 | 745 | # It has to be the first callback so that other have a correct data context. 746 | registerFirstCreatedHook template, -> 747 | # Arguments were passed in as a data context. Restore original (parent) data 748 | # context. Same logic as in Blaze._InOuterTemplateScope. 749 | @view.originalParentView = @view.parentView 750 | @view.parentView = @view.parentView.parentView.parentView 751 | 752 | template 753 | 754 | renderComponent: (parentComponent) -> 755 | # To make sure we do not introduce any reactive dependency. This is a conscious design decision. 756 | # Reactivity should be changing data context, but components should be more stable, only changing 757 | # when structure change in rendered DOM. You can change the component you are including (or pass 758 | # different arguments) reactively though. 759 | Tracker.nonreactive => 760 | component = @component() 761 | 762 | # If mixins have not yet been created. 763 | component.createMixins() 764 | 765 | templateBase = getTemplateBase component 766 | 767 | # Create a new component template based on the Blaze template. We want our own template 768 | # because the same Blaze template could be reused between multiple components. 769 | # TODO: Should we cache these templates based on (componentName, templateBase) pair? We could use two levels of ES2015 Maps, componentName -> templateBase -> template. What about component arguments changing? 770 | template = new Blaze.Template "BlazeComponent.#{component.componentName() or 'unnamed'}", templateBase.renderFunction 771 | 772 | # We lookup preexisting template helpers in Blaze._getTemplateHelper, if the component does not have 773 | # a property with the same name. Preexisting event handlers and life-cycle hooks are taken care of 774 | # in the related methods in the base class. 775 | 776 | component._componentInternals ?= {} 777 | component._componentInternals.templateBase = templateBase 778 | 779 | registerHooks template, 780 | onCreated: -> 781 | # @ is a template instance. 782 | 783 | if parentComponent 784 | # component.parentComponent is reactive, so we use Tracker.nonreactive just to make sure we do not leak any reactivity here. 785 | Tracker.nonreactive => 786 | # TODO: Should we support that the same component can be rendered multiple times in parallel? How could we do that? For different component parents or only the same one? 787 | assert not component.parentComponent(), "Component '#{component.componentName() or 'unnamed'}' parent component '#{component.parentComponent()?.componentName() or 'unnamed'}' already set." 788 | 789 | # We set the parent only when the component is created, not just constructed. 790 | component.parentComponent parentComponent 791 | parentComponent.addChildComponent component 792 | 793 | @view._onViewRendered => 794 | # Attach events the first time template instance renders. 795 | return unless @view.renderCount is 1 796 | 797 | # We first add event handlers from the component, then mixins. 798 | componentOrMixin = null 799 | while componentOrMixin = @component.getFirstWith componentOrMixin, 'events' 800 | addEvents @view, componentOrMixin 801 | 802 | @component = component 803 | 804 | # TODO: Should we support that the same component can be rendered multiple times in parallel? How could we do that? For different component parents or only the same one? 805 | assert not Tracker.nonreactive => @component._componentInternals.templateInstance?() 806 | 807 | @component._componentInternals.templateInstance ?= new ReactiveField @, (a, b) -> a is b 808 | @component._componentInternals.templateInstance @ 809 | 810 | @component._componentInternals.isCreated ?= new ReactiveField true 811 | @component._componentInternals.isCreated true 812 | 813 | # Maybe we are re-rendering the component. So let's initialize variables just to be sure. 814 | 815 | @component._componentInternals.isRendered ?= new ReactiveField false 816 | @component._componentInternals.isRendered false 817 | 818 | @component._componentInternals.isDestroyed ?= new ReactiveField false 819 | @component._componentInternals.isDestroyed false 820 | 821 | try 822 | # We have to know if we should call onCreated on the mixin inside the requireMixin or not. We want to call 823 | # it only once. If it requireMixin is called from onCreated of another mixin, then it will be added at the 824 | # end and we will get it here at the end. So we should not call onCreated inside requireMixin because then 825 | # onCreated would be called twice. 826 | @component._componentInternals.inOnCreated = true 827 | componentOrMixin = null 828 | while componentOrMixin = @component.getFirstWith componentOrMixin, 'onCreated' 829 | componentOrMixin.onCreated() 830 | finally 831 | delete @component._componentInternals.inOnCreated 832 | 833 | onRendered: -> 834 | # @ is a template instance. 835 | 836 | @component._componentInternals.isRendered ?= new ReactiveField true 837 | @component._componentInternals.isRendered true 838 | 839 | Tracker.nonreactive => 840 | assert.equal @component._componentInternals.isCreated(), true 841 | 842 | try 843 | # Same as for onCreated above. 844 | @component._componentInternals.inOnRendered = true 845 | componentOrMixin = null 846 | while componentOrMixin = @component.getFirstWith componentOrMixin, 'onRendered' 847 | componentOrMixin.onRendered() 848 | finally 849 | delete @component._componentInternals.inOnRendered 850 | 851 | onDestroyed: -> 852 | @autorun (computation) => 853 | # @ is a template instance. 854 | 855 | # We wait for all children components to be destroyed first. 856 | # See https://github.com/meteor/meteor/issues/4166 857 | return if @component.childComponents().length 858 | computation.stop() 859 | 860 | Tracker.nonreactive => 861 | assert.equal @component._componentInternals.isCreated(), true 862 | 863 | @component._componentInternals.isCreated false 864 | 865 | @component._componentInternals.isRendered ?= new ReactiveField false 866 | @component._componentInternals.isRendered false 867 | 868 | @component._componentInternals.isDestroyed ?= new ReactiveField true 869 | @component._componentInternals.isDestroyed true 870 | 871 | componentOrMixin = null 872 | while componentOrMixin = @component.getFirstWith componentOrMixin, 'onDestroyed' 873 | componentOrMixin.onDestroyed() 874 | 875 | if parentComponent 876 | # The component has been destroyed, clear up the parent. 877 | component.parentComponent null 878 | parentComponent.removeChildComponent component 879 | 880 | # Remove the reference so that it is clear that template instance is not available anymore. 881 | @component._componentInternals.templateInstance null 882 | 883 | template 884 | 885 | removeComponent: -> 886 | Blaze.remove @component()._componentInternals.templateInstance().view if @isRendered() 887 | 888 | @_renderComponentTo: (visitor, parentComponent, parentView, data) -> 889 | component = Tracker.nonreactive => 890 | componentClass = @ 891 | 892 | parentView = parentView or currentViewIfRendering() or (parentComponent?.isRendered() and parentComponent._componentInternals.templateInstance().view) or null 893 | 894 | wrapViewAndTemplate parentView, => 895 | new componentClass() 896 | 897 | if arguments.length > 2 898 | component._renderComponentTo visitor, parentComponent, parentView, data 899 | else 900 | component._renderComponentTo visitor, parentComponent, parentView 901 | 902 | @renderComponentToHTML: (parentComponent, parentView, data) -> 903 | if arguments.length > 2 904 | @_renderComponentTo new HTML.ToHTMLVisitor(), parentComponent, parentView, data 905 | else 906 | @_renderComponentTo new HTML.ToHTMLVisitor(), parentComponent, parentView 907 | 908 | _renderComponentTo: (visitor, parentComponent, parentView, data) -> 909 | template = Tracker.nonreactive => 910 | parentView = parentView or currentViewIfRendering() or (parentComponent?.isRendered() and parentComponent._componentInternals.templateInstance().view) or null 911 | 912 | wrapViewAndTemplate parentView, => 913 | @component().renderComponent parentComponent 914 | 915 | if arguments.length > 2 916 | expandedView = expandView Blaze._TemplateWith(data, contentAsFunc template), parentView 917 | else 918 | expandedView = expandView contentAsView(template), parentView 919 | 920 | visitor.visit expandedView 921 | 922 | renderComponentToHTML: (parentComponent, parentView, data) -> 923 | if arguments.length > 2 924 | @_renderComponentTo new HTML.ToHTMLVisitor(), parentComponent, parentView, data 925 | else 926 | @_renderComponentTo new HTML.ToHTMLVisitor(), parentComponent, parentView 927 | 928 | template: -> 929 | @callFirstWith(@, 'template') or @constructor.componentName() 930 | 931 | onCreated: -> 932 | callTemplateBaseHooks @, 'created' 933 | 934 | onRendered: -> 935 | callTemplateBaseHooks @, 'rendered' 936 | 937 | onDestroyed: -> 938 | callTemplateBaseHooks @, 'destroyed' 939 | 940 | isCreated: -> 941 | component = @component() 942 | 943 | component._componentInternals ?= {} 944 | component._componentInternals.isCreated ?= new ReactiveField false 945 | 946 | component._componentInternals.isCreated() 947 | 948 | isRendered: -> 949 | component = @component() 950 | 951 | component._componentInternals ?= {} 952 | component._componentInternals.isRendered ?= new ReactiveField false 953 | 954 | component._componentInternals.isRendered() 955 | 956 | isDestroyed: -> 957 | component = @component() 958 | 959 | component._componentInternals ?= {} 960 | component._componentInternals.isDestroyed ?= new ReactiveField false 961 | 962 | component._componentInternals.isDestroyed() 963 | 964 | insertDOMElement: (parent, node, before) -> 965 | before ?= null 966 | if parent and node and (node.parentNode isnt parent or node.nextSibling isnt before) 967 | parent.insertBefore node, before 968 | 969 | return 970 | 971 | moveDOMElement: (parent, node, before) -> 972 | before ?= null 973 | if parent and node and (node.parentNode isnt parent or node.nextSibling isnt before) 974 | parent.insertBefore node, before 975 | 976 | return 977 | 978 | removeDOMElement: (parent, node) -> 979 | if parent and node and node.parentNode is parent 980 | parent.removeChild node 981 | 982 | return 983 | 984 | events: -> 985 | # In mixins there is no reason for a template instance to extend a Blaze template. 986 | return [] unless @ is @component() 987 | 988 | @_componentInternals ?= {} 989 | 990 | view = Tracker.nonreactive => 991 | @_componentInternals.templateInstance().view 992 | # We skip block helpers to match Blaze behavior. 993 | templateInstance = getTemplateInstanceFunction view, true 994 | 995 | for events in @_componentInternals.templateBase.__eventMaps 996 | eventMap = {} 997 | 998 | for spec, handler of events 999 | do (spec, handler) -> 1000 | eventMap[spec] = (args...) -> 1001 | # In template event handlers view and template instance are not based on the current target 1002 | # (like Blaze Components event handlers are) but it is based on the template-level view. 1003 | # In a way we are reverting here what addEvents does. 1004 | withTemplateInstanceFunc templateInstance, -> 1005 | Blaze._withCurrentView view, -> 1006 | handler.apply view, args 1007 | 1008 | eventMap 1009 | 1010 | # Component-level data context. Reactive. Use this to always get the 1011 | # top-level data context used to render the component. If path is 1012 | # provided, it returns only the value under that path, with reactivity 1013 | # limited to changes of that value only. 1014 | data: (path, equalsFunc) -> 1015 | component = @component() 1016 | 1017 | component._componentInternals ?= {} 1018 | component._componentInternals.templateInstance ?= new ReactiveField null, (a, b) -> a is b 1019 | 1020 | if view = component._componentInternals.templateInstance()?.view 1021 | if path? 1022 | # DataLookup uses internally computed field, which uses view's autorun, but 1023 | # data might be used inside render() method, where it is forbidden to use 1024 | # view's autorun. So we temporary hide the fact that we are inside a view 1025 | # to make computed field use normal autorun. 1026 | return Blaze._withCurrentView null, => 1027 | DataLookup.get => 1028 | Blaze.getData view 1029 | , 1030 | path, equalsFunc 1031 | else 1032 | return Blaze.getData view 1033 | 1034 | undefined 1035 | 1036 | # Caller-level data context. Reactive. Use this to get in event handlers the data 1037 | # context at the place where event originated (target context). In template helpers 1038 | # the data context where template helpers were called. In onCreated, onRendered, 1039 | # and onDestroyed, the same as @data(). Inside a template this is the same as this. 1040 | # If path is provided, it returns only the value under that path, with reactivity 1041 | # limited to changes of that value only. Moreover, if path is provided is also 1042 | # looks into the current lexical scope data. 1043 | @currentData: (path, equalsFunc) -> 1044 | return undefined unless Blaze.currentView 1045 | 1046 | currentView = Blaze.currentView 1047 | 1048 | if _.isString path 1049 | path = path.split '.' 1050 | else if not _.isArray path 1051 | return Blaze.getData currentView 1052 | 1053 | # DataLookup uses internally computed field, which uses view's autorun, but 1054 | # currentData might be used inside render() method, where it is forbidden to use 1055 | # view's autorun. So we temporary hide the fact that we are inside a view 1056 | # to make computed field use normal autorun. 1057 | Blaze._withCurrentView null, => 1058 | DataLookup.get => 1059 | if Blaze._lexicalBindingLookup and lexicalData = Blaze._lexicalBindingLookup currentView, path[0] 1060 | # We return custom data object so that we can reuse the same 1061 | # lookup logic for both lexical and the normal data context case. 1062 | result = {} 1063 | result[path[0]] = lexicalData 1064 | return result 1065 | 1066 | Blaze.getData currentView 1067 | , 1068 | path, equalsFunc 1069 | 1070 | # Method should never be overridden. The implementation should always be exactly the same as class method implementation. 1071 | currentData: (path, equalsFunc) -> 1072 | @constructor.currentData path, equalsFunc 1073 | 1074 | # Useful in templates or mixins to get a reference to the component. 1075 | component: -> 1076 | component = @ 1077 | 1078 | loop 1079 | # If we are on a mixin without mixinParent, we cannot really get to the component, return null. 1080 | return null unless component.mixinParent 1081 | 1082 | # Return current component unless there is a mixin parent. 1083 | return component unless mixinParent = component.mixinParent() 1084 | component = mixinParent 1085 | 1086 | # Caller-level component. In most cases the same as @, but in event handlers 1087 | # it returns the component at the place where event originated (target component). 1088 | # Inside template content wrapped with a block helper component, it is the closest 1089 | # block helper component. 1090 | @currentComponent: -> 1091 | # We are not skipping block helpers because one of main reasons for @currentComponent() 1092 | # is that we can get hold of the block helper component instance. 1093 | templateInstance = getTemplateInstanceFunction Blaze.currentView, false 1094 | templateInstanceToComponent templateInstance, false 1095 | 1096 | # Method should never be overridden. The implementation should always be exactly the same as class method implementation. 1097 | currentComponent: -> 1098 | @constructor.currentComponent() 1099 | 1100 | firstNode: -> 1101 | return @component()._componentInternals.templateInstance().view._domrange.firstNode() if @isRendered() 1102 | 1103 | undefined 1104 | 1105 | lastNode: -> 1106 | return @component()._componentInternals.templateInstance().view._domrange.lastNode() if @isRendered() 1107 | 1108 | undefined 1109 | 1110 | # The same as it would be generated automatically, only that the runFunc gets bound to the component. 1111 | autorun: (runFunc) -> 1112 | templateInstance = Tracker.nonreactive => 1113 | @component()._componentInternals?.templateInstance?() 1114 | 1115 | throw new Error "The component has to be created before calling 'autorun'." unless templateInstance 1116 | 1117 | templateInstance.autorun _.bind runFunc, @ 1118 | 1119 | SUPPORTS_REACTIVE_INSTANCE = [ 1120 | 'subscriptionsReady' 1121 | ] 1122 | 1123 | REQUIRE_RENDERED_INSTANCE = [ 1124 | '$', 1125 | 'find', 1126 | 'findAll' 1127 | ] 1128 | 1129 | # We copy utility methods ($, findAll, subscribe, etc.) from the template instance prototype, 1130 | # if a method with the same name does not exist already. 1131 | for methodName, method of (Blaze.TemplateInstance::) when methodName not of (BlazeComponent::) 1132 | do (methodName, method) -> 1133 | if methodName in SUPPORTS_REACTIVE_INSTANCE 1134 | BlazeComponent::[methodName] = (args...) -> 1135 | component = @component() 1136 | 1137 | component._componentInternals ?= {} 1138 | component._componentInternals.templateInstance ?= new ReactiveField null, (a, b) -> a is b 1139 | 1140 | if templateInstance = component._componentInternals.templateInstance() 1141 | return templateInstance[methodName] args... 1142 | 1143 | undefined 1144 | 1145 | else if methodName in REQUIRE_RENDERED_INSTANCE 1146 | BlazeComponent::[methodName] = (args...) -> 1147 | return @component()._componentInternals.templateInstance()[methodName] args... if @isRendered() 1148 | 1149 | undefined 1150 | 1151 | else 1152 | BlazeComponent::[methodName] = (args...) -> 1153 | templateInstance = Tracker.nonreactive => 1154 | @component()._componentInternals?.templateInstance?() 1155 | 1156 | throw new Error "The component has to be created before calling '#{methodName}'." unless templateInstance 1157 | 1158 | templateInstance[methodName] args... 1159 | -------------------------------------------------------------------------------- /mixins.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 64 | -------------------------------------------------------------------------------- /package.js: -------------------------------------------------------------------------------- 1 | Package.describe({ 2 | name: 'peerlibrary:blaze-components', 3 | summary: "Reusable components for Blaze", 4 | version: '0.23.0', 5 | git: 'https://github.com/peerlibrary/meteor-blaze-components.git' 6 | }); 7 | 8 | // Based on meteor/packages/templating/package.js. 9 | Package.registerBuildPlugin({ 10 | name: "compileBlazeComponentsTemplatesBatch", 11 | use: [ 12 | 'caching-html-compiler@1.1.3', 13 | 'ecmascript@0.12.7', 14 | 'templating-tools@1.1.2', 15 | 'spacebars-compiler@1.1.3', 16 | 'html-tools@1.0.11' 17 | ], 18 | sources: [ 19 | 'patch-compiling.js', 20 | 'compile-templates.js' 21 | ] 22 | }); 23 | 24 | Package.onUse(function (api) { 25 | api.versionsFrom('METEOR@1.8.1'); 26 | 27 | // Core dependencies. 28 | api.use([ 29 | 'blaze@2.3.3', 30 | 'coffeescript@2.4.1', 31 | 'underscore', 32 | 'tracker', 33 | 'reactive-var', 34 | 'ejson', 35 | 'spacebars@1.0.15', 36 | 'jquery@1.11.11' 37 | ]); 38 | 39 | // If templating package is among dependencies, we want it to be loaded before 40 | // us to not override our augmented functions. But we cannot make a real dependency 41 | // because of a plugin conflict (both us and templating are registering a *.html plugin). 42 | api.use([ 43 | 'templating@1.3.2' 44 | ], {weak: true}); 45 | 46 | api.imply([ 47 | 'meteor', 48 | 'blaze', 49 | 'spacebars' 50 | ]); 51 | 52 | api.use('isobuild:compiler-plugin@1.0.0'); 53 | 54 | // Internal dependencies. 55 | api.use([ 56 | 'peerlibrary:base-component@0.17.1' 57 | ]); 58 | 59 | // 3rd party dependencies. 60 | api.use([ 61 | 'peerlibrary:assert@0.3.0', 62 | 'peerlibrary:reactive-field@0.6.0', 63 | 'peerlibrary:computed-field@0.10.0', 64 | 'peerlibrary:data-lookup@0.3.0' 65 | ]); 66 | 67 | api.export('Template'); 68 | api.export('BlazeComponent'); 69 | // TODO: Move to a separate package. Possibly one with debugOnly set to true. 70 | api.export('BlazeComponentDebug'); 71 | 72 | api.addFiles([ 73 | 'template.coffee', 74 | 'compatibility/templating.js', 75 | 'compatibility/dynamic.html', 76 | 'compatibility/dynamic.js', 77 | 'compatibility/lookup.js', 78 | 'compatibility/attrs.js', 79 | 'compatibility/materializer.js', 80 | 'lib.coffee', 81 | 'debug.coffee' 82 | ]); 83 | 84 | api.addFiles([ 85 | 'client.coffee' 86 | ], 'client'); 87 | 88 | api.addFiles([ 89 | 'server.coffee' 90 | ], 'server'); 91 | }); 92 | 93 | Package.onTest(function (api) { 94 | api.versionsFrom('METEOR@1.8.1'); 95 | 96 | // Core dependencies. 97 | api.use([ 98 | 'coffeescript@2.4.1', 99 | 'jquery@1.11.11', 100 | 'reactive-var', 101 | 'underscore', 102 | 'tracker', 103 | 'ejson', 104 | 'random' 105 | ]); 106 | 107 | // Internal dependencies. 108 | api.use([ 109 | 'peerlibrary:blaze-components' 110 | ]); 111 | 112 | // 3rd party dependencies. 113 | api.use([ 114 | 'peerlibrary:classy-test@0.4.0', 115 | 'peerlibrary:reactive-field@0.6.0', 116 | 'peerlibrary:assert@0.3.0' 117 | ]); 118 | 119 | api.addFiles([ 120 | 'tests/tests.html', 121 | 'tests/tests.coffee', 122 | 'tests/tests.js', 123 | 'tests/tests.es2015.js', 124 | 'tests/tests.css' 125 | ]); 126 | }); 127 | -------------------------------------------------------------------------------- /patch-compiling.js: -------------------------------------------------------------------------------- 1 | var EVENT_HANDLER_REGEX = /^on[A-Z]/; 2 | 3 | // We want to differentiate between "onclick" and "onClick" attributes. 4 | // The latter we process, the former we do not. 5 | var originalProperCaseAttributeName = HTMLTools.properCaseAttributeName; 6 | HTMLTools.properCaseAttributeName = function (name) { 7 | if (EVENT_HANDLER_REGEX.test(name)) { 8 | return name; 9 | } 10 | else { 11 | return originalProperCaseAttributeName(name); 12 | } 13 | }; 14 | 15 | var originalVisitAttribute = SpacebarsCompiler._TemplateTagReplacer.prototype.visitAttribute; 16 | SpacebarsCompiler._TemplateTagReplacer.prototype.visitAttribute = function (name, value, tag) { 17 | var self = this; 18 | 19 | if (EVENT_HANDLER_REGEX.test(name)) { 20 | self.inEventHandlerAttributeValue = true; 21 | if (!value) { 22 | // If value of the event handler is not specified, 23 | // we use component method with the same name. 24 | value = new SpacebarsCompiler.TemplateTag(); 25 | value.type = 'DOUBLE'; 26 | value.path = [name]; 27 | value.args = []; 28 | } 29 | var result = originalVisitAttribute.call(self, name, value, tag); 30 | self.inEventHandlerAttributeValue = false; 31 | return result; 32 | } 33 | else { 34 | return originalVisitAttribute.call(self, name, value, tag); 35 | } 36 | }; 37 | 38 | var originalVisitObject = SpacebarsCompiler._TemplateTagReplacer.prototype.visitObject; 39 | SpacebarsCompiler._TemplateTagReplacer.prototype.visitObject = function (x) { 40 | var self = this; 41 | 42 | if (x instanceof HTMLTools.TemplateTag && self.inEventHandlerAttributeValue) { 43 | x.eventHandler = true; 44 | } 45 | 46 | return originalVisitObject.call(self, x); 47 | }; 48 | 49 | var originalCodeGenTemplateTag = SpacebarsCompiler.CodeGen.prototype.codeGenTemplateTag; 50 | SpacebarsCompiler.CodeGen.prototype.codeGenTemplateTag = function (tag) { 51 | var self = this; 52 | 53 | if (tag.eventHandler) { 54 | self.inEventHandler = true; 55 | } 56 | var result = originalCodeGenTemplateTag.call(self, tag); 57 | if (tag.eventHandler) { 58 | self.inEventHandler = false; 59 | } 60 | return result; 61 | }; 62 | 63 | var originalCodeGenMustache = SpacebarsCompiler.CodeGen.prototype.codeGenMustache; 64 | SpacebarsCompiler.CodeGen.prototype.codeGenMustache = function (path, args, mustacheType) { 65 | var self = this; 66 | 67 | if (self.inEventHandler) { 68 | var nameCode = self.codeGenPath(path); 69 | var argCode = self.codeGenMustacheArgs(args); 70 | return 'Spacebars.event(' + nameCode + (argCode ? ', ' + argCode.join(', ') : '') + ')'; 71 | } 72 | else { 73 | return originalCodeGenMustache.call(self, path, args, mustacheType); 74 | } 75 | }; 76 | 77 | // From tools/utils/archinfo.js. 78 | var matches = function (host, program) { 79 | return host.substr(0, program.length) === program && 80 | (host.length === program.length || 81 | host.substr(program.length, 1) === "."); 82 | }; 83 | 84 | // tag in server side templates should not be processed. Because client side 85 | // templates already add content to what Meteor renders on the server side. 86 | // See: https://github.com/meteor/meteor/issues/5913 87 | var originalAddCompileResult = CachingHtmlCompiler.prototype.addCompileResult; 88 | CachingHtmlCompiler.prototype.addCompileResult = function (inputFile, compileResult) { 89 | var head = compileResult.head; 90 | 91 | if (compileResult.head && !matches(inputFile.getArch(), 'web')) { 92 | // Head can only be emitted to web targets. 93 | compileResult.head = ''; 94 | } 95 | 96 | try { 97 | originalAddCompileResult.call(this, inputFile, compileResult); 98 | } 99 | finally { 100 | // Restore whatever was initially stored for head. We have to restore because 101 | // the cache is shared between targets and an empty head is cached otherwise. 102 | compileResult.head = head; 103 | } 104 | }; 105 | -------------------------------------------------------------------------------- /server.coffee: -------------------------------------------------------------------------------- 1 | # No-op on the server. 2 | Template.body.renderToDocument = -> 3 | -------------------------------------------------------------------------------- /template.coffee: -------------------------------------------------------------------------------- 1 | Template = Blaze.Template 2 | -------------------------------------------------------------------------------- /tests/tests.css: -------------------------------------------------------------------------------- 1 | .bodyTest, 2 | .eventsTestTemplate, 3 | .animationTestTemplate, 4 | .argumentsTestTemplate, 5 | .mixinEventsTestTemplate, 6 | .postMessageButtonComponent, 7 | .useCaseTemplate, 8 | .myComponent, 9 | .exampleComponent, 10 | .outerComponent, 11 | .namespacedArgumentsTestTemplate, 12 | .ourNamespacedArgumentsTestTemplate, 13 | .ourNamespaceComponentArgumentsTestTemplate, 14 | .extraTestBlockComponent, 15 | .inlineEventsTestTemplate, 16 | .invalidInlineEventsTestTemplate { 17 | display: none; 18 | } 19 | -------------------------------------------------------------------------------- /tests/tests.es2015.js: -------------------------------------------------------------------------------- 1 | // Example from the README. 2 | 3 | class ExampleComponent extends BlazeComponent { 4 | template() { 5 | // We register the component under a different name. 6 | return 'ExampleComponent'; 7 | } 8 | 9 | // Life-cycle hook to initialize component's state. 10 | onCreated() { 11 | // It is a good practice to always call super. 12 | super.onCreated(); 13 | this.counter = new ReactiveField(0); 14 | } 15 | 16 | // Mapping between events and their handlers. 17 | events() { 18 | // It is a good practice to always call super. 19 | return super.events().concat({ 20 | // You could inline the handler, but the best is to make 21 | // it a method so that it can be extended later on. 22 | 'click .increment': this.onClick 23 | }); 24 | } 25 | 26 | onClick(event) { 27 | this.counter(this.counter() + 1); 28 | } 29 | 30 | // Any component's method is available as a template helper in the template. 31 | customHelper() { 32 | if (this.counter() > 10) { 33 | return "Too many times"; 34 | } 35 | else if (this.counter() === 10) { 36 | return "Just enough"; 37 | } 38 | else { 39 | return "Click more"; 40 | } 41 | } 42 | } 43 | 44 | // Register a component so that it can be included in templates. It also 45 | // gives the component the name. The convention is to use the class name. 46 | ExampleComponent.register('ExampleComponentES2015'); 47 | 48 | var MyComponent = BlazeComponent.getComponent('MyComponent'); 49 | class OurComponent extends MyComponent { 50 | template() { 51 | // By default it would use "OurComponentES2015" name. 52 | return 'MyComponent'; 53 | } 54 | 55 | values() { 56 | return '>>>' + super.values() + '<<<'; 57 | } 58 | } 59 | 60 | OurComponent.register('OurComponentES2015'); 61 | -------------------------------------------------------------------------------- /tests/tests.html: -------------------------------------------------------------------------------- 1 | 2 |Main component: {{componentName}}
42 | 43 |{{foobar}}
44 | {{#with a='1' b='2'}} 45 | 46 |{{foobar2}}
47 | {{/with}} 48 |{{foobar3}}
49 | {{> normalSubtemplate}} 50 | {{> FooComponent}} 51 | {{#if isMainComponent}} 52 |{{foobar}}
76 | {{#with a='3' b='4'}} 77 | {{> mainComponent3Button}} 78 |{{foobar2}}
79 | {{/with}} 80 |{{foobar3}}
81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | {{! Helpers here should resolve to MainComponent methods. }} 89 |Subtemplate
90 | 91 |{{foobar}}
92 | {{#with a='3' b='4'}} 93 | {{! Event handling should be done by MainComponent as well. }} 94 | 95 |{{foobar2}}
96 | {{/with}} 97 |{{foobar3}}
98 | 99 | 100 | 101 | {{! Helpers here should not resolve becasue ther are defined in another component. }} 102 |Other component: {{componentName}}
103 | 104 |{{foobar}}
105 | {{#with a='5' b='6'}} 106 | {{! But event handler from the MainComponent should still handle the click here. }} 107 | 108 |{{foobar2}}
109 | {{/with}} 110 |{{foobar3}}
111 | 112 | 113 | 114 |Component data context: {{dataContext}}
132 |Current data context: {{currentDataContext}}
133 |Parent data context: {{parentDataContext}}
134 |Arguments: {{constructorArguments}}
135 | 136 | 137 | 138 |{{foobar}}
139 |{{_foobar}}
140 | 141 | 142 | 143 || Name | 153 |
|---|
{{parentDataContext}}
168 | {{#each customers}} 169 |{{parentDataContext}}
175 | {{#each customers}} 176 |{{parentDataContext}}
182 | {{#each customers}} 183 |{{parentDataContext}}
189 | {{#each customers}} 190 |Foobar
199 | 200 | 201 | 202 | {{#if child1}} 203 | {{> ChildComponent args 'child1'}} 204 | {{/if}} 205 | {{#if child2}} 206 | {{> ChildComponent args 'child2'}} 207 | {{/if}} 208 | 209 | 210 | 211 |Left
212 | 213 | 214 | 215 |Middle
216 | 217 | 218 | 219 |Right
220 | 221 | 222 | 223 | {{> renderCase}} 224 | 225 | 226 | 227 |alternativeName: {{alternativeName}}
235 |values: {{values}}
236 |templateHelper: {{templateHelper}}
237 |extendedHelper: {{extendedHelper}}
238 |name: {{name}}
239 |dataContext: {{dataContext}}
240 |Counter: {{counter}}
256 | {{! And component's methods. }} 257 |Message: {{customHelper}}
258 | 259 | 260 | 261 |Content.
269 | {{/if}} 270 | 271 | 272 | 273 |Component data context: {{dataContext}}
274 |Current data context: {{currentDataContext}}
275 |Parent data context: {{parentDataContext}}
276 |Arguments: {{constructorArguments}}
277 | 278 | 279 | 280 |Component data context: {{dataContext}}
281 |Current data context: {{currentDataContext}}
282 |Parent data context: {{parentDataContext}}
283 |Arguments: {{constructorArguments}}
284 | 285 | 286 | 287 |Component data context: {{dataContext}}
288 |Current data context: {{currentDataContext}}
289 |Parent data context: {{parentDataContext}}
290 |Arguments: {{constructorArguments}}
291 | 292 | 293 | 294 |Main component: {{componentName}}
346 | 347 |{{foobar}}
348 | {{#with a='1' b='2'}} 349 | 350 |{{foobar2}}
351 | {{/with}} 352 |{{foobar3}}
353 | {{> Template.dynamic template='normalSubtemplate'}} 354 | {{> Template.dynamic template='FooComponent'}} 355 | {{#if isMainComponent}} 356 || Name | 367 |Component ({{componentName}}/{{component.componentName}}/{{currentComponent.componentName}}) | 369 |
|---|