surface v0.8.0 Release Notes

Release Date: 2022-09-01 // over 1 year ago
    • Support scoped CSS styles for components using either inline <style> tags or colocated .css files (#621)
    • Add render_sface/1 to allow overriding render/1 and compute/update assigns when using external .sface files
    • Add --tailwind option to mix surface.init to bootstrap a project with TailwindCSS support
    • Add --layouts option to mix surface.init to replace .heex layout files with corresponding .sface files
    • Add --web-module option to mix surface.init to override the default web module (#638)
    • Support using the :hook directive to point to the default hook exported in the .hooks.js file
    • Add option from_context to prop and data to allow setting values directly from the context
    • Add Context.put/3 and Context.get/2 to allow manipulating the context inside lifecycle callbacks and render/1
    • Add prop context_put to <#slot> to pass context values directly to a slot without propagating context values to other components
    • Add config :propagate_context_to_slots to restrict context propagatiion, optimizing diff tracking
    • Add functions Context.copy_assign/3, Context.maybe_copy_assign/3 and Context.maybe_copy_assign!/3
    • Add catalogue_test/1 macro to generate basic tests for catalogue examples and playgrounds
    • Add module Surface.Catalogue.Examples to allow defining multiple stateless examples in a single module
    • Support editing slot values as text in playgrounds (Catalogue)
    • Fix context propagation in dynamic components
    • Fix context propagation in recursive components
    • New API for Slot arguments and generator (#613)

    🗄 Deprecations

    • Deprecate <InputContext> in favor of declarative option from_context
    • Slots (#613)
      • Option :args has been deprecated, use
        • slot arg: :string instead of slot args: [:name]
        • slot arg: %{name: :string, age: number} instead of slot args: [:name, :age]
      • Attribute for has been deprecated, use <#slot {@header}> instead of<#slot for={@header}>
      • Attributes name and index have been deprecated, use <#slot {col}> instead of<#slot name={"col"} index={index}>
      • Directive :args has been deprecated, use
        • <#slot {@default, name}> instead of <#slot :args={name: name}>
        • <#slot {@default, name: name, age: age}> instead of <#slot :args={name: name, age: age}>

    💥 Breaking Changes

    • Drop support for Elixir < v1.12
    • Context values are no longer automatically propagated through slots. Components that need to pass values to the parent scope via slots must explicitly set propagate_context_to_slots: true in their configuration
    • Slots (#613)
      • New option :generator_prop use slot default, generator_prop: :items instead of slot default, args: [item: ^items], associated prop :items must be of type :generator
      • New attribute generator_value use <#slot generator_value={item} /> instead of <#slot :args={item: item} />
      • <#template slot="slot_name"> has been removed in favor of <:slot_name> (#575)