How to use @aurelia/jit - 10 common examples

To help you get started, we’ve selected a few @aurelia/jit examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github aurelia / aurelia / packages / testing / dist / umd / au-dom.js View on Github external
createRepeatInstruction(expression, def) {
            return new runtime_1.HydrateTemplateController(def, 'repeat', [new runtime_1.IteratorBindingInstruction(jit_1.parseExpression(expression, 539 /* ForCommand */), 'items')]);
        },
        createReplaceableInstruction(def) {
github aurelia / aurelia / packages / testing / src / au-dom.ts View on Github external
createTextDefinition(expression: string, name: string = `${expression}-text`): ITemplateDefinition {
    return {
      build: { required: false },
      name,
      template: AuNode.createText().makeTarget(),
      // @ts-ignore
      instructions: [[new AuTextInstruction(parseExpression(expression))]]
    };
  },
  createTemplateControllerDefinition(instruction: HydrateTemplateController, name: string = instruction.res): ITemplateDefinition {
github aurelia / aurelia / packages / jit-html / dist / index.es6.js View on Github external
}
        const command = this.resources.getBindingCommand(attrSyntax);
        let symbol;
        if (command == null && attrInfo.hasDynamicOptions) {
            // a dynamicOptions (semicolon separated binding) is only valid without a binding command;
            // the binding commands must be declared in the dynamicOptions expression itself
            symbol = new CustomAttributeSymbol(attrSyntax, attrInfo);
            this.bindMultiAttribute(symbol, attrInfo, attrSyntax.rawValue);
        }
        else {
            // we've either got a command (with or without dynamicOptions, the latter maps to the first bindable),
            // or a null command but without dynamicOptions (which may be an interpolation or a normal string)
            symbol = new CustomAttributeSymbol(attrSyntax, attrInfo);
            const bindingType = command == null ? 2048 /* Interpolation */ : command.bindingType;
            const expr = this.exprParser.parse(attrSyntax.rawValue, bindingType);
            symbol.bindings.push(new BindingSymbol(command, attrInfo.bindable, expr, attrSyntax.rawValue, attrSyntax.target));
        }
        this.manifest.attributes.push(symbol);
        this.manifest.isTarget = true;
        if (Tracer.enabled) {
            Tracer.leave();
        }
    }
    bindMultiAttribute(symbol, attrInfo, value) {
github aurelia / aurelia / packages / jit-html / src / template-binder.ts View on Github external
private declareTemplateController(attrSyntax: AttrSyntax, attrInfo: AttrInfo): TemplateControllerSymbol {

    let symbol: TemplateControllerSymbol;
    // dynamicOptions logic here is similar to (and explained in) bindCustomAttribute
    const command = this.resources.getBindingCommand(attrSyntax, false);
    if (command == null && attrInfo.hasDynamicOptions) {
      symbol = new TemplateControllerSymbol(this.dom, attrSyntax, attrInfo, this.partName);
      this.bindMultiAttribute(symbol, attrInfo, attrSyntax.rawValue);
    } else {
      symbol = new TemplateControllerSymbol(this.dom, attrSyntax, attrInfo, this.partName);
      const bindingType = command == null ? BindingType.Interpolation : command.bindingType;
      const expr = this.exprParser.parse(attrSyntax.rawValue, bindingType);
      symbol.bindings.push(new BindingSymbol(command, attrInfo.bindable, expr, attrSyntax.rawValue, attrSyntax.target));
    }

    return symbol;
  }
github aurelia / aurelia / packages / jit-html / dist / index.es6.js View on Github external
if (Tracer.enabled) {
            Tracer.enter('TemplateBinder', 'declareTemplateController', slice.call(arguments));
        }
        let symbol;
        // dynamicOptions logic here is similar to (and explained in) bindCustomAttribute
        const command = this.resources.getBindingCommand(attrSyntax);
        if (command == null && attrInfo.hasDynamicOptions) {
            symbol = new TemplateControllerSymbol(this.dom, attrSyntax, attrInfo, this.partName);
            this.partName = null;
            this.bindMultiAttribute(symbol, attrInfo, attrSyntax.rawValue);
        }
        else {
            symbol = new TemplateControllerSymbol(this.dom, attrSyntax, attrInfo, this.partName);
            const bindingType = command == null ? 2048 /* Interpolation */ : command.bindingType;
            const expr = this.exprParser.parse(attrSyntax.rawValue, bindingType);
            symbol.bindings.push(new BindingSymbol(command, attrInfo.bindable, expr, attrSyntax.rawValue, attrSyntax.target));
            this.partName = null;
        }
        if (Tracer.enabled) {
            Tracer.leave();
        }
        return symbol;
    }
    bindCustomAttribute(attrSyntax, attrInfo) {
github aurelia / aurelia / packages / jit-html / dist / index.es6.js View on Github external
Tracer.enter('TemplateBinder', 'bindMultiAttribute', slice.call(arguments));
        }
        const attributes = parseMultiAttributeBinding(value);
        let attr;
        for (let i = 0, ii = attributes.length; i < ii; ++i) {
            attr = attributes[i];
            const attrSyntax = this.attrParser.parse(attr.name, attr.value);
            const command = this.resources.getBindingCommand(attrSyntax);
            const bindingType = command == null ? 2048 /* Interpolation */ : command.bindingType;
            const expr = this.exprParser.parse(attrSyntax.rawValue, bindingType);
            let bindable = attrInfo.bindables[attrSyntax.target];
            if (bindable === undefined) {
                // everything in a dynamicOptions expression must be used, so if it's not a bindable then we create one on the spot
                bindable = attrInfo.bindables[attrSyntax.target] = new BindableInfo(attrSyntax.target, BindingMode.toView);
            }
            symbol.bindings.push(new BindingSymbol(command, bindable, expr, attrSyntax.rawValue, attrSyntax.target));
        }
        if (Tracer.enabled) {
            Tracer.leave();
        }
    }
    bindPlainAttribute(attrSyntax, attr) {
github aurelia / aurelia / packages / jit-html / src / template-binder.ts View on Github external
const attributes = parseMultiAttributeBinding(value);
    let attr: IAttrLike;
    for (let i = 0, ii = attributes.length; i < ii; ++i) {
      attr = attributes[i];
      const attrSyntax = this.attrParser.parse(attr.name, attr.value);
      const command = this.resources.getBindingCommand(attrSyntax, false);
      const bindingType = command == null ? BindingType.Interpolation : command.bindingType;
      const expr = this.exprParser.parse(attrSyntax.rawValue, bindingType);
      let bindable = attrInfo.bindables[attrSyntax.target];
      if (bindable === undefined) {
        // everything in a dynamicOptions expression must be used, so if it's not a bindable then we create one on the spot
        bindable = attrInfo.bindables[attrSyntax.target] = new BindableInfo(attrSyntax.target, BindingMode.toView);
      }

      symbol.bindings.push(new BindingSymbol(command, bindable, expr, attrSyntax.rawValue, attrSyntax.target));
    }

  }
