Skip to content

feat: added Ripple template #939

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

feat: added Ripple template #939

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .scripts/generate-templates-matrix.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const nodeJsTemplates = [
"preact",
"preact-ts",
"angular",
"ripple",
];

const matrixConfig = [
Expand Down
2 changes: 2 additions & 0 deletions src/package_manager.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ impl PackageManager {
Template::Vue,
Template::Svelte,
Template::React,
Template::Ripple,
Template::Solid,
Template::Angular,
Template::Preact,
Expand Down Expand Up @@ -127,6 +128,7 @@ impl PackageManager {
Template::SvelteTs,
Template::React,
Template::ReactTs,
Template::Ripple,
Template::Solid,
Template::SolidTs,
Template::Angular,
Expand Down
7 changes: 7 additions & 0 deletions src/template.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ pub enum Template {
SvelteTs,
React,
ReactTs,
Ripple,
Solid,
SolidTs,
Yew,
Expand All @@ -73,6 +74,7 @@ impl Display for Template {
Template::SvelteTs => write!(f, "svelte-ts"),
Template::React => write!(f, "react"),
Template::ReactTs => write!(f, "react-ts"),
Template::Ripple => write!(f, "ripple"),
Template::Solid => write!(f, "solid"),
Template::SolidTs => write!(f, "solid-ts"),
Template::Yew => write!(f, "yew"),
Expand All @@ -99,6 +101,7 @@ impl FromStr for Template {
"svelte-ts" => Ok(Template::SvelteTs),
"react" => Ok(Template::React),
"react-ts" => Ok(Template::ReactTs),
"ripple" => Ok(Template::Ripple),
"solid" => Ok(Template::Solid),
"solid-ts" => Ok(Template::SolidTs),
"yew" => Ok(Template::Yew),
Expand Down Expand Up @@ -128,6 +131,7 @@ impl Template {
Template::Vue => "Vue - (https://vuejs.org/)",
Template::Svelte => "Svelte - (https://svelte.dev/)",
Template::React => "React - (https://react.dev/)",
Template::Ripple => "Ripple - (https://www.ripplejs.com/)",
Template::Solid => "Solid - (https://solidjs.com/)",
Template::Yew => "Yew - (https://yew.rs/)",
Template::Leptos => "Leptos - (https://leptos.dev/)",
Expand All @@ -153,6 +157,7 @@ impl Template {
Template::SvelteTs,
Template::React,
Template::ReactTs,
Template::Ripple,
Template::Solid,
Template::SolidTs,
Template::Yew,
Expand All @@ -177,6 +182,7 @@ impl Template {
Template::Vue => Some(&[Flavor::TypeScript, Flavor::JavaScript]),
Template::Svelte => Some(&[Flavor::TypeScript, Flavor::JavaScript]),
Template::React => Some(&[Flavor::TypeScript, Flavor::JavaScript]),
Template::Ripple => Some(&[Flavor::TypeScript]),
Template::Solid => Some(&[Flavor::TypeScript, Flavor::JavaScript]),
Template::Preact => Some(&[Flavor::TypeScript, Flavor::JavaScript]),
_ => None,
Expand Down Expand Up @@ -223,6 +229,7 @@ impl Template {
| Template::SvelteTs
| Template::React
| Template::ReactTs
| Template::Ripple
| Template::Solid
| Template::SolidTs
| Template::Angular
Expand Down
15 changes: 15 additions & 0 deletions templates/_assets_/ripple.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions templates/template-ripple/.manifest
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
# Copyright 2019-2022 Tauri Programme within The Commons Conservancy
# SPDX-License-Identifier: Apache-2.0
# SPDX-License-Identifier: MIT

beforeDevCommand = {% pkg_manager_run_command %} dev
beforeBuildCommand = {% pkg_manager_run_command %} build
devUrl = http://localhost:1420
frontendDist = ../dist

[files]
ripple.svg = src/assets/ripple-logo.svg
vite.svg = public/vite.svg
tauri.svg = public/tauri.svg
styles.css = src/App.css
6 changes: 6 additions & 0 deletions templates/template-ripple/.prettierignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
node_modules/
dist/
build/
coverage/
*.min.js
*.min.css
8 changes: 8 additions & 0 deletions templates/template-ripple/.prettierrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"useTabs": true,
"singleQuote": true,
"trailingComma": "es5",
"printWidth": 100,
"tabWidth": 4,
"plugins": ["@ripple-ts/prettier-plugin"]
}
7 changes: 7 additions & 0 deletions templates/template-ripple/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# Tauri + Ripple

This template should help get you started developing with Tauri, Ripple in Vite.

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer)
2 changes: 2 additions & 0 deletions templates/template-ripple/_gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
node_modules/
*.env
3 changes: 3 additions & 0 deletions templates/template-ripple/eslint.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import ripple from '@ripple-ts/eslint-plugin';

export default [...ripple.configs.recommended];
16 changes: 16 additions & 0 deletions templates/template-ripple/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
<title>Ripple App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>

<script src="/src/index.ts" type="module"></script>
</body>
</html>
38 changes: 38 additions & 0 deletions templates/template-ripple/package.json.lte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
{
"name": "tauri-ripple",
"version": "1.0.0",
"description": "A Ripple application created with create-ripple",
"type": "module",
"engines": {
"node": ">=20.0.0"
},
"scripts": {
"start": "vite",
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"serve": "vite preview",
"format": "prettier --write .",
"format:check": "prettier --check .",
"tauri": "tauri"
},
"license": "MIT",
"devDependencies": {
"@ripple-ts/eslint-plugin": "latest",
"@ripple-ts/prettier-plugin": "latest",
"@ripple-ts/typescript-plugin": "latest",
"@ripple-ts/vite-plugin": "latest",
"@tailwindcss/vite": "^4.1.12",
"@tauri-apps/cli": "^2.9.4",
"eslint": "^9.0.0",
"prettier": "^3.6.2",
"tailwindcss": "^4.1.12",
"typescript": "^5.9.2",
"vite": "^7.1.4"
},
"dependencies": {
"ripple": "latest",
"@tauri-apps/api": "^2",
"@tauri-apps/plugin-opener": "^2"
}
}
6 changes: 6 additions & 0 deletions templates/template-ripple/public/tauri.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions templates/template-ripple/public/vite.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
166 changes: 166 additions & 0 deletions templates/template-ripple/src/App.ripple.lte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
import { track } from 'ripple';
import { invoke } from '@tauri-apps/api/core';

export component App() {
let count = track(0);
let greetMsg = track("");
let name = track("");
async function greet() {
console.log("ola");
@greetMsg = await invoke("greet", { name: @name });
}

<div class="app">
<div class="card">
<h1>{'Welcome to Tauri + Ripple'}</h1>

<div className="row">
<a href="https://vite.dev" target="_blank">
<img src="/vite.svg" class="logo vite" alt="Vite logo" />
</a>
<a href="https://tauri.app" target="_blank">
<img src="/tauri.svg" class="logo tauri" alt="Tauri logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src="../src/assets/ripple-logo.svg" class="logo ripple" alt="Ripple Logo" />
</a>
</div>
<p>{'Click on the Tauri, Vite, and Ripple logos to learn more.'}</p>

<form
className="row"
onSubmit={(e: any) => {
e.preventDefault();
greet();
}}
>
<input
id="greet-input"
onChange={(e) => @name=e.currentTarget.value}
placeholder="Enter a name..."
/>
<button type="submit">{'Greet'}</button>
</form>
<p>{@greetMsg}</p>
</div>
</div>
<style>
.app {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(circle at top left, #1a1c2b, #0d0e17 85%);
color: #f2f4f8;
font-family: 'Inter', 'Segoe UI', sans-serif;
letter-spacing: 0.25px;
padding: 1rem;
}

.card {
background: rgba(18, 19, 29, 0.75);
padding: 2.5rem 2rem;
border-radius: 1rem;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
max-width: 400px;
box-sizing: border-box;
}

.logo {
width: 90px;
margin-bottom: 1rem;
display: block;
margin-left: auto;
margin-right: auto;
}
.logo.ripple{
width: 260px;
}

.subtitle {
color: #b0b3c2;
font-size: 1rem;
margin-bottom: 1.5rem;
font-weight: 500;
}

.counter {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin: 1.5rem 0;
}

button {
background-color: rgba(42, 43, 56, 0.9);
color: #f2f4f8;
font-size: 1.1rem;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.75rem;
padding: 0.5rem 1rem;
cursor: pointer;
transition: background 0.15s ease;
}

button {
background-color: rgba(58, 58, 72, 0.9);
}

.count {
font-size: 1.4rem;
font-weight: 500;
color: #f2f4f8;
min-width: 2rem;
display: inline-block;
text-align: center;
}

.links {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-top: 1.5rem;
}

.link-btn {
text-decoration: none;
padding: 0.45rem 1.2rem;
border-radius: 0.75rem;
font-weight: 500;
font-size: 0.95rem;
background-color: rgba(42, 43, 56, 0.9);
color: #f2f4f8;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: background 0.15s ease;
}

.link-btn {
background-color: rgba(58, 58, 72, 0.9);
}

.info {
margin-top: 1.5rem;
font-size: 0.9rem;
color: #c8cbda;
}

.edit-hint {
margin-top: 0.3rem;
font-size: 0.8rem;
color: #9fa3b9;
}

code {
background-color: rgba(31, 32, 46, 0.9);
padding: 2px 6px;
border-radius: 0.4rem;
font-family: 'Fira Code', monospace;
color: #a8b2ff;
font-size: 0.88rem;
}
</style>
}
Binary file added templates/template-ripple/src/assets/favicon.ico
View file
Open in desktop
Binary file not shown.
Binary file added templates/template-ripple/src/assets/ripple-logo-horizontal.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading