feat(typescript-webpack-experimental): new experimental version of the webpack skeleton

[niieani]

This PR contains support of the Aurelia & Webpack duo, rewritten from scratch, solving over 20 Webpack-related issues, at the same time deprecating these dependencies:

• aurelia-webpack-plugin v1
• aurelia-bootstrapper-webpack

They're simply no longer needed.

New features:

• integrates @MeirionHughes' template linter out of the box (decided against in the end, not prime-time ready)

• uses jest with the aurelia-pal-nodejs and the new aurelia-loader-nodejs, instead of along with karma, for blazing fast, modern and easy unit testing

• integrates and gives an example for testing with aurelia-testing (see test/unit/welcome.spec.ts)

• leverages jest's snapshot testing (in short: save rendered template HTML as text to a file, and then compare the rendered output with every run of the test; popular in the React circles), example also in the welcome.spec.ts

• drops @easy-webpack configs in favor of a flat, yet still simple Webpack config file

• Webpack now understands the dynamic nature of dependencies in Aurelia, thus the dependency graph is now very accurate. Aside from the old way of defining dependencies for Webpack, aurelia.build.resources in package.json which can still be used to define bundles, declaring dynamic dependencies is now much simpler, can can be achieved by simply placing a comment directly before the module ID literal. For example: DEPRECATED, see Proposal: PLATFORM.bundle / moduleIdFor pal#17 for updated example

  outdated example

  aurelia.setRoot(/* @import */ 'app');

  There are two modifiers that you can add to the comment, @lazy and @chunk('some-name'):

  configureRouter(config: RouterConfiguration, router: Router) {
    config.title = 'Aurelia';
    config.map([
      {
        route: ['', 'welcome'], 
        moduleId: /* @import */ './welcome',
        name: 'welcome', nav: true, title: 'Welcome'
      },
      {
        route: 'users',
        moduleId: /* @import @lazy @chunk('some-chunk') */ './users',
        name: 'users', nav: true, title: 'Github Users'
      },
    ]);
  
    this.router = router;
  }

  This is all you need to make a separate, lazily loaded bundle which contains a given route and all of its dependencies. No other configuration needed.

• simple glob patterns (single * and double **) are now supported for adding/matching dependencies in build resources and importing from code
  (e.g. /* @import('./path/*\/.js') */)

• related .html and .css files of the same name as the ViewModel are now included as its dependencies by convention, you may configure additional extensions or other conventions by passing a method in the Webpack configuration file

• hot reload for CSS imported in JS files works

• beta version of hot reloading both Views and ViewModels

I'm marking this "experimental", since everything about this is a "breaking change" and it needs further testing by other people to iron out possible bugs. I've tried best I can to test this thoroughly, but it's still pretty fresh. Also, there are no docs written yet, especially for the webpack-dependency-suite, a collection of plugins and loaders which I've written with Aurelia in mind (but they're generic, hence deprecation of aurelia-webpack-plugin).
All this work was also prep for two more features that will now be possible:

• integrated server side rendering
• hot-reload for View templates, and later, ViewModels

Comments are welcome.

This skeleton won't work until the dependent PR's are merged and published to NPM as new versions.

@EisenbergEffect This PR is blocked by:

• Creating a repo under @aurelia, moving and publishing: aurelia-loader-nodejs
• Merging and publishing: feat(all): import by module names explicitly + TypeScript loader-webpack#25
• Merging and publishing: fix(view-compiler): fallback to node.data when wholeText is not implemented templating#491
• Publishing: https://github.com/aurelia/pal-nodejs (already merged feat(nodejs-platform): implement requestAnimationFrame pal-nodejs#16)
• Publishing: https://github.com/aurelia/protractor-plugin (small fix)
• Merging: feat(index): unify bootstrappers and expose 'starting' Promise bootstrapper#50
• Merging: feat(index): move isInitialized to aurelia-pal + globalize function pal-nodejs#20
• Merging: feat(index): move isInitialized to aurelia-pal pal#16
• Merging: feat(index): move isInitialized to aurelia-pal pal-browser#14
• Merging: feat(index): move isInitialized to aurelia-pal pal-worker#4
• Merging: Universal bootstrapper fixes bootstrapper#52
• Publishing: pal
• Publishing: pal-nodejs (again, new globalize fixes)
• Publishing: pal-browser
• Publishing: pal-worker
• Publishing: bootstrapper
• Publishing: hot-module-reload
• Publishing: loader-webpack
• Review proposal: Proposal: PLATFORM.bundle / moduleIdFor pal#17
• Merge and publish: feat(index): add PLATFORM.moduleName pal#20
• Write a Webpack plugin to support Proposal: PLATFORM.bundle / moduleIdFor pal#17
• Publish the new Webpack plugin
• Update this PR to use the above mentioned plugin
• Replace bnr and concurrently dependencies

[niieani]

Fixes:

• ModuleNotFoundError: Module not found: Error: Can't resolve 'aurelia-loader-context' loader-webpack#21
• Make possible to use a different name for the app chunk loader-webpack#20
• modules[moduleId].call breaks aurelia-testing loader-webpack#19
• [Question] No view model found in module "app" loader-webpack#23
• causes webpack to source every module in node_modules/package.json and my project whether it is used by my code (as in transitively included by an entrypoint) or not. loader-webpack#24
• Resolving linked dependencies and nested dependencies not resolved to right folder webpack-plugin#44
• Support custom user-defined extension-loader pairs webpack-plugin#51
• Add the ability to provide multiple srcDirs as an Array webpack-plugin#53
• Support glob patterns in aurelia.build.resources webpack-plugin#54
• Make adding dependencies to the app bundle optional webpack-plugin#64
• Webpack HMR not working anymore webpack-plugin#65
• Improve hooking __webpack_require__ module loader webpack-plugin#67
• Build fails when main of a dependency points to a non-JS file webpack-plugin#71
• Add a switch to disable filling the app context with all files from src webpack-plugin#72
• Lazy bundle broken after uglified. webpack-plugin#74
• Cannot put resources from external module into non-app bundle webpack-plugin#76
• Module not found webpack-plugin#78
• Module Resolve Aliases supported? webpack-plugin#80
• error invoking show when using aurelia-i18n with webpack binding#376
• skeleton-typescript-webpack does not work with aurelia-testing testing#21
• What is the correct way to initialise the validation plugin during unit tests? validation#377
• Error loading css with webpack templating-resources#249
• Build errors in typescript-webpack project when running build:dev #628
• Aurelia Webpack EsNext - package.json build resources "path" not being scanned when longer than one segment #667
• How to setup Aurelia + standard webpack (without @easy-webpack) #688
• End to end test always return with exit code 1 even when all tests pass #666
• Proposal: Use webpack-dashboard for webpack skeletons #649
• Typescript-webpack - chrome debugger highlights the wrong lines #740

[Vheissu]

Wow @niieani this is fantastic. Seriously, great work. Excited for server-side rendering and hot module replacement additions.

[mijohen]

@niieani really great work. Webpack config is easy to read and understand. Can't wait for the hot module replacement. Thanks!

[nashwaan]

@niieani Great work. Thank you for the great efforts. Now anticipating the server-side rendering.

Anything experimental also for ESnext?

[nashwaan]

Am I the only who looks at the skeleton files (specially webpack.config.js) and thinks there too many technologies used here --> too many things to learn in advance --> too much to comprehend --> too much for a skeleton project!

I really acknoweldge the efforts and optimizations done here by @niieani, but unless this is simplified or a walk-through documentation is provided (that shows how package.json and webpack.config.ts gradually grow), then this skeleton will be very intimidating and turn off for newcomers.

[mttmccb]

@niieani Should @easy-webpack/core still be a dependency in packages.json?

[niieani]

@mttmccb @easy-webpack/core provides the merging function, used to generate the final config from declared objects. It's much easier to turn features on/off that way.

@nashwaan I've tried to reduce the number of technologies used here, compared to the old skeleton. However the number of dependencies is still large because of all the basic loaders and Webpack plugins, and then the testing environments (although jest requires much fever than karma).

This is the bare minimum for a modern SPA project with unit and e2e testing. Have a look at the React boilerplate or Angular2 skeletons. They have a similar, if not larger number of dependencies.

Config file is simplified and easy to remove features, although there are barely any to remove - it's set up for a simple build system for both development and production builds, and that's all.

[niieani]

From Gitter:

@stevies 12:31
do you have plans for the non-typescript skeleton?

@stevies converting the TS skeleton to use babel should be very easy, I didn't do it yet just because it would be too much maintaining for an "experimental" skeleton. After we get feedback and iron out any remaining bugs we can get a JS skeleton running.

[niieani]

@smithaitufe I think the reason is that your project had unlocked SemVer for the Webpack dependencies, and since there were some breaking changes in the recent webpack betas, a new npm install had caused breaking modules to get installed. Either clone a fresh skeleton and move your project files over (src folder) + install your dependencies, or ensure you have the correct dependencies based on the fresh skeleton.

If you want to further reply to this matter, please open a separate issue or ask on Gitter, this PR is about something else.

[jasonbiondo]

@EisenbergEffect Any idea when this will be completely merged and transformed over to ESnext? My project is currently rocking a hefty 22mb 0.chunk.js file and I would really love to use the new code splitting feature asap. I'd be happy to test it out for you guys as soon as I had an ESnext version I could plug into my project.

[EisenbergEffect]

Within a week I hope. Things could come up in testing. We need to review and fix up a few more things first too.

[lares83]

@niieani Hi, I tried your experimental skeleton and on Windows 10 after lunch npm start, I'm getting this errror:

> skeleton-typescript-webpack-experimental@1.0.0 start G:\skeleton-typescript-webpack-experimental
> bnr webpack:dashboard

running better-npm-run in G:\skeleton-typescript-webpack-experimental
Executing script: webpack:dashboard

to be executed: "$LOCAL/webpack-dashboard -- $LOCAL/webpack-dev-server --hot --inline --open"
'$LOCAL' is not recognized as an internal or external command,
operable program or batch file.

[niieani]

@lares83 the repo is not ready to be tested yet, it's waiting on some PRs to get merged. Also, it's probably not Windows ready yet. We'll let you know as soon as it's possible to try it out.

[jasonbiondo]

I just wanted to report back that I was able to get this running on my mac without errors. I do look forward to an official release though that I can migrate over. After looking into the router config I don't see any of the @lazy code chunking examples. @niieani Can you add an example or provided some docs on how that will work so I can run a test?

[niieani]

@jasonbiondo there's an example for how to do code chunking in the first post of this PR. To reiterate, add a special comment directly before the module name you are requiring, e.g. like this:

/* @import @lazy @chunk('some-chunk') */ './my-module'

• @import signifies the module should be added as a dependency to the file
• @lazy (optional) signifies the module (and its dependencies) should be separated into a different chunk and loaded asynchronously
• @chunk('some-name') (optional) signifies the module (and its dependencies) should be separated into into a different chunk with the name 'some-name'

You may combine @lazy with @chunk to get an asynchronous named-chunk.

This might be most useful in your router.

You can also create chunks / lazy-loaded chunks by listing the paths in your aurelia.build.resources configuration of package.json, as is described in the Hub documentation.

That hasn't changed, but paths now support 2 simple globbing patterns:

• * - part of a single file/dir name is anything
• ** - anything (recursive)

e.g.:

• some-module/*-module.js - any file ending with -module.js inside same-module folder
• some-module/things/**.js - any .js file under things or under any of its subdirectories recursively

One caveat: when using globs, you must add the extension.

If a file is listed as build resource, that's considered the single point of truth, and the comment imports are ignored (it takes precedence AND overrides).

[jasonbiondo]

@niieani Thanks for the update. I edited the app.ts file and ran a build but I'm not seeing the chunk file being created.

This is the change I made:

config.map([ { route: ['', 'welcome'], name: 'welcome', moduleId: './welcome', nav: true, title: 'Welcome' }, { route: 'users', name: 'users', moduleId: /* @import @lazy @chunk('some-chunk') */ './users', nav: true, title: 'Github Users' }, { route: 'child-router', name: 'child-router', moduleId: './child-router', nav: true, title: 'Child Router' } ]);

