Typed clients, customizer insights, and safer tooling
Shared client types, a performance inspector for Shopify's theme customizer, more reliable development and build workflows, and updates you can review before installing. Upgrading an existing theme: add typescript and cjs-module-lexer as development dependencies using your package manager, or rerun osmose add for its framework. Restart development sessions and rebuild/re-push the theme to receive the Shopify-hosted runtime changes. Update editor integrations separately; this release includes the VS Code extension v1.1.0 and an updated Neovim plugin.
Added
- Opt-in named Liquid component contracts validate required and optional props, apply defaults, and provide caller diagnostics. Shared client prop types are generated for WC, Lit, Preact, Solid, React, Vue, and Svelte, with explicit type bindings that preserve native editors. Contract metadata covers every supported client file extension, including .mts and .cts.
- React integration in project creation, onboarding, and osmose add, with its runtime, Vite plugin, and TypeScript dependencies.
- Framework-native typed props are available before the first client render, preserving false, zero, empty strings, null, and structured values. Top-level typed props named __proto__ remain own data properties. Declared Vue props such as title retain their values without passing through string-coercing DOM setters.
- Framework-native client mounting respects each island's loading trigger even when another instance imports the client, cleans up subscriptions on removal, and replaces server markup when mounting default-export Preact clients.
- Sign in with a Shopify account using osmose auth login. Existing Theme Access token workflows remain available for theme operations.
- Measure Liquid render time and hot spots with osmose profile, export JSON or speedscope reports, and compare routable templates with --all. Profiling requires Shopify account sign-in and access to Shopify's profiler; Theme Access tokens cannot request profiles.
- A performance inspector in Shopify's theme customizer shows section and page costs, island loading and failures, resource waterfalls, image issues, and JavaScript weight. Pin a report to compare changes and inspect islands outside sections, including those in the layout.
- Set Liquid and JavaScript budgets in osmose.toml. osmose build --check --profile checks the compiled theme and enforces Liquid budgets against a signed-in storefront; JavaScript weight budgets are evaluated in the customizer inspector, not by the CLI.
- Customizer selection reveals relevant islands, and clickable section and layout chips open their inspectors. Expanded island failures show the error, asset, and stack.
- During development, uploaded client source maps and Liquid source bundles let the customizer inspector open source without reaching localhost. The source viewer shows the full syntax-highlighted file, jumps to mapped error or hot-spot lines, and can open files in your configured editor.
- Liquid hot spots link back to authored source, including expanded components and located filters. Switch to compiled output to see the production form when available, with the viewer identifying whether it shows pushed or profiled code.
- Repeated profiling samples report one median-total request, keeping timings, call counts, hot spots, and raw output consistent. Hot spots follow the selected Liquid call tree, with repeated section files identified as aggregates.
- The theme customizer uses Shopify-hosted production assets while the storefront preview uses Vite. Background builds keep customizer assets in sync, and the terminal development view reports sync readiness or stale uploads.
- Headless build and store commands support environment-based configuration and JSON results, with Theme Check diagnostics surfaced in GitHub Actions. An existing Shopify identity session can satisfy the headless store-access requirement without a Theme Access token.
- Production layouts identify the Osmose version in generator metadata and runtime markers. Set settings.hide_generator to omit the generator meta tag.
- Scrollable release history from the terminal home with r, update review before installation, and the read-only osmose update --notes command.
- Public documentation with a Markdown feed, plus a website changelog backed by the same release notes as the CLI.
Improved
- Nine real feature recordings replace the homepage reel, with desktop hover and keyboard navigation, mobile tap selection, transcripts, and reduced-motion and no-JavaScript fallbacks.
Fixed
- React and Svelte scaffolds select Vite plugins compatible with the project's Vite 7 toolchain, avoiding incompatible plugin major versions during dependency installation.
- Production framework bundles retain statically discoverable CommonJS named exports, including React hooks and createElement, so native imports work through the shipped import map. New scaffolds and osmose add provide the required static export parser.
- Production framework bundles use their own integration's runtime configuration, including Vue's production feature flags, rather than compiling framework dependencies without the required settings. Saved Lit integrations are accepted without requiring a Vite plugin.
- The Vite launcher shuts down when its Osmose parent exits unexpectedly, rather than leaving a development server holding its port.
- Islands can recover from bare-module resolution failures when the browser has not applied the theme's import map. The fallback resolves shared dependencies through the import graph instead of rewriting only the entry module.
- Inline CSS imports retain their stylesheet content in themes without Tailwind. Unsupported import extensions and unreadable inline assets now produce compiler errors instead of silently leaving invalid or empty output.
- Production builds include an empty profile asset so the customizer snippet's reference does not fail Theme Check before a profile exists. Native-only themes also include the import-map snippet referenced by generated layouts, preventing missing-snippet render errors.
- Pull protects local Liquid containing Osmose component or import directives from replacement with remote output unless you explicitly force the overwrite. Development startup, packaging, and individual-file build failures now return command errors.