remark-embedder / transformer-oembed Goto Github PK

Is this intended to be able to work client side with components such as react-markdown?
https://github.com/remarkjs/react-markdown

I'm trying to use it in a preview component for a blog writing component.

I'm getting this module dependency error, although, again, I'm not sure if it's intended to work as I'm expecting.

Module not found: Can't resolve 'dns'

• @remark-embedder/transformer-oembed version:
• node version: v14.17.0
• npm version: 6.14.13

Problem description:

A bad URL or a bug may crash Markdown parser. In my case, it breaks my static site generator (elder.js):

(node:169898) UnhandledPromiseRejectionWarning: FetchError: The following error occurred while processing `https://vimeo.com/66520064` with the remark-embedder transformer `@remark-embedder/transformer-oembed`:

invalid json response body at https://vimeo.com/api/oembed.%7Bformat%7D?url=https%3A%2F%2Fvimeo.com%2F66520064&maxwidth=640&maxheight=480&format=json reason: Unexpected token < in JSON at position 0
    at /home/vlisivka/workspace/vlisivka.github.io/node_modules/minipass-fetch/lib/body.js:77:31
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async Object.getHTML (/home/vlisivka/workspace/vlisivka.github.io/node_modules/@remark-embedder/transformer-oembed/dist/index.js:87:18)
    at async /home/vlisivka/workspace/vlisivka.github.io/node_modules/@remark-embedder/core/dist/index.js:106:20
    at async Promise.all (index 8)
    at async /home/vlisivka/workspace/vlisivka.github.io/node_modules/@remark-embedder/core/dist/index.js:158:5
(Use `node --trace-warnings ...` to show where the warning was created)
(node:169898) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:169898) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Suggested solution:

Handle failed promise by logging response to console and leave original URL as is.

• @remark-embedder/transformer-oembed version: 3.0.0
• node version: 18.15.0
• npm version: 9.5.0

Relevant code or config

  const { code, frontmatter } = await bundleMDX({
    source: mdxSource,
    mdxOptions(options) {
      options.remarkPlugins = [
        ...(options.remarkPlugins ?? []),
        remarkGfm,
        [
          remarkEmbedder,
          {
            transformers: [
              oembedTransformer,
              {
                params: {
                  theme: "dark",
                  dnt: true,
                  omit_script: true,
                  width: 1000,
                  height: 1000,
                  arguments: { width: 1000, height: 1000 },
                },
              } as Config,
            ],
            handleHTML,
          },
        ],
      ];
      options.rehypePlugins = [...(options.rehypePlugins ?? []), rehypePrism];

      return options;
    },
  });

What you did:

I'm using the plugin with the remark embedded and mdxBundler, and trying to pass a width and height property to my iframe.

What happened:

The Iframe compiles with the default width and height despite me passing it in as a parameter.

• @remark-embedder/transformer-oembed version: 1.0.1
• node version: v14.17.0
• npm version: 6.14.13

Problem description:

This plugin doesn't replace {format} parameter in oembed URL.

Expected URL:

https://vimeo.com/api/oembed.json?URL

Actual URL:

https://vimeo.com/api/oembed.%7Bformat%7D?URL

Error message:

(node:169898) UnhandledPromiseRejectionWarning: FetchError: The following error occurred while processing `https://vimeo.com/66520064` with the remark-embedder transformer `@remark-embedder/transformer-oembed`:

invalid json response body at https://vimeo.com/api/oembed.%7Bformat%7D?url=https%3A%2F%2Fvimeo.com%2F66520064&maxwidth=640&maxheight=480&format=json reason: Unexpected token < in JSON at position 0
    at /home/vlisivka/workspace/vlisivka.github.io/node_modules/minipass-fetch/lib/body.js:77:31
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async Object.getHTML (/home/vlisivka/workspace/vlisivka.github.io/node_modules/@remark-embedder/transformer-oembed/dist/index.js:87:18)
    at async /home/vlisivka/workspace/vlisivka.github.io/node_modules/@remark-embedder/core/dist/index.js:106:20
    at async Promise.all (index 8)
    at async /home/vlisivka/workspace/vlisivka.github.io/node_modules/@remark-embedder/core/dist/index.js:158:5

Suggested solution:

Replace {format} by json.

Environments

• @remark-embedder/transformer-oembed version: v3.0.0
• node version: v18.16.0
• npm version: v9.5.0

Relevant code or config:

What you did:

• I tried to use @remark-embedder/core (with @remark-embedder/transformer-oembed) as a remark plugin for MDX v2.
• I was going to use GitHub to manage the markdown and other static files, and Cloudflare Pages to build and deploy them.

What happened:

• ECONNRESET happend.

Error: MDX compilation failed for file "/opt/buildhome/repo/content/docs/index.mdx"
--
Cause: request to https://oembed.com/providers.json failed, reason: Client network socket disconnected before secure TLS connection was established
Details:
{
  "code": "ECONNRESET",
  "path": null,
  "host": "oembed.com",
  "port": 443,
  "errno": "ECONNRESET",
  "type": "system"
}

Reproduction repository:

• N/A

Problem description:

Presumably, the Cloudflare Pages build environment is placed under their proxy environment and HTTP requests to the outside world are closed.

Suggested solution:

There should be an alternative way to obtain JSON data without going through communication with the outside world; i.e., the following two solutions could be considered:

1. Write provider information obtained from URL as Object in the code.
2. Provide an option to load a pre-prepared JSON file.

The former method is NOT recommended because the amount of code becomes bloated, and the time required to update information increases.
Therefore, the latter method is recommended, as it seems to solve the problem without burdening the developer.

• @remark-embedder/transformer-oembed version:
• node version: 12
• npm version: 6.14.8

Relevant code or config

     const exampleMarkdown = `
        # My favorite YouTube video
        
        [This](https://www.youtube.com/watch?v=dQw4w9WgXcQ) is a great YouTube video.
        Watch it here:
        
        https://www.youtube.com/watch?v=dQw4w9WgXcQ
        
        Isn't it great!?
      `

      const htmlResult = await remark()
        .use(remarkEmbedder, {
          transformers: [oembedTransformer],
        })
        .use(htmlify)
        .process(exampleMarkdown);

      return {html: htmlResult.toString()};

What you did: after installing the plugin, importing it, and implementing it as above, it returns valid html, but the url has not been transformed.

What happened: the result is

<h1>My favorite YouTube video</h1>
<p><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">This</a> is a great YouTube video.
Watch it here:</p>
<p>https://www.youtube.com/watch?v=dQw4w9WgXcQ</p>
<p>Isn't it great!?</p>

Reproduction repository: https://github.com/johnstonmatt/remark-oembedder-demo

Problem description: transformer not transforming

Suggested solution: 🤷‍♂️