Was that correct? Shouldn't the some-chunk file be created?

[niieani]

@jasonbiondo your change is correct. Not sure why it wouldn't work since it works on my end. You could instead try defining the chunk in aurelia.build.resources of package.json:

"resources": [{ "path": "users", "lazy": true, "chunk": "some-chunk" }]

Let me know if that works.

I'd wait until we merge the remaining PRs and we can all do a bit of proper testing of the new stack. I might make the ./users path chunked and async by default (in the skeleton) and add one integration test that verifies that an extra chunk was indeed created and loads on router click.

[jasonbiondo]

@niieani I'm getting a warning in terminal with adding that in as well. Also the file is still not created upon completion. Here is full trace:

Jasons-MacBook-Pro-2:skeleton-typescript-webpack jasonbiondo$ npm run build

> aurelia-skeleton-navigation-webpack@1.1.1 build /Users/jasonbiondo/Sites/skeleton-navigation/skeleton-typescript-webpack
> npm run build:dev


> aurelia-skeleton-navigation-webpack@1.1.1 prebuild:dev /Users/jasonbiondo/Sites/skeleton-navigation/skeleton-typescript-webpack
> npm run clean:dist


> aurelia-skeleton-navigation-webpack@1.1.1 clean:dist /Users/jasonbiondo/Sites/skeleton-navigation/skeleton-typescript-webpack
> del-cli dist


