Because the cache is removed the link created with linkFor and the link in the template no longer match which causes the test to fail by trying to redirect the browser.

Repro: https://github.com/jeffhertzler/ember-link-repro

I know that 2.0.0 was marked as breaking and this was somewhat expected, but the example is wrong now and it's not clear to me exactly how you would write this kind of test anymore.

Something like this maybe?

import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { find, render, settled } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
import { setupLink, linkFor } from 'ember-link/test-support';

module('setupLink with rendering test', function(hooks) {
  setupRenderingTest(hooks);
  setupLink(hooks);

  test('it is a shortcut for accessing translations', async function(assert) {
    assert.expect(2);

    await render(hbs`
      <Link @route="foo" as |l|>
        <a
          data-test-link
          href={{l.url}}
          class={{if l.isActive "is-active"}}
          {{on "click" l.transitionTo}}
        >
          Link
        </a>
      </Link>
    `);

    assert.dom('[data-test-link]').hasAttribute(linkFor('foo').url);

    linkFor('foo').onTransitionTo(() => assert.step('transitionTo'));
    linkFor('foo').onReplaceWith(() => assert.step('replaceWith'));

    await click('[data-test-link]');

	assert.verifySteps(['transitionTo']);
  });
});

function linkFor(
  route: string,
  ...models: RouteModel[],
  { ['queryParams' | 'query']: QueryParams }?
): TestLink;

function linkFor({
  route: string,
  model?: RouteModel,
  models?: RouteModel[],
  query?: QueryParams
}): TestLink;

interface TestLink {
  // all these properties can be overridden and sync to all matching `Link` instances
  isActive: boolean;
  isActiveWithoutQueryParams: boolean;
  isActiveWithoutModels: boolean;
  isEntering: boolean;
  isExiting: boolean;
  url: string; // initialized with a guid value

  readonly routeName: string;
  readonly qualifiedRouteName: string; // alias for `routeName`
  readonly models: RouteModel[];
  readonly queryParams?: QueryParams;

  readonly onTransitionTo(listener: (event?: Event) => void): void;
  readonly onReplaceWith(listener: (event?: Event) => void): void;
}

Trying to use ember-link (version 1.0.1) in an Octane app and I get the following error:

Could not find module ember-link/components/link/template imported from sac-sac-mate/components/link/template

I don't think it matters but that's how I try to use it from the template:

<Link @route="players.player" @models={{array player}} as |link|>
  <a
   class="no-underline text-blue hover:text-blue-darker w-350px"
   href={{link.href}}>
   <PlayerCard @player={{player}} />
  </a>
</Link>

