Skip to content

Minimal implementation for umd #106

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

Merged
merged 3 commits into from
Jan 17, 2024
Merged

Minimal implementation for umd #106

merged 3 commits into from
Jan 17, 2024

Conversation

Janther
Copy link
Collaborator

@Janther Janther commented Jan 15, 2024

closes #47

@Janther Janther requested a review from fvictorio January 15, 2024 16:34
@hananbeer
Copy link

hananbeer commented Jan 15, 2024

is this the proper way to implement UMD?

anyhow, I still can't seem to import anything like that. no default and no parse/SolidityParser either.
unlike the esm version as I described here which works:
#47 (comment)

edit:
I found a solution that works.
simply add to build-browser.js: (in the original, not this commit)

footer: {
    js: 'export default SolidityParser;',
  },

I can open a PR if you let me know this is the acceptable approach.

@Janther
Copy link
Collaborator Author

Janther commented Jan 15, 2024

@hananbeer your solution only works for esm and while webpack does all the magic of packaging it for web, using this implementation of umd means that we can load this file directly into the browser or the node environment without the need of a bundling tool.

This implementation is closest to this example with some tweaks that allow for environments implementing different global namespaces like globalThis, global, self, this depending on the browser or commonjs implementation.

I have tested the built in an ESM project and you can import it:

// instead of
import { parse } from '@solidity-parser/parser';
parse(...)

// like this
import parser from '@solidity-parser/parser';
parser.parse(...)

I'll investigate why the first option doesn't work, but using the second one, this format works for browsers and node.

@Janther
Copy link
Collaborator Author

Janther commented Jan 15, 2024

After some investigation,

import { parse } from '@solidity-parser/parser';

does not work because it depends on a named export. Since umd needs to be commonJS friendly, this will not be possible and in order to interact with this format you need to import the default export:

import parser from '@solidity-parser/parser';
const { parse } = parser;

@hananbeer
Copy link

hananbeer commented Jan 15, 2024

actually I loaded the output directly inside a script tag, no webpack after esbuild:

<script type="module">
import SolidityParser from './index.iife.js'
console.log(SolidityParser.parse)
</script>

whereas using your branch for UMD throws an error:

<script type="module">
import parser from './index.umd.js'
console.log(parser.parse)
</script>

The requested module './index.umd.js' does not provide an export named 'default'

let me know if I'm doing anything wrong..
(I run python -m http.server in the dist folder and load this file)

btw generally speaking I don't see UMD as so popular or favorable, despite the name.

@Janther
Copy link
Collaborator Author

Janther commented Jan 15, 2024

Can you try:

<script src="./index.umd.js"></script>
<script>
  console.log(SolidityParser);
</script>

@hananbeer
Copy link

ah right. that makes sense. I did that because my react code does import parser from '@solidity-parser/parser'.

Copy link
Contributor

@fvictorio fvictorio left a comment

Choose a reason for hiding this comment

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

Super minor bikeshedding comment to pretend I was useful. Feel free to merge with or without it.

Co-authored-by: Franco Victorio <victorio.franco@gmail.com>
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.

Can't seem to load browser friendly parser
3 participants