Giter Site home page Giter Site logo

pal-browser's Introduction

Aurelia

License: MIT npm version CircleCI TypeScript Twitter

Backers on Open Collective Sponsors on Open Collective Discord Chat

Aurelia 2

This is the Aurelia 2 monorepo, containing core and plugin packages, examples, benchmarks, and documentation for the upcoming major version of everybody's favorite modern JavaScript framework, Aurelia.

Introduction

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. ๐Ÿ˜‰

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 -->
<form>
  <label>
    <span>What is your name?</span>
    <input value.bind="name & debounce:500">
  </label>

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

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

This example shows you some of the powerful features of the aurelia binding syntax. To learn further, please see our documentation.

Feeling excited? Check out how to use makes to get started in the next section.

Note: Please keep in mind that Aurelia 2 is still in beta. A number of features and use cases around the public API are still untested and there will be a few more breaking changes.

Getting Started

First, ensure that you have Node.js v8.9.0 or above installed on your system. Next, using npx, a tool distributed as part of Node.js, we'll create a new Aurelia 2 app. At a command prompt, run the following command:

npx makes aurelia

This will cause npx to download the makes scaffolding tool, along with the aurelia generator, which it will use to guide you through the setup process. Once complete, you'll have a new Aurelia 2 project ready to run. For more information on Aurelia's use of makes, see here. If you aren't interested in taking our preferred approach to generating a project, you can also see the examples folder in this repo for pure JIT setups (no conventions) with various loaders and bundlers.

Documentation

You can read the documentation on Aurelia 2 here. Our new docs are currently a work-in-progress, so the most complete documentation is available in our getting started section. If you've never used Aurelia before, you'll want to begin with our Quick Start Guide.

Contributing

If you are interested in contributing to Aurelia, please see our contributor documentation for more information. You'll learn how to build the code and run tests, how best to engage in our social channels, how to submit PRs, and even how to contribute to our documentation. We welcome you and thank you in advance for joining with us in this endeavor.

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. If you have questions, have a look around our Discourse forum. For chat on Aurelia 2, join our new Aurelia 2 community on Discord. If you'd like to join the growing list of Aurelia sponsors, please back us on Open Collective.

License

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

pal-browser's People

Contributors

alexander-taran avatar bigopon avatar danhowitt avatar doktordirk avatar eisenbergeffect avatar fkleuver avatar gheoan avatar hamedfathi avatar jdanyow avatar jeroenvinke avatar jods4 avatar joncarlson avatar niieani avatar plwalters avatar strahilkazlachev avatar zewa666 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

pal-browser's Issues

DI error when injecting DOM.Element into SlotCustomAttribute

I'm submitting a bug report

  • Library Version:
    1.1.0

  • Operating System:
    Linux (Ubuntu)

  • Node Version:
    6.5.0

  • JSPM
    0.16.29

  • Browser:
    all

  • Language:
    TypeScript 2.0.3

  • Aurelia bundler:
    0.4.0

When adding <div slot="x"> anywhere, I get this error:

