Start / Holiday Release

Holiday Release

Happy Holidays, all! I added the finishing touches and pushed out the newest batch of improvements, fixes, and new features. This release marks the first that starts the process toward a more stable 0.1.0 or "beta" release (likely around the ~0.0.75 or ~0.0.80 releases). More info on the release plans contained below. Here's to a fantastic 2025!

Alpha 73

Alpha 73 New Feature

The big new feature is the Include definition. This definition is very verstatile, and can be used for including virtually any type of head content, including <script> tags for raw inclusion of JS, and <link> for CSS.

Not only that, but it supports a "NPM-light" sort of usage as well, that allows you to quickly include JS and CSS, instantly accessing many NPM packages.

Alpha 73 Deprecations

This is one of the first releases with deprecations. The following features will be removed in future versions:

  • mode="vanish-into-document" - Use mode="vanish" and Include instead (see below)
  • mountRender Lifecycle - Use mount instead

Furthermore, take note about the following changes which will be gradually implemented in this and future versions:

  • Directives: The [ and ] is becoming optional, e.g. state.bind and on.click:=script.count will now be preferred
  • Artifacts will be changing to only bundle from Include by default, leaving other JS and CSS untouched
  • Default dehydrate/hydrate behavior will no longer hydrate directives in DOM, but instead always attempt to rerender to re-attach directives

Alpha 73 Bug Fixes

Browser support got a big boost: Rewriting some incompatible regex has now enabled Safari 11 support, improving Modulo's shim-free support for unsupported legacy Apple devices from 2014-2018.

Getting started with Alpha 73's include

Example 1: For script and link dependencies

The simplest way to use Include is as a global definition. It will "include" it's contents in the head of the document as soon as Modulo loads. Note that it will NEVER include the same thing twice (it uses hashes to identify resources). This mode is great for following tutorials for integrating JS projects.

For example, to include Quill JS, it's as easy as just pasting in the head content they give you:

<Include> <link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script> </Include>

Example 2: Including meta content

Include can be used for adding meta tags to your page as well:

<Include> <meta name="description" content="A great Modulo website" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="charset" charset="utf8" /> </Include>

Additional features

Also, note that you can use -load-mode="lazy" to make it skip the bundle, and only get inserted as-is on page load. This is great for fixing bugs with integrating other JS packages, while supporting advanced features like JavaScript modules and import statements.

Alpha 73 Deprecation FAQ

  • Q: Why is vanish-into-document is being removed? A: We already have vanish, and now we also have Include, making vanish-into-document obsolute as a component render mode.

  • Q: Why the directive syntax change? A: While browsers technically allow those characters, this makes the directive attribute naming convention follow the W3C HTML spec more strictly, which, in practice, enables better compatibility. Otherwise, third-party JS libraries crash when using the stricter setAttribute interface on HTML generated from Modulo.

  • Q: Why are directives no longer going to be dehydrated? A: Note that this change will result in slightly less efficient hydration steps in some cases. However, the trade-off is simpler and faster builds, more consistent behavior between development and production, and preventing easy "foot guns" that result in excess re-render during hydration loops. That said, the old behavior will still be available as a recipe for an alternative build command, as it might be a nice tweak to further optimize specific SSG projects.

Beta Road Map: On the road to stability!

This release represents one of the last big feature additions until the Modulo beta, Modulo.js v0.1.0! Going forward, the focus will be fully documenting the build and Include architecture, for fine-tuning of large, multi-page websites that use Modulo. Furthermore, the Component Part extension interface will get fully documented.

I expect this release, and the next few releases, to be among the last alpha releases. The remaining alphas will continue to support the deprecated features, but as soon as the new replacements are finished and documented, the deprecated features will be removed in the first beta release.

This means I am trying my best to avoid having to add or remove any major features from "beta" to "1.0". The goal of the subseuqent beta releases (e.g., 0.2.x, 0.3.x), in preparation for a highly-stable, semi-final 1.0 release, are to polish, stabilize, and provide crystal-clear documentation and best-practices.