vscode-liquid icon indicating copy to clipboard operation
vscode-liquid copied to clipboard

Liquify and the future of this extension!

Open panoply opened this issue 4 years ago โ€ข 50 comments

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.

panoply avatar Aug 05 '20 12:08 panoply

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

redareda9 avatar Nov 13 '20 08:11 redareda9

Before end of year guys. Sit tight.

Sent from my iPhone

On 13 Nov 2020, at 09:11, redareda9 [email protected] 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.

panoply avatar Nov 13 '20 10:11 panoply

Any chance for vim users?

0xlkda avatar Dec 08 '20 11:12 0xlkda

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 [email protected] 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 avatar Dec 08 '20 12:12 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!

panoply avatar Dec 30 '20 22:12 panoply

@panoply Thank you for working on this. Can't wait to see what is in the ๐ŸŽ

ff6347 avatar Dec 31 '20 07:12 ff6347

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).

MaxDesignFR avatar Jan 05 '21 23:01 MaxDesignFR

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

panoply avatar Jan 06 '21 00:01 panoply

image Go go go! Not much time left :-D

nova93 avatar Jan 31 '21 15:01 nova93

@panoply bump :)

wisniewski94 avatar Feb 09 '21 13:02 wisniewski94

Hey @panoply

Any update on this?

craigjamesdobson avatar Mar 15 '21 11:03 craigjamesdobson

๐Ÿ‘€

samueldsquire avatar Mar 23 '21 10:03 samueldsquire

@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.

russellr922 avatar Mar 24 '21 00:03 russellr922

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

HugoHeneault avatar Mar 24 '21 05:03 HugoHeneault

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.

MaxDesignFR avatar Apr 28 '21 16:04 MaxDesignFR

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.

panoply avatar May 05 '21 22:05 panoply

@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 ๐Ÿ’ช

wisniewski94 avatar May 06 '21 01:05 wisniewski94

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.

russellr922 avatar May 06 '21 05:05 russellr922

Wow, that's a big hit. Stay strong mate. Thanks for the update ๐Ÿ€

0xlkda avatar May 06 '21 06:05 0xlkda

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

Matb85 avatar May 08 '21 16:05 Matb85

GF, house, country... but your dogs dawg?! ๐Ÿ˜ฉ

rickydazla avatar May 08 '21 20:05 rickydazla

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 avatar May 08 '21 22:05 panoply

All the best @panoply - Stay strong bro ๐Ÿ‘Š

samueldsquire avatar May 11 '21 09:05 samueldsquire

I just wanted to keep you all updated. I will be accepting beta testers soon. Below is a couple of screen captures that showcase some the features to help keep up the anticipation. ;)

Liquify is smart enough to know exactly how its grammar should be expressed. It knows what is acceptable, For example, below we are validating the replace filter and as you would with any linter tool, we get live feedback as we type:

https://user-images.githubusercontent.com/7041324/119270014-dd108e80-bbfa-11eb-8bee-03c20858319b.mov

In addition, we have hover descriptives. All Liquid tags, filters, parameters, objects and object properties will provide hovers which reference the documentation pertaining to the variation (Shopify, Jekyll or Standard) we are working within. As you can see, HTML Intellisense features are not excluded, instead Liquid works together with HTML features.

https://user-images.githubusercontent.com/7041324/119270094-527c5f00-bbfb-11eb-934f-6f9fe10db8b3.mov

Here we validating how an object should be expressed:

https://user-images.githubusercontent.com/7041324/119270126-78096880-bbfb-11eb-948b-972761e0e1d9.mov

Here we are validating Shopify section schema. Notice the validations, completions and formatting all work in sync. This feature essentially treats the contents of {% schema %} basic tags in the Shopify Liquid variation as its own JSON Schema store. The data entered here is also cached and provided in object completions within the files.

https://user-images.githubusercontent.com/7041324/119270190-cd457a00-bbfb-11eb-9d98-3cf84900c722.mp4

Here we have Object property completions:

