The problem:

After running npm makes aurelia in interactive mode creating template compatible to:

npx makes aurelia new-project-name -s parcel,typescript,sass

We are offered an option:

? Do you want to install npm dependencies now? » - Use arrow-keys or numbers. Return to submit.
> No
  Yes, use npm
  Yes, use yarn
  Yes, use pnpm

After choosing yarn, packages are installed and following message displayed:

Next time, you can try to create similar project in silent mode:
 npx makes aurelia new-project-name -s parcel,typescript,sass

Get Started
cd aurelia2-parcel-ts-scss-yarn
npm start

Upon running above commands, error occurs:

> [email protected] start
> parcel -p 9000

'parcel' is not recognized as an internal or external command,
operable program or batch file.

Reason for the error

The issue happens when development machine has yarn version 2.x or higher installed and does not use node_modules folder. The behavior is called "Plug'n'Play" described here. This mode creates smallest footprint on the disk at the moment of testing - 295MB, compared to pnpm - 394MB (excluding sym-link referenced subfolders). Normal npm I did not even measure. "Plug'n'Play" also brings a lot of speed. I did not measure, but feels way faster than pnpm on initial install of packages.

Simple fix:

Perhaps "Get Started" section that is displayed after successful project scaffolding should have different text for users who selected yarn and have version 2.x or higher installed.

cd aurelia2-parcel-ts-scss-yarn
yarn start

Additional possibility - Visual Studio Code "Plug'n'Play" support.

yarn start command will do the correct work, but when using Visual Studio Code, two other improvements can be made.

As described in [Editor SDKs](yarn dlx @yarnpkg/sdks vscode) section, additional editor setup can be done by running following command:

yarn dlx @yarnpkg/sdks vscode

This will install additional package in .yarn folder and add additional configuration settings in .vscode/settings.json and extension recommendations in .vscode/extensions.json.

Perhaps option to choose editor configuration can also be added to the Aurelia scaffolding template and, when Visual Studio code is used yarn sdk integration can be executed?

https://github.com/cypress-io/eslint-plugin-cypress

v4 is out today. https://fuse-box.org/docs/getting-started/setup

The scaffolding contains a favicon.ico image but does not get included during build. Suggest setting favicon option in HtmlWebpackPlugin.

new HtmlWebpackPlugin({
              template: 'index.html',
              favicon: 'favicon.ico'
}),

stylelint support multiple languages, is well supported by a large community.

OS: Mac OS 10.15.7
Node version: 15.6.0
NPM version: 7.5.2

npx makes aurelia

[makes] Using remote skeleton github:aurelia/new
[makes] Fetching tarball https://codeload.github.com/aurelia/new/tar.gz/master

Default ESNext Aurelia 2 App

npm install
npm start

➜ npm start

> [email protected] start
> webpack serve

｢wds｣: Project is running at http://localhost:9000/
｢wds｣: webpack output is served from /
｢wds｣: Content not from webpack is served from /Users/ivan/Desktop/test
｢wds｣: 404s will fallback to /index.html
｢wdm｣: wait until bundle finished: /

(node:29075) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
(Use `node --trace-deprecation ...` to show where the warning was created)