github aurelia / aurelia / packages / jit-html / dist / index.es6.js View on Github external
if (attrSyntax.rawValue.length === 0) {
            if (Tracer.enabled) {
                Tracer.leave();
            }
            return;
        }
        const command = this.resources.getBindingCommand(attrSyntax);
        const bindingType = command == null ? 2048 /* Interpolation */ : command.bindingType;
        const manifest = this.manifest;
        const expr = this.exprParser.parse(attrSyntax.rawValue, bindingType);
        if (manifest.flags & 16 /* isCustomElement */) {
            const bindable = manifest.bindables[attrSyntax.target];
            if (bindable != null) {
                // if the attribute name matches a bindable property name, add it regardless of whether it's a command, interpolation, or just a plain string;
                // the template compiler will translate it to the correct instruction
                manifest.bindings.push(new BindingSymbol(command, bindable, expr, attrSyntax.rawValue, attrSyntax.target));
                manifest.isTarget = true;
            }
            else if (expr != null || attrSyntax.target === 'ref') {
                // if it does not map to a bindable, only add it if we were able to parse an expression (either a command or interpolation)
                manifest.attributes.push(new PlainAttributeSymbol(attrSyntax, command, expr));
                manifest.isTarget = true;
            }
        }
        else if (expr != null || attrSyntax.target === 'ref') {
            // either a binding command, an interpolation, or a ref
            manifest.attributes.push(new PlainAttributeSymbol(attrSyntax, command, expr));
            manifest.isTarget = true;
        }
        else if (manifest === this.surrogate) {
            // any attributes, even if they are plain (no command/interpolation etc), should be added if they
            // are on the surrogate element
github aurelia / aurelia / packages / jit-html / dist / index.es6.js View on Github external
const attributes = node.attributes;
        let i = 0;
        while (i < attributes.length) {
            const attr = attributes[i];
            if (attr.name === 'to-view-model') {
                node.removeAttribute('to-view-model');
                symbol.toViewModel = true;
                continue;
            }
            const attrSyntax = this.attrParser.parse(attr.name, attr.value);
            const command = this.resources.getBindingCommand(attrSyntax);
            const bindingType = command == null ? 2048 /* Interpolation */ : command.bindingType;
            const expr = this.exprParser.parse(attrSyntax.rawValue, bindingType);
            const to = camelCase(attrSyntax.target);
            const info = new BindableInfo(to, BindingMode.toView);
            symbol.bindings.push(new BindingSymbol(command, info, expr, attrSyntax.rawValue, to));
            ++i;
        }
        node.parentNode.replaceChild(symbol.marker, node);
    }
    bindAttributes(node, parentManifest) {
github aurelia / aurelia / packages / jit-html / src / template-binder.ts View on Github external
private bindCustomAttribute(attrSyntax: AttrSyntax, attrInfo: AttrInfo): void {

    const command = this.resources.getBindingCommand(attrSyntax, false);
    let symbol: CustomAttributeSymbol;
    if (command == null && attrInfo.hasDynamicOptions) {
      // a dynamicOptions (semicolon separated binding) is only valid without a binding command;
      // the binding commands must be declared in the dynamicOptions expression itself
      symbol = new CustomAttributeSymbol(attrSyntax, attrInfo);
      this.bindMultiAttribute(symbol, attrInfo, attrSyntax.rawValue);
    } else {
      // we've either got a command (with or without dynamicOptions, the latter maps to the first bindable),
      // or a null command but without dynamicOptions (which may be an interpolation or a normal string)
      symbol = new CustomAttributeSymbol(attrSyntax, attrInfo);
      const bindingType = command == null ? BindingType.Interpolation : command.bindingType;
      const expr = this.exprParser.parse(attrSyntax.rawValue, bindingType);
      symbol.bindings.push(new BindingSymbol(command, attrInfo.bindable, expr, attrSyntax.rawValue, attrSyntax.target));
    }
    const manifest = this.manifest!;
    manifest.customAttributes.push(symbol);
    manifest.isTarget = true;

  }