Fresh logo

The next-gen web framework.

Updating Fresh

Fresh constists of multiple pieces which are independently versioned and released.

Some plugins also have their own dependencies that can be updated independently.

For the most part these pieces can be updated independently. Certain versions of Fresh may require a minimum version of a given dependency. This is documented below.

Fresh version Preact preact-render-to-string Deno
1.0.0-1.0.2 >=10.8.1 <11.0.0 >=5.2.0 <6.0.0 >= 1.23.0
1.1.0-1.1.1 >=10.8.1 <11.0.0 >=5.2.0 <6.0.0 >= 1.25.0

Updating dependencies

To update your dependencies, you have two options:

  • Run the fresh updater to update your project dependencies.
  • Manually update the dependency versions in your import_map.json file.

Auto updater

The auto updater is a command line tool that will update your project's import_map.json file to the latest versions of Fresh and its dependencies. It may also contain code mods for your project that will update your code to the latest recommended patterns for Fresh projects.

To run the auto updater, run the following command from the root of your project:

$ deno run -A -r .

You will be prompted to confirm the changes that will be made to your project.

Manual update

To manually update your project's dependencies, you can edit the import_map.json file in the root of your projects directory. Dependency versions are encoded into the URLs in this file. For example, here is how to update a project from Fresh 1.0.2 to 1.1.1, and update Preact to the latest version:

    "imports": {
-     "$fresh/": "",
+     "$fresh/": "",

-     "preact": "",
-     "preact/": "",
+     "preact": "",
+     "preact/": "",

-     "preact-render-to-string": "*preact-render-to-string@5.2.0",
+     "preact-render-to-string": "*preact-render-to-string@5.2.4",

      "twind": "",
      "twind/": ""

Code mods

Code mods are small scripts that can be run to update your project's code to match the latest recommended patterns for Fresh projects. Code mods can be run through the auto updater. Sometimes the code mod can not cover all cases, so you may need to manually update some code. This section explains the code mods currently available.

Classical JSX -> Automatic JSX

This code mod is only available in Fresh 1.1.0 and above.

The classical JSX transform that relies on a /** @jsx h */ pragma is no longer the recommended way to use JSX in Fresh projects. Instead, starting with version 1.1.0, Fresh projects should use the automatic JSX transform that requires no JSX pragma or preact import.

- /** @jsx h */
- import { h } from "preact";

  export default function Page() {
    return <div>Hello world!</div>;

This code mod will update your deno.json file to include the relevant compiler options to enable the automatic JSX transform. It will then go through your project and remove any /** @jsx h */ pragmas and import { h } from "preact" statements.

Classic twind -> Twind plugin

This code mod is only available in Fresh 1.1.0 and above.

Fresh version 1.1.0 introduced a new plugin for using twind with Fresh. This plugin is much nicer to use than the raw twind integration that was previously available.

This code mod will update your project to use the new twind plugin. It will update your main.ts file to import the twind plugin and add it to the plugins array. It will also update your files to remove many unnecessary uses of the tw function, and remove unnecessary twind imports. While the code mod can handle most cases, you may need to manually update some code. Additionally you will need to manually update your twind.config.ts if you use a custom configuration.