Initial commit

.eslintrc.cjs

@@ -0,0 +1,92 @@
+function regexp(regex) {
+  return [
+    new RegExp(regex.source + '.*[^\\u0000]$').source,
+    regex.source,
+  ];
+}
+
+module.exports = {
+  extends: [
+    'airbnb-base',
+    'airbnb-typescript/base',
+    'plugin:solid/typescript',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: './tsconfig.json',
+    sourceType: 'module',
+    ecmaVersion: 'latest',
+  },
+  plugins: ['solid', 'simple-import-sort'],
+  rules: {
+    '@typescript-eslint/consistent-type-imports': 'error',
+    '@typescript-eslint/indent': 0,
+    // Sometimes this rule decreases readability.
+    'arrow-body-style': 0,
+    'consistent-return': 0,
+    'function-paren-newline': 0,
+
+    // We use special module resolution, that's why we need extensions.
+    'import/extensions': 0,
+    'import/first': 'error',
+    'import/newline-after-import': 'error',
+    // It's okay to use cycle imports.
+    'import/no-cycle': 0,
+    'import/no-duplicates': 'error',
+    'import/no-empty-named-blocks': 'error',
+    'import/no-mutable-exports': 0,
+    'import/no-self-import': 'error',
+    'import/no-unresolved': 0,
+    'import/order': 0,
+
+    // We don't use default exports anywhere.
+    'import/prefer-default-export': 0,
+
+    'linebreak-style': 0,
+    'no-await-in-loop': 0,
+    'no-console': 0,
+    'no-continue': 0,
+    'no-multiple-empty-lines': ['error', {
+      max: 1,
+      maxEOF: 1,
+      maxBOF: 0,
+    }],
+    'no-nested-ternary': 0,
+    'no-void': 0,
+    'no-duplicate-imports': 0,
+    'object-curly-newline': ['error', { consistent: true }],
+
+    'operator-linebreak': 0,
+
+    // Simple sort.
+    // https://github.com/lydell/eslint-plugin-simple-import-sort?tab=readme-ov-file#custom-grouping
+    'simple-import-sort/exports': 'error',
+    'simple-import-sort/imports': ['error', {
+      groups: [
+        // Node.js builtins prefixed with `node:`.
+        // node:fs
+        regexp(/^node:/),
+
+        // Packages.
+        // solid-js
+        regexp(/^@?\w/),
+
+        // Tsconfig alias.
+        // ~/helpers
+        regexp(/^~\//),
+
+        // Parent imports.
+        // ../Typography.js
+        regexp(/^\.\.\//),
+
+        // Current folder imports.
+        // ./utils.js
+        regexp(/^\.\/.+\.(?!s?css)/),
+
+        // Styles.
+        // ./Typography.css
+        [/\.css$/.source],
+      ],
+    }],
+  },
+};

.github/workflows/github-pages-deploy.yml

@@ -0,0 +1,61 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ['master']
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        id: pnpm-install
+        with:
+          version: 8
+          run_install: true
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          # Upload dist repository
+          path: './dist'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

.gitignore

@@ -0,0 +1,4 @@
+.idea
+*.pem
+node_modules
+dist

README.md

@@ -0,0 +1,155 @@
+# Telegram Mini Apps Solid.js Boilerplate
+
+This boilerplate demonstrates how developers can implement a single-page application on the Telegram
+Mini Apps platform using the following technologies:
+
+- [Solid.js](https://www.solidjs.com/)
+- [TON Connect](https://docs.ton.org/develop/dapps/ton-connect/overview)
+- [TypeScript](https://www.typescriptlang.org/)
+- [@tma.js SDK](https://docs.telegram-mini-apps.com/packages/tma-js-sdk)
+- [Vite](https://vitejs.dev/)
+
+> This boilerplate was created using [pnpm](https://pnpm.io/). Therefore, it is required to use
+> it for this project as well.
+
+## First Start
+
+If you have just cloned this template, you should install the project dependencies using the
+command:
+
+```Bash
+pnpm i
+```
+
+## Scripts
+
+This project contains the following scripts:
+
+- `dev`. Runs the application in development mode.
+- `build`. Builds the application for production.
+- `lint`. Runs [eslint](https://eslint.org/) to ensure the code quality meets the required
+  standards.
+- `deploy`. Deploys the application to GitHub Pages.
+
+To run a script, use the `pnpm run` command:
+
+```Bash
+pnpm run {script}
+# Example: pnpm run build
+```
+
+## Running
+
+The first important thing to note here is that the application should always be launched in the
+context of Telegram application. You can't just run the application and open it directly in your
+browser via `http://localhost:3000`. Opening application this way will surely lead to errors, as long
+as this environment does not provide the required Telegram Mini Apps functionality.
+
+Telegram Mini Apps environment could be any specified
+in the [documentation](https://docs.telegram-mini-apps.com/platform/about#supported-applications).
+
+So, before starting the application, make sure you have already created it in the Telegram
+system. Here is the [guide](https://docs.telegram-mini-apps.com/platform/creating-new-app) how to do it.
+
+When application is created successfully, run it using the `dev` script and open inside Telegram:
+
+```Bash
+pnpm run dev
+```
+
+## Deploying
+
+This boilerplate uses GitHub Pages as the way to host the application externally. GitHub Pages provides a CDN
+which will let your users receive the application rapidly. Alternatively, you could use such services
+as [Heroku](https://www.heroku.com/) or [Vercel](https://vercel.com).
+
+### GitHub Workflow
+
+To simplify the process of deployment, this boilerplate contains already
+written [GitHub workflow](.github/workflows/github-pages-deploy.yml) to deploy the project automatically in case, some
+content was pushed to the `master` branch.
+
+To let this workflow work properly, it is required create a new environment (or edit the existing one) in the GitHub
+repository Settings with the name `github-pages`. Then, add the `master` branch to the list of deployment branches.
+
+Environments settings could be find using this URL: `https://github.com/{username}/{repository}/settings/environments`
+
+![img.png](.github/deployment-branches.png)
+
+In case, you don't want to do it automatically, or you don't use GitHub as the project codebase, just remove the
+`.github` directory.
+
+### GitHub Web Interface
+
+Alternatively, developers are able to configure the automatic deployment using GitHub web interface. To use it,
+follow the link: `https://github.com/{username}/{repository}/settings/pages`.
+
+### Manual Deployment
+
+This boilerplate uses the [gh-pages](https://www.npmjs.com/package/gh-pages) tool, which allows deploying your
+application right from your PC.
+
+#### Configuring
+
+Before running the deployment process, ensure that you have done the following:
+
+1. Replaced the `homepage` value in `package.json`. The GitHub Pages deploy tool uses this value to
+   determine the related GitHub project.
+2. Replaced the `base` value in `vite.config.ts` and have set it to the name of your GitHub
+   repository. Vite will use this value when creating paths to static assets.
+
+For instance, if your GitHub username is `telegram-mini-apps` and the repository name
+is `is-awesome`, the value in the `homepage` field should be the following:
+
+```json
+{
+    "homepage": "https://telegram-mini-apps.github.io/is-awesome"
+}
+```
+
+And `vite.config.ts` should have this content:
+
+```ts
+export default defineConfig({
+    base: '/is-awesome/',
+    // ...
+});
+```
+
+You can find more information on configuring the deployment in the `gh-pages`
+[docs](https://github.com/tschaub/gh-pages?tab=readme-ov-file#github-pages-project-sites).
+
+#### Before Deploying
+
+Before deploying the application, make sure that you've built it and going to deploy the fresh
+static files:
+
+```bash
+pnpm run build
+```
+
+Then, run the deployment process, using the `deploy` script:
+
+```Bash
+pnpm run deploy
+```
+
+After the deployment completed successfully, visit the page with data according to your
+username and repository name. Here is the page link example using the data mentioned above:
+https://telegram-mini-apps.github.io/is-awesome
+
+## TON Connect
+
+This boilerplate uses the [TON Connect](https://docs.ton.org/develop/dapps/ton-connect/overview)
+project to showcase how developers could integrate TON cryptocurrency-related functionality.
+
+The TON Connect manifest used in this boilerplate is located in the `public` folder along with all
+publicly available static files. Don't forget
+to [configure](https://docs.ton.org/develop/dapps/ton-connect/manifest) this file according to your
+project information.
+
+## Useful Links
+
+- [Platform documentation](https://docs.telegram-mini-apps.com/)
+- [@tma.js/sdk-solid documentation](https://docs.telegram-mini-apps.com/packages/tma-js-sdk-solid)
+- [Telegram developers community chat](https://t.me/devs)

index.html

@@ -0,0 +1,15 @@
+<!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" />
+    <title>Solid App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+    <script src="/src/index.tsx" type="module"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,45 @@
+{
+  "name": "my-application",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "main": "index.js",
+  "homepage": "https://telegram-mini-apps.github.io/solidjs-template",
+  "scripts": {
+    "deploy": "gh-pages -d dist",
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix",
+    "preview": "vite preview",
+    "predeploy": "pnpm run build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@solidjs/router": "^0.13.1",
+    "@tma.js/sdk": "^1.5.1",
+    "@tma.js/sdk-solid": "^2.0.1",
+    "@tonconnect/ui": "^2.0.0",
+    "eruda": "^3.0.1",
+    "solid-js": "^1.8.16"
+  },
+  "devDependencies": {
+    "@types/node": "^20.12.5",
+    "@typescript-eslint/eslint-plugin": "^7.6.0",
+    "@typescript-eslint/parser": "^7.6.0",
+    "eslint": "^8.0.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-airbnb-typescript": "^18.0.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-simple-import-sort": "^12.0.0",
+    "eslint-plugin-solid": "^0.13.2",
+    "gh-pages": "^6.1.1",
+    "solid-devtools": "^0.30.1",
+    "typescript": "^5.4.4",
+    "vite": "^5.2.8",
+    "vite-plugin-solid": "^2.10.2",
+    "vite-tsconfig-paths": "^4.3.2"
+  }
+}