Aurelia 2 and Microsoft FAST

I am looking for some help with using Microsoft FAST with Aurelia v2.
I have read through the information on the Aurelia docs here.
I have read through the information on the Microsoft FAST docs here.

It seems that there have been some changes to the Aurelia interfaces, that now mean that the suggested code for AureliaFastAdapter doesn’t work.

Does anyone have a working example of this that they can share here?

P.S. I am using:
@microsoft/fast-components@2.2.3
aurelia@2.0.0-alpha.12

1 Like

In the doc from MS FAST, it should be changed from

AppTask.with(IContainer).beforeCreate().call(container => {

to

AppTask.beforeCreate(IContainer, container => {

Maybe we should create a PR to FAST doc

From the code on the FAST site, there is also this error:

Module ‘“aurelia”’ has no exported member ‘IAttrSyntaxTransformer’.
If I change it to IAttrMapper it appears to compile.

1 Like

The IAttrTransformer has been renamed to IAttrMapper, it’s no longer transforming(mutating) stuff. Only maps.

Also, the code sample uses:
import {
FASTDesignSystemProvider,
FASTCard,
FASTButton
} from ‘@microsoft/fast-components’;

but I think that might have changed to lowercase, e.g.:
fastDesignSystemProvider,
fastCard,
fastButton

1 Like

Fast recently moved to v2, maybe there’ some changes on that side. It’d be great if you could help correct the doc there. @ben-girardet created the initial version of the doc, he’s been working with it.

Hi Stuart,

As @bigopon said I’ve been working with FAST and I did follow along with the new v2 of FAST. I confirm that the doc is out of date, I can help with fixing this.

Meanwhile I’ve also published a small wrapper that you can simply use and your Aurelia 2 application will be ready to work with FAST. It’s here:

This wrapper will:

And now with FAST you can change the prefix of the components if you need, the wrapper can also work with custom prefix.

Don’t hesitate to reach out to me if you have questions.

2 Likes

Hi @ben-girardet
Thank you for your quick response, and the work you’ve done in creating the wrapper.
For the purpose of testing, I have created a new Aurelia v2 project, using:
npx make aurelia
I used the default Typescript project.
I installed FAST using:
npm install --save @microsoft/fast-components @microsoft/fast-element lodash-es
I installed the Aurelia FAST adapter using:
npm install aurelia-fast-adapter
I made the changes to main.ts to Register the FASTAdapter
I changed the my-app.html to this:

  <fast-design-system-provider use-defaults>
    <fast-card>
      <h2>${message}</h2>
      <fast-button appearance="accent" click.trigger="onClick()">Click Me</fast-button>
    </fast-card>
  </fast-design-system-provider>

However when I run the project, the HTML is rendered without any styles.
Screen Shot 2021-07-21 at 10.12.09 AM

I’ve obviously missed a step - what do I need to do to get it to look pretty?
BTW - these are the versions of modules:
@microsoft/fast-components”: “2.2.3”,
@microsoft/fast-element”: “1.4.0”,
“aurelia”: “2.0.0-alpha.13”,
“aurelia-fast-adapter”: “1.0.3”,
“lodash-es”: “4.17.21”

1 Like

Update: I found this code snippet here:

import { DesignSystem } from "@microsoft/fast-foundation"
import { allComponents } from '@microsoft/fast-components';

DesignSystem.getOrCreate().register(
    Object.values(allComponents).map(definition => definition())
);

which now correctly shows all the components,
Screen Shot 2021-07-21 at 5.07.12 PM

But now I’m stuck with trying to change the colors, e.g. background color of the page. I’m guessing I am missing some basics around how to use FAST, so @ben-girardet - do you have any suggestions about that?

1 Like

UPDATE: For anyone following this thread, the solution was to add this in the style for the page:

body {
  background-color: var(--fill-color);
  color: var(--neutral-foreground-rest);
}

And the documentation on the FAST site has now been updated to reflect the current status of the project.

3 Likes