Git Product home page Git Product logo

bootstrapper's Introduction

Aurelia

License: MIT npm Version ci Discourse status Twitter Discord Chat

aurelia-bootstrapper

This library is part of the Aurelia platform and contains the bootstrapper which sets up the default configuration for the aurelia framework and gets you up and running quick and easy.

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 look around our Discourse forums, chat in our community on Discord or use stack overflow. Documentation can be found in our developer hub.

Platform Support

This library can be used in the browser only.

Building The Code

To build the code, follow these steps.

  1. Ensure that NodeJS is installed. This provides the platform on which the build tooling runs.
  2. From the project folder, execute the following command:
npm ci
  1. To build the code, you can now run:
npm run build
  1. You will find the compiled code in the dist folder, available in three module formats: AMD, CommonJS and ES6.

Running The Tests

To run the unit tests, first ensure that you have followed the steps above in order to install all dependencies and successfully build the library. Once you have done that, proceed with these additional steps:

  1. You can now run the tests with this command:
npm run test

bootstrapper's People

Contributors

3cp avatar alxandr avatar bigopon avatar davismj avatar doktordirk avatar eisenbergeffect avatar fkleuver avatar fragsalat avatar gheoan avatar jdanyow avatar jods4 avatar joshlrogers avatar kristianmandrup avatar niieani avatar patroza avatar petermorlion avatar plwalters avatar pnizer avatar strahilkazlachev avatar timfish avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  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  avatar  avatar  avatar  avatar  avatar

bootstrapper's Issues

Loading without System does not work

#9 was fixed quickly but not tested because the fix is not sufficient.

The problem is now that aurelia-metadata gets loaded first and it creates a very rudimentary System polyfill: basically just forEachModule.

When aurelia-bootstrapper loads, it sees window.System and tries to use it, which fails miserably.

The check that doesn't work:
https://github.com/aurelia/bootstrapper/blob/master/src/index.js#L54

Why it fails:
https://github.com/aurelia/metadata/blob/master/src/metadata.js#L20

'aurelia-templating' not found error.

Hi,
I am getting the error for aurelia-templating as
Error:Unhandled promise rejection
Error: Access to restricted URI denied Error loading file:///C:/Users/aruna.selvaraj/Desktop/aurelia-ej-bridge/src/aurelia-templating.js

It searches in current folder for aurelia-templating rather then getting it from github

my config file consist of the following
paths: {
"": "src/",
"github:": "jspm_packages/github/",
"npm:": "jspm_packages/npm/"
},
and in
map:{...
"aurelia-templating": "npm:[email protected]"}

Bootstrapper v2 attempts to use pal-nodejs while running on nwjs

I've just updated to bootstrapper to v2.0.0. My code runs in nwjs which is Chromium augmented with nodejs functionality. Now the application fails to run as the bootstrapper is trying to load aurelia-pal-nodejs rather than the standard browser pal

How is the pal detection working? nwjs exposes much of the node functionality so I'm guessing it thinks its running on node!

chrome-extension://dnfbalibhjknhcnpfialacgapijfkkil/dist/aurelia-pal-nodejs.js net::ERR_FILE_NOT_FOUND

Add support for data-* attribute

Per my understanding of the HTML5 recommendation we should be relying on data-* attributes for custom element attributes. Currently the bootstrapper only supports aurelia-app and not data-aurelia-app.

I don't mind submitting a pull request for it but I wanted to make sure there wasn't a reason it isn't already supported before doing so.

body replaced after 'Aurelia started'

and more importantly, after eg app.js constructor

previously eg

export class App {
  constructor(){
    document.body.appendChild(document.createElement('div'));
  }
...

would add a div to the body before eg nav-bar and div page-host.
after updating from 1.1.2 to 1.1.4 the body gets cleared after the app constructor even though it runs after the 'Aurelia started' log output.

i dont know if that is from the bootstrapper or another package that gets upgraded with jspm install [email protected]

apache cordova bootstrapping

Hi
First ot all, I'm not sure this is the right place for this question.

I'd like to know how can I bootstrap an aurelia app in an apache cordova application. I've tried to add the scripts for jspm_packages/system.js and config.js in index.html and at deviceready event call System.import('aurelia-bootstrapper'); but no success, apache cordova splash with "Device is ready" text keeps on the screen and it doesn't seem aurelia app is starterd

TodoMVC implementation

You should add an implementation using Aurelia to http://todomvc.com/
(My apologies if this is not the appropriate repository for this issue, but I wasn't quite sure where it would go)

Bootstrapper appears not to return promise

I've just spun up this repo to get tests working with karma and jasmine.
However the await component.create(bootstrap) never returns, jasmine times out and the test fails.

I've done some debugging through the source code, and from what I can see it appears to be bootstrapper not completing a promise. When I say 'appears', I did get lost in all those promises, My c# brain much prefers async/await.
I've crossed compared to the skeleton, and cannot see any config's that I missing.
I'm 10 hours in and going crazy...what am I missing ?

Default configuration's conditional for localhost is not working

There are some issues with this conditional.
Note that the conditional is inside a function that is called only if aurelia-app has no value (ex: beginner kits).

  • the condition is always true because location.protocol includes the final ":" (http: or https:)
  • location.protocol isn't good for checking if running locally (ex: localhost) because for both Firefox and Chrome location.protocol === 'http:' // true on localhost

I suggest one of the following:

  • remove the conditional (keep the developmentLogging() call)
  • use location.port instead of location.protocol.

Will submit a PR with the change.
@EisenbergEffect

Cannot install 0.19.0

I try to install via jspm install aurelia-bootstrapper and by downloading and running jspm install, both ends with:

err  Error: EPERM: operation not permitted, rename 'C:\Users\tomalec\AppData\Local\.jspm\packages\github\aurelia\[email protected]\dist\amd' -> 'C:\Users\tomalec\AppData\Local\.jspm\packages\github\aurelia\[email protected]'
         at Error (native)

Using main.js without passing in a root should default to aurelia-app not body

Currently if you specify the main value for aurelia-app like this -

<div aurelia-app="main"></div>
without specifying a target in the setRoot in main.js like this -
aurelia.start().then(a => a.setRoot());

The bootstrapper bootstraps the app on the body instead of the div where aurelia-app was specified. It should default back to the DOM element with the aurelia-app attribute instead of the body.

Can't use es2015 or native-modules with webpack

Webpack throws an error when it sees a free variable module used in an ES module (i.e. in the same file as import or export).

module is found on lines 73 and 77 for NodeJS detection
https://github.com/aurelia/bootstrapper/blob/master/src/index.js#L73-L77

The consequence is that neither es2015 nor native-modules are usable with Webpack currently.
This is important because es modules is a prerequisite for tree shaking.

Not sure yet what the best fix is.

error in 0.18.0

After upgrading aurelia-bootstrapper to 0.18.0, I am getting this error: Unhandled promise rejection TypeError: this.metadata.initialize is not a function. Any idea? I upgraded all other plugins for Oct 13th release (except aurelia-http-client since this is also throwing a different error Unhandled promise rejection TypeError: _this.XHRType is not a function)

aurelia-pal-browser tryng loading in wwwroot folder with ASP.NET

I'm submitting a bug report
In my application trying to run, in the browser console it returns a 404 error for the aurelia-pal-browser files being loaded from the root folder of the localhost application: 1354 / aurelia-pal-browser. Js.
Placing the file in question in the root folder of the application it works perfectly, try to install from jspm from the command line, the same error occurs, the first attempt was made to install from a VS extension in which I use To install dependencies using any dependency manager, but even then the same problem still occurs.

Please tell us about your environment:

  • Operating System:
    Windows [10]

  • Node Version:
    6.9.2

  • NPM Version:
    3.10.9

  • JSPM Version
    JSPM 0.16.48

  • Browser:
    all | Chrome XX | Firefox XX | Edge XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView

Unable to run e2e tests in phantomjs after the latest update

I originally encountered this issue in my own application after running a jspm update, however, I have also recreated this issue in the skeleton navigation application.

When I attempt to run the e2e tests in phantomjs, the aurelia application no longer loads. If I take a screenshot, I see just the loading screen and it never completes.

I see the following in the phantomjs logs:

{ level: { name: 'WARNING', value: 900 },
    message: 'Potentially unhandled rejection [1] eachChar@http://localhost:9000/:97:145\naddSegment@http://localhost:9000/:492:21\nadd@http://localhost:9000/:235:34\naddRoute@http://localhost:9000/:893:39\nhttp://localhost:9000/:567:26\nexportToRouter@http://localhost:9000/:582:24\nhttp://localhost:9000/:816:30\nM@http://localhost:9000/jspm_packages/system-polyfills.js:4:16006\nH@http://localhost:9000/jspm_packages/system-polyfills.js:4:15635\nwhen@http://localhost:9000/jspm_packages/system-polyfills.js:4:19309\nrun@http://localhost:9000/jspm_packages/system-polyfills.js:4:20421\n_drain@http://localhost:9000/jspm_packages/system-polyfills.js:4:7105\ndrain@http://localhost:9000/jspm_packages/system-polyfills.js:4:4237\n  (anonymous function) (http://localhost:9000/jspm_packages/system-polyfills.js:4)'

If I downgrade aurelia-bootstrapper to the prior version my main application was using ([email protected]) the tests run without issue.

I suspect phantom needs more polyfills than other browsers, but I haven't been able to determine which ones I'm missing. In my main application, the output is slightly different, it dumps thousands of \nCollection statements.

protractor.conf.js.txt
package.json.txt
config.js.txt

Require like loader not possible

What:
Removing the version check in this line to be able to use alameda instead of requriejs

Why:
I would like to use requirejs like module loader as they seem to improve my application performance. The creators of RequireJS created alameda.js and almond.js which is using implemented like requirejs. When bundling all files and not using any asynchronous plugins almond could be used to improve the performance. I would like to use alameda as I have asynchronous loader plugins but I'm targeting only modern browsers. The problem is that both loaders doesn't have the version property.

As I don't know why exactly you added the check for an existing version I would ask you if this even does make sense?
I also could create a custom loader to support it but wanted to ask here first.
PS: Sry for removing the template but it's not a bug and only maybe a feature request.

Severe semver issues!

There is a severe issue with the versioning scheme.

Apparently bower considers 1.0.0 a patch upgrade of ~1.0.0-rc.1.0.1.

Result: we got the upgrade unwillingly and it contained a regression for us (specifically my comment in aurelia/router#366).

But it gets much worse!
We tried to fix it by requesting the specific version "aurelia-bootstrapper": "1.0.0-rc.1.0.1" but it won't work either!
Bootstrapper requests its dependencies with "aurelia-***": "^1.0.0-rc.1.0.1", which means that although we get the RC version of bootstrapper, we still get the 1.0 release of aurelia-router.
So short of specifying all packages resolutions ourselves in bower.json, we're stuck in a situation where we cannot get a working release.

I believe the proper fix is that internal Aurelia packages should depend on specific versions, no ^ or ~. And when a package is patched, you should publish new releases all along the dependency chain up to the top aurelia-bootstrapper package.

Aside: this might be an example where using the bundled Aurelia core is not only simpler, but less fragile. Do you think you should publish the bundled package on Bower & co in addition to CDNs?

something fails when using webpack and aurelia

I am trying to use webpack and aurelia but I get this error

WARNING in ./~/aurelia-bootstrapper/dist/commonjs/aurelia-bootstrapper.js
Critical dependencies:
66:13-20 require function is used in a way in which dependencies cannot be statically extracted
 @ ./~/aurelia-bootstrapper/dist/commonjs/aurelia-bootstrapper.js 66:13-20

WARNING in ./~/aurelia-bootstrapper/dist/commonjs/aurelia-bootstrapper.d.ts
Module parse failed: /Users/Denis/projects/ticketchat/web_app/htmlproto/widget_aurelia/node_modules/aurelia-bootstrapper/dist/commonjs/aurelia-bootstrapper.d.ts Line 1: Unexpected identifier
You may need an appropriate loader to handle this file type.
| declare module 'aurelia-bootstrapper' {
|   import 'core-js';
|   import { PLATFORM }  from 'aurelia-pal';
 @ ./~/aurelia-bootstrapper/dist/commonjs ^\.\/.*$

WARNING in ./~/aurelia-loader-default/dist/commonjs/aurelia-loader-default.js
Critical dependencies:
122:6-13 require function is used in a way in which dependencies cannot be statically extracted
135:6-13 require function is used in a way in which dependencies cannot be statically extracted
 @ ./~/aurelia-loader-default/dist/commonjs/aurelia-loader-default.js 122:6-13 135:6-13

WARNING in ./~/aurelia-loader-default/dist/commonjs/aurelia-loader-default.d.ts
Module parse failed: /Users/Denis/projects/ticketchat/web_app/htmlproto/widget_aurelia/node_modules/aurelia-loader-default/dist/commonjs/aurelia-loader-default.d.ts Line 1: Unexpected identifier
You may need an appropriate loader to handle this file type.
| declare module 'aurelia-loader-default' {
|   import { TemplateRegistryEntry, Loader }  from 'aurelia-loader';
|   import { DOM, PLATFORM }  from 'aurelia-pal';
 @ ./~/aurelia-loader-default/dist/commonjs ^\.\/.*$

here is my webpack config file

var path = require('path');
var webpack = require('webpack');
var AureliaWebpackPlugin = require('aurelia-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    './src/main.js'
  ],
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: {stage: 0} },
      { test: /\.css?$/, loader: 'style!css' },
      { test: /\.html$/, loader: 'raw' }
    ]
  }.
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',
    publicPath: ''
  },
  plugins: [
    new AureliaWebpackPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './index.html',
      inject: true
    })
  ]
};

