https://github.com/malipetek/liquivelte-vscode

Write svelte for your liquid templates.
https://github.com/malipetek/liquivelte-vscode

Last synced: 3 months ago
JSON representation

Write svelte for your liquid templates.

• Host: GitHub
• URL: https://github.com/malipetek/liquivelte-vscode
• Owner: malipetek
• License: mit
• Created: 2021-12-26T00:03:13.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2023-03-01T14:43:21.000Z (almost 2 years ago)
• Last Synced: 2024-10-11T12:52:31.755Z (4 months ago)
• Language: TypeScript
• Size: 2.49 MB
• Stars: 18
• Watchers: 4
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        


# Liquivelte

Create your Shopify theme with Svelte like components!

Liquivelte is a preprocessor and some utilities to generate compiled code and liquid content to enable SSR for data that is available in the Liquid context.

This plugin carries out a rollup build process in the background and generates necessary JS, CSS and Liquid content. Please be aware of file changes to your existing theme.

## Why

Because we love SvelteJS ♥️

## How

For every template/layout, we check for liquivelte includes and generate **JS** and **CSS** per file. This means on any page on store front we can have 2 entry points. For example you included 4 snippets with liquivelte format on the product template and you have 1 on the layout containing it. Then still 2 bundles will be included but one of them will initialize 4 modules and other will init 1.

We convert import statements from theme to prop imports for main components. We use same data for generating liquid content that will hopefully generate html to be hydrated by **SvelteJS**.

# Examples

```

  import product from 'theme';

  import product.title from 'theme';

  import ProductTitle from './folder/product-title.liquivelte';

  import Badge from './badge.liquivelte';

    {% if product.available %}

       Available 

    {% endif %}

{% for image in product.images %}

  
 

    {% include 'icon-pin' %}

  
 

{% endfor %}


  


    {% include 'icon-close' %}

  

  

  

   Click Meh 


  .icon { 

      width: 20px; 

    }

  input[text] {

    border: 1px solid olivedrab;  

  }

  form {

    border: 1px solid red;

  }

```

## How to include

- We can include a snippet with this syntax `{% include 'liquivelte', module: '[module_name]' %}`

- We can include sections as usual, we will check if it is in `src/sections` folder.

## Can do's

- ✅ We can import json serializable liquid objects with `import [__] from 'theme';` syntax

- We can import liquid object props with `import [__].[__] from 'theme;` syntax

- ✅ We can use liquid expression with dashes `{{- [__] -}}`

This is because we can not determine if it is a **SvelteJS** expression with an object declaration or a liquid output.

- ✅ We can include a form with type and prop, prop is for example product in the form type 'product'.

- ✅ We can include other snippets with `{% include '[__]' %}` syntax as usual.

- ✅ We can use control flow tags `{% if %}`, `{% else %}`, `{% elsif %}`, `{% endif %}`, `{% for %}`, `{% endfor %}``

## What we can not do

- ❌ We can not use `{{ [__] }}` syntax.

- ❌ We can not use `{% render %}`

- ❌ We can not have folders in sections folder.

- ❌ We can not use `with` when including liquivelte snippet : `{% include 'liquivelte' with module: '[module_name]' %}`