Add plugin local asset collection #1129

ang-zeyu · 2020-03-16T14:26:50Z

What is the purpose of this pull request? (put "X" next to an item, remove the rest)

• [x] Documentation update
• [x] Enhancement to an existing feature

Resolves #839

#442 - fixed with stopPropagation instead of relying on runtime window.location.href shifting
#433's hiding/displaying of anchor icons - done using css instead

What is the rationale for this request?

There is some degree of logic within the markbind core code that is related to plugins.
This is because the plugin getLinks and getScripts methods only allow linking to external sources.

We can enhance the API hence, allowing us to encapsulate plugin logic within itself, which should lead to better code readability.

What changes did you make? (Give an overview)
Commit organization:

Add local plugin asset collection, and small update to docs accordingly
Encapsulate markbind-plugin-anchors using this new feature
Add and update tests for (1)
Update tests for (2)

Is there anything you'd like reviewers to focus on?
Was there a reason #433 was done using runtime jQuery?

Testing instructions:

npm run test should pass

Proposed commit message: (wrap lines at 72 characters)
Add local asset collection for plugins

Plugins might want to package their own assets for use instead of
relying on external sources only.
The main markbind code also has some amount of logic and styles
relating to the anchor plugin.

Let's add this, allowing the getLinks and getScripts methods to return
link and script elements that have a relative or absolute file path as
its src or href attributes.
Let's encapsulate the anchor plugin's logic and styles within the
plugin itself, which should lead to better code readability.
This also allows the user to turn off the plugin without risk of side
effects.

openorclose · 2020-04-01T16:17:36Z

src/Page.js

