Skip to content

Update Getting Started docs to import v1.5.0 instead of v0.40 #5375

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
Open
1 task done
mleonhard opened this issue Apr 14, 2025 · 4 comments
Open
1 task done

Update Getting Started docs to import v1.5.0 instead of v0.40 #5375

mleonhard opened this issue Apr 14, 2025 · 4 comments
Labels
bug Something isn't working Documentation jira ticket created

Comments

@mleonhard
Copy link

Code of conduct

  • I agree to follow this project's code of conduct.

Description of issue

Hi Spectrum Team,
The Getting Started page https://opensource.adobe.com/spectrum-web-components/getting-started/ suggests loading the library with:

<script
    src="https://jspm.dev/@spectrum-web-components/bundle/elements.js"
    type="module"
    async
></script>

Unfortunately, that loads v0.40 which was published in 2023-11.

% curl -s https://jspm.dev/@spectrum-web-components/bundle/elements.js |head
import "/npm:@spectrum-web-components/[email protected]/sp-accordion.js";
import "/npm:@spectrum-web-components/[email protected]/sp-accordion-item.js";
import "/npm:@spectrum-web-components/[email protected]/sp-action-bar.js";
import "/npm:@spectrum-web-components/[email protected]/sp-action-button.js";
import "/npm:@spectrum-web-components/[email protected]/sp-action-group.js";
import "/npm:@spectrum-web-components/[email protected]/sp-action-menu.js";
import "/npm:@spectrum-web-components/alert-dialog/sp-alert-dialog.js";
import "/npm:@spectrum-web-components/[email protected]/sp-asset.js";
import "/npm:@spectrum-web-components/[email protected]/sp-avatar.js";
import "/npm:@spectrum-web-components/[email protected]/sp-badge.js";

My partner is doing a masters degree in Design, taking a coding course using Adobe Spectrum Web Components. The class is struggling with bugs (sp-number-field field ignores min), missing components (breadcrumbs), and mismatches between the docs and the code. I think these are due to them using an old version of the library.

Would you please deploy the latest version of the library to jspm.dev?

Another option is to build the @spectrum-web-components/bundle package and its dependencies and host the bundle.js with GitHub Pages.

Sincerely,
Michael

I built the bundle and it loads (creating <slot> elements), but styles are not working.

  • index.js 
    import * as spectrum from "@spectrum-web-components/bundle";
window.spectrum=spectrum;
  • index.html 
    <!DOCTYPE html>
<html lang='en'>
<head>
    <script src="spectrum.js" async></script>
</head>
<body>
<sp-theme system="express" color="light" scale="large">
    <sp-button>ABC</sp-button>
</sp-theme>
</body>
</html>
  • package.json 
    {
  "main": "index.js",
  "dependencies": {
    "@spectrum-web-components/bundle": "1.4.0",
    "esbuild": "0.25.2"
  }
}
example % docker run --rm --volume .:/src node:23 /usr/bin/env bash -c \
'cd /src && npm i && npx esbuild index.js --bundle --outfile=spectrum.js --format=iife --global-name=spectrum'

up to date, audited 96 packages in 323ms

found 0 vulnerabilities
npm notice
npm notice New major version of npm available! 10.9.2 -> 11.3.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.3.0
npm notice To update run: npm install -g [email protected]
npm notice

  spectrum.js  1.6mb ⚠️

⚡ Done in 186ms
example % open index.html

Image

example % cd ..                   
~ % zip example.zip example/index.* example/package.json example/spectrum.js 
  adding: example/index.html (deflated 28%)
  adding: example/index.js (deflated 21%)
  adding: example/package.json (deflated 15%)
  adding: example/spectrum.js (deflated 83%)

example.zip
@mleonhard mleonhard added needs jira ticket triage An issue needing triage labels Apr 14, 2025
@Rajdeepc
Copy link
Contributor

I have raised an issue on the jspm platform: jspm/jspm#2595

@najikahalsema najikahalsema added bug Something isn't working and removed triage An issue needing triage needs jira ticket labels Apr 18, 2025
@Rajdeepc
Copy link
Contributor

Hi @mleonhard jspm.dev was deprecated and you can read more about this here - https://jspm.org/jspm-dev-deprecation.

Instead, we recommend using import maps now with ga.jspm.io for superior caching of modules, where spectrum components at 1.4.0 can be supported in the JSPM generator with an import map, see for example:
https://stackblitz.com/edit/stackblitz-starters-efnx1r6e?description=HTML/CSS/JS%20Starter&file=themes.js,index.html&terminalHeight=10&title=Static%20Starter

@mleonhard
Copy link
Author

Hi @Rajdeepc, Thanks for your reply. How about updating instructions in the Getting Started page?

@mleonhard mleonhard changed the title Publish to jspm.dev Update Getting Started docs to import v1.5.0 instead of v0.40 Apr 29, 2025
@castastrophe
Copy link
Collaborator

This work is being evaluated in an upcoming sprint and hopefully we can address the documentation. In the meantime, I suggest trying another bundling tool such as https://unpkg.com/@spectrum-web-components/[email protected]/elements.js.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working Documentation jira ticket created
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@mleonhard @castastrophe @Rajdeepc @najikahalsema