It seems that the problem comes from the addon's merged app tree but I'm not sure how to fix it (or whether that's indeed the problem).

When a link is clicked with Cmd / Ctrl it should open in a new tab.

The reason it does not work right now is that we always call event.preventDefault(), if @preventDefault is true / unset.

I think there's different solutions to this.

For one, we can add another boolean: @allowNewTab
If true (default) it will check whether event.currentTarget is an <a> element and if Cmd / Ctrl are pressed, in which case it will not call event.preventDefault(), even if @preventDefault is true.

In addition to this, we can also add another action openInNewTab, that opens href in a new tab.

Big thanks to @tchak13, who reported this via Twitter:
https://twitter.com/tchak13/status/1106149903317852160

Assertion Failed: ember-link.setupLink: Test helpers can only be used in integration tests

After upgrading to Ember 3.24 we've started seeing the above error message in a few of our tests. This is most likely related to emberjs/ember.js#19080, which now automatically sets up the router also in integration tests.

So, let's say this setup:

• We have a component that represents a page/screen
• The component is injected into two different hosts (let's say app and engine).
• The component will link to a particular page
• The component knows about that target route and what kind of parameters to pass in
• Yet the component doesn't know under which name the route is available in the current host

As routes are the connectivity layer - they have knowledge about route names but at route level the information about what parameters to be put in are not directly present.

FWIW is to curry links. Ie. the route passes in the link/name of the route and the component curries it with the parameters. I assume something like this code:

{{! route.hbs }}
<MyPage @detailLink={{link 'go-to-details'}} />

{{! component }}

<Button @link={{link @detailLink this.model.id}}>...</Button>

Now, this example looks like as if it is enough to pass in the route name, but also on route level you shall be able to pass generic parameters in as well, so within the component it is only to "finalize" the link.

thoughts?

https://twitter.com/joegaudet/status/1226939762356867073

Hi there 👋,

Thanks for this addon, that we use. :)
I think I found a bug. AFAICT the issue would be in ember-source. But I'm opening the issue here for tracking purpose.

A bug

Clicking a link build with the {{link}} helper, the transition is not executed in Edge <= 18.

Instead, I get the following error in the console:
Unable to get property 'router' of undefined or null reference
on the following line:

A possible cause

The bug only happens in Edge <= 18. I wonder if the code:

The default behavior of Ember's <LinkTo> is to keep the query parameters of parent routes.

<Link> does not auto-append any query parameters to the generated URL. They need to be passed in explicitly via @query. This is über annoying, when you want to use <Link> as a substitute for <LinkTo> in a scenario where a child route links back to a parent route.

<Link> and {{link}} should offer a @keepQuery option. It can take these values:

• none / falsy value (default, current behavior): No QPs of the current location are kept.
  • Only QPs provided via @query are appended.
• known: Only QPs of the current location at the time of invocation that are defined as known QPs in the current route hierarchy are kept.
  • QPs provided via @query override these QPs individually.
  • A null / undefiend value in the @query object will remove a kept QP.
• all: All QPs of the current location at the time of invocation are kept.
  • QPs provided via @query override these QPs individually.
  • A null / undefiend value in the @query object will remove a kept QP.
• tracked-known: Only QPs that are defined as known QPs in the current route hierarchy are kept.
  • When the the current route / QPs change, the url will be updated live.
  • QPs provided via @query override these QPs individually.
  • A null / undefiend value in the @query object will remove a kept QP.
• tracked-all: All QPs of the current location are kept.
  • When the the current route / QPs change, the url will be updated live.
  • QPs provided via @query override these QPs individually.
  • A null / undefiend value in the @query object will remove a kept QP.

Unresolved Questions

none is the current behavior. Changing this would be a breaking change IMO, so I'd make it the default, too. Do we want to keep it this way though or switch to a different default?

Assuming we want to switch, we could raise a deprecation warning, prompting the user to explicitly chose none or a different behavior.
Should the default be configurable or should we allow users to opt-in to the new default mode prior to upgrading to the next major version?

Do the names used here make sense? @keepQuery, none, known, all, tracked-*, untracked-*?

Do we need the tracked-* variants? Or do we not need the untracked variant? Should the untracked variants also be prefixed with untracked-*? Or should the tracked-* variants instead have no prefix?

With release-it and lerna-changelog this reads in the information from the root package.json (such as version and repository).

When the next version is released only the version number from ember-link/package.json is incremented but root package.json stays as is. This will be problematic for further releases.

Also publishing through github actions has some trouble with npm auth.

Find a better solution for this.

This makes no sense when used directly in the template, like:

<Link @external="https://example.com" as |l|>
  <a href={{l.url}} {{on "click" l.transitionTo}}>
    Example
  </a>
</Link>

However, it becomes very useful when passing Links around, e.g. to build a navigation menu, because you can then easily use the same primitive in a common code path:

<NavigationMenu
  @navItems={{array
    (hash label="Top Sellers" link=(link "top"))
    (hash label="Categories" link=(link "categories"))
    (hash label="Shopping Cart" link=(link "cart"))
    (hash label="Legal" link=(external-link "/legal"))
  }}
/>

{{#each @navItems as |item|}}
  <a href={{item.link.url}} {{on "click" l.transitionTo}}>
    {{item.label}}
  </a>
{{/each}}

I'm not sure about the exact API yet.

Another thing: Usually you'll want external links to open in a new tab. This should not need to be defined at the "call site" where the Link is used on an <a> element, but rather where the Link is defined.

Something like this maybe? #289

<NavigationMenu
  @navItems={{array
    (hash label="Top Sellers" link=(link "top"))
    (hash label="Categories" link=(link "categories"))
    (hash label="Shopping Cart" link=(link "cart"))
    (hash label="Legal" link=(external-link "/legal" newTab=true))
  }}
/>

Types are not working on "ember-link": "^3.0.0",

Currently using: "typescript": "5.1.6",

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Datasource	Name	Replacement PR?
npm	@babel/plugin-proposal-class-properties

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): pin dependencies (@gossi/config-eslint, @gossi/config-prettier, @gossi/config-template-lint, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, ember-template-lint, eslint, eslint-plugin-ember, eslint-plugin-qunit, prettier)
• chore(deps): pin dependencies (@types/qunit, @types/rsvp, @types/sinon)
• chore(deps): pin dependencies (concurrently, ember-qunit, ember-source-channel-url, ember-try, qunit, qunit-dom)
• chore(deps): update babel monorepo (@babel/core, @babel/eslint-parser, @babel/runtime)
• chore(deps): update dependency typedoc to ^0.26.0
• chore(deps): update node.js to v20.16.0
• chore(deps): update actions/configure-pages action to v5
• chore(deps): update dependency @ember/string to v4
• chore(deps): update dependency @release-it-plugins/lerna-changelog to v7
• chore(deps): update dependency ember-try to v3
• chore(deps): update dependency sinon to v18
• chore(deps): update framework dependencies (major) (@embroider/addon-dev, @embroider/test-setup, ember-resolver)
• chore(deps): update lint dependencies (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser, ember-template-lint, eslint)
• 🔐 Create all rate-limited PRs at once 🔐

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• chore(deps): lock file maintenance

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): pin dependencies (@babel/core, @babel/eslint-parser, @babel/plugin-proposal-class-properties, @babel/plugin-proposal-decorators, @babel/preset-typescript, @babel/runtime, @ember/string, @ember/test-helpers, @glimmer/env, @glint/template, @release-it-plugins/lerna-changelog, @tsconfig/ember, ember-cli-babel, ember-cli-htmlbars, ember-sinon-qunit, loader.js, p-defer, release-it, rollup-plugin-copy, rollup-plugin-ts, sinon, typedoc, typedoc-plugin-markdown, typedoc-vitepress-theme, typescript, vitepress, webpack)
• chore(deps): pin dependencies (@ember/optional-features, @embroider/addon-dev, @embroider/test-setup, @glimmer/tracking, ember-disable-prototype-extensions, ember-load-initializers, ember-resolver, ember-source)
• chore(deps): pin dependencies (broccoli-asset-rev, ember-auto-import, ember-cli, ember-cli-dependency-checker, ember-cli-inject-live-reload, ember-cli-sri, ember-cli-terser)
• chore(deps): update dependency release-it to ^17.6.0
• chore(deps): update dependency rollup to v4.21.0
• chore(deps): update actions/deploy-pages action to v4
• chore(deps): update actions/upload-pages-artifact action to v3
• chore(deps): update dependency p-defer to v4
• chore(deps): update dependency ubuntu to v22
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

I assume this is because these exports are actually TS interfaces and should be exported using export type?

WARNING in ./node_modules/ember-link/index.js 1:0-75
export 'LinkParams' (reexported as 'LinkParams') was not found in './link' (possible exports: UILink, default, isQueryParams)
 @ ./components/dropdown/actions/link/index.js 13:0-34 16:117-121
 @ ./tests/integration/components/dropdown/actions/link-test.js 5:0-74 7:9-11
 @ ./assets/test.js 32:13-85

WARNING in ./node_modules/ember-link/index.js 1:0-75
export 'UILinkParams' (reexported as 'UILinkParams') was not found in './link' (possible exports: UILink, default, isQueryParams)
 @ ./components/dropdown/actions/link/index.js 13:0-34 16:117-121
 @ ./tests/integration/components/dropdown/actions/link-test.js 5:0-74 7:9-11
 @ ./assets/test.js 32:13-85

We're getting the following console error when using the pre-octane version in an Ember 3.9 + Decorators v6 project:

Error: Assertion Failed: computed decorators must return an instance of an Ember ComputedProperty descriptor, received [object Function]

I searched the discord and it seems that this is related to the usage of e-decorators v5 in this addon.

Are there any plans for updating the pre-octane version? :) If not, I totally understand. We can always use the ember-router-helpers as an (more verbose) alternative.

