The Aurelia 1 framework entry point, bringing together all the required sub-modules of Aurelia.

Overview

Aurelia

License: MIT npm Version Discourse status Twitter

aurelia-framework

Aurelia is a modern, front-end JavaScript framework for building browser, mobile, and desktop applications. It focuses on aligning closely with web platform specifications, using convention over configuration, and having minimal framework intrusion. Basically, we want you to just write your code without the framework getting in your way. 😉

This library is part of the Aurelia platform. It contains the aurelia-framework library, which brings together all the required core aurelia libraries into a ready-to-go application-building platform.

Aurelia applications are built by composing a series of simple components. By convention, components are made up of a vanilla JavaScript or Typescript class, with a corresponding HTML template.

//app.js
export class App {
  welcome = "Welcome to Aurelia";

  quests = [
    "To seek the holy grail",
    "To take the ring to Mordor",
    "To rescue princess Leia"
  ];
}
<!-- app.html -->
<template>
  <form>
    <label for="name-field">What is your name?</label>
    <input id="name-field" value.bind="name & debounce:500">

    <label for="quest-field">What is your quest?</label>
    <select id="quest-field" value.bind="quest">
      <option></option>
      <option repeat.for="q of quests">${q}</option>
    </select>
  </form>

  <p if.bind="name">${welcome}, ${name}!</p>
  <p if.bind="quest">Now set forth ${quest.toLowerCase()}!</p>
</template>

Check out the interactive version of this example on Code Sandbox.

This example shows you some of the powerful features of the aurelia binding syntax. To see further examples, online playgrounds, guides, and detailed API documentation, head on over to aurelia.io.

Feeling excited? To quickly get started building your project with aurelia, you can use the aurelia CLI.

Documentation

You can read the documentation for the aurelia framework here. It's divided into the following sections:

  • Overview : Discover what Aurelia is along with its business and technical advantages.
  • Tutorials : Step-by-step tutorials teaching you how to build your first Aurelia applications.
  • Fundamentals : After you've completed the quick starts, learn more about Aurelia's app model, components, dependency injection and more.
  • Binding: Learn all about Aurelia's powerful, reactive binding engine.
  • Templating: Learn all about Aurelia's powerful templating engine.
  • Routing: Learn how to setup and configure Aurelia's router.
  • Plugins: Learn about Aurelia's officially supported plugins and how to use them, including validation, i18n, http, dialog and state management.
  • Integration: Learn how to integrate Aurelia with various other libraries and frameworks.
  • Testing: Learn all about testing Aurelia apps, including component testing and e2e testing.
  • Server Side Rendering: Learn about Server Side Rendering with Aurelia and how to configure your project.
  • CLI: Learn how to create, build, bundle and test your apps using all your favorite tools, facilitated by the Aurelia CLI.
  • Build Systems: Learn how to use Webpack or JSPM directly for building apps without the Aurelia CLI.

You can improve the documentation by contributing to this repository.

Staying Up-to-Date

To keep up to date on Aurelia, please visit and subscribe to the official blog and our email list. We also invite you to follow us on twitter.

Questions

If you have questions, join us in our dedicated discourse forum or submit questions on stack overflow.

Contributing

We'd love for you to contribute and help make Aurelia even better than it is today! You can start by checking out our contributing guide, which has everything you need to get up and running.

License

Aurelia is MIT licensed. You can find out more and read the license document here.

