css and js from npm in a plugin

[Sebastian Ovide]

Hi All,

what's the cleanest way of adding JS and CSS files coming from npm dependencies ? Specifically (in this case) from "chartist" (https://www.npmjs.com/package/chartist). Do I need to copy those files some where and then tell to tiddlywiki to import them ? can I import them from node_modules/chartist ? 

I'm building a page with the plugin with this  

tiddlywiki ++./plugin build --verbose --output build/gh-pages/ --load deps --build index

and just exploring if it could in some how incorporate the dependencies...

Thanks

[PMario]

Hi Sebastian,

I didn't test the lib!

I'm not sure, how you intend to use / call the chartist functions. .. But if you want to access the API within a TW file, you'll need to follow a specific pattern.

So TW will be able to use the lib with node _and_ within a file TW.

It seems chartist has a dist directory at github. That should make it easy.  https://github.com/gionkunz/chartist-js/tree/develop/dist

You only need to include chartist.min.js and chartist.css (I'd go with the human readable CSS)since it seems there are no other dependencies, which is nice!

If you have a closer look at the TW plugin zlib: https://github.com/Jermolene/TiddlyWiki5/tree/master/plugins/tiddlywiki/jszip

It contains a "files" subdirectory, which list the 3rd party files. .. your config should be very similar. Have a close look at tiddlywiki.files

You also need the plugins.info, that is needed, so TW can extract and load the library.

If you look at startup.js in the jszip lib, you'll see, how the 3rd party lib can be accessed as a TW plugin. It's as simple as calling require().

If you can be more specific, what you want to achieve, it would be easier to help.

Hope that helps for the beginning.

-mario

[PMario]

uups,

I forgot, you should include a TW plugin Readme and License, which contains your plugin license _and_ link to the 3rd part License which is MIT.

-m

[Sebastian Ovide]

Hi Mario

thanks for that. 

I've a look at zlib, and it seems simple enough to include manually a JS. Any idea about the CSS ? would you use "require" also for the css  ? (ok... I have not tried it yet...)

I'm developing a plugin  https://github.com/sebastianovide/GettingSebDoing for personal use which is a fork of GSD5.

I was thinking to add  "chartist" to the package.json and then add it to the build command. Surely I could just add a "cp" command in the build script. I was thinking if perhaps adding the link to the js library in tiddlywiki.files  would result in tiddlywiki add it at build time. So just wondering if there is better ("cleaner") way of doing it....

[Sebastian Ovide]

ok, I did some playing and here what I've found. 

for the css: https://github.com/Jermolene/TiddlyWiki5/blob/master/plugins/tiddlywiki/highlight/files/tiddlywiki.files

about the location, "file": "../node_modules/chartist/dist/chartist.min.js", would work. :)

[林东吴]

Hi,

A modern way is to use things like webpack, to bundle all your JS and dependencies into a dist.js, and bundle css into a styles.html.

Then you can add dist.js.meta and styles.html.meta to add tags and title field.

And finally, just copy built files and meta files into your plugin folder.

LinOnetwo

Sebastian Ovide <sebasti...@gmail.com> 于2020年6月30日周二 上午7:00写道：

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/676e5698-d308-4279-b2f6-cc7805186ff1o%40googlegroups.com.