@syncify/cli 0.2.4-beta → 0.3.0-beta

package/readme.md

@@ -4,7 +4,7 @@
 
 # SYNCIFY
 
-A lightening fast, extensible and superior alternative Shopify CLI (Theme Development) tool. Syncify provides developers with a powerful CLI and employs an intuitive approach for creating Shopify themes.
+A lightening fast, extensible and superior alternative Shopify CLI (Theme Development) tool. Syncify provides developers with a powerful CLI and employs an intuitive approach for creating Shopify themes. It's batteries included solution designed for advanced theme development.
 
 ### Demos
 
@@ -13,25 +13,24 @@ A lightening fast, extensible and superior alternative Shopify CLI (Theme Develo
 
 ### Key Features
 
-- Watch, upload, download and export to multiple storefronts and themes.
-- Intelligent path mapping capabilities for custom directory structures.
-- HOT reloading of assets, section, snippets, templates and layouts.
-- Clear, concise, informative and beautiful CLI logging.
+- Watch, upload, import and export to multiple storefronts and themes.
+- Intelligent path mapping resolutions that support custom directory structures.
+- HOT Reloading of assets, section, snippets, templates and layouts.
+- Clear, concise, informative and beautiful TUI/CLI logging.
 - An elegant global directory based metafields sync approach using JSON files.
-- Digests and spawns existing build tools for asset transformations.
-- Prompt based CLI/TUI and exposed module API for script usage.
-- Pull, push and merge support for aligning local and remote sources.
-- Supports additional resources like Files, Pages and Redirects.
+- Supports spawned processing with existing build tools.
+- Additional resource controls for syncing Files, Pages and Redirects.
+- Provides a simple Reusable Sections approach for shared section references
 
 ### Why?
 
-I have been working on the Shopify platform for several years and nothing the Shopify team have produced has actually increased my productivity. Despite the advancements Shopify has made in recent years I still find that their developer tooling to be rather average. The Shopify CLI is cool and all but for theme development it fails to achieve fluidity.
+I have been working on the Shopify platform for several years and nothing the Shopify team have produced has increased my productivity. Despite the advancements Shopify has made in recent years I still find their developer tooling to be missing the mark and a clear disconnect is apparent. The Shopify CLI is cool and all but for me the approach to theme development it fails to achieve fluidity. Syncify is how I believe theme creation, development and maintenance should be done.
 
-Syncify is how I believe theme creation, development and maintenance should be handled. It's fast, flexible, extensible, scalable and will not lock you into some restrictive low grade elementary workflow. It allows you to progressively enhance your development process and produce the most efficient and performant results with the tools you already love.
+Syncify provides you with essential stack tooling for producing lean, performant and refined themes. It's fast, flexible, extensible, scalable but most importantly, it's an un-restrictive workflow.
 
-# Install
+# Installation
 
-Syncify is distributed as both an ESM and CJS module. It is recommended that you install as a development dependency in your project opposed to installing globally.
+Syncify is distributed as both an ESM and CJS module. It is recommended that you install as a development dependency in your project opposed to installing globally. Please consider choosing and adopting [pnpm](https://pnpm.js.org/en/cli/install) as your package manager for most optimal usage.
 
 **PNPM**
 
@@ -55,22 +54,6 @@ npm i @syncify/cli --save-dev
 yarn add @syncify/cli --dev
 ```
 
-# Overview
-
-The main purpose of Syncify is to facilitate seamless theme development between your local machine and Shopify store/s. It ships with build, watch, download, upload, merge and pull capabilities for interfacing with remote Shopify webshop's. Together with a prompt based execution model, Syncify provides developers with theme control that aims to exceed expectations.
-
-### Theme Files
-
-Syncify uses built-in capabilities when handling snippets, templates, layouts, locales, configs and sections. Files using a `.liquid` or `.json` extension are typically considered theme files in syncify and always determined before handling. Content transformations like minification and path mappings are applied to these files types either natively or with plugins.
-
-### Data Files
-
-Syncify exposes and introduces an elegant low-level method for interfacing with shop metafields, pages, redirects and files. Pull, push, merge and delete resource capabilities are provided for data identified files and for metafield resources a directory/file path based approach is employed which allows developers to advance their workflows in a controlled and extensible manner.
-
-### Asset Files
-
-Syncify does not want to re-create or impede on developer preferences and tool appropriation. Build tools and bundlers specifically designed for processing different asset types can be spawned and run in parallel with Syncify's `build` and `watch` instances, but for more advanced use cases, Syncify also provides developers with pre-processor capabilities via [transforms](#transform). Transform can be leveraged for processing TypeScript, JavaScript, CSS, SCSS and SVG file types by exposing integrated configuration wrappers around popular and performant modules like ESBuild, SASS Dart, SVGO Tailwind and more!
-
 # Setup
 
 After installing you will need to configure a connection to your shopify store. Syncify requires you provide either an Admin API Access Token (recommended) or API Key and Secret as credentials.
@@ -169,10 +152,12 @@ process.env['YOUR-SHOP-NAME_API_SECRET'] = 'abcdefghijklmnopqrstuvwz';
 
 # Configuration
 
-Syncify supports `syncify.config.js` and `package.json` configurations. Depending on your preference, either option suffices and no restrictions are imposed. If you are defining options within your projects `package.json` file you can assign options on the `syncify` property.
+Syncify supports `syncify.config.ts` and `package.json` configurations. Depending on your preference, either option suffices and no restrictions are imposed. If you are defining options within your projects `package.json` file you can assign options on the `syncify` property.
 
 ### Supported Files
 
+Syncify supports the following configuration file types. The recommended approach is the TypeScript `syncify.config.ts` configuration file type.
+
 - `syncify.config.ts`
 - `syncify.config.js`
 - `syncify.config.ts`
@@ -182,11 +167,11 @@ Syncify supports `syncify.config.js` and `package.json` configurations. Dependin
 
 ### Default Options
 
-This is defaults used in a `syncify.config.js` file. Options commented out within [transforms](#transform), [processors](#processors) and [minify](#minify) require peer dependencies to be installed to be used.
+Below are the **default** configurations. Options commented out within [transforms](#transform), [processors](#processors) and [terser](#terser) require peer dependencies to be installed for usage.
 
 <!-- prettier-ignore -->
 ```ts
-import { defineConfig } from '@syncify/syncify';
+import { defineConfig } from '@syncify/cli';
 
 export default defineConfig({
   input: 'source',
@@ -206,6 +191,7 @@ export default defineConfig({
     history: true,
     method: 'hot',
     inject: true,
+    strategy: 'hydrate',
     scroll: 'preserved',
     server: 3000,
     socket: 8089,
@@ -229,6 +215,9 @@ export default defineConfig({
     sections: 'sections/*.liquid',
     snippets: 'snippets/*.liquid',
     metafields: 'metafields/**/*.json',
+    metaobject: [
+      'templates/metaobject/*.json'
+    ],
     customers: [
       'templates/customers/*.json',
       'templates/customers/*.liquid'
@@ -248,29 +237,30 @@ export default defineConfig({
   },
   views: {
     snippets: {
-      prefixDir: false,
       separator: '-',
-      global: []
+      global: [],
+      prefixDir: false,
+      renamePatterns: {}
     },
     sections: {
-      prefixDir: false,
       separator: '-',
-      global: []
+      prefixDir: false,
+      global: [],
+      renamePatterns: {}
     },
     pages: {
-      suffixDir: true,
+      safeSync: true,
       author: '',
-      global: [],
-      language: [
-        'html',
-        'markdown'
-      ],
+      importLanguage: 'html',
+      suffixDir: false,
+      global: []
     }
   },
   transforms: {
     script: {},
     style: {},
-    svg: {}
+    svg: {},
+    image: {}
   },
   processors: {
     json: {
@@ -278,7 +268,10 @@ export default defineConfig({
       indent: 2,
       useTab: false,
       exclude: []
-    },
+    }
+
+    // Refer to transforms section for usage
+    //
     // esbuild: {},
     // sass: {},
     // postcss: [],
@@ -286,6 +279,7 @@ export default defineConfig({
     // svgo: {},
     // sprite: {},
     // sharp: {},
+
   },
   terser: {
     json: {
@@ -305,6 +299,9 @@ export default defineConfig({
       stripDashes: true,
       exclude: []
     },
+
+    // Refer to terser section for usage
+    //
     // script: {},
     // style: {},
   }
@@ -313,7 +310,7 @@ export default defineConfig({
 
 # Getting Started
 
-It is relatively easy to get started developing Shopify themes using Syncify. If you are converting an existing project and using Theme Kit or another build environment you can progressively adapt it into your workflow by manually configuring how Syncify should behave. Whatever the case, have a look at the [Syncify Strap](https://github.com/panoply/syncify-strap) repository.
+It is relatively easy to get started developing Shopify themes using Syncify. If you are converting an existing project and using Theme Kit, Shopify CLI or another build environment you can progressively adapt it into your workflow by manually configuring how Syncify should behave. Whatever the case, have a look at the [Syncify Dawn (Basic)](https://github.com/panoply/syncify-dawn-basic) example repository as a starting point.
 
 ### Pre-requisites
 
@@ -335,16 +332,41 @@ Before going over the features Syncify provides, it is assumed that you have don
 - [Processors](#views)
 - [Terser](#views)
 
-## Directories
+# Directories
+
+Syncify requires you to define custom **base** directory paths that point to theme files. The values you provide will refer to a directory name that is relative to the root of your project. You **cannot** define multi-level directories (eg: `some/dir`) or reverse paths (eg: `../dir`). You can pass these references within your syncify configuration file or via the CLI.
+
+> **Note**
+>
+> References passed in via the CLI will overwrite those provided in syncify configuration files.
+
+### Input → Output
 
-In Syncify you define custom base directories for your theme files. The values you define refer to a directory name which is relative to the root of your project. You **cannot** define multi-level directories (eg: `some/dir`) or reverse paths (eg: `../dir`).
+Syncify expects projects to have an **input** directory path which contains theme **source** files. Files contained within an input directory are written to your defined **output** directory path. The generated output will be reflective of your online store and in most cases you will add the output directory to your `.gitignore` file (because it can always be rebuilt from input). If you have become accustomed to working from a single directory structure (i.e: Shopify Dawn) it is important that you understand the difference between the **input** and **output** directory approach.
+
+Single directory structures are not a viable approach when building modern and performant Shopify themes. Client-side (front-end) development is not SaaS specific and thus, with the proper tooling, Shopify theme development does not require one to adhere to the imposed approach of Shopify Dawn (via Shopify CLI). The argument for multi-directory architecture rests upon the millions of projects which isolate source ~ distribution variations and appropriate such logic.
+
+### Default Structure
+
+Below is an example of a Syncify theme structure using the defaults. Syncify will assume this directory structure if you do not provide any customizations via the CLI or within your syncify config file.
+
+```bash
+├─ source              # The src directory where you develop and theme files exist
+├─ theme               # The output directory where source files will be written
+├─ .env                # Shop credentials, such as Admin API Token or API key and secret
+├─ .gitignore          # Files to be ignored by git, e.g: your .env file
+├─ package.json        # The package.json file common in all Node projects, self explanatory
+├─ syncify.config.ts   # The syncify config file, you can optionally use package.json
+└─ tsconfig.json       # TypeScript configurations, this is optional but preferred.
+
+```
 
 <!-- prettier-ignore -->
 <table>
   <thead>
     <tr>
-      <th width="500px">API</th>
-      <th width="500px">CLI</th>
+      <th width="500px">Config File</th>
+      <th width="500px">CLI Flags</th>
     </tr>
   </thead>
   <tbody>
@@ -352,14 +374,16 @@ In Syncify you define custom base directories for your theme files. The values y
       <td>
 
 <!-- prettier-ignore -->
-```json
-{
-  "input": "source",
-  "output": "theme",
-  "import": "import",
-  "export": "export",
-  "config": "."
-}
+```ts
+import { defineConfig } from '@syncify/cli';
+
+export default defineConfig({
+  input: 'source',
+  output: 'theme',
+  import: 'import',
+  export: 'export',
+  config: '.'
+})
 ```
 
 </td>
@@ -367,10 +391,14 @@ In Syncify you define custom base directories for your theme files. The values y
 
 <!-- prettier-ignore -->
 ```bash
---input  -i   # source
---output -o   # theme
---config -c   # config
---export -e   # config
+
+
+--input  -i   # Input Path
+--output -o   # Output Path
+--config -c   # Config Path
+--export -e   # Export Path
+
+
 ```
 
 </td>
@@ -379,241 +407,93 @@ In Syncify you define custom base directories for your theme files. The values y
   </tbody>
 </table>
 
-### Input > Output
-
-Syncify expects projects to have an **input** directory path which contains theme **source** files. Files contained within an input directory are written to your defined **output** directory path. The generated output will be reflective of your online store and in most cases you will add the output directory to your `.gitignore` file because it can always be rebuilt from input.
-
-If you are used to working from a single directory (e.g: Dawn) then it is important that you understand the difference between the **input** and **output** directories.
-
 # Stores (Required)
 
-The `stores` option accepts an **object** or **array** type. Each item will hold a _settings_ object that contains references to your shopify store/s and their theme/s. For each store you define, Syncify requires you provide the shop name and theme id/s you wish to sync. The `themes` object uses a **key** > **value** structure.
+The `stores` option is required and will be used to perform sync operations. The option accepts an **object** or **array** type. Each item will hold reference to your shopify store/s and their theme/s. For each store you define, you will provide the **shop** name, theme **target** name and **id**. The `themes` object uses a **key** > **value** structure, where the **key** represent a theme name (target) and the value a theme id.
 
-> Please see theme [commands](#commands) example for more information on how this is used with the CLI.
+The information you provide to this option can be used via the CLI when targeting and executing operations. Please refer to the [commands](#commands) portion of this readme for more information on CLI usage.
 
-### CLI
+> **Note**
+>
+> The theme target name does need to match that defined in your online store and can be anything you like.
 
-```bash
---theme, -t <target>   # theme targeting
-```
+### Config File
 
-### API
+Below is an example of how a store reference can be defined. In the example, we have only provided a store domain `shop-1.myshopify.com` and 3 themes to connect and interface with. You can provide reference to multiple stores by passing an array list using the same structure.
 
+<!-- prettier-ignore -->
 ```ts
 import { defineConfig } from '@syncify/cli';
 
 export default defineConfig({
-  stores: [
-    {
-      domain: 'shop-1', // equivalent of shop-1.myshopify.com
-      themes: {
-        dev: 123456789,
-        prod: 123456789,
-        stage: 123456789,
-        test: 123456789
-      }
+  stores: {
+    domain: 'shop-1', // equivalent of shop-1.myshopify.com
+    themes: {
+      dev:  123456789,
+      prod: 123456789,
+      test: 123456789
     }
-  ]
+  }
 });
 ```
 
-<details>
-<summary>
-<strong><code>Domain</code></strong>
-</summary>
-<p>
+### CLI Usage
 
-The `domain` option expects a string value, which is your Shopify store name without the `myshopify.com` portion. The domain will be used by the CLI as a target argument. Each store (domain) can have multiple themes.
-
-</p>
-</details>
-
-<details>
-<summary>
-<strong><code>Themes</code></strong>
-</summary>
-<p>
-
-The `themes` option refers to theme ids the store contains. This option is an object type which uses **key** > **value** mappings. The theme **keys** represent a unique target name, this can be any alpha numeric value. The **key** value is used by the CLI as target reference. The **value** should be the theme id.
-
-</p>
-</details>
-
-# Metafields
+Based on the above example configuration, this is how we would target and perform operations with the store and its theme/s using the CLI. In Syncify, when performing a sync action, you pass the store name as the first argument, followed by any `--flags`.
 
-###### NOT YET AVAILABLE
-
-The `metafields` directory `path` reference is where you can provide **global** JSON metafield files that can be synced to your Shopify store. Metafield sync capabilities provided by Syncify use a simple **directory** > **file** based approach. The sub-directory names represent a metafield `namespace` value and JSON file names contained within represent metafield `key` values.
-
-> Syncify will keep your remote and local metafield references aligned with one another and warn you when local versions do not match remote versions. This will help prevent you from overwriting changes that may have been applied by third-party apps or online within your store.
-
-**Pull Metafields**
+<!-- prettier-ignore -->
+```bash
 
-Syncify provides you with simple interactive prompt based approach for importing pre-existing metafields from your online store. You can optionally choose which metafields you'd like to maintain. Use the `-m` or `--metafields` flag together with the `--pull` flag on the command line to download metafields:
+# FLAGS
 
-```
-$ syncify --metafields --pull
-```
+--theme, -t <target>  # Theme name or comma separated list of theme names to target
 
-**Merge Metafields**
+# EXAMPLES
 
-Working with metafields from your local machine may have result in unexpected overwrites if changes were made to remote versions that conflict with local versions. In order to combat this Syncify support **merge** capabilities which can be used to merge changes when metafield modification timestamps differ. Use the `-m` or `--metafields` flag together with the `--merge` flag on the command line perform local and remote alignments.
+$ syncify shop-1 -t dev --watch          # Running watch mode and targeting dev theme
+$ syncify shop-1 -t dev,prod --upload    # Uploading to the dev and prod themes of shop-1
 
 ```
-$ syncify --metafields --merge
-```
-
-**Structure**
-
-In order to best illustrate how the metafield sync capabilities work it is important that you understand the structure logic. The directory based approach and naming conventions employed are imperative and strict. Syncify wants to prevent irreversible overwrites or deletions from occurring, so please be mindful and wary when using this feature.
-
-<table>
-  <thead>
-    <tr>
-      <th align="left" width="300px">&nbsp;&nbsp;&nbsp;&nbsp;Metafield Structure</th>
-      <th align="left" width="700px">&nbsp;&nbsp;&nbsp;&nbsp;Description</th>
-    </tr>
-  </thead>
-  <tbody>
-      <td>
-        <pre>
-        <code>
-  source
-  │
-  └── metafields
-      │
-      ├── garment
-      │   ├── fits.json
-      │   ├── sizes.json
-      │   └── fabrics.json ㅤㅤ ㅤㅤ ㅤㅤ
-      │
-      └── details
-          ├── colors.json
-          └── weight.json
-        </code>
-        </pre>
-      </td>
-      <td>
-       &nbsp;&nbsp;&nbsp;Metafields will be published to the global <code>shop</code> object.<br>
-       &nbsp;&nbsp;&nbsp;Syncify will use the sub-directory names as the metafield<br>
-       &nbsp;&nbsp;&nbsp;<code>namespace</code> and the JSON file names contained within<br>
-       &nbsp;&nbsp;&nbsp;each namespace directory are used as the metafield <code>key</code> name.<br><br>
-       <strong>Example:</strong><br><br>
-        <ul>
-           <li><code>{{ shop.metafields.garment.fits.value }}</code></li>
-           <li><code>{{ shop.metafields.garment.sizes.value }}</code></li>
-           <li><code>{{ shop.metafields.garment.fabrics.value }}</code></li>
-           <li><code>{{ shop.metafields.details.colors.value }}</code></li>
-           <li><code>{{ shop.metafields.details.weight.value }}</code></li>
-       </ul>
-      </td>
-    </tr>
-  </tbody>
-</table>
 
 ### Options
 
 <details>
 <summary>
-<strong><code>Input</code></strong>
-</summary>
-<p>
-
-The `input` option refers to your projects **src** location This is the directory where your development theme files exist. Syncify defaults this directory to `source`. The value defined here will be prepended to any path you define within `paths`.
-
-</p>
-</details>
-
-<details>
-<summary>
-<strong><code>Output</code></strong>
-</summary>
-<p>
-
-The `output` option refers to your project **dist** location. This is the directory where transformed theme files from `input` will be written. Syncify defaults this to `theme`. The `output` directory will be reflective of your online shop. You should point any asset files executing via spawned processes to the `assets` directory contained within this location.
-
-</p>
-</details>
-
-<details>
-<summary>
-<strong><code>Config</code></strong>
-</summary>
-<p>
-
-The `config` option refers to a directory within your project where configuration files exist, like (for example) a `rollup.config.js` or `webpack.config.js` file. Syncify by default (when this option is **undefined**) will look for config files in the root of your project but this might not always be ideal as it can create clutter in the workspace. The `config` directory allows you to optionally place spawned config files within a sub-directory and informs Syncify to look for these files from that location.
-
-> Typically this is directory is named `scripts` in node projects.
-
-</p>
-</details>
-
-<details>
-<summary>
-<strong><code>Import</code></strong>
-</summary>
-<p>
-
-The `import` option refers to a directory where downloaded themes will be written. Syncify provides the ability to download themes from your online store and it is within this directory the files are created.
-
-</p>
-</details>
-
-<details>
-<summary>
-<strong><code>Export</code></strong>
+<strong><code>Domain</code></strong>
 </summary>
 <p>
 
-The `export` option refers to a directory where packaged (`.zip`) themes will be written when running the `package` command. Packaged themes will be prepended with the version number defined in the projects `package.json` file.
+The `domain` option expects a string value, which is your Shopify store name without the `myshopify.com` portion. The domain will be used by the CLI as a target argument. Each store (domain) can have multiple themes.
 
 </p>
 </details>
 
 <details>
 <summary>
-<strong><code>Metafields</code></strong>
+<strong><code>Themes</code></strong>
 </summary>
 <p>
 
-The `metafields` option refers to a directory within your project which can contain global JSON metafield files. The path location you reference here should point to a directory of sub-directories. Please refer to the [Metafields](#metafields) section for more information.
-
-**Correct**
-
-```
-{
-  "dirs": {
-    "metafields": "source/metafields"
-  }
-}
-```
-
-**Invalid**
-
-```
-{
-  "dirs": {
-    "metafields": "source/metafields/**/*.json"
-  }
-}
-```
+The `themes` option refers to theme ids the store contains. This option is an object type which uses **key** > **value** mappings. The theme **keys** represent a unique target name, this can be any alpha numeric value. The **key** value is used by the CLI as target reference. The **value** should be the theme id.
 
 </p>
 </details>
 
 # Paths
 
-The `paths` option allows you to define a custom set of path locations which point to theme specific files contained within the defined `input` directory. Syncify does not require you set a development structure consistent with that required by Shopify and you should begin to decouple from that logic as it is generally a flawed and borderline daft approach. The contents (files) contained within your **input** will be re-routed as a standard theme structure that Shopify understands when generating **output** distribution.
+The `paths` option allows you to define your theme/projects structure within the defined `input` directory. Syncify does not require you set a development structure required by Shopify and you should begin to decouple from that logic as it is generally flawed and restrictive when building advanced or large scale stores.
+
+Each path key represents a theme directory or resource point. Path options accept either a `string` or `string[]` array list of glob [anymatch](https://www.npmjs.com/package/anymatch) patterns and can point to files contained within sub-directories of infinite depth. All defined references will automatically resolve to the defined `input` directory starting point, so you do not need to include it within your path definitions.
 
-Each path option accepts either a `string` or `string[]` array list of glob [anymatch](https://www.npmjs.com/package/anymatch) patterns. Paths will automatically resolve to the `input` directory, so you do not need to include it within your configurations.
+There is no restrictions or limitations imposed on structures other than **input** relativity. Syncify will obtain full resolution and build a valid theme structure that Shopify understands when generating an **output**.
 
-### API
+### Config File
 
-By default, Syncify assumes you are using the basic-bitch (default) structure as follows:
+By default, Syncify assumes you are using a basic (defaults) structure. This structure is certainly not the preferred format and when leveraging Syncify you are encouraged to establish a structure which suits your project and adheres to your workflow or tastes.
 
 <!-- prettier-ignore -->
 ```ts
-import { defineConfig } from '@syncify/syncify';
+import { defineConfig } from '@syncify/cli';
 
 export default defineConfig({
   input: 'source',
@@ -636,7 +516,7 @@ export default defineConfig({
 
 ### Custom Structures
 
-Below are **2** different **input** structures and an **output** structure. The **default structure** is what Syncify will use (as above) if no `paths` have been defined in your configuration, the tool defaults to this. The **customized structure** is an example of how you _could_ arrange an `input` directory using the Syncify `paths` option. The **output structure** is what Syncify will generated as an **output** which Shopify can digest.
+Below are **2** different **input** structures and an **output** structure. The **default structure** is what Syncify will use (as above) if no `paths` have been defined in your configuration (the tool defaults to this). The **customized structure** is an example of how you _could_ arrange an `input` directory using the Syncify `paths` option. The **output structure** is what Syncify will generated as an **output** which Shopify can digest.
 
 <table>
   <thead>
@@ -666,6 +546,7 @@ Below are **2** different **input** structures and an **output** structure. The
      ├─ sections
      ├─ snippets
      └─ templates
+        ├─ metaobject
         └─ customers
        ㅤ
              ㅤ
@@ -692,6 +573,7 @@ Below are **2** different **input** structures and an **output** structure. The
    ├─ scripts
    └─ views
       ├─ customers
+      ├─ meta
       ├─ sections
       ├─ snippets
       ├─ templates
@@ -717,6 +599,7 @@ Below are **2** different **input** structures and an **output** structure. The
     ├─ sections
     ├─ snippets
     └─ template
+       ├─ metaobject
        └─ customers ㅤ
        ㅤ
        ㅤ
@@ -729,7 +612,9 @@ Below are **2** different **input** structures and an **output** structure. The
   </tbody>
 </table>
 
-There is no distributed difference between the **default** and **customized** structures illustrated above. Both would generate an **output** that Shopify understands, requires and reasons with. Only the **input** source locations differ. The **output** Syncify creates will always be written to a standard Shopify theme structure regardless of how you may decide to organize **input** paths. Custom structures give you creative freedom and does not impose a restrictive workflow you may have become behest to working with Dawn and the Shopify CLI. Welcome to the better approach, you're welcome.
+There is no distributed difference between the **default** and **customized** structures illustrated above. Both would generate an **output** that Shopify understands, requires and reasons with. Only the **input** source locations differ. The **output** Syncify creates will always be written to a standard Shopify theme structure regardless of how you may decide to organize **input** paths. Custom structures give you creative freedom and does not impose a restrictive workflow you may have become behest to working with Dawn and the Shopify CLI.
+
+Welcome to the better approach, you're welcome.
 
 ### Options
 
@@ -833,23 +718,296 @@ An array list of glob path patterns to `.json` or `.liquid` **template** files.
 </p>
 </details>
 
+<details>
+<summary>
+<strong><code>Metaobject</code></strong>
+</summary>
+<p>
+
+An array list of glob path patterns to `.json` **metaobject** template files. These will be written to the `{output}/templates/metaobject` directory of your defined `output` path.
+
+</p>
+</details>
+
+# Shared Sections
+
+Syncify provides an elegant and simple solution for shared sections. This is an experimental feature and aims to provide developers an easy way to re-use section contents between section files containing schema.
+
 # HOT
 
-Live reloading is supported in watch mode. Syncify leverages websocket's, XHR and statically served endpoints to provide this capability with zero configuration or the need to install or setup additional tooling. No extensions and no complexities. When you invoke `--hot` syncify will listen for messages sent via websocket on the client and carry out HOT replacements of Assets, Sections, Snippets, Layouts and Templates without triggering full-page refreshes.
+Live reloading is supported in watch mode. Syncify leverages websocket's, XHR and statically served endpoints to provide this capability with zero configuration or the need to install or setup additional tooling. No extensions and no complexities. Syncify will listen for messages sent via websocket on the client and carry out HOT replacements of Assets, Sections, Snippets, Layouts and Templates without triggering full-page refreshes. HOT Reloads can be enabled by passing the `--hot` flag via the CLI.
 
 > The HOT reload approach Syncify employs tends to be considerably faster than HOT reloading with the Shopify CLI.
 
 ### Assets
 
-SASS/CSS, TypeScript/JavaScript and SVG asset file types are HOT reloaded by swapping out the URL's or containing source with localhost equivalents that Syncify will statically serve.
+SASS/CSS, TypeScript/JavaScript and SVG asset file types are HOT reloaded by swapping out the URL's or containing source with localhost equivalents served statically by Syncify.
 
-### Sections
+### Section
 
-Sections are fetched via the Ajax Section rendering API. Replacements are applied to fragments in real-time.
+Dynamic sections, static sections of a combination of both are fetched via the Ajax [Section rendering API](https://shopify.dev/docs/api/section-rendering). Replacements are applied to fragments in real-time and surrounding nodes are left intact.
 
 ### Snippets, Layouts and Templates
 
-In order to provide HOT replacements Syncify employs a mild form of DOM hydration. Snippets, templated and liquid layout files will inject HTML comments `<!-- hot:1aa4f32cf9 -->` containing a UUID before they are uploaded to themes. Syncify will pass this UUID to the client via websocket and once received an XHR (fetch) will be triggered. The response of the XHR request is then parsed and all nodes which proceed the injected UUID comment/s are plucked and swapped in the persisted DOM while leaving unchanged elements intact. The approach employed by Syncify is a mild form DOM hydration that's 10x faster than invoking a hard-refresh.
+In order to provide HOT replacements Syncify employs a mild form of DOM hydration. Snippets, templates and Liquid/JSON layout files will inject HTML comments `<!-- hot:1aa4f32cf9 -->` containing a UUID before they are uploaded to themes. Syncify will pass this UUID to the client via websocket and once received an XHR (fetch) will be triggered. The response of the XHR request is then parsed and all nodes which proceed the injected UUID comment/s are plucked and swapped in the persisted DOM while leaving unchanged elements intact. The approach employed by Syncify is a mild form DOM hydration that's 10x faster than invoking a hard-refresh.
+
+## Programmatic Control
+
+Running in HOT mode will result in Syncify injecting a snippet into layouts. The snippet is the socket receiver that is responsible for executing replacements/morphs and exposes programmatic control for developers who can to customize or hook into the HOT reload rendering cycles.
+
+```ts
+// STATUS
+//
+window.syncify.ready: boolean
+window.syncify.connected: boolean;
+
+// RELOADS
+//
+window.syncify.assets(): void;
+window.syncify.reload(): void;
+window.syncify.refresh(): void
+
+// SECTIONS
+//
+window.syncify.sections.get()
+window.syncify.sections.list()
+window.syncify.sections.load()
+
+// LABEL
+//
+window.syncify.style.parent({ /* CSS */ });
+window.syncify.style.label({ /* CSS */ });
+```
+
+# Pages
+
+Syncify supports page sync and employs an intuitive approach to working with static pages for stores. The [paths](#paths) **pages** option is where you can provide path file references to be synced. Pages in Syncify can be either `.html` (markup) or `.md` (markdown) files and cannot contain Liquid syntax (Shopify does not support Liquid in pages only static markup). Syncify also support frontmatter in page files, this allows you to pass in additional data when syncing to store/s.
+
+### Options
+
+The `pages` setting available in the `views` option of your `syncify.config.ts` file allows you to configure page processing and transforms. In Syncify, frontmatter can be used to configure per-page control.
+
+<!--prettier-ignore-->
+```js
+import { defaultConfig } from '@syncify/cli'
+
+export default defineConfig({
+  ...,
+  paths: {
+    // Set the location of page files
+    pages: [
+      'pages/*.md',
+      'pages/*.html'
+    ]
+  },
+  views: {
+
+    pages: {
+      suffixDir: false,        // When true, directory name will be used for template_suffix
+      safeSync: true,          // Ensure local and remote versions are aligned
+      author: '',              // Fallback author name
+      global: [],              // List of directories to exclude from applying template_suffix
+      importLanguage: 'html'   // Set the import language when remote sources sync to local ones
+    }
+
+  }
+})
+```
+
+### Remote and Local sources
+
+By default, syncify will perform **safe** synchronization. The `safeSync` option instructs syncify to pull down remote versions before uploading local ones in watch and upload modes. This operation ensures that you do not overwrite page content in situations where changes have been applied in your store since the last sync was performed on your local machine. Syncify will prompt you when misalignment is detected and allow you to pull in the remote versions.
+
+### Markdown Support
+
+Pages can be written in markdown, Syncify will transform `.md` page files into valid HTML markup when syncing. Markdown pages are parsed and transformed using the the powerful [markdown-it](https://github.com/markdown-it/markdown-it) and support Github flavored markdown syntax. In addition to Markdown → HTML generation, Syncify can also perform reversed conversion (HTML → Markdown). Using the `importLanguage` option, any time a remote to local alignment is carried out, files will be written in markdown.
+
+### Frontmatter Support
+
+You can pass frontmatter data in page files. Page frontmatter can be used to control per-page publishing settings and allows for additional request payloads to be passed. Syncify supports a modest schema structure for page frontmatter.
+
+<!-- prettier-ignore -->
+```yaml
+---
+title: 'Lorem Ipsum'    # The page title
+handle: '/some-handle'  # Custom page handle
+template: 'example'     # Specify a template_suffix
+published: true         # Whether the page is published
+links: false            # Auto-convert URL-like
+breaks: true            # Convert '\n' into `<br>`
+metafields:             # Pass in additional metafields
+  - namespace: 'foo'
+    key: 'greeting'
+    type: 'single_line_text_field'
+    value: 'Hello World!'
+  - namespace: 'bar'
+    key: 'some_condition'
+    type: 'boolean'
+    value: true
+---
+```
+
+# Metafields
+
+###### NOT YET AVAILABLE
+
+The `metafields` directory `path` reference is where you can provide **global** JSON metafield files that can be synced to your Shopify store. Metafield sync capabilities provided by Syncify use a simple **directory** > **file** based approach. The sub-directory names represent a metafield `namespace` value and JSON file names contained within represent metafield `key` values.
+
+> Syncify will keep your remote and local metafield references aligned with one another and warn you when local versions do not match remote versions. This will help prevent you from overwriting changes that may have been applied by third-party apps or online within your store.
+
+**Pull Metafields**
+
+Syncify provides you with simple interactive prompt based approach for importing pre-existing metafields from your online store. You can optionally choose which metafields you'd like to maintain. Use the `-m` or `--metafields` flag together with the `--pull` flag on the command line to download metafields:
+
+```
+$ syncify --metafields --pull
+```
+
+**Merge Metafields**
+
+Working with metafields from your local machine may have result in unexpected overwrites if changes were made to remote versions that conflict with local versions. In order to combat this Syncify support **merge** capabilities which can be used to merge changes when metafield modification timestamps differ. Use the `-m` or `--metafields` flag together with the `--merge` flag on the command line perform local and remote alignments.
+
+```
+$ syncify --metafields --merge
+```
+
+**Structure**
+
+In order to best illustrate how the metafield sync capabilities work it is important that you understand the structure logic. The directory based approach and naming conventions employed are imperative and strict. Syncify wants to prevent irreversible overwrites or deletions from occurring, so please be mindful and wary when using this feature.
+
+<table>
+  <thead>
+    <tr>
+      <th align="left" width="300px">&nbsp;&nbsp;&nbsp;&nbsp;Metafield Structure</th>
+      <th align="left" width="700px">&nbsp;&nbsp;&nbsp;&nbsp;Description</th>
+    </tr>
+  </thead>
+  <tbody>
+      <td>
+        <pre>
+        <code>
+  source
+  │
+  └── metafields
+      │
+      ├── garment
+      │   ├── fits.json
+      │   ├── sizes.json
+      │   └── fabrics.json ㅤㅤ ㅤㅤ ㅤㅤ
+      │
+      └── details
+          ├── colors.json
+          └── weight.json
+        </code>
+        </pre>
+      </td>
+      <td>
+       &nbsp;&nbsp;&nbsp;Metafields will be published to the global <code>shop</code> object.<br>
+       &nbsp;&nbsp;&nbsp;Syncify will use the sub-directory names as the metafield<br>
+       &nbsp;&nbsp;&nbsp;<code>namespace</code> and the JSON file names contained within<br>
+       &nbsp;&nbsp;&nbsp;each namespace directory are used as the metafield <code>key</code> name.<br><br>
+       <strong>Example:</strong><br><br>
+        <ul>
+           <li><code>{{ shop.metafields.garment.fits.value }}</code></li>
+           <li><code>{{ shop.metafields.garment.sizes.value }}</code></li>
+           <li><code>{{ shop.metafields.garment.fabrics.value }}</code></li>
+           <li><code>{{ shop.metafields.details.colors.value }}</code></li>
+           <li><code>{{ shop.metafields.details.weight.value }}</code></li>
+       </ul>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### Options
+
+<details>
+<summary>
+<strong><code>Input</code></strong>
+</summary>
+<p>
+
+The `input` option refers to your projects **src** location This is the directory where your development theme files exist. Syncify defaults this directory to `source`. The value defined here will be prepended to any path you define within `paths`.
+
+</p>
+</details>
+
+<details>
+<summary>
+<strong><code>Output</code></strong>
+</summary>
+<p>
+
+The `output` option refers to your project **dist** location. This is the directory where transformed theme files from `input` will be written. Syncify defaults this to `theme`. The `output` directory will be reflective of your online shop. You should point any asset files executing via spawned processes to the `assets` directory contained within this location.
+
+</p>
+</details>
+
+<details>
+<summary>
+<strong><code>Config</code></strong>
+</summary>
+<p>
+
+The `config` option refers to a directory within your project where configuration files exist, like (for example) a `rollup.config.js` or `webpack.config.js` file. Syncify by default (when this option is **undefined**) will look for config files in the root of your project but this might not always be ideal as it can create clutter in the workspace. The `config` directory allows you to optionally place spawned config files within a sub-directory and informs Syncify to look for these files from that location.
+
+> Typically this is directory is named `scripts` in node projects.
+
+</p>
+</details>
+
+<details>
+<summary>
+<strong><code>Import</code></strong>
+</summary>
+<p>
+
+The `import` option refers to a directory where downloaded themes will be written. Syncify provides the ability to download themes from your online store and it is within this directory the files are created.
+
+</p>
+</details>
+
+<details>
+<summary>
+<strong><code>Export</code></strong>
+</summary>
+<p>
+
+The `export` option refers to a directory where packaged (`.zip`) themes will be written when running the `package` command. Packaged themes will be prepended with the version number defined in the projects `package.json` file.
+
+</p>
+</details>
+
+<details>
+<summary>
+<strong><code>Metafields</code></strong>
+</summary>
+<p>
+
+The `metafields` option refers to a directory within your project which can contain global JSON metafield files. The path location you reference here should point to a directory of sub-directories. Please refer to the [Metafields](#metafields) section for more information.
+
+**Correct**
+
+```
+{
+  "dirs": {
+    "metafields": "source/metafields"
+  }
+}
+```
+
+**Invalid**
+
+```
+{
+  "dirs": {
+    "metafields": "source/metafields/**/*.json"
+  }
+}
+```
+
+</p>
+</details>
 
 # Spawn
 
@@ -873,7 +1031,7 @@ The Syncify **build** mode re-builds the entire theme and you might choose to ru
 
 <!-- prettier-ignore -->
 ```ts
-import { defineConfig } from '@syncify/syncify';
+import { defineConfig } from '@syncify/cli';
 
 export default defineConfig({
 
@@ -899,7 +1057,7 @@ If you are processing JavaScript asset files using the [Rollup](https://rollupjs
 
 <!-- prettier-ignore -->
 ```ts
-import { defineConfig } from '@syncify/syncify';
+import { defineConfig } from '@syncify/cli';
 
 export default defineConfig({
     spawn: {
@@ -922,7 +1080,7 @@ If you are processing JavaScript asset files using the [Webpack](https://webpack
 
 <!-- prettier-ignore -->
 ```ts
-import { defineConfig } from '@syncify/syncify';
+import { defineConfig } from '@syncify/cli';
 
 export default defineConfig({
     spawn: {
@@ -945,7 +1103,7 @@ Though it is unlikely you'd ever need to include 2 different JavaScript bundlers
 
 <!-- prettier-ignore -->
 ```ts
-import { defineConfig } from '@syncify/syncify';
+import { defineConfig } from '@syncify/cli';
 
 export default defineConfig({
     spawn: {
@@ -966,7 +1124,7 @@ export default defineConfig({
 
 # Transform
 
-In Syncify, asset files can be transformed before being written to the defined `output` directory and uploaded to your Shopify store. The `transform` option provides users with control of the "asset pipeline" and Syncify exposes configuration wrappers for handling files together with modern developer tooling.
+In Syncify, asset files can be transformed before being written to the defined `output` directory and uploaded to your Shopify store. The `transform` option provides users with control of the "asset pipeline" and Syncify exposes configuration wrappers for handling files together with modern developer tooling. Transforms are totally optional, and require you to provide additional modules in your project.
 
 Syncify supports built-in and partial processing for the following file types:
 
@@ -1002,7 +1160,7 @@ The `script` options accepts several different structures and it is up to you ho
 
 <!--prettier-ignore-->
 ```ts
-import { defineConfig } from '@syncify/syncify';
+import { defineConfig } from '@syncify/cli';
 
 export default defineConfig({
   transforms: {
@@ -1028,7 +1186,7 @@ You may prefer to use rename (entry point) structures instead. When we are using
 
 <!--prettier-ignore-->
 ```ts
-import { defineConfig } from '@syncify/syncify';
+import { defineConfig } from '@syncify/cli';
 
 export default defineConfig({
   transforms: {
@@ -1099,7 +1257,7 @@ In the below example we are generating multiple stylesheets and compiling both S
 
 <!-- prettier-ignore-->
 ```ts
-import { defineConfig } from '@syncify/syncify'
+import { defineConfig } from '@syncify/cli'
 
 export default defineConfig({
   transforms: {
@@ -1705,7 +1863,7 @@ export default defineConfig({
 
 # Terser
 
-The **Terser** option is for minification configuration options. Syncify supports minification and compression of Liquid, HTML JSON and also provides handling around Script and Style Transform file types. Terse output is core to theme development using Syncify and developers should indeed get into a habit a distributing themes in terse a format.
+The **Terser** option is for minification configuration options. Syncify supports minification and compression of Liquid, HTML JSON and also provides handling around Script and Style transform file types. Terse output is core to theme development using Syncify and developers should indeed get into a habit a distributing themes in terse a format.
 
 ### Does Liquid Minification Matter?
 
@@ -1713,11 +1871,11 @@ When we are talking about Liquid syntax specifically, there is no real measurabl
 
 ### Usage
 
-Produce terse output by passing `--terse` command flag. The `--prod` flag will also produce terse output. You can pass a boolean `false` to options to skip minification.
+Produce terse output by passing the `--terse` command flag. The `--prod` flag will also produce terse output. You can pass a boolean `false` to options to skip minification. The `terser` options defined within your Syncify configuration file will be used when performing minification. If all terser options are set to `false` then (logically) terse minification will not be applied.
 
 ### Terse Options
 
-Below is is the default configuration Syncify uses for minification.
+Below is is the default configuration Syncify uses for minification. The `json`, `liquid`, `markup` and `script` options accept either an object or a boolean value. Passing boolean `true` will use defaults, whereas boolean `false` will skip minification.
 
 <!-- prettier-ignore -->
 ```ts
@@ -1730,18 +1888,28 @@ export default defineConfig({
       config: true,
       locales: true,
       metafields: true,
+      metaobject: true,
+      groups: true,
       templates: true,
       exclude: []
     },
-    view: {
+    liquid: {
       collapseWhitespace: true,
-      minifySchema: true,
+      collapseInner: false,
+      removeComments: true,
+      minifyJavascript: false,
+      minifySchema: false,
+      minifyStyle: false,
+      minifyStylesheet: false,
+      stripDashes: true,
+      exclude: []
+    },
+    markup: {
+      collapseWhitespace: true,
+      minifyScriptJSON: true,
       minifyScript: true,
       minifyStyle: true,
-      replaceSugar: true,
       removeComments: true,
-      stripDashes: true,
-      swapAssign: true,
       exclude: []
     },
     // Requires ESBuild to be installed
@@ -2073,11 +2241,11 @@ util.spawned(): string[]
 
 # Contributing
 
-This project uses [pnpm](https://pnpm.js.org/en/cli/install). Fork the project, run `pnpm i` and you're good to go. If you're using Yarn like the rest of the plebs or npm then you will still need to install pnpm.
+This project uses [pnpm](https://pnpm.js.org/en/cli/install). Fork the project, run `pnpm i` and you're good to go.
 
 # Author
 
-Created by [Nίκος Σαβίδης](https://github.com/panoply) of [Sissel ΣaaΣ](https://sissel.io).
+Created by [Nίκος Σαβίδης](https://github.com/panoply).
 
 ### Acknowledgements