I'm building a library of aurelia custom elements for use by several different aurelia apps and am running into trouble getting the custom element html hooked into the app bundle properly with the CLI process.
I'm currently thinking that the library will be part of package.json and thus listed under node_modules/my-lib. What should the delivered .html format be
<template>...</template>
or should it be delivered in required format
define('text!my-lib/component1.html', ['module'], function(module) { module.exports = "<template>\r\n ...
If the former - what do I put in aurelia.json to get it to be included correctly in the vendor-bundle?
If I do resouces['../node_modules/my-lib/**/*.html'] in my-lib dependency section - it gets included as html in a js file which throws an error.
If I add as source to the vendor-bundle or using my own bundle my-lib-bundle.js
"source": [
"[../node_modules/my-lib/**/*.js]",
"../node_modules/my-lib/**/*.{css,html}"
],
Nothing gets included then except the 'main' listed in the one dependency.
If I add to the markupProcess (which seems more linked to the app and not a library)
"markupProcessor": {
"id": "none",
"displayName": "None",
"fileExtension": ".html",
"source": [
"src\\**\\*.html",
"..\\node_modules\\my-lib\\**\\*.html"
]
},
I get the html correctly added to app-bundle but has the wrong path because it includes the '../node_modules' in the define so it's not found when the app attempt to use it.
I'm not using the CLI to build my lib as I want the app to only include pieces it uses. So the JS is built and delivered in AMD format, but I wasn't sure the process to go through with HTML?
Suggestions?
There is a skeleton plugin repo # github
https://github.com/aurelia/skeleton-plugin
With build scripts and all
Related
I am investigating the features of Lerna to try and speed up our bootstrap process which currently takes quite a long time.
When referring to bootstrap here I am referring to the process of running npm install with hoisting and linking local packages together
One of the things I am trying to do is only build the packages that I have changed in a branch. Take this example project
Package CLI
Package Header
Package Footer
Package WebApp : Depends on Header & Footer
With this scenario what I want to do in CI is:
If I only change the CLI project then only the CLI project should go through bootstrap -> build -> test
Only changing Header should do the process for Header, Footer and WebApp because we want to ensure the dependency hasn't broken anything
Only changing Footer should do the process for Header, Footer and WebApp because we want to ensure the dependency hasn't broken anything
Only changing WebApp should do the process for Header, Footer and WebApp because we need to use the dependencies to check WebApp
The first thing I have looked at is using the jobs affected by a PR. This works for executing a script defined in the package.json, but only for the package itself and not its dependencies. In my example if I change CLI then the job only runs in the CLI package as I want, but if I change WebApp then it only runs in WebApp and it doesn't run on the dependencies Header and Footer. This is only for running an npm script rather than bootstrap anyway so I am not even sure this is the correct thing to be looking into.
Secondly I was looking into using task pipelines. So for example in the package.json of the WebApp I have
"dependencies": {
"header": "*",
"footer": "*"
}
And then in the Lerna.json I have
{
"version": "3.0.0",
...
"targetDefaults": {
"build": {
"dependsOn": [
"^build"
]
},
"test": {
"dependsOn": [
"^build"
]
}
},
"useNx": true
}
As far as I can tell though when I run test on WebApp using $ npx lerna run test --scope=webapp I can't see any output relating to it doing anything with it's dependencies. Additionally, I still think this doesn't account for the bootstrap process needed before the build step.
I am trying to reduce the size of my SPA build, which gets build using vue-cli build. I am using Chart.js and after building the application, I ran webpack-bundle-analyzer and it shows Chart.js with it's full size, and not chart.min.js.
What I am expecting is that it would use /dist/chart.min.js. I am not understanding this correctly, or is it actually using the non-minified file?
I got around to having another look at this and this is simply because vue-chartjs needs chart.js as peer dependency and is thus not taking care of anything in my side of the build step.
Related: https://github.com/apertureless/vue-chartjs/issues/249
The fix is to configure it accordingly in the webpack config:
resolve: {
alias: {
'chart.js$': 'chart.js/dist/Chart.min.js',
},
},
I'm looking for the best way to arrange my code base with common resources shared between different projects. I have three aurelia apps. In each one, I added some resources in its resources folder (custom elements, attributes, etc). When I needed one already wrote in another project, I just pasted it. Now I have time to refacto, I'd like to move all this resources in a dedicated repository. Then I want to be able to pick only the resources I need in each project.
I've tried by putting all me resources in a repo with a gulp build task from aurelia skeleton which allow me to build AMD modules of all my modules. Then, I've been able to load some modules individually by adding them in aurelia.json. For exemple for an attribute:
{
"name": "aurelia-resources-progress-button",
"path": "../node_modules/SHG-aurelia-resources/dist/amd/resources/attributes",
"main": "progress-button"
}
or a custom element:
{
"name": "aurelia-resources-avatar-upload",
"path": "../node_modules/SHG-aurelia-resources/dist/amd/resources/elements/avatar-upload",
"main": "avatar-upload",
"resources": [
"avatar-upload.html",
"avatar-upload.css"
]
}
It worked like a charme but it failed for a value converter which import a module from relative path.
The file is located in :
"projectRoot/node_modules/SHG-aurelia-resources/dist/amd/resources/value-converters/duration-format.js",
it import from '../utils./strings'
and
I get the following error when I au run:
"Error: ENOENT: no such file or directory, open
'/Users/hadrien/Documents/dev/SportHeroes/united-heroes/src/resources/utils/strings.js'".
The strange thing is when I require a relative module from a template (like in my progress-button custom attribute) there is no problem.
I don't want to make a plugin because I don't want to load every modules of my repo. What I'd like, if it is possible, would be to be able to set .feature('../node_modules/path/resources') and load them like I load my local resources.
What should I do ?
I'm answering the question as reworded in the comments above.
If you have an npm package, you can simply require in resources from it using a require element. This npm package could package itself as a plugin, and you simply choose not to load it that way as you only want a subset up the stuff it provides.
I've created a set of sample projects that show this off: https://github.com/AshleyGrant/sample-app-so41961759
This application has a dependency on https://github.com/AshleyGrant/sample-resources-so41961759/
This dependency packages itself as a plugin, but it also can be consumed piecemeal as I am doing in the application by only using one of the two resources the plugin has. Note that the other resource isn't loaded since I'm not using it.
This is what it looks like in the app when I pull in a resource from within the dependency:
<template>
<require from="sample-resources-so41961759/custom-elements/my-echo"></require>
<h1>${message}</h1>
<my-echo say="Echo!"></my-echo>
</template>
Just getting started with KrakenJS. After running the generator and looking at the config.json I notice it has the "static" middleware defined as:
"static": {
"module": {
"arguments": [ "path:./.build" ]
}
}
I have two issues/questions:
After running grunt build I see the browserify output in the /.build folder, but when I navigate to /js/app.js it appears to load the file from the /public folder. Shouldn't it be from the /.build folder?
With Express 4+ shouldn't this actually be serve-static?
I can't help but think I'm missing something.
Thanks!
As I guessed, I was missing something.
I dug into the kraken source a bit more and found that the core config defines the "name" property on static as "serve-static", so it is in fact correct when it merges with the config.json in my app.
The other issue I was having with loading from the incorrect folder was because inside the development.json config file the 'kraken-devtools' middleware is configured with the copier compiler, so when the file is requested at runtime it copies it from the /public folder into the /.build folder, overwriting the output from grunt build.
I have an old javascript library with methods I need to use from within my spine app. How do I include it for use within spine?
You need to include the library in your slug.json in the "libs" section like so:
{
"dependencies": [
"jqueryify",
...
],
libs: [
"path/to/old/javascript/file.js"
]
}
This will tell Hem to package files under "lib" first in your application.js. You should have access to the methods in your Spine classes. Make sure you include the extension (".js") on libs and path them relative to the root of your app. You can see the Hem docs for more info.
Depends on your pipeline for assets and your platform. If just the old library to a page, use a script tag:
<script type="text/javascript" src="my_old_library.js"></script>
This is likely the same way you included spine.js on your page.