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

feat: support relative paths in svelte components and update test project to svelte 5 #8

Merged
merged 11 commits into from
Mar 9, 2025

Conversation

ThisIsFayad
Copy link
Contributor

@ThisIsFayad ThisIsFayad commented Mar 4, 2025

This PR adds and enhances multiple things:

  1. Adds support for relative paths in svelte components
    Now you are able to do the following in your mdsvex files:
<SampleComponent path="./my-image.png" />
  1. Migrates the test project to svelte 5
    Fix breaking changes when running test project and update it to the latest version
  2. Update README
    To reflect changes and polish for clearer installation and configuration instructions

Also, I would have added a LICENSE but I will leave that to you.

Resolves #3

Copy link
Owner

@mattjennings mattjennings left a comment

Choose a reason for hiding this comment

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

wow thanks a lot for doing this! I think my only concern is this now this checks every prop for a relative path string, but someone could have a prop="./abc" that isn't an asset.

While unlikely, it would probably handle most cases if we also checked that the path ends with a file extension.

@ThisIsFayad
Copy link
Contributor Author

I agree, I will look more into it and update it so it checks for the file extension too.

@ThisIsFayad
Copy link
Contributor Author

I have updated the regex so it only matches paths that have a file extension, and while I was at it, I added support for aliases and outside folders. So now you can do the following:

<SampleComponent path="./my-image.png" />
<SampleComponent path="../images/another-folder-image.png" />
<SampleComponent path="$lib/images/lib-image.png" />

I am not the best at regex, so I would appreciate it if you take a second look at it. You can check them here:
Component Regex
Path Regex

I added tests for this and updated the README to reflect it.

@ThisIsFayad
Copy link
Contributor Author

I have updated the Regex to allow for query params for tools such as vite-imagetools, so you can do the following:

<SampleComponent path="./my-image.png?format=webp" />

Here are the new regex expressions:
Component Regex
Path Regex

Copy link
Owner

@mattjennings mattjennings left a comment

Choose a reason for hiding this comment

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

Amazing! Thanks a ton for the work on this. Admittedly I don't use mdsvex at all anymore but these features have been requested a few times, so I'm super appreciative you took the time to do it. Will release this today!

@mattjennings mattjennings merged commit 10bbbc5 into mattjennings:main Mar 9, 2025
@ThisIsFayad
Copy link
Contributor Author

Thanks!

One last thing, I know there is a license in the package.json but can we add one to the project repo, so it is easier for people to see it.

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

Successfully merging this pull request may close these issues.

Doesnt work with custom components
2 participants