@@ -983,6 +984,28 @@ class Page {
   * Collect page content inserted by plugins
   */
  collectPluginsAssets(content) {
+    const getResolvedAssetElement = (html, tagName, attrName, plugin, pluginName) => {


only one suggestion:

The implementation of utils.buildScript and buildStyleSheet plus this getResolvedElement seems rather redundant, where build* produces <script src =...></script>, and getResolvedElement later reparses it. If buildScript could instead return something like

{ type: 'scriptsrc', src: 'file.js' }

then we wouldn't need to use cheerio at all, just convert the src first and then return <script src =convertedsrc.js></script>.

One con with this suggestion would be that the user cannot manually return <script src = path></script>.

Maybe it's better to leave it in so the user has more choices?

Reworked the buildScript/buildStylesheet a little with the new pluginUtils from #1100, its the same from a plugin author's standpoint though ( changes are limited to the first of the 4 commits ).

{ type: 'scriptsrc', src: 'file.js' }

for this, I think returning <script/link> directly is more intuitive from a plugin standpoint, since we represent html in html and not in json. This way the author can also add other variables to the tag as well easily, e.g. <link prefetch ... />.

Ah, but now the user has to use buildScript if they want an external link.

So they can't add other attributes like <link prefetch href = "externa.css" />.

The first implementation is probably better

Good point, reverted that. ( getResolvedAssetElement is able to stay in pluginUtils though )

openorclose · 2020-04-01T16:19:04Z

Nice refactor!

LGTM, only one small suggestion.

ang-zeyu · 2020-04-05T12:29:00Z

@marvinchin could I get your thoughts here as well? since you opened up #839 =)

The main change here being letting plugins add local assets instead of just ones from external cdns ( first of the 4 commits )

marvinchin · 2020-04-06T12:02:57Z

Sorry for the delays 🙏 I'll look at this tomorrow!

ang-zeyu · 2020-04-06T14:51:49Z

Sorry for the delays 🙏 I'll look at this tomorrow!

No rush, not in a hurry to get this merged! 😄

nbriannl

Could you rebase your PR 🙂

marvinchin

The implementation mostly looks good to me, just a couple of comments.

marvinchin · 2020-04-10T14:39:51Z

src/Page.js

-                                            this.frontMatter, linkUtils);
+        let pluginLinks = plugin.getLinks(content, this.pluginsContext[pluginName],
+                                          this.frontMatter, linkUtils);
+        pluginLinks = pluginLinks.map(linkHtml => getResolvedAssetElement(linkHtml, this.baseUrl,


Should we keep pluginLinks and const and delcare a new const resolvedPluginLinks instead?

marvinchin · 2020-04-10T14:53:56Z

src/util/pluginUtil.js

@@ -50,4 +53,42 @@ const pluginUtil = {
  },
 };

-module.exports = pluginUtil;
+/**


I think the intention of pluginUtil is to contain a set of useful functions for plugin writers to use. getResolvedAssetElement seems to be something more internal to how markbind handles assets from plugins, and does not need to be exposed to plugin writers. So maybe it should belong somewhere else?

moved it back to page

marvinchin · 2020-04-10T14:56:47Z

test/functional/test_site/expected/markbind/js/setup.js

@@ -13,63 +13,47 @@ function scrollToUrlAnchorHeading() {
  }
 }

-function flattenModals() {


Just to confirm - this isn't needed anymore?

yup, its a leftover from the bootstrap-vue PR

marvinchin · 2020-04-10T15:02:12Z

src/Site.js

+      this.plugins[plugin]._pluginAssetOutputPath = path.resolve(this.outputPath,
+                                                                 PLUGIN_SITE_ASSET_FOLDER_NAME, plugin);
+
+      fs.mkdirSync(this.plugins[plugin]._pluginAssetOutputPath, { recursive: true });


Even if plugins have assets, the sources might be urls right? In that case, there might not be any assets copied to the output folder. Should we defer the creation of the folder until the point that we are copying it over?

marvinchin · 2020-04-10T15:28:55Z

Also just to note, this PR could have been split into two parts - one adding support for local assets, and then the other one using it to fix markbind-plugin-anchors 🙂 This way each PR could be focused and easier to review. Not necessary to split them up now though!

marvinchin

LGTM 🚀

ang-zeyu · 2020-04-11T07:16:03Z

@nbriannl need you to remove the change request =X

updated below on latest, no changes

Plugins might want to package their own assets for use instead of relying on external sources only. Let's add this, allowing the getLinks and getScripts methods to return link and script elements that have a relative or absolute file path as its src or href attributes.

The main markbind code has some amount of logic and styles relating to the anchor plugin. Let's encapsulate the anchor plugin's logic and styles within the plugin itself, which should lead to better code readability. This also allows the user to turn off the plugin without risk of side effects.

ang-zeyu force-pushed the encapsulate-anchor-plugin branch 3 times, most recently from 3a1202e to a4f55ac Compare March 23, 2020 10:21

le0tan added the pr.Enhancement 📈 Enhancement to an existing feature label Mar 29, 2020

ang-zeyu force-pushed the encapsulate-anchor-plugin branch 2 times, most recently from cd2227a to a17c456 Compare March 31, 2020 15:09

ang-zeyu requested a review from openorclose March 31, 2020 15:12

openorclose reviewed Apr 1, 2020

View reviewed changes

ang-zeyu force-pushed the encapsulate-anchor-plugin branch from a17c456 to 0072df5 Compare April 1, 2020 16:17

ang-zeyu force-pushed the encapsulate-anchor-plugin branch 2 times, most recently from a6f73ab to a7420c0 Compare April 2, 2020 07:29

openorclose approved these changes Apr 2, 2020

View reviewed changes

ang-zeyu force-pushed the encapsulate-anchor-plugin branch from a7420c0 to 093b59f Compare April 4, 2020 13:46

ang-zeyu requested a review from marvinchin April 5, 2020 12:24

ang-zeyu force-pushed the encapsulate-anchor-plugin branch from 093b59f to 1a15f4c Compare April 9, 2020 07:13

marvinchin force-pushed the master branch from dfff008 to dab3a28 Compare April 10, 2020 09:26

nbriannl requested changes Apr 10, 2020

View reviewed changes

ang-zeyu force-pushed the encapsulate-anchor-plugin branch from 1a15f4c to 735b706 Compare April 10, 2020 12:17

ang-zeyu requested a review from nbriannl April 10, 2020 12:44

ang-zeyu force-pushed the encapsulate-anchor-plugin branch from 735b706 to ff4a5b4 Compare April 10, 2020 13:06

marvinchin reviewed Apr 10, 2020

View reviewed changes

ang-zeyu force-pushed the encapsulate-anchor-plugin branch from ff4a5b4 to e8094a5 Compare April 10, 2020 16:03

ang-zeyu requested a review from marvinchin April 10, 2020 16:15

marvinchin approved these changes Apr 10, 2020

View reviewed changes

marvinchin added this to the v2.13.2 milestone Apr 10, 2020

nbriannl approved these changes Apr 11, 2020

View reviewed changes

ang-zeyu force-pushed the encapsulate-anchor-plugin branch 2 times, most recently from dfab13c to 1fadfbb Compare April 11, 2020 07:39

ang-zeyu added 4 commits April 11, 2020 17:13

Add tests for local plugin asset collection

bacaffc

Update tests for encapsulating anchor plugin

f672dcf

ang-zeyu force-pushed the encapsulate-anchor-plugin branch from 1fadfbb to f672dcf Compare April 11, 2020 09:13

ang-zeyu merged commit 248898d into MarkBind:master Apr 11, 2020

ang-zeyu mentioned this pull request Apr 12, 2020

[v2] Fix anchor navigation in panel headers #1191

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add plugin local asset collection #1129

Add plugin local asset collection #1129

ang-zeyu commented Mar 16, 2020 •

edited

openorclose Apr 1, 2020 •

edited

openorclose Apr 1, 2020

ang-zeyu Apr 1, 2020

openorclose Apr 2, 2020

ang-zeyu Apr 2, 2020

openorclose commented Apr 1, 2020

ang-zeyu commented Apr 5, 2020 •

edited

marvinchin commented Apr 6, 2020

ang-zeyu commented Apr 6, 2020

nbriannl left a comment

marvinchin left a comment

marvinchin Apr 10, 2020

marvinchin Apr 10, 2020

ang-zeyu Apr 10, 2020

marvinchin Apr 10, 2020

ang-zeyu Apr 10, 2020

marvinchin Apr 10, 2020 •

edited

marvinchin commented Apr 10, 2020

marvinchin left a comment

ang-zeyu commented Apr 11, 2020 •

edited

Add plugin local asset collection #1129

Add plugin local asset collection #1129

Conversation

ang-zeyu commented Mar 16, 2020 • edited

openorclose Apr 1, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

openorclose commented Apr 1, 2020

ang-zeyu commented Apr 5, 2020 • edited

marvinchin commented Apr 6, 2020

ang-zeyu commented Apr 6, 2020

nbriannl left a comment

Choose a reason for hiding this comment

marvinchin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

marvinchin Apr 10, 2020 • edited

Choose a reason for hiding this comment

marvinchin commented Apr 10, 2020

marvinchin left a comment

Choose a reason for hiding this comment

ang-zeyu commented Apr 11, 2020 • edited

ang-zeyu commented Mar 16, 2020 •

edited

openorclose Apr 1, 2020 •

edited

ang-zeyu commented Apr 5, 2020 •

edited

marvinchin Apr 10, 2020 •

edited

ang-zeyu commented Apr 11, 2020 •

edited