Skip to content

Releases: ghivert/sketch

v4.2.0

25 Jun 14:09
1c9e28b

Choose a tag to compare

What's Changed

Every packages are upgraded to use gleam_erlang and gleam_otp 1.0.0! It means sketch is now fully compatible with mist 5.0.0, but also any other packages relying on newer version of gleam_erlang and gleam_otp.

Full Changelog: v4.1.0...v4.2.0

v4.1.0

09 May 16:23
593a5df

Choose a tag to compare

What's Changed — Core

v4.1.0 marks a new release for Sketch, allowing to bundle global, static styling
directly on stylesheet! Instead of depending on an external CSS file, it's now
possible to style body, :root, :host or any node you want directly in your
stylesheet.

import sketch
import sketch/css
import sketch/css/length.{px}

pub fn main() {
  let assert Ok(stylesheet) = sketch.stylesheet(strategy: sketch.Ephemeral)
  stylesheet
  |> sketch.global(root_class())
  |> sketch.global(body_class())
  |> sketch.render
}

fn root_class() {
  css.global(":root", [
    css.property("--my-variable", "#FFFFFF"),
  ])
}

fn body_class() {
  css.global("body", [
    css.font_family("Déjà Vu Sans"),
    css.margin(px(0)),
  ])
}

Everytime a global class is pushed in a stylesheet, the previous global class
with the same name will be overidden, and the new style will take place. It's
possible to leverage persistent stylesheet with global classes to change your
default styles during the lifetime of your application.

Improvements

  • Add the support for global classes to push directly in stylesheets.
  • Change the class name generation algorithm from xxhash32 to murmur3a, thanks
    to @eaon! Generation algorithm is now purely written in Gleam, and does not
    rely anymore on opaque blob, meaning Sketch is now more security-friendly, and
    100% auditable!
  • Class names are now defined using hex instead of ints! This makes class names
    easier to recognize and easier to read in the DOM!
  • Add a dispose function, to delete stylesheets and avoid memory leaks.

What's Changed — Sketch Lustre

Sketch Lustre Experimental is now official, and become the official way to use
Sketch with Lustre! Say goodbye to wrapper type, and say hello to pure, native
Lustre Element!

Sketch Lustre now uses the new approach to hide the sketch.StyleSheet during
view creation, to generate directly lustre/element.Element.
sketch/lustre/element.Element is now gone, meaning Sketch Lustre becomes
easily interoperable with the rest of the Lustre ecosystem! Sketch Lustre marks
a new step for Sketch & Lustre, closing the gap between Lustre & Sketch!

Breaking Changes

  • sketch/lustre/element.Element is now gone, and every
    sketch/lustre/element/html function generate lustre/element.Element
    directly.
  • sketch/lustre.setup does not accept a sketch.StyleSheet anymore, but now
    generates the corresponding persistent stylesheet on its own. This ensures no
    user will choose the wrong stylesheet strategy.

Improvements

  • sketch/lustre now exposes teardown, that let you get rid of a
    sketch.StyleSheet. That ensures no memory leak will happen in applications.
  • To mimic Lustre, sketch_lustre exposes a new module
    sketch/lustre/element/keyed, that exposes the same functions as
    lustre/element/keyed, with an additional class when needed.

New Contributors

  • @eaon made their first contribution in #40

Full Changelog: v4.0.0...v4.1.0

v4.0.0

27 Jan 12:39
32a35d1

Choose a tag to compare

What's Changed — Core

v4.0.0 marks a major release for Sketch! It bundles new improvements, new
features, and improved namespacing! Six months after the initial release of v3,
v4 marks a new milestone as Sketch gains in maturity, usability and usage. More
and more people are using it, and as such, Sketch has to evolve in the right
path!

Every functions now display documentation, and points to according MDN
documentation, with no defaults for a language. This means Sketch tries to help
you with precise, up to date documentation extracts, and let you deep dive in
the documentation in your favourite language with one click!

Thanks to everyone using Sketch and helping me maintaining it as a package,
always pushing the boundaries of what can be achieved with it!

Features

  • Most selectors have been implemented. Some selectors are still missing, when
    they were overlapping with Gleam, hard to implement, or simply useless to
    implement (like :host that should be used in plain CSS stylesheets mostly).
  • Most combinators have been implemented. They can be used exclusively with
    other classes and I have no will to support anything else. If you need
    specific CSS, then you probably need to write CSS.
  • Support for only, print, screen & all media queries has been added.
  • CSS transform functions are now fully supported, with all functions supported.
  • CSS Length are now fully supported, with all length types supported.
  • Keyframes @rule are now supported.
  • Font Face @rule are now supported.

Improvements

  • Every CSS property, selectors & combinators now live in sketch/css.
  • Every other modules, like media, size or angle now live in sketch/css.
  • Every CSS property now display the headline of the documentation, and points
    to its MDN Reference.
  • Every CSS length now display the headline of the documentation, and points to
    its MDN Reference.
  • Every CSS angle now display the headline of the documentation, and points to
    its MDN Reference.
  • Every CSS media queries now display the headline of the documentation, and
    points to its MDN Reference.
  • Every CSS transform now display the headline of the documentation, and points
    to its MDN Reference.
  • Every CSS pseudo-classes & pseudo-elements now points to its MDN Reference and
    have a fragment of the page to simplify understanding.
  • SVG exclusives properties has moved to sketch/css/svg.
  • to_string functions have been hidden from user in documentation. While they
    remain publicly accessible, they are of small utility for the daily users.
    Frontend authors can still use them if they need it.
  • Code has been simplified as a whole. Readability is better, codebase is easier
    to understand.
  • Few tests are now implemented to ensure no regression across versions!
  • sketch.Cache has been renamed sketch.StyleSheet, and related function have
    been updated accordingly.
  • size module is renamed length, to follow CSS specifications. All lengths
    are also now implemented and supported.
  • transform.translate2 and transform.scale2 are deleted.

Bugfixes

  • Nested selectors/combinators are now supported.
  • Persistent class name generation strategy in caches have been removed to only
    keep Ephemeral class name generation strategy. Persistent vs Ephemeral caches
    are still there, but they now don't lead to different class names. One class
    == one class name no matter the cache they're in.

What's Changed — Sketch CSS

Sketch CSS underwent a major rewrite. From a quick proof of concept drafted in a
day to illustrate the abilities of Sketch, Sketch CSS is now completely
reimplemented from scratch, with support for modern, up to date Gleam, with
partial supports for "code evaluation".

Sketch CSS now somewhat acts as an "interpreter". Instead of reading the code,
and generating the corresponding CSS, Sketch CSS now traverse the sources, and
execute some parts of the code, like an interpreter would do. This allows to
have an whole vision of the Gleam AST, but also to perform variable
interpretation, light computations, dependency detection, cyclic detection, and
more!

Sketch CSS marks the first real step of Sketch as a tool to generate CSS. New
adventures await, with support for Lustre devtools, Vite, and such!

Features

  • Sketch CSS reads *_styles.gleam, *_css.gleam & *_sketch.gleam files to
    generate CSS source files.
  • Sketch CSS configuration can be configured in CLI, with sketch_css.toml, or
    directly in gleam.toml.

What's Changed — Sketch Lustre

v2.0.0 marks a breaking change with the new Sketch release (i.e. v4.0.0). Sketch
Lustre now uses a new, more idiomatic render and ssr API, and simplifies as
much a possible the exposed API.

Sketch Lustre has been one of the principal package used in combination with
Lustre. Thanks for your investment!

Improvements

  • Adapt to new Sketch API v4.0.0. Cache has been renamed to StyleSheet, and
    as such, can cause some inconsistencies bugs with old code.
  • Use a new middleware-render API. The old compose function is now not
    supported anymore.
  • Remove the old Options in favour of Container.
  • Shadow root management has been changed from plinth to simple Dynamic.
    This can't type-check it, but it avoid having to depend on plinth in
    production, to let every user handle ShadowRoot as they want.
  • Every HMTL element now has MDN Reference links & fragment of description to
    explain how to use them.

What's Changed — Sketch Redraw

v2.0.0 marks a breaking change with the new Sketch release (i.e. v4.0.0). Sketch
Redraw should now be used in conjuction with redraw_dom exclusively.

Improvements

  • Every HMTL element now has MDN Reference links & fragment of description to
    explain how to use them.

Full Changelog: v3.1.2...v4.0.0

v3.1.2

28 Nov 13:36
ebce172

Choose a tag to compare

What's Changed

Full Changelog: v3.1.1...v3.1.2

v3.1.1

07 Nov 18:16
27b476f

Choose a tag to compare

What's Changed

  • Bugfix - Fixes in CSS generation - "sketch_css" by @josevictorferreira in #29
  • support updated lustre 4.6.0 by @Guria in #31
  • Remove outdated documentation by @ghivert in #33
  • Change way to use sketch.compose, to have a more consistent output.

New Contributors

Full Changelog: v3.1.0...v3.1.1

v3.1.0

17 Sep 16:43
83d90a6

Choose a tag to compare

What's Changed

  • Add Redraw Sketch by @ghivert in #25
  • Add initial transform API by @joseemds in #23
  • Fix correct signature for cache on Erlang target by @ghivert in #26
  • Remove fold_right functions to avoid stack overflows on JS by @ghivert in #27

New Contributors

Full Changelog: v3.0.2...v3.1.0

v3.0.2

10 Aug 14:12
676ae30

Choose a tag to compare

What's Changed

  • Hide the Erlang target on JS. Fix bug where the JS target was not able to compile.

Full Changelog: v3.0.1...v3.0.2

v3.0.1

10 Aug 14:12
c95b621

Choose a tag to compare

What's Changed

  • fix: size.percent_ return Pct instead of Px by @kwshi in #22
  • Add ephemeral caches on BEAM by @ghivert in #24. Sketch is now usable in the exact same way on the Erlang target as well as on the JS target.

New Contributors

  • @kwshi made their first contribution in #22

Full Changelog: v3.0.0...v3.0.1

v3.0.0

05 Aug 12:46
1bde2ce

Choose a tag to compare

3.0.0 — New Major Version 🎉

Sketch undergo a major rewrite, switching from being a Lustre-focused package, to a generic CSS-in-Gleam package. Sketch is now split across multiple packages: sketch, sketch_css & sketch_lustre.
Inspired by Gleam, Sketch has now an agnostic core, able to target any project and any compile target, and has few packages specialised for frameworks and libraries to integrate it in a transparent way! This step starts first with the split of Lustre features from the core to its own package, sketch_lustre. This change should help building on top of Sketch, and allow everyone to use the package, in the way they like. Sketch favours diversity!

Changes

  • Deprecations are removed.
  • Remove the mechanism of "virtual stylesheet", because browsers optimise for static CSS. Every class pushed in Cache is now memoised.
  • Add every possible non-experimental CSS properties.
  • Split Lustre bits to sketch_lustre.
  • sketch_css allows to generate a CSS stylesheet from Sketch styles.
  • Class ID change from guess (with magic) to string.inspect (without magic, in a deterministic way). Overhead is really low (few milliseconds at most).
  • sketch.Class now contains its string representation, allowing for quicker lookup in cache.
  • Lustre mechanism switch from injecting styles in globalised Cache to an additional tree walk before render (like elm-css). This is transparent for the user, and should not be felt as a change anyway (time to render differs from a bunch of milliseconds).

Full Changelog: v2.3.0...v3.0.0

v2.3.0

10 Jul 10:12
7b0a02f

Choose a tag to compare

What's Changed

  • Add the utility functions in sketch/lustre/element to create easily view functions in Lustre, Sketch-enhanced!

Full Changelog: v2.2.2...v2.3.0