Merge pull request #530 from ugrinovsky/feature/sdk-svelte_playground

feat(sdk-svelte-playground): playground for sdk-svelt added
Telegram-Mini-Apps · Nov 11, 2024 · fd92074 · fd92074
2 parents a43fea2 + 959534e
commit fd92074
Show file tree

Hide file tree

Showing 38 changed files with 1,135 additions and 26 deletions.
diff --git a/.changeset/slow-worms-eat.md b/.changeset/slow-worms-eat.md
@@ -0,0 +1,5 @@
+---
+"@telegram-apps/sdk-svelte": patch
+---
+
+Change `useSignal` a bit.
diff --git a/packages/sdk-svelte/src/useSignal.ts b/packages/sdk-svelte/src/useSignal.ts
@@ -9,9 +9,9 @@ export function useSignal<T>(signal: {
     (): T;
     sub(fn: (v: T) => void): VoidFunction;
 }): Writable<T> {
-    const _value = writable<T>();
+    const _value = writable<T>(signal());
     const unsub = signal.sub((value) => {
-        _value.set(value);
+        _value.update(() => (value));
     });
     onDestroy(unsub);
 

diff --git a/playgrounds/svelte/.eslintrc.config.js b/playgrounds/svelte/.eslintrc.config.js
@@ -0,0 +1,40 @@
+import js from '@eslint/js';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import eslintPluginSvelte from 'eslint-plugin-svelte';
+import svelteParser from 'svelte-eslint-parser';
+import tsEslint from 'typescript-eslint';
+import globals from 'globals';
+
+export default tsEslint.config(
+  js.configs.recommended,
+  ...tsEslint.configs.recommended,
+
+  ...eslintPluginSvelte.configs['flat/recommended'],
+  eslintConfigPrettier,
+  ...eslintPluginSvelte.configs['flat/prettier'],
+  {
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'module',
+      globals: {
+        ...globals.node,
+        ...globals.browser,
+      },
+      parser: svelteParser,
+      parserOptions: {
+        parser: tsEslint.parser,
+        extraFileExtensions: ['.svelte'],
+      },
+    },
+  },
+  {
+    ignores: [
+      '**/.svelte-kit',
+      '**/.vercel',
+      '**/.yarn',
+      '**/build',
+      '**/node_modules',
+      '**/package',
+    ],
+  }
+);
diff --git a/playgrounds/svelte/.gitignore b/playgrounds/svelte/.gitignore
@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
diff --git a/playgrounds/svelte/.prettierrc.json b/playgrounds/svelte/.prettierrc.json
@@ -0,0 +1,6 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "semi": true,
+    "singleQuote": true
+}
diff --git a/playgrounds/svelte/CHANGELOG.md b/playgrounds/svelte/CHANGELOG.md
@@ -0,0 +1,7 @@
+# svelte-template
+
+## 0.0.1
+
+### Patch Changes
+
+- @telegram-apps/sdk-svelte@1.0.1
diff --git a/playgrounds/svelte/README.md b/playgrounds/svelte/README.md
@@ -0,0 +1,16 @@
+# Telegram Mini Apps Vue Example
+
+This example demonstrates how developers can implement a single-page application on the Telegram
+Mini Apps platform using the following technologies and libraries:
+
+- [Svelte](https://svelte.dev/)
+- [TypeScript](https://www.typescriptlang.org/)
+- [TON Connect](https://docs.ton.org/develop/dapps/ton-connect/overview)
+- [@telegram-apps SDK](https://docs.telegram-mini-apps.com/packages/telegram-apps-sdk)
+- [Vite](https://vitejs.dev/)
+
+## Useful Links
+
+- [Platform documentation](https://docs.telegram-mini-apps.com/)
+- [@telegram-apps/sdk-svelte documentation](https://docs.telegram-mini-apps.com/packages/telegram-apps-sdk-svelte)
+- [Telegram developers community chat](https://t.me/devs)
diff --git a/playgrounds/svelte/env.d.ts b/playgrounds/svelte/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client"></reference>
diff --git a/playgrounds/svelte/index.html b/playgrounds/svelte/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Telegram Mini App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/playgrounds/svelte/package.json b/playgrounds/svelte/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "svelte-template",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "svelte-check",
+    "lint": "eslint .  --config .eslintrc.config.js 'src/**/*.{svelte,js,ts}'"
+  },
+  "dependencies": {
+    "@telegram-apps/sdk-svelte": "workspace:^",
+    "@tonconnect/ui": "^2.0.5",
+    "eruda": "^3.0.1",
+    "svelte": "^5.1.3",
+    "svelte-routing": "^2.13.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.8.0",
+    "@tsconfig/node20": "^20.1.4",
+    "@types/node": "^20.14.5",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@tsconfig/svelte": "^5.0.4",
+    "eslint": "^8.57.0",
+    "eslint-plugin-svelte": "^2.46.0",
+    "npm-run-all2": "^6.2.0",
+    "typescript": "~5.4.0",
+    "vite": "^5.3.1",
+    "svelte-check": "^4.0.5",
+    "eslint-config-prettier": "9.1.0",
+    "globals": "15.12.0"
+  }
+}
diff --git a/playgrounds/svelte/public/tonconnect-manifest.json b/playgrounds/svelte/public/tonconnect-manifest.json
@@ -0,0 +1,5 @@
+{
+  "url": "https://ton.vote",
+  "name": "TON Vote",
+  "iconUrl": "https://ton.vote/logo.png"
+}
diff --git a/playgrounds/svelte/src/App.svelte b/playgrounds/svelte/src/App.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Router, Route } from 'svelte-routing';
+  import IndexPage from '@/pages/IndexPage/IndexPage.svelte';
+  import routes from '@/navigation/routes.js';
+
+  export let url = '';
+</script>
+
+<Router {url}>
+  {#each routes as { id, path, Component }}
+    {#if id === 'home'}
+      <Route><IndexPage /></Route>
+    {:else if Component}
+      <Route {path} component={Component} />
+    {/if}
+  {/each}
+</Router>
diff --git a/playgrounds/svelte/src/components/DisplayData/DisplayData.css b/playgrounds/svelte/src/components/DisplayData/DisplayData.css
@@ -0,0 +1,19 @@
+.display-data__line {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+    gap: 10px;
+    flex-flow: wrap;
+  }
+
+  .display-data__line-title {
+    border: 1px solid var(--tg-theme-accent-text-color);
+    background-color: var(--tg-theme-bg-color);
+    border-radius: 5px;
+    padding: 2px 8px 4px;
+    box-sizing: border-box;
+  }
+
+  .display-data__line-value {
+    word-break: break-word;
+  }
diff --git a/playgrounds/svelte/src/components/DisplayData/DisplayData.svelte b/playgrounds/svelte/src/components/DisplayData/DisplayData.svelte
@@ -0,0 +1,51 @@
+<script module lang="ts">
+  export interface IRow {
+    title: string;
+    value?: RGB | string | number | boolean | Snippet;
+  }
+
+  interface IProps {
+    rows: IRow[];
+  }
+</script>
+
+<script lang="ts">
+  import './DisplayData.css';
+
+  import { type Snippet } from 'svelte';
+  import RGBRender from '@/components/RGB/RGB.svelte';
+  import { isRGB, type RGB } from '@telegram-apps/sdk-svelte';
+
+  const { rows }: IProps = $props();
+
+  function mapValueToString(value?: boolean | string) {
+    switch (value) {
+      case true:
+        return '✔️';
+      case false:
+        return '❌';
+      case undefined:
+        return 'empty';
+      default:
+        return value;
+    }
+  }
+</script>
+
+<div>
+  {#each rows as { title, value, meta }}
+    <div class="display-data__line">
+      <span class="display-data__line-title">{title}</span>
+      <span class="display-data__line-value">
+        {#if meta}
+          {@const Component = value}
+          <Component {...meta} />
+        {:else if typeof value === 'string' && isRGB(value) && typeof value === 'string' && isRGB(value)}
+          <RGBRender color={value} />
+        {:else}
+          <span>{mapValueToString(value)}</span>
+        {/if}
+      </span>
+    </div>
+  {/each}
+</div>
diff --git a/playgrounds/svelte/src/components/Link/Link.css b/playgrounds/svelte/src/components/Link/Link.css
@@ -0,0 +1,4 @@
+.index-link__item {
+  text-decoration: none;
+  color: var(--tg-theme-link-color);
+}
diff --git a/playgrounds/svelte/src/components/Link/Link.svelte b/playgrounds/svelte/src/components/Link/Link.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  interface IProps {
+    title: string;
+    path: string;
+    className: string;
+  }
+
+  import './Link.css';
+  import { Link } from 'svelte-routing';
+
+  const { title, path, className }: IProps = $props();
+</script>
+
+<Link class={`${className} index-link__item`} to={path}>
+  {title}
+</Link>
diff --git a/playgrounds/svelte/src/components/Nav/Nav.css b/playgrounds/svelte/src/components/Nav/Nav.css
@@ -0,0 +1,23 @@
+.index-page__links {
+    list-style: none;
+    padding-left: 0;
+  }
+
+  .index-page__link {
+    font-weight: bold;
+    display: inline-flex;
+    gap: 5px;
+  }
+
+  .index-page__link-item+.index-page__link-item {
+    margin-top: 10px;
+  }
+
+  .index-page__link-icon {
+    width: 20px;
+    display: block;
+  }
+
+  .index-page__link-icon svg {
+    display: block;
+  }
diff --git a/playgrounds/svelte/src/components/Nav/Nav.svelte b/playgrounds/svelte/src/components/Nav/Nav.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import routes from '@/navigation/routes.js';
+  import Link from '@/components/Link/Link.svelte';
+</script>
+
+<ul class="index-page__links">
+  {#each routes as { title, path, Component }}
+    {#if Component}
+      <li class="index-page__link-item">
+        <Link className={'index-page__link'} {title} {path} />
+      </li>
+    {/if}
+  {/each}
+</ul>
diff --git a/playgrounds/svelte/src/components/Page/Page.css b/playgrounds/svelte/src/components/Page/Page.css
@@ -0,0 +1,8 @@
+.page {
+  padding: 0 10px;
+  box-sizing: border-box;
+}
+
+.page__disclaimer {
+  margin-bottom: 16px;
+}
diff --git a/playgrounds/svelte/src/components/Page/Page.svelte b/playgrounds/svelte/src/components/Page/Page.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import './Page.css';
+
+  interface IProps {
+    title: string,
+    children?: Snippet,
+    disclaimer?: Snippet
+  }
+
+  import type { Snippet } from 'svelte';
+
+  const { title, disclaimer, children }: IProps = $props();
+</script>
+
+<main class="page">
+  <h1>{title}</h1>
+  {#if disclaimer}
+    <div class="page__disclaimer">{@render disclaimer()}</div>
+  {/if}
+  {@render children?.()}
+</main>
diff --git a/playgrounds/svelte/src/components/RGB/RGB.css b/playgrounds/svelte/src/components/RGB/RGB.css
@@ -0,0 +1,12 @@
+.rgb {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+  }
+
+  .rgb__icon {
+    width: 18px;
+    aspect-ratio: 1;
+    border: 1px solid #555;
+    border-radius: 50%;
+  }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		/// <reference types="vite/client"></reference>