Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Also allow using the modifier on SVG elements (types only) #235

Merged
merged 1 commit into from
Feb 12, 2024

Conversation

boris-petrov
Copy link
Contributor

Sorry, one more change. 😄

The lint:types task fails locally on my side (unrelated to this change). Not sure what I'm doing wrong but I hope here it will be fine.

cc @jelhan

@boris-petrov boris-petrov force-pushed the allow-svg-elements branch 2 times, most recently from 5d6f48f to 19c3166 Compare February 5, 2024 23:56
@@ -44,7 +44,7 @@ function compileStyles(
}

export interface StyleModifierSignature {
Element: HTMLElement;
Element: HTMLElement | SVGElement;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bwbuchanan proposed in #235 to fix the issue using ElementCSSInlineStyle. Did you tested that?

Suggested change
Element: HTMLElement | SVGElement;
Element: ElementCSSInlineStyle;

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, that also works, I've committed it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nope, actually it doesn't work, you can see the error in the CI. Ideas?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems to be a limitation of the types provided by ember-modifier. I reproduced in TypeScript playground: https://www.typescriptlang.org/play?#code/MYGwhgzhAEBCkFNoG8BQ0PWAewHYQBcAnAV2AOyIAoEQAuaAURAQFsFcCBKFAX1X6pQkGAGEAFgEsQAE2gIAHgQ4yY8CEjSYseQqXKUa9Ji3adRAZQsBJXCEm4EFggE8WPLdswQSABwTUtFwA3OiY-LxAA

I think we should rollback to your original solution HTMLElement | SVGElement. Or do you now how to workaround it, @bwbuchanan?

@bwbuchanan
Copy link

This is what I used in types/ember-style-modifier/index.d.ts:

import type { ModifierLike } from '@glint/template';

type StyleModifier = ModifierLike<{
  Args: {
    Positional: [styles: Record<string, string>] | [];
    Named: Record<string, string>;
  };
  Element: ElementCSSInlineStyle;
}>;

const style: StyleModifier;

export default style;

@bwbuchanan
Copy link

bwbuchanan commented Feb 7, 2024

Does it work if using the type ElementCSSInlineStyle & Element?

I think HTMLElement | SVGElement is too specific. It excludes MathMLElement, for example.

@boris-petrov
Copy link
Contributor Author

@bwbuchanan this seems to work, yes. But... is it really better? Why do you prefer/need ElementCSSInlineStyle over HTMLElement | SVGElement? I definitely think the latter is more readable/understandable.

@jelhan
Copy link
Owner

jelhan commented Feb 9, 2024

This is what I used in types/ember-style-modifier/index.d.ts:

import type { ModifierLike } from '@glint/template';

type StyleModifier = ModifierLike<{
  Args: {
    Positional: [styles: Record<string, string>] | [];
    Named: Record<string, string>;
  };
  Element: ElementCSSInlineStyle;
}>;

const style: StyleModifier;

export default style;

I think that does not check if the interface is compatible with ember-modifier's interface. Therefore not running into this bug.

@bwbuchanan
Copy link

I think that does not check if the interface is compatible with ember-modifier's interface. Therefore not running into this bug.

Yes, you are correct.

I think that the type ElementCSSInlineStyle & Element should correctly capture all elements that support CSS inline styles, and also conform to ember-modifier's interface.

At the moment, this is basically the same as HTMLElement | SVGElement | MathMLElement, but the latter type is too specific and would not be future-proof.

Copy link
Owner

@jelhan jelhan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's do the following:

  1. Land this with HTMLElement | SVGElement | MathMLElement.
  2. Explore if we could fix types in ember-modifier to allow ElementCSSInlineStyle as a follow-up.

@boris-petrov: If you have capacities adding a test for MathMLElement would be great. But I'm okay merging without that test.

@bwbuchanan: Thanks for your input. Highly appreciated!

@@ -44,7 +44,7 @@ function compileStyles(
}

export interface StyleModifierSignature {
Element: HTMLElement;
Element: ElementCSSInlineStyle & Element;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Element: ElementCSSInlineStyle & Element;
Element: HTMLElement | SVGElement | MathMLElement;

Copy link
Owner

@jelhan jelhan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just looked more deeply into intersection types. ElementCSSInlineStyle & Element seems to be a valid approach as well. @boris-petrov: I keep it up to you, which one we are going with.

@jelhan jelhan added the enhancement New feature or request label Feb 9, 2024
@jelhan jelhan changed the title Also allow using the modifier on SVG elements Also allow using the modifier on SVG elements (types only) Feb 9, 2024
@boris-petrov
Copy link
Contributor Author

I added a simple test for a math element - hopefully that tests this case. However, as you can see, it fails... 😄

Type 'Element' is missing the following properties from type 'ElementCSSInlineStyle': attributeStyleMap, style

Obviously math elements are treated as Element. Even cases like <math><mtext {{style display="none"}}>test</mtext></math> don't work. Not sure why... ideas?

Otherwise I left it using ElementCSSInlineStyle as @bwbuchanan is right that this is more future-proof.

@boris-petrov
Copy link
Contributor Author

Perhaps we can remove the Element at all? I think pretty much every element can be styled so...

@jelhan
Copy link
Owner

jelhan commented Feb 10, 2024

I must admit that I'm not an expert on that topic. But for me it looks like a bug in upstream typing of the MathMLElement. I tend towards landing it with Element. We can still explore if we can provide more detailed types in a follow-up.

@bwbuchanan
Copy link

I think this is a glint bug, typing <math> as Element instead of MathMLElement.

See: https://github.com/typed-ember/glint/blob/main/packages/template/-private/dsl/types.d.ts

@bwbuchanan
Copy link

I suggest that Element & ElementCSSInlineStyle is still the correct type for the element argument, but we'll need to disable the <math> test until glint is updated.

@jelhan
Copy link
Owner

jelhan commented Feb 10, 2024

I think this is a glint bug, typing <math> as Element instead of MathMLElement.

Are you sure that those types are defined by glint? I would expect glint to pull them in from a standard package.

I suggest that Element & ElementCSSInlineStyle is still the correct type for the element argument, but we'll need to disable the <math> test until glint is updated.

I prefer to use what allows all supported use cases for now. And make the types more strict in a follow-up as soon as we found a working solution.

@boris-petrov
Copy link
Contributor Author

Sorry for the delay. I left the Element key and set it to just Element. I also added a TODO for future readers.

@boris-petrov
Copy link
Contributor Author

Ah, no, Element: Element leads to Property 'style' does not exist on type 'Element'.. So it has to be without Element.

@boris-petrov boris-petrov force-pushed the allow-svg-elements branch 3 times, most recently from ccd8517 to fd89b6e Compare February 12, 2024 04:04
@boris-petrov
Copy link
Contributor Author

I also tried using HTMLElement | SVGElement | MathMLElement but that also fails the math test. So the only way I managed to "fix" it was to remove Element at all.

@jelhan
Copy link
Owner

jelhan commented Feb 12, 2024

I wasn't able to reproduce the issues with <math> element types in TypeScript playground. So it might be related to Glint. I feel we need to debug it more in detail.

I would recommend keeping this one to SVG support only. We have a clear path forward for that case.

I don't feel comfortable removing the Element key all together. I think Element & ElementCSSInlineStyle is the correct type for it. Let's land the SVG fix with that.

Let's pull the test for <math> in a separate PR, mark it as WIP and solve it independently without blocking this fix.

@boris-petrov
Copy link
Contributor Author

Done.

Copy link
Owner

@jelhan jelhan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks a lot!

@jelhan jelhan merged commit 9ce17f6 into jelhan:master Feb 12, 2024
15 checks passed
@boris-petrov boris-petrov deleted the allow-svg-elements branch February 12, 2024 16:35
@jelhan
Copy link
Owner

jelhan commented Feb 13, 2024

@jelhan
Copy link
Owner

jelhan commented Aug 4, 2024

I think this is a glint bug, typing <math> as Element instead of MathMLElement.

See: https://github.com/typed-ember/glint/blob/main/packages/template/-private/dsl/types.d.ts

@bwbuchanan Did you reported that bug to Glint?

@jelhan
Copy link
Owner

jelhan commented Sep 3, 2024

I think this is a glint bug, typing <math> as Element instead of MathMLElement.
See: https://github.com/typed-ember/glint/blob/main/packages/template/-private/dsl/types.d.ts

@bwbuchanan Did you reported that bug to Glint?

I reported it upstream here: typed-ember/glint#758

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants