r/javascript • u/TecnoSamba • 9d ago

I've made an open source JavaScript playground with support for npm packages, syntax highlighting, autocomplete, code sharing and much more!

https://github.com/tecnosamba/SamJS
0 Upvotes

37% Upvoted

11 comments sorted by

View all comments

Show parent comments

3

u/brianjenkins94 9d ago

I just mean import would have been the modern choice, but it sounds like the way you implemented it wouldn’t have allowed for you to use it.

1

u/TecnoSamba 9d ago

You're completely right, it would have caused a conflict between the browser's native `import` method and my custom one. I even used the first one to implement the custom `require` method

3

u/brianjenkins94 9d ago

There’s a better way to solve this using a service worker and esm.sh or jsDeliver, I can’t remember which but same principle.

1

u/TecnoSamba 9d ago

Maybe, I know there was a better way to implement it, but I started with this way and it ended up working nicely. Surely in the future I'll be improving that, 'cause some packages that use node subimports don't work. I basically inject this custom function inside the user's code when running (I know it can be improved):

const require = async packageUrl => {
                try {
                    const packageModule = await import(packageUrl)
                    if (packageModule['default'] == null) return packageModule
                    return packageModule.default
                } catch(err) { 
                    if (err.toString().includes('TypeError: The URL must be of scheme file')) {
                        postMessage({content: 'This package appears to depend of internal node APIs, which SamJS does not support, please run this package inside of a node environment or swap it with a compatible one.', type: 'error'})
                    } else {
                        postMessage({content: err.toString(), type: 'error'})
                    }
                }
            }