Git Product home page Git Product logo

bootstrapper-webpack'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.

bootstrapper-webpack's People

Contributors

doktordirk avatar eisenbergeffect avatar martijnboland avatar niieani avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

bootstrapper-webpack's Issues

Can't require resource

Hi,
can't get webpack to work, and it did work before (unfortunately, can't get back to working project as I formatted the drive and cloned the previously working project from github).
All dependencies are latest builds (ran npm update).

In console:

Unhandled rejection TypeError: _aureliaPal.DOM.injectStyles is not a function
    at injectAureliaHideStyleAtHead (http://localhost:4000/js/app.js:47243:20)
    at Object.configure (http://localhost:4000/js/app.js:33965:55)
    at http://localhost:4000/js/app.js:8717:35
    at tryCatcher (http://localhost:4000/js/app.js:5298:24)
    at Promise._settlePromiseFromHandler (http://localhost:4000/js/app.js:3323:32)
    at Promise._settlePromise (http://localhost:4000/js/app.js:3380:19)
    at Promise._settlePromise0 (http://localhost:4000/js/app.js:3425:11)
    at Promise._settlePromises (http://localhost:4000/js/app.js:3504:19)
    at Async._drainQueue (http://localhost:4000/js/app.js:371:17)
    at Async._drainQueues (http://localhost:4000/js/app.js:381:11)
    at Async.drainQueues (http://localhost:4000/js/app.js:250:15)
    at MutationObserver.<anonymous> (http://localhost:4000/js/app.js:4560:18)

When running webpack:

<aurelia-bootstrapper-webpack> [package.json] required "./aurelia-framework" from "aurelia-framework".
<aurelia-bootstrapper-webpack> [package.json] required "./aurelia-logging-console" from "aurelia-logging-console".
<aurelia-bootstrapper-webpack> [package.json] required "./aurelia-templating-binding" from "aurelia-templating-binding".
<aurelia-bootstrapper-webpack> [package.json] required "./aurelia-templating-resources" from "aurelia-templating-resources".
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/aurelia-bootstrapper-webpack/dist/commonjs/compose", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/aurelia-bootstrapper-webpack/dist/commonjs/if", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/aurelia-bootstrapper-webpack/dist/commonjs/with", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/aurelia-bootstrapper-webpack/dist/commonjs/repeat", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/aurelia-bootstrapper-webpack/dist/commonjs/show", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/aurelia-bootstrapper-webpack/dist/commonjs/hide", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/aurelia-bootstrapper-webpack/dist/commonjs/replaceable", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/aurelia-bootstrapper-webpack/dist/commonjs/sanitize-html", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/aurelia-bootstrapper-webpack/dist/commonjs/focus", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/aurelia-bootstrapper-webpack/dist/commonjs/binding-mode-behaviors", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/aurelia-bootstrapper-webpack/dist/commonjs/throttle-binding-behavior", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/aurelia-bootstrapper-webpack/dist/commonjs/debounce-binding-behavior", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/aurelia-bootstrapper-webpack/dist/commonjs/signal-binding-behavior", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/aurelia-bootstrapper-webpack/dist/commonjs/update-trigger-binding-behavior", which does not exist.
<aurelia-bootstrapper-webpack> [package.json] required "./aurelia-templating-router" from "aurelia-templating-router".
[<aurelia-templating-router>] wants to require "aurelia-templating-router/aurelia-bootstrapper-webpack/dist/commonjs/router-view", which does not exist.
[<aurelia-templating-router>] wants to require "aurelia-templating-router/aurelia-bootstrapper-webpack/dist/commonjs/route-href", which does not exist.
<aurelia-bootstrapper-webpack> [package.json] required "./aurelia-history-browser" from "aurelia-history-browser".
<aurelia-bootstrapper-webpack> [package.json] required "./aurelia-event-aggregator" from "aurelia-event-aggregator".

Support Aurelia Plugin syntax

JSPM supported a plugin syntax to Aurelia. It seems that webpack does not support this.

Repro:

  1. Start with the webpack typescript skeleton project.
  2. run npm install aurelia-dialog
  3. Add this to the main.ts : .plugin('aurelia-dialog') right after .developmentLogging().

Expected
Running the skeleton project will correctly add aurelia-dialog as a plugin.

Actual

Running the skeleton project gives the following error:

Cannot find module './aurelia-dialog'.

As a side note, none of these work either:

 .plugin('node_modules/aurelia-dialog/dist/commonjs/aurelia-dialog')
 .plugin('node_modules/aurelia-dialog/dist/commonjs/aurelia-dialog.js')
 .plugin('../node_modules/aurelia-dialog/dist/commonjs/aurelia-dialog')
 .plugin('../node_modules/aurelia-dialog/dist/commonjs/aurelia-dialog.js')

They all give a variation of the above error message.

Aurelia starts twice when it is embedded

I'm submitting a bug report

  • Library Version:
    1.0.0

Please tell us about your environment:

  • Operating System:
    Windows 10
  • Node Version:
    4.6.0
  • NPM Version:
    3.8.9
  • JSPM OR Webpack AND Version
    webpack 2.1.0-beta.22
  • Browser:
    all
  • Language:
    all

Current behavior:

When Aurelia is embedded in another site, Aurelia tries to initialize itself twice, and succeeds.

Expected/desired behavior:

Aurelia should only initialize itself once per page.

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

Allow embedding of Aurelia apps.

Works on regular Aurelia bootstrapper, doesn't on webpack bootstrapper.

Change path to app-bundle.js in vendor-bundle.js

I'm submitting a bug report

  • Library Version:
    Aurelia 1.0.0

Please tell us about your environment:

  • Operating System:
    Windows [10]
  • Node Version:
    4.4.7
  • NPM Version:
    3.10.6
  • Webpack
  • Language:
    ESNext

Current behavior:
I am using Webpack with CLI on ASP.NET Core project.
I am using CLI for build and run project via Visual Studio.
Everything works fine if I go to http://localhost:9000/index.html and Aurelia Hello World is loaded.

When I try to use Aurelia from ASP.NET MVC View using problems occur.
My code in ASP.NET MVC View looks like this:
`


<script src="~/scripts/vendor-bundle.js" data-main="aurelia-bootstrapper"></script>

`

I have changed path to vendor-bundle.js to point to wwwRoot folder
When I try to load view path to app-bundle.js still looking for Home/script/app-bundle.js instead of looking in wwwRoot folder.
It seams that path of app-bundle.js is hardcoded in vendor-bundle.js file.
Is there a way to configure it inside aurelia.json or somewhere to look into wwwRoot folder?

Secondary node_modules folder under aurelia-bootstrapper-webpack folder

The npm install process is currently adding an additional nested node_modules folder containing aurelia-loader-webpack under the node_modules/aurelia-bootstrapper-webpack folder.
Result;
./node_modules/aurelia-bootstrapper-webpack/node_modules/aurelia-loader-webpack/[loader files]

Bootstrapper crashes webpack build

I'm submitting a bug report

  • Library Version:
    1.1.0

Please tell us about your environment:

  • Operating System:
    OSX 10.12.3 Beta (16D17a)

  • Node Version:
    7.2.0

  • NPM Version:
    3.10.9

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

  • Browser:
    all

  • Language:
    ESNext

Current behavior:
Running a webpack build fails due to the webpack-loader parsing all node_modules instead of only the required ones

Expected/desired behavior:
Bumping the aurelia-loader-webpack version to 2.x.x

Bootstrapper should one use the requested dependencies instead of all packages inside of node_modules

  • What is the motivation / use case for changing the behavior?
    Bootstrapper is targetting/parsing files it shouldn't, in projects where the repo is not solely dedicated to the aurelia app this forms an issue.

TypeError: customConfig.configure is not a function

Hi guys,

I've come across an issue while using this bootstrapper, here's the error I'm getting in the browser console while running with npm run dev:

TypeError: customConfig.configure is not a function
    at eval (webpack:///./~/aurelia-bootstrapper-webpack/dist/commonjs/aurelia-bootstrapper-webpack.js?:60:27)

I did a bit of digging and found that on line 58-60 of aurelia-bootstrapper-webpack/dist/commonjs/aurelia-bootstrapper-webpack.js exists the following code. I did a bit of console.logging and I've added some comments indicating the values being passed into here which produce this error.

  // configModuleId === 'main'
  return loader.loadModule(configModuleId).then(function (customConfig) {
      // customConfig === {}
      return customConfig.configure(aurelia);
    });

Why this is happening, I'm not exactly sure, but my main.js looks like this:

import {bootstrap} from 'aurelia-bootstrapper-webpack';

import '../node_modules/bootstrap/dist/css/bootstrap.css';
import '../node_modules/font-awesome/css/font-awesome.css';
import '../assets/css/style.css';

bootstrap(function(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-validation')
    .plugin('aurelia-dialog')
    .plugin('aurelia-flux')
    .feature('resources');

  aurelia.start().then(() => aurelia.setRoot('app', document.body));
});

I can strip it back to the following and still reproduce the error:

import {bootstrap} from 'aurelia-bootstrapper-webpack';

import '../node_modules/bootstrap/dist/css/bootstrap.css';
import '../node_modules/font-awesome/css/font-awesome.css';
import '../assets/css/style.css';

bootstrap(function(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  aurelia.start().then(() => aurelia.setRoot('app', document.body));
});

Any ideas?

Aurelia application fails to load with latest Webpack release

We have an Aurelia app that works fine when built with [email protected], however, it will not load when built with [email protected]. Have you done any verification with the latest webpack release? We are reverting to 2.2.1 for now, but here is the error that is generated when running the latest webpack build:

TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (http://localhost.inmotionnow.com:9001/bootstrap.bundle.js?4cf3d825e555e0d099bf:57:37)
    at http://localhost.inmotionnow.com:9001/bootstrap.bundle.js?4cf3d825e555e0d099bf:885:24
From previous event:
    at Promise.then._this2.modulesBeingLoaded.(anonymous function) (http://localhost.inmotionnow.com:9001/bootstrap.bundle.js?4cf3d825e555e0d099bf:884:27)
From previous event:
    at WebpackLoader._import (http://localhost.inmotionnow.com:9001/bootstrap.bundle.js?4cf3d825e555e0d099bf:870:18)
    at WebpackLoader.loadModule (http://localhost.inmotionnow.com:9001/bootstrap.bundle.js?4cf3d825e555e0d099bf:928:17)
    at config (http://localhost.inmotionnow.com:9001/bootstrap.bundle.js?4cf3d825e555e0d099bf:17046:19)
    at handleApp (http://localhost.inmotionnow.com:9001/bootstrap.bundle.js?4cf3d825e555e0d099bf:17037:10)
    at http://localhost.inmotionnow.com:9001/bootstrap.bundle.js?4cf3d825e555e0d099bf:17065:9
From previous event:
    at http://localhost.inmotionnow.com:9001/bootstrap.bundle.js?4cf3d825e555e0d099bf:17062:44
From previous event:
    at run (http://localhost.inmotionnow.com:9001/bootstrap.bundle.js?4cf3d825e555e0d099bf:17059:24)
    at Object.<anonymous> (http://localhost.inmotionnow.com:9001/bootstrap.bundle.js?4cf3d825e555e0d099bf:17084:1)
    at Object.aurelia-bootstrapper-webpack (http://localhost.inmotionnow.com:9001/bootstrap.bundle.js?4cf3d825e555e0d099bf:17085:30)
    at __webpack_require__ (http://localhost.inmotionnow.com:9001/bootstrap.bundle.js?4cf3d825e555e0d099bf:57:38)
    at Object.1120 (http://localhost.inmotionnow.com:9001/bootstrap.bundle.js?4cf3d825e555e0d099bf:13784:1)
    at __webpack_require__ (http://localhost.inmotionnow.com:9001/bootstrap.bundle.js?4cf3d825e555e0d099bf:57:38)
    at 1023.Event.initEvent.cancelable.type (http://localhost.inmotionnow.com:9001/bootstrap.bundle.js?4cf3d825e555e0d099bf:149:18)
    at http://localhost.inmotionnow.com:9001/bootstrap.bundle.js?4cf3d825e555e0d099bf:152:10

Safari - RangeError: Maximum call stack size exceeded.

When trying to test my application in Safari I am getting RangeError: Maximum call stack size exceeded. error and the app won't boot. However the app works fine in Chrome.

I narrowed it down to this module by completely removing the initialization of Aurelia and having my main.js file only import aurelia-bootstrapper-webpack. Just importing this module will cause the error above to happen.

The stack trace points to the following block of code in my bundle.js.

            function createCollection(proto, objectOnly) {
                function Collection(a) {
                    if (!this || this.constructor !== Collection) 
                        return new Collection(a);
                    this._keys = [];
                    this._values = [];
                    this._itp = [];
                    this.objectOnly = objectOnly;

                    if (a) 
                        init.call(this, a);
                }

Promise is undefined in IE11

Hi,

When using Internet Explorer 11 I get this error:

SCRIPT5009: 'Promise' is undefined
aurelia-bootstrapper-webpack.js (33,3)

This does not happen on Chrome or Edge (I haven't tried other browsers). This repo uses Promise but the aurelia-polyfills package does not seem to have a Promise export.
The fix could be super simple, I'm just not experienced in this world yet :)

Thanks for the aurelia webpack support, it is awesome!

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.