Next Version & Plugin system

[axe312ger]

As discussed via PM on twitter with @technopagan and @efegurkan, we should rewrite sqip to be a plugin based system.

This step could be used to refactor the codebase, here is my proposal:

Todo

• transform the code into one style via eslint + prettier style(code): implements eslint & prettier #31
• replace argv with yargs. Allows more complex cli argument parsing. Replacing this and this replace argv with yargs for proper help and argument parsing #34
• split up primitive svg group fix and blur filter to be used as or in plugins, remove unused xmldom and apply group fix via cheerio
• transform api to async api and provide sync method Async I/O #5 implement async API #42
• upgrade all dependencies implement async API #42
• add tests and aim for ~90% unit test coverage, make some integration/e2e tests. I'd go for jest and nixt
• build the actual plugins [WIP] refactor/plugin system #43 -->

Possible plugins

• primitive itself (if primitive is a plugin, you can reapply sqip on svgs to use the other plugins without modifying your actual svg content, could straight fix Support configuration options for underlying SVG converter #22, too)
• blur filter
• loading animation filter (Example: https://axe312ger.github.io/svg-loading-animation/)
• svgo (set your own options or just skip it)
• .. more? There are many possibilities. Maybe outlined shapes via potrace like https://github.com/EmilTholin/image-trace-loader does?
• https://jmperezperez.com/drawing-edges-svg/
• https://jmperezperez.com/svg-placeholders/#Shapes
• Gradients based on vibrant colors
• Primitive alike script that uses gradiants in all shapes to fake the image. Might be super small in filesize, could have less performance + better visual output due to missing buggy svg blur filter

If you skip the plugins configuration, we just apply the current defaults to achieve simple blurred svg previews.

Current config:

const sqip = require('sqip');

const result =  sqip({
    filename: './input.jpg',
    numberOfPrimitives: 10,
    mode: 3,
    blur: 8
});

New plugin config:

const sqip = require('sqip');

const result =  sqip({
    filename: './input.jpg',
    plugins: [
      sqip.primitive({
        numberOfPrimitives: 10,
        mode: 3
        // just pass everything to primitive
      }),
      // Add blur if you need it
      sqip.blur({
        factor: 8
        // maybe allow other blur types?
      })
      // Blend in shapes over time (Would be my first plugin)
      sqip.loadingAnimation({
        ease: 'easeIn',
        duration: 3000
      })
    ]
});

The progress of this is tracked in the next branch. PR: #35

[efegurkan]

First of all thank you @axe312ger solid plan.

Since we are planning to become a more complex project with these additions. We should also add tests to these plan as well. It should be simple to write unit tests for most of the code and the plugin system would actually help us on there.

For the integration tests, as far as I remember (see #8) primitive will not generate the same result always. Not sure how to approach there exactly. In theory if we mock primitive, we can have some integration tests to test parts that does not include primitive.

[axe312ger]

Thanks Efe, you are very welcome.

I agree with the tests. I'd go for jest since it gives really good DX :)

We could use cheerio for checking the primitive output. Just count the shapes and see if the type of shapes matches the given mode. At least on a minimal level as it is not our job to ensure primitive is working properly.

[axe312ger]

After #36 is done, the async API can be done with upgrading all dependencies (only svgo missing atm since it is async online since v1)

Straight afterwards we can start creating the plugin api, extracing the blur and make our own plugins. Can't wait to add my svg loading animation plugin 😏

[axe312ger]

Argh, just realised I will need to implement babel to make proper readably async code for node v6.

I guess there is no way around, I really don't want to nest/chain all the promised. async await is great and is available as soon node v8 gets into LTS... sooo... one year of babel.. I guess we can life with it 😅

[efegurkan]

Hey Benedikt, I personally wouldn't mind babel stuff. 👍

[axe312ger]

Alright cool. Will start with it soonish after my vacation. I will blog about SQIP which may boost this, too :)

…

On 19. Jun 2018, 14:41 +0200, Efe Gürkan YALAMAN ***@***.***>, wrote: Hey Benedikt, I personally wouldn't mind babel stuff. 👍 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[maxnordlund]

I'm so excited for this, gonna make my life a lot easier 😄 Also, since almost a year has passed node 6 is going bye-bye 🎉

But since babel is already in, let's not add more work to the pile. Thank you for this lovely library ❤️

[axe312ger]

Closed in favor of #90

@maxnordlund you are very welcome to test our new v1 alpha :)