Skip to main content
Version: 0.2.x

Changelog

0.2.x​

0.2.5​

Install/upgrade:

sh
npm install --save @eastsideco/salvo-ts@0.2.5 @eastsideco/salvo-ts-build@0.2.5
sh
npm install --save @eastsideco/salvo-ts@0.2.5 @eastsideco/salvo-ts-build@0.2.5
  • Bugfixes:
    • Fix component CSS injection issues where CSS included octal escape strings.
    • Removed unnecessary reflect-metadata dependency.

0.2.4​

Install/upgrade:

sh
npm install --save @eastsideco/salvo-ts@0.2.4 @eastsideco/salvo-ts-build@0.2.4
sh
npm install --save @eastsideco/salvo-ts@0.2.4 @eastsideco/salvo-ts-build@0.2.4
  • Critical CSS only output: For easier development and troubleshooting of critical styles, you can now compile your theme with only your critical styles (docs)
  • SALVO CLI: salvo-ts-build now incorporates CLI commands for certain theme prep tasks (docs)
  • Improvements:
    • Themes built in dev mode now refuse to render when published. Stop releasing themes built in dev mode. (docs)
    • Compiler will now warn when the theme is specifying dependencies in package.json shared by salvo-ts, which are known to cause version conflicts
    • Cleaned up internal console logs and fixed a bug which caused certain log levels to bypass log level filtering - production builds will now be much quieter by default (docs)
    • The schema for salvo.config.js is now published under @eastsideco/salvo-ts-build/schemas/config, allowing for type checking in supported editors (docs)
  • Docs:
REQUIRED THEME CHANGES

Add salvo to your package.json (in scripts):

package.json
json
    "scripts": {
        "dev": "cross-env NODE_ENV=development node node_modules/@eastsideco/salvo-ts-build/src/index.js --config ./salvo.config.js",
        "prod": "cross-env NODE_ENV=production node node_modules/@eastsideco/salvo-ts-build/src/index.js --config ./salvo.config.js"
        "prod": "cross-env NODE_ENV=production node node_modules/@eastsideco/salvo-ts-build/src/index.js --config ./salvo.config.js",
        "salvo": "node node_modules/@eastsideco/salvo-ts-build/src/cli.js --config ./salvo.config.js"
    },
package.json
json
    "scripts": {
        "dev": "cross-env NODE_ENV=development node node_modules/@eastsideco/salvo-ts-build/src/index.js --config ./salvo.config.js",
        "prod": "cross-env NODE_ENV=production node node_modules/@eastsideco/salvo-ts-build/src/index.js --config ./salvo.config.js"
        "prod": "cross-env NODE_ENV=production node node_modules/@eastsideco/salvo-ts-build/src/index.js --config ./salvo.config.js",
        "salvo": "node node_modules/@eastsideco/salvo-ts-build/src/cli.js --config ./salvo.config.js"
    },

Change these lines in your salvo.config.js to enable type checking:

salvo.config.js
ts
// @ts-check
const path = require('path');
module.exports = {
    // ... options ...
};
const config = { /** @type {import('@eastsideco/salvo-ts-build/schema/config').SalvoConfig} */
    // ... options ...
};
module.exports = config;
salvo.config.js
ts
// @ts-check
const path = require('path');
module.exports = {
    // ... options ...
};
const config = { /** @type {import('@eastsideco/salvo-ts-build/schema/config').SalvoConfig} */
    // ... options ...
};
module.exports = config;

0.2.3​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.2.3 @eastsideco/salvo-ts-build@0.2.3
npm install --save @eastsideco/salvo-ts@0.2.3 @eastsideco/salvo-ts-build@0.2.3
  • Bugfixes
    • Fix output filenames incorrect for nested static files.

0.2.2​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.2.2 @eastsideco/salvo-ts-build@0.2.2
npm install --save @eastsideco/salvo-ts@0.2.2 @eastsideco/salvo-ts-build@0.2.2
  • SVG icon asset support: SVGs can now be added under assets/icons/ and rendered using {! icon 'foo' !} [#57] (docs)
  • CWV overlay: A new overlay is now enabled by default on non-published themes which helps you optimize critical styles and troubleshoot Core Web Vitals issues [#63] (docs)
  • Improvements:
    • Minification is now enabled by default in production (configure via salvoConfig.optimization.minify) [#62]
    • Compiler now validates subfolder structures for static files and components [#53]
    • Improved compiler error reporting and fixed certain error details being omitted when running in dev mode [#58]
    • Improved component loading to remove dependency on the Reflect API (avoids compatibility issue with TikTok analytics) [#60]
    • Handle preloader: 'blank' better when JS is disabled [#61]
    • Removed the "window.exports patch" to avoid compatibility issues [#56]
    • General performance improvements.
  • Bugfixes:
    • Fixed compiler not noticing new or deleted files for certain folders/filetypes [#54]
    • Fixed code-splitting issues related to __vite-browser-external [#42]
    • Fixed cssBuildMode: inline not respecting cssInlineLimit [#46]
    • Fixed Invalid JSON when passing prop="0" where @Prop({ default: null }) prop!: number|null [#40]
    • Fixed generated importmap including unneeded references to non-compiled JS files [#55]
  • Docs
    • Added file structure - covers overall structure and file nesting rules (previously missing from 0.2.x docs).
    • Added component basics - covers the basics of props, refs, and component decorators (previously missing from 0.2.x docs).
    • Added component styles - covers basics of component styling.
    • Rewrote static files - now includes a list of available compiler macros, and some basic details about escaping conventions.
    • Updated configuration - added new options, indicated deprecated/discouraged options.
    • Added svg icons.
    • Updated optimization.
    • Improved the display of code samples and directory listings through the docs.
REQUIRED THEME CHANGES

Themes with invalid file/folder structures which were previously accepted may see errors after upgrading. Follow the instructions to resolve the errors.

Subfolder/file naming rules:

  • Components:
    • The filename must start with the subfolder path (relative to src/components/), with no separators.
  • Sections, snippets, assets:
    • The filename must start with the subfolder path (relative to static/sections/ etc.), with _ as the path separator.

Examples:

ValidInvalid
src/components/Product/ProductForm.tssrc/components/Products/ProductForm.ts
src/components/Customer/Account/CustomerAccountOrders.tssrc/components/Customer/Account/Orders.ts
static/snippets/global/global_apps.liquidstatic/snippets/global_apps.liquid
static/sections/product/main/product_main_form.liquidstatic/sections/product/main/product_main-form.liquid

0.2.1​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.2.1 @eastsideco/salvo-ts-build@0.2.1
npm install --save @eastsideco/salvo-ts@0.2.1 @eastsideco/salvo-ts-build@0.2.1
  • Fixed Shopify caching issues with component CSS when loaded async [#43]
  • Added missing built-in functions for cart.queryItems [#44]
  • Fixed critical styles being added without the appropriate style tag [#45]
  • Fixed incorrect prop type resolution for unions of primitive types (i.e. 'A'|'B') [#47]
  • Fixed manual preload components being loaded by the wrong path [#48]
  • Fixed changes to component templates and static assets not triggering re-build in dev mode [#50]
  • Fixed critical styles disappearing in watch mode [#51]
  • Added support for metaobject templates under templates/metaobject/(...).json [#52]

0.2.0​

Install/upgrade: Refer to Installation or Migrating from 0.1.x.

  • Overhauled compiler. The compiler is now built on top of Rollup and Vite. It runs faster, behaves better with other tools, and is more stable.
  • Async component loading. Components are now loaded on-demand, reducing bundle sizes and improving performance. Defining components to pre-load (or using the experimental auto-preload feature) ensures critical components are ready immediately.
  • Critical CSS authoring. Custom media queries for defining critical CSS make it easier to keep critical CSS up-to-date.
  • Added optimizations.previewBar to hide/customize the Shopify theme preview bar.
  • Updated to Typescript 5.1.
  • Updated to Sass 1.63.

0.1.x​

0.1.53​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.1.53 @eastsideco/salvo-ts-build@0.1.53
npm install --save @eastsideco/salvo-ts@0.1.53 @eastsideco/salvo-ts-build@0.1.53
  • Fixed issue where build variant would be included in the automatically generated section classname, leading to a validation error.

0.1.52​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.1.52 @eastsideco/salvo-ts-build@0.1.52
npm install --save @eastsideco/salvo-ts@0.1.52 @eastsideco/salvo-ts-build@0.1.52
  • Build variants are now supported for @import directives in SCSS files. The import must be suffixed with ~ if a default-build-variant (unsuffixed filename) version of the file exists (https://github.com/sass/dart-sass/issues/574)

0.1.51​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.1.51 @eastsideco/salvo-ts-build@0.1.51
npm install --save @eastsideco/salvo-ts@0.1.51 @eastsideco/salvo-ts-build@0.1.51
  • Build variants are now supported for @import directives in SCSS files.

0.1.50​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.1.50 @eastsideco/salvo-ts-build@0.1.50
npm install --save @eastsideco/salvo-ts@0.1.50 @eastsideco/salvo-ts-build@0.1.50
  • Build variants are now supported for static/ assets.

0.1.49​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.1.49 @eastsideco/salvo-ts-build@0.1.49
npm install --save @eastsideco/salvo-ts@0.1.49 @eastsideco/salvo-ts-build@0.1.49
  • Added support for build variants (docs pending).
REQUIRED THEME CHANGES
  • Add buildVariant: null in your project's salvo.config.js.
  • Change the registerComponents call in src/main.ts to registerComponents(require.context('./components/', true), process.env.SALVO_BUILD_VARIANT);

0.1.48​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.1.48 @eastsideco/salvo-ts-build@0.1.48
npm install --save @eastsideco/salvo-ts@0.1.48 @eastsideco/salvo-ts-build@0.1.48
  • Re-enable prod minification.
  • Add warning when output.themeJs setting ends in only .js (rather than .min.js) to help avoid theme JS being mangled by Shopify.
REQUIRED THEME CHANGES
  • Change output.themeJs from theme.js to theme.min.js in your project's salvo.config.js.

0.1.47​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.1.47 @eastsideco/salvo-ts-build@0.1.47
npm install --save @eastsideco/salvo-ts@0.1.47 @eastsideco/salvo-ts-build@0.1.47
  • Temporarily disable minification in prod builds.

0.1.46​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.1.46 @eastsideco/salvo-ts-build@0.1.46
npm install --save @eastsideco/salvo-ts@0.1.46 @eastsideco/salvo-ts-build@0.1.46
  • Disabled all symbol mangling in production builds to workaround unwanted component class name mangling.

0.1.45​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.1.45 @eastsideco/salvo-ts-build@0.1.45
npm install --save @eastsideco/salvo-ts@0.1.45 @eastsideco/salvo-ts-build@0.1.45
  • Fix Liquid schema error when a section's schema tags are formatted unusually.

0.1.44​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.1.44 @eastsideco/salvo-ts-build@0.1.44
npm install --save @eastsideco/salvo-ts@0.1.44 @eastsideco/salvo-ts-build@0.1.44
  • Fix Liquid schema error when a section has a schema which doesn't define a class.

0.1.43​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.1.43 @eastsideco/salvo-ts-build@0.1.43
npm install --save @eastsideco/salvo-ts@0.1.43 @eastsideco/salvo-ts-build@0.1.43
  • Fixed webpack schema error when running npm run prod.

0.1.40 - 0.1.42​

Versions skipped.

0.1.39​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.1.39 @eastsideco/salvo-ts-build@0.1.39
npm install --save @eastsideco/salvo-ts@0.1.39 @eastsideco/salvo-ts-build@0.1.39
  • Added experimental locale auditing. Use npm run dev -- --audit-locales to opt-in.
  • Fixed section metadata classes.

0.1.38​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.1.38 @eastsideco/salvo-ts-build@0.1.38
npm install --save @eastsideco/salvo-ts@0.1.38 @eastsideco/salvo-ts-build@0.1.38
  • Temporarily disable section metadata classes due to Shopify errors.

0.1.37​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.1.37 @eastsideco/salvo-ts-build@0.1.37
npm install --save @eastsideco/salvo-ts@0.1.37 @eastsideco/salvo-ts-build@0.1.37
  • Added featured_image to Shopify.Liquid.Variant.
  • Fixed links in docs.

0.1.36​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.1.36 @eastsideco/salvo-ts-build@0.1.36
npm install --save @eastsideco/salvo-ts@0.1.36 @eastsideco/salvo-ts-build@0.1.36
  • Added auto-generated typings for Shopify Liquid objects (docs).

0.1.35​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.1.35 @eastsideco/salvo-ts-build@0.1.35
npm install --save typescript@4.5
npm install --save @eastsideco/salvo-ts@0.1.35 @eastsideco/salvo-ts-build@0.1.35
npm install --save typescript@4.5
REQUIRED THEME CHANGES
  • Some changes may be required to support Typescript 4.5. Note that if you use VSCode's typescript support it's possibly that your editor was already making suggestions based on 4.5 rules, so you may have already made this changes.
  • Many of the new linting rules are auto-fix, but some changes may be required to your code for some of the rules. (Suggestion: If you are unsure how to resolve a lint error, google the error name and look at the description of the rule. There will usually be example solutions provided.)

0.1.34​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.1.34 @eastsideco/salvo-ts-build@0.1.34
npm install --save @eastsideco/salvo-ts@0.1.34 @eastsideco/salvo-ts-build@0.1.34
  • Added --noclear option for debugging fatal compiler errors.
  • Expose error messages when fatal compiler errors occur.

0.1.33​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.1.33 @eastsideco/salvo-ts-build@0.1.33
npm install --save @eastsideco/salvo-ts@0.1.33 @eastsideco/salvo-ts-build@0.1.33
  • Improve error messages for project config validation errors.

0.1.32​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.1.32 @eastsideco/salvo-ts-build@0.1.32
npm install --save @eastsideco/salvo-ts@0.1.32 @eastsideco/salvo-ts-build@0.1.32
  • Fixed "module not found" errors during manifest generation when importing (s)css files.
  • Updated docs, improved docs homepage.

0.1.30 - 0.1.31​

Versions skipped.

0.1.29​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.1.29 @eastsideco/salvo-ts-build@0.1.29
npm install --save @eastsideco/salvo-ts@0.1.29 @eastsideco/salvo-ts-build@0.1.29
  • Added changelog.

0.1.28​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.1.28 @eastsideco/salvo-ts-build@0.1.28
npm install --save @eastsideco/salvo-ts@0.1.28 @eastsideco/salvo-ts-build@0.1.28
  • Your salvo.config.js is now validated and npm run dev will throw validation errors if it doesn't match the expected structure.
  • The compiler will now validate that the versions of @eastsideco/salvo-ts and @eastsideco/salvo-ts-build you have installed match. If they don't, npm run dev will throw an error and give you a command to run to upgrade.

0.1.23 - 0.1.27​

Versions skipped.

0.1.22​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.1.22 @eastsideco/salvo-ts-build@0.1.22
npm install --save @eastsideco/salvo-ts@0.1.22 @eastsideco/salvo-ts-build@0.1.22
  • Removed manifest polyfill for document.
  • Added ability to exclude specified packages from manifest generation. By adding a package to manifest.ignorePackages, it will be replaced with module.exports = {} when manifest generation happens. This should allow you to effectively avoid manifest generation errors related to using browser-only packages (as long as your module doesn't have side-effects that touch it, which is discouraged anyway.)
Details: Limitations: avoiding invoking ignored packages during manifest generation

To clarify the limitation regarding using an ignored package in a module with side-effects (and how it relates to decorators especially): Assuming that 'foo' is in your manifest.ignoredPackages, these are okay:

ts
import { doFoo } from 'foo'
export class MyComponent extends ThemeComponent {
    init() {
        doFoo();
    }
}
or
import { doFoo } from 'foo';
export function helpfulUtilityFunction() {
    // do a bunch of things
    doFoo();
}
ts
import { doFoo } from 'foo'
export class MyComponent extends ThemeComponent {
    init() {
        doFoo();
    }
}
or
import { doFoo } from 'foo';
export function helpfulUtilityFunction() {
    // do a bunch of things
    doFoo();
}

When you import either of these modules, doFoo from foo is never actually touched, only when those classes/functions are used.
These would NOT be okay:

ts
import { doFoo } from 'foo';
export class MyComponent extends ThemeComponent {
    @Prop({ default: doFoo() }) thing: string;
}
or
import { doFoo } from 'foo';
doFoo();
ts
import { doFoo } from 'foo';
export class MyComponent extends ThemeComponent {
    @Prop({ default: doFoo() }) thing: string;
}
or
import { doFoo } from 'foo';
doFoo();

Because in both of these cases, doFoo from foo is touched immediately when these modules are imported. When the manifest generation is running, foo will be replaced with an empty module, so doFoo won't exist and this will throw an error. (Reminder: Prop and other decorators are evaluated when your class is defined [i.e. on import], not when it's used, which is why using it in a decorator argument is problematic.)

REQUIRED THEME CHANGES
  • Add the following section to your salvo.config.js (inside the module.exports = {...}):
js
manifest: {
    // Packages added here will be replaced with a no-op module during manifest generation.
    // Add any misbehaving packages which expect a browser environment to be available on import.
    ignorePackages: [
    ]
},
js
manifest: {
    // Packages added here will be replaced with a no-op module during manifest generation.
    // Add any misbehaving packages which expect a browser environment to be available on import.
    ignorePackages: [
    ]
},
  • Add the name of any packages which depended on the document polyfill to manifest.ignorePackages like this:
js
manifest: {
    ignorePackages: [
        'plyr',
    ]
},
js
manifest: {
    ignorePackages: [
        'plyr',
    ]
},

0.1.21​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.1.21 @eastsideco/salvo-ts-build@0.1.21
npm install --save @eastsideco/salvo-ts@0.1.21 @eastsideco/salvo-ts-build@0.1.21
  • Fix: Added minimal polyfill for window.document during manifest generation.

0.1.20​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.1.20 @eastsideco/salvo-ts-build@0.1.20
npm install --save @eastsideco/salvo-ts@0.1.20 @eastsideco/salvo-ts-build@0.1.20
  • Added minimal polyfill for window.document during manifest generation.

0.1.19​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.1.19 @eastsideco/salvo-ts-build@0.1.19
npm install --save @eastsideco/salvo-ts@0.1.19 @eastsideco/salvo-ts-build@0.1.19
  • Resolved boolean Prop values always resolving to true

0.1.18​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.1.18 @eastsideco/salvo-ts-build@0.1.18
npm install --save @eastsideco/salvo-ts@0.1.18 @eastsideco/salvo-ts-build@0.1.18
  • variables.scss will now be included in all Component SCSS files automatically by the compiler (it will update your source files to include it if missing.) (This can be configured in salvo.config.js) [#7]
REQUIRED THEME CHANGES
  • Add the following section to your salvo.config.js (inside the module.exports = {...}):
js
    components: {
    sass: {
        // These imports will be added to every Component SCSS file
        defaultImports: [
            './assets/styles/variables.scss',
        ],
    },
},
js
    components: {
    sass: {
        // These imports will be added to every Component SCSS file
        defaultImports: [
            './assets/styles/variables.scss',
        ],
    },
},
  • Add a assets/styles/variables.scss file to your project.

0.1.17​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.1.17 @eastsideco/salvo-ts-build@0.1.17
npm install --save @eastsideco/salvo-ts@0.1.17 @eastsideco/salvo-ts-build@0.1.17
  • Multiple Component SCSS files in the same directory will no longer cause a compile error. [#13])

0.1.16​

Install/upgrade:

npm install --save @eastsideco/salvo-ts@0.1.16 @eastsideco/salvo-ts-build@0.1.16
npm install --save @eastsideco/salvo-ts@0.1.16 @eastsideco/salvo-ts-build@0.1.16
  • required is no longer allowed in @Prop({}) options. Use default instead. Any prop with a default specified is non-required. default may be any value of the appropriate type, except undefined (use default: null for a 'value not set' default instead.) [#2]
  • Incorrect validation messages will no longer be shown in these situations: boolean props; props with multiple words in name; falsey prop values other than undefined. [#1]