The code shown in #271 would be nicer, if Link had a toString() method, that returns the url.

Then you could do:

<Ui::Button
-  @link={{link "signup" query=(hash callback=(get (link "checkout") "url"))}}
+  @link={{link "signup" query=(hash callback=(link "checkout"))}}
>
  Please sign up first to continue
</Ui::Button>

🐞 Describe the Bug

In a rendering test the link helper always return an emptyhref.

🔬 Minimal Reproduction

  test('href test', async function (assert) {
    assert.expect(1);
    await render(hbs`
      {{#let (link route="login") as |l|}}
        <a href={{l.url}}>Login</a>
      {{/let}}
    `);
    assert.dom('a').hasAttribute('href', `/login`);
  });

😕 Actual Behavior

Element a has an empty attribute "href".

🤔 Expected Behavior

Element a has attribute "href" with value "/login"

🌍 Environment

• Ember: 3.25.3

➕ Additional Context

emberjs/ember.js#19408

At the moment, only paramNames on the leaf RouteInfo instance is used here:
https://github.com/buschtoens/ember-link/blob/main/ember-link/src/services/link-manager.ts#L100

But I think we need to traverse up the entire tree (using the parent property) to collect all models?

Otherwise, Ember's router throws an error when creating links using the fromURL option, and providing a URL with e.g. multiple dynamic segments.