> aurelia-skeleton-navigation-webpack@1.1.1 build:dev /Users/jasonbiondo/Sites/skeleton-navigation/skeleton-typescript-webpack
> cross-env NODE_ENV=development npm run webpack -- --progress --profile


> aurelia-skeleton-navigation-webpack@1.1.1 webpack /Users/jasonbiondo/Sites/skeleton-navigation/skeleton-typescript-webpack
> cross-env TS_NODE_PROJECT=tsconfig.tsnode.json TS_NODE_FAST=true ./node_modules/.bin/webpack "--progress" "--profile"

3901ms building modules                                                               
1ms sealing 
0ms optimizing 
0ms basic module optimization 
1ms module optimization 
2ms advanced module optimization 
4ms basic chunk optimization        
0ms chunk optimization 
3ms advanced chunk optimization 
0ms module and chunk tree optimization 
5ms module reviving 
1ms module order optimization 
1ms module id optimization 
0ms chunk reviving 
1ms chunk order optimization 
1ms chunk id optimization 
5ms hashing 
0ms module assets processing 
15ms chunk assets processing
1ms additional chunk assets processing 
1ms recording 
0ms additional asset processing 
50ms chunk asset optimization
1509ms asset optimization
29ms emitting
Hash: 52baf11ed06a912954ed
Version: webpack 2.1.0-beta.27
Time: 8002ms
                                 Asset       Size  Chunks             Chunk Names
 fa2772327f55d8198301fdb8bcfc8158.woff    23.4 kB          [emitted]  
  674f50d287a8c48dc19ba404d20fe713.eot     166 kB          [emitted]  
  b06871f281fee6b241d60582ae9369b9.ttf     166 kB          [emitted]  
 fee66e712a8a08eef5805a46892932ad.woff      98 kB          [emitted]  
af7ae505a9eed503f8b8e6982036873e.woff2    77.2 kB          [emitted]  
  f4769f9bdb7466be65088239c12046d1.eot    20.1 kB          [emitted]  
  89889688147bd7575d6327160d64e760.svg     109 kB          [emitted]  
  e18bbf611f2a2e43afc071aa2f4e1512.ttf    45.4 kB          [emitted]  
  912ec66d7572ff821749319396470bde.svg     444 kB          [emitted]  
