diff --git a/README.md b/README.md index 80491f8..0378771 100644 --- a/README.md +++ b/README.md @@ -304,6 +304,18 @@ remark() > Take a look at [how it would look](test/outputs/async-img-all.png) before executing the script, and the unchanged [HTML output](test/outputs/async-img-all.html). +### `jsx` + +To use with [@mdx-js/mdx](https://mdxjs.com/advanced/api), set `jsx` as true. + +```javascript +const mdx = require('@mdx-js/mdx'); + +await mdx(src, { + remarkPlugins: [[require('@sergioramos/remark-oembed'), { jsx: true }], +}); +``` + ## license BSD-3-Clause diff --git a/index.js b/index.js index 69c00eb..34faf0f 100644 --- a/index.js +++ b/index.js @@ -3,7 +3,6 @@ const h = require('hastscript'); const Intercept = require('apr-intercept'); const { getType } = require('mime'); const toHtml = require('hast-util-to-html'); -const { selectAll, matches } = require('hast-util-select'); const { format, parse } = require('url'); const OEMBED_PROVIDERS_URL = 'https://oembed.com/providers.json'; @@ -29,7 +28,7 @@ const ATTRS = { }; const Script = () => { - return ` + const script = ` document.querySelectorAll('div[data-oembed]').forEach((el) => { const template = el.querySelector('[data-oembed-template]').content.cloneNode(true); el.innerHTML = ''; @@ -45,10 +44,8 @@ const Script = () => { el.removeAttribute('data-oembed'); }); `; -}; -const RequestAnimationFrame = ({ script }) => { - const __html = ` + return ` const isDocumentReady = () => { if (document.readyState !== 'complete') { document.addEventListener('readystatechange', isDocumentReady); @@ -66,10 +63,16 @@ const RequestAnimationFrame = ({ script }) => { document.addEventListener('readystatechange', isDocumentReady); } `; +}; +const RequestAnimationFrame = ({ script: __html }) => { return h('script', { async: true, defer: true }, [__html]); }; +const JsxScript = ({ script: __html }) => { + return ` +

This another photo:

+ +

Check it out 👆

+ diff --git a/test/outputs/jsx-all.png b/test/outputs/jsx-all.png new file mode 100644 index 0000000..34a14b7 Binary files /dev/null and b/test/outputs/jsx-all.png differ diff --git a/test/outputs/jsx-async-img-all.html b/test/outputs/jsx-async-img-all.html new file mode 100644 index 0000000..3c51b91 --- /dev/null +++ b/test/outputs/jsx-async-img-all.html @@ -0,0 +1,116 @@ +

This is a youtube video:

+
+
+

This is a photo:

+
+
+

This another photo:

+ +

Check it out 👆

+
diff --git a/test/outputs/jsx-async-img-all.png b/test/outputs/jsx-async-img-all.png new file mode 100644 index 0000000..4905eb9 Binary files /dev/null and b/test/outputs/jsx-async-img-all.png differ diff --git a/test/outputs/jsx-sync-widget-all.html b/test/outputs/jsx-sync-widget-all.html new file mode 100644 index 0000000..3175e2a --- /dev/null +++ b/test/outputs/jsx-sync-widget-all.html @@ -0,0 +1,51 @@ +

This is a youtube video:

+
+
+

This is a photo:

+
+ Leiria by night +
+

This another photo:

+ +

Check it out 👆

diff --git a/test/outputs/jsx-sync-widget-all.png b/test/outputs/jsx-sync-widget-all.png new file mode 100644 index 0000000..6e0ba63 Binary files /dev/null and b/test/outputs/jsx-sync-widget-all.png differ diff --git a/test/outputs/sync-widget-all.png b/test/outputs/sync-widget-all.png index 49e58ee..6e0ba63 100644 Binary files a/test/outputs/sync-widget-all.png and b/test/outputs/sync-widget-all.png differ diff --git a/test/outputs/sync-widget-providers.html b/test/outputs/sync-widget-providers.html index 9decf79..940b784 100644 --- a/test/outputs/sync-widget-providers.html +++ b/test/outputs/sync-widget-providers.html @@ -204,12 +204,12 @@ color: #555; } -
-
+

␊ -

␊ -
␊ +
␊ +

␊ ` +## `jsx` > `asyncImg` > all + +> Snapshot 1 + + `

This is a youtube video:

␊ +
␊ + ␊ +

This is a photo:

␊ +
␊ + ␊ +

This another photo:

␊ + ␊ +

Check it out 👆

␊ +
␊ + ` + +## `jsx` > `syncWidget` > all + +> Snapshot 1 + + `