It would be really helpful to see a "Why" section, to describe the motivation and context better. Not a criticism, but feedback from someone who hasn't experienced the pain, which motivated this add-on, this doesn't quite understand why and when this is the better choice.

https://twitter.com/polishprince/status/1226977951511699456

It would be great, if the {{link}} helper could support URLs that are recognizable by the router.

This would make {{link}} a more usable primitive in scenarios where a "serialized" URL has to be passed, e.g. as a callback query parameter.

{{! origin route }}
<Ui::Button
  @link={{link "signup" query=(hash callback=(get (link "checkout") "url"))}}
>
  Please sign up first to continue
</Ui::Button>

{{! "signup" target route }}
<Ui::Button
  @link={{link fromURL=callback}}
>
  Finish registration
</Ui::Button>

As we figured, we weren't able to use setupLink() from within engines. @buschtoens did a run-down of this (credits to him, I'm just writing it down):

We are hit by this: emberjs/ember.js#11173 (comment)

places the normal LinkManagerService in the container.cache and container.factoryManagerCache.
Then the following owner.unregister(…) apparently only removes the registration, but not the instance in the container.cache.

There fix was added to ApplicationInstance, but the owner in our test is not a fully-fledged ApplicationInstance: https://github.com/emberjs/ember.js/pull/12680/files

This seems to be an upstream bug in @ember/test-helpers, here is the trace:

We don’t have an application in render tests, but a resolver, so we hit L57 in
https://github.com/emberjs/ember-test-helpers/blob/a4f710420e8dfba1a4245981483d7cbb5dcc865e/addon-test-support/%40ember/test-helpers/build-owner.ts#L41-L60

Which then builds a registry and owner on its own terms.
https://github.com/emberjs/ember-test-helpers/blob/a4f710420e8dfba1a4245981483d7cbb5dcc865e/addon-test-support/@ember/test-helpers/-internal/build-registry.ts

This of course lacks the unregister patch:
https://github.com/emberjs/ember.js/blob/0da7fedd3767668e7fb01b50757f1a636782fb54/packages/%40ember/engine/instance.ts#L162-L167

The <LinkTo> component is backed by the private -routing service, which has explicit short-circuit logic to detect when it is being run in an integration / render test.

When you use <Link> in a render test, you currently get this error:

Uncaught (in promise) TypeError: Cannot read property 'generate' of undefined
    at Class.generate (router.js:479)
    at RouterService.urlFor (router.js:200)
    at LinkComponent.get href [as href] (component.js:78)
    at getPossibleMandatoryProxyValue (metal.js:2532)
    at get (metal.js:2612)
    at glimmer.js:507
    at track (metal.js:2498)
    at RootPropertyReference.compute (glimmer.js:506)
    at RootPropertyReference.value (glimmer.js:374)
    at ComponentElementOperations.flush (runtime.js:1584)

This is because RouterService#urlFor delegates to the system's Router#generate method, which expects _routerMicrolib to be initialized, which it is only in application / acceptance tests.