https://user-images.githubusercontent.com/7041324/119270264-26ada900-bbfc-11eb-8789-711028349471.mp4

There are a few more aspects to conclude with, but it's safe to say we at the home stretch and this nearly year long endeavor will soon make it to the big time! Again, thank you all for the patience and understanding. It's been very difficult to get this right and with everything going on in my life, made things a little harder. I will update you all as time progresses.

panoply avatar May 23 '21 17:05 panoply

This is going to change the game ๐Ÿ™Œ

samueldsquire avatar Jun 01 '21 15:06 samueldsquire

Current update:

Parser and Scanner

This part of the project is at 80% completion. The parser supports incremental updates and can walk a 15k line document in less than 400ms. It still needs some work as the scanner does a lot of the heavy lifting, handling validations, tracking cursor position etc etc. Because the parser is working alongside the vscode HTML Language feature, optimising this has taken a long time, because I did not want it to interfere with the vscode implementation. It's operating well at the moment.

Completions

Completions have been rather difficult to get right. So many developers are accustomed to leveraging snippets and I wanted to move away from snippets in Liquify. Instead, the approach is similar to that of JavaScript intellisense. Trigger characters are wired up in Liquify, as I have before mentioned, I will not ship snippets in Liquify in favor of completion. I wanted to ensure a smooth adaption for developers, it was really important for me. The result was the following:

