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 external esm module scripts #1040

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

markacianfrani
Copy link

What kind of change does this pull request introduce?

Adds support for type=module for externalResource scripts
Related discussion: #998

What is the current behavior?

You can only pass in strings and can't modify attributes on the script element.

What is the new behavior?

You can pass in a new object in the externalResources array that defines the type and src

What steps did you take to test this? This is required before we can merge, make sure to test the flow you've updated.

I wanted this feature so that I can use sandpack to build a playground for my design system library. we use web components and es modules. The easiest way for me to test this was to try and get our library working, but any other esm script will do. I've also tested this in a separate React app locally using symlinks.

  1. Go to CustomSandpack.stories.tsx
  2. Add module to externalResources
              {
                type: "module",
                src: "https://unpkg.com/@astrouxds/astro-web-components/dist/astro-web-components/astro-web-components.esm.js"
              },
              
  1. In the HiddenHeadTags function, add:
<body class="flex items-center justify-center">
  <rux-button icon="apps">submit</rux-button>
  <button class="p-4 bg-white rounded" onClick="alertTest()">Alert</button>
</body>

Boot up the dev storybook and you should see a custom button element.

Checklist

  • Documentation;
  • Storybook (if applicable);
  • Tests;
  • Ready to be merged;

I could use some direction regarding testing if you think this needs some. I'm also not 100% clear on how/where to document. I will happily update if this approach is validated.

Copy link

codesandbox bot commented Nov 16, 2023

Review or Edit in CodeSandbox

Open the branch in Web EditorVS CodeInsiders

Open Preview

Copy link

vercel bot commented Nov 16, 2023

@markacianfrani is attempting to deploy a commit to the CodeSandbox Team on Vercel.

A member of the Team first needs to authorize it.

Copy link

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit d7fb4b6:

Sandbox Source
Sandpack Configuration
sandpack-run-stale-value Configuration

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.

1 participant