-
Notifications
You must be signed in to change notification settings - Fork 57
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: use globalThis, to support ESM global imports
This adds support for "global-style" esm imports like this: import "anchor-js"; anchors.add(); This gives end-users a total of 3 import options: - Globals with a script tag. - <script src="./anchor.js"></script> - ESM default import, using a bundler like webpack (to transpile the common-JS) - import AnchorJS from "anchor-js"; - ESM global import - import "./anchor.js"; We use this import style on module-test.html, for testing
- Loading branch information
1 parent
96c2cc3
commit 8ae6db2
Showing
3 changed files
with
54 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>AnchorJS Module Test</title> | ||
<style> | ||
.main { | ||
font-family: Georgia, serif; | ||
font-size: 1.4em; | ||
margin: 80px auto; | ||
width: 600px; | ||
} | ||
p { | ||
font-size: 16px; | ||
} | ||
.page-title { | ||
font-size: 2em; | ||
text-align: center; | ||
} | ||
.anchorjs-logo { | ||
background-image: url(data:image/png;base64,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); | ||
background-position: center center; | ||
margin: 20px auto; | ||
width: 200px; | ||
height: 200px; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<section class="main"> | ||
<h1 class="page-title">AnchorJS</h1> | ||
<div class="anchorjs-logo"></div> | ||
<h2>This heading should have a link</h2> | ||
<h3>This heading should have a link</h3> | ||
<p>Note: this test file should be served by a local server because <a href="https://stackoverflow.com/a/52919513/1154642">ES Modules are subject to same-origin policy</a>.</p> | ||
<p>A simple way to do this is to run this command in the project root:</p> | ||
<code>python3 -m http.server 1111</code> | ||
<br /> | ||
<code>// Served at: localhost:1111/test/module-test.html</code> | ||
<p>(python3 is available by default on MacOS Catalina and later)</p> | ||
</section> | ||
<script type="module"> | ||
import '../anchor.js'; | ||
|
||
anchors.options.visible = "always"; | ||
anchors.add('.main h2'); | ||
|
||
const newAnchors = new AnchorJS({ visible: "always" }); | ||
newAnchors.add('.main h3'); | ||
</script> | ||
</body> | ||
</html> |