Update dependency riot to v7 (master) - autoclosed #342

appcues-wss · 2023-06-16T08:54:27Z

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
riot (source)	`^2.2.4` -> `^7.0.0`

Release Notes

riot/riot

`v7.1.0`

Compare Source

Fix https://github.com/riot/riot/issues/2972
Fix https://github.com/riot/riot/issues/2967 (enhance the previous patch)
Fix https://github.com/riot/riot/issues/2969
Update Riot.js has now 0 dependencies. All the needed dependencies will be bundled before the publishing on npm
Update dev dependencies

`v7.0.7`

Compare Source

Fix https://github.com/riot/riot/issues/2971
Fix https://github.com/riot/riot/issues/2967 adding support for css complex pseudo selectors
Fix riot.version wrong value in the esm export
Fix circular dependencies
Update improve rendering performance preferring loops over recursion for DOM manipulations

`v7.0.6`

Compare Source

Update improve the deno compatibility adding the file extension to the esm files imports

`v7.0.5`

Compare Source

Improve rendering performance
Update development dependencies

`v7.0.4`

Compare Source

Fix https://github.com/riot/riot/issues/2963

`v7.0.3`

Compare Source

Fix https://github.com/riot/riot/issues/2962
Improve memory and rendering performance of the dom-bindings

`v7.0.2`

Compare Source

Fix https://github.com/riot/riot/issues/2961

`v7.0.1`

Compare Source

Fix small bug computing text expressions in runtime slots

`v7.0.0`

Compare Source

Update: code cleanup to improve the esm bundle and treeshaking
- Remove: riot.esm.js in favor of the esm folder
Add: runtime slots https://github.com/riot/riot/discussions/2917
- The runtime slots are available in the riot+compiler.js bundle (A documentation update will be available soon)
Update: reduced bundle size to 5kb riot.min.js gzipped
Update: new Compiler (riot+compiler.js) bundle 50% lighter than the previous one

Important: The documentation will be updated during the next few weeks, however no API breaking changes were introduced.

`v6.1.2`

Compare Source

Fix https://github.com/riot/riot/issues/2947

`v6.1.1`

Compare Source

Fix compiler issues with object expressions https://github.com/riot/compiler/issues/155

`v6.1.0`

Compare Source

Update compiler
- Components output code will use modern javascript (like arrow functions) reducing heavily their size
- Components code output will be smaller due to compiler optimizations
Update dependencies

`v6.0.4`

Compare Source

Update dependencies
Fix https://github.com/riot/riot/issues/2935
Fix https://github.com/riot/riot/issues/2931

`v6.0.3`

Compare Source

Fix tags with only named export statements. Their javascript will be properly generated also without an export default
Update @riotjs/dom-bindings types adding better typescript support

`v6.0.2`

Compare Source

Fix small incompatibility with @riotjs/lazy

`v6.0.1`

Compare Source

Update: update the @riotjs/compiler improving the typescript support for type aliases like export type ComponentInterface = RiotComponent<MyComponentProps, MyComponentState>

`v6.0.0`

Compare Source

Add strict typescript support https://github.com/riot/riot/pull/2912 Breaking Change: the Riot.js types have been updated
Add fallback rendering for slots https://github.com/riot/riot/issues/2920
Add typescript Parser as default compiler parser https://github.com/riot/compiler/pull/149
Fix https://github.com/riot/riot/issues/2925
Fix typescript compilation https://github.com/riot/riot/issues/2926

If you are not a typescript user this release doesn't introduce any braking change. If you are a typescript user you can start writing Riot.js components as follows

<my-component>
  <p>{ state.greeting }{ props.username }</p>

  <!--
    Notice that lang="ts" does actually nothing.
    It's just needed to let your IDE interpret the below code as typescript.
    The riot compiler will ignore it
  -->
  <script lang="ts">
    import {withTypes, RiotComponent} from 'riot'

    export type MyComponentProps = {
      username: string
    }

    export type MyComponentState = {
      message: string
    }

    export type MyComponent = RiotComponent<MyComponentProps, MyComponentState>

    export default withTypes<MyComponent>({
      state: {
        message: 'hello'
      }
    })
  </script>
</my-component>

Many thanks to https://github.com/kachurun for his help on this major release

Update: replace the compiler acorn javascript parser with the (bigger but more modern) @babel/parser
Add: typescript syntax support in Riot.js <script> tags

Notice:
Riot.js will not type check your components scripts nor transpile them. This version allows you to use the typescript syntax without forcing the use of a typescript preprocessor, but type checking and transpilation should be handled with tools like babel or ts-loader
You can check the new compiler here with the following demo component:

