Skip to content

Commit 507f7cb

Browse files
dmaildmail
authored
Merge pull request #79 from jsenv/output_as_js_file
Add ability to write importmap into a .js file
2 parents 51b65b1 + 24c3826 commit 507f7cb

11 files changed

Lines changed: 197 additions & 5 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@jsenv/importmap-node-module",
3-
"version": "7.1.1",
3+
"version": "7.2.0",
44
"description": "Generate importmap for node_modules",
55
"license": "MIT",
66
"repository": {

‎src/cli.mjs‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,10 @@ if (positionals.length > 1) {
3939
if (
4040
!outfile.endsWith(".html") &&
4141
!outfile.endsWith(".importmap") &&
42-
!outfile.endsWith(".json")
42+
!outfile.endsWith(".json") &&
43+
!outfile.endsWith(".js")
4344
) {
44-
console.error("Error: outfile must end with .html, .importmap or .json");
45+
console.error("Error: outfile must end with .html, .importmap, .json or .js");
4546
process.exit(1);
4647
}
4748

‎src/step_write_into_files/write_into_files.js‎

Lines changed: 43 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,19 @@ export const writeIntoFiles = (
2222
const importmapAsJson = JSON.stringify(importmap, null, " ");
2323
if (fileUrl.endsWith(".html")) {
2424
writeIntoHtmlFile(fileUrl, importmapAsJson, { logger });
25+
} else if (fileUrl.endsWith(".js")) {
26+
writeInfoJsFile(fileUrl, importmapAsJson, { logger });
2527
} else {
26-
writeFileSync(fileUrl, importmapAsJson);
27-
logger.info(`-> ${urlToFileSystemPath(fileUrl)}`);
28+
writeIntoJsonFile(fileUrl, importmapAsJson, { logger });
2829
}
2930
}
3031
};
3132

33+
const writeIntoJsonFile = (jsonFileUrl, importmapAsJson, { logger }) => {
34+
writeFileSync(jsonFileUrl, importmapAsJson);
35+
logger.info(`-> ${urlToFileSystemPath(jsonFileUrl)}`);
36+
};
37+
3238
const writeIntoHtmlFile = (htmlFileUrl, importmapAsJson, { logger }) => {
3339
const htmlAst = parseHtml({
3440
html: readFileSync(htmlFileUrl, { as: "string" }),
@@ -80,3 +86,38 @@ const writeIntoHtmlFile = (htmlFileUrl, importmapAsJson, { logger }) => {
8086
const html = stringifyHtmlAst(htmlAst);
8187
writeFileSync(new URL(htmlFileUrl), html);
8288
};
89+
90+
const writeInfoJsFile = (jsFileUrl, importmapAsJson, { logger }) => {
91+
const jsFileContent = `
92+
const currentScript = document.currentScript;
93+
if (!currentScript) {
94+
throw new Error(
95+
"document.currentScript is not available, cannot inject importmap"
96+
);
97+
}
98+
const baseUrl = new URL(".", currentScript.src).href;
99+
const importmap = ${importmapAsJson};
100+
const topLevelMappings = importmap.imports;
101+
const scopedMappings = importmap.scopes;
102+
const makeMappingsAbsolute = () => {
103+
for (const key of Object.keys(mappings)) {
104+
mappings[key] = baseUrl + mappings[key];
105+
}
106+
}
107+
if (topLevelMappings) {
108+
makeMappingsAbsolute(topLevelMappings);
109+
}
110+
if (scopedMappings) {
111+
for (const scope of Object.keys(scopedMappings)) {
112+
const mappings = scopedMappings[scope];
113+
makeMappingsAbsolute(mappings);
114+
}
115+
}
116+
const importmapScript = document.createElement("script");
117+
importmapScript.type = "importmap";
118+
importmapScript.textContent = importmap;
119+
currentScript.after(importmapScript);
120+
`;
121+
writeFileSync(jsFileUrl, jsFileContent);
122+
logger.info(`-> ${urlToFileSystemPath(jsFileUrl)}`);
123+
};

‎tests/write_inside_js/_write_inside_js.test.mjs/0_basic/0_basic.md‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
# [0_basic](../../write_inside_js.test.mjs#L21)
2+
3+
```js
4+
run("0_basic")
5+
```
6+
7+
# 1/2 write 6 files into "./git_ignored/"
8+
9+
## node_modules/foo/foo.js
10+
```js
11+
console.log('foo');
12+
```
13+
14+
## node_modules/foo/package.json
15+
```json
16+
{
17+
"name": "foo",
18+
"main": "./foo.js",
19+
"private": true
20+
}
21+
```
22+
23+
## index.html
24+
```html
25+
<!DOCTYPE html>
26+
<html>
27+
<head>
28+
<title>Title</title>
29+
<meta charset="utf-8">
30+
<link rel="icon" href="data:,">
31+
</head>
32+
33+
<body>
34+
<script type="module" src="./main.js"></script>
35+
</body>
36+
</html>
37+
```
38+
39+
## main.js
40+
```js
41+
import "foo";
42+
43+
```
44+
45+
## package.json
46+
```json
47+
{
48+
"name": "root",
49+
"private": true,
50+
"dependencies": {
51+
"foo": "*"
52+
}
53+
}
54+
```
55+
56+
## index.js
57+
58+
```
59+
60+
const currentScript = document.currentScript;
61+
if (!currentScript) {
62+
throw new Error(
63+
"document.currentScript is not available, cannot inject importmap"
64+
);
65+
}
66+
const baseUrl = new URL(".", currentScript.src).href;
67+
const importmap = {
68+
"imports": {
69+
"root/": "./",
70+
"foo/": "./node_modules/foo/",
71+
"root": "./index",
72+
"foo": "./node_modules/foo/foo.js"
73+
},
74+
"scopes": {}
75+
};
76+
const topLevelMappings = importmap.imports;
77+
const scopedMappings = importmap.scopes;
78+
const makeMappingsAbsolute = () => {
79+
```
80+
see [git_ignored/index.js](git_ignored/index.js) for more
81+
82+
# 2/2 resolve
83+
84+
```js
85+
undefined
86+
```
87+
88+
---
89+
90+
<sub>
91+
Generated by <a href="https://github.com/jsenv/core/tree/main/packages/independent/snapshot">@jsenv/snapshot</a>
92+
</sub>

‎tests/write_inside_js/_write_inside_js.test.mjs/write_inside_js.test.mjs.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# [write_inside_js.test.mjs](../write_inside_js.test.mjs)
2+
3+
4+
- [0_basic](0_basic/0_basic.md)
5+
6+
---
7+
8+
<sub>
9+
Generated by <a href="https://github.com/jsenv/core/tree/main/packages/independent/snapshot">@jsenv/snapshot</a>
10+
</sub>

‎tests/write_inside_js/fixtures/0_basic/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Title</title>
5+
<meta charset="utf-8" />
6+
<link rel="icon" href="data:," />
7+
</head>
8+
9+
<body>
10+
<script type="module" src="./main.js"></script>
11+
</body>
12+
</html>

‎tests/write_inside_js/fixtures/0_basic/main.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import "foo";

‎tests/write_inside_js/fixtures/0_basic/node_modules/foo/foo.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tests/write_inside_js/fixtures/0_basic/node_modules/foo/package.json‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tests/write_inside_js/fixtures/0_basic/package.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"name": "root",
3+
"private": true,
4+
"dependencies": {
5+
"foo": "*"
6+
}
7+
}

0 commit comments

Comments
 (0)