I’ve been using aurelia-ux 0.3.0 for some time now and love the concept. Since the move to aurelia-ux 0.4.0 and the shift to monorepo I’m a little lost on how to install and use the library.
Could anyone provide a little exemple on how to install aurelia-ux 0.4.0 (core + 1-2 components) with aurelia-cli ?
Notice: the current npm documentation of #aurelia-ux/core package points to the showcase application - however this showcase still runs 0.3.0.
After some tests and research I've been able to install auralia-ux 0.4.0+
First you need to install the core and components
npm install #aurelia-ux/core
Then you can either install each component separately or together
npm install #aurelia-ux/button
npm install #aurelia-ux/input
npm install #aurelia-ux/...
# or
npm install #aurelia-ux/components
Then in the aurelia_project/aurelia.json you need to add the dependencies as such:
{
"name": "#aurelia-ux/core",
"path": "../node_modules/#aurelia-ux/core/dist/amd",
"main": "index",
"resources": [
"**/*.{css,html}"
]
},
{
"name": "#aurelia-ux/button",
"path": "../node_modules/#aurelia-ux/button/dist/amd",
"main": "index",
"resources": [
"**/*.{css,html}"
]
},
{
"name": "#aurelia-ux/input",
"path": "../node_modules/#aurelia-ux/input/dist/amd",
"main": "index",
"resources": [
"**/*.{css,html}"
]
},
or if you prefer the components variant (warning: I haven't tested this variant):
{
"name": "#aurelia-ux/core",
"path": "../node_modules/#aurelia-ux/core/dist/amd",
"main": "index",
"resources": [
"**/*.{css,html}"
]
},
{
"name": "#aurelia-ux/components",
"path": "../node_modules/#aurelia-ux/components/dist/amd",
"main": "index",
"resources": [
"**/*.{css,html}"
]
}
Finaly you must register the plugins in your main.js
aurelia.use
.plugin('#aurelia-ux/core')
.plugin('#aurelia-ux/button')
.plugin('#aurelia-ux/input')
or with the components variant (not tested)
aurelia.use
.plugin('#aurelia-ux/core')
.plugin('#aurelia-ux/components')
Related
I'm using yarn v1.22 and yarn workspace for building my application as a monorepo. Here is the package.json for our component library package. I want to use publishConfig to override the main field when I do npm publish or yarn publish. But when I tried to run those commands, the main field is no changed. Can anyone share some suggestions? Thanks.
{
"name": "components",
"private": false,
"version": "0.1.2",
"main": "src/index.ts",
"files": [
"dist"
],
"publishConfig": {
"main": "dist/index.js"
}
}
Background
I'm an absolute beginner in BuckleScript, and while I've downloaded packgages with npm before, I've never written a library.
Goal: installing my new package local package in my project using npm
I am trying to wrap some parts of the service worker api in JavaScript. I have started with a file bs-service-worker/src/ExtendableEvent.re like so
type _extendableEvent('a);
type extendableEvent_like('a) = Dom.event_like(_extendableEvent('a));
type extendableEvent = extendableEvent_like(Dom._baseClass);
[#bs.send] external waitUntil: (extendableEvent, Js.Promise.t('a)) => unit
= "waitUntil";
This compiles and produces ExtendableEvent.bs.js as expected.
Now, though, I'd like to go ahead and test what I have so far by creating a new npm project and importing what I have locally. I created a new sibling directory and did an npm install ../bs-service-worker. That succeeded, and then I did a sanity-check build on my new BuckleScript project. That also succeeded.
The issue: opening my module causes an error
When I add open ExtendableEvent; to Demo.re in the new project, I get the following error:
We've found a bug for you!
/home/el/workbench/bucklescript/bs-service-worker-examples/src/Demo.re 11:6-20
9 │
10 │ /**/
11 │ open ExtendableEvent;
12 │
13 │ /*
The module or file ExtendableEvent can't be found.
- If it's a third-party dependency:
- Did you list it in bsconfig.json?
- Did you run `bsb` instead of `bsb -make-world`
(latter builds third-parties)?
- Did you include the file's directory in bsconfig.json?
What I've tried
I'm guessing I'm misusing BuckleScript here instead of npm because npm is so widely adopted and well documented that I think I'd have found the problem, but I'm definitely not ruling out the possibility that I'm misusing npm, too.
I do have "bs-service-worker" listed as a bs-dependency. I also tried "../bs-service-worker" in case BuckleScript didn't like the virtual directory, but it didn't seem to help.
My npm run build command is indeed npx bsb -make-world.
More code:
bs-service-worker/bs-config.json
{
"name": "bs-service-worker",
"version": "0.1.0",
"sources": {
"dir" : "src",
"subdirs" : true,
"public": "all"
},
"package-specs": {
"module": "commonjs",
"in-source": true
},
"suffix": ".bs.js",
"bs-dependencies": [
],
"warnings": {
"error" : "+101"
},
"namespace": true,
"refmt": 3
}
bs-service-worker-examples/bsconfig.json
{
"name": "bs-service-worker-examples",
"version": "0.1.0",
"sources": {
"dir" : "src",
"subdirs" : true
},
"package-specs": {
"module": "commonjs",
"in-source": true
},
"suffix": ".bs.js",
"bs-dependencies": [
"bs-service-worker",
"bs-fetch",
],
"warnings": {
"error" : "+101"
},
"namespace": true,
"refmt": 3
}
bs-service-worker-examples/package.json
{
"name": "bs-service-worker-examples",
"version": "0.0.1",
"scripts": {
"build": "npx bsb -make-world",
"start": "npx bsb -make-world -w",
"clean": "npx bsb -clean-world"
},
"keywords": [
"BuckleScript"
],
"author": "Eleanor (https://webbureaucrat.bitbucket.io)",
"license": "MIT",
"devDependencies": {
"bs-platform": "^7.3.2"
},
"dependencies": {
"bs-fetch": "^0.6.1",
"bs-service-worker": "file:../bs-service-worker"
}
}
Easy Reproduction of the Issue
The fastest way to reproduce this would be to fork this repository and try to add it as a local npm dependency.
The problem seems to be that you have "namespace": true in your library's bsconfig.json, which will wrap all the modules in a namespace module with a silly generated name based on the name field. In this case it will be BsServiceWorker I think.
You could just remove that setting, or set it to false, but namespacing is a good idea to avoid collisions between modules from different libraries, or your own app, so I would recommend setting it to a custom, sensible name. For example:
"namespace": "ServiceWorker"
You can then open ExtendableEvent in the consumer project with:
open ServiceWorker.ExtendableEvent;
For more details, see the documentation on the namespace field.
I am developing some vue cli plugins like vuetify's to create a boilerplate to other developers, but sometimes I need to debug it. I am really tired of using console.log. How can I debug this kind of plugins especially with vscode?
Ok it's done.
I just added to main project's package.json > scripts object these lines (not the cli plugin's itself package.json)
"debug:cli": "node --inspect-brk --preserve-symlinks ./node_modules/.bin/vue invoke vue-cli-plugin-hello-world",
"debug:vueui": "node --inspect --preserve-symlinks ./node_modules/.bin/vue ui"
(Also you can use local vue cli service with ./node_modules/.bin/vue-cli-service path. Global vue cli service is different.)
When I trigger it via yarn run debug:cli or debug:vueui, I can debug them with chrome://inspect or vscode (cmd shift p > attach node process)
Also if you want to debug it with vscode directly, here is my vscode launch.json file.
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Debug my vue cli plugin",
"runtimeExecutable": "yarn",
"runtimeArgs": [
"debug:cli"
],
"console": "integratedTerminal",
"port": 9229
},
{
"type": "node",
"request": "launch",
"name": "Debug Vue UI",
"runtimeExecutable": "yarn",
"runtimeArgs": [
"debug:vueui"
],
"console": "integratedTerminal",
"port": 9229
}
]
}
I'm following the tutorial here http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial/4
and I added bootstrap as per the instructions and it all works according to plan
there's a config that I have to add to the vendor part of the aurelia.json file
"dependencies": [
...
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
},
...
]
but I like materialize-css and I figure I could just install materialize-css via npm and then change the bootstrap bit of the config to this
{
"name": "materialize-css",
"path": "../node_modules/materialize-css/dist",
"main": "js/materialize",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/materialize.css"
]
}
when I use this in app.html
<require from="materialize-css/css/materialize.css"></require>
the app blows up with a Unhandled rejection Error: Failed loading required CSS file: materialize-css/css/materialize.css
I can't work out why this is the case. To me it seems like I did a like for like swap of css frameworks
Nothing wrong with it.
Check the instructions http://aurelia-ui-toolkits.github.io/demo-materialize/#/installation in case missed a step
I am new to Aurelia and falling at the first hurdle.
I have created a new project using the aurelia cli and have selected to use less.
This works fine until I try to use bootstrap. I have installed bootstrap with npm which appears in node_modules/bootstrap/
This has the directory structure
dist fonts grunt Gruntfile.js js less LICENSE package.json README.md
There are css files in the dist directory.
In my template I do
The error I get is
Unhandled rejection Error: Failed loading required CSS file: bootstrap/css/bootstrap.css
How do I tell Aurelia where the bootstrap css files are and how to use them ?
Thanks
I found out one simple thing. Every time you modify aurelia.json file, you need to terminate au run --watch task, a start it again, and it will just work.
I did not find this in documentation.
Hope this helps.
There is solution for bootstrap downloaded from npm:
app.html:
<require from="bootstrap/css/bootstrap.css"></require>
package.json you have to add:
"overrides": {
"npm:jquery#^3.0.0": {
"format": "amd"
}
}
aurelia.json (aurelia_project folder) you have to add at the end of "app-bundle.js" bundle:
"dependencies": [
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
}
]
It should look like this:
"bundles": [
{
"name": "app-bundle.js",
"source": [
"[**/*.js]",
"**/*.{css,html}"
],
"dependencies": [
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
}
]
},
It works for me.
We are still working on the CLI's ability to import libraries into a project and configure them correctly for bundling. Remember, it is an alpha. We will have major improvements coming for this in the future. In the mean time, remember that you can always use traditional techniques for including libraries if you aren't sure what to do. So, I would just include the style tag in your html page and a script tag as well, just pointing at the location for the files in your packages folder.
This is a major use case for us, we just haven't worked out all the library import capabilities yet. We will address this soon.
Using Aurelia CLI
First, install the following in your project:
au install jquery#2
au install bootstrap
Second, in aurelia.json add this line in bundles:vendor-bundle.js
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": [
"jquery"
],
"resources": [
"css/bootstrap.css"
],
"exports": "$"
}
Then Add the following fonts after dependecies
"copyFiles": {
"node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2": "bootstrap/fonts",
"node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff": "bootstrap/fonts",
"node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf": "bootstrap/fonts"
}
Third, After setting import/install. Now you can reference it inside your app.html
<require from="bootstrap/css/bootstrap.css"></require>
Or simply add it as a globalResources inside main.ts
aurelia.use
.standardConfiguration()
.feature('resources')
.globalResources('bootstrap/css/bootstrap.css');
For more information on au install/import check it here or adding library in bundles.
I found that I had to change the boostrap css path in app.html to the one expected for Bootstrap 4, per a comment on Aurelia Discourse:
from this:
<require from="bootstrap/css/bootstrap.css"></require>
to this:
<require from="bootstrap/dist/css/bootstrap.css"></require>
If you are here in July 2019, the answer by #davidjmcclelland is what worked for me. After installing bootstrap, simple include require from=bootstrap/dist/css/bootstrap.css> in your app.html. No configurations required.