Islands example

.github/workflows/ci.yml

@@ -214,7 +214,7 @@ jobs:
             cd end2end
             wasm-pack test --headless --${{ matrix.browser }}
 
-  build-example:
+  build-examples:
     needs: check-toolchain-is-stable
     name: Build example
     runs-on: ${{ matrix.runs-on }}
@@ -226,6 +226,7 @@ jobs:
           - csr-complete
           - ssr-hydrate-actix
           - ssr-hydrate-axum
+          - ssr-islands-axum
           - system-gtk
         toolchain:
           - stable
@@ -305,12 +306,9 @@ jobs:
       - qa
       - unit-tests
       - end2end-tests
-      - build-example
+      - build-examples
       - build-book
-    if: |
-      '${{ github.event.pull_request.user.login }}' == 'mondeja' ||
-      startsWith(github.ref, 'refs/tags/') ||
-      github.ref == 'refs/heads/master'
+    if: startsWith(github.ref, 'refs/tags/') || github.ref == 'refs/heads/master'
     name: Test leptos-fluent-macros release
     runs-on: ubuntu-latest
     steps:

.pre-commit-config.yaml

@@ -36,9 +36,9 @@ repos:
       - id: clippy
         alias: clippy-no-features
         name: clippy-no-features
-        args:
-          [
+        args: [
             --exclude=leptos-fluent-ssr-hydrate-axum-example,
+            --exclude=leptos-fluent-ssr-islands-axum-example, # TODO: excluded by Leptos bug
             --workspace,
             --,
             -D,
@@ -87,6 +87,7 @@ repos:
           [
             "--features=ssr,actix",
             --exclude=leptos-fluent-ssr-hydrate-axum-example,
+            --exclude=leptos-fluent-ssr-islands-axum-example,
             --exclude=leptos-fluent-csr-complete-example,
             --exclude=leptos-fluent-csr-minimal-example,
             --workspace,
@@ -115,6 +116,7 @@ repos:
             --exclude=leptos-fluent-ssr-hydrate-actix-example,
             --exclude=leptos-fluent-csr-complete-example,
             --exclude=leptos-fluent-csr-minimal-example,
+            --exclude=leptos-fluent-ssr-islands-axum-example,
             --workspace,
             --,
             -D,

Cargo.toml

@@ -8,6 +8,7 @@ members = [
   "examples/csr-minimal",
   "examples/ssr-hydrate-actix",
   "examples/ssr-hydrate-axum",
+  "examples/ssr-islands-axum",
   "examples/system-gtk",
 ]
 resolver = "2"
@@ -17,13 +18,7 @@ edition = "2021"
 documentation = "https://docs.rs/leptos-fluent"
 repository = "https://github.com/mondeja/leptos-fluent"
 homepage = "https://mondeja.github.io/leptos-fluent"
-keywords = [
-  "leptos",
-  "fluent",
-  "i18n",
-  "localization",
-  "wasm",
-]
+keywords = ["leptos", "fluent", "i18n", "localization", "wasm"]
 
 [profile.wasm-release]
 inherits = "release"

examples/ssr-islands-axum/Cargo.toml

@@ -0,0 +1,120 @@
+[package]
+name = "leptos-fluent-ssr-islands-axum-example"
+version = "0.1.0"
+edition = "2021"
+publish = false
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[dependencies]
+axum = { version = "0.7", optional = true }
+console_error_panic_hook = "0.1"
+leptos = { version = "0.6", features = ["experimental-islands"] }
+leptos_axum = { version = "0.6", optional = true, features = [
+  "experimental-islands",
+] }
+leptos_meta = { version = "0.6" }
+leptos_router = { version = "0.6" }
+tokio = { version = "1", features = ["rt-multi-thread"], optional = true }
+tower = { version = "0.4", optional = true, features = ["util"] }
+tower-http = { version = "0.5", features = ["fs"], optional = true }
+wasm-bindgen = "=0.2.93"
+thiserror = "1"
+http = "1"
+serde = "1"
+
+leptos-fluent = { path = "../../leptos-fluent" }
+fluent-templates = { version = "0.10", default-features = false, features = [
+  "macros",
+  "walkdir",
+] }
+
+[features]
+hydrate = [
+  "leptos/hydrate",
+  "leptos_meta/hydrate",
+  "leptos_router/hydrate",
+  "leptos-fluent/hydrate",
+]
+ssr = [
+  "dep:axum",
+  "dep:tokio",
+  "dep:tower",
+  "dep:tower-http",
+  "dep:leptos_axum",
+  "leptos/ssr",
+  "leptos_meta/ssr",
+  "leptos_router/ssr",
+  "leptos-fluent/ssr",
+  "leptos-fluent/axum",
+]
+
+[package.metadata.leptos]
+# Additional files your application could depends on.
+# A change to any file in those directories will trigger a rebuild.
+watch-additional-files = ["examples/ssr-islands-axum/locales"]
+
+# The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name
+output-name = "leptos-fluent-ssr-islands-axum-example"
+
+# The site root folder is where cargo-leptos generate all output. WARNING: all content of this folder will be erased on a rebuild. Use it in your server setup.
+site-root = "target/site-islands"
+
+# The site-root relative folder where all compiled output (JS, WASM and CSS) is written
+# Defaults to pkg
+site-pkg-dir = "pkg"
+
+# [Optional] The source CSS file. If it ends with .sass or .scss then it will be compiled by dart-sass into CSS. The CSS is optimized by Lightning CSS before being written to <site-root>/<site-pkg>/app.css
+style-file = "style/main.css"
+# Assets source dir. All files found here will be copied and synchronized to site-root.
+# The assets-dir cannot have a sub directory with the same name/path as site-pkg-dir.
+#
+# Optional. Env: LEPTOS_ASSETS_DIR.
+assets-dir = "public"
+
+# The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup.
+site-addr = "127.0.0.1:3000"
+
+# The port to use for automatic reload monitoring
+reload-port = 3001
+
+# [Optional] Command to use when running end2end tests. It will run in the end2end dir.
+#   [Windows] for non-WSL use "npx.cmd playwright test"
+#   This binary name can be checked in Powershell with Get-Command npx
+end2end-cmd = "npx playwright test"
+end2end-dir = "end2end"
+
+#  The browserlist query used for optimizing the CSS.
+browserquery = "defaults"
+
+# The environment Leptos will run in, usually either "DEV" or "PROD"
+env = "DEV"
+
+# The features to use when compiling the bin target
+#
+# Optional. Can be over-ridden with the command line parameter --bin-features
+bin-features = ["ssr"]
+
+# If the --no-default-features flag should be used when compiling the bin target
+#
+# Optional. Defaults to false.
+bin-default-features = false
+
+# The features to use when compiling the lib target
+#
+# Optional. Can be over-ridden with the command line parameter --lib-features
+lib-features = ["hydrate"]
+
+# If the --no-default-features flag should be used when compiling the lib target
+#
+# Optional. Defaults to false.
+lib-default-features = false
+
+# The profile to use for the lib target when compiling for release
+#
+# Optional. Defaults to "release".
+lib-profile-release = "wasm-release"
+
+[package.metadata.cargo-machete]
+ignored = ["serde"]  # needed by Leptos to pass arguments to islands

examples/ssr-islands-axum/README.md

@@ -0,0 +1,21 @@
+# SSR example with Axum using islands for leptos-fluent
+
+When using the islands feature, the app is rendered as static HTML by default.
+To enable interactivity, the `#[island]` macro must be applied selectively.
+Typically, with an internationalization framework like `leptos-fluent`, nearly
+every part of the website is translated reactively, which would require using
+the `#[island]` macro extensively.
+
+However, this approach conflicts with one of the core principles of islands
+architecture: islands should be as minimal and targeted as possible.
+
+To benefit from smaller WebAssembly (wasm) file sizes, this example opts to keep
+all translations server-side, instead of using the dynamic translation updates
+provided by `move_tr!`. The page is reloaded after a language change, ensuring
+the translations are updated without excessive use of islands.
+
+To run:
+
+```sh
+cargo leptos watch
+```

examples/ssr-islands-axum/locales/client/en/main.ftl

@@ -0,0 +1,2 @@
+home = Home
+page-2 = Page 2

examples/ssr-islands-axum/locales/client/es/main.ftl

@@ -0,0 +1,2 @@
+home = Inicio
+page-2 = Página 2

examples/ssr-islands-axum/locales/languages.json

@@ -0,0 +1,4 @@
+[
+  ["en", "EN"],
+  ["es", "ES"]
+]

examples/ssr-islands-axum/locales/server/en/main.ftl

@@ -0,0 +1,5 @@
+welcome-to-leptos = Welcome to Leptos
+select-language = Select a language
+home-title = Welcome to the home page
+page-2-title = Welcome to page 2
+click-me = Click me

examples/ssr-islands-axum/locales/server/es/main.ftl

@@ -0,0 +1,5 @@
+welcome-to-leptos = Bienvenido a Leptos
+select-language = Selecciona un idioma
+home-title = Bienvenido a la página de inicio
+page-2-title = Bienvenido a la página 2
+click-me = Haz click