448c34a56d699c29117adc64c43affeb.woff2      18 kB          [emitted]  
                         app.bundle.js    1.05 MB       0  [emitted]  app
                     aurelia.bundle.js    1.47 MB       1  [emitted]  aurelia
           aurelia-bootstrap.bundle.js     677 kB       2  [emitted]  aurelia-bootstrap
                            styles.css     199 kB       0  [emitted]  app
                           favicon.ico    2.25 kB          [emitted]  
                            index.html  802 bytes          [emitted]  
  [48] ./src ^\.\/.*$ 2.56 kB {0} [built]
       [] -> factory:204ms building:37ms dependencies:590ms = 831ms
  [49] multi app 28 bytes {0} [built]
        factory:0ms building:1ms = 1ms
  [50] multi aurelia 244 bytes {1} [built]
        factory:0ms building:0ms = 0ms
  [51] multi aurelia-bootstrap 76 bytes {2} [built]
        factory:0ms building:0ms = 0ms
    + 92 hidden modules

WARNING in ./src ^\.\/.*$
Module not found: Error: Can't resolve 'bundle' in '/Users/jasonbiondo/Sites/skeleton-navigation/skeleton-typescript-webpack/src'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' prefix when using loaders.
                 You need to specify 'bundle-loader' instead of 'bundle'.
 @ ./src ^\.\/.*$
 @ ./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js
 @ multi aurelia

WARNING in ./src ^\.\/.*$
Module not found: Error: Can't resolve 'bundle' in '/Users/jasonbiondo/Sites/skeleton-navigation/skeleton-typescript-webpack/src'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' prefix when using loaders.
                 You need to specify 'bundle-loader' instead of 'bundle'.
 @ ./src ^\.\/.*$
 @ ./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js
 @ multi aurelia
Child html-webpack-plugin for "index.html":
        + 4 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules
Child extract-text-webpack-plugin:
                                     Asset     Size  Chunks             Chunk Names
      674f50d287a8c48dc19ba404d20fe713.eot   166 kB          [emitted]  
      912ec66d7572ff821749319396470bde.svg   444 kB          [emitted]  
      b06871f281fee6b241d60582ae9369b9.ttf   166 kB          [emitted]  
     fee66e712a8a08eef5805a46892932ad.woff    98 kB          [emitted]  
    af7ae505a9eed503f8b8e6982036873e.woff2  77.2 kB          [emitted]  
        + 8 hidden modules
Child extract-text-webpack-plugin:
                                     Asset     Size  Chunks             Chunk Names
      f4769f9bdb7466be65088239c12046d1.eot  20.1 kB          [emitted]  
      89889688147bd7575d6327160d64e760.svg   109 kB          [emitted]  
      e18bbf611f2a2e43afc071aa2f4e1512.ttf  45.4 kB          [emitted]  
     fa2772327f55d8198301fdb8bcfc8158.woff  23.4 kB          [emitted]  
    448c34a56d699c29117adc64c43affeb.woff2    18 kB          [emitted]  
        + 7 hidden modules
Jasons-MacBook-Pro-2:skeleton-typescript-webpack jasonbiondo$ 

Here is the change on my end:

"aurelia": { "build": { "resources": [{ "path": "users", "lazy": true, "chunk": "some-chunk" }] } },

[niieani]

@jasonbiondo yep, the problem is that you're not using the latest version of the loader-webpack, because that wasn't released yet.

[jasonbiondo]

@niieani I see. I cloned the loader-webpack, changed the name to aurelia-loader-webpack and moved it to my node modules dir but I'm still getting the error.

[niieani]

@jasonbiondo because the loader is not built. You don't need to clone manually, npm supports git natively. There's a separate test branch that has the loader built. Just do:

npm install github:aurelia/loader-webpack#experimental-release --save-dev

[jasonbiondo]

@niieani any idea why this is invalid?

