|
| 1 | +--- |
| 2 | +author: rescript-team |
| 3 | +date: "2024-02-29" |
| 4 | +previewImg: /static/blog/compiler_release_11_0.jpg |
| 5 | +title: ReScript 11.1 |
| 6 | +badge: release |
| 7 | +description: | |
| 8 | + Unleashing ReScript from React |
| 9 | +--- |
| 10 | + |
| 11 | +A couple of weeks ago, the ReScript team released ReScript 11.0, which laid ground work for a lot of possible improvements to make it easier to interact with the JavaScript ecosystem. It also came with a lot of breaking changes, unfortunately. |
| 12 | + |
| 13 | +Good news, this next minor release has none of them. Instead we have some wonderful additions to the ReScript toolbelt for you today. |
| 14 | + |
| 15 | +To install, use your favorite package manager to install the new compiler release, e.g: |
| 16 | + |
| 17 | +```sh |
| 18 | + |
| 19 | +``` |
| 20 | + |
| 21 | +Find a list of all the new features below: |
| 22 | + |
| 23 | +## Generic JSX transform |
| 24 | + |
| 25 | +TODO |
| 26 | + |
| 27 | +## Tagged template literals |
| 28 | + |
| 29 | +This release comes with support for [tagged templates](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates). |
| 30 | + |
| 31 | +A tag function in JavaScript is a function that expects an array of strings and variadic parameters as input. Now it's possibe to bind to such functions with the new [`@taggedTemplate`](/syntax-lookup#taggedTemplate-decorator) decorator: |
| 32 | + |
| 33 | +```rescript |
| 34 | +// see https://bun.sh/docs/runtime/shell |
| 35 | +type result = {exitCode: int} |
| 36 | +@module("bun") @taggedTemplate |
| 37 | +external sh: (array<string>, array<string>) => promise<result> = "$" |
| 38 | +
|
| 39 | +let filename = "index.res" |
| 40 | +let result = await sh`ls ${filename}` |
| 41 | +``` |
| 42 | + |
| 43 | +Of course you can also create your own tag functions in ReScript now as well, it is just a function with the following signature. |
| 44 | + |
| 45 | +```rescript |
| 46 | +let myTagFunction : (array<string>, array<'param>) => 'output |
| 47 | +``` |
| 48 | + |
| 49 | +Refer to the docs to find a [detailed example](/docs/manual/latest/tagged-templates). |
| 50 | + |
| 51 | +## Import attributes |
| 52 | + |
| 53 | +Import attributes is a JS feature that is [currently in standardization](https://github.com/tc39/proposal-import-attributes), but is already implemented by many JS tools. Now, ReScript supports it too, as long as the compiler is configured to output ES6. |
| 54 | + |
| 55 | +<CodeTab labels={["ReScript", "JS Output"]}> |
| 56 | + |
| 57 | +```res |
| 58 | +@module({from: "./myJson.json", with: {type_: "json", \"some-identifier": "yep"}}) |
| 59 | +external myJson: Js.Json.t = "default" |
| 60 | +Console.log(myJson) |
| 61 | + |
| 62 | +@module({from: "./myCss.css", with: {type_: "css", \"some-identifier": "yep"}}) |
| 63 | +external buttonCss: string = "button" |
| 64 | +Console.log(buttonCss) |
| 65 | +``` |
| 66 | +```js |
| 67 | +import * as MyCssCss from "./myCss.css" with {"type": "css", "some-identifier": "yep"}; |
| 68 | +import MyJsonJson from "./myJson.json" with {"type": "json", "some-identifier": "yep"}; |
| 69 | + |
| 70 | +var myJson = MyJsonJson; |
| 71 | +console.log(myJson); |
| 72 | + |
| 73 | +var buttonCss = MyCssCss.button; |
| 74 | +console.log(buttonCss); |
| 75 | +``` |
| 76 | +</CodeTab> |
| 77 | + |
| 78 | +## Array spread syntax |
| 79 | + |
| 80 | +The spread syntax, which was already supported for records and lists for a long time, now also supports arrays! |
| 81 | + |
| 82 | +```rescript |
| 83 | +let animals = ["🐶", "🐱", "🐷"] |
| 84 | +let moreAnimals = [...animals, "🐔", "🐴", "🐮"] |
| 85 | +```` |
| 86 | +
|
| 87 | +## Hyphens in JSX tag names |
| 88 | +
|
| 89 | +We lifted restrictions on JSX tag names. This means you no longer need to use the [illegal identifier syntax](/docs/manual/latest/use-illegal-identifier-names) to use tag names that contain hyphens: |
| 90 | +
|
| 91 | +Previously: |
| 92 | +
|
| 93 | +```rescript |
| 94 | +let x = <\"custom-tag" /> |
| 95 | +let y = <Foo.\"custom-tag" /> |
| 96 | +``` |
| 97 | + |
| 98 | +Now: |
| 99 | + |
| 100 | +```rescript |
| 101 | +let x = <custom-tag /> |
| 102 | +let y= <Foo.custom-tag /> |
| 103 | +``` |
| 104 | + |
| 105 | +## Acknowledgements |
| 106 | + |
| 107 | +Once again we want to thank everyone from the community who volunteered their precious time to support this project with contributions of any kind, from documentation, to PRs, to discussions in the forum. But especially we want to thank the following people, who helped landing this release: |
| 108 | + |
| 109 | +[cknitt](https://github.com/cknitt), [@cometkim](https://github.com/cometkim), [@cristianoc](https://github.com/cristianoc), [@diogomqbm](https://github.com/diogomqbm), [@kevinbarabash](https://github.com/kevinbarabash), [@shulhi](https://github.com/shulhi), [@tsnobip](https://github.com/tsnobip), [@zth](https://github.com/zth). |
| 110 | + |
| 111 | +## That's it |
| 112 | + |
| 113 | +We hope you enjoy the newest improvements as much as we do. |
| 114 | + |
| 115 | +If you find any problems with this new release, make sure to report them here: |
| 116 | + |
| 117 | +- [rescript-lang/rescript-compiler](https://github.com/rescript-lang/rescript-compiler/issues/new/choose) |
0 commit comments