SyncDotToSvgExportPlugin not exported

[kkredit]

I am using an ArgdownApplication and the "export-web-component" process to render a map in a web application. I build the ArgdownApplication as follows:

import * as Argdown from '@argdown/core';

const createArgdownApp = () => {
  const argdown = new Argdown.ArgdownApplication();
  argdown.addPlugin(new Argdown.ParserPlugin(), 'parse-input');
  ...
  // argdown.addPlugin(new Argdown.SyncDotToSvgExportPlugin(), 'export-svg');  // Does not work
  argdown.addPlugin(new SyncDotToSvgExportPlugin(), 'export-svg');  // My custom plugin based on @argdown/core/dist-esm/plugins/SyncDotToSvgExportPlugin.js
  ...
  return argdown;
};

I would expect the SyncDotToSvgExportPlugin to be exported just like the others. Why is it not? Am I building the ArgdownApplication incorrectly?

(Further, I am experiencing SVG rendering issues in production, and I wonder if it is related. See https://stackoverflow.com/questions/65171756/viz-js-failing-to-render-dot-to-svg-in-production-build .)

[christianvoigt]

Hi, I decided against adding the plugin to the packages standard exports as it comes with viz.js which is quite large for web projects. In theory modern bundlers should not import it if it is not used (using "tree shaking"), however I had some issues with that so I decided to not add it to the exports of the package itself. Instead you have to import it directly from its source file with

import {SyncDotToSvgExportPlugin } from "@argdown/core/dist/plugins/SyncDotToSvgExportPlugin";

Please tell me if that fixes your problem.

[kkredit]

That indeed removes the need for my copy of the plugin. Thanks! Unfortunately, it does not resolve the issue described in the linked Stack Overflow post. Perhaps we should close this issue and debug that (if you have any suggestions) on SO.

[christianvoigt]

As I do not have a direct solution to your SO problem, it is easier for me to talk about it here (I am not really active on SO and have not enough reputation points to comment under your question).

Can you post the dot source code of the production version (from response.dot)?

[kkredit]

dot: "digraph \"Argument Map\" {\n\nrankdir = \"BT\";\nconcentrate = \"false\";\nratio = \"auto\";\nsize = \"10,10\";\nedge[arrowsize=\"1\", penwidth=\"1\"]graph [bgcolor = \"transparent\" ]\nsubgraph cluster_1 {\n  label = <<FONT FACE=\"arial\" POINT-SIZE=\"12\" COLOR=\"#000000\">Group</FONT>>;\n  color = \"#DADADA\";\n  margin=\"8\" style = filled;\n labelloc = \"b\";\n\n  n0 [label=<<TABLE WIDTH=\"180\" ALIGN=\"CENTER\" BORDER=\"0\" CELLSPACING=\"0\"><TR><TD WIDTH=\"180\" ALIGN=\"TEXT\" BALIGN=\"CENTER\"><FONT FACE=\"arial\" POINT-SIZE=\"10\" COLOR=\"#000000\"><B>Statement&#x20;1</B></FONT></TD></TR><TR><TD ALIGN=\"TEXT\" WIDTH=\"180\" BALIGN=\"CENTER\"><FONT FACE=\"arial\" POINT-SIZE=\"10\" COLOR=\"#000000\">Statement.</FONT></TD></TR></TABLE>>, shape=\"box\",  margin=\"0.11,0.055\", style=\"filled,rounded,bold\", color=\"#1b9e77\", fillcolor=\"white\", labelfontcolor=\"white\", fontcolor=\"#000000\", type=\"statement-map-node\"];\n  n1 [label=<<TABLE WIDTH=\"180\" ALIGN=\"CENTER\" BORDER=\"0\" CELLSPACING=\"0\"><TR><TD WIDTH=\"180\" ALIGN=\"TEXT\" BALIGN=\"CENTER\"><FONT FACE=\"arial\" POINT-SIZE=\"10\" COLOR=\"#000000\"><B>Statement&#x20;2</B></FONT></TD></TR><TR><TD ALIGN=\"TEXT\" WIDTH=\"180\" BALIGN=\"CENTER\"><FONT FACE=\"arial\" POINT-SIZE=\"10\" COLOR=\"#000000\">Contradictory&#x20;statement.</FONT></TD></TR></TABLE>>, shape=\"box\",  margin=\"0.11,0.055\", style=\"filled,rounded,bold\", color=\"#1b9e77\", fillcolor=\"white\", labelfontcolor=\"white\", fontcolor=\"#000000\", type=\"statement-map-node\"];\n\n}\n\n  n2 [label=<<TABLE WIDTH=\"180\" ALIGN=\"CENTER\" BORDER=\"0\" CELLSPACING=\"0\"><TR><TD WIDTH=\"180\" ALIGN=\"TEXT\" BALIGN=\"CENTER\"><FONT FACE=\"arial\" POINT-SIZE=\"10\" COLOR=\"#000000\"><B>Statement&#x20;3</B></FONT></TD></TR><TR><TD ALIGN=\"TEXT\" WIDTH=\"180\" BALIGN=\"CENTER\"><FONT FACE=\"arial\" POINT-SIZE=\"10\" COLOR=\"#000000\">Undercut&#x20;argument&#x20;1.</FONT></TD></TR></TABLE>>, shape=\"box\",  margin=\"0.11,0.055\", style=\"filled,rounded,bold\", color=\"#1b9e77\", fillcolor=\"white\", labelfontcolor=\"white\", fontcolor=\"#000000\", type=\"statement-map-node\"];\n  n3 [label=<<TABLE WIDTH=\"180\" ALIGN=\"CENTER\" BORDER=\"0\" CELLSPACING=\"0\"><TR><TD WIDTH=\"180\" ALIGN=\"TEXT\" BALIGN=\"CENTER\"><FONT FACE=\"arial\" POINT-SIZE=\"10\" COLOR=\"#000000\"><B>Statement&#x20;4</B></FONT></TD></TR><TR><TD ALIGN=\"TEXT\" WIDTH=\"180\" BALIGN=\"CENTER\"><FONT FACE=\"arial\" POINT-SIZE=\"10\" COLOR=\"#000000\">Supporting&#x20;argument&#x20;1.</FONT></TD></TR></TABLE>>, shape=\"box\",  margin=\"0.11,0.055\", style=\"filled,rounded,bold\", color=\"#1b9e77\", fillcolor=\"white\", labelfontcolor=\"white\", fontcolor=\"#000000\", type=\"statement-map-node\"];\n  n4 [label=<<TABLE WIDTH=\"180\" ALIGN=\"CENTER\" BORDER=\"0\" CELLSPACING=\"0\"><TR><TD WIDTH=\"180\" ALIGN=\"TEXT\" BALIGN=\"CENTER\"><FONT FACE=\"arial\" POINT-SIZE=\"10\" COLOR=\"#000000\"><B>Statement&#x20;5</B></FONT></TD></TR><TR><TD ALIGN=\"TEXT\" WIDTH=\"180\" BALIGN=\"CENTER\"><FONT FACE=\"arial\" POINT-SIZE=\"10\" COLOR=\"#000000\">Undercut&#x20;argument&#x20;2.</FONT></TD></TR></TABLE>>, shape=\"box\",  margin=\"0.11,0.055\", style=\"filled,rounded,bold\", color=\"#1b9e77\", fillcolor=\"white\", labelfontcolor=\"white\", fontcolor=\"#000000\", type=\"statement-map-node\"];\n  n5 [label=<<TABLE WIDTH=\"180\" ALIGN=\"CENTER\" BORDER=\"0\" CELLSPACING=\"0\"><TR><TD WIDTH=\"180\" ALIGN=\"TEXT\" BALIGN=\"CENTER\"><FONT FACE=\"arial\" POINT-SIZE=\"10\" COLOR=\"#000000\"><B>Argument&#x20;1</B></FONT></TD></TR><TR><TD ALIGN=\"TEXT\" WIDTH=\"180\" BALIGN=\"CENTER\"><FONT FACE=\"arial\" POINT-SIZE=\"10\" COLOR=\"#000000\">Attacking&#x20;statement&#x20;1.</FONT></TD></TR></TABLE>>, margin=\"0.11,0.055\", shape=\"box\", style=\"filled,rounded\", fillcolor=\"#1b9e77\", fontcolor=\"#000000\",  type=\"argument-map-node\"];\n  n6 [label=<<TABLE WIDTH=\"180\" ALIGN=\"CENTER\" BORDER=\"0\" CELLSPACING=\"0\"><TR><TD WIDTH=\"180\" ALIGN=\"TEXT\" BALIGN=\"CENTER\"><FONT FACE=\"arial\" POINT-SIZE=\"10\" COLOR=\"#000000\"><B>Argument&#x20;2</B></FONT></TD></TR><TR><TD ALIGN=\"TEXT\" WIDTH=\"180\" BALIGN=\"CENTER\"><FONT FACE=\"arial\" POINT-SIZE=\"10\" COLOR=\"#000000\">Supporting&#x20;statement&#x20;2.</FONT></TD></TR></TABLE>>, margin=\"0.11,0.055\", shape=\"box\", style=\"filled,rounded\", fillcolor=\"#1b9e77\", fontcolor=\"#000000\",  type=\"argument-map-node\"];\n\n\n  n1 -> n0 [type=\"contradictory\", color=\"#ff0000\", dir=\"both\", arrowtail=\"diamond\", arrowhead=\"diamond\"];\n  n2 -> n5 [type=\"undercut\", color=\"#551A8B\"];\n  n3 -> n5 [type=\"support\", color=\"#00ff00\"];\n  n5 -> n0 [type=\"attack\", color=\"#ff0000\"];\n  n4 -> n6 [type=\"undercut\", color=\"#551A8B\"];\n  n6 -> n1 [type=\"support\", color=\"#00ff00\"];\n\n}"

It is also live at https://kkredit.github.io/arg-viewer/. I have logging set to "verbose" and am logging the entire response to ArgdownApplication.run() to the console.

[christianvoigt]

This is really strange. My guess is that this is caused by the webpack bundling as I recently had a lot of problems with that as well (it also is the reason why I switched back from the async to the sync version of the plugin).

Is there a difference in the webpack configuration between dev mode and production mode? Then you could use the dev configuration for the production build just to check if that is the cause of the error and then narrow it down by successively reverting to the production webpack config.

[kkredit]

I am using the webpack configuration coming with create-elm-app. Prod: https://github.com/halfzebra/create-elm-app/blob/master/config/webpack.config.prod.js Dev server: https://github.com/halfzebra/create-elm-app/blob/master/config/webpackDevServer.config.js

I haven't gone through these in detail yet. I'll try ejecting from the tool and customizing it. Do you have any suggestions of where in the webpack config to look, based on your recent experience with sync/async Viz.js?

[christianvoigt]

My problems were caused by the async version of Viz.js and the new exports field of Viz.js's package.json, so they are not relevant for you.

I just switched to Webpack 5. Because Viz.js uses web assembly I activated those options in the "experiments section". You are probably still using an older Webpack version, but you might want to check how to support web assembly in Webpack 4.

[christianvoigt]

Oh and the other thing to check is code minification. I think that is the main difference between dev and production build. In the worst case you have to deactivate it.

Why do you need to dynamically generate the svg from Argdown? If you want to present some Argdown argument maps on your webpage I would normally recommend to generate the web components offline and simply use copy & paste to insert them into your html. The advantage of this "static" approach is that your visitors do not need to load the Argdown library and Viz.js in their browser.

[kkredit]

I am on Webpack 4. Based on https://github.com/aduh95/viz.js#synchronous-api, I thought the method we are using is JS only, so web assembly support wouldn't be an issue? As a quick test I did disable minification via the UglifyJsPlugin, but that produced the same result.

I certainly could use static web components for the sake of showing some argument maps that I've generated. The purpose of this webapp though was more experimental. I wanted to do it this way partially just because I can, and partially because I thought it would be neat to add "include section X" check boxes and a "set group depth" slider to dynamically adjust the map. (The way I've used Argdown is to generate one huge map and apply different filters to generate views, so playing with the generation settings could be interesting.)

[christianvoigt]

Hi @kkredit, how did this turn out? If you are no longer working on this, I would close this issue. If you have any more questions, just let me know.

[kkredit]

@christianvoigt thanks for the reminder, I will close the issue.

Even after disabling all the optimization I could find (and this morning fetching the latest package updates), the app produces the same result. At this point, I will fall back to statically generated WebComponents. If I play around more with dynamic generation (not currently planned), I will try Dagre.