Skip to content

Commit cd3766a

Browse files
heyqbnkheyqbnk
committed
actualize the template
1 parent 2a6e0fe commit cd3766a

17 files changed

Lines changed: 521 additions & 326 deletions

File tree

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ and libraries:
77
- [Solid](https://solidjs.com/)
88
- [TypeScript](https://www.typescriptlang.org/)
99
- [TON Connect](https://docs.ton.org/develop/dapps/ton-connect/overview)
10-
- [@telegram-apps SDK](https://docs.telegram-mini-apps.com/packages/telegram-apps-sdk/2-x)
10+
- [@tma.js SDK](https://docs.telegram-mini-apps.com/packages/tma-js-sdk)
1111
- [Vite](https://vitejs.dev/)
1212

1313
> This boilerplate was created using [pnpm](https://pnpm.io/). Therefore, it is
@@ -87,7 +87,7 @@ link (`https://localhost:5173/solidjs-template` in this example) in your
8787
browser.
8888

8989
It is important to note that some libraries in this template, such as
90-
`@telegram-apps/sdk-solid`, are not intended for use outside of Telegram.
90+
`@tma.js/sdk-solid`, are not intended for use outside of Telegram.
9191

9292
Nevertheless, they appear to function properly. This is because the
9393
`src/mockEnv.ts` file, which is imported in the application's entry point (
@@ -208,5 +208,5 @@ file according to your project's information.
208208
## Useful Links
209209

210210
- [Platform documentation](https://docs.telegram-mini-apps.com/)
211-
- [@telegram-apps/sdk-solid documentation](https://docs.telegram-mini-apps.com/packages/telegram-apps-sdk-solid)
211+
- [@tma.js/sdk-solid documentation](https://docs.telegram-mini-apps.com/packages/tma-js-sdk-solid)
212212
- [Telegram developers community chat](https://t.me/devs)

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,10 @@
2020
},
2121
"dependencies": {
2222
"@solidjs/router": "^0.13.6",
23-
"@telegram-apps/sdk-solid": "^2.0.5",
23+
"@tma.js/sdk-solid": "^3.0.4",
2424
"@tonconnect/ui": "^2.0.5",
2525
"eruda": "^3.0.1",
26-
"solid-js": "^1.8.17"
26+
"solid-js": "^1.9.9"
2727
},
2828
"devDependencies": {
2929
"@eslint/js": "^9.2.0",

‎pnpm-lock.yaml‎

Lines changed: 200 additions & 152 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎pnpm-workspace.yaml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
ignoredBuiltDependencies:
2+
- esbuild

‎src/components/DisplayData/DisplayData.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { isRGB, type RGB as RGBType } from '@telegram-apps/sdk-solid';
1+
import { isRGB, type RGB as RGBType } from '@tma.js/sdk-solid';
22
import { type Component, For, type JSXElement, Match, Switch } from 'solid-js';
33

44
import { RGB } from '@/components/RGB/RGB.js';

‎src/components/Link/Link.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { A, type AnchorProps } from '@solidjs/router';
2-
import { classNames, openLink } from '@telegram-apps/sdk-solid';
2+
import { openLink } from '@tma.js/sdk-solid';
33
import type { Component } from 'solid-js';
44

5+
import { classNames } from '@/css/classnames.js';
6+
57
import './Link.css';
68

79
export const Link: Component<AnchorProps> = (props) => {

‎src/components/Page/Page.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import {
22
type Component,
33
createEffect,
44
createMemo,
5-
type JSX,
5+
type JSX, onCleanup,
66
type ParentProps,
77
} from 'solid-js';
8-
import { backButton } from '@telegram-apps/sdk-solid';
8+
import { backButton } from '@tma.js/sdk-solid';
99

1010
import { useNavigate } from '@solidjs/router';
1111

@@ -28,9 +28,10 @@ export const Page: Component<PageProps> = (props) => {
2828
createEffect(() => {
2929
if (back()) {
3030
backButton.show();
31-
return backButton.onClick(() => {
31+
onCleanup(backButton.onClick(() => {
3232
navigate(-1);
33-
});
33+
}));
34+
return;
3435
}
3536
backButton.hide();
3637
});

‎src/components/RGB/RGB.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import { classNames, type RGB as RGBType } from '@telegram-apps/sdk-solid';
1+
import type { RGB as RGBType } from '@tma.js/sdk-solid';
22
import { type Component, type JSX, splitProps } from 'solid-js';
33

4+
import { classNames } from '@/css/classnames.js';
5+
46
import './RGB.css';
57

68
export type RGBProps = JSX.IntrinsicElements['span'] & {
@@ -9,7 +11,7 @@ export type RGBProps = JSX.IntrinsicElements['span'] & {
911

1012
export const RGB: Component<RGBProps> = (props) => (
1113
<span {...splitProps(props, ['class'])[0]} class={classNames('rgb', props.class)}>
12-
<i class="rgb__icon" style={{ 'background-color': props.color }}/>
14+
<i class="rgb__icon" style={{ 'background-color': props.color }} />
1315
{props.color}
1416
</span>
1517
);

‎src/components/Root.tsx‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,9 @@
1-
import { retrieveLaunchParams } from '@telegram-apps/sdk-solid';
21
import { ErrorBoundary, type Component, Switch, Match } from 'solid-js';
32

43
import { App } from '@/components/App.js';
54
import { TonConnectUIProvider } from '@/tonconnect/TonConnectUIProvider.js';
65
import { publicUrl } from '@/helpers/publicUrl.js';
76

8-
const Inner: Component = () => {
9-
const debug = retrieveLaunchParams().startParam === 'debug';
10-
if (debug) {
11-
import('eruda').then((lib) => lib.default.init());
12-
}
13-
14-
return (
15-
<TonConnectUIProvider manifestUrl={publicUrl('tonconnect-manifest.json')}>
16-
<App/>
17-
</TonConnectUIProvider>
18-
);
19-
};
20-
217
export const Root: Component = () => {
228
return (
239
<ErrorBoundary
@@ -43,7 +29,9 @@ export const Root: Component = () => {
4329
);
4430
}}
4531
>
46-
<Inner/>
32+
<TonConnectUIProvider manifestUrl={publicUrl('tonconnect-manifest.json')}>
33+
<App/>
34+
</TonConnectUIProvider>
4735
</ErrorBoundary>
4836
);
4937
};

‎src/css/bem.ts‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { classNames, isRecord } from '@/css/classnames.js';
2+
3+
export interface BlockFn {
4+
(...mods: unknown[]): string;
5+
}
6+
7+
export interface ElemFn {
8+
(elem: string, ...mods: unknown[]): string;
9+
}
10+
11+
/**
12+
* Applies mods to the specified element.
13+
* @param element - element name.
14+
* @param mod - mod to apply.
15+
*/
16+
function applyMods(element: string, mod: unknown): string {
17+
if (Array.isArray(mod)) {
18+
return classNames(mod.map(m => applyMods(element, m)));
19+
}
20+
if (isRecord(mod)) {
21+
return classNames(
22+
Object.entries(mod).map(([mod, v]) => v && applyMods(element, mod)),
23+
);
24+
}
25+
const v = classNames(mod);
26+
return v && `${element}--${v}`;
27+
}
28+
29+
/**
30+
* Computes final classname for the specified element.
31+
* @param element - element name.
32+
* @param mods - mod to apply.
33+
*/
34+
function computeClassnames(element: string, ...mods: unknown[]): string {
35+
return classNames(element, applyMods(element, mods));
36+
}
37+
38+
/**
39+
* @returns A tuple, containing two functions. The first one generates classnames list for the
40+
* block, the second one generates classnames for its elements.
41+
* @param block - BEM block name.
42+
*/
43+
export function bem(block: string): [BlockFn, ElemFn] {
44+
return [
45+
(...mods) => computeClassnames(block, mods),
46+
(elem, ...mods) => computeClassnames(`${block}__${elem}`, mods),
47+
];
48+
}

0 commit comments

Comments
 (0)