aurelia / new Goto Github PK
View Code? Open in Web Editor NEWThe Aurelia 2 scaffolding repo used by our tools to setup new projects.
License: MIT License
The Aurelia 2 scaffolding repo used by our tools to setup new projects.
License: MIT License
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?
Need to update unit test setup.
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.
Demo test code here:
https://gist.dumber.app/?gist=79b0cbde9118a15c467357c381bf9201&open=test%2Fhelper.ts&open=test%2Fapp.spec.ts
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.
@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.
What's about to add Vite?
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?
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!
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'
}),
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}/*"
}
}
]
}
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.
stylelint support multiple languages, is well supported by a large community.
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
v4 is out today. https://fuse-box.org/docs/getting-started/setup
Just keeping a note for some common tasks that are not already handled by the skeleton
Thoughts? @3cp
Line 62 in 5842dce
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.
Create an option in the CLI to choose/make a custom syntax
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.
Many of the Aurelia gems are hidden and this is something really neat that would show it off.
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
Need to match what the doc showed.
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.
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
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
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?
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.
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.
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.
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
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?
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.
Once the new decorator change is released, update skeleton to remove legacy decorator config.
Discovered in #110, our shared css loading for shadowDOM only has webpack support.
// in src/main.js/ts
import shared from './shared.css';
Aurelia
.register(StyleConfiguration.shadowDOM({
// optionally add the shared styles for all components
sharedStyles: [shared]
}))
//...
In webpack.config.js, we have skipped style-loader if the css is loaded from src/main (issuer).
{
test: /\.css$/i,
// For style loaded in src/main.js, it's not loaded by style-loader.
// It's for shared styles for shadow-dom only.
issuer: /[/\\]src[/\\]main\.(js|ts)$/,
use: [ 'css-loader', postcssLoader ]
},
We don't have equivalent parcel/vite/gulp setup. Gulp is probably easiest to support. Vite maybe possible. No idea about parcel config.
I tested with parcel v2 alpha 1. It nows support ES6 export / import.
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
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
},
}
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?
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.