From f15990f9dea0bbf9a55d49152beed17cab937fb4 Mon Sep 17 00:00:00 2001 From: space-nuko <24979496+space-nuko@users.noreply.github.com> Date: Fri, 28 Apr 2023 14:06:21 -0700 Subject: [PATCH] Mobile version view --- index.html | 25 ++ jsconfig.json | 1 - src/app.html => mobile/index.html | 9 +- package.json | 6 +- pnpm-lock.yaml | 86 +++++-- src/App.svelte | 377 +++++++++++++++++++++++++++++ src/AppMobile.svelte | 76 ++++++ src/about.svelte | 9 + src/home.svelte | 10 + src/lib/components/ComfyApp.svelte | 12 +- src/login.svelte | 9 + src/main-desktop.ts | 7 + src/main-mobile.ts | 30 +++ src/mobile/index.html | 14 ++ svelte.config.js | 7 - tsconfig.json | 12 +- tsconfig.node.json | 9 + vite.config.ts | 39 ++- 18 files changed, 684 insertions(+), 54 deletions(-) create mode 100644 index.html rename src/app.html => mobile/index.html (65%) create mode 100644 src/App.svelte create mode 100644 src/AppMobile.svelte create mode 100644 src/about.svelte create mode 100644 src/home.svelte create mode 100644 src/login.svelte create mode 100644 src/main-desktop.ts create mode 100644 src/main-mobile.ts create mode 100644 src/mobile/index.html create mode 100644 tsconfig.node.json diff --git a/index.html b/index.html new file mode 100644 index 0000000..97ded2b --- /dev/null +++ b/index.html @@ -0,0 +1,25 @@ + + + + + + + + + + + +
+ + + diff --git a/jsconfig.json b/jsconfig.json index fe45e13..3db19e3 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -1,5 +1,4 @@ { - "extends": "./.svelte-kit/tsconfig.json", "compilerOptions": { "allowJs": true, "checkJs": true, diff --git a/src/app.html b/mobile/index.html similarity index 65% rename from src/app.html rename to mobile/index.html index 8c8df3e..fa16259 100644 --- a/src/app.html +++ b/mobile/index.html @@ -1,14 +1,15 @@ + - + - %sveltekit.head% - -
%sveltekit.body%
+ +
+ diff --git a/package.json b/package.json index 813f71c..fd2c54b 100644 --- a/package.json +++ b/package.json @@ -15,8 +15,6 @@ "build:css": "pollen -c gradio/js/theme/src/pollen.config.cjs && mv src/pollen.css node_modules/@gradio/theme/src" }, "devDependencies": { - "@sveltejs/adapter-auto": "^2.0.0", - "@sveltejs/kit": "^1.15.2", "eslint": "^8.37.0", "eslint-config-prettier": "^8.8.0", "eslint-plugin-svelte3": "^4.0.0", @@ -45,7 +43,11 @@ "@litegraph-ts/core": "workspace:*", "@litegraph-ts/nodes-basic": "workspace:*", "@litegraph-ts/tsconfig": "workspace:*", + "@sveltejs/vite-plugin-svelte": "^2.1.1", + "@tsconfig/svelte": "^4.0.1", "events": "^3.3.0", + "framework7": "^8.0.3", + "framework7-svelte": "^8.0.3", "pollen-css": "^4.6.2", "radix-icons-svelte": "^1.2.1", "svelte-preprocess": "^5.0.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9dbdf4e..4f34575 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -40,9 +40,21 @@ importers: '@litegraph-ts/tsconfig': specifier: workspace:* version: link:litegraph/packages/tsconfig + '@sveltejs/vite-plugin-svelte': + specifier: ^2.1.1 + version: 2.1.1(svelte@3.58.0)(vite@4.3.1) + '@tsconfig/svelte': + specifier: ^4.0.1 + version: 4.0.1 events: specifier: ^3.3.0 version: 3.3.0 + framework7: + specifier: ^8.0.3 + version: 8.0.3 + framework7-svelte: + specifier: ^8.0.3 + version: 8.0.3 pollen-css: specifier: ^4.6.2 version: 4.6.2 @@ -68,12 +80,6 @@ importers: specifier: ^1.0.5 version: 1.0.5(vite@4.3.1) devDependencies: - '@sveltejs/adapter-auto': - specifier: ^2.0.0 - version: 2.0.0(@sveltejs/kit@1.15.2) - '@sveltejs/kit': - specifier: ^1.15.2 - version: 1.15.2(svelte@3.58.0)(vite@4.3.1) eslint: specifier: ^8.37.0 version: 8.37.0 @@ -1988,15 +1994,6 @@ packages: import-meta-resolve: 2.2.2 dev: true - /@sveltejs/adapter-auto@2.0.0(@sveltejs/kit@1.15.2): - resolution: {integrity: sha512-b+gkHFZgD771kgV3aO4avHFd7y1zhmMYy9i6xOK7m/rwmwaRO8gnF5zBc0Rgca80B2PMU1bKNxyBTHA14OzUAQ==} - peerDependencies: - '@sveltejs/kit': ^1.0.0 - dependencies: - '@sveltejs/kit': 1.15.2(svelte@3.58.0)(vite@4.3.1) - import-meta-resolve: 2.2.2 - dev: true - /@sveltejs/kit@1.15.2(svelte@3.58.0)(vite@4.3.1): resolution: {integrity: sha512-rLNxZrjbrlPf8AWW8GAU4L/Vvu17e9v8EYl7pUip7x72lTft7RcxeP3z7tsrHpMSBBxC9o4XdKzFvz1vMZyXZw==} engines: {node: ^16.14 || >=18} @@ -2006,7 +2003,7 @@ packages: svelte: ^3.54.0 vite: ^4.0.0 dependencies: - '@sveltejs/vite-plugin-svelte': 2.1.0(svelte@3.58.0)(vite@4.3.1) + '@sveltejs/vite-plugin-svelte': 2.1.1(svelte@3.58.0)(vite@4.3.1) '@types/cookie': 0.5.1 cookie: 0.5.0 devalue: 4.3.0 @@ -2025,8 +2022,8 @@ packages: - supports-color dev: true - /@sveltejs/vite-plugin-svelte@2.1.0(svelte@3.58.0)(vite@4.3.1): - resolution: {integrity: sha512-Bc9A8mtTGlhTICdLL/aZ+jyHI3kwtkcXremOH5xwjbNNKOTOtY8nMyG8/oZ5KK8IuUfAn1WL58Bp2tofDJBW0w==} + /@sveltejs/vite-plugin-svelte@2.1.1(svelte@3.58.0)(vite@4.3.1): + resolution: {integrity: sha512-7YeBDt4us0FiIMNsVXxyaP4Hwyn2/v9x3oqStkHU3ZdIc5O22pGwUwH33wUqYo+7Itdmo8zxJ45Qvfm3H7UUjQ==} engines: {node: ^14.18.0 || >= 16} peerDependencies: svelte: ^3.54.0 @@ -2042,7 +2039,6 @@ packages: vitefu: 0.2.4(vite@4.3.1) transitivePeerDependencies: - supports-color - dev: true /@ts-morph/common@0.18.1: resolution: {integrity: sha512-RVE+zSRICWRsfrkAw5qCAK+4ZH9kwEFv5h0+/YeHTLieWP7F4wWq4JsKFuNWG+fYh/KF+8rAtgdj5zb2mm+DVA==} @@ -2053,6 +2049,10 @@ packages: path-browserify: 1.0.1 dev: false + /@tsconfig/svelte@4.0.1: + resolution: {integrity: sha512-B+XlGpmuAQzJqDoBATNCvEPqQg0HkO7S8pM14QDI5NsmtymzRexQ1N+nX2H6RTtFbuFgaZD4I8AAi8voGg0GLg==} + dev: false + /@types/argparse@1.0.38: resolution: {integrity: sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==} dev: false @@ -3146,6 +3146,12 @@ packages: esutils: 2.0.3 dev: true + /dom7@4.0.6: + resolution: {integrity: sha512-emjdpPLhpNubapLFdjNL9tP06Sr+GZkrIHEXLWvOGsytACUrkbeIdjO5g77m00BrHTznnlcNqgmn7pCN192TBA==} + dependencies: + ssr-window: 4.0.2 + dev: false + /ecc-jsbn@0.1.2: resolution: {integrity: sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==} dependencies: @@ -3801,6 +3807,21 @@ packages: resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==} dev: true + /framework7-svelte@8.0.3: + resolution: {integrity: sha512-SHirFqZBvm9E989Gyy59+pdBZdamZmqxLc/hklvorsY8llKpPuPBXbcS+fGvujvuhDq0fHHmN5tbLqYUPJ9Cyg==} + dev: false + + /framework7@8.0.3: + resolution: {integrity: sha512-5DGd9J4OdTUn9hfrRaxDXYXF4hx2RAV+xy+9tzq0+R5d6DgjeE/WkqJ5ElDToww9IVAsafZcRwZodd+4a0wr/Q==} + dependencies: + dom7: 4.0.6 + htm: 3.1.1 + path-to-regexp: 6.2.1 + skeleton-elements: 4.0.1 + ssr-window: 4.0.2 + swiper: 9.2.4 + dev: false + /fs-extra@10.1.0: resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==} engines: {node: '>=12'} @@ -3992,6 +4013,10 @@ packages: dependencies: function-bind: 1.1.1 + /htm@3.1.1: + resolution: {integrity: sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ==} + dev: false + /html-escaper@2.0.2: resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==} dev: true @@ -4724,7 +4749,6 @@ packages: /kleur@4.1.5: resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==} engines: {node: '>=6'} - dev: true /kolorist@1.8.0: resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==} @@ -4839,7 +4863,6 @@ packages: engines: {node: '>=12'} dependencies: '@jridgewell/sourcemap-codec': 1.4.15 - dev: true /make-dir@3.1.0: resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==} @@ -5143,6 +5166,10 @@ packages: /path-parse@1.0.7: resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==} + /path-to-regexp@6.2.1: + resolution: {integrity: sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==} + dev: false + /path-type@4.0.0: resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==} engines: {node: '>=8'} @@ -5648,6 +5675,10 @@ packages: resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==} dev: true + /skeleton-elements@4.0.1: + resolution: {integrity: sha512-T7YSF/Vu/raUcM6v3HiE4VSY/OvrNflg8Dur3Zza6VVJkq4slxm4pJRpGLNhoOfblIPZLQKh1cu7ADKveyqm/Q==} + dev: false + /slash@3.0.0: resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==} engines: {node: '>=8'} @@ -5716,6 +5747,10 @@ packages: tweetnacl: 0.14.5 dev: false + /ssr-window@4.0.2: + resolution: {integrity: sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==} + dev: false + /stack-utils@2.0.6: resolution: {integrity: sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==} engines: {node: '>=10'} @@ -5925,7 +5960,6 @@ packages: svelte: '>=3.19.0' dependencies: svelte: 3.58.0 - dev: true /svelte-i18n@3.3.13(svelte@3.58.0): resolution: {integrity: sha512-RQM+ys4+Y9ztH//tX22H1UL2cniLNmIR+N4xmYygV6QpQ6EyQvloZiENRew8XrVzfvJ8HaE8NU6/yurLkl7z3g==} @@ -6134,6 +6168,13 @@ packages: resolution: {integrity: sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==} engines: {node: '>= 8'} + /swiper@9.2.4: + resolution: {integrity: sha512-L7y3K/iiMXNYQ94FbfcJn7jex4QPnS4+voXGupTdC+UHW4XrR40QDdm4c9hXJ+Br0Il7PP0vP1W3goM9/Ly6Sg==} + engines: {node: '>= 4.7.0'} + dependencies: + ssr-window: 4.0.2 + dev: false + /sync-request@6.1.0: resolution: {integrity: sha512-8fjNkrNlNCrVc/av+Jn+xxqfCjYaBoHqCsDz6mt030UMxJGr+GSfCV1dQt2gRtlL63+VPidwDVLr7V2OcTSdRw==} engines: {node: '>=8.0.0'} @@ -7040,7 +7081,6 @@ packages: optional: true dependencies: vite: 4.3.1(@types/node@18.16.0)(sass@1.61.0) - dev: true /vitest@0.25.8(sass@1.61.0): resolution: {integrity: sha512-X75TApG2wZTJn299E/TIYevr4E9/nBo1sUtZzn0Ci5oK8qnpZAZyhwg0qCeMSakGIWtc6oRwcQFyFfW14aOFWg==} diff --git a/src/App.svelte b/src/App.svelte new file mode 100644 index 0000000..8e91652 --- /dev/null +++ b/src/App.svelte @@ -0,0 +1,377 @@ + + + + + diff --git a/src/AppMobile.svelte b/src/AppMobile.svelte new file mode 100644 index 0000000..06ec893 --- /dev/null +++ b/src/AppMobile.svelte @@ -0,0 +1,76 @@ + + + + + + + + diff --git a/src/about.svelte b/src/about.svelte new file mode 100644 index 0000000..3b652ea --- /dev/null +++ b/src/about.svelte @@ -0,0 +1,9 @@ + + + + + ... + + diff --git a/src/home.svelte b/src/home.svelte new file mode 100644 index 0000000..41f6034 --- /dev/null +++ b/src/home.svelte @@ -0,0 +1,10 @@ + + + + ... + About Page + Login Page + + diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte index f163e69..ca48c4e 100644 --- a/src/lib/components/ComfyApp.svelte +++ b/src/lib/components/ComfyApp.svelte @@ -13,11 +13,11 @@ import { download } from "$lib/utils" import { LGraph, LGraphNode } from "@litegraph-ts/core"; - import LightboxModal from "./LightboxModal.svelte"; - import { Block } from "@gradio/atoms"; - import ComfyQueue from "./ComfyQueue.svelte"; - import type { ComfyAPIStatus } from "$lib/api"; - import queueState from "$lib/stores/queueState"; + import LightboxModal from "./LightboxModal.svelte"; + import { Block } from "@gradio/atoms"; + import ComfyQueue from "./ComfyQueue.svelte"; + import type { ComfyAPIStatus } from "$lib/api"; + import queueState from "$lib/stores/queueState"; let app: ComfyApp = undefined; let imageViewer: ImageViewer; @@ -102,7 +102,7 @@ onMount(async () => { app = new ComfyApp(); -// TODO dedup + // TODO dedup app.eventBus.on("nodeAdded", nodeState.nodeAdded); app.eventBus.on("nodeRemoved", nodeState.nodeRemoved); app.eventBus.on("configured", nodeState.configureFinished); diff --git a/src/login.svelte b/src/login.svelte new file mode 100644 index 0000000..4b00a0e --- /dev/null +++ b/src/login.svelte @@ -0,0 +1,9 @@ + + + + + ... + + diff --git a/src/main-desktop.ts b/src/main-desktop.ts new file mode 100644 index 0000000..2a9deb9 --- /dev/null +++ b/src/main-desktop.ts @@ -0,0 +1,7 @@ +import App from './App.svelte'; + +const app = new App({ + target: document.getElementById('app'), +}) + +export default app; diff --git a/src/main-mobile.ts b/src/main-mobile.ts new file mode 100644 index 0000000..e27966e --- /dev/null +++ b/src/main-mobile.ts @@ -0,0 +1,30 @@ +import AppMobile from './AppMobile.svelte'; +import Framework7 from 'framework7/lite-bundle'; +import Framework7Svelte from 'framework7-svelte'; +import { f7 } from 'framework7-svelte'; + + +Framework7.use(Framework7Svelte); + +const app = new AppMobile({ + target: document.getElementById('app'), +}) + +function onBackKeyDown(e: Event) { + console.log(f7.view.current.router.currentRoute.name) + e.preventDefault(); + // Handle the back button + if(f7.view.current.router.currentRoute.name == 'index'){ + // exitApp(); + e.preventDefault(); + } else { + f7.dialog.close() + f7.view.main.router.back() + return false; + } +} + +document.addEventListener("backbutton", onBackKeyDown, false); +document.addEventListener("popstate", onBackKeyDown, false); + +export default app; diff --git a/src/mobile/index.html b/src/mobile/index.html new file mode 100644 index 0000000..c2e2ab8 --- /dev/null +++ b/src/mobile/index.html @@ -0,0 +1,14 @@ + + + + + + + + + + +
+ + + diff --git a/svelte.config.js b/svelte.config.js index 12fcdec..bf792da 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -1,13 +1,6 @@ -import adapter from '@sveltejs/adapter-auto'; import sveltePreprocess from "svelte-preprocess"; const config = { - kit: { - // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. - // If your environment is not supported or you settled on a specific environment, switch out the adapter. - // See https://kit.svelte.dev/docs/adapters for more information about adapters. - adapter: adapter() - }, preprocess: [ sveltePreprocess({ typescript: { diff --git a/tsconfig.json b/tsconfig.json index 136c663..0c74860 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,3 +1,13 @@ { - "extends": "./.svelte-kit/tsconfig.json" + "extends": "@tsconfig/svelte/tsconfig.json", + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "module": "ESNext", + "resolveJsonModule": true, + "allowJs": true, + "checkJs": true + }, + "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"], + "references": [{ "path": "./tsconfig.node.json" }] } diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000..494bfe0 --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler" + }, + "include": ["vite.config.ts"] +} diff --git a/vite.config.ts b/vite.config.ts index f1f02e4..4898666 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,26 +1,45 @@ -import { sveltekit } from '@sveltejs/kit/vite'; +import { svelte } from '@sveltejs/vite-plugin-svelte' import { defineConfig } from 'vitest/config'; +import { resolve } from 'path'; import tsconfigPaths from 'vite-tsconfig-paths'; import FullReload from 'vite-plugin-full-reload'; export default defineConfig({ clearScreen: false, plugins: [ - // tsconfigPaths({ loose: true }), - sveltekit(), + svelte(), // FullReload(["src/**/*.{js,ts,svelte}"]) ], + resolve: { + alias:{ + '$lib': resolve(__dirname, './src/lib'), + }, + }, build: { - sourcemap: true, + sourcemap: true, + rollupOptions: { + input: { + main: resolve(__dirname, "index.html"), + mobile: resolve(__dirname, 'mobile/index.html') + } + }, + }, server: { port: 3000, - fs: { - allow: [ - "./gradio", - "./litegraph", - ] - } + + hmr: { + clientPort: 443, + }, + // fs: { + // allow: [ + // "src", + // "mobile", + // "gradio", + // "litegraph", + // "node_modules", + // ] + // } }, test: { include: ['src/**/*.{test,spec}.{js,ts}']