Jasons-MacBook-Pro-2:skeleton-typescript-webpack jasonbiondo$ npm install github:aurelia/loader-webpack#experimental-release --save-dev
aurelia-skeleton-navigation-webpack@1.1.1 /Users/jasonbiondo/Sites/skeleton-navigation/skeleton-typescript-webpack
├─┬ aurelia-bootstrapper-webpack@1.0.0
│ └── aurelia-loader-webpack@1.0.3
└── aurelia-loader-webpack@2.0.0 invalid (git://github.com/aurelia/loader-webpack.git#dea401995e605c44fa39df8934ad970e91044d71)

[niieani]

Looks like you have loader-webpack twice, once the 2.0.0 version, once from the old bootstrapper-webpack, which again, wasn't yet released (actually we're switching to a universal boostrapper).

I think it will be easiest if you simply wait a few more days for the related packages to be released and then try the skeleton again.

[atsu85]

@niieani, fantastic work!
However as a TypeScript user (because of stronger typing, type safety, etc) I'm not that fond of the modifiers/hints in comments, that could easily contain typos that are not detected by the compiler:
moduleId: /* @inport @Iazy @junk('some-chunk') */ './users',

So i have an idea for improvement: I'd propose using special functions that takes the module id and simply returns it at runtime, but for aurelia webpack support we'd be able to pass in additional arguments (modifiers/hints), that would be read by build system at build-time, and that would be ignored at runtime. Also this function could be documented, so whoever looks at its documentation (for example in TypeScript declaration file) would understand what it is used for without having to wonder what is encoded into the comments and who might use/need them.

For example, I came up with few alternative syntaxes that I might prefer over using comments:
1)

import {wp} from 'hypothetical-aurelia-webpack-extension';
...
wp.moduleId('./users', {
  import: true,
  lazy: true,
  chunk: 'some-chunk'
}),
...

2. or perhaps even smth like:

import {wp, IMPORT, LAZY} from 'hypothetical-aurelia-webpack-extension';
...
wp.moduleId('./users', IMPORT | LAZY, 'some-chunk'),
...

3. or if @chunk('some-chunk') should only be used when @lazy is used
   AND
   if @lazy should only be used when @import is used, then the syntax could be simplified even more:
   then:
   a) instead of
   /* @import @lazy @chunk('some-chunk') */ './users'
   following:
   wp.moduleId('./users', true, 'some-chunk')
   b) instead of
   /* @import @lazy */ './users',
   following:
   wp.moduleId('./users', true)
   c) instead of
   /* @import */ './users',
   following:
   wp.moduleId('./users')

@niieani, what do You think?

[niieani]

@atsu85 I have thought about this for a while, and while comments are not the best, they're in some ways better than special functions (which I've also thought about).

The problem is, when you use special functions your code is not portable anymore. I was hoping that with the new skeleton, you can run the same code, without any changes (aside from configuration), with Aurelia CLI, RequireJS, SystemJS, JSPM, etc.

Once we start adding functions which are loader-specific, we loose portability. There's indeed an alternative, we could create a simple function which returns the same string, i.e. in the simplest form:

function dynamicImport(moduleId) {
  return moduleId;
}

Then the parser would look for dynamicImport('some-module'), use that and even replace the function with the string directly in the output code.

This is the other relatively good solution I could get behind of, since it wouldn't break other-module compatibility. But when switching / using other loaders, you'd end up with an unnecessary call to a function in the output build. Maybe that's not such a big problem. I'll need to think about it some more.

[boazblake]

Thank you @niieani!
Good job!

[stevies]

Appears to be broken - skeleton-esnext-webpack - downloaded from master, running on:

Windows 10
Node 6.9.4
NPM 3.10.10

Ran:

yarn install
yarn start

Removing Bluebird from main.js fixes it:

// we want font-awesome to load as soon as possible to show the fa-spinner
import '../static/styles.css';
import 'font-awesome/css/font-awesome.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'aurelia-bootstrapper';

// import * as Bluebird from 'bluebird';
// remove out if you don't want a Promise polyfill (remove also from webpack.config.js)
// Bluebird.config({ warnings: { wForgottenReturn: false } });

Same issue using Ubuntu.

Node 6.9.4
NPM 3.10.10

[nashwaan]

@niieani I am using skeletion-esnext-webpack, I see this line in webpack.config.js and I don't understand it:

module.exports = ({production, server, extractCss, coverage} = {}) => ({

I am used to module.exports = function(config) {, so this line threw me off. What does this line of code mean and how to turn on each flag (i.e production, server, ...etc)?

Also, I get failing unit-test cases on anything using async/await syntax. Do these lines need to be transpiled by babel?

[niieani]

{production, server, extractCss, coverage} = {} is destructuring the environment passed in from the command line (i.e. webpack --env.production --env.server).

I'll have a look at unit-test cases.

[JoshuaVSherman]

@niieani and team, awesome job here. I will be working to recreate my apps within this new skeleton over the next week. A few suggestions:
add these to the devDependancies:

"aurelia-tools": "^1.0.0",
"babel-eslint": "^7.1.1",
"eslint": "^3.15.0",
"html-hint": "^0.2.4",
"stylelint": "^7.8.0",
"stylelint-config-standard": "^16.0.0",

update the babelrc line 10 to be
"node": ["7.8.0"]
instead of "current"

Thanks!

[atsu85]

@JoshuaVSherman, my first thought was: why would You like to add babel and eslint to typescript project? Because normally You would use either typescript compiler or babel (tough there were times when TS wasn't able to generate ES5 code for async, in which case TS->ES6->Babel served as workaround) and either tslint or eslint.

Are they related to running tests with jest?

[JoshuaVSherman]

sorry, i was replying without noticing that this was regarding typescript I am not using typescript

…

On Tue, Apr 11, 2017 at 3:13 PM, atsu85 ***@***.***> wrote: @JoshuaVSherman <https://github.com/JoshuaVSherman>, my first thought was: why would You like to add babel and eslint to typescript project? *Because normally You would use either typescript compiler or babel (tough there were times when TS wasn't able to generate ES5 code for async, in which case TS->ES6->Babel served as workaround) and either tslint or eslint.* Are they related to running tests with jest? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#714 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMuN2McclL4_gwFinUmCVCCQSQQ6ExqFks5ru9DfgaJpZM4Kw1ol> .

-- Josh Sherman www.joshandmariamusic.com

[stevies]

Is it only me that can't get skeleton-esnext-webpack working?

[JoshuaVSherman]

did you start all over or are you trying to incorporate changes into your existing one? I decided to just start all over and slowly merge my code back into the new skeleton

…

On Tue, Apr 11, 2017 at 4:23 PM, stevies ***@***.***> wrote: Is it only me that can't get skeleton-esnext-webpack working? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#714 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMuN2AEoKDZtJLjWQOV99ene0PFSx6qGks5ru-E4gaJpZM4Kw1ol> .

-- Josh Sherman www.joshandmariamusic.com

[stevies]

Starting from clean installation - see comments above from 2 days ago.

#714 (comment)

[JoshuaVSherman]

i'm using node 7.8.0
he added the missing bluebird dependancy to the package.json yesterday

https://github.com/aurelia/skeleton-navigation/blob/master/skeleton-esnext-webpack/package.json

[heruan]

I was able to update my projects with the latest releases, only thing not working is SCSS files, I get:

Error: Failed loading required CSS file: oss-resources/custom-elements/entity-select.css
    at fixupCSSUrls (app.bundle.js:2)
    at app.bundle.js:2

In oss-resources I have entity-select.ts, entity-select.html and entity-select.scss which is included in the template as <require from="./entity-select.css" as="scoped">. Index of oss-resources includes the custom element with PLATFORM.moduleName("./entity-select").

Do I need special configuration to import SCSS/CSS files?

[Thanood]

import 'entity-select.scss'should work in the view-model.
But I'm really curious how to do this with <require>.. 😏

[Kukks]

@Thanood I had the same issue and decided against more head scratching and added all of my scss imports to the viewmodel.

Not a real solution though...

I recall there was an indication that style imports were going to be added as a convention so that a.html, a.js and a.css would be loaded by default in this skeleton?

[heruan]

Thank you @Thanood for the workaround, unfortunately I cannot change that module. Any way to fix this in webpack.config.ts? I tried with the ModuleDependenciesPlugin but somehow for CSS it's not working (tried entity-select and entity-select.css both).

@niieani is the plugin actually supposed to import template's <require> resources?

[jods4]

<require from="./entity-select.css" as="scoped">
you mean entity-select.scss, right?

With proper loaders config and aurelia-templating-resources@1.4.0 it should work.

[JoshuaVSherman]

I am also seeing strange things with my CSS imports. What worked before is no longer working. I had to inline a bunch of styles yesterday for my aurelia-table

…

On Apr 21, 2017 7:35 AM, "jods" ***@***.***> wrote: <require from="./entity-select.css" as="scoped"> you mean entity-select.scss, right? With proper loaders config and ***@***.*** it should work. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#714 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMuN2AwloM-Uei6j-ploVqiMbtBSvTS9ks5ryJRzgaJpZM4Kw1ol> .

[heruan]

@jods4 I use the .css file in the <require>, not the .scss since that's how it worked before. If that's wrong, I suppose I had wrong loaders before; I'll try requiring the .scss if that is supposed to work!

[jods4]

@heruan support for .scss is very new. Be sure to not use style-loader.

[heruan]

Hm, in fact requiring the .scss I get this when bundling:

ERROR in ./~/@saiv/oss-resources/dist/main/custom-elements/entity-select.html
Module not found: Error: Can't resolve './entity-select.scss' in './node_modules/@saiv/oss-resources/dist/main/custom-elements'
 @ ./~/@saiv/oss-resources/dist/main/custom-elements/entity-select.html
 @ ./~/@saiv/oss-resources/dist/main/custom-elements/entity-select.js
 @ ./~/@saiv/oss-resources/dist/main/index.js
 @ ./src/main.ts
 @ ./~/aurelia-webpack-plugin/dist/aurelia-entry.js
 @ multi aurelia-webpack-plugin/dist/aurelia-entry aurelia-polyfills aurelia-loader-webpack (webpack)-dev-server/client?http://0.0.0.0:8081 aurelia-bootstrapper

with this loaders:

module: {
        rules: [
            { test: /\.tsx?$/,  use: [ "awesome-typescript-loader" ] },
            { test: /\.json$/,  use: [ "json-loader" ] },
            { test: /\.html$/,  use: [ "html-loader" ] },
            { test: /\.css$/,   use: [ "style-loader", "css-loader" ] },
            { test: /\.scss$/,  use: [ "style-loader", "css-loader", "sass-loader" ] }
        ]
    }

@jods4 Any hint or doc on how to configure loaders for scss?

[jods4]

Module not found:
Error: Can't resolve './entity-select.scss' in './node_modules/@saiv/oss-resources/dist/main/custom-elements'

I don't think this is a loader problem. Where is entity-select.scss?

[heruan]

In the same directory where the view-model and the template are:

src/main/custom-elements
├── entity-select.html
├── entity-select.scss
├── entity-select.ts

and then

dist/main/custom-elements
├── entity-select.css
├── entity-select.html
├── entity-select.js

Since oss-resources is an external module, the SCSS is already compiled to CSS and this is where I get lost. Do I need to import the SCSS or the CSS in the <require> template element?

[jods4]

Yup.
Webpack is looking there ./node_modules/@saiv/oss-resources/dist/main/custom-elements, which seems correct.

But you have a *.css file there, not a *.scss!

[heruan]

oss-resources is a module which is compiled and used as a dependency of my app. So, it contains JavaScript and CSS, not TypeScript and SCSS. Then, what should I require in the template? I think it's correct to import the CSS file, but it's not getting included in the bundle anyway.

[heruan]

I got it working with the postcss-loader, reverting back to <require from="./style.css">.

[jods4]

If it's a lib you distribute and you don't want to impose a SASS loader to your users then you should consume CSS indeed.

The fact that we can now require SASS or LESS directly is especially interesting for apps source code, I think.

[niieani]

Locking this so that people don't get emails for any more comments. If you're having problems with the new skeletons, please open issues, write on Gitter or create questions on Stackoverflow.

Thanks for all your feedback and help!