Comments
  • Strange bug with Microsoft Edge

    Strange bug with Microsoft Edge

    Im encountering something really strange. My site only loads in Microsoft Edge when Developer Tools (F12) are open. Namely, if the debugger is connected, it seems to work, if I disconnect the debugger even with the dev tools open, the site stops loading.

    I've narrowed it down so far to the loading of templates. I have several globalResources (and plugins) some of which are custom elements. When I limit the amount of loading these, then my app template and beyond seems to load. If I load all of them, the loading stops either at one of the resources, or just the app template, or then the first routed view and so on.

    I am trying to create a repro out of this, but so far im very confused..

    opened by patroza 116
  • question: example of released web apps which use Aurelia

    question: example of released web apps which use Aurelia

    I heard Rob mentioned for quite a while now that there are companies which Aurelia in production for many months, but he cannot disclose their name, which can be understandable sometimes.

    But are there any examples of web apps which uses Aurelia in production and whose names can be given?

    I'm looking for:

    1. a real product/service, so not a demo or POC. Also something which is like an internal product doesn't help, because I want to check it out.
    2. some complexity in the data flow, must have several screens, different kinds of data flow between different UI components and views, validation, routing, etc. It must be something much more than the http://aurelia.io/docs.html app which shows static content
    3. must use latest Aurelia or something close to the last version

    Thanks

    question 
    opened by opcodewriter 103
  • Aurelia takes 3 seconds to load on Samsung Galaxy S6/Android/Chrome on small bundled project with few deps

    Aurelia takes 3 seconds to load on Samsung Galaxy S6/Android/Chrome on small bundled project with few deps

    mkdir blah
    cd blah
    yo aurelia
    gulp serve
    gulp bundle # in another window after the serve completes
    

    Loads in the blink of an eye on desktop browser. Takes 7-10 seconds to load the page on my Moto E using Chrome on Android 5.1. This is a reasonably powered (if budget) smartphone. I was surprised to have to wait so long and that it is the same no matter the state of the cache.

    I'd love to use Aurelia for a project I'm working on but I can't consider it with that mobile performance. Is there any likelihood this will considerably improve within the next few months?

    opened by insidewhy 93
  • Isomorphic / Universal

    Isomorphic / Universal

    Hi, I am very interested on Aurelia. I would like to ask if is there a plan to add an isomorphic architecture on it. We would have models, routes and templates on both sides, and we could render pages from server side. I think that's an important point today on Javascript frameworks.

    Thanks!

    enhancement 
    opened by anaibol 76
  • repeat.for renders same item twice

    repeat.for renders same item twice

    I have a strange issue where when I try to push an empty object to an array that is rendered in my view - the newly pushed element is rendered twice.

    The duplicate element is in fact the exact same element as the previous one (if I change the first the second also changes).

    I'm unable to reproduce this in a GistRun (perhaps version differences) - but I have managed to reproduce it in a completely new Aurelia CLI project with the following code:

    app.js

    export class App {
    	constructor () {
    		this.items = [];
    		this.editing = false;
    	}
    
    	// Toggle the edit form
    	toggleEditing () {
    		this.editing = !this.editing;
    
    		// Also add a new item
    		if (this.editing) {
    			this.items.push({}); // NOTE: This is where things go wrong
    		}
    	}
    }
    

    And this view:

    app.html

    <template>
    
    	<template if.bind="!editing">
    		<h2>${items.length} items!</h2>
    		<ul>
    			<li repeat.for="item of items">
    				${item.name}
    			</li>
    		</ul>
    		<button click.delegate="toggleEditing()">Edit</button>
    	</template>
    
    	<template if.bind="editing">
    		<ul>
    			<li repeat.for="item of items">
    				<input type="text" value.bind="item.name">
    			</li>
    		</ul>
    		<button click.delegate="toggleEditing()">Save</button>
    	</template>
    
    </template>
    

    My package.json looks like this (for version info):

    package.json

    {
      "name": "autest",
      "description": "An Aurelia client application.",
      "version": "0.1.0",
      "repository": {
        "type": "???",
        "url": "???"
      },
      "license": "MIT",
      "dependencies": {
        "aurelia-bootstrapper": "^2.1.1",
        "aurelia-animator-css": "^1.0.2",
        "bluebird": "^3.4.1",
        "requirejs": "^2.3.2",
        "text": "github:requirejs/text#latest"
      },
      "peerDependencies": {},
      "devDependencies": {
        "aurelia-cli": "^0.31.3",
        "aurelia-testing": "^1.0.0-beta.3.0.1",
        "aurelia-tools": "^1.0.0",
        "gulp": "github:gulpjs/gulp#4.0",
        "minimatch": "^3.0.2",
        "through2": "^2.0.1",
        "uglify-js": "^3.0.19",
        "vinyl-fs": "^2.4.3",
        "babel-eslint": "^6.0.4",
        "babel-plugin-syntax-flow": "^6.8.0",
        "babel-plugin-transform-decorators-legacy": "^1.3.4",
        "babel-plugin-transform-es2015-modules-amd": "^6.8.0",
        "babel-plugin-transform-es2015-modules-commonjs": "^6.10.3",
        "babel-plugin-transform-flow-strip-types": "^6.8.0",
        "babel-preset-es2015": "^6.13.2",
        "babel-preset-stage-1": "^6.5.0",
        "babel-polyfill": "^6.9.1",
        "babel-register": "^6.24.0",
        "gulp-babel": "^6.1.2",
        "gulp-eslint": "^2.0.0",
        "gulp-htmlmin": "^3.0.0",
        "html-minifier": "^3.2.3",
        "jasmine-core": "^2.4.1",
        "karma": "^0.13.22",
        "karma-chrome-launcher": "^2.2.0",
        "karma-jasmine": "^1.0.2",
        "karma-sourcemap-loader": "^0.3.7",
        "karma-babel-preprocessor": "^6.0.1",
        "browser-sync": "^2.13.0",
        "connect-history-api-fallback": "^1.2.0",
        "debounce": "^1.0.2",
        "gulp-changed-in-place": "^2.0.3",
        "gulp-plumber": "^1.1.0",
        "gulp-rename": "^1.2.2",
        "gulp-sourcemaps": "^2.0.0-alpha",
        "gulp-notify": "^2.2.0",
        "gulp-watch": "^4.3.11"
      }
    }
    

    Maybe it's something obvious I've missed? But it seems like a genuine bug to me.

    I'm attaching my example app as well which exhibits the bug and can be run in Firefox directly. Just click "Edit" and two input fields will be shown instead of one - changing one actually changes both.

    autest.zip

    bug 
    opened by powerbuoy 70
  • Official TypeScript definitions?

    Official TypeScript definitions?

    Are you guys planning an official Aurelia repo for the .d.ts files? I know there will be definitions in DefinitelyTyped or whatever, but the fact is, even DT contains broken or outdated definitions, and having up to date, official definitions would be very comforting.

    opened by BalassaMarton 69
  • Extending custom elements

    Extending custom elements

    So i’m having a fun issue where I extend a custom element, which then removes the extended custom element. For example. I have a generic “zone” class with the @customElement decorator. I then extend this “zone” class with a “deck” class. All my other zones are then no longer available.

    Zone.js

    import {customElement, bindable} from 'aurelia-framework';
    import {inject} from 'aurelia-framework';
    import {GameServer} from '../services/game-server.js'
    
    @inject(GameServer)
    @customElement('zone')
    export class Zone {
        @bindable zoneCards: Array<number> = [];
        @bindable zoneId: string;
    
        _gameServer: GameServer;
    
        constructor(GameServer) {
            this._gameServer = GameServer;
        }
    
        attached() {
            console.log('attaching zone:', this.zoneId);
            this._gameServer._serverConnection.on('zone-accept', this._acceptCard.bind(this));
        }
    
        _acceptCard(zoneId) {
            console.log('zone-accept event received:', this.zoneId, '-', zoneId);
            if(!this.zoneId || this.zoneId != zoneId) {
                return;
            }
    
            console.log('Received card!');
            this.zoneCards.push(Math.random());
        }
    }
    

    Deck.js

    import {Zone} from './../zone.js'
    import {customElement} from 'aurelia-framework';
    
    @customElement('deck')
    export class Deck extends Zone {}
    
    opened by LordZardeck 44
  • Extended help section for standard webpack

    Extended help section for standard webpack

    Doc: (setup-webpack.md): Update doc for setup with standard webpack configuration

    This gives some basic guide line for standard webpack configuration, enabling flexibility in modifying the configs.

    This is a result of as the orginial author refused to make a pull request

    • aurelia/skeleton-navigation#688
    • NOTE:
      • Breaking changes in webpack 2.1.0.beta-23, that no longer allow custom properties on config
    opened by bigopon 38
  • Add global error/exception handler

    Add global error/exception handler

    Aurelia should route any uncaught exception or any unhandled rejected promise coming from expressions or from methods called by the framework itself (attached, activate, constructor (DI)) to a global exception handling service in order to let application developers to log the errors.

    This would be equivalent to Angular’s $exceptionHandler service.

    This serves two purposes:

    1. At dev time, I can implement a handler that shows an alert whenever there is an uncaught exception. No need to constantly monitor the console window.
    2. At production time, I can implement a handler that forwards all uncaught exceptions to a logging service on my server. Moreover I could decide to show an error panel of some sort, something like “Oups! Something went wrong, please reload your browser.”
    opened by sylvain-hamel 38
  • using setRoot fails to employ the router after the first call

    using setRoot fails to employ the router after the first call

    Aurelia.setRoot('a') // a is called, its router is instantiated properly
    Aurelia.setRoot('b')
    Aurelia.setRoot('a') // a is called but its router-view is empty
    
    bug enhancement 
    opened by davismj 37
  • community.aurelia.io

    community.aurelia.io

    Aurelia lacks a dedicated community platform for asynchronous discussion. Gitter is great for real-time chat and StackOverflow is great for Q&A, but neither is great as a general community discussion platform.

    Please consider setting up an instance of the open-source Discourse community platform. Discourse even provides free hosting for open source communities.

    Providing a dedicated community discussion platform can help aurelia grow in strength and popularity.

    question documentation 
    opened by brylie 34
  • build(deps): bump engine.io and socket.io

    build(deps): bump engine.io and socket.io

    Bumps engine.io and socket.io. These dependencies needed to be updated together. Updates engine.io from 6.1.3 to 6.2.1

    Release notes

    Sourced from engine.io's releases.

    6.2.1

    :warning: This release contains an important security fix :warning:

    A malicious client could send a specially crafted HTTP request, triggering an uncaught exception and killing the Node.js process:

    Error: read ECONNRESET
        at TCP.onStreamRead (internal/stream_base_commons.js:209:20)
    Emitted 'error' event on Socket instance at:
        at emitErrorNT (internal/streams/destroy.js:106:8)
        at emitErrorCloseNT (internal/streams/destroy.js:74:3)
        at processTicksAndRejections (internal/process/task_queues.js:80:21) {
      errno: -104,
      code: 'ECONNRESET',
      syscall: 'read'
    }
    

    Please upgrade as soon as possible.

    Bug Fixes

    • catch errors when destroying invalid upgrades (#658) (425e833)

    6.2.0

    Features

    • add the "maxPayload" field in the handshake details (088dcb4)

    So that clients in HTTP long-polling can decide how many packets they have to send to stay under the maxHttpBufferSize value.

    This is a backward compatible change which should not mandate a new major revision of the protocol (we stay in v4), as we only add a field in the JSON-encoded handshake data:

    0{"sid":"lv_VI97HAXpY6yYWAAAC","upgrades":["websocket"],"pingInterval":25000,"pingTimeout":5000,"maxPayload":1000000}
    

    Links

    Changelog

    Sourced from engine.io's changelog.

    6.2.1 (2022-11-20)

    :warning: This release contains an important security fix :warning:

    A malicious client could send a specially crafted HTTP request, triggering an uncaught exception and killing the Node.js process:

    Error: read ECONNRESET
        at TCP.onStreamRead (internal/stream_base_commons.js:209:20)
    Emitted 'error' event on Socket instance at:
        at emitErrorNT (internal/streams/destroy.js:106:8)
        at emitErrorCloseNT (internal/streams/destroy.js:74:3)
        at processTicksAndRejections (internal/process/task_queues.js:80:21) {
      errno: -104,
      code: 'ECONNRESET',
      syscall: 'read'
    }
    

    Please upgrade as soon as possible.

    Bug Fixes

    • catch errors when destroying invalid upgrades (#658) (425e833)

    3.6.0 (2022-06-06)

    Bug Fixes

    Features

    • decrease the default value of maxHttpBufferSize (58e274c)

    This change reduces the default value from 100 mb to a more sane 1 mb.

    This helps protect the server against denial of service attacks by malicious clients sending huge amounts of data.

    See also: https://github.com/advisories/GHSA-j4f2-536g-r55m

    • increase the default value of pingTimeout (f55a79a)

    ... (truncated)

    Commits
    • 24b847b chore(release): 6.2.1
    • 425e833 fix: catch errors when destroying invalid upgrades (#658)
    • 99adb00 chore(deps): bump xmlhttprequest-ssl and engine.io-client in /examples/latenc...
    • d196f6a chore(deps): bump minimatch from 3.0.4 to 3.1.2 (#660)
    • 7c1270f chore(deps): bump nanoid from 3.1.25 to 3.3.1 (#659)
    • 535a01d ci: add Node.js 18 in the test matrix
    • 1b71a6f docs: remove "Vanilla JS" highlight from README (#656)
    • 917d1d2 refactor: replace deprecated String.prototype.substr() (#646)
    • 020801a chore: add changelog for version 3.6.0
    • ed1d6f9 test: make test script work on Windows (#643)
    • Additional commits viewable in compare view

    Updates socket.io from 4.4.1 to 4.5.3

    Release notes

    Sourced from socket.io's releases.

    4.5.3

    Bug Fixes

    • typings: accept an HTTP2 server in the constructor (d3d0a2d)
    • typings: apply types to "io.timeout(...).emit()" calls (e357daf)

    Links:

    4.5.2

    Bug Fixes

    • prevent the socket from joining a room after disconnection (18f3fda)
    • uws: prevent the server from crashing after upgrade (ba497ee)

    Links:

    4.5.1

    Bug Fixes

    • forward the local flag to the adapter when using fetchSockets() (30430f0)
    • typings: add HTTPS server to accepted types (#4351) (9b43c91)

    Links:

    4.5.0

    Bug Fixes

    • typings: ensure compatibility with TypeScript 3.x (#4259) (02c87a8)

    Features

    • add support for catch-all listeners for outgoing packets (531104d)

    This is similar to onAny(), but for outgoing packets.

    ... (truncated)

    Changelog

    Sourced from socket.io's changelog.

    4.5.3 (2022-10-15)

    Bug Fixes

    • typings: accept an HTTP2 server in the constructor (d3d0a2d)
    • typings: apply types to "io.timeout(...).emit()" calls (e357daf)

    4.5.2 (2022-09-02)

    Bug Fixes

    • prevent the socket from joining a room after disconnection (18f3fda)
    • uws: prevent the server from crashing after upgrade (ba497ee)

    2.5.0 (2022-06-26)

    Bug Fixes

    • fix race condition in dynamic namespaces (05e1278)
    • ignore packet received after disconnection (22d4bdf)
    • only set 'connected' to true after middleware execution (226cc16)
    • prevent the socket from joining a room after disconnection (f223178)

    4.5.1 (2022-05-17)

    Bug Fixes

    • forward the local flag to the adapter when using fetchSockets() (30430f0)
    • typings: add HTTPS server to accepted types (#4351) (9b43c91)

    4.5.0 (2022-04-23)

    Bug Fixes

    • typings: ensure compatibility with TypeScript 3.x (#4259) (02c87a8)

    ... (truncated)

    Commits
    • 945c84b chore(release): 4.5.3
    • d3d0a2d fix(typings): accept an HTTP2 server in the constructor
    • 19b225b docs(examples): update dependencies of the basic CRUD example
    • 8fae95d docs: add jsdoc for each public method
    • e6f6b90 docs: add deprecation notice for the allSockets() method
    • 596eb88 ci: upgrade to actions/checkout@3 and actions/setup-node@3
    • e357daf fix(typings): apply types to "io.timeout(...).emit()" calls
    • 10fa4a2 refactor: add list of possible disconnection reasons
    • 8be95b3 chore(release): 4.5.2
    • ba497ee fix(uws): prevent the server from crashing after upgrade
    • Additional commits viewable in compare view

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • build(deps): bump socket.io-parser from 4.0.4 to 4.0.5

    build(deps): bump socket.io-parser from 4.0.4 to 4.0.5

    Bumps socket.io-parser from 4.0.4 to 4.0.5.

    Release notes

    Sourced from socket.io-parser's releases.

    4.0.5

    Bug Fixes

    • check the format of the index of each attachment (b559f05)

    Links

    Changelog

    Sourced from socket.io-parser's changelog.

    4.0.5 (2022-06-27)

    Bug Fixes

    • check the format of the index of each attachment (b559f05)

    4.2.0 (2022-04-17)

    Features

    • allow the usage of custom replacer and reviver (#112) (b08bc1a)

    4.1.2 (2022-02-17)

    Bug Fixes

    • allow objects with a null prototype in binary packets (#114) (7f6b262)

    4.1.1 (2021-10-14)

    4.1.0 (2021-10-11)

    Features

    • provide an ESM build with and without debug (388c616)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Many aurelia libraries are broken in iOS 16

    Many aurelia libraries are broken in iOS 16

    I'm submitting a bug report

    • Library Version: aurelia-bootstrapper: 2.3.3

    Please tell us about your environment:

    • Operating System: OSX 16

    • Node Version: 14.16.0

    • NPM Version: 6.14.11
    • Aurelia CLI OR JSPM OR Webpack AND Version CLI 1.3.1 | webpack 4.46.0
    • Browser: iOS 16 Safari

    • Language: all

    Current behavior: After the new IOS 16, Safari has a weird behavior in Aurelia, causing many libraries to fail at the detached event. After some searching I found that the ownerdocument of the element is an empty one (about:blank) and many libraries that do cleanup at the detached event are getting errors. More details can be found here.

    There is also a repro on the issue 808 of aurelia-kendoui-bridge aurelia-ui-toolkits/aurelia-kendoui-bridge#808

    Expected/desired behavior:

    Be compatible with Safari.

    • What is the motivation / use case for changing the behavior? Can we do something to be compatible again with the new Safari?
    opened by jded76 39
  • Content of repeat for on tr tag rendered outside of tag

    Content of repeat for on tr tag rendered outside of tag

    I'm submitting a bug report

    • Library Version: aurelia-bootstrapper 2.3.3

    Please tell us about your environment:

    • Operating System: Ubuntu 18.04.6 LTS

    • Node Version: 14.16.0

    • NPM Version: 6.14.11
    • Aurelia CLI OR JSPM OR Webpack AND Version CLI 2.0.3 | webpack 5.64.2
    • Browser: Chrome 96.0.4664.45

    • Language: TypeScript 4.5.2

    Current behavior: Text inside tr tag is rendered outside and only once

    Expected/desired behavior:

    Content of tr tag is rendered inside tr tags, one for every iteration here is repo with example

    opened by FrantisekPostl 1
  • Component inheritance with bindings on the base doesn't work as expected

    Component inheritance with bindings on the base doesn't work as expected

    I'm submitting a bug report

    • Library Version:
        "aurelia-animator-css": "1.0.4",
        "aurelia-binding": "2.5.4",
        "aurelia-bootstrapper": "2.3.3",
        "aurelia-event-aggregator": "1.0.3",
        "aurelia-fetch-client": "1.8.2",
        "aurelia-framework": "1.3.1",
        "aurelia-history": "1.2.1",
        "aurelia-history-browser": "1.4.0",
        "aurelia-loader-nodejs": "1.1.0",
        "aurelia-loader-webpack": "2.2.1",
        "aurelia-logging": "^1.5.2",
        "aurelia-logging-console": "1.1.1",
        "aurelia-pal": "1.8.2",
        "aurelia-pal-browser": "1.8.1",
        "aurelia-pal-nodejs": "2.0.0",
        "aurelia-polyfills": "1.3.4",
        "aurelia-router": "1.7.1",
        "aurelia-templating": "1.10.4",
        "aurelia-templating-resources": "1.13.1",
        "aurelia-templating-router": "1.4.0",
    

    Please tell us about your environment:

    • Operating System: Windows 10

    • Node Version: 12.7.0

    • NPM Version: 6.14.8

    • Aurelia CLI OR JSPM OR Webpack AND Version I'm using Webpack

        "aurelia-cli": "^1.0.2",
        "aurelia-tools": "^2.0.0",
        "aurelia-webpack-plugin": "^3.0.0",
        "webpack": "^4.27.0",
    
    • Browser: Chrome (maybe All)

    • Language: TypeScript 3.6.4

    Current behavior: I'm talking about normal components, none of this cool shadow component stuff

    Base Component has a property binding Component A extends the base and displays it in funky red text Component B extends the base and displays it in boring black text Coincidentally, both components have a dependency that is autoinjected (to get to the base which needs it)

    If I have a page that renders Component A, then I navigate to a page that renders Component B, either Component B won't render at all, or it will render as though I was using Component A. Likewise if I first went to a page that had Component B on it, then went to a page with Component A, then Component A wouldn't display (or would be displaying like Component B). I think there is some kind of caching going on somewhere in the composition engine based on the component's "fingerprint", and that caching mechanism seems to think these components are the same.

    The solution is to take the binding decorator off the Base Component. I declare the property as abstract on the abstract base (keep TypeScript happy). I declare the property with the binding decorator and Component A and Component B separately.

    Expected/desired behavior: That both components would display as expected and that I wouldn't need to declare the property with the binding decorator separately on Component A and Component B, rather than just declaring it in the Base Component.

    I think this is enough and the workaround is not a problem for me but if you need more information then let me know.

    By the way, Aurelia rocks 😁

    opened by googleoryx 0
Releases(1.4.1)
Owner
aurelia
A standards-based, front-end framework designed for high-performing, ambitious applications.
aurelia
OpenUI5 lets you build enterprise-ready web applications, responsive to all devices, running on almost any browser of your choice.

OpenUI5. Build Once. Run on any device. What is it? OpenUI5 lets you build enterprise-ready web applications, responsive to all devices, running on al

SAP 2.7k Dec 31, 2022
Stop re-writing thirdweb snippets. Use thirdsnips to make it all snap!

?? thirdsnips Stop re-writing thirdweb snippets. Use thirdsnips to make it all snap! Thirdsnips is a tool which enhances the developer experience whil

Avneesh Agarwal 7 May 11, 2022
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

Supporting Vue.js Vue.js is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome ba

vuejs 201.6k Jan 7, 2023
One framework. Mobile & desktop.

Angular - One framework. Mobile & desktop. Angular is a development platform for building mobile and desktop web applications using Typescript/JavaScr

Angular 85.6k Dec 31, 2022
Ember.js - A JavaScript framework for creating ambitious web applications

Ember.js is a JavaScript framework that greatly reduces the time, effort and resources needed to build any web application. It is focused on making yo

Ember.js 22.4k Jan 4, 2023
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

vue-next This is the repository for Vue 3.0. Quickstart Via CDN: <script src="https://unpkg.com/vue@next"></script> In-browser playground on Codepen S

vuejs 34.6k Jan 4, 2023
The tiny framework for building hypertext applications.

Hyperapp The tiny framework for building hypertext applications. Do more with less—We have minimized the concepts you need to learn to get stuff done.

Jorge Bucaran 18.9k Jan 1, 2023
🌱 React and redux based, lightweight and elm-style framework. (Inspired by elm and choo)

English | 简体中文 dva Lightweight front-end framework based on redux, redux-saga and react-router. (Inspired by elm and choo) Features Easy to learn, eas

null 16.1k Jan 4, 2023
Relay is a JavaScript framework for building data-driven React applications.

Relay · Relay is a JavaScript framework for building data-driven React applications. Declarative: Never again communicate with your data store using a

Facebook 17.5k Jan 1, 2023
A rugged, minimal framework for composing JavaScript behavior in your markup.

Alpine.js Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost. You get to keep your DOM,

Alpine.js 22.5k Jan 2, 2023
The AMP web component framework.

AMP ⚡ ⚡ ⚡ ⚡ Metrics Tooling AMP is a web component framework for easily creating user-first websites, stories, ads, emails and more. AMP is an open so

AMP 14.9k Jan 4, 2023
A JavaScript Framework for Building Brilliant Applications

mithril.js What is Mithril? Installation Documentation Getting Help Contributing What is Mithril? A modern client-side JavaScript framework for buildi

null 13.5k Dec 28, 2022
Front End Cross-Frameworks Framework - 前端跨框架跨平台框架

English | 简体中文 Omi - Front End Cross-Frameworks Framework Merge Web Components, JSX, Virtual DOM, Functional style, observe or Proxy into one framewor

Tencent 12.5k Dec 31, 2022
A modest JavaScript framework for the HTML you already have

Stimulus A modest JavaScript framework for the HTML you already have Stimulus is a JavaScript framework with modest ambitions. It doesn't seek to take

Hotwire 11.7k Dec 29, 2022
A functional and reactive JavaScript framework for predictable code

Cycle.js A functional and reactive JavaScript framework for predictable code Website | Packages | Contribute | Chat | Support Welcome Question Answer

Cycle.js 10.2k Jan 4, 2023
🐰 Rax is a progressive React framework for building universal application. https://rax.js.org

Rax is a progressive React framework for building universal applications. ?? Write Once, Run Anywhere: write one codebase, run with Web, Weex, Node.js

Alibaba 7.8k Dec 31, 2022
:steam_locomotive::train: - sturdy 4kb frontend framework

Choo ?? ?? ?? ?? ?? ?? Fun functional programming A 4kb framework for creating sturdy frontend applications Website | Handbook | Ecosystem | Contribut

choo 6.7k Jan 4, 2023
CrossUI is a free Cross-Browser Javascript framework with cutting-edge functionality for rich web application

CrossUI is a free Cross-Browser Javascript framework with cutting-edge functionality for rich web application

Jack Li 1.4k Jan 3, 2023
App development framework based on cocos creator3.1.1

todo: Waiting for English translation cx-cocos App development framework based on cocos creator3.1.1 一个基于cocos creator3.1.1的应用App和游戏开发框架 关键词:cocos cre

null 63 Dec 7, 2022