Organize by folder in Aurelia - aurelia

I want a folder structure like so:
src/energy/
-- energy.ts
-- energy.html
-- energyDataApi
-- more files...
How do you set this up in Aurelia?
I've tried the feature setup: http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/app-configuration-and-startup/6, but keep getting a 404 on http://localhost:5000/dist/energy.js. I'm using ASP.Net Core, TypeScript, SystemJs, Gulp from the https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-typescript-aspnetcore example.
main.ts
export function configure(aurelia: Aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.feature('energy');
index.ts
export function configure(config) {
config.globalResources(['./energy']);
}

Related

cannot import graphql query files in jest vue

I adding unit tests to my Nuxt/Vue project and I'm using Jest for unit testing, I'm fetching data from the server-side using Apollo Client and I have a problem with importing .gql files inside test files.
here is the query file names.gql
{
names {
created_at
id
name
published_at
updated_at
}
}
I'm importing the query inside Vue component like this
import namesQuery from "#/queries/names";
Test file:
import { mount } from '#vue/test-utils';
import Names from '#/components/Names';
describe('Names', () => {
test('is a Vue instance', () => {
const wrapper = mount(Names)
expect(wrapper.vm).toBeTruthy()
})
})
When I run the tests, it says:
SyntaxError: Unexpected token '{'
Please advise.
According to the graphql-tag documentation you need to use jest-transform-graphql to handle imports.
Add this to your jest config file:
"transform": {
"\\.(gql|graphql)$": "jest-transform-graphql",
}
and then let the party begin 😎

How to import and read a json file into Vue / Gridsome main.js

I'm working on a project that is using Vue / Gridsome and have a question about importing a config.json file with import './config.json' into the main.js file.
The config.json files is as follows:
{
"brand": "Name"
"company_no": "12345678"
"charity_no": "87654321"
"registered_address": "25 Riverdale House: London: SE13 7LW"
"contact_email": "support#name.com"
}
The main.js file is as follows:
export default function (Vue, { router, head, isClient }) {
Vue.component('Layout', DefaultLayout)
Vue.component('Page', PageLayout)
Vue.use(InfiniteLoading)
// General
head.meta.push({
name : 'description',
content : config.brand // I'd like to place the json value here
})
// ...
Will I need to install a plugin which parses the JSON to be able to read these properties, and how would I go about accessing the brand value as an example?
You can simply do something like:
import configJson from './config.json';
const config = JSON.parse(configJson);
Then you can access the data with config.brand for example.
More about JSON parse:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
EDIT
It works if you have webpack >= 2.0.0
https://webpack.js.org/loaders/json-loader/
Otherwise you could create a js file and export the json from there:
config.js
export default
{
// put json here
}

Skeleton Plugin / Module Not found Issue after build

I created a plugin and I uploaded to NPM by using this skeleton. When I try to use it the module is not found:
import 'aurelia-virtual-scroll';
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-virtual-scroll');
My plugin index.js file looks like below:
export function configure(config) {
config.globalResources('./aurelia-virtual-scroll');
}
In the same folder I have that aurelia-virtual-scroll.js file.
The error I display is the one below:
Error: Cannot find module './aurelia-virtual-scroll/aurelia-virtual-scroll'.
at webpackContextResolve....
Should this happen? Am I missing something?
Here is my base code for the plugin.
And here is the skeleton for webpack where I am trying to use it
your class needs to be imported/exported in the index and you don't need to import it in the main file.
import { PLATFORM } from 'aurelia-pal';
export { AureliaVirtualScroll } from './aurelia-virtual-scroll';
export function configure(config) {
config.globalResources(PLATFORM.moduleName('./aurelia-virtual-scroll'));
}

How to use installed modules in aurelia

I am using the skeleton-typescript sample and work through the documentation. I am trying to set up a value converter with numeral as it is shown in the docs.
import numeral from 'numeral';
export class CurrencyFormatValueConverter {
toView(value) {
return numeral(value).format('($0,0.00)');
}
}
I have installed numeral via jspm install numeral. It is added package.json within the jspm dependencies and I manually added it to bundles.js.
After saving the typescript file I get the error: Cannot find module 'numeral'.. What am I missing?
You need d.ts for numeral.js. and since there is no d.ts on Typings this can resolve problem:
$ jspm install npm:#types/numeral.
It works in my skeleton with value converters. Import can be done like import * as numeral from 'numeral';
You should add it in your configuration like:
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('numeral');
aurelia.start().then(() => aurelia.setRoot());
}
You will find the exact package names in your package.json:
jspm": {
"dependencies": {
...
"numeral": "xxxx"
...
}
}

How the Change Aurelia Source Directory From Src to App

Hopefully this is the simplest question in the world but I can't find it anywhere through google. The default structure from Aurelia came like this-
node_modules/
jspm_packages/
src/
app.html
app.ts
config.js
index.html
package.json
tsconfig.json
I don't like this because I don't want my buildable source files to live with dev files like package.json, tsconfig.json, and all of node_modules. Additionally, I'm using gulp so it becomes even more cluttered. Here is how I'd like to structure my app-
gulp-tasks/
node_modules/
src/
app/
components/
app.html
app.ts
bower_components/
jspm_packages/
config.js
index.html
gulpfile.js
package.json
tsconfig.json
But it's like Aurelia is hard coded to look for src/. I've updated my config to look for app/app.html but I think it's looking for src/app/app.html. How can I update Aurelia to use the project structure I want?
Update the build/paths.js:
var appRoot = 'src/app';
var outputRoot = 'src/dist/';
//... leave unmodified
Create a main.js file, inside src/app/:
//ES6/7
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging();
aurelia.start().then(() => aurelia.setRoot('app/app'));
}
//TypeScript
import {Aurelia} from 'aurelia-framework';
export function configure(aurelia: Aurelia): void {
aurelia.use
.standardConfiguration()
.developmentLogging();
aurelia.start().then(() => aurelia.setRoot('app/app'));
}
In the index.html set the main.js in the aurelia-app attribute. Like this:
<body aurelia-app="app/main">
Close gulp watch task (if running) and run it again.
Hope it helps!