In Liquify, tag completions appear when you input certain characters at certain points. For example sake, I will describe the the percent character. When you type % all tag completions will show (not objects, tags). I have set a whitespace trigger threshold for tags, filters and output objects ({{). This means they will still be available when you type % (for example) and you can cancel out of the completions by hitting escape. The percent character and curly brace is not apart of HTML grammar syntax, so the likelihood of those using the Liquid template language to reach for such characters outside of language itself is minimal (unless you are infusing Liquid with JavaScript, which you should avoid as much as possible), but I digress.

When you select a tag completion, the remainder of the tag is generated. Each step will provide additional completions, for example:

% - List of tags is displayed % - List of tags displayed is persisted for 1 whitespace character (optional, you can also run completion without space) % if - The if tag is asserted (typed) and at this point you either hit return or tab.

Liquify generates the tag. For example sake, your cursor is represented as ^

{% if^ %} {% endif %}

Your cursor will be positioned after the if keyword and validation will notify you that a condition is required. When you begin to enter your expression, variables you have defined will be listed first. In Addition, object values will complete at this point too. Let's say you have defined your condition:

{% if foo^ %} {% endif %}

The cursor will move to the end of the fookeyword, if you were to enter a . or [ character, Liquify will check for any objects names that have properties under foo and they will show up if available. Let's say we do have an object in the Liquid variation called foo that has a property value of bar:

{% if foo.bar^ %} {% endif %}

At this point, you will be able to tabout which will move your cursor to the inner content of the condition block:

{% if foo.bar %} ^ {% endif %}

However, if you wish to express a comparison against that value, by typing space, the operator value completions are listed:

{% if foo.bar ==^ %} {% endif %}

  • !=
  • ==
  • or
  • <
  • >
  • and

Depending on the Liquid variation you are working with, other operators will show, for example in Shopify you get the additional contains.

If you do not express the comparison, Liquify will complain that you have incorrect syntax. This entire development flow is used for objects, tags, filters and tag contexts. Hitting cmd+s will auto-format and for those who like to leverage whitespace trims, a formatting rule is available that will automatically apply them to tags, you can control this as you would any linting based rule.

Completions are triggered when the following characters are typed:

  • {
  • %
  • |
  • :
  • [
  • "
  • '
  • ,

Depending on where you are entering these characters different completions are loaded, for example you cannot trigger % tag completions within tags and you cannot trigger | filter completions in tags that do not accept filters. The linter and validation will do their best to notify you when you have a made mistake. The most important aspect and take away is that stepping back from snippets in favor of trigger completions might feel extraneous at first, but I can assure you, it is a much faster and more efficient way to write code (regardless of the language). In addition, it is the best way to trigger valid completions for specific Liquid variations.

Formatting

This aspects is done, there are a bunch of rules and formatting styles you can customize to your own preferences. The formatter leverages the powerful Sparser parser and PrettyDiff engine. These are rather older but suffice really nicely with Liquid. In addition. I have provided a schema store so you guys can understand what each rule does. Below is some of the formatting rulesets that will be shipped:

{
 "engine": "shopify",
 "format": {
   "ignore": [
     "ignore/*.liquid"
   ],
   "liquid":{
     "dash_trim": "off",
     "force_filter": false,
     "force_line": false,
     "quote_convert": "none"
   },
   "html": {
    "correct": true,
     "force_attribute": false,
     "preserve": 1,
     "wrap": 80,
     "preserve_text": true,
     "space_close": true
   },
   "javascript": {
     "preserve": 1,
     "method_chain": 0,
     "quote_convert": "none",
     "format_array": "indent",
     "format_object": "indent",
     "braces": false,
     "no_semicolon": true
   },
   "scss": {
     "css_insert_lines": true,
     "preserve": 2,
     "braces": false
   },
   "css": {
     "css_insert_lines": true,
     "preserve": 2,
     "braces": false
   },
   "json": {
     "preserve": 1,
     "braces": false,
     "brace_style": "expand",
     "brace_line": false,
     "format_array": "indent",
     "format_object": "indent",
     "tags": [
       {
         "tag": "script",
         "attr": "application\/json",
         "type": "html"
       },
       {
         "tag": "script",
         "attr": "application\/json\\+ld",
         "type": "html"
       }
     ]
   }
 }
}

Notice there is a tags option for each embedded language. You can set Liquid or HTML tags to format in a customized manner. For example, you might capture some JSON in a capture assignment variable, eg:

{% capture some_json %}
{
  "foo": "bar"
}
{% endcapture  %}

There is nothing stopping you from informating the formatter to beautify the contents of the tag in JSON format, for example sake you could achieve this by defining the tag in the json ruleset, eg:

{
   "json": {
     "preserve": 1,
     "braces": false,
     "brace_style": "expand",
     "brace_line": false,
     "format_array": "indent",
     "format_object": "indent",
     "tags": [
       {
         "tag": "capture",
         "attr": "some_json",
         "type": "liquid"
       }
     ]
   }
}

Liquify will then format any capture tag attributed with some_json according the the rulesets you have defined in the JSON format rule block. This feature is pretty cool, it prevents the formatter for running wild, give you some sanity. The attr field accepts a Regular expression string format.

Note that the tags ruleset will only be applied to markup (HTML) tags or Liquid tags.


Again, thank you all for your patience. I would be very much interested to here thoughts about completions aspect. We are close guys. It's just such a big build and I have had to learn so much. I really do not want to release it without it being stable. Thanks for keeping with me on this and I will share some screencasts of the completions feature this week.

Stay happy and stay healthy.

panoply avatar Jun 01 '21 23:06 panoply

Update

Below is the final ship list for v1.0.0-alpha.1 which will be available this month (yes, this month no bullshit). Not all features will make it into the initial rollout and those who wish to opt-in for the alpha will need to report on what issues they encounter before we can move to a beta release and then to a pre-release (pre-release will be available on marketplace). All those who wish to install the v1.0.0-alpha.1 candidate will need to do so manually (not via marketplace) and I will inform on the steps for that in the new Liquify repository I will make public.

I recommend that those of you who are new to development or do not feel completely confident in the nexus maybe should refrain from installing and using the v1.0.0-alpha.1 candidate when it become available. Those of you who are veterans of the game or have good standing knowledge please help me in reporting back on what issues you encounter.

Features

  • Syntax Highlighting
  • Completions
  • Validations
  • Formatting
  • Codelens
  • Hover Descriptions

Syntax Highlighting

As mentioned previously, Liquify does not inject grammars into HTML unlike the current version. Instead grammars will be provided on a variation specific basis which means that files using different extensions will either attempt to automatically assign the grammars to the language and set the language mode or require you to manually select the language mode. Below are the languages (grammars) shipping in this candidate:

  • Liquid (Shopify) - Shopify Liquid
  • Liquid (Jekyll) - Jekyll Liquid
  • Liquid (11ty) - Eleventy Liquid

Completions

The release will include completions and hover support for all tags and filters which belong to the standard liquid variation. Unfortunately, Jekyll and 11ty variations for completion support will be a post-release feature. The Shopify Liquid variation (for the most part) has been mapped and thus completions will be available for almost all tags, object and filters. There are likely to be issues which I need reporting back on, below will be things to look out for:

  • Invalid or incomplete descriptions.
  • Scope issues (ie: certain objects made available where they otherwise should not be available).
  • Variable Tracking (ie: Render tags assigned variable via parameters not showing)
  • Missing object properties
  • Expression completions not showing (ie: {{ object['prop'] }} where propcompletion does not show)

These aspects are just minor things and easily amended in the code base, but I will need reporting on where and how the issue occurred. The "issues" in Liquify repo will inform on how one should report once the candidate becomes available.

Validations

This is likely to be the most challenging and errors might show when its valid syntax or code. Not all tags will have validations implemented on them, but the vast majority will. If a validation appears then you will need to inform on where and how it occurred and also be sure that it is a defect in the parser and not just shitty expressed liquid. The validations (linting) capability works different to how other linters you might be using operate and in this candidate we are going to be getting the basics right before exposing rule sets to be applied and enforced on the template language.

Formatting

Because the formatting feature is using PrettyDiff and the Sparser parser we have a long list of format options to work with that are otherwise not available in Prettier or JSBeautify. Those installing the candidate will need to inform on where and how issues occurred, also be sure that the formatting is not adhering to the options you have set. In the .liquidrc file all the format options are using a schema store which inform on what the rule does to syntax, for example:

https://user-images.githubusercontent.com/7041324/121796213-b8b33b00-cc17-11eb-9a5f-058fbad01333.mov

If you feel that the descriptives do not do a good job of describing the option, you should inform. I will ship the candidate with a basic (recommended) ruleset pre-defined. I am yet to come across any major issues with the formatting aspect, like those seen in the current version, however I am not testing against all edge cases.

Liquify Project

Liquify is written mostly in TypeScript (some packages are JS) and exists a monorepo built atop of the powerful pnpm. The repository will be released partially open-source and partially closed. It consists of multiple packages which one could consume on the NPM registry and they will work outside of Liquify (if one so happens to require them), the main packages include:

  • @liquify/liquid-parser
  • @liquify/liquid-language-specs
  • @liquify/liquid-schema-stores
  • @liquify/liquid-language-server

In addition, there are multiple smaller packages used in the Liquify development process, these are mostly internal (project-specific) and/or Rollup plugins which help hook into the transpilation process when compiling the distributed files. The monorepo is currently private but I will make public in the alpha release. I am informing upon this now so anyone who wishes to contribute can get some idea of that to expect on the source-side. Importantly, some packages will be excluded from the public facing repo.


That should be about it, if you do read these updates and are invested in the progress or would like to hear, please let me know and we can connect. It is difficult to work on this solo and I do not have any friends within the development community as my day job is within the Fashion industry (I'm a rogue dev) so bouncing ideas is really appreciate and beneficial.

Thanks and the next update will contain the visx.

panoply avatar Jun 13 '21 06:06 panoply

Exciting times!

samueldsquire avatar Jun 15 '21 13:06 samueldsquire

Is this out yet officially? I see available June 2021. Mostly commenting to keep track of thread.

tr1s avatar Jul 21 '21 13:07 tr1s

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.

https://user-images.githubusercontent.com/7041324/126675458-fa52bdbf-7fea-49b7-8a89-279d6b67d44f.mov

panoply avatar Jul 22 '21 16:07 panoply