<random>
  <h3>{ props.title }</h3>

  <button onclick={ generate }>
    Generate
  </button>

  <h1>
    { state.number }
  </h1>

  <logs logs={ state.logs } onclear={ clearLogs }></logs>

  <script lang="ts">
    import Logs from '../logs/logs.riot'
    import {RandomComponent} from './types'

    function Random(): RandomComponent {
      return {
        state: {
          number: null,
          logs: []
        },
        generate(event: MouseEvent): void {
          this.update({
            number: Math.floor(Math.random() * 10000),
            logs: this.state.logs.concat({
              text: `Generate button clicked. Event type is ${event.type}`
            })
          })
        },
        clearLogs(): void {
          this.update({
            logs: []
          })
        }
      }
    }

    Random.components = {
      Logs
    }

    export default Random
  </script>
</random>

`v5.3.3`

Compare Source

Fix https://github.com/riot/riot/issues/2902

`v5.3.2`

Compare Source

`v5.3.1`

Compare Source

Fix https://github.com/riot/riot/issues/2895
Update improve compiler legacy syntax support. The following syntax is now also supported

<my-component>
  <p>{ state.message }</p>
  <button onclick={onClick}>Click Me</button>

  <script>
    const context = this

    context.state = {
      message: ''
    }
    
    context.onBeforeMount = () => {
      context.state.message = 'Hello'
    }

    context.onClick = () => {
      context.update({
        message: 'Goodbye'
      })
    }
  </script>
</my-component>

`v5.3.0`

Compare Source

Update improve support for legacy Riot.js syntax fixing some edge cases
Update improve support for recursive tags

Now you can recursively render tags without having to register them globally

<recursive-tree>
  <p>{ props.name }</p>
  <recursive-tree 
    if={ props.children.length && props.children } 
    each={ child in props.children } { ...child }/>
</recursive-tree>

`v5.2.0`

Compare Source

Add support for old style Riot.js syntax

Some liked more the old RIot.js syntax so you can now write components also as follows

<old-syntax>
  <p>{ state.message }</p>
  <button onclick={onClick}>Click Me</button>

  <script>
    this.onBeforeMount = () => {
      this.state.message = 'Hello'
    }

    this.onClick = () => {
      this.update({
        message: 'Goodbye'
      })
    }
  </script>
</old-syntax>

`v5.1.4`

Compare Source

Fix nested loops in looped <template> fragments https://github.com/riot/riot/issues/2892

`v5.1.3`

Compare Source

Fix mitigate redering issues https://github.com/riot/riot/issues/2892 issue (it's not completely fixed yet...)

`v5.1.2`

Compare Source

Update default project branch name master -> main
Fix make sure pure components will not be automatically removed by Riot.js if or each directives

`v5.1.1`

Compare Source

Fix https://github.com/riot/riot/issues/2889

`v5.1.0`

Compare Source

Add support for <template> slot tags https://github.com/riot/riot/issues/2888
Add improve debugging support, allowing shortcuts for the use of console methods in expressions: Before {window.console.log('hello')} -> After {console.log('hello')}
Improve rendering performance simplifying the compiler output

`v5.0.0`

Compare Source

This release is completely backward compatible, make sure to update the @riotjs/compiler@5.0.0 along with riot@5.0.0. All the Riot.js echosystem tools should keep working as expected without needing major release updates.

Changelog

Replace the internal domdiff rendering engine with a fork of udomdiff
Improve rendering performance
Improve library size (-1kb)
Improve Riot.js is side-effect free. Supports ES2015 exports also, hence fully tree-shakeable
Fix https://github.com/riot/riot/issues/2878 browser globals in expressions are available only as window properties breaking change
old { location.href } new { window.location.href }

`v4.14.0`

Compare Source

Add support for optional chaining and null coalescing expressions https://github.com/riot/riot/issues/2880
Add support for Riot.js expression bindings in native web components slots https://github.com/riot/riot/issues/2877

`v4.13.6`

Compare Source

Fix https://github.com/riot/riot/issues/2877 improving the compatibility with native web components

`v4.13.5`

Compare Source

Fix https://github.com/riot/riot/issues/2876

`v4.13.4`

Compare Source

Fix https://github.com/riot/riot/issues/2872
Update build script (rollup) dependencies

`v4.13.3`

Compare Source

Fix https://github.com/riot/riot/issues/2874
Update improve typescript definitions

`v4.13.2`

Compare Source

Fix https://github.com/riot/compiler/issues/134

`v4.13.1`

Compare Source

Fix https://github.com/riot/riot/issues/2866

`v4.13.0`

Compare Source

Add interoperability with native custom elements slots https://github.com/riot/riot/issues/2864

`v4.12.4`

Compare Source

Fix https://github.com/riot/riot/issues/2859 updating the riot+compiler bundle

`v4.12.3`

Compare Source

Fix https://github.com/riot/riot/issues/2859

`v4.12.2`

Compare Source

Fix https://github.com/riot/riot/issues/2858

`v4.12.1`

Compare Source

Fix Compiler support for Edge and Node 8

`v4.12.0`

Compare Source

Add support for nested slot HTML https://github.com/riot/riot/issues/2842
Improve events handling performance

`v4.11.1`

Compare Source

Fix https://github.com/riot/riot/issues/2836

`v4.11.0`

Compare Source

Add support for addEventListener options https://github.com/riot/riot/issues/2830

<p onclick={ [callback, { once: true }] }>Click me once</p>

Fix https://github.com/riot/riot/issues/2832

`v4.10.1`

Compare Source

Fix static components attributes not added to the props object

`v4.10.0`

Compare Source

Add support for native inline events https://github.com/riot/riot/issues/2823
Fix https://github.com/riot/riot/issues/2822
Improve performance avoiding redundant static attributes expressions

`v4.9.3`

Compare Source

Update rename the dom bindings export key to DOMBindings

`v4.9.2`

Compare Source

Update expose internal DOM template engine improving the framework interoperability

`v4.9.1`

Compare Source

Fix edge cases where compiler was detecting html nodes outside of the root node

`v4.9.0`

Compare Source

Add support for import() expressions, improving the interoperability with @riotjs/lazy
Add the compiler key to the riot+compiler bundle. The Riot.js compiler API is now also available from your browser

`v4.8.9`

Compare Source

Update typescript interface supporting the riot.component parentScope parameter

`v4.8.8`

Compare Source

Fix https://github.com/riot/riot/issues/2817
Add the optional parentScope to the riot.component method

`v4.8.7`

Compare Source

`v4.8.6`

Compare Source

Fix https://github.com/riot/riot/issues/2805

`v4.8.5`

Compare Source

Fix https://github.com/riot/riot/issues/2799

`v4.8.4`

Compare Source

Update improve performance reading the root node attributes to infer the props only in the mount and component calls
Update make the this.props components attribute not writable nor enumerable

`v4.8.3`

Compare Source

Fix make sure native HTMLElement attributes and properties will be not overridden
Improve dom-bindings codebase

`v4.8.2`

Compare Source

Fix avoid rendering function attributes
Add the compiler support for shorthand object attributes for example <p {...{myAttribute}}>

`v4.8.1`

Compare Source

Fix nested condition expressions inside slots bug

`v4.8.0`

Compare Source

Improve rendering performance
Improve the typescript interfaces adding types for the @riotjs/dom-bindings
Add riot.pure adding more granular control over the components rendering

`v4.7.2`

Compare Source

Fix https://github.com/riot/riot/issues/2791

`v4.7.1`

Compare Source

Fix https://github.com/riot/riot/issues/2788

`v4.7.0`

Compare Source

Update improve performance
Add the meta parameter to the component function to inject slots and attributes

import { component } from 'riot'
import App from './App.riot'

const app = component(App)

app(
  document.querySelector('app'), 
  { message: 'hello' }, 
  // slots and attributes should be valid @&#8203;riotjs/dom-bindings objects
  { slots: [], attributes: [] }
)

`v4.6.6`

Compare Source

Fix https://github.com/riot/riot/issues/2771
Fix https://github.com/riot/riot/issues/2769
Fix remove redundant compiler selector attributes

`v4.6.5`

Compare Source

Update improve rendering performance of the text expressions

`v4.6.4`

Compare Source

Fix https://github.com/riot/riot/issues/2766
Reduce a bit the size of the library removing unnecessary code

`v4.6.3`

Compare Source

Fix https://github.com/riot/riot/issues/2761
Update efficiency of the text expressions handling removing trailing white spaces

`v4.6.2`

Compare Source

Fix https://github.com/riot/riot/issues/2762

`v4.6.1`

Compare Source

Fix conditional <template> tags containing <slot> text nodes

`v4.6.0`

Compare Source

