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.

Sign up for GitHub

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

Jump to bottom

How to use your library as esm module? #63

Closed
viT-1 opened this issue Nov 27, 2019 · 10 comments
Closed

How to use your library as esm module? #63

viT-1 opened this issue Nov 27, 2019 · 10 comments
Labels
enhancement

Comments

@viT-1
Copy link

viT-1 commented Nov 27, 2019 •
edited
Loading

I'm trying to use through ttsc & typescript-transform-paths
with paths in tsconfig.json

{
"wretch": ["https://cdn.jsdelivr.net/npm/[email protected]/dist/index.umd.js"]
}

but if I resolve wretch, any other related from index.umd.js are not resolved,
cause of typescript-transform-paths resolved imports only in local app code, not node_modules =(

Do you plan to publish esm version?
@elbywan
Copy link
Owner

elbywan commented Nov 27, 2019 •
edited
Loading

Hi @viT-1,

https://cdn.jsdelivr.net/npm/[email protected]/dist/index.umd.js is only the entry point.

This is the full bundle: https://cdn.jsdelivr.net/npm/[email protected]/dist/bundle/wretch.js

@viT-1
Copy link
Author

viT-1 commented Nov 27, 2019

I'm trying to declare path for esm loading (tsconfig paths) as
https://cdn.jsdelivr.net/npm/[email protected]/dist/bundle/wretch.min.js
And no success, cause it is CommonJs module, not esm =( Got error:
The requested module 'https://cdn.jsdelivr.net/npm/[email protected]/dist/bundle/wretch.min.js' does not provide an export named 'default'

But even I "hack" my transpiled ts to js files with import wretch from to import * as wretch from still haven't success with different error: "TypeError: wretch is not a function"
with ts code:

import wretch from 'wretch';
wretch(this.data.href)
	.get()
	.json(json => {
		console.log(json);
	});

@viT-1
Copy link
Author

viT-1 commented Nov 27, 2019

My project for example using vue with SystemJS for production & esm for dev testing. I am using vue esm version there.

@elbywan
Copy link
Owner

elbywan commented Nov 27, 2019 •
edited
Loading

I'm sorry but I have a hard time understanding the issue. wretch is already published as an esm module.

<!DOCTYPE html>
<html>
<body>
    <img id="sprite"></img>
    <script type="module">
        import wretch from 'https://unpkg.com/[email protected]/dist/index.js'

        const imageTag = document.getElementById("sprite")
        wretch('https://pokeapi.co/api/v2/pokemon/pikachu/')
            .get()
            .json(pikachu => {
                imageTag.src = pikachu.sprites.front_default
            })
    </script>
</body>
</html>

Capture d’écran 2019-11-27 à 13 47 54

@viT-1
Copy link
Author

viT-1 commented Nov 27, 2019 •
edited
Loading

But if I use wretch as import wretch from 'wretch' in child typescript module I cant use such resolution,
I need esm bundle of wretch not only index entry point.

@elbywan
Copy link
Owner

elbywan commented Nov 27, 2019

Ah I see, I'll add an esm bundle later today 👍.

elbywan added a commit that referenced this issue Nov 27, 2019
@elbywan
🏭 Add esm bundle. #63
9655b46
elbywan added a commit that referenced this issue Nov 27, 2019
@elbywan
🏭 Add fetch error catcher. #63
1794327
@elbywan
Copy link
Owner

elbywan commented Nov 27, 2019

Version 1.6.0 has just been released with the esm bundle: https://unpkg.com/[email protected]/dist/bundle/wretch.esm.js

@elbywan elbywan closed this as completed Nov 27, 2019
@viT-1
Copy link
Author

viT-1 commented Nov 27, 2019 •
edited
Loading

When it will be on jsdelivr?

@elbywan
Copy link
Owner

elbywan commented Nov 27, 2019

https://cdn.jsdelivr.net/npm/[email protected]/dist/bundle/wretch.esm.js

@viT-1
Copy link
Author

viT-1 commented Nov 27, 2019

I'm sleeping! bundle =)))

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@elbywan @viT-1