This is a youtube video:

␊ +
␊ + ␊ +

This is a photo:

␊ +
␊ + ␊ + ␊ +

This another photo:

␊ + ␊ +

Check it out 👆

␊ + ` + +## `jsx` > defaults > all + +> Snapshot 1 + + `

This is a youtube video:

␊ +
␊ + ␊ +

This is a photo:

␊ +
␊ + ␊ +

This another photo:

␊ + ␊ +

Check it out 👆

␊ +
␊ + ` + ## `syncWidget` > all > Snapshot 1 @@ -1087,12 +1374,12 @@ Generated by [AVA](https://avajs.dev). color: #555;␊ }␊ ␊ -
␊ -
␊ +
␊ +

␊ -

␊ -
␊ +
␊ +

": +"resolve@patch:resolve@^1.10.0#builtin, resolve@patch:resolve@^1.3.2#builtin": version: 1.17.0 resolution: "resolve@patch:resolve@npm%3A1.17.0#builtin::version=1.17.0&hash=e7677c" dependencies: @@ -4505,7 +5163,7 @@ resolve@^1.10.0: languageName: node linkType: hard -"rimraf@npm:2.6.3, rimraf@npm:^2.6.3": +"rimraf@npm:2.6.3": version: 2.6.3 resolution: "rimraf@npm:2.6.3" dependencies: @@ -4516,6 +5174,17 @@ resolve@^1.10.0: languageName: node linkType: hard +"rimraf@npm:^2.6.3": + version: 2.7.1 + resolution: "rimraf@npm:2.7.1" + dependencies: + glob: ^7.1.3 + bin: + rimraf: ./bin.js + checksum: 3/059efac2838ef917d4d1da1d80e724ad28c120cdf14ca6ed27ca72db2dc70be3e25421cba5947c6ec3d804c1d2bb9a247254653816ee0722bf943ffdd1ae19ef + languageName: node + linkType: hard + "rimraf@npm:^3.0.0, rimraf@npm:^3.0.2": version: 3.0.2 resolution: "rimraf@npm:3.0.2" @@ -4527,6 +5196,42 @@ resolve@^1.10.0: languageName: node linkType: hard +"rollup-plugin-babel@npm:^4.4.0": + version: 4.4.0 + resolution: "rollup-plugin-babel@npm:4.4.0" + dependencies: + "@babel/helper-module-imports": ^7.0.0 + rollup-pluginutils: ^2.8.1 + peerDependencies: + "@babel/core": 7 || ^7.0.0-rc.2 + rollup: ">=0.60.0 <3" + checksum: 3/9f82719d1595e4f6770d6d5521f8bd982eace92d97ac258d37c0e2410c3e355f7bb5423ca00a178fe78e6c07facfd20cfa06c25f468d419b3152802e256d6f86 + languageName: node + linkType: hard + +"rollup-pluginutils@npm:^2.8.1": + version: 2.8.2 + resolution: "rollup-pluginutils@npm:2.8.2" + dependencies: + estree-walker: ^0.6.1 + checksum: 3/6922c1a26df033cc3da4650106244fb2211b5ddf72a93be5010cbe51a0817c9abcab08f61cbc3f5fc906b2701df123d8c9b0dae0a34e69dd07218e34e5d357b8 + languageName: node + linkType: hard + +"rollup@npm:^2.10.2": + version: 2.10.3 + resolution: "rollup@npm:2.10.3" + dependencies: + fsevents: ~2.1.2 + dependenciesMeta: + fsevents: + optional: true + bin: + rollup: dist/bin/rollup + checksum: 3/7a745e3304bab751caec3762500881557727dab0fdc83cc121398d888de8be699bd17df7bf01d88ac33a592c160c8a28e145f31a99e8f5d6888d472023a34490 + languageName: node + linkType: hard + "run-async@npm:^2.4.0": version: 2.4.1 resolution: "run-async@npm:2.4.1" @@ -4541,7 +5246,7 @@ resolve@^1.10.0: languageName: node linkType: hard -"rxjs@npm:^6.3.3, rxjs@npm:^6.5.3": +"rxjs@npm:^6.5.3, rxjs@npm:^6.5.5": version: 6.5.5 resolution: "rxjs@npm:6.5.5" dependencies: @@ -4550,20 +5255,20 @@ resolve@^1.10.0: languageName: node linkType: hard -"safe-buffer@npm:^5.0.1, safe-buffer@npm:~5.2.0": - version: 5.2.0 - resolution: "safe-buffer@npm:5.2.0" - checksum: 3/e513079353a235749e64dc3b1ade741caf651c09d1291ee826e68d42c08913dcd2c76b291dd23979b0fd0bd551d99f4a3d8cc05aef4e9c75bebf6cbbd310b129 - languageName: node - linkType: hard - -"safe-buffer@npm:^5.1.2, safe-buffer@npm:~5.1.0, safe-buffer@npm:~5.1.1": +"safe-buffer@npm:^5.0.1, safe-buffer@npm:^5.1.2, safe-buffer@npm:~5.1.0, safe-buffer@npm:~5.1.1": version: 5.1.2 resolution: "safe-buffer@npm:5.1.2" checksum: 3/2708587c1b5e70a5e420714ceb59f30f5791c6e831d39812125a008eca63a4ac18578abd020a0776ea497ff03b4543f2b2a223a7b9073bf2d6c7af9ec6829218 languageName: node linkType: hard +"safe-buffer@npm:~5.2.0": + version: 5.2.1 + resolution: "safe-buffer@npm:5.2.1" + checksum: 3/0bb57f0d8f9d1fa4fe35ad8a2db1f83a027d48f2822d59ede88fd5cd4ddad83c0b497213feb7a70fbf90597a70c5217f735b0eb1850df40ce9b4ae81dd22b3f9 + languageName: node + linkType: hard + "safer-buffer@npm:>= 2.1.2 < 3, safer-buffer@npm:^2.0.2, safer-buffer@npm:^2.1.0, safer-buffer@npm:~2.1.0": version: 2.1.2 resolution: "safer-buffer@npm:2.1.2" @@ -4571,6 +5276,16 @@ resolve@^1.10.0: languageName: node linkType: hard +"scheduler@npm:^0.19.1": + version: 0.19.1 + resolution: "scheduler@npm:0.19.1" + dependencies: + loose-envify: ^1.1.0 + object-assign: ^4.1.1 + checksum: 3/804f990b9f370cca6d42b65f3cba2cc2bfed4973ee5623bed1ea36a6627842db8c891e2e5ac003f06f9ee892d1d3396921e27fa077346caf0213af05776e8dee + languageName: node + linkType: hard + "semver-compare@npm:^1.0.0": version: 1.0.0 resolution: "semver-compare@npm:1.0.0" @@ -4594,7 +5309,7 @@ resolve@^1.10.0: languageName: node linkType: hard -"semver@npm:2 || 3 || 4 || 5, semver@npm:^5.5.0, semver@npm:^5.5.1, semver@npm:^5.7.1": +"semver@npm:2 || 3 || 4 || 5, semver@npm:^5.4.1, semver@npm:^5.5.0, semver@npm:^5.5.1, semver@npm:^5.7.1": version: 5.7.1 resolution: "semver@npm:5.7.1" bin: @@ -4722,6 +5437,13 @@ resolve@^1.10.0: languageName: node linkType: hard +"source-map@npm:^0.5.0": + version: 0.5.7 + resolution: "source-map@npm:0.5.7" + checksum: 3/737face96577a2184a42f141607fcc2c9db5620cb8517ae8ab3924476defa138fc26b0bab31e98cbd6f19211ecbf78400b59f801ff7a0f87aa9faa79f7433e10 + languageName: node + linkType: hard + "source-map@npm:^0.6.0": version: 0.6.1 resolution: "source-map@npm:0.6.1" @@ -4761,12 +5483,12 @@ resolve@^1.10.0: linkType: hard "spdx-expression-parse@npm:^3.0.0": - version: 3.0.0 - resolution: "spdx-expression-parse@npm:3.0.0" + version: 3.0.1 + resolution: "spdx-expression-parse@npm:3.0.1" dependencies: spdx-exceptions: ^2.1.0 spdx-license-ids: ^3.0.0 - checksum: 3/626acd35ef9579cb1d15d87d08a571587e9d0c2d5e72c77ec2dfa83578703feb3e6a1b3250d4d56ae598649e65e89df8a3ebfb1faf028066ead3fffe4f27d658 + checksum: 3/f0211cada3fa7cd9db2243143fb0e66e28a46d72d8268f38ad2196aac49408d87892cda6e5600d43d6b05ed2707cb2f4148deb27b092aafabc50a67038f4cbf5 languageName: node linkType: hard @@ -5019,6 +5741,24 @@ resolve@^1.10.0: languageName: node linkType: hard +"style-to-object@npm:0.3.0": + version: 0.3.0 + resolution: "style-to-object@npm:0.3.0" + dependencies: + inline-style-parser: 0.1.1 + checksum: 3/869b30171c2c0d1ed1928e86c3644d691d96277e484fdafaa99df3ad3b1e11e0fcfc2ac2def4e3dd068df49995de585918dbda2ff833b5691bc8206d1cda37ad + languageName: node + linkType: hard + +"style-to-object@npm:^0.2.1": + version: 0.2.3 + resolution: "style-to-object@npm:0.2.3" + dependencies: + inline-style-parser: 0.1.1 + checksum: 3/6bec5d68dab9b8e4ec6f8bac89f81e98b34c6e45e8070f68d11296010af9cc1d97d6d77aa69508f3c8658bc079cf83ae2bd3c6c62cb6cbe62db74e673032d1c5 + languageName: node + linkType: hard + "supertap@npm:^1.0.0": version: 1.0.0 resolution: "supertap@npm:1.0.0" @@ -5063,14 +5803,14 @@ resolve@^1.10.0: linkType: hard "tar-fs@npm:^2.0.0": - version: 2.0.1 - resolution: "tar-fs@npm:2.0.1" + version: 2.1.0 + resolution: "tar-fs@npm:2.1.0" dependencies: chownr: ^1.1.1 mkdirp-classic: ^0.5.2 pump: ^3.0.0 tar-stream: ^2.0.0 - checksum: 3/890f546bf67836f092fc15b48324b6f29692a12ed809f36aa4855c66f2ef101a5295e196b0c9f5cf8fde5c18f44a935e7766748c29b1d9699a9d8f779b06965b + checksum: 3/aa0a6b2fd3b23bc50a10613a53ed1a7aa13202fce24cd86abf85b5347a4b05399abb7e5d160ae071552be13bb7d8b69603172be2cbf2c786dd6d94d147b928fa languageName: node linkType: hard @@ -5175,6 +5915,13 @@ resolve@^1.10.0: languageName: node linkType: hard +"to-fast-properties@npm:^2.0.0": + version: 2.0.0 + resolution: "to-fast-properties@npm:2.0.0" + checksum: 3/40e61984243b183d575a2f3a87d008bd57102115701ee9037fd673e34becf12ee90262631857410169ca82f401a662ed94482235cea8f3b8dea48b87eaabc467 + languageName: node + linkType: hard + "to-readable-stream@npm:^1.0.0": version: 1.0.0 resolution: "to-readable-stream@npm:1.0.0" @@ -5237,9 +5984,9 @@ resolve@^1.10.0: linkType: hard "tslib@npm:^1.9.0": - version: 1.11.2 - resolution: "tslib@npm:1.11.2" - checksum: 3/9465e3dd4e348757bef369934c73990193cf069c13d487e566b1ce7802bd7e6ab7d5dc16ac97b31d076d29d8bfc4f358457ce4040ec97b9a1e9b3fa6cf1ded7a + version: 1.13.0 + resolution: "tslib@npm:1.13.0" + checksum: 3/5dc3bdaea3b67c76ef4a14c28fcb2171da7bcf292fd9c59a260098729626b1ce766c52b588f08e324ed9a0c52ea8a93a815920f980d75981abc9d850fbf310fb languageName: node linkType: hard @@ -5325,7 +6072,7 @@ resolve@^1.10.0: languageName: node linkType: hard -"unified@npm:^9.0.0": +"unified@npm:9.0.0, unified@npm:^9.0.0": version: 9.0.0 resolution: "unified@npm:9.0.0" dependencies: @@ -5348,7 +6095,7 @@ resolve@^1.10.0: languageName: node linkType: hard -"unist-builder@npm:^2.0.0": +"unist-builder@npm:2.0.3, unist-builder@npm:^2.0.0": version: 2.0.3 resolution: "unist-builder@npm:2.0.3" checksum: 3/64f9231bac9050b65d8cb97bc64e93782f93551e4a6a4e75ff89f580fa92740520bbd9ec44b7917c29785d498a3f432c326c5f55bd44e8949b98f5f63b14ec44 @@ -5362,6 +6109,13 @@ resolve@^1.10.0: languageName: node linkType: hard +"unist-util-is@npm:^3.0.0": + version: 3.0.0 + resolution: "unist-util-is@npm:3.0.0" + checksum: 3/c001cb83663fe70af5ad595020a836d2efef40ce1ba1f03e574cbb9b0976ccd342a991f23417cb407a629ba882ca5e7e955e544dcee9c49b24177b869dd3fd6d + languageName: node + linkType: hard + "unist-util-is@npm:^4.0.0": version: 4.0.2 resolution: "unist-util-is@npm:4.0.2" @@ -5385,16 +6139,12 @@ resolve@^1.10.0: languageName: node linkType: hard -"unist-util-select@npm:^3.0.1": - version: 3.0.1 - resolution: "unist-util-select@npm:3.0.1" +"unist-util-remove@npm:^2.0.0": + version: 2.0.0 + resolution: "unist-util-remove@npm:2.0.0" dependencies: - css-selector-parser: ^1.0.0 - not: ^0.1.0 - nth-check: ^1.0.0 unist-util-is: ^4.0.0 - zwitch: ^1.0.0 - checksum: 3/a608346820fdc5f16a34a64ea58c72ad10973cba157ff71a5fb7437df07eed03622cc5d30cef6686dfc2595d8669e9f738ac6ae7b2d7a1e147603d0fbce9c0c9 + checksum: 3/7e79d9f95d14ad9697d80e5e74094262d6a2bf207cff75b079257f1123c614b30a9192007724e9cea10f598cb1b16fc243ed0ef7bce71c56253b17127a2f0c08 languageName: node linkType: hard @@ -5417,7 +6167,7 @@ resolve@^1.10.0: languageName: node linkType: hard -"unist-util-visit@npm:^2.0.0": +"unist-util-visit@npm:2.0.2, unist-util-visit@npm:^2.0.0": version: 2.0.2 resolution: "unist-util-visit@npm:2.0.2" dependencies: @@ -5549,15 +6299,15 @@ resolve@^1.10.0: linkType: hard "vfile@npm:^4.0.0": - version: 4.1.0 - resolution: "vfile@npm:4.1.0" + version: 4.1.1 + resolution: "vfile@npm:4.1.1" dependencies: "@types/unist": ^2.0.0 is-buffer: ^2.0.0 replace-ext: 1.0.0 unist-util-stringify-position: ^2.0.0 vfile-message: ^2.0.0 - checksum: 3/b1323ad0f47791c0f4bcecf7995caf06cdec3aee095a911ec01ad6f45bdf6fed54d3f14f0cf8487170049844e3c8ac1b39e9067d62b7fc9b721c7420814d4a30 + checksum: 3/3f84677ed6180335ec2e699c9b91305eda35fad42cba0bddcb0f4561f8b6373fddb87bc9a89d91d926b4281be614a7ec003ff6cd2f3e1c0ccecf95e90ef8b035 languageName: node linkType: hard @@ -5570,6 +6320,13 @@ resolve@^1.10.0: languageName: node linkType: hard +"web-namespaces@npm:^1.0.0, web-namespaces@npm:^1.1.2": + version: 1.1.4 + resolution: "web-namespaces@npm:1.1.4" + checksum: 3/0899d2a4a088b15761b6234ff6610f9598112d58f27adad86f7881ad51631317b47033bfa84cdeb62a37c8b6c3ece618f4ff720fd42c99f4907a1d9390c9dae0 + languageName: node + linkType: hard + "well-known-symbols@npm:^2.0.0": version: 2.0.0 resolution: "well-known-symbols@npm:2.0.0" @@ -5678,8 +6435,8 @@ resolve@^1.10.0: linkType: hard "ws@npm:^7.2.3": - version: 7.2.5 - resolution: "ws@npm:7.2.5" + version: 7.3.0 + resolution: "ws@npm:7.3.0" peerDependencies: bufferutil: ^4.0.1 utf-8-validate: ^5.0.2 @@ -5688,7 +6445,7 @@ resolve@^1.10.0: optional: true utf-8-validate: optional: true - checksum: 3/bd4ff2ceb52eaebefb05093c673e7dd0005131f31f2eae0452b8a0276af83d911213fe659cb455af1883565ea38d90a25dd8601b905617037d48d2c16c6992f0 + checksum: 3/c1f386013bd30afa9e4d0aa28eee85767a9e1b8fa74fc482eac503840f1012c2c1339745be36b0737f0245515646892b6073e376deac911a7bdf1ec90fc0f86f languageName: node linkType: hard @@ -5721,11 +6478,9 @@ resolve@^1.10.0: linkType: hard "yaml@npm:^1.7.2": - version: 1.9.2 - resolution: "yaml@npm:1.9.2" - dependencies: - "@babel/runtime": ^7.9.2 - checksum: 3/098baa974d33f13c3a93efba4e83c8992f533e78463010afc41a9c2ae574890fa670d91e8d18ffaf9af616c3a0683a4e93b69057bd143f53306570a117ebcb7f + version: 1.10.0 + resolution: "yaml@npm:1.10.0" + checksum: 3/d4cc9f9724f8d0aebc2cf52e4e6aa7059f12d50deb54b5225d103462fb2af36e5c0bb419101ca4b1f0cd3b4db9e4139cf2c690e863ac6227648d39d6f4e2522c languageName: node linkType: hard