@syncify/cli 0.1.3-beta → 0.2.0-beta

package/types/{misc → internal}/shared.d.ts

@@ -9,7 +9,7 @@ export type Namespacing = (
 /**
  * Namespaced Paths
  */
-export type NamespacePaths = `${'assets' | 'snippets'}/${Namespacing}${string}${Namespacing}`
+export type NamespacePaths = `${'assets' | 'snippets'}/${string}`
 
 /**
  * Directory Paths
@@ -19,7 +19,7 @@ export type DirPaths = `${'assets' | 'snippets'}/${string}`
 /**
  * Rename Paths
  */
-export type RenamePaths = NamespacePaths | DirPaths
+export type RenamePaths = NamespacePaths;
 
 /**
  * Rename input type
@@ -31,16 +31,12 @@ export type RenameInput = {
 /**
  * Rename input paths type
  */
-export type RenameInputPaths = {
-  [filename: RenamePaths]: string | string[]
-}
+export type RenameInputPaths = { [filename: RenamePaths]: string | string[] }
 
 /**
  * Rename config type
  */
-export type RenameConfig<T> = {
-  [filename: RenamePaths]: string | string[] | T
-}
+export type RenameConfig<T> = { [filename: RenamePaths]: string | string[] | T}
 
 /**
  * Processor Configuration
@@ -58,9 +54,9 @@ export type GetProcessorConfigs<T> = {
   /**
    * Whether or not a config file exists for the processor,
    * When one exists the URI path location to the file will
-   * applied as the value.
+   * be applied as the value.
    */
-  file: false | string;
+  file: boolean | string;
   /**
    * Configuration of the processor, Initialized with defaults
    */

package/types/modules/html-minifier-terser.d.ts

@@ -0,0 +1,211 @@
+// Type definitions for html-minifier-terser 7.0
+// Project: https://github.com/terser/html-minifier-terser#readme
+// Definitions by: Piotr Błażejewicz <https://github.com/peterblazejewicz>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+/**
+ * Most of the options are disabled by default
+ */
+export interface HTMLMinifierTerserOptions {
+  /**
+   * Treat attributes in case sensitive manner (useful for custom HTML tags)
+   * @default false
+   */
+  caseSensitive?: boolean | undefined;
+  /**
+   * Omit attribute values from boolean attributes
+   * @default false
+   */
+  collapseBooleanAttributes?: boolean | undefined;
+  /**
+   * Don't leave any spaces between display:inline;
+   * elements when collapsing. Must be used in conjunction with collapseWhitespace=true
+   * @default false
+   */
+  collapseInlineTagWhitespace?: boolean | undefined;
+  /**
+   * Collapse white space that contributes to text nodes in a document tree
+   * @default false
+   */
+  collapseWhitespace?: boolean | undefined;
+  /**
+   * Always collapse to 1 space (never remove it entirely). Must be used in conjunction with `collapseWhitespace=true`
+   * @default false
+   */
+  conservativeCollapse?: boolean | undefined;
+  /**
+   * Handle parse errors
+   * @default false
+   */
+  continueOnParseError?: boolean | undefined;
+  /**
+   * Arrays of regex'es that allow to support custom attribute assign expressions (e.g. `'<div flex?="{{mode != cover}}"></div>'`)
+   * @default []
+   */
+  customAttrAssign?: RegExp[] | undefined;
+  /**
+   * Regex that specifies custom attribute to strip newlines from (e.g. `/ng-class/`
+   */
+  customAttrCollapse?: RegExp | undefined;
+  /**
+   * Arrays of regex'es that allow to support custom attribute surround expressions (e.g. `<input {{#if value}}checked="checked"{{/if}}>`)
+   * @default []
+   */
+  customAttrSurround?: RegExp[] | undefined;
+  /**
+   * Arrays of regex'es that allow to support custom event attributes for `minifyJS` (e.g. `ng-click`)
+   * @default [/^on[a-z]{3,}$/]
+   */
+  customEventAttributes?: RegExp[] | undefined;
+  /**
+   * Use direct Unicode characters whenever possible
+   * @default false
+   */
+  decodeEntities?: boolean | undefined;
+  /**
+   * Parse input according to HTML5 specifications
+   * @default true
+   */
+  html5?: boolean | undefined;
+  /**
+   * Array of regex'es that allow to ignore certain comments, when matched
+   * @default [ /^!/, /^\s*#/ ]
+   */
+  ignoreCustomComments?: RegExp[] | undefined;
+  /**
+   * Array of regex'es that allow to ignore certain fragments, when matched (e.g. `<?php ... ?>`, `{{ ... }}`, etc.)
+   * @default [/<%[\s\S]*?%>/, /<\?[\s\S]\*?\?>/]
+   */
+  ignoreCustomFragments?: RegExp[] | undefined;
+  /**
+   * Insert tags generated by HTML parser
+   * @default true
+   */
+  includeAutoGeneratedTags?: boolean | undefined;
+  /**
+   * Keep the trailing slash on singleton elements
+   * @default false
+   */
+  keepClosingSlash?: boolean | undefined;
+  /**
+   * Specify a maximum line length. Compressed output will be split by newlines at valid HTML split-points
+   */
+  maxLineLength?: number | undefined;
+  /**
+   * Minify CSS in style elements and style attributes
+   * @default false
+   */
+  minifyCSS?: boolean | object | ((text: string, type?: string) => string) | undefined;
+  /**
+   * Minify JavaScript in script elements and event attributes
+   * @default false
+   */
+  minifyJS?: boolean | object | ((text: string, inline?: boolean) => string) | undefined;
+  /**
+   * Minify URLs in various attributes
+   * @default false
+   */
+  minifyURLs?: boolean | string | object | ((text: string) => string) | undefined;
+  /**
+   * Never add a newline before a tag that closes an element
+   * @default false
+   */
+  noNewlinesBeforeTagClose?: boolean | undefined;
+  /**
+   * Always collapse to 1 line break (never remove it entirely) when whitespace between tags include a line break.
+   * Must be used in conjunction with `collapseWhitespace=true`
+   * @default false
+   */
+  preserveLineBreaks?: boolean | undefined;
+  /**
+   * Prevents the escaping of the values of attributes
+   * @default false
+   */
+  preventAttributesEscaping?: boolean | undefined;
+  /**
+   * Process contents of conditional comments through minifier
+   * @default false
+   */
+  processConditionalComments?: boolean | undefined;
+  /**
+   * Array of strings corresponding to types of script elements to process through minifier
+   * (e.g. `text/ng-template`, `text/x-handlebars-template`, etc.)
+   * @default []
+   */
+  processScripts?: string[] | undefined;
+  /**
+   * Type of quote to use for attribute values (' or ")
+   */
+  quoteCharacter?: string | undefined;
+  /**
+   * Remove quotes around attributes when possible
+   * @default false
+   */
+  removeAttributeQuotes?: boolean | undefined;
+  /**
+   * Strip HTML comments
+   * @default false
+   */
+  removeComments?: boolean | undefined;
+  /**
+   * Remove all attributes with whitespace-only values
+   * @default false
+   */
+  removeEmptyAttributes?: boolean | ((attrName: string, tag: string) => boolean) | undefined;
+  /**
+   * Remove all elements with empty contents
+   * @default false
+   */
+  removeEmptyElements?: boolean | undefined;
+  /**
+   * Remove optional tags
+   * @default false
+   */
+  removeOptionalTags?: boolean | undefined;
+  /**
+   * Remove attributes when value matches default
+   * @default false
+   */
+  removeRedundantAttributes?: boolean | undefined;
+  /**
+   * Remove `type="text/javascript"` from `script` tags. Other `type` attribute values are left intact
+   * @default false
+   */
+  removeScriptTypeAttributes?: boolean | undefined;
+  /**
+   * Remove `type="text/css"` from `style` and `link` tags. Other `type` attribute values are left intact
+   * @default false
+   */
+  removeStyleLinkTypeAttributes?: boolean | undefined;
+  /**
+   * Remove space between attributes whenever possible. **Note that this will result in invalid HTML!**
+   * @default false
+   */
+  removeTagWhitespace?: boolean | undefined;
+  /**
+   * Sort attributes by frequency
+   * @default false
+   */
+  sortAttributes?: boolean | undefined;
+  /**
+   * Sort style classes by frequency
+   * @default false
+   */
+  sortClassName?: boolean | undefined;
+  /**
+   * Trim white space around `ignoreCustomFragments`
+   * @default false
+   */
+  trimCustomFragments?: boolean | undefined;
+  /**
+   * Replaces the `doctype` with the short (HTML5) doctype
+   * @default false
+   */
+  useShortDoctype?: boolean | undefined;
+}
+
+/**
+ * HTMLMinifier is a highly configurable, well-tested, JavaScript-based HTML minifier.
+ * @async
+ */
+export function minify(value: string, options?: HTMLMinifierTerserOptions): Promise<string>;

package/types/transforms/image.d.ts

@@ -1,5 +1,5 @@
 import type { SharpOptions as SharpConfig } from 'sharp';
-import type { GetProcessorConfigs } from '../misc/shared';
+import type { GetProcessorConfigs } from '../internal/shared';
 
 export type { SharpConfig };
 

package/types/transforms/script.d.ts

@@ -3,34 +3,94 @@ import type { Merge } from 'type-fest';
 import type { Tester } from 'anymatch';
 import type { Tsconfig } from 'tsconfig-type';
 import type { BuildOptions as ESBuildOptions } from 'esbuild';
-import type { GetProcessorConfigs, RenamePaths } from '../misc/shared';
+import type { GetProcessorConfigs, RenamePaths } from '../internal/shared';
 
-export type ESBuildConfig = Merge<Pick<ESBuildOptions,
-  | 'bundle'
-  | 'treeShaking'
-  | 'tsconfig'
-  | 'target'
-  | 'splitting'
-  | 'pure'
-  | 'define'
-  | 'format'
+type TargetBrowser = (
+  | 'chrome'
+  | 'deno'
+  | 'edge'
+  | 'firefox'
+  | 'hermes'
+  | 'ie'
+  | 'ios'
+  | 'node'
+  | 'opera'
+  | 'rhino'
+  | 'safari'
+);
+
+type TargetBrowserVersion = (
+  | `${TargetBrowser}${number}`
+  | `${TargetBrowser}${number}.${number}`
+  | `${TargetBrowser}${number}.${number}.${number}`
+);
+
+type TargetESVersion = (
+  | 'es3'
+  | 'es5'
+  | 'es6'
+  | 'es2015'
+  | 'es2016'
+  | 'es2017'
+  | 'es2018'
+  | 'es2019'
+  | 'es2020'
+  | 'es2021'
+  | 'es2022'
+  | 'esnext'
+);
+
+type ESBuildAllowedOptions = Pick<ESBuildOptions, (
+  | 'alias'
+  | 'assetNames'
   | 'banner'
-  | 'footer'
+  | 'bundle'
   | 'charset'
   | 'chunkNames'
-  | 'drop'
-  | 'ignoreAnnotations'
+  | 'entryNames'
+  | 'conditions'
+  | 'define'
+  | 'external'
+  | 'footer'
+  | 'format'
+  | 'globalName'
+  | 'tsconfigRaw'
+  | 'tsconfig'
+  | 'treeShaking'
+  | 'target'
   | 'jsx'
   | 'jsxDev'
   | 'jsxFactory'
   | 'jsxFragment'
   | 'jsxImportSource'
-  | 'mainFields'
-  | 'metafile'
-  | 'resolveExtensions'
+  | 'jsxSideEffects'
+  | 'inject'
+  | 'ignoreAnnotations'
+  | 'drop'
+  | 'splitting'
   | 'supported'
+  | 'sourcesContent'
+  | 'sourceRoot'
+  | 'sourcemap'
+  | 'pure'
   | 'plugins'
-  >, {
+  | 'metafile'
+  | 'loader'
+  | 'publicPath'
+)>
+
+export { ESBuildOptions };
+
+export type Target = (
+  | TargetBrowser
+  | TargetBrowserVersion
+  | TargetESVersion
+);
+
+/**
+ * Public exposed configurations
+ */
+export type ESBuildConfig = Merge<ESBuildAllowedOptions, {
     /**
      * The format to be generated. Because we are targeting
      * browser environments, Syncify does not allow for CJS (commonjs)
@@ -54,24 +114,42 @@ export type ESBuildConfig = Merge<Pick<ESBuildOptions,
 /* TRANSFORM                                    */
 /* -------------------------------------------- */
 
-export interface ScriptTransform {
+interface ScriptSharedConfig {
   /**
    * JS/TS input source paths. Accepts `string` or `string[]` glob patterns.
    * Resolution is relative to your defined `input` directory.
    *
+   * ---
+   *
    * @default undefined
    */
   input: string | string[];
-   /**
-     * The format to be generated. Because we are targeting
-     * browser environments, Syncify does not allow for CJS (commonjs)
-     * bundles to be produced.
-     *
-     * @default 'esm'
-     */
-  format?: 'esm' | 'iife';
   /**
-   * Rename the stylesheet file/s. The same name as source file will be used
+   * This sets the target environment for the generated JavaScript. It
+   * tells esbuild to transform JavaScript syntax which is too new for
+   * these environments into older JavaScript syntax that works in this
+   * environment\s.
+   *
+   * ---
+   *
+   * @default 'es2016'
+   */
+  target?: Target | Target[];
+  /**
+   * Instructs ESBuild to treat these modules as external. The import/s
+   * will be preserved and evaluated at run time instead.
+   *
+   * ---
+   *
+   * @see
+   * https://esbuild.github.io/api/#external
+   *
+   * @default
+   * []
+   */
+  external?: string[];
+  /**
+   * Rename the JavaScript file/s. The same name as source file will be used
    * when undefined. Accepts namespaces, `[file]`, `[dir]` and `[ext]`.
    *
    * ---
@@ -81,7 +159,7 @@ export interface ScriptTransform {
   rename?: string;
   /**
    * Optionally write the javascript file inline as a snippet. This will transform
-   * the JS and contained code will be output within `<script></script>` tags output as a
+   * the JS and contained code will be output within `<script></script>` tags as a
    * `snippet.liquid` file.
    *
    * @default false
@@ -89,12 +167,12 @@ export interface ScriptTransform {
   snippet?: boolean;
   /**
    * Entry points (paths/files) to watch that will trigger a rebuilds of
-   * the define _input_ file. By default, Syncify will watch all import entries
+   * the defined _input_ file. By default, Syncify will watch all import entries
    * imported by the _input_.
    *
    * @default []
    */
-  watch?: string[];
+  watch?: string[]
   /**
    * [ESBuild](https://esbuild.github.io/) Override
    *
@@ -111,6 +189,40 @@ export interface ScriptTransform {
   esbuild?: boolean | ESBuildConfig;
 }
 
+interface ScriptFormatESM extends ScriptSharedConfig {
+
+  /**
+   * The format to be generated. Because we are targeting
+   * browser environments, Syncify does not allow for CJS (commonjs)
+   * bundles to be produced.
+   *
+   * @default 'esm'
+   */
+  format?: 'esm';
+}
+
+interface ScriptFormatIIFE extends ScriptSharedConfig {
+  /**
+   * The format to be generated. Because we are targeting
+   * browser environments, Syncify does not allow for CJS (commonjs)
+   * bundles to be produced.
+   *
+   * @see https://esbuild.github.io/api/#format
+   * @default 'esm'
+   */
+  format?: 'iife';
+  /**
+   * Sets the name of the global variable which is used to store the
+   * exports from the entry point.
+   *
+   * @see https://esbuild.github.io/api/#global-name
+   * @default undefined
+   */
+  globalName?: string;
+}
+
+export type ScriptTransform = ScriptFormatESM | ScriptFormatIIFE;
+
 /* -------------------------------------------- */
 /* TRANSFORMER                                  */
 /* -------------------------------------------- */
@@ -120,19 +232,7 @@ export type ScriptTransformer = (
   | string[]
   | ScriptTransform
   | ScriptTransform[]
-  | {
-    [K in RenamePaths]: (
-      | string
-      | string[]
-      | Pick<ScriptTransform,
-        | 'input'
-        | 'format'
-        | 'snippet'
-        | 'watch'
-        | 'esbuild'
-      >
-    )
-  }
+  | { [rename: RenamePaths]: string | string[] | Omit<ScriptTransform, 'rename'> }
 )
 
 /* -------------------------------------------- */
@@ -144,31 +244,65 @@ export type ScriptTransformer = (
  *
  * Processor Configuration
  */
-export type ESBuildProcesser = Merge<
-  GetProcessorConfigs<ESBuildOptions>,
-  {
-    get tsconfig(): Tsconfig,
-  }
->
+export type ESBuildProcesser = Merge<GetProcessorConfigs<ESBuildOptions>, {
+  /**
+   * Despite the name, this getter represents both
+   * `tsconfig.json` or `jsconfig.json` files.
+   */
+  get tsconfig(): Tsconfig,
+}>
 
 /**
  * **INTERNAL USE**
  *
- * Bundling Configuration
+ * Bundling Configuration for scripts
  */
-export type ScriptBundle = Merge<ScriptTransform, {
+export interface ScriptBundle {
   /**
    * A UUID reference for this bundle.
    */
   uuid: string;
   /**
-   * Resolved input path
+   * Resolved input path. Passed to the ESBuild `entryPoint` option.
    */
   input: string;
   /**
-   * All entry points (imports) contained in the input.
-   * Matches applied to the anymatch pattern and applied
-   * at runtime.
+   * The namespace value, used in CLI logs
    */
-  watch: Tester;
-}>;
+  namespace: string;
+  /**
+   * Whether or not to export as a snippet
+   */
+  snippet: boolean;
+  /**
+   * Resolved key reference, used in the Shopify sync requests
+   */
+  key: string;
+  /**
+   * Resolved output path where the transformed file should be written.
+   * This value will have a rename applied in the uri.
+   */
+  output: string;
+  /**
+   * Imports contained in the input. This is used to trigger a build.
+   * Matches applied to the anymatch pattern at runtime.
+   */
+  watch: Set<string>;
+  /**
+   * The size in bytes of the generated file. This metric is obtained
+   * on the pre-complile at runtime when importer paths are collected.
+   * The value will be `NaN` unless executing in `--terse` (or `--prod`).
+   */
+  size: number;
+  /**
+   * Watch extendables - This `Set` accounts for watch paths defined
+   * by the user. We keep them isolated to ensure they are not removed
+   * when importers are adjusted during re-builds.
+   */
+  watchCustom: Tester;
+  /**
+   * ESBuild options which will either use the processor defaults or
+   * if defined on script bundle, will be merged with processor defaults.
+   */
+  esbuild: ESBuildOptions
+}

package/types/transforms/style.d.ts

@@ -1,9 +1,10 @@
 /* eslint-disable no-unused-vars */
 
-import type { Merge } from 'type-fest';
+import type { LiteralUnion, Merge } from 'type-fest';
 import type { Tester } from 'anymatch';
+import type { Config as TailwindConfig } from 'tailwindcss';
 import type { Plugin as PostCSSPlugin, Transformer, TransformCallback } from 'postcss';
-import type { GetProcessorConfigs, RenamePaths } from '../misc/shared';
+import type { GetProcessorConfigs, RenamePaths } from '../internal/shared';
 
 /* -------------------------------------------- */
 /* PROCESSOR CONFIGS                            */
@@ -15,6 +16,21 @@ export type PostCSSConfig = (
   | TransformCallback
 );
 
+export interface TailwindCSSConfig {
+  important: TailwindConfig['important'];
+  prefix: TailwindConfig['PrefixConfig'];
+  separator: TailwindConfig['SeparatorConfig'];
+  safelist: TailwindConfig['SafelistConfig'];
+  blocklist: TailwindConfig['BlocklistConfig'];
+  presets: TailwindConfig['presets'];
+  future: TailwindConfig['future'];
+  experimental: TailwindConfig['experimental'];
+  darkMode: TailwindConfig['darkMode'];
+  theme: TailwindConfig['theme'];
+  corePlugins: TailwindConfig['corePlugins'];
+  plugins: TailwindConfig['plugins'];
+}
+
 export interface SASSConfig {
   /**
    * Whether or not to generate sourcemaps
@@ -81,6 +97,21 @@ export interface StyleTransform {
    * @default false
    */
   snippet?: boolean;
+  /**
+   * **NOT YET AVAILABLE**
+   *
+   * [TailwindCSS](https://tailwindcss.com/) Override
+   *
+   * Tailwind transforms will use the `tailwind.config.js` configuration
+   * file in your projects root (or defined `config` path). If you have not
+   * provided a tailwind config file, then syncify will use options defined
+   * via `processor.tailwind`. You can optionally override configuration
+   * on a per-transform basis and any options defined here will be merged with
+   * those defined in your `tailwind.config.js` or `processor.tailwind`.
+   *
+   * @default true // if tailwind is not installed this is false
+   */
+  tailwind?: boolean | TailwindCSSConfig;
   /**
    * [PostCSS](https://postcss.org/) Override
    *
@@ -96,7 +127,7 @@ export interface StyleTransform {
    *
    * @default true // if postcss is not installed this is false
    */
-  postcss?: boolean | PostCSSConfig[]
+  postcss?: boolean | PostCSSConfig[];
   /**
    * [SASS Dart](https://sass-lang.com/documentation/js-api/) Override
    *
@@ -105,10 +136,13 @@ export interface StyleTransform {
    * basis. Any configuration options defined here will be merged with
    * the options defined in `processor.sass`.
    *
-   * You can also skip pre-processing with postcss by passing a _boolean_
-   * `false` which will inform Syncify to not pass output to PostCSS. By
-   * default, Syncify will forward all input files using `.scss` or `.sass`
-   * or extension to SASS Dart.
+   * You can also skip SASS transfroms by passing a _boolean_ `false` which will
+   * inform Syncify to not pass output to SASS, which is the default if SASS is not
+   * installed.
+   *
+   * By default, Syncify will forward all input files using `.scss` or `.sass`
+   * or extension to SASS Dart. If you have PostCSS installed then Syncify will
+   * automatically pass SASS files to PostCSS in the post-process.
    *
    * @default true // if sass is not installed this is false
    */
@@ -146,14 +180,21 @@ export type StyleTransformer = (
 /**
  * **INTERNAL USE**
  *
- * Processor Configuration
+ * PostCSS Processor Configuration
+ */
+export type PostCSSProcesser = GetProcessorConfigs<PostCSSConfig[]>;
+
+/**
+ * **INTERNAL USE**
+ *
+ * Tailwind Processor Configuration
  */
-export type PostCSSProcesser = GetProcessorConfigs<PostCSSConfig[]>
+export type TailwindCSSProcesser = GetProcessorConfigs<TailwindCSSConfig>
 
 /**
  * **INTERNAL USE**
  *
- * Processor Configuration
+ * SASS Processor Configuration
  */
 export type SASSProcesser = GetProcessorConfigs<SASSConfig>