aurelia.js:16441 Uncaught Error: Error invoking SlotCustomAttribute. Check the inner error for details.
------------------------------------------------
Inner Error:
Message: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
Inner Error Stack:
Error: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
    at validateKey (http://localhost:8080/myproject/frontend/bundles/aurelia.js:6664:13)
    at Container.get (http://localhost:8080/myproject/frontend/bundles/aurelia.js:6810:7)
    at Container.elementContainerGet [as get] (http://localhost:8080/myproject/frontend/bundles/aurelia.js:8642:17)
    at Object.invoke (http://localhost:8080/myproject/frontend/bundles/aurelia.js:6700:33)
    at InvocationHandler.invoke (http://localhost:8080/myproject/frontend/bundles/aurelia.js:6678:168)
    at Container.invoke (http://localhost:8080/myproject/frontend/bundles/aurelia.js:6873:25)
    at ProviderResolver.get (http://localhost:8080/myproject/frontend/bundles/aurelia.js:8601:74)
    at Container.get (http://localhost:8080/myproject/frontend/bundles/aurelia.js:6828:23)
    at Container.elementContainerGet [as get] (http://localhost:8080/myproject/frontend/bundles/aurelia.js:8642:17)
    at HtmlBehaviorResource.create (http://localhost:8080/myproject/frontend/bundles/aurelia.js:10198:58)
End Inner Error Stack

If I go into the source and replace DOM.Element with Element in the SlotCustomAttribute injection, named slots function as expected.

I suspected that this error was somehow related to aurelia/binding#376, however the problem persists after upgrading to metadata 1.0.3.

The project has a custom bootstrap using bootstrapper 2.0.1 that looks something like this:

bootstrap((aurelia: Aurelia) => {
	aurelia.use
		.defaultBindingLanguage()
		.defaultResources()
		.globalResources(myResourcePaths)
		.plugin("aurelia-animator-css", (animator: any) => {
			animator.useAnimationDoneClasses = true;
			animator.verifyKeyframesExist = false;
		})
		.plugin("aurelia-property-injection")
		.plugin("aurelia-dialog", (dialog: any) => {
			dialog.useDefaults().useCSS(null);
			dialog.settings.ignoreTransitions = true;
		});

	aurelia.container.registerInstance(MyAppConfig, config);

	aurelia.start().then(() => {
		let myInitService: AppInitService = aurelia.container.get(AppInitService);
		myInitService.start();

		aurelia.enhance({}, document.body);
		templatingEngine = aurelia.container.get(TemplatingEngine);
	});
});

Unable to get property 'querySelectorAll' of undefined or null reference

I'm submitting a bug report

  • Library Version:
    1.0.0

Please tell us about your environment:

  • Operating System:
    Windows 7
  • Node Version:
    4.1.2
  • JSPM OR Webpack AND Version
    JSPM 0.16.42
  • Browser:
    IE 11, document mode Edge
  • Language:
    TypeScript 1.8

Current behavior:
in IE11, my app throws "Unable to get property 'querySelectorAll' of undefined or null reference" at line 73 of aurelia-loader:

requires = value.content.querySelectorAll('require');

content is undefined.

Expected/desired behavior:

It seems the htmlTemplateElement test is not adequate for what createTemplateFromMarkup is doing, ie

'content' in document.createElement("template")

returns true, but

var d = document.createElement("div");
d.innerHTML = "<template></template>";
'content' in d.children[0]

returns false.

  • What is the motivation / use case for changing the behavior?
    make my app not die in ie11

DOM !== PLATFORM.global.document

i'd would have thought, they are the same. but it seems that when there is an unrecognized route, DOM.location is undefined whereas PLATFORM.global.document.location is that unrecognized location

TypeError: _aureliaPal.DOM.injectStyles is not a function

I'm submitting a bug report

  • Library Version:
    1.3.0

Please tell us about your environment:

  • Operating System:
    Windows 10

  • Node Version:
    6.11.2

  • NPM Version:
    5.4.1

  • JSPM OR Webpack AND Version
    webpack 2.1.0-beta.22

  • Browser:
    all

  • Language:
    TypeScript 2.5.2

Current behavior:
When the application starts I get the error on the subject, see aurelia_error.zip

Expected/desired behavior:
The application is working properly using version 1.2.1

replaceNode fails in IE11

I'm submitting a bug report

  • Library Version:
    1.1.0

  • Operating System:
    Windows 8.1

  • Node Version:
    6.5.0

  • NPM Version:
    3.10.3

  • JSPM
    JSPM 0.16.29

  • Browser:
    IE 11

  • Language:
    TypeScript 2.0.3

Current behavior:
When loading a template with a <slot> tag, loading fails with this error:

Potentially unhandled rejection [7] TypeError: Unable to get property 'replaceChild' of undefined or null reference
   at replaceNode (eval code:3881:9)
   at makeShadowSlot (eval code:9008:5)
   at _compileElement (eval code:9213:11)
   at _compileNode (eval code:9069:11)
   at _compileNode (eval code:9090:13)
   at compile (eval code:9046:7)
   at Anonymous function (eval code:9589:11)
   at $ (https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.24/system-polyfills.js:4:8727)
   at H (https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.24/system-polyfills.js:4:8314)
   at R.prototype.when (https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.24/system-polyfills.js:4:12046)

Some debugging reveals that for this error replaceNode is called with <au-shadow-slot></au-shadow-slot> for newNode, <slot></slot> for node, null for node.parentNode and shadowPoly, and undefined for parentNode.

Expected/desired behavior:
Template should load normally, as it does in all other major browsers.

Attempting to change access mechanism error on iOS

I'm submitting a bug report

  • Library Version:
    1.2.0

Please tell us about your environment:

  • Operating System:
    iOS 8, iPad Air 2

  • Browser:
    Safari and Chrome

  • Language:
    TypeScript 2.1.1

Current behavior:
I'm getting an error since the new update to 1.2.0 (#18) on iOS:
vendor-bundle.js:formatted:10095TypeError: Attempting to change access mechanism for an unconfigurable property.

I get this error on Function.prototype in the following code sample:

    if ("undefined" == typeof FEATURE_NO_IE) {
        (function() {}
        ).name || Object.defineProperty(Function.prototype, "name", {
            get: function() {
                var e = this.toString().match(/^\s*function\s*(\S*)\s*\(/)[1];
                return Object.defineProperty(this, "name", {
                    value: e
                }),
                e
            }
        })
    }

To reproduce you can create a new project ussing the aurelia-cli. It will include version 1.2.0 and this issue.

Expected/desired behavior:

  • What is the expected behavior?
    When switching back to the previous version (1.1.0) it is still working. Could you guys have a look at it and fix the issue?

Error when calling Function.prototype.name in third party code

I'm submitting a bug report

  • Library Version:
    1.2.1

Please tell us about your environment:

  • Operating System:
    Windows 10

  • Node Version:
    7.10.0

  • NPM Version:
    4.2.0
  • JSPM OR Webpack AND Version
    JSPM 0.17.0-beta.41
  • Browser:
    IE 11

  • Language:
    ESNext

Current behavior:
I'm using a third party library called Three.js and they use Function.prototype.name to check if a polyfill is required:

if ( Function.prototype.name === undefined ) {
    // Missing in IE
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name
    Object.defineProperty( Function.prototype, 'name', {
        get: function () {
            return this.toString().match( /^\s*function\s*([^\(\s]*)/ )[ 1 ];
        }
    } );
}

The problem here is that just by calling Function.prototype.name we get an Error: Cannot redefine non-configurable property 'name' caused by the Aurelia pal-browser.

This error is throw in the redefinition of the name property in the code bellow:

https://github.com/aurelia/pal-browser/blob/1.2.1/dist/aurelia-pal-browser.js#L30

Expected/desired behavior:

  • What is the expected behavior?

Not throw an error when calling Function.prototype.name in IE11. (I tested in the latest releases of Edge, Chrome and Firefox and they all work, IE11 is the problem here)

  • What is the motivation / use case for changing the behavior?

Including third party libraries that can call Function.prototype.name.

Exception running Karma tests on Windows 10

I'm submitting a bug report

  • Library Version:
    [email protected]

  • Operating System:
    Windows 10

  • Node Version:
    6.9.1

  • NPM Version:
    3.10.8

  • JSPM OR Webpack AND Version
    webpack 2.1.0-beta.27

  • Browser:
    Chrome 54.0.2840

  • Language:
    TypeScript 2.0.10

Current behavior:
aurelia-pal-browser exception when running karma on Windows 10. Do not get this exception on MacOS

Expected/desired behavior:
Karma tests should run without exception.

image

_PLATFORM.performance === undefined

I'm submitting a bug report

  • Library Version:
    1.0.0-rc.1.0.1

Please tell us about your environment:

  • Operating System:
    OSX 10.x
  • Node Version:
    6.2.2
  • NPM Version:
    3.9.5
  • JSPM OR Webpack AND Version
    Requirejs 2.2.0
  • Browser:
    iOS 8.4 Safari
  • Language:
    all

Current behavior:

The ensure performance polyfill doesn't assign _PLATFORM.performance in safari iOS 8.4. This makes aurelia binding throw at:

https://github.com/aurelia/binding/blob/d7ef3340d0465b7f9b504c6f3dc94bd393c4b18a/src/connect-queue.js#L26

...
    // this ensures we don't call performance.now a lot and prevents starving the connect queue.
    if (i % 100 === 0 && PLATFORM.performance.now() - animationFrameStart > frameBudget) {
      break;
    }
  }
...

Expected/desired behavior:

Ensure performance polyfill should assign _PLATFORM.performance.

import {_PLATFORM} from './platform';

export function _ensurePerformance(): void {
  // performance polyfill. Copied from https://gist.github.com/paulirish/5438650

  // https://gist.github.com/paulirish/5438650
  // @license http://opensource.org/licenses/MIT
  // copyright Paul Irish 2015

  if ('performance' in window === false) {
    window.performance = {};
  }

  Date.now = (Date.now || function() {  // thanks IE8
    return new Date().getTime();
  });

  if ('now' in window.performance === false) {
    let nowOffset = Date.now();

    if (performance.timing && performance.timing.navigationStart) {
      nowOffset = performance.timing.navigationStart;
    }

    window.performance.now = function now() {
      return Date.now() - nowOffset;
    };
  }
  _PLATFORM.performance = window.performance;
}
  • What is the motivation / use case for changing the behavior?

Fix for safario ios 8.4 and other browsers which don't natively implement window.performance.

Move polyfills to another package

I'm submitting a feature request

  • Library Version:
    1.2.1

Current behavior:
aurelia-pal-browser contains polyfills that can't be removed.

Expected/desired behavior:

  • What is the expected behavior?
    aurelia-pal-browser depends on another package that contain the polyfills, similar to how aurelia-polyfills is handled.

  • What is the motivation / use case for changing the behavior?
    The use case is being able to remove or replace the polyfills.

ReferenceError: window is not defined

Message:
    window is not defined
Stack:
ReferenceError: window is not defined
    at Object.<anonymous> (/Volumes/Projects/Mental Arena/Javascript/testing-issues/node_modules/aurelia-pal-browser/dist/commonjs/aurelia-pal-browser.js:21:13)
    at Module._compile (module.js:573:32)
    at Object.Module._extensions..js (module.js:582:10)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.require (module.js:500:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Volumes/Projects/Mental Arena/Javascript/testing-issues/node_modules/aurelia-bootstrapper/dist/commonjs/aurelia-bootstrapper.js:12:26)
    at Module._compile (module.js:573:32)
    at Object.Module._extensions..js (module.js:582:10)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.require (module.js:500:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Volumes/Projects/Mental Arena/Javascript/testing-issues/app/test/components/my-component/my-component-tests.js:9:28)
    at Module._compile (module.js:573:32)
    at Object.Module._extensions..js (module.js:582:10)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)

In repository I have a test component that I want to test.
Repository:
https://github.com/caperavensoftware/testing-issues

Component
https://github.com/caperavensoftware/testing-issues/tree/master/src/components/my-component

Tests
https://github.com/caperavensoftware/testing-issues/blob/master/test/components/my-component/my-component-tests.js

var _PLATFORM = exports._PLATFORM = {
  location: **window.location,**
  history: **window.history,**
  addEventListener: function addEventListener(eventName, callback, capture) {
    this.global.addEventListener(eventName, callback, capture);
  },
  removeEventListener: function removeEventListener(eventName, callback, capture) {
    this.global.removeEventListener(eventName, callback, capture);
  },

  performance: window.performance,
  requestAnimationFrame: function requestAnimationFrame(callback) {
    return this.global.requestAnimationFrame(callback);
  }
};

when testing, using mocha there is no window object

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.