src/main.js

import 'aurelia-bootstrapper';
import 'aurelia-loader-webpack';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  aurelia.start().then(() => aurelia.setRoot());
}

Some of this was inspired by this repo https://github.com/martijnboland/aurelia-skeleton-webpack

Is there an official webpack skeleton for aurelia? thanks

requirejs broken by corejs upgrade

This line of code inside createLoader() is now an issue for us, since the last corejs update (2.0.2):

if (window.System) {

The whole story is a bit complicated and I'm not 100% sure what the fix should be...

We use requirejs as our AMD loader. This means that we shouldn't have window.System defined.

What triggered the issue is that corejs now contains a polyfill for System.global.
But by creating the System object, it fooled Aurelia into thinking that I have a System loader, which I don't. So the code crashes on the next line with System.normalizeSync is undefined.

Now, you might think "well, let's be more specific and test if (System && System.normalizeSync)". I think this would fix the short-term crash but I'm not sure if it's a long-term solution.

Consider this: in the future, what will happen when users finally upgrade to a modern browser that includes a built-in System loader?

Answer: Aurelia will think that I'm using the System loader... and nothing will work because I deploy optimized requirejs bundles.

I think it would be best if either:

  • Aurelia tests for the presence of requirejs first: if (window.require) else if (window.System). Since there is no reason requirejs would be loaded unless I'm intending to use it; or
  • Aurelia takes some explicit config at startup that says which loader I am using, no guessing game.

โ— This is a critical issue: without dirty work-arounds using Aurelia + latest corejs + requirejs simply does not work.

A fresh `jspm install` of `aurelia/bootstrapper` results in a browser error in firefox and safari when the app is run

A fresh jspm install of aurelia/bootstrapper results in a browser error in firefox and safari when the app is run. The error is as follows:

Unhandled promise rejection Error loading "github:webcomponents/[email protected]/HTMLImports.min" at http://localhost:9000/jspm_packages/github/webcomponents/[email protected]/HTMLImports.min.js
Not Found: http://localhost:9000/jspm_packages/github/webcomponents/[email protected]/HTMLImports.min.js

This is because line 93 of aurelia/[email protected]/index.js (https://github.com/aurelia/bootstrapper/blob/master/src/index.js#L93) is making a reference to the webcomponentsjs/HTMLImports.min, which is part of [email protected]. However, [email protected] is what currently ends up being installed for aurelia/[email protected] by default and [email protected] does not contain a HTMLImports.min.js file, so it fails. Currently, the work around is to manually change the mapping in config.js so that it points to [email protected] instead of [email protected] (which is not ideal). The error is not seen in the skeleton navigation app because it is already set to [email protected] in the config.js file when the skeleton app is installed with yoeman. If you remove the mappings from the config.js file, however, and then run jspm install again so that the mappings are rebuilt, then it is rebuilt with [email protected] set as the dependency for aurelia/[email protected], though aurelia/[email protected] has a hard dependency on [email protected]. So I think either aurelai/bootstrapper has to be updated to work with [email protected] or the dependency declared to be webcomponentsjs": "github:webcomponents/[email protected] instead of ^0.6.1 in the package.json of aurelia/loader (https://github.com/aurelia/loader/blob/master/package.json#L31).

isNodeLike returns incorrectly in browser

I'm submitting a bug report

  • Library Version:
    2.3.3

Please tell us about your environment:

  • Operating System:
    Windows 10

  • Node Version:
    10.15.3

  • NPM Version:
    6.9.0

  • JSPM OR Webpack AND Version
    webpack 4.30.0

  • Browser:
    Chrome 73.0.3683.103 | Firefox 66.0.3 | Edge 44.17763.1.0
    Effectively everything I have on hand

  • Language:
    all

Current behavior:
Throws error as below on load
Unhandled rejection TypeError: Unable to get property 'node-webkit' of undefined or null reference
This is triggered by the boolean isNodeLike being incorrectly set to true even though the code is being executed in the browser.

Inspecting the code in browser results in a bizarre situation where the console returns a different result from the dev tools as per this screenshot.
Aurelia Bootstrapper 2019-05-03 142105

This is the same section of code that caused issues in #53

Expected/desired behavior:

  • What is the expected behavior?
    Variable isNodeLike should return false for browsers which can be achieved which testing for the explicit process properties being subsequently used i.e.
const isNodeLike = typeof process !== 'undefined' && typeof process.type !== 'undefined' && typeof process.versions !== 'undefined';
  • What is the motivation / use case for changing the behavior?
    Code fails to execute

jspm beta support

When doing the System.import for a package, the new defaultJSExtensions will provide a .js extension at the end of the package name causing Aurelia not to work in jspm beta.

To make this easier I've added the ability to run System.normalize('package/name/') where the trailing / then does not automatically add the js extension. This can be tested by running jspm beta with jspm dl-loader --edge. Then the dynamic imports can be updated to do the above normalization style where necessary.

I'm hoping to make the beta the primary release soon, but will wait until this is fixed. If there's any other issues I can help with just let me know.

configure is called with undefined

when i try to do the most simple aurelia setup i can manage:

jspm init
jspm install aurelia-bootstrapper

then add index.html, with a body like this:

<body aurelia-app>
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>

i also have app.js with copy-pasta from the docs:

import {LogManager} from 'aurelia-framework';
import {ConsoleAppender} from 'aurelia-logging-console';

LogManager.addAppender(new ConsoleAppender());
LogManager.setLevel(LogManager.logLevel.debug);

export function configure(aurelia) {
  // the variable 'aurelia' is undefined here
  aurelia.use
    .defaultBindingLanguage()
    .defaultResources()
    .history()
    .router()
    .eventAggregator()
  aurelia.start().then(a => a.setRoot('app', document.body));
}

the app.html is just a pair of template tags

however, the thing crashes with TypeError: Cannot read property 'use' of undefined, which is annotated above. for some reason the configure function in app.js is being called with undefined ... !?

Changes break focus.bind

Hi

Some change in aurelia-bootstrapper between version 1.0.0-beta.1.1.1 and 1.0.0-beta.1.1.4 have caused "focus.bind" to stop working.

I have a "focus.bind" on my form field to give focus to a field when the page loads. On version 1.0.0-beta.1.1.1 it worked perfectly. On version 1.0.0-beta.1.1.4 it does not. On 1.1.4, the event appears to fire before the page is displayed - causing the field to not get the focus.

I have reverted aurelia-bootstrapper back to 1.0.0-beta.1.1.1 (from 1.1.4) and it stated working again.

Electron no longer functions due to Issue #26 being fixed.

The fix done in #26 has stopped Electron from launching any applications.

By reversing window.system and window.require checks in function createLoader(), Electron will start functioning again.

See the erroneous code here:

if (window.require) {
return new Promise(function (resolve, reject) {
return require(['aurelia-loader-default'], function (m) {
return resolve(new m.DefaultLoader());
}, reject);
});
} else if (window.System) {
return System.normalize('aurelia-bootstrapper').then(function (bootstrapperName) {
return System.normalize('aurelia-loader-default', bootstrapperName);
}).then(function (loaderName) {
return System['import'](loaderName).then(function (m) {
return new m.DefaultLoader();
});
});
}

Logic for loading the Polyfill is broken.

Noticeable in Safari 7. The error I am seeing is

Message: "Error loading "github:aurelia/bootstrapper@0.9.5" at http://10.0.1.17:9000/jspm_packages/github/aurelia/[email protected]
    Can't find variable: Map"
sourceURL: "http://10.0.1.17:9000/"
stack: "execute@http://10.0.1.17:9000/:22:30
ensureEvaluated@http://10.0.1.17:9000/jspm_packages/system.src.js:714:30
ensureEvaluated@http://10.0.1.17:9000/jspm_packages/system.src.js:706:26
ensureEvaluated@http://10.0.1.17:9000/jspm_packages/system.src.js:706:26
ensureEvaluated@http://10.0.1.17:9000/jspm_packages/system.src.js:706:26
ensureEvaluated@http://10.0.1.17:9000/jspm_packages/system.src.js:706:26
ensureEvaluated@http://10.0.1.17:9000/jspm_packages/system.src.js:706:26
ensureEvaluated@http://10.0.1.17:9000/jspm_packages/system.src.js:706:26
execute@http://10.0.1.17:9000/jspm_packages/system.src.js:844:26
doDynamicExecute@http://10.0.1.17:9000/jspm_packages/es6-module-loader.src.js:1929:32
link@http://10.0.1.17:9000/jspm_packages/es6-module-loader.src.js:1977:40
doLink@http://10.0.1.17:9000/jspm_packages/es6-module-loader.src.js:1751:11
updateLinkSetOnLoad@http://10.0.1.17:9000/jspm_packages/es6-module-loader.src.js:1799:24
http://10.0.1.17:9000/jspm_packages/es6-module-loader.src.js:1619:28
tryCatchReject@http://10.0.1.17:9000/jspm_packages/es6-module-loader.src.js:1183:34
runContinuation1@http://10.0.1.17:9000/jspm_packages/es6-module-loader.src.js:1142:18
when@http://10.0.1.17:9000/jspm_packages/es6-module-loader.src.js:930:20
run@http://10.0.1.17:9000/jspm_packages/es6-module-loader.src.js:821:17
_drain@http://10.0.1.17:9000/jspm_packages/es6-module-loader.src.js:97:22
drain@http://10.0.1.17:9000/jspm_packages/es6-module-loader.src.js:62:15"
__proto__: Error
__proto__: Rejected

To fix the error, I changed

System.import('aurelia-bootstrapper');

to

System.import('core-js').then(function() { return System.import('aurelia-bootstrapper'); })['catch'](function (err) { (console.error || console.log)(err); });

Bootstrapper doesn't work with Electron Forge

I'm submitting a bug report

  • Library Version:
    2.4.0

  • Operating System:
    Windows 11

  • Node Version:
    18.13.0

  • NPM Version:
    8.9.13
  • Webpack Version
    webpack 5.75.0

  • Browser:
    Electron 22.0.3

  • Language:
    TypeScript 4.5.5

Current behavior:
Bootstrapper tries to resolve aurelia-loader-webpack module from <projectRoot>\.webpack\renderer\native_modules but fails.

Expected/desired behavior:
Bootstrapper should properly bootstrap Aurelia app after it's imported in renderer script.

Steps to reproduce

  1. Create a new Electron app using Webpack+Typescript Electron Forge template:
npm init electron-app@latest aurelia-app -- --template=webpack-typescript
  1. Install aurelia bootstrapper package:
npm install aurelia-bootstrapper
  1. Import the installed package in src/renderer.ts:
import 'aurelia-bootstrapper'
  1. Run the application:
npm run start

[email protected] is installing [email protected]

Not sure when this is changed, looks like in the last 2 days itself. When we try to jspm install a fresh copy of [email protected], it installs the dependency [email protected] instead of [email protected] that it used to. Somehow this breaks the app with error Cannot read property 'Symbol(toStringTag)'. Manually changing the version in config.js and re-installing fixed the issue. Please verify on your end, I am not 100% sure if this is the issue here.

Hard dependency on aurelia-polyfills

Removing the hard dependency on core-js was undoubtedly a good thing, but now we are forced to include aurelia-polyfills in our bundle.

For those of us who have a well-established code base, sprinkled with lots of async - await functions, changing them is both time-consuming and non-trivial.

Now that we are down to tuning the deployment to squeeze every last drop of performance, I have discovered that even though we don't use aurelia-polyfills directly, we are forced to include the library in the bundle (the bootstrapper errors as below when it is excluded). While this only increases the bundle size by 12KB, that's 12KB of dead weight.

aurelia-polyfills

Loading aurelia-loader-default without System

The codebase from Aurelia makes extensive use of System api. At the same time, it's supposed to work without it, e.g. in a requirejs runtime. To that effect, aurelia-loader-default installs a very thin polyfill for System when it's missing (basically delegating to require).

The problem is that aurelia-bootstrapper loads aurelia-loader-default dynamically, with a call to System.import, which is of course impossible at that point.

It's a kind of chicken-and-egg problem. I don't know what was the thinking behind dynamically loading aurelia-loader-default. It seems to me the easiest fix is to import it statically.

I worked around this problem by making sure that aurelia-loader-default is loaded before aurelia-bootstrapper is, but that feels wrong. It feels like a magic incantation whereas it should be a basic dependency of the bootstrapper.

Add d.ts generation

It would be great if the bootstrapper repository could export its own d.ts file by using the babel-dts-generator plugin.

Pushstate with deep links

I recently ran into the problem described here, and the solution outlined there indeed solved the problem: http://ilikekillnerds.com/2015/03/getting-aurelia-to-work-with-html5-pushstate/

However, I think Aurelia should handle this problem out of the box.

Repro:

  1. Download and compile the skeleton app
  2. Enable pushstate on the router.
  3. Add a new route "a/b/c" to the router, e.g. by duplicating the 'welcome' route.
  4. Start the app and navigate to the new route. The browser url will be something like http://localhost:9000/a/b/c
  5. Now reload the page by pressing F5.

Aurelia will crash because it tries to load the scripts from the wrong path.
As outlined in the article linked above, the paths in the config.js need to be prefixed with a slash. Additionally, the script and css references in the index.html need to be prefixed as well.

Bootstrap CSS loads last and overrides custom styles

I'm submitting a bug report

Please tell us about your environment:

  • Operating System:
    RHEL
  • Node Version:
    v4.2.5
  • NPM Version:
    3.5.1
  • JSPM OR Webpack AND Version
    JSPM 0.16.34
  • Browser:
    all
  • Language:
    ESNext

Current behavior:
Bootstrap overrides custom styles (see aurelia/skeleton-navigation#659)

Expected/desired behavior:
Resources are loaded in the order they are required.

This is a duplicate of aurelia/skeleton-navigation#659, however, through some trial and error I believe changes in this module are the cause, and the issue occurred between [email protected] and [email protected].

ReferenceError: use before declaration in Edge

The ES2015 distribution of aurelia-bootstrapper triggers an error in Edge: "ReferenceError: use before declaration". And then the application doesn't start.

I did test before and never noticed that, so I wonder if it is an Edge regression in a recent update.
I have Edge 14.14393, I would be interested in other people testing this.

The offending code is line 126:

.then(({ Aurelia }) => startResolve(() => new Aurelia(loader)));

And Aurelia is the variable that Edge complains about.
The code above looks fine to me (given that then is called with an object that contains an Aurelia property).
It runs fine in Firefox and according to Kangax tables it should be supported in Edge as well.

Just changing the code as follows work.

.then(({ Aurelia }) => { 
  return startResolve(() => new Aurelia(loader));
});

So I'd say this is more of an Edge bug, but since it impacts us it's good to know.

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.