｢wdm｣: asset entry-bundle.js 3.09 MiB [emitted] (name: main)
asset index.html 532 bytes [emitted]
runtime modules 937 bytes 4 modules
modules by path ./node_modules/@aurelia/ 1.04 MiB 130 modules
modules by path ./src/ 1.89 KiB
  modules by path ./src/*.js 393 bytes 2 modules
  modules by path ./src/*.css 1.04 KiB
    ./src/my-app.css 398 bytes [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./src/my-app.css 664 bytes [built] [code generated]
  ./src/my-app.html 478 bytes [built] [code generated]
modules by path ./node_modules/css-loader/dist/runtime/*.js 3.78 KiB
  ./node_modules/css-loader/dist/runtime/cssWithMappingToString.js 2.21 KiB [built] [code generated]
  ./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]
./node_modules/aurelia/dist/esm/index.js 15.2 KiB [built] [code generated]
./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]

ERROR in   Error: The loader "/Users/ivan/Desktop/test/node_modules/html-webpack-plugin/lib/loader.js!/Users/ivan/Desktop/test/index.ejs" didn't return html.
  
  - index.js:336 HtmlWebpackPlugin.evaluateCompilationResult
    [test]/[html-webpack-plugin]/index.js:336:24
  
  - index.js:243 
    [test]/[html-webpack-plugin]/index.js:243:22
  
  - runMicrotasks
  
  - task_queues:94 processTicksAndRejections
    node:internal/process/task_queues:94:5
  
  - async Promise.all
  
  - async Promise.all

although I would like to see more than these 2 I got bit hard, especially by .chrome when it wasn't ignored, I force pushed it away (bad bad) because I didn't want all of it's garbage, some of which is presumably binary in my repo. Note, this happened as a result of trying to use the vscode chrome debugger. Also, I can't see a reason to ever include logs

.chrome
*.log

The standard ES or TS app fails to start.

Steps to reproduce on Darwin 11.4 with node 14.17.0 or 16.3.0. Probably with other node versions too.

$ npx makes aurelia
makes v2.1.5 https://makes.js.org
[makes] Using remote skeleton github:aurelia/new
[makes] Fetching tarball https://codeload.github.com/aurelia/new/tar.gz/master

         #
      ######   xxx
     ########  xxxx   ####         _                  _ _         ____
   x   ########    ########       / \  _   _ _ __ ___| (_) __ _  |___ \
     x  ######  #############    / _ \| | | | '__/ _ \ | |/ _` |   __) |
  xxxxx  ##  ###############    / ___ \ |_| | | |  __/ | | (_| |  / __/
   xxxxx  ###############      /_/   \_\__,_|_|  \___|_|_|\__,_| |_____|
    x ###############  xxx
    ##############  #   xx
 ##############  ######          https://aurelia.io
  ########## x  ########         https://github.com/aurelia
    #####  xxxx   ########       https://twitter.com/aureliaeffect
     #   x  x      ######
                     #

✔ Please name this new project: › test
✔ Would you like to use the default setup or customize your choices? › Default ESNext Aurelia 2 App
[makes] Project test has been created.
✔ Do you want to install npm dependencies now? › Yes, use npm
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142

added 1211 packages, and audited 1212 packages in 23s

76 packages are looking for funding
  run `npm fund` for details

6 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Next time, you can try to create similar project in silent mode:
 npx makes aurelia new-project-name -s jest 

Get Started
cd test
npm start

$ cd test                                                                                               
$ npm start 

> [email protected] start
> webpack serve

ℹ ｢wds｣: Project is running at http://localhost:9000/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/D037732SAPDevelop/src/test
ℹ ｢wds｣: 404s will fallback to /index.html
ℹ ｢wdm｣: wait until bundle finished: /
✖ ｢wdm｣: asset entry.bundle.js 3.99 MiB [emitted] (name: entry)
asset index.html 1.29 KiB [emitted]
orphan modules 41.2 KiB [orphan] 10 modules
runtime modules 1.25 KiB 6 modules
modules by path ./node_modules/@aurelia/ 1.06 MiB 127 modules
modules by path ./node_modules/webpack-dev-server/ 21.2 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 20.9 KiB 10 modules
  modules by path ./node_modules/webpack-dev-server/node_modules/ 296 bytes 2 modules
modules by path ./src/ 1.55 KiB 5 modules
modules by path ./node_modules/html-entities/lib/*.js 61 KiB 5 modules
modules by path ./node_modules/webpack/hot/ 1.58 KiB 3 modules
modules by path ./node_modules/url/ 37.4 KiB 3 modules
modules by path ./node_modules/querystring/*.js 4.51 KiB
  ./node_modules/querystring/index.js 127 bytes [built] [code generated]
  ./node_modules/querystring/decode.js 2.34 KiB [built] [code generated]
  ./node_modules/querystring/encode.js 2.04 KiB [built] [code generated]
7 modules

ERROR in   Error: Cannot access 'CustomElement' before initialization
  
  - custom-element.js:25 eval
    [.]/[@aurelia]/runtime-html/dist/esm/resources/custom-element.js:25:9
  
  - au-slot.js:70 eval
    [.]/[@aurelia]/runtime-html/dist/esm/resources/custom-elements/au-slot.js:70:124
  
  - index.html:320 Object../node_modules/@aurelia/runtime-html/dist/esm/resources/custom-elements/au-slot.js
    /Users/D037732SAPDevelop/src/test/index.html:320:1
  
  - index.html:684 __webpack_require__
    /Users/D037732SAPDevelop/src/test/index.html:684:41
  
  - renderer.js:62 eval
    [.]/[@aurelia]/runtime-html/dist/esm/renderer.js:62:95
  
  - index.html:290 Object../node_modules/@aurelia/runtime-html/dist/esm/renderer.js
    /Users/D037732SAPDevelop/src/test/index.html:290:1
  
  - index.html:684 __webpack_require__
    /Users/D037732SAPDevelop/src/test/index.html:684:41
  
  - render-context.js:9 eval
    [.]/[@aurelia]/runtime-html/dist/esm/templating/render-context.js:9:70
  
  - index.html:360 Object../node_modules/@aurelia/runtime-html/dist/esm/templating/render-context.js
    /Users/D037732SAPDevelop/src/test/index.html:360:1
  
  - index.html:684 __webpack_require__
    /Users/D037732SAPDevelop/src/test/index.html:684:41
  


webpack 5.41.0 compiled with 1 error in 3732 ms
ℹ ｢wdm｣: Failed to compile.

One of the first things I check with a new Framework is testing support.

I currently really find it hard to see how to create a component test, so scaffolding an example would be great!

aurelia/aurelia#1932

Once the new decorator change is released, update skeleton to remove legacy decorator config.

https://docs.cypress.io/guides/tooling/typescript-support.html#Configure-tsconfig-json

also if you choose the app with routing, it'd be nice to have at least the most basic test in place

A quick question about recommendation for monorepo and the dumber template.

We've got a large v1 app that uses dumber successfully and we are very happy with it. I am starting to look at v2, and one thing we are wanting to change is to move to a monorepo (our application is broken up into plugins which each live in a separate repo currently). We have no interest in going down the webpack path.

I've had a look at npm workspace with typescript project references and build mode and it seems like a nice clean approach. One issue I currently see with respect to the dumber template is the lack of build mode support in gulp-typescript.

Do you have any thoughts or recommendations on what we could use to get around this?

According to aurelia-cli, need at least following to support resources.

{ test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', options: { limit: 8192 } },
{ test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff2' } },
{ test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff' } },
// load these fonts normally, as files:
// (url-loader also works for these fonts)
{ test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'file-loader' },

Need some study on the above snippet.

It also need /\.css$/ rule to support both css and scss when scss is selected. Same goes to less.

cc @xenoterracide

jestjs/jest#10777

Created a new app using npx makes aurelia and picked the template with routes. Live reload doesn't seem to be working. Reading the webpack 5 docs it should be turned on by default.

would be really cool if the prompter could ask you if you want ignores from here https://github.com/github/gitignore, this is non critical to me just an idea.

It would be good to add "sourceMap": true to the "compilerOptions" section of tsconfig.json file, so that it's possible to debug the project out of the box.

{
  "compilerOptions": {
    ...
    "sourceMap": true
  },
}

instead of <base href="/" /> it needs to be <base href="./" /> otherwise you'll get this.

GET file:///entry-bundle.js net::ERR_FILE_NOT_FOUND

to reproduce

npx makes aurelia test-app -s
cd test-app
npm run build
npm install --save @capacitor/core @capacitor/cli
npx cap init                                                     # defaults are fine
sed -ie s/www/dist/g capacitor.config.json                # use dist as the web root
npx cap add electron
npx cap copy
npx cap open electron

you will see a black screen of death and in the console there will be the afformentioned error

What

Create an option in the CLI to choose/make a custom syntax

How

We already have ShortHandBindingSyntax (Vue) and hopefully an Angular one in the near future. Would like the CLI to ask if the user would like to add additional binding syntaxes or create a custom one.

Why

Many of the Aurelia gems are hidden and this is something really neat that would show it off.

Just keeping a note for some common tasks that are not already handled by the skeleton

• For application, probably we can use copy plugin, Aurelia logo image, and an image element with absolute path pointing to it.
• For plugin, I'm not sure

Thoughts? @3cp

What's about to add Vite?

so the Au CLI, would ask you about IDE support. Would be cool if this were added back and added recommended extensions (e.g.), the ignore #22 and more importantly a launch.json, I still have not gotten debugging working with the webpack/typescript setup.

P.S. any chance you know why/can help with that?

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "port": 9222,
      "webRoot": "${workspaceFolder}/src"
    },
    {
      "name": "Chrome Debugger",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9000",
      "webRoot": "${workspaceRoot}/src",
      "userDataDir": "${workspaceRoot}/.chrome",
      "sourceMapPathOverrides": {
        "../src/*": "${webRoot}/*"
      }
    }
  ]
}

There is no way to disable this option when passing -s to makes.

See https://makes.js.org/silent-mode#properly-support-silent-mode

Suggest providing a no-e2e value to pass to -s.

if you do https://docs.aurelia.io/app-basics/internationalization

import * as de from 'path_to_locales/de/translation.json';
import * as en from 'path_to_locales/en/translation.json';

new Aurelia()
  .register(
    I18nConfiguration.customize((options) => {
      options.initOptions = {
        resources: {
          en: { translation: en },
          de: { translation: de },
        }
      };
    })
  );

it won't work because webpack doesn't package json files out of the box.

Note the //# sourceMappingURL=index.mjs.map out of nowhere for some Aurelia exports.

parcelHelpers.export(exports, "observable", ()=>_runtime.observable);
parcelHelpers.export(exports, "subscriberCollection", ()=>_runtime.subscriberCollection);
parcelHelpers.export(exports, "Aurelia", ()=>Aurelia) //# sourceMappingURL=index.mjs.map
;
parcelHelpers.export(exports, "PLATFORM", ()=>l);
parcelHelpers.export(exports, "default", ()=>Aurelia);

For example, here the "aurelia" package. The index.mjs file has //# sourceMappingURL=index.mjs.map at the end, but the file index.mjs.map is missing.
I assume we didn't want sourceMap for the production build, so the last line in index.mjs should be removed. @bigopon

I guess the missing map file confused Parcel, so it kept some of the //#... line in the code.
I also noted all our au2 packages have this missing map file, but Parcel didn't add the extra //#... line for all of the exports. (Might be just for the first exports from an au2 package).

huocp@Chunpengs-MacBook-Pro ~/p/p/n/a/d/esm> ll
total 24
-rw-r--r--  1 huocp  staff   3.1K 30 Aug 11:15 index.dev.mjs
-rw-r--r--  1 huocp  staff   1.3K 30 Aug 11:15 index.dev.mjs.map
-rw-r--r--  1 huocp  staff   2.7K 30 Aug 11:15 index.mjs

huocp@Chunpengs-MacBook-Pro ~/p/p/n/a/d/esm> pwd
/Users/huocp/playground/p1/node_modules/aurelia/dist/esm


huocp@Chunpengs-MacBook-Pro ~/p/p/n/a/d/esm> tail index.mjs
                host: t,
                component: e
            });
        }
        return super.app(e);
    }
}

export { Aurelia, l as PLATFORM, Aurelia as default };
//# sourceMappingURL=index.mjs.map

I manually removed that line from "aurelia" package's dist/esm/index.mjs and it did let Parcel removing that generated //#... line.
Is this something you can cleanup in au2 monorepo? @bigopon

The reason:

webpack-dev-server now prints following information to stderr, instead of stdout. I don't understand the rational behind this change.

<i> [webpack-dev-server] Project is running at http://0.0.0.0:9000/
<i> [webpack-dev-server] Content not from webpack is served from /Users/huocp/aurelia/new/test-skeletons/webpack-babel-css-no-unit-tests-cypress-app-min-browser-evergreen
<i> [webpack-dev-server] 404s will fallback to /index.html

Need to update unit test setup.

I tested with parcel v2 alpha 1. It nows support ES6 export / import.

Maybe not now, but before alpha release.

Add options for user to select the level of browser support. The list of options is to be decided.

Default to evergreen browsers. One good thing is it does not need to transpile async/await on latest browsers. Transpiled async/await is a performance killer.
The lowest we can go is IE11. It will require few polyfills and use special Aurelia 2 build.

When creating a new project using npx makes aurelia a webpack.config file is created.

It has this line in it:

alias: production ? {
  // add your production aliases here
} : {
  ...getAureliaDevAliases()
  // add your development aliases here
}

However, since beta 12. I get this warning/error in the console:

main.js:6 [DEV:aurelia] Error: AUR0153: Element {{0}} has already been registered.

I am only importing router-lite.

This solves the issue and does not seem to break anything.

alias: production ? {
  // add your production aliases here
} : {
  // ...getAureliaDevAliases()
  // add your development aliases here
}

is this getAureliaDevAliases() needed? What does it do?

due to... issues with things... like webpack... that have happened in the past (that were fixed simply by copying the new skeleton generated files) , also desire for testing new features from the skeleton, like jest. Would it be possible to have the generator ask if you wish to overwrite files intead of bail with directory exists?

This might be a bit of a stupid question but the Aurelia 1 version of the skeleton had a directory called static where one could put image, etc ... These would then automatically be copied to the dist folder when a build was triggered. I think this was done using the webpack-copy-plugin.

Is there a reason that this was removed in the Aurelia 2 version? Should I just include images in the src directory and webpack will take care of the rest?

Demo test code here:
https://gist.dumber.app/?gist=79b0cbde9118a15c467357c381bf9201&open=test%2Fhelper.ts&open=test%2Fapp.spec.ts

What changed

In this repo, current unit tests template renders into html body, which requires clean up.
We can instead render into a detached <div>, so that JavaScript GC will clean it up automatically.
I want to ask whether this works in Aurelia 2 as I expected.

export async function render(template: string, ...deps: readonly unknown[]) {
  const wrapper = CustomElement.define({name: 'wrapper', template});
  const div = document.createElement('div');
  const au = Aurelia.register(deps).app({
    host: div,
    component: wrapper
  });
  await au.start().wait();
  return div;
}

Usage is simple:

const div = await render('<my-app></my-app>', MyApp);
expect(div.textContent.trim()).to.equal('Hello Aurelia 2!');

Note, there is no au.stop() to clean up. As const div will be garbage collected by JS, au instance should follow it to annihilation.

Enhance @aurelia/testing?

If this is a good idea, we probably should add some helper to @aurelia/testing, something like render() or mount() (these two are very common in other frameworks' test support) to enable easy writing of test code.

tslint is deprecated (and I think no longer maintained), in favor of using eslint. The config should just be this

.eslintrc.json

{
  "parser": "@typescript-eslint/parser", // Specifies the ESLint parser
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
    // e.g. "@typescript-eslint/explicit-function-return-type": "off",
  }
}

recommended settings come from https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/README.md