Liquify and the future of this extension!

[panoply]

Hey all users 👋

Firstly, thank you for using this extension. As some of you aware, over the last 12 months I have been working on the next version of this project with the end goal of bringing modern IDE feature to multiple variations of the Liquid Language. This endeavour that has taken a very long time to conclude and this mainly comes down to a few things, like the daily grind of adulthood, work, covid and mostly because Liquid is a customisable language with no real formal grammar, it's a templating language so thats its very nature. Coming up with a solution that will be able to accommodate its various use cases was rather difficult to say the least. Multiple rewrites, lack of sleep and a somewhat steep adoption in new techniques and approaches in software development/engineering etc has resulted in delayed releases.

This issue aims to provide any curious users awaiting on the next release a feature ship list as well as give some insight into what to expect.

Liquify

The next release will be shipping under a new name, which is "Liquify" the reason for this is because support will also be made available in Sublime and Atom. Additionally, the project will open source a multitude of tools and third parties, like its AST parser, TextMate grammars, LSP client and various rollup bundle utilities which are used in the development environment that people may find useful in projects unrelated to the tool.

Variation Specific

Liquify will treat each Liquid Variation differently. Users who are developing with Jekyll do not require Shopify variation features, for example the {% schema %} tag is unique to the Shopify Liquid variation only, it is not available in the Jekyll/Standard/Eleventy variation. The same logic applies to Jekyll/Eleventy where something like frontmatter is not supported in Shopify and therefore users should not be subject to features that are not supported in the development environment they are working within.

In Liquify, you will define your variation on a per-project basis, this will tell the tool to load and execute according to the engine the developer has defined in their .liquidrc file.

Language Server Protocol

Liquify will use the Language Server Protocol (LSP for short) to facilitate its features. LSP is generally leveraged and used by official languages like Python, Elixir, JavaScript and more, so Liquid will be hanging out with the big guys in the code game. More importantly, by leveraging LSP Liquify will become available to any editor that understands the protocol.

Completions

Liquify will provide code completions of tags, objects and filters for multiple variations of Liquid, ie: Shopify, Jekyll, Eleventy etc. Completions will really empower your development workflow, especially for Shopify developers as the entire Shopify theme API will be at your fingertips. For those using Standard Liquid or Jekyll/Eleventy you were not forgotten and completions are facilitated also.

Scope Completions

It's common practice in Liquid to set a variable and then reference that variable or split it up and iterate over the values, whatever the case might be, if you work with this templating language, you're going to use {% assign %} or {% capture %}. Liquify will keep track of your variables, treating them as "scopes" in each file they are defined and from here will automatically be supplied to completions.

Extendable Completions

Completions will be extendable, this means Jekyll/Eleventy developers will be able to provide completions to any custom Liquid tags/filters that you may be implementing through a plugin. You can simply define any extendable completions within the .liquidrc and boom, they are catapulted right into your document tag.

Externally Referenced Completions

Liquid is often referencing data from external files. In Shopify (for example) you will reference locales, or settings_data.json whereas in Jekyll or Eleventy you will reference _collection or _data yaml/json files. In most cases you call upon this data using Liquid and while that has worked just fine for the last decade, the landscape has changed and those files can be monolithic. Services like DatoCMS empower developers by generating these files from a series of models and so it's not always easy remembering what is what. Liquify solves this issue and will scan your workspace for any files that the variation may require or use and from here supply them to you. It does this progressively and will cache results.

This feature may not make it to the official release, but rest assured will be available in a minor post 3.0.

Embedded Language Completions

The completion feature goes one step further by providing embedded language support for code blocks like the Shopify {% schema %} tag where the contained JSON will support completions (so no more shitty or otherwise annoying snippet patches, hooray!) – Embedded language completions use Language Services made available by vscode and you will able to assert new embedded language blocks to specific tags, truly customisable.

Hover Descriptives

Liquify will provide users with hover descriptives of syntax, this means you will never have to goto a documentation page again. The tool will provide you with the official description of each object, object property, tag, or filter relative to the variation it belongs to. This feature will really help devs leverage the language to its fullest and use aspects and tags that you might otherwise not have known existed.

Validations/Linting

Liquify will support syntax validations and linting capabilities. This is a great feature that not only helps you write clean and concise Liquid code, but also will prevent you from writing incorrect syntax. Even though Liquid is a very basic and simple language, it can sometimes get quite chaotic in large code bases and scouring code for parse issues can get tiresome. This feature aims to prevent this and enables you or your team to implement a strict styleguide of how Liquid syntax should be expressed, while at the same automatically fixing errors that may occur.

Users will have the option to control linting via the available rulesets, which can be customized to suit your desired tastes. Want auto-spacing within tags? No problem. Want enforce {% capture %} only variables, No problem. Whatever the case, you will get control via the rulesets.

Codelens / Document Linking

In variations outside of the Standard variation, we have {% include %} (or {% render %} in Shopify) tags which allow developers to reference an external file, otherwise known as snippets or partials. Liquify understands these type of tags and will provide a document link to the file that is being referenced, think of this like import in JavaScript. Simply, cmd+click to open the linked file or peek the content of the include via codelens. Its dope fam, really dope.

Formatting

A lot of developers use this extension for the formatting capabilities, you'll get that goodness in Liquify and it's a lot more powerful. All issues relating to the formatting have been addressed accordingly and by adopting LSP along with the the powerful Liquify AST parser, formatting is far less error prone and won't mess up your code like it has a habit of doing at times. It is still powered with PrettyDiff but now relies more on Sparser. Because Liquid is almost always infused with HTML, rulesets and formatting options are now geared towards a structure and default that is more suitable to a Liquid use case, with indented attribute wrapping/ordering and much more.

Digesting Prettier/JS Beautify

Post Liquify release, the ability to digest prettier/js beautify rules will be made available, this is because PrettyDiff is capable of understanding formatting rulesets supplied by these formatters. This means if you're fanboy or fangirl of those tools, Liquify will respect your presets in those files and work with them to facilitate your beatification taste.

No more injection grammars

In the current version (2.3) grammar injections are leveraged so as to provide and respect HTML Language features like HTML completions and validation supported in vscode. This comes at a cost which I was unaware of when first implementing them and this has led to some errors and headaches. In Liquify, grammar injections have been boycotted but HTML language features have been preserved, this means that Liquid will not interfere with HTML syntax, instead Liquid and HTML are combined and work with one another. I want to apologize to anyone that suffered at that really terrible implementation of mine, I was young and reckless. The new approach will be tightly coupled with variation specific Liquid and Liquify users will get each variation supplied to them as separate languages, for example Liquify will provide:

• Liquid Standard
• Liquid Shopify
• Liquid Jekyll
• Liquid Eleventy

You will need to choose what variation and grammar to use, opposed to the current approach of selecting HTML. This also means a separation of syntax highlighting specific to the variation you're working with, happy days!

Improved Syntax Highlighting

Liquify has gone a level deeper to bring more expressive syntax highlighting to your editor, you will get even more clear and precise highlighting of code, which allows to you better distinguish Liquid from HTML or other languages, additionally, some great improvements were made to structure of textmate files, which improved rendering speed.

Freemium Model

Liquify will operate on a freemium license model, which means it will be partially proprietary, but chill fam, before you bring upon the wrath of cancel culture, hear me out. Firstly, I am not going to hustle you and all the features you have in the current version are still going to be available in Liquify for free and will forever stay that way. Additionally, most of the features listed here are available for free too. There will be no annoying distractions, popups or "buy me, buy me" bullshit like we all have suffered at the hands of other tech tooling. The extension will function uninterrupted without licensing and again to reiterate the vast majority of features will be free, however some features if you so happen to want them will require a small one-time licensing cost or if you only need to use those features for a project, then you will be able to lease them on a per month basis.

Alight, how much?
Currently, I am still working on the intricacies of this, as of now, licensing will be required for features which pertain to the SaaS variations (ie: Shopify) and/or for some advanced features that pertain to non-SaaS variations – to be clear this still being decided, but please note that individuals and agencies will be subject to different pricing. In terms of cost, for individuals who wants to lease, it will be around the same price as a decent coffee and for the bandits who want to license up, then you will be looking at around the same cost as paperback book. This will be a one time cost, so no ongoing or yearly commitments, you pay, you get, signed sealed delivered.

Any chance it won't ship proprietary
There is still a chance that the tool will ship free with no cost and I really hope that it comes to fruition, fingers crossed!

Conclusion

I've listed the main features you will expect to see in Liquify and I hope anyone that was curious gets a little more insight. There are a lot more great additions shipping, things like .liquidrc intellisense, an optional theme, semantic highlighting, inline comment ignores & formatting, improved support when using Liquid in JavaScript, CSS, SCSS, Markdown, various extensibility, incremental parsing and much more.

The official release is getting closer. To give an ETA is still hard but users can rest easy knowing that it should conclude and go out well before we close this shitty year of 2020, so in the next few months you can expect to be using Liquify.

Thanks,
Panoply.

[redareda9]

I guess the extension isn't maintained anymore?
As no news from Aug 9..

[panoply]

Before end of year guys. Sit tight.

…

Sent from my iPhone

On 13 Nov 2020, at 09:11, redareda9 ***@***.***> wrote:  I guess the extension isn't maintained anymore? As no news from Aug 9.. — You are receiving this because you were assigned. Reply to this email directly, view it on GitHub, or unsubscribe.

[0xlkda]

Any chance for vim users?

[panoply]

I’ll have to look into it. I’m sure VIM supports LSP.

…

Sent from my iPhone

On 8 Dec 2020, at 12:23, Alex ***@***.***> wrote:  Any chance for vim users? — You are receiving this because you were assigned. Reply to this email directly, view it on GitHub, or unsubscribe.

[panoply]

For everyone watching or in this thread.

Currently in the process of the final steps for Liquify. I'm likely to get the beta out in the next couple of days, this initial release is going to include the vast majority of all bug fixes and ship a bunch of new features etc. It's going to be a breaking change, so for those who are working with the extension on a everyday basis, do expect upon updating that you will need to make some manual adjustments (which I will document).

Thanks all for your patience. The wait is nearly over!

[ff6347]

@panoply Thank you for working on this. Can't wait to see what is in the 🎁

[MaxDesignFR]

Just starting out with VSCode so it comes handy I can't wait to see! If that catches your fancy, a youtube tuto could be very helpful to get the setup right first time and showcase the features, how-to etc. (just a suggestion).

[panoply]

Thanks for the input @Maxime-cn. I'll try and cover as much as I can via liquify.dev.

[nova93]

Go go go! Not much time left :-D

[wisniewski94]

@panoply bump :)

[craigjamesdobson]

Hey @panoply

Any update on this?

[samueldsquire]

👀

[russellr922]

@panoply I dropped $50 on this issue on Bountysource(https://www.bountysource.com/issues/92909946-liquify-and-the-future-of-this-extension), I know it isn't much but just looking for a rough timeline. This is highly desired in the Shopify ecosystem.

[HugoHeneault]

Just discovered liquify -- seems awesome! Hope you're going well @panoply and that we can see your work soon. :-)

[MaxDesignFR]

Hi everyone,

Since the topic is ignored and liquify.dev website no longer exist, I assume we can no longer expect a new release any time soon, hopefully all is good for @panoply.
What is still the best way to use vscode with Shopify development nowadays? If someone can share a list of the best reliable extensions he uses, along with its config, that would be helpful for a lot of us, because it seems this topic is not tackled very well anywhere on the internet, and this issue would at least find some answers worth exploring for the time being.

[panoply]

Hi all,

I am sorry I have not been able to release this as yet. I have been going through some really hard times this year. Without going into to much detail but to give you all some answers. Right before concluding and preparing to launch, I went through a pretty heavy breakup with my gf of many years. I lost my house, my dogs and I ended up having to leave country I was living in.

Please bare with me. I will have it ready in due time.

[wisniewski94]

@panoply this is super bad, if there is anything I can do in order to help you then please DM me on Twitter or send an email 🤙 This is what the open-source community does - helps each other.

Meanwhile, I think we can put this on hold, there are more important things :)

Stay strong mate, thanks for letting us know 💪

[russellr922]

Man, that’s a lot for anyone to take on. Hope you are doing okay. Thank you for the taking the time to give us an update.

[0xlkda]

Wow, that's a big hit. Stay strong mate. Thanks for the update 🍀

[Matb85]

Huh, hope you'll make ends meet.
Hang in there!

[rickydazla]

GF, house, country... but your dogs dawg?! 😩

[panoply]

Thank you all for you kind messages and patience. It means a lot to me, truly. I began working on the project again today, trying to pick-up where I left off on it and get the last of stuff ready. I will aim to get a beta version out as soon as I can for you all. Once I can get the initial beta out, I will provide an invite to a discord which is mainly for Shopify Developers but we have a Liquify channel laying dormant so if any issues occur in the beta you can just shoot a direct message.

---

Side note: The house, breakup and country were not the hardest part, I am used to moving around but not having my dogs has really messed with me, I guess its true that hell hath no fury like a woman scorned. I like to think that my pampered little hairless terrorist will be with me again one day, the other 2 I miss dearly too but they were my ex's more than they were mine and at least they are all still healthy (even if they don't get the big walks that they grew accustomed to with me). They say hope will drive a man crazy, but without hope, we haven't got much. Cherish your dogs folks as they are biggest gift in the world to us humans. Also, for what it's worth, no matter what the circumstance, always make sure you've got equal legal standing in relationships, cause love only goes so far in some cases 😞.

[panoply]

I had some delays because of my day time job. It's mostly ready for beta release and I am testing everything, little hesitant to drop the beta. Some last minute features I cooked in were HTML parsing and linting capabilities. I wanted to actually bring intellisense support for embedded JavaScript (<script>) regions but this is not as easy as it may seem which is actually the main thing holding up the beta release as I really wanted this cooked in before giving users the the first release. I managed to get intellisense capabilities for the following embedded regions:

• {% schema %}
• {% style %}
• {% stylesheet %}
• {% stylesheet 'scss' %}
• <style>

So you will get completions, hovers, formatting and validations for code written in those regions. but <script> and {% javascript %} regions only have syntax highlighting and no completion or intellisense features, which is rather annoying.

I am just not fully comfortable dropping the beta just yet but it could be any day now that it become available. Below is a screen which gives a preview of several of the features available.

Screen.Recording.2021-07-22.at.18.31.43.mov

[panoply]

Just to add:

I have not done a great job of documentation, so this is taking some time. Because there are going to be a lot of Jekyll users or those using other variations that are not Shopify Liquid, ensuring users know how to extend the extension to support custom tags and in addition how to customize the linting features is also another delay issue. Navigating the code base will take seasoned devs at least a day or two cause its a rather large project so getting help from others in the community is not really possible, it sort of just all rests on my shoulders atm.

There are 3 main aspects to the tool, which are:

1. Parser
2. Specifications
3. Language Server

The parser does a lot of the heavy lifting, the Specifications are used by the parser and are hard coded data files, similar to Custom Data files some of you might be aware of with the HTML Language Service that is maintained by the vscode team. A similar approach has been adopted to Liquify. This allows developers to extend and maintain custom tags, filters and objects in Liquid variations that are not supported natively in Liquify. I have done a terrible job in documenting how one can extend, contribute or modify those, so by releasing it at this point without having concluded that aspect would possibly come back to haunt me, as example here is the Shopify variations {% paginate %}specification reference:

One can actually implement a completely new tag, following that same schema directly within a .liquidrc file but I have not informed on how to do it, so essentially this awesome feature that Jekyll or even 11ty users will no doubt use and require will have no information on how to do so. For the sake of clarity, here is how one would actually do this.

Lets create a new Liquid tag called marvelous which accepts some arguments, those arguments are of different types, the first argument is a string and its required, it must have a value of marvin. The marvelous tag also accepts an optional 2nd argument within its tag that can be the value of hagler - so this custom Liquid tag could look like this:

{% marvelous  'marvin' %}

// or

{% marvelous  'marvin', 'hagler' %}

The way in which one would describe this custom tag and in addition get validation and completion support in their editor would be to provide it as a specification reference as aforementioned in the .liquidrc file, it would be done like this:

I mean, such a feature is crucial to make known but I just have not documented how to do this in a good way, this barely touches the surface and is the most basic example case. One could go way further, inform that a tag requires a parameter or accepts an object etc etc.

---

The documentation is difficult tbh cause aside from the specifications element of the project, the linting aspect also needs context around what each rule does. For example, one ruleset is syntactic_placements which essentially validates the placement of either HTML or Liquid tag pairs, eg:

Screen.Recording.2021-07-22.at.18.58.15.mov

For most, this is easily to understand, but the novice developer who installs the beta would potentially get a bunch of validations for issues like this and not understand what it means and just assume something is wrong with the extension and not their code so documenting this in a non-technical way i've found to be super difficult. Another example of this would be the extraneous_whitespace rule which is an auto-fix ruleset that will trim the inner spacing of Liquid tags, eg:

Screen.Recording.2021-07-22.at.19.03.12.mov

A lot of users will auto-format, so such a ruleset will be a no-brainer but a lot of users will not auto-format or auto-fix lint issues and may not care about extraneous whitespace within tags, but the problem is I have not documented or described the ruleset and it can only be turned off within the .liquidrc config file.

When it comes to the HTML linting aspects, because I cooked HTML parsing into the core, we are able to validate HTML syntax rather efficiently, in addition get a ton of cool features. It's not uncommon for developers to forget how tags are placed, so sometimes you will get code like this:

Screen.Recording.2021-07-22.at.19.08.35.mov

What you see there is a </div> tag incorrectly placed, where the {% endif %} tag is located, that </div> should be before the {% endif %} - there are multiple ways you configure how Liquify notifies of such a code issue, because an error like this will happily pass through a Liquid engine but will wreak havoc on the HTML side, the defaults I shipping with the extension does not do the best job of informing about what has gone wrong, again my lack of documentation prevents users from understanding how to handle these aspects in their own efficient way.

Staying on the HTML aspect, users have the ability the validate attributes, but this might not always be desirable, this is default ruleset, wherein a user will get completions for HTML tag attributes as they type but the moment they type an attribute that is not valid or apart of the HTML official spec, you will get validation warnings, eg:

Screen.Recording.2021-07-22.at.19.19.01.mov

This ruleset can be turned off, but again I have done a terrible job of documenting it, in addition some users may not want completions to activate on HTML attributes, such I have not yet made available as an option. The beta release can go out but I am just highly hesitant because of issues, which are not really issues but just aspects that are not clearly informed upon not being completed or accessible to others.

The last aspects I wanted to touch on in this update is the new Shopify online store 2.0 features. It would be crazy to not ship support for this, luckily everything is covered but ensuring that Liquify has capable context of everything put me back a week or so.

Hope this gives everyone some answers.

TLDR: I have done shitty job of documentation and informing upon options and feature which is why I have not released the beta, I need to finish this before making it available. Sorry.

[wisniewski94]

@panoply it looks great! can't wait for beta :)

[jakew009]

@panoply this is probably going to sound like a weird comment but please make sure you find a way of turning this into a business. You have put a colossal amount of work into this and it sounds like you have had a pretty **** year, so deserve some luck and not to be stressing about the day job :)

