-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
BREAKING CHANGE: rewrite to preact (#76)
- Loading branch information
Showing
84 changed files
with
4,197 additions
and
2,834 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,68 +1,32 @@ | ||
| module.exports = { | ||
| env: { | ||
| browser: true, | ||
| es2021: true, | ||
| }, | ||
| extends: ['eslint:recommended', 'plugin:preact/recommended', 'prettier'], | ||
| parser: '@typescript-eslint/parser', | ||
| plugins: ['react', '@typescript-eslint', '@typescript-eslint/eslint-plugin'], | ||
| extends: ['airbnb', 'airbnb-typescript'], | ||
| parserOptions: { | ||
| ecmaVersion: 'latest', | ||
| ecmaVersion: 2021, | ||
| sourceType: 'module', | ||
| project: ['./tsconfig.json'], | ||
| }, | ||
| settings: { | ||
| react: { | ||
| version: '^18.2.0', | ||
| }, | ||
| env: { | ||
| browser: true, | ||
| es6: true, | ||
| }, | ||
| plugins: ['@typescript-eslint', 'preact', 'prettier'], | ||
| rules: { | ||
| quotes: ['error', 'single'], | ||
| semi: [1, 'always'], | ||
| 'max-len': ['warn', { code: 150 }], | ||
| "no-unused-vars": "off", | ||
| "@typescript-eslint/no-unused-vars": [ | ||
| "error", | ||
| { "argsIgnorePattern": "^_" } | ||
| ], | ||
| "prettier/prettier": "error", | ||
| "prefer-arrow-callback": "error", | ||
| "react/jsx-no-bind": "off", | ||
| "no-console": "off", | ||
| }, | ||
| overrides: [ | ||
| { | ||
| files: ['bin/*.js', 'lib/*.js', '*.ts', '*.tsx'], | ||
| extends: [ | ||
| 'plugin:@typescript-eslint/recommended', | ||
| 'plugin:@typescript-eslint/recommended-requiring-type-checking', | ||
| ], | ||
| settings: { | ||
| react: { | ||
| version: "^17.0", | ||
| }, | ||
| { | ||
| files: ['*.tsx', '*.ts'], | ||
| rules: { | ||
| 'linebreak-style': 'off', | ||
| 'import/prefer-default-export': 'off', | ||
| '@typescript-eslint/no-non-null-assertion': 'off', | ||
| 'react/react-in-jsx-scope': 'off', | ||
| '@typescript-eslint/no-misused-promises': 'off', | ||
| '@typescript-eslint/no-floating-promises': 'off', | ||
| 'react/require-default-props': 'off', | ||
| 'react/jsx-fragments': 'off', | ||
| 'no-console': 'off', | ||
| 'import/no-extraneous-dependencies': 'off', | ||
| // @see https://stackoverflow.com/questions/46735483/error-do-not-use-array-index-in-keys | ||
| // Обычно так делать нельзя, но в рамках нашего проекта - можно | ||
| // Т.к. наши массивы статичны и юзер не может как-либо менять порядок / удалять элементы, | ||
| // мы можем использовать индекс как key | ||
| 'react/no-array-index-key': 'off', | ||
| '@typescript-eslint/ban-ts-comment': 'off', | ||
| '@typescript-eslint/no-unsafe-member-access': 'off', | ||
| 'no-nested-ternary': 'off', | ||
| 'react/jsx-props-no-spreading': 'off', | ||
| 'no-param-reassign': 'off', | ||
| 'max-classes-per-file': 'off', | ||
| 'jsx-quotes': [2, 'prefer-single'], | ||
| 'react/function-component-definition': [2, { | ||
| namedComponents: 'arrow-function', | ||
| unnamedComponents: 'arrow-function', | ||
| }, | ||
| ], | ||
| }, | ||
| parserOptions: { | ||
| project: ['./tsconfig.json'], | ||
| }, | ||
| jest: { | ||
| version: 26, | ||
| }, | ||
| ], | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| { | ||
| "trailingComma": "es5", | ||
| "semi": false, | ||
| "singleQuote": true, | ||
| "useTabs": false | ||
| } |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"/> | ||
| <link rel="icon" type="image/svg+xml" href="/vite.svg"/> | ||
| <meta name="viewport" | ||
| content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"/> | ||
| <title>Vite + Preact + TS</title> | ||
| </head> | ||
| <body> | ||
| <div id="app"></div> | ||
| <script type="module" src="/src/main.tsx"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,64 +1,78 @@ | ||
| import { | ||
| AppRoot, PanelHeader, ScreenSpinner, SplitCol, SplitLayout, | ||
| } from '@vkontakte/vkui'; | ||
| import { lazy, useEffect, useState } from 'react'; | ||
| import { useActiveVkuiLocation, usePopout, useRouteNavigator } from '@vkontakte/vk-mini-apps-router'; | ||
| import { useInsets } from '@vkontakte/vk-bridge-react'; | ||
| import { MAIN_SETTINGS, VIEW_SCHEDULE } from './routes'; | ||
| import { getCookie } from './methods'; | ||
| import { Pages } from './types'; | ||
| import Suspense from './components/UI/Suspense'; | ||
| AppRoot, | ||
| PanelHeader, | ||
| ScreenSpinner, | ||
| SplitCol, | ||
| SplitLayout, | ||
| } from '@vkontakte/vkui' | ||
| import { | ||
| useActiveVkuiLocation, | ||
| usePopout, | ||
| useRouteNavigator, | ||
| } from '@vkontakte/vk-mini-apps-router' | ||
| import { useInsets } from '@vkontakte/vk-bridge-react' | ||
| import { lazy } from 'preact/compat' | ||
| import { useEffect, useState } from 'preact/hooks' | ||
| import { MAIN_SETTINGS, VIEW_SCHEDULE } from './routes' | ||
| import { Pages } from './types' | ||
| import Suspense from './components/UI/Suspense' | ||
|
|
||
| const ModalRoot = lazy(() => import('./modals/ModalRoot')); | ||
| const Epic = lazy(() => import('./components/UI/Epic')); | ||
| const ModalRoot = lazy(() => import('./modals/ModalRoot')) | ||
| const Epic = lazy(() => import('./components/UI/Epic')) | ||
|
|
||
| const App = () => { | ||
| const [isLoading, setIsLoading] = useState<boolean>(false); | ||
| const { view: activeView = MAIN_SETTINGS } = useActiveVkuiLocation(); | ||
| const routeNavigator = useRouteNavigator(); | ||
| const modals = <ModalRoot />; | ||
| const [isLoading, setIsLoading] = useState<boolean>(false) | ||
| const routeNavigator = useRouteNavigator() | ||
| const modals = <ModalRoot /> | ||
| const { view: activeView = MAIN_SETTINGS } = useActiveVkuiLocation() | ||
| const cookieValue = localStorage.getItem('cookie') | ||
|
|
||
| const routerPopout = usePopout(); | ||
| const vkBridgeInsets = useInsets() || undefined; | ||
| const routerPopout = usePopout() | ||
| const vkBridgeInsets = useInsets() || undefined | ||
|
|
||
| useEffect(() => { | ||
| getCookie().then(async (cookieValue) => { | ||
| const onRoute = async () => { | ||
| if (!cookieValue) { | ||
| await routeNavigator.replace('/'); | ||
| setIsLoading(false); | ||
| } else if ((cookieValue) && activeView === MAIN_SETTINGS) { | ||
| await routeNavigator.replace(`/${VIEW_SCHEDULE}`); | ||
| setIsLoading(false); | ||
| await routeNavigator.replace('/') | ||
| setIsLoading(false) | ||
| } else if (cookieValue && activeView === MAIN_SETTINGS) { | ||
| await routeNavigator.replace(`/${VIEW_SCHEDULE}`) | ||
| setIsLoading(false) | ||
| } | ||
| }); | ||
| }, [activeView, localStorage, window.location]); | ||
| } | ||
|
|
||
| const onStoryChange = async (currentView: Pages) => { | ||
| const cookieValue = await getCookie(); | ||
| onRoute() | ||
| }, [activeView, localStorage, window.location]) | ||
|
|
||
| const onStoryChange = async (currentView: Pages) => { | ||
| if (cookieValue) { | ||
| try { | ||
| await routeNavigator.push(`/${currentView}`); | ||
| return; | ||
| await routeNavigator.push(`/${currentView}`) | ||
| return | ||
| } catch (e) { | ||
| console.error(e); | ||
| console.error(e) | ||
| } | ||
| } | ||
| await routeNavigator.replace('/'); | ||
| }; | ||
| await routeNavigator.replace('/') | ||
| } | ||
|
|
||
| return ( | ||
| <AppRoot safeAreaInsets={vkBridgeInsets}> | ||
| <SplitLayout popout={routerPopout} modal={modals} header={<PanelHeader separator={false} />} style={{ justifyContent: 'center' }}> | ||
| <Suspense id='Epic'> | ||
| {isLoading && <ScreenSpinner size='large' />} | ||
| <SplitCol width='100%' maxWidth='700px' stretchedOnMobile autoSpaced> | ||
| <SplitLayout | ||
| popout={routerPopout} | ||
| modal={modals} | ||
| header={<PanelHeader separator={false} />} | ||
| style={{ justifyContent: 'center' }} | ||
| > | ||
| <Suspense id="Epic"> | ||
| {isLoading && <ScreenSpinner size="large" />} | ||
| <SplitCol width="100%" maxWidth="700px" stretchedOnMobile autoSpaced> | ||
| <Epic onStoryChange={onStoryChange} /> | ||
| </SplitCol> | ||
| </Suspense> | ||
| </SplitLayout> | ||
| </AppRoot> | ||
| ); | ||
| }; | ||
| ) | ||
| } | ||
|
|
||
| export default App; | ||
| export default App |
Oops, something went wrong.