fix: Module `@microsoft/fast-element` has no exported member `InlineTemplateDirective`

[ontoneio]

🐛 Bug Report

In the /utilities/template-helper.js file there is an import by the name of InlineTemplateDirective which comes from the @microsoft/fast-element package that throws an error because it doesn't exist. InlineTemplateDirective is also not found in the documentation for @microsoft/fast-element

💻 Repro or Code Sample

1. Use import { InlineTemplateDirective } from "@microsoft/fast-element" in a javascript file node.js dev environment
2. Look for error: Module '"@microsoft/fast-element"' has no exported member 'InlineTemplateDirective'.
3. Inspect documentation to verify 'InlineTemplateDirective' is not exported from package. @microsoft/fast-element

🤔 Expected Behavior

Import doesn't throw typescript error and documentation on website shows type or method with this name.

😯 Current Behavior

No access to InlineTemplateDirective import

error message: Module '"@microsoft/fast-element"' has no exported member 'InlineTemplateDirective'.

💁 Possible Solution

Update the documentation and template-helpers.js file

🔦 Context

I was copying and studying some of the helper utilities and ran into this bug while experimenting with component composition

🌍 Your Environment

• OS & Device: Ubuntu-22.04 on Windows 11 WSL2
• Browser: Brave (Chromium)
• Version 1.62.165

[chrisdholt]

Thanks @ontoneio - Which version are you on of Fast Element? I'll check FE1, but if I recall that was added for the latest beta (which won't reflect yet in the docs).

[ontoneio]

Hi @chrisdholt ,

Thanks for the quick response. I am using @microsoft/fast-element": "1.12.0 currently Seems to be latest one. Published 9 months ago?

[chrisdholt]

Hi @chrisdholt ,

Thanks for the quick response. I am using @microsoft/fast-element": "1.12.0 currently Seems to be latest one. Published 9 months ago?

Yep - The directive is in that specific version though, it's only in the Beta as part of the v2 release. I am looking to propose promoting that to stable soon-ish. With that said, I'm not sure what it would take to backport that off the top of my head.

[ontoneio]

If it helps the InlineTemplateDirective is being used in this function:

export function staticallyCompose<TSource = any, TParent = any>(
    item: StaticallyComposableHTML<TSource, TParent>
): CaptureType<TSource, TParent> {
    if (!item) {
        return InlineTemplateDirective.empty;
    }
    if (typeof item === "string") {
        return new InlineTemplateDirective(item);
    }
    if ("inline" in item) {
        return item.inline();
    }
    return item;
}

I'm not exactly sure what this function accomplishes, but if I can replace it's functionality I think I will be alright. So any insight on this function would be greatly helpful.

[janechu]

Looks like this is solved in v2, I'll close this for now, let us know after launch of @microsoft/fast-element v2 (coming very soon) if this is still an issue.