/cc @Charizard

Hi, thank you for writing this addon.

It seems great and exactly what I need to be able to do conditional classnames like this example which is really handy for functional CSS, like tailwind.

I've encountered what seems like a bug to me, though, when I include a loading substate.

Assuming I have a simple nested route like this...

// routes
stations.js
stations
│   station.js

// templates
stations.hbs
stations
 │   station.hbs

And in my stations.hbs template I set an active link like this:

<Link @route="stations.station" @model={{station.id}} as |l|>
  <a
    href={{l.href}}
    class="{{if l.isActive "active-class"}}"
    {{on "click" l.transitionTo}}
  >
    {{station.name}}
  </a>
</Link>

Then the active-class is displayed as expected.

But, if I introduce a loading substate like this...

// routes
stations.js
stations
│   station.js

// templates
stations.hbs
stations
 │   loading.hbs
 │   station.hbs

Then the active-class is not displayed once the station route has resolved.

Worth noting that this is, I think, due to Ember Data Storefront as I've noticed that if I use findAll and findRecord methods in the models of the routes, instead of Ember Data Storefront's loadRecords and loadRecord, then it does still work.

But on the other hand using the <LinkTo> component still works as expected whichever approach for loading the model data is used.

<LinkTo @route="stations.station" @model={{station.id}} class="">
  {{station.name}}
</LinkTo>

For the moment I'm going to stick with and some non-functional CSS but if this is something you consider a bug then I'd be happy to try to help resolve it.

Thanks.

The Problem

ember-link provides a primitive to pass around. It's a bit of fuzzy what it is exactly. It can be seen as just a DTO and on the other hand provides operations how to deal with the link itself (such as transitionTo() and replaceWith() methods).

Using them together is fine, when the owner of the primitive is also in control of how a link get's attached to the UI. This no longer works when the two split (ie. when the primitive is passed around).

A Solution

In order to make it work, this needs handling on two sides of the problem:

1. The owner needs to express his wished behavior on the primitive itself
2. On the attaching sides, it needs one interface, the implementor will use - and behind that interface the expressed behavior from (1) is executed.