People will pay for this if it works well (even if they say they won't).

[loicnestler]

Hey @panoply!
First of all: thank you for your work so far! I've read this thread and am amazed of the amount of effort you put into this!

I was just checking by to see what's the progress on the closed beta so far?
I've accepted a job for a client of mine who want a custom shopify theme and I haven't found a nice setup for VSCode yet to work with all features you're planning to implement (formatting, linting, snippets, ...).

In case beta isn't public yet: does anyone of you guys know another (at least partially) prod-ready setup / extension bundle for a pleasant workflow in VSCode while working on shopify themes?

Thank you!

[andronocean]

This looks beyond cool! I just stumbled across this thread while trying to figure out how to get functional syntax highlighting for liquid inside <style> tags (and get stylelint to shut up about syntax errors). Can't wait to try it out — docs or no docs 🤠 If there's beta space available, I'm interested.

BTW, I'd absolutely buy a paid license if the price was right — this would be a huge help for me. I mostly work with Kajabi themes that support some of Shopify's syntax, plus some of their own, so being able to define custom tags and filters would rock my world.

[polidario]

This has been the only extension that I have been using for Shopify theme development and I've taken a look at this repository and realized that this is not being updated regularly. However, I'm really looking forward to the beta version of Liquify.

I assume @panoply is the only one working on this extension? Are there any reasons why you're not allowing others to contribute and help? I'd love to help out honestly.

Or maybe the reason is you'll monetize this in the future?

[wisniewski94]

@bbbpppolly monetization is the reason. Fair enough, a lot of people need it and a lot of work is put into this.

[SmartKoolAid]

so what exactly does liquid do currently? Are there really 0 workflows for this language? How is there a billion dollar industry in shopify and no syntax highlighting/formatting for .liquid files? im quite stunned really lol.

[iBug]

Happy new year @panoply and everyone! All the best wishes and hope life is getting better and better for you, so that you can ship your amazing product sooner.

[jdunham2]

Just wanted to check if there is any news on this?

[symonxdd]

Probably not...

[panoply]

I am here guys but I am still going through a lot of stuff in my personal life. It will arrive eventually but I just cannot get to it right now and though in our last communications I was very close to the beta I unfortunately had to stop working on it abruptly cause of my daytime job.

@toklok has worked on the project and also poured hours into it. There are just so many moving parts to Liquify. I had to take over PrettyDiff and essentially refactor that project since Austin has moved onto Shared File Systems among other things.

If someone wanted to join us/me in completing the final bits to get it a beta out, I would be happy to bring you in to the existing code base. If you are familiar with the following then please ping me:

• Language parser design and/or writing algorithms.
• LSP (Language Server Protocol)
• TypeScript
• Understands the VSCode extension ecosystem.

I would OS the Liquify project but I have been hesitant of this for many reasons. Shopify engineers themselves have been unable to provide 1/10th of the capabilities Liquify already supports with their maintained solution and Language Server so even in its current state the code base holds value and I would like it private for the time being.

I am sorry folks. I really am. I have not forgotten or abandoned this. I think about it a lot and feel guilty that I have had people wait for so long.

[panoply]

Updates:

I know I sound like a broken record but we are closer. I have decided to strip a lot of features and instead focus on getting a workable version out with just the fundamentals, bug fixes and the most useful aspects (completions, formatting, highlights configs etc). In addition to Liquify, I have also been working on Syncify which is a theme-kit alternative (more on that below). I will give you an update on each aspect and some insight on the current status quo.

Liquify

As previous comments over the last few years I have shared with all those interested, the project has been a large one to take on individually. I have had a rough few years, together with relationship issues and just personal stuff I was going through it was difficult to see the light at the end of the tunnel so-to-speak. I apologize for the continually broken promises. Liquify as aforementioned couples multiple projects together and is developed within a multi/mono-repo environment. Within the project environment exists several essential other projects that folks will be able to independently use. I have been over the Specifications, Parser and Language Server in #56 (comment). Below are the key features of Liquify:

• Formatting Support for Liquid in HTML, JavaScript and CSS
• Completion Support for Shopify API
• Advanced Syntax highlighting.
• Variation specific support, ie: Standard, Shopify, Jekyll etc
• Validation/Linting support for Tags, Filters and Objects

Keep in mind that when I say I have stripped features I am referring to different areas of these capabilities Liquify provides. For example, completions will not support {% schema %} section defined data references in the release. Below I will go over some additional key projects within Liquify, some of which I have already open sourced and folks can track the progress.

Prettify

The project Prettify is where those curious can see the brunt of the work for the formatting support that Liquify will operate atop of. Prettify is a hard-forked variation of the wonderful PrettyDiff project which I have actually taken over. The original author Austin has since moved onto Shared File Systems and given PrettyDiff is an extremely powerful formatting/beautification tool while working on Liquify of the last couple of years it become apparent that stripping and refactoring the original project was the best decision moving forward and given the familiarity with the PrettyDiff project I already I have, providing additional maintenance was something I wanted to offer.

Prettify will be the Liquify specific formatter that Liquify uses under the hood but it will also be available to those who want to leverage it in other projects or even online. Prettify will be ready to consume and use upon the release of Liquify.

Syncify

Thought most of the companies I work with or have worked with have since moved to Centra from Shopify. I still do work with a couple of clients who use Shopify and wanted to create a powerful theme-kit equivalent. I been putting together Syncify which while still a WIP is something that will be published together with Liquify. Syncify will be made available independent of Liquify but Liquify will provide built-in support for projects who decide to use it. It is geared towards Shopify Theme developers and will enable you to elegantly compose and develop themes.

Syncify will not impede on developer preferences and tool appropriation when it comes to handling asset files, so using tools like ESBuild, Webpack, Rollup, SASS etc etc to process asset specific files is made possible with ease and its main focus is to construct theme structures. Below is some the key features Syncify provides:

• Upload, download and watch multiple storefronts and/or themes.
• Clear, concise and informative CLI logging.
• File sync support, upload and download to and from store files endpoint.
• Supports HTML + Liquid and JSON minification.
• An elegant directory based metafields sync approach using JSON files.
• Built-in support for SCSS and CSS transpilation using SASS Dart and PostCSS.
• SVG Sprite and inline SVG snippet generation using SVGO.
• Intelligent path mapping capabilities for custom theme directory structures.
• Digests existing build tool configurations for asset transformations.
• Prompt based CLI/TUI and exposed module API for script usage.

The current readme is not upto date, but goes into more detail. Please keep in mind that Syncify will replace shopify-sync and is not yet available on NPM registry.

---

For those who are interested getting their hands on the BETA release of Liquify, please shoot me an email and I will arrange the VSIX when ready to you.

Thanks for everyone's patience, again, sorry for the broken promises and delays, I won't let you down guys.

[loicnestler]

Damn, sounds very promising so far!
I'd love to give the beta a try – however the email link is broken. :/

[panoply]

Fixed!

[panoply]

Hey all, come join the discord. I have the next month or so to focus on completing this project.

https://discord.gg/ZH4Cn22S

[loicnestler]

@panoply invite is sadly expired :/
can you provide a new one?

[panoply]

https://discord.gg/eUNEsxMuWt

[MattBudz]

what's the latest news on this?

[panoply]

Hey @Matb85,

So Liquify is still very much a thing and alive. The extension was in dire need of a version bump which is why we are on v3. I started building out Liquify 2 and bit years ago and what started out as something small quickly become a huge undertaking. As of right now the Liquify code base is nearly 100k lines that spans across 20 different packages that are operating out of a single monorepo. Included in the code base is various toolings for Liquid, all of which can be used independently, these include:

• Liquid + HTML Parser
• Liquid Language Specifications
• Liquid Language Server
• Prettify
• Moloko (Browser code editor running atop of ACE)

+ a whole lot more

Why v3 and not Liquify?

As aforementioned, the extension was in dire need of an update and because I cannot work on this exclusively it is hard to find the necessary time to ship it all while getting it right. Instead of making users wait and wait I felt it was important to at the very least make some movements and by leveraging some of tooling in Liquify, as such I was able to make a sufficient bump.

As always I apologise for making keen users wait on this. I'm not going to stop working on Liquify or throw in the towel as it has been something I've invested months into (on and off). This extension will be superseded by Liquify in a slow drip manner.

[panoply]

Update (Liquify is now Open Source!)

Just wanted to quickly update folks in this thread with ongoing development and supersede coming for Liquify. The project is now public and open source and can be found here. Though a lot of the code is still yet to be pushed from my local machine, curious developers can browse the monorepo and get a glance of the algorithm, parse approach and overall architecture that has gone into Liquify.

Those who are using the current version of this extension have likely been enjoying some of the new capabilities which I've made available in the lead up to Liquify. The next version 3.4.0 will bring even more great features to developers and it will also be the last minor version to be released as following 3.4.0 the Liquify supersede will become a reality.

What to expect?

Liquify will be initially made available under a preview release in the vscode marketplace. This will essentially be the "beta" and users will be able to install and use it while also reporting any bugs they encounter. Previous comments in this thread have touched on several key features, most of which are already available in the current version, but I will outline the additional capabilities you will get in Liquify.

Validations

Liquify supports complex validating of Liquid and HTML. You can control the level of validating which is incurred, similar to how you control linting tools (eslint, stylelint etc). Validations are briefly outlined in #56 (comment)

Types

In Liquid, Type support is somewhat unheard of but Liquify solves that. Essentially, typed assertion is available, which means you'll have validations and tips when type issues occur (eg: you try to iterate over a number type).

Definitions

Take the following code sample:

{% render 'some-file', arg_1: some.object, arg_2: 'some string' %}

In Liquify, it understands imports of this logic, so when you access the arg_1 or arg_2 values passed to the file, it will provide you with completions but also definition scopes, this means that you will be able to cmd+click on the reference and it will open the relative document import. The definition capability goes beyond just renders, but also works applied to inline code, for example:

{% capture foo %}
  Hello World
{% endcapture %}

{% # 200 lines later %}

{{ foo }}

Whenever you hover your cursor over {{ foo }} then you will have context and code preview of the capture contents, including range reference so you will be able to cmd+click and be take to the exact point of location in the document where the capture occurred.

Linked Documents

Similar to definitions, linked documents capability (which will actually be available in 3.4.0) provides you with project aware linking of different doucment. For example, take the following:

Screen.Recording.2022-12-27.at.18.26.46.mov

This will be available for all variations, not just Shopify but also Jekyll, 11ty etc.

Completions

The current version of the extension already supports an extensive list of completions. The Shopify variation already has support for tags, objects and filters. In version 3.4.0 I will actually extend this to locales, and settings_data.json files for Shopify, eg:

Screen.Recording.2022-12-27.at.18.30.48.mov

In Liquify, this will be taken to new levels. Not only will all the current completion capabilities be available, you will also have the ability to pull down Shopify metafield from remote stores and have completions exposed in the editor. In addition to the metafield completions, assets files are also available.

Lastly, assignment based completions will also be supported and various other Jekyll/11ty geared completion logics alongside completions for filter and tag arguments.

Signatures

Tag and Filter based signature support is exposed in Liquify. This will enable you to also have contextual awareness of the a tag or filters expected syntax structure and type formations. Very cool feature.

Shopify Liquid vs Liquify?

Shopify has recently began working towards a solution which intends to provide similar capabilities of Liquify. Their solution provides similar features but what is offered is less than that available in version 3.2.0. The features shipping in Liquify and the next release (#138) intend to solidify this extension as the preferred developer tooling solution for Liquid, across the text editor nexus.

My goals are to provide a better product, one which does far more and extends support cross platform. Users who have been enjoying the features since bumping to v3.0.0 have got glimpse of what is to come and I hope that the current list of available features have helped in your productively.

What's next?

Following the 3.4.0 all energy and work will move toward the Liquify supersede and all additional threads, updates and progress can be tracked within the Liquify monorepo repository. Given that the Liquify has been open sourced, discussions, feature request and other collaborative ideas or work will be handled there.

Lastly, Liquify is going to be FREE and OPEN SOURCE with no licensing or costs imposed. My hope is that users choose to use it over the alternative. That will make me truly happy.

I'm going to close this thread now. Wishing all health, happiness and a good new year!

See you on Liquify!