Fix edge case issue in case text expressions get rendered in <template> tags
Update improve the code of the core, compiler and dom-bindings moving the shared code into https://github.com/riot/util
Add support for HOC (Higher-Order Components) components via <slot> attributes for example:

Provider

<hoc-component>
  <slot message={ message } theme={ theme }/>
  
  <script>
    export default { 
      message: 'hello', 
      theme: 'dark' 
    }
  </script>
</hoc-component>

Consumer

<app>
  <hoc-component>
    <!-- the {message} property will be provided by the <hoc-component> -->
    <h1>{ message }</h1>

    <!-- the {theme} property will be provided by the <hoc-component> -->
    <sidebar theme={ theme }/>
  </hoc-component>

  <!-- the {message} property is not available outside of the <hoc-component> -->
  <p>{ message }</p>
</app>

`v4.5.1`

Compare Source

Fix https://github.com/riot/riot/issues/2760

`v4.5.0`

Compare Source

Fix: https://github.com/riot/riot/issues/2745
Improve: rendering performance
Update: internal events handing using DOM listeners instead of inline events
Update: improve the compatibility with native web components
Improve: rendering performance

`v4.4.1`

Compare Source

Fix small compiler issues
- Fix https://github.com/riot/compiler/issues/127
- Fix https://github.com/riot/compiler/issues/126

`v4.4.0`

Compare Source

Add: user options argument to the runtime compiler methods riot.compile riot.compileFromUrl for example

riot.compile({
  // use different expression brackets 
  brackets: ['${', '}']
}).then(() => {
  riot.mount('my-tag')
})

`v4.3.9`

Compare Source

Fix: Compiler Expressions Binding in SVG tags https://github.com/riot/riot/issues/2748
Fix: Compiler Expressions Parsing https://github.com/riot/riot/issues/2753
Fix: Typescript mount definition https://github.com/riot/riot/pull/2749

`v4.3.8`

Compare Source

Fix Compiler Issues
- Fix https://github.com/riot/compiler/issues/125
- Fix https://github.com/riot/compiler/issues/124

`v4.3.7`

Compare Source

Update the @riotjs/compiler fixing the following issues

`v4.3.6`

Compare Source

Fix: conditional directive bug https://github.com/riot/riot/issues/2739 and https://github.com/riot/riot/issues/2736
Fix: compiler issues with new keyword https://github.com/riot/riot/issues/2737
Fix: value attribute handling on <progress> tags and on non form elements https://github.com/riot/compiler/issues/122

`v4.3.5`

Compare Source

Fix: Improve the fix for https://github.com/riot/riot/issues/2714
Fix: support for backslashed css properties like for example p { content: '\263c'; }

`v4.3.4`

Compare Source

Fix: https://github.com/riot/riot/issues/2714

`v4.3.3`

Compare Source

Fix: https://github.com/riot/riot/issues/2726
Improve: each bindings performance

`v4.3.2`

Compare Source

Fix: https://github.com/riot/riot/issues/2728

`v4.3.1`

Compare Source

Fix https://github.com/riot/riot/issues/2723

`v4.3.0`

Compare Source

Add the keepRootElement parameter to the riot.unmount method https://github.com/riot/riot/pull/2721
Fix https://github.com/riot/riot/issues/2719

`v4.2.0`

Compare Source

Fix: attributes removal for numerical values https://github.com/riot/riot/issues/2711
Add: the <template> tag to support html fragment rendering for each and if directives https://github.com/riot/riot/issues/2692

<!-- each + template -->
<dl>
  <template each={ item in items }>
    <dt>{ item.title }</dt>
    <dd>{ item.description }</dd>
  </template>
</dl>

<!-- if + template -->
<div>
  <template if={ meta }>
    <h1>{ meta.title }</h1>
    <h2>{ meta.subtitle }</h2>
  </template>
</div>

Add: typescript generics support for component definitions https://github.com/riot/riot/pull/2709
Add: improve rendering performance of custom looped components

`v4.1.1`

Compare Source

Add: the RiotComponentExport interface to simplify the components creation in typescript, for example:

import Child from './child.riot'
import {RiotComponentExport} from 'riot'

interface MyComponentInterface extends RiotComponentExport {
  onClick(event: MouseEvent): void
  clearMessage(): void
  state: {
    message: string
  }
}

function MyComponent(): MyComponentInterface {
  return {
    state: {
      message: 'hello'
    },
    onClick(event) {
      this.update({
        message: 'goodbye'
      })
    },
    clearMessage() {
      this.update({
        message: ''
      })
    }
  }
}

MyComponent.components = {
  Child
}

export default MyComponent