A sample for (1) - making up some possibly imaginery code (as I don't have the full and correct API in my head):

this.linkManager.createUILink({ route: 'target-route', behavior: { replaceWith: true });
this.linkManager.createUILink({ url: 'https://example.com', behavior: { openInNewWindow: true });

Onto the second part of the solution (2). Let's say, this we received our link in a component as @link argument:

<a href={{@link.url}} {{on "click" @link.open}} {{link-attributes @link}}>Click me</a>

There are two additions here:

• @link.open - which would be used to either call transitionTo() or replaceWith() on the link
• {{link-attributes}} - which would put all attributes onto the element as needed (e.g. target="_blank" to open in a new window)

This is partially the idea from #333 - yet a little bit more exhaustive. First, it is good to have these multiple pieces as building blocks (see below on thiird party implementors). There maybe can also be just one modifier that handles all of the above @link related markup in one place.
As implementor, using that interface would give me the chill, that I attached the link properly to my markup.

For third party implementors, the exhaustive building blocks might be more suitable. See here: https://github.com/gossi/ember-command/blob/9101687488c9c20e4c7e9510632f44c38cd88a1f/addon/components/commander/index.hbs

When using the stable TypeScript Types in Ember 5.1 there is an issue with the types for ember-link:

node_modules/ember-link/dist/services/link-manager.d.ts:39:35 - error TS2315: Type 'PublicTransition' is not generic.

39     get currentTransitionStack(): Transition<unknown>[] | undefined;

Relates to #6 (support for Cmd / Ctrl click).

Ideas:

• (link "foo" newTab=true)
• (link "foo" target="_blank"), support for generic targets?
• It would be nice, if target could be applied to the <a>.
  • A modifier for jointly applying all attributes and click listener?
  • target property on Link / UILink?
  • Should the click handler respect the target attribute of the <a> tag?
• Should we allow the "call site" to opt-out?
  • We could use transitionTo / replaceWith as an explicit opt-out.
  • Add a more generic navigate.
  • Relation to #290 (external links)?

When running a project with typescript v4 I'm getting these errors:

... is defined as an accessor in class 'Link', but is overridden here in 'TestLink' as an instance property.

../../node_modules/ember-link/test-support/test-link.d.ts:4:5 - error TS2610: 'isActive' is defined as an accessor in class 'Link', but is overridden here in 'TestLink' as an instance property.

4     isActive: boolean;
      ~~~~~~~~

../../node_modules/ember-link/test-support/test-link.d.ts:5:5 - error TS2610: 'isActiveWithoutQueryParams' is defined as an accessor in class 'Link', but is overridden here in 'TestLink' as an instance property.

5     isActiveWithoutQueryParams: boolean;
      ~~~~~~~~~~~~~~~~~~~~~~~~~~

../../node_modules/ember-link/test-support/test-link.d.ts:6:5 - error TS2610: 'isActiveWithoutModels' is defined as an accessor in class 'Link', but is overridden here in 'TestLink' as an instance property.

6     isActiveWithoutModels: boolean;
      ~~~~~~~~~~~~~~~~~~~~~

../../node_modules/ember-link/test-support/test-link.d.ts:7:5 - error TS2610: 'isEntering' is defined as an accessor in class 'Link', but is overridden here in 'TestLink' as an instance property.

7     isEntering: boolean;
      ~~~~~~~~~~

../../node_modules/ember-link/test-support/test-link.d.ts:8:5 - error TS2610: 'isExiting' is defined as an accessor in class 'Link', but is overridden here in 'TestLink' as an instance property.

8     isExiting: boolean;
      ~~~~~~~~~

../../node_modules/ember-link/test-support/test-link.d.ts:9:5 - error TS2610: 'url' is defined as an accessor in class 'Link', but is overridden here in 'TestLink' as an instance property.

9     url: string;
      ~~~

Checking https://www.npmjs.com/package/ember-link?activeTab=explore the generated typescript definition file is not compatible with TS v4: test-support/test-support/test-link.d.ts

It should actually be like this:

import Transition from '@ember/routing/-private/transition';
import { Link } from 'ember-link';

export default class TestLink extends Link {
    get isActive(): boolean;
    get isActiveWithoutQueryParams(): boolean;
    get isActiveWithoutModels(): boolean;
    get isEntering(): boolean;
    get isExiting(): boolean;
    get url(): string;
    onTransitionTo?(): void;
    onReplaceWith?(): void;
    get qualifiedRouteName(): string;
    transitionTo(event?: Event): Transition;
    replaceWith(event?: Event): Transition;
    private _preventTransitionOut;
    private _createDummyTransition;
}

Can we pls either patch the test-link.d.ts and publish new version or upgrade typescript to v4?

ember-link is becoming more and more problematic in terms of types (it affects the builds of packages using this one) and also writing tests in v2 addons is becoming problematic. I see a weird instanceof Link problem, which turns false, even though both are instances of links (I don't know more).

Here is an idea for the roadmap:

Version 2: Deprecations

• Deprecate <Link> component in favor of (link) helper
• Deprecate UILink interface

Version 3

• Migrate into v2 addon
• Glint support with template-registry and signatures (should fix all typing problems) #772
• Add Behavior to Link in order to remove UILink #770
• Remove UILink in favor of only Link (and TestLink) #771
• Export all relevant things from index.ts
• Remove <Link> component #747
• Documentation

I was wondering if a modifier for situations like this would be a good idea:

<MyComponentWhereIDontKnowTheElementFor {{link ...}}/>

the {{link}} modifier would turn the element into an <a> tag and apply its values. Passing around the link helper as primitive would still work as the modifier would take the helper as valid input although it really looks stupid: {{link (link ...)}} 😂

The idea: With only the helper each component need to be made aware of a link passed in as helper and then handle the logic of applying it or pass it down. The modifier eliminates this component-specific-handling and applies it to where it is attached, some examples:

<Button>foo</Button> 
-> <button class="_button1234">foo</button>

<Button {{link ...}}>foo</Button> 
-> <a href="..." class="_button1234">foo</a>

<Card>bar</Card> 
-> <div class="_card1744">bar</div>

<Card {{link ...}}>bar</Card> 
-> <a href="..." class="_card1744">bar</a>

WDYT?

Hi, would it be possible to cut a new release that contains this PR?
This would